views/index22.hbs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'IBM Plex Sans KR', sans-serif;
        }

    </style>
    <style>
        .spinner-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.7);
            z-index: 9999;
        }

        .spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

    </style>
    <title>Document</title>
</head>

<body>
    <nav>
        <h4>Node MySQL</h4>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/result">결과</a></li>
            {{#if user }}
                <li><a href="/profile">Profile</a></li>
                <li><a href="/auth/logout">Logout</a></li>
            {{else}}
                <li><a href="/login">login</a></li>
                <li><a href="/register">Register</a></li>
            {{/if}}
        </ul>
    </nav>

    <div id="spinner" class="spinner-overlay">
        <div class="spinner"></div>
    </div>

    <div class="container mt-4">
        <div class="jumbotron">
            <form action="/generate" method="POST">
                <div class="form-group">
                    <label for="mymbti">내 mbti:</label>
                    <input type="text" id="mymbti" name="mymbti" class="form-control" placeholder={{user.mbti}} disabled>
                    <label for=" member">상대 mbti</label>
                    <input type="text" id="member" name="member" class="form-control" placeholder="Enter a sentence" required onkeyup="var start = this.selectionStart; var end = this.selectionEnd; this.value = this.value.toUpperCase(); this.setSelectionRange(start, end);" min="4" max="4">
                </div>
                <div class="form-group">
                    <label for="word">Word:</label>
                    <input type="text" id="word" name="word" class="form-control" placeholder="Enter a word" required>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
    <script>
        window.onload = function() {
            const spinner = document.getElementById('spinner');
            if (spinner) {
                spinner.style.display = 'none';
            }
        };

    </script>



</body>

</html>