<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LiteDays</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="icon" href="../assets/icon.png" type="image/png">
</head>
<body class="bg-black text-white flex items-center justify-center h-screen">

<div class="w-full max-w-md p-8 bg-gray-800 rounded-lg shadow-lg">
    <h1 class="text-4xl font-extrabold text-center text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-purple-500 mb-6">
        вход
    </h1>

    <form id="login-form" class="space-y-4">
        <div>
            <label for="username" class="block text-sm font-semibold text-gray-300">Логин</label>
            <input type="text" id="username" name="username" class="w-full px-4 py-3 mt-2 bg-gray-700 text-white rounded-lg border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none" placeholder="Введите логин" required>
        </div>
        <div>
            <label for="password" class="block text-sm font-semibold text-gray-300">Пароль</label>
            <input type="password" id="password" name="password" class="w-full px-4 py-3 mt-2 bg-gray-700 text-white rounded-lg border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:outline-none" placeholder="Введите пароль" required>
        </div>
        <div class="text-center mt-4">
            <button type="submit" class="w-full py-3 px-4 bg-gradient-to-r from-green-500 to-blue-600 text-white font-semibold rounded-lg shadow-md hover:opacity-90 transition-opacity">
                войти
            </button>
        </div>
    </form>
</div>

<div id="error-message" class="fixed bottom-4 right-4 p-4 bg-red-600 text-white rounded-lg shadow-lg hidden backdrop-blur-md backdrop-opacity-60">
    <p class="text-sm font-semibold">Error: Auth gate auth.gate.mynameisvar.today not found</p>
</div>

<script>
    document.getElementById("login-form").addEventListener("submit", function(event) {
        event.preventDefault();

        const errorMessage = document.getElementById("error-message");
        errorMessage.classList.remove("hidden");

        setTimeout(function() {
            errorMessage.classList.add("hidden");
        }, 5000);
    });
</script>

</body>
</html>
