<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Netify</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        /* Estilos principais */
        body {
            font-family: 'Arial', sans-serif;
        }

        .toast {
            display: none;
            position: fixed;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #38a169; /* Cor verde */
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
            z-index: 10000;
            font-size: 16px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
            transition: opacity 0.5s ease;
        }

        .toast-error {
            display: none;
            position: fixed;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #e53e3e; /* Cor vermelha */
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
            z-index: 10000;
            font-size: 16px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
            transition: opacity 0.5s ease;
        }

        /* Estilo para o formulário e layout */
        .container {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
        }

        header {
            background: rgba(0, 0, 0, 0.7);
        }

        form input {
            background-color: #333;
            color: white;
            border: 1px solid #444;
            border-radius: 8px;
            transition: 0.3s;
        }

        form input:focus {
            outline: none;
            border-color: #4c6eff;
            background-color: #222;
        }

        form button {
            background-color: #4c6eff;
            border-radius: 8px;
            cursor: pointer;
        }

        form button:hover {
            background-color: #3950cc;
        }

        .bg-gradient-to-r {
            background: linear-gradient(90deg, rgba(85, 55, 176, 1) 0%, rgba(13, 4, 115, 1) 100%);
        }

        /* Tela de Carregamento */
        .loading-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }

        .loading-spinner {
            border: 4px solid #f3f3f3; /* Cinza claro */
            border-top: 4px solid #3498db; /* Azul */
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body class="bg-gradient-to-r from-indigo-900 via-purple-800 to-indigo-700">
    <div id="snow-container"></div>

    <!-- Mensagem de Sucesso -->
    <div id="toast-success" class="toast bg-green-500 hidden">
        Login bem-sucedido!
    </div>

    <!-- Mensagem de Erro -->
    <div id="toast-error" class="toast-error bg-red-500 hidden">
        Chave inválida!
    </div>

    <!-- Tela de Carregamento -->
    <div id="loading-overlay" class="loading-overlay">
        <div class="loading-spinner"></div>
    </div>

    <!-- Tela de Login -->
    <div class="flex flex-col items-center justify-center min-h-screen py-10">
        <div class="container mx-auto max-w-xl bg-white/10 p-8 rounded-lg backdrop-blur-xl">
            <h2 class="text-white text-4xl font-bold text-center">Faça o Login</h2>
            <p class="text-white text-sm text-center mt-2">Entre com sua key para acessar sua conta.</p>

            <form id="login-form" class="space-y-4 mt-6">
                <div>
                    <label for="api-key" class="text-white font-medium"></label>
                    <input type="text" id="api-key" class="w-full px-4 py-2 mt-2 rounded-lg bg-gray-800 text-white" placeholder="Sua key" required>
                </div>
                <button type="submit" class="w-full py-2 mt-4 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">Entrar</button>
            </form>

            <div class="text-center mt-4">
                <a href="https://discord.gg/gBHWgVnWxX" class="text-white text-sm hover:underline">Não tem uma chave? Clique aqui</a>
            </div>
        </div>
    </div>

    <footer class="bg-black text-white text-center py-4 mt-auto">
        <p>&copy; 2024 Netify - Todos os direitos reservados</p>
    </footer>

    <script>

    // Função de login com verificação da chave de API
    function login(event) {
        event.preventDefault(); // Evita o envio do formulário

        var apiKey = document.getElementById('api-key').value;

        // Exibe a tela de carregamento
        document.getElementById('loading-overlay').style.display = 'flex';

        // Simula uma verificação da chave de API (para teste, chave válida será "12345")
        setTimeout(function() {
            // Esconde a tela de carregamento
            document.getElementById('loading-overlay').style.display = 'none';

            // Verifica se a chave de API é válida
            if (apiKey === "123456789") {
                // Salva a chave de API no localStorage
                localStorage.setItem('apiKey', apiKey);

                // Exibe o Toast de Sucesso
                const successToast = document.getElementById('toast-success');
                successToast.classList.remove('hidden');
                setTimeout(function() {
                    successToast.classList.add('hidden');
                }, 3000); // O toast vai desaparecer após 3 segundos

                // Redireciona para a index.html após 3 segundos
                setTimeout(function() {
                    window.location.href = "gerar.html"; // Redireciona para a página inicial
                }, 3000);  // Espera 3 segundos antes de redirecionar
            } else {
                // Exibe o Toast de Erro
                const errorToast = document.getElementById('toast-error');
                errorToast.classList.remove('hidden');
                setTimeout(function() {
                    errorToast.classList.add('hidden');
                }, 3000);
            }
        }, 2000); // Simula um tempo de processamento de 2 segundos
    }

    // Adiciona o evento de submit ao formulário
    document.getElementById('login-form').addEventListener('submit', login);
</script>

</body>
</html>
