<!DOCTYPE html>
<html>

<head>
    <title>Login</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">


    <style>
        body {
            height: 100vh;
            background: linear-gradient(135deg, #1f1c2c, #928dab);
            display: flex;
            align-items: center;
            justify-content: center;
        }


        .login-box {

            width: 380px;
            background: white;
            padding: 35px;

            border-radius: 18px;

            box-shadow:
                0 15px 40px #0005;

        }


        .logo {

            width: 80px;
            height: 80px;

            background: #1f1c2c;
            color: white;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 50%;

            margin: auto;

            font-size: 32px;
            font-weight: bold;

        }


        .form-control {

            height: 48px;
            border-radius: 10px;

        }


        .btn-login {

            height: 48px;

            border-radius: 10px;

            background: #1f1c2c;
            color: white;

        }


        .btn-login:hover {

            background: #000;
            color: white;

        }
    </style>

</head>


<body>


    <div class="login-box">


        <div class="logo">
            G
        </div>


        <h3 class="text-center mt-3 mb-4">
            Welcome Back
        </h3>



        <form method="post" action="<?php echo base_url('DashboardController/check_login'); ?>">


            <div class="mb-3">

                <label>
                    Username
                </label>

                <input type="text" class="form-control" name="username" placeholder="Enter username" required>

            </div>




            <div class="mb-3">

                <label>
                    Password
                </label>


                <div class="input-group">

                    <input type="password" id="password" class="form-control" name="password" placeholder="Enter password" required>


                    <button type="button" class="btn btn-outline-secondary" onclick="showPass()">

                        👁

                    </button>

                </div>


            </div>



            <div class="d-grid">

                <button class="btn btn-login">
                    Login
                </button>

            </div>



        </form>


    </div>




    <script>


        function showPass() {

            let pass = document.getElementById("password");


            if (pass.type == "password") {
                pass.type = "text";
            }
            else {
                pass.type = "password";
            }


        }


    </script>



</body>

</html>