<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="glass-container">
        <div class="login-box">
            <h2>Login</h2>
            <form onsubmit="handleLogin(event)">
                <input type="text" id="username" name="username" required placeholder="Username">
                <input type="password" id="password" name="password" required placeholder="Password">

                <div class="options">
                    <input type="checkbox" id="remember" name="remember">
                    <label for="remember">Remember me</label>
                </div>

                <button type="submit">Login</button>
            </form>
        </div>
    </div>

    <script>
        const users = [
            { username: "admin", password: "admin123" },
            { username: "user1", password: "password1" },
            { username: "user2", password: "password2" }
        ];

        window.onload = function () {
            if (localStorage.getItem("rememberMe") === "true") {
                window.location.href = "main.html"; 
            }
        };

        function handleLogin(event) {
            event.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const remember = document.getElementById('remember').checked;

            const user = users.find(u => u.username === username && u.password === password);

            if (user) {
                if (remember) {
                    localStorage.setItem("rememberMe", "true");
                } else {
                    localStorage.setItem("rememberMe", "false");
                }
                window.location.href = "main.html"; 
            } else {
                alert("Invalid credentials");
            }
        }
    </script>
</body>
</html>
