<!DOCTYPE html>
<html>
<head>
    <title>Bhutan Uni CTF Login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html {
            height: 100%;
        }
        body {
            font-family: 'Segoe UI', sans-serif;
            font-size: 1rem;
            line-height: 1.6;
            height: 100%;
        }
        p {
            padding-bottom: 5px;
        }
        .wrap {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #fafafa;
        }
        .login-form {
            width: 350px;
            margin: 0 auto;
            border: 1px solid #ddd;
            padding: 2rem;
            background: #ffffff;
        }
        .form-input {
            background: #fafafa;
            border: 1px solid #eeeeee;
            padding: 12px;
            width: 100%;
        }
        .form-group {
            margin-bottom: 1rem;
        }
        .form-button {
            background: #69d2e7;
            border: 1px solid #ddd;
            color: #ffffff;
            padding: 10px;
            width: 100%;
            text-transform: uppercase;
        }
        .form-button:hover {
            background: #69c8e7;
        }
        .form-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        .form-footer {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <form class="login-form" id="loginForm" onsubmit="return checkLogin()">
            <div class="form-header">
                <p>Login to access the Bhutan Uni CTF</p>
            </div>

            <div class="form-group">
                <input name="username" type="text" id="username" class="form-input" autocapitalize="off" autocorrect="off" placeholder="username">
            </div>
            <div class="form-group">
                <input name="password" type="password" id="password" class="form-input" placeholder="password">
            </div>
            <div class="form-group">
                <button class="form-button" type="submit">Login</button>
            </div>
        </form>
    </div>

    <script>
        function checkLogin() {
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;


            if (username === "CTFUni") {

                if (! (
                    password.charAt(3) === '3' && password.charAt(1) === '0' && password.charAt(9) === '3' && password.charAt(8) === '1'
                    )
                ){
                    alert("Incorrect password. Please try again.");
                    return false;
                }

                var transformedPassword = password.replace(/3/g, "e").replace(/0/g, "o").replace(/1/g, "l");
                var sp = transformedPassword.split("_");

                if (
                    sp[0][3] === 'e' && sp[2][0] === 'b' && sp[2][4] === 'k' && sp[0][0] === 'C' && sp[1][0] == (Math.sqrt(70-6) - 4) &&sp[0][2] === 'd' && sp[2][3] === 'a' &&  sp[2][2] === 'e' && sp[2][1] === 'l' && sp[0][1] === 'o'
                ) {
                    alert("flag{h1dd3n_in_plain_s1ght}");
                    return false;
                } else {
                    alert("Incorrect password. Please try again.");
                    return false;
                }
            } else {
                alert("Unknown user. Please try again.");
                return false;
            }
        }
    </script>
</body>
</html>