<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registro - 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;
            background: linear-gradient(90deg, rgba(85, 55, 176, 1) 0%, rgba(13, 4, 115, 1) 100%);
            overflow: hidden;
            margin: 0;
            height: 100vh;
        }

        /* Estilos do Toast de Sucesso */
        .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;
        }

        /* Estilo do Toast de Erro */
        .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;
        }

        /* Efeito de Neve */
        #snow-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
            overflow: hidden;
        }

        .snowflake {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            opacity: 0.9;
            pointer-events: none;
            z-index: 9999;
            animation: snow 10s linear infinite;
        }

        @keyframes snow {
            0% {
                transform: translateY(-100px) translateX(0);
                opacity: 1;
            }
            100% {
                transform: translateY(calc(100vh + 100px)) translateX(100px);
                opacity: 0;
            }
        }

        /* Centralizar o painel de registro */
        .registration-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        /* Estilos do formulário de registro */
        .container {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            padding: 20px;
            border-radius: 8px;
            animation: slideIn 1s ease-in-out;
            max-width: 500px;
            width: 100%;
        }

        /* Animação para o formulário */
        @keyframes slideIn {
            0% {
                transform: translateY(-100px);
                opacity: 0;
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        form input {
            background-color: #333;
            color: white;
            border: 1px solid #444;
            border-radius: 8px;
            transition: 0.3s;
            width: 100%;
            padding: 10px;
            margin: 8px 0;
        }

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

        form button {
            background-color: #4c6eff;
            border-radius: 8px;
            cursor: pointer;
            width: 100%;
            padding: 12px;
            color: white;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }

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

        /* Links e textos */
        a {
            color: white;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        /* Estilo do botão "Entrar como admin" */
        .admin-login-btn {
            background-color: #ff5c5c;
            border-radius: 8px;
            cursor: pointer;
            width: 100%;
            padding: 12px;
            color: white;
            font-weight: bold;
            transition: background-color 0.3s ease;
            margin-top: 10px;
        }

        .admin-login-btn:hover {
            background-color: #ff3c3c;
        }

    </style>
</head>
<body>
    <div id="snow-container"></div>
    
    <!-- Toasts de sucesso e erro -->
    <div id="toast-success" class="toast">
        Registro bem-sucedido!
    </div>
    <div id="toast-error" class="toast-error">
        Falha no registro! Tente novamente.
    </div>

    <!-- Tela de Registro -->
    <div class="registration-container" id="registration-container" style="display: none;">
        <div class="container">
            <h2 class="text-white text-4xl font-bold text-center">Crie sua Conta</h2>
            <p class="text-white text-sm text-center mt-2">Preencha os dados abaixo para criar sua conta.</p>

            <form id="register-form" class="space-y-4 mt-6">
                <div>
                    <label for="register-email" class="text-white font-medium">Email</label>
                    <input type="email" id="register-email" placeholder="Seu email" required>
                </div>
                <div>
                    <label for="register-password" class="text-white font-medium">Senha</label>
                    <input type="password" id="register-password" placeholder="Coloque sua senha" required>
                </div>
                <div>
                    <label for="register-password-confirm" class="text-white font-medium">Confirme a Senha</label>
                    <input type="password" id="register-password-confirm" placeholder="Confirme sua senha" required>
                </div>
                <div class="text-white">
                    <label for="captcha-input" class="font-medium">Digite o código de verificação: </label>
                    <span id="captcha-display"></span>
                    <input type="text" id="captcha-input" placeholder="Código" required>
                </div>
                <button type="submit">Registrar</button>
            </form>

            <div class="text-center mt-4">
                <a href="login.html" class="text-white text-sm">Já tem uma conta? Clique aqui</a>
            </div>
        </div>
    </div>

    <script>
           // Função para bloquear ações de inspeção
    document.addEventListener('contextmenu', function (event) {
        event.preventDefault(); // Desabilita o menu de contexto (clique direito)
    });

 
    document.addEventListener('keydown', function (event) {
        if (event.key === 'F12' || (event.ctrlKey && (event.key === 'I' || event.key === 'U'))) {
            event.preventDefault();
        }
    });

           // Função para bloquear ações de inspeção
    document.addEventListener('contextmenu', function (event) {
        event.preventDefault(); // Desabilita o menu de contexto (clique direito)
    });

 
    document.addEventListener('keydown', function (event) {
        if (event.key === 'F12' || (event.ctrlKey && (event.key === 'I' || event.key === 'U'))) {
            event.preventDefault();
        }
    });

        // Função para gerar a neve
        function generateSnowflakes() {
            const snowContainer = document.getElementById('snow-container');
            const numSnowflakes = 50; // Número de flocos de neve
            for (let i = 0; i < numSnowflakes; i++) {
                const snowflake = document.createElement('div');
                snowflake.classList.add('snowflake');
                snowflake.style.width = `${Math.random() * 10 + 5}px`;
                snowflake.style.height = snowflake.style.width;
                snowflake.style.left = `${Math.random() * 100}%`;
                snowflake.style.animationDuration = `${Math.random() * 5 + 5}s`;
                snowContainer.appendChild(snowflake);
            }
        }

        // Função para gerar o CAPTCHA
        function generateCaptcha() {
            var captcha = Math.floor(Math.random() * 9000) + 1000; // Gera um número de 4 dígitos
            sessionStorage.setItem('captcha', captcha); // Armazena o CAPTCHA no sessionStorage
            document.getElementById('captcha-display').textContent = captcha; // Exibe o CAPTCHA
        }

        // Função de verificação de senha de admin
        function verifyAdminPassword() {
            var adminPassword = prompt("Digite a senha de administrador:");
            if (adminPassword === "krayo157dojobfazoeli") {
                // Exibe o formulário de registro se a senha estiver correta
                document.getElementById("registration-container").style.display = "block";
            } else {
                alert("Senha incorreta. Acesso negado.");
            }
        }

        // Função de registro
        function register(event) {
            event.preventDefault(); // Evita o envio do formulário

            var email = document.getElementById('register-email').value;
            var password = document.getElementById('register-password').value;
            var confirmPassword = document.getElementById('register-password-confirm').value;
            var captchaInput = document.getElementById('captcha-input').value;

            var captchaCode = sessionStorage.getItem('captcha');

            if (email === "" || password === "" || confirmPassword === "" || captchaInput === "") {
                alert("Preencha todos os campos, incluindo o CAPTCHA!");
                return;
            }

            if (password !== confirmPassword) {
                alert("As senhas não coincidem!");
                return;
            }

            if (captchaInput !== captchaCode) {
                alert("Código CAPTCHA incorreto!");
                return;
            }

            // Armazenando os dados do usuário no localStorage
            const users = JSON.parse(localStorage.getItem('users')) || [];
            users.push({ email, password });
            localStorage.setItem('users', JSON.stringify(users));

            // Exibe o Toast de Sucesso
            const successToast = document.getElementById('toast-success');
            successToast.style.display = 'block';
            successToast.style.opacity = '1';

            setTimeout(function() {
                successToast.style.opacity = '0';
                setTimeout(function() {
                    successToast.style.display = 'none';
                }, 3000);
            }, 3000);

            setTimeout(function() {
                window.location.href = 'login.html'; // Redireciona para a página de login
            }, 3000);
        }

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

        // Inicia a verificação de senha ao carregar a página
        window.onload = function() {
            verifyAdminPassword(); // Verifica a senha assim que a página carregar
            generateSnowflakes();
            generateCaptcha();
        };
    </script>
</body>
</html>
