Spaces:

death0074k
/

anycoder-297a0e71

Running

App Files Files Community

death0074k commited on Jan 17

Commit

1a95561

verified ·

1 Parent(s): c6383a9

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +849 -692

index.html CHANGED Viewed

@@ -1,724 +1,881 @@
 <!DOCTYPE html>
 <html lang="pt-BR">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login Interativo Moderno</title>
-    <!-- Importando ícones (FontAwesome) -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <!-- Importando fonte (Poppins) -->
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --primary-color: #4e54c8;
-            --secondary-color: #8f94fb;
-            --accent-color: #ff4b2b;
-            --text-color: #333;
-            --bg-color: #f6f5f7;
-            --white: #ffffff;
-            --error-color: #e74c3c;
-            --success-color: #2ecc71;
-            --transition-speed: 0.6s;
-        }
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-            background: #f6f5f7;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
-            height: 100vh;
-            overflow: hidden;
-            /* Fundo gradiente animado */
-            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
-            background-size: 400% 400%;
-            animation: gradientBG 15s ease infinite;
-        }
-        @keyframes gradientBG {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
-        }
-        /* --- Header / Branding --- */
-        header {
-            position: absolute;
-            top: 20px;
-            width: 100%;
-            text-align: center;
-            z-index: 10;
-        }
-        .brand-link {
-            text-decoration: none;
-            color: rgba(255, 255, 255, 0.9);
-            font-size: 0.9rem;
-            font-weight: 500;
-            background: rgba(0, 0, 0, 0.2);
-            padding: 8px 16px;
-            border-radius: 20px;
-            backdrop-filter: blur(5px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            transition: all 0.3s ease;
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .brand-link:hover {
-            background: rgba(255, 255, 255, 0.3);
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
-        }
-        /* --- Container Principal --- */
-        .container {
-            background-color: var(--white);
-            border-radius: 20px;
-            box-shadow: 0 14px 28px rgba(0,0,0,0.25),
-                        0 10px 10px rgba(0,0,0,0.22);
-            position: relative;
-            overflow: hidden;
-            width: 850px; /* Largura padrão desktop */
-            max-width: 100%;
-            min-height: 550px;
-            transition: all 0.3s ease;
-        }
-        /* --- Formulários --- */
-        .form-container {
-            position: absolute;
-            top: 0;
-            height: 100%;
-            transition: all var(--transition-speed) ease-in-out;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            padding: 0 50px;
-            text-align: center;
-            background-color: var(--white);
-        }
-        form {
-            background-color: var(--white);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            height: 100%;
-            width: 100%;
-        }
-        h1 {
-            font-weight: 700;
-            margin-bottom: 20px;
-            color: var(--text-color);
-        }
-        .social-container {
-            margin: 20px 0;
-        }
-        .social-container a {
-            border: 1px solid #ddd;
-            border-radius: 50%;
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            margin: 0 5px;
-            height: 40px;
-            width: 40px;
-            color: #333;
-            text-decoration: none;
-            transition: all 0.3s ease;
-        }
-        .social-container a:hover {
-            background-color: var(--primary-color);
-            color: white;
-            border-color: var(--primary-color);
-            transform: scale(1.1);
-        }
-        span {
-            font-size: 12px;
-            color: #888;
-            margin-bottom: 15px;
-        }
-        /* --- Inputs Modernos --- */
-        .input-group {
-            position: relative;
-            width: 100%;
-            margin: 8px 0;
-        }
-        .input-group input {
-            background-color: #eee;
-            border: none;
-            padding: 12px 15px;
-            padding-right: 40px; /* Espaço para o ícone */
-            width: 100%;
-            border-radius: 8px;
-            outline: none;
-            font-size: 14px;
-            transition: all 0.3s ease;
-        }
-        .input-group input:focus {
-            background-color: #e0e0e0;
-            box-shadow: 0 0 0 2px var(--secondary-color) inset;
-        }
-        /* Ícone de olho para senha */
-        .password-toggle {
-            position: absolute;
-            right: 15px;
-            top: 50%;
-            transform: translateY(-50%);
-            cursor: pointer;
-            color: #888;
-            font-size: 14px;
-            transition: color 0.3s;
-        }
-        .password-toggle:hover {
-            color: var(--primary-color);
-        }
-        a.forgot-pass {
-            color: #333;
-            font-size: 13px;
-            text-decoration: none;
-            margin: 15px 0;
-            border-bottom: 1px dashed transparent;
-            transition: border-bottom 0.3s;
-        }
-        a.forgot-pass:hover {
-            border-bottom: 1px dashed #333;
-        }
-        /* --- Botões --- */
-        button.action-btn {
-            border-radius: 50px;
-            border: 1px solid var(--accent-color);
-            background-color: var(--accent-color);
-            color: #ffffff;
-            font-size: 12px;
-            font-weight: bold;
-            padding: 12px 45px;
-            letter-spacing: 1px;
-            text-transform: uppercase;
-            transition: transform 80ms ease-in, background-color 0.3s, box-shadow 0.3s;
-            cursor: pointer;
-            margin-top: 10px;
-        }
-        button.action-btn:hover {
-            background-color: #ff2a00;
-            box-shadow: 0 5px 15px rgba(255, 75, 43, 0.4);
-        }
-        button.action-btn:active {
-            transform: scale(0.95);
-        }
-        button:disabled {
-            background-color: #ccc;
-            border-color: #ccc;
-            cursor: not-allowed;
-            box-shadow: none;
-        }
-        /* --- Lógica de Posicionamento (Desktop) --- */
-        .sign-in-container {
-            left: 0;
-            width: 50%;
-            z-index: 2;
-        }
-        .sign-up-container {
-            left: 0;
-            width: 50%;
-            opacity: 0;
-            z-index: 1;
-        }
-        /* Quando a classe .right-panel-active é adicionada ao container */
-        .container.right-panel-active .sign-in-container {
-            transform: translateX(100%);
-            opacity: 0;
-        }
-        .container.right-panel-active .sign-up-container {
-            transform: translateX(100%);
-            opacity: 1;
-            z-index: 5;
-            animation: show 0.6s;
-        }
-        @keyframes show {
-            0%, 49.99% {
-                opacity: 0;
-                z-index: 1;
-            }
-            50%, 100% {
-                opacity: 1;
-                z-index: 5;
-            }
-        }
-        /* --- Overlay (Painel Colorido) --- */
-        .overlay-container {
-            position: absolute;
-            top: 0;
-            left: 50%;
-            width: 50%;
-            height: 100%;
-            overflow: hidden;
-            transition: transform var(--transition-speed) ease-in-out;
-            z-index: 100;
-        }
-        .container.right-panel-active .overlay-container {
-            transform: translateX(-100%);
-        }
-        .overlay {
-            background: #ff416c;
-            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
-            background-repeat: no-repeat;
-            background-size: cover;
-            background-position: 0 0;
-            color: #ffffff;
-            position: relative;
-            left: -100%;
-            height: 100%;
-            width: 200%;
-            transform: translateX(0);
-            transition: transform var(--transition-speed) ease-in-out;
-        }
-        .container.right-panel-active .overlay {
-            transform: translateX(50%);
-        }
-        .overlay-panel {
-            position: absolute;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            padding: 0 40px;
-            text-align: center;
-            top: 0;
-            height: 100%;
-            width: 50%;
-            transform: translateX(0);
-            transition: transform var(--transition-speed) ease-in-out;
-        }
-        .overlay-left {
-            transform: translateX(-20%);
-        }
-        .container.right-panel-active .overlay-left {
-            transform: translateX(0);
-        }
-        .overlay-right {
-            right: 0;
-            transform: translateX(0);
-        }
-        .container.right-panel-active .overlay-right {
-            transform: translateX(20%);
-        }
-        .overlay-panel h1 {
-            color: white;
-            font-size: 2.5rem;
-        }
-        .overlay-panel p {
-            font-size: 14px;
-            font-weight: 300;
-            line-height: 20px;
-            letter-spacing: 0.5px;
-            margin: 20px 0 30px;
-        }
-        button.ghost {
-            background-color: transparent;
-            border-color: #ffffff;
-            border: 1px solid white;
-            color: white;
-            border-radius: 50px;
-            padding: 12px 45px;
-            font-weight: bold;
-            text-transform: uppercase;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-        button.ghost:hover {
-            background-color: white;
-            color: var(--primary-color);
-            transform: scale(1.05);
-        }
-        /* --- Toast Notification (Substituto do Alert) --- */
-        #toast-container {
-            position: fixed;
-            top: 80px;
-            right: 20px;
-            z-index: 1000;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-        }
-        .toast {
-            background: white;
-            padding: 15px 20px;
-            border-radius: 8px;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            min-width: 300px;
-            animation: slideIn 0.3s ease forwards;
-            border-left: 5px solid;
-        }
-        .toast.success { border-left-color: var(--success-color); }
-        .toast.error { border-left-color: var(--error-color); }
-        .toast i { font-size: 1.2rem; }
-        .toast.success i { color: var(--success-color); }
-        .toast.error i { color: var(--error-color); }
-        .toast-content h4 { font-size: 14px; margin-bottom: 2px; }
-        .toast-content p { font-size: 12px; color: #666; }
-        @keyframes slideIn {
-            from { transform: translateX(100%); opacity: 0; }
-            to { transform: translateX(0); opacity: 1; }
-        }
-        @keyframes fadeOut {
-            to { transform: translateX(100%); opacity: 0; }
-        }
-        /* --- Responsividade (Mobile) --- */
-        @media (max-width: 768px) {
-            .container {
-                width: 100%;
-                min-height: 100vh;
-                border-radius: 0;
-                box-shadow: none;
-                flex-direction: column;
-            }
-            /* No mobile, escondemos o overlay e usamos links internos */
-            .overlay-container {
-                display: none;
-            }
-            .form-container {
-                width: 100%;
-                padding: 0 30px;
-                position: absolute;
-                opacity: 0;
-                pointer-events: none;
-                transition: opacity 0.4s ease;
-                z-index: 1;
-            }
-            .form-container.active-mobile {
-                opacity: 1;
-                pointer-events: all;
-                z-index: 5;
-                position: relative;
-            }
-            .mobile-toggle {
-                display: block;
-                margin-top: 20px;
-                font-size: 14px;
-                color: var(--primary-color);
-                cursor: pointer;
-                text-decoration: underline;
-            }
-            /* Ajuste para desktop onde não deve aparecer */
-            .desktop-only {
-                display: none;
-            }
-        }
-        @media (min-width: 769px) {
-            .mobile-toggle {
-                display: none;
-            }
-        }
-    </style>
-</head>
-<body>
-    <!-- Header Obrigatório -->
-    <header>
-        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="brand-link">
-            <i class="fas fa-code"></i> Built with anycoder
-        </a>
-    </header>
-    <!-- Container de Notificações -->
-    <div id="toast-container"></div>
-    <!-- Container Principal do App -->
-    <div class="container" id="container">
-        <!-- Formulário de Cadastro -->
-        <div class="form-container sign-up-container" id="signUpFormContainer">
-            <form id="formSignUp">
-                <h1>Criar Conta</h1>
-                <div class="social-container">
-                    <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
-                    <a href="#" aria-label="Google"><i class="fab fa-google-plus-g"></i></a>
-                    <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
-                </div>
-                <span>ou use seu e-mail para cadastro</span>
-                <div class="input-group">
-                    <input type="text" placeholder="Nome" id="regName" required />
-                </div>
-                <div class="input-group">
-                    <input type="email" placeholder="E-mail" id="regEmail" required />
-                </div>
-                <div class="input-group">
-                    <input type="password" placeholder="Senha" id="regPassword" required />
-                    <i class="fas fa-eye password-toggle" onclick="togglePassword('regPassword', this)"></i>
-                </div>
-                <button type="submit" class="action-btn">Cadastrar</button>
-                <p class="mobile-toggle" onclick="showMobileLogin('in')">Já tem conta? Entre aqui</p>
-            </form>
-        </div>
-        <!-- Formulário de Login -->
-        <div class="form-container sign-in-container active-mobile" id="signInFormContainer">
-            <form id="formSignIn">
-                <h1>Entrar</h1>
-                <div class="social-container">
-                    <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
-                    <a href="#" aria-label="Google"><i class="fab fa-google-plus-g"></i></a>
-                    <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
-                </div>
-                <span>ou use sua conta</span>
-                <div class="input-group">
-                    <input type="email" placeholder="E-mail" id="loginEmail" required />
-                </div>
-                <div class="input-group">
-                    <input type="password" placeholder="Senha" id="loginPassword" required />
-                    <i class="fas fa-eye password-toggle" onclick="togglePassword('loginPassword', this)"></i>
-                </div>
-                <a href="#" class="forgot-pass" onclick="forgotPassword()">Esqueceu sua senha?</a>
-                <button type="submit" class="action-btn">Entrar</button>
-                <p class="mobile-toggle" onclick="showMobileLogin('up')">Não tem conta? Cadastre-se</p>
-            </form>
-        </div>
-        <!-- Container de Overlay (Animação Desktop) -->
-        <div class="overlay-container">
-            <div class="overlay">
-                <!-- Painel Esquerdo (Visível quando está no Cadastro) -->
-                <div class="overlay-panel overlay-left">
-                    <h1>Bem-vindo de volta!</h1>
-                    <p>Para se manter conectado conosco, faça login com suas informações pessoais</p>
-                    <button class="ghost" id="signIn">Entrar</button>
-                </div>
-                <!-- Painel Direito (Visível quando está no Login) -->
-                <div class="overlay-panel overlay-right">
-                    <h1>Olá, Visitante!</h1>
-                    <p>Insira seus dados pessoais e comece sua jornada conosco</p>
-                    <button class="ghost" id="signUp">Cadastrar</button>
-                </div>
-            </div>
         </div>
-    </div>
-    <script>
-        // --- Seleção de Elementos ---
-        const container = document.getElementById('container');
-        const signUpBtn = document.getElementById('signUp');
-        const signInBtn = document.getElementById('signIn');
-        const formSignIn = document.getElementById('formSignIn');
-        const formSignUp = document.getElementById('formSignUp');
-        // Containers Mobile
-        const signInContainer = document.getElementById('signInFormContainer');
-        const signUpContainer = document.getElementById('signUpFormContainer');
-        // --- Lógica de Alternância de Painel (Desktop) ---
-        signUpBtn.addEventListener('click', () => {
-            container.classList.add("right-panel-active");
-        });
-        signInBtn.addEventListener('click', () => {
-            container.classList.remove("right-panel-active");
-        });
-        // --- Lógica Mobile (Troca de display) ---
-        function showMobileLogin(type) {
-            if (type === 'up') {
-                signUpContainer.classList.add('active-mobile');
-                signInContainer.classList.remove('active-mobile');
-            } else {
-                signInContainer.classList.add('active-mobile');
-                signUpContainer.classList.remove('active-mobile');
-            }
-        }
-        // --- Funcionalidade: Mostrar/Ocultar Senha ---
-        function togglePassword(inputId, icon) {
-            const input = document.getElementById(inputId);
-            if (input.type === "password") {
-                input.type = "text";
-                icon.classList.remove("fa-eye");
-                icon.classList.add("fa-eye-slash");
-            } else {
-                input.type = "password";
-                icon.classList.remove("fa-eye-slash");
-                icon.classList.add("fa-eye");
-            }
-        }
-        // --- Sistema de Notificações (Toasts) ---
-        function showToast(message, type = 'success') {
-            const container = document.getElementById('toast-container');
-            const toast = document.createElement('div');
-            toast.className = `toast ${type}`;
-            const iconClass = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';
-            const title = type === 'success' ? 'Sucesso' : 'Erro';
-            toast.innerHTML = `
-                <i class="fas ${iconClass}"></i>
-                <div class="toast-content">
-                    <h4>${title}</h4>
-                    <p>${message}</p>
-                </div>
-            `;
-            container.appendChild(toast);
-            // Remover após 3 segundos
-            setTimeout(() => {
-                toast.style.animation = 'fadeOut 0.5s ease forwards';
-                toast.addEventListener('animationend', () => {
-                    toast.remove();
-                });
-            }, 3000);
-        }
-        // --- Simulação de "Esqueceu a Senha" ---
-        function forgotPassword() {
-            const email = document.getElementById('loginEmail').value;
-            if (!email || !email.includes('@')) {
-                showToast('Por favor, insira um e-mail válido no campo de login.', 'error');
-                return;
-            }
-            showToast(`Link de recuperação enviado para ${email}`, 'success');
         }
-        // --- Manipulação do Formulário de Login ---
-        formSignIn.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const email = document.getElementById('loginEmail').value;
-            const password = document.getElementById('loginPassword').value;
-            const btn = formSignIn.querySelector('button');
-            // Efeito de carregamento
-            const originalText = btn.innerText;
-            btn.innerText = 'Entrando...';
-            btn.disabled = true;
-            // Simulação de delay de rede
-            setTimeout(() => {
-                btn.innerText = originalText;
-                btn.disabled = false;
-                // Validação simples
-                if (password.length < 6) {
-                    showToast('A senha deve ter pelo menos 6 caracteres.', 'error');
-                } else {
-                    showToast(`Bem-vindo de volta, ${email.split('@')[0]}!`, 'success');
-                    // Aqui você redirecionaria o usuário
-                }
-            }, 1500);
-        });
-        // --- Manipulação do Formulário de Cadastro ---
-        formSignUp.addEventListener('submit', (e) => {
-            e.preventDefault();
-            const name = document.getElementById('regName').value;
-            const email = document.getElementById('regEmail').value;
-            const password = document.getElementById('regPassword').value;
-            const btn = formSignUp.querySelector('button');
-            // Efeito de carregamento
-            const originalText = btn.innerText;
-            btn.innerText = 'Criando conta...';
-            btn.disabled = true;
-            setTimeout(() => {
-                btn.innerText = originalText;
-                btn.disabled = false;
-                // Validação
-                if (password.length < 6) {
-                    showToast('A senha é muito curta.', 'error');
-                } else {
-                    showToast(`Conta criada com sucesso para ${name}!`, 'success');
-                    // Resetar formulário e mudar para tela de login
-                    formSignUp.reset();
-                    if (window.innerWidth > 768) {
-                        container.classList.remove("right-panel-active");
-                    } else {
-                        showMobileLogin('in');
-                    }
-                }
-            }, 1500);
-        });
-        // --- Animação Inicial Sutil ---
-        window.addEventListener('load', () => {
-            container.style.opacity = '0';
-            container.style.transform = 'translateY(20px)';
-            setTimeout(() => {
-                container.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
-                container.style.opacity = '1';
-                container.style.transform = 'translateY(0)';
-            }, 100);
-        });
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="pt-BR">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Login Criativo Neon</title>
+  <!-- Importando ícones (FontAwesome) -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <!-- Importando fontes (Poppins & Orbitron para toque tech) -->
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --primary: #00f260;
+      --secondary: #0575E6;
+      --accent: #ff0055;
+      --dark-bg: #0f0c29;
+      --glass-bg: rgba(255, 255, 255, 0.05);
+      --glass-border: rgba(255, 255, 255, 0.1);
+      --text-main: #ffffff;
+      --text-muted: #a0a0a0;
+      --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      font-family: 'Poppins', sans-serif;
+      background-color: var(--dark-bg);
+      /* Gradiente de fundo estático para fallback */
+      background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
+      height: 100vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+      color: var(--text-main);
+    }
+    /* --- Canvas de Partículas --- */
+    #particle-canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 0;
+      pointer-events: none; /* Deixa cliques passarem para o login */
+    }
+    /* --- Header / Branding --- */
+    header {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      padding: 20px;
+      display: flex;
+      justify-content: center;
+      z-index: 100;
+    }
+    .brand-link {
+      text-decoration: none;
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 0.9rem;
+      font-weight: 600;
+      background: rgba(0, 0, 0, 0.3);
+      padding: 10px 20px;
+      border-radius: 30px;
+      backdrop-filter: blur(10px);
+      border: 1px solid var(--glass-border);
+      transition: var(--transition);
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      font-family: 'Orbitron', sans-serif;
+      letter-spacing: 1px;
+    }
+    .brand-link:hover {
+      background: rgba(255, 255, 255, 0.1);
+      border-color: var(--primary);
+      box-shadow: 0 0 15px rgba(0, 242, 96, 0.4);
+      transform: translateY(-2px);
+      color: #fff;
+    }
+    /* --- Container Principal (Glass Card) --- */
+    .main-container {
+      position: relative;
+      width: 900px;
+      max-width: 90%;
+      min-height: 600px;
+      background: var(--glass-bg);
+      backdrop-filter: blur(16px);
+      -webkit-backdrop-filter: blur(16px);
+      border: 1px solid var(--glass-border);
+      border-radius: 30px;
+      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+      overflow: hidden;
+      z-index: 10;
+      display: flex;
+      flex-direction: row;
+      transition: transform 0.3s ease;
+    }
+    /* --- Área dos Formulários --- */
+    .forms-wrapper {
+      position: relative;
+      width: 50%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 40px;
+      transition: var(--transition);
+    }
+    form {
+      width: 100%;
+      max-width: 320px;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      opacity: 0;
+      pointer-events: none;
+      transition: var(--transition);
+    }
+    /* Estado Ativo do Formulário */
+    form.active-form {
+      opacity: 1;
+      pointer-events: all;
+      transform: translate(-50%, -50%) scale(1);
+    }
+    form.inactive-left {
+      transform: translate(-120%, -50%) scale(0.9);
+      opacity: 0;
+    }
+    form.inactive-right {
+      transform: translate(20%, -50%) scale(0.9);
+      opacity: 0;
+    }
+    h2 {
+      font-family: 'Orbitron', sans-serif;
+      font-size: 2rem;
+      margin-bottom: 10px;
+      background: linear-gradient(to right, #fff, #a0a0a0);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-align: center;
+    }
+    .subtitle {
+      text-align: center;
+      color: var(--text-muted);
+      font-size: 0.9rem;
+      margin-bottom: 20px;
+    }
+    /* --- Inputs Criativos --- */
+    .input-box {
+      position: relative;
+      width: 100%;
+      height: 50px;
+      margin-bottom: 10px;
+    }
+    .input-box input {
+      width: 100%;
+      height: 100%;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 10px;
+      outline: none;
+      color: #fff;
+      padding: 0 45px 0 20px;
+      font-size: 1rem;
+      transition: var(--transition);
+    }
+    .input-box input:focus {
+      border-color: var(--primary);
+      background: rgba(255, 255, 255, 0.1);
+      box-shadow: 0 0 15px rgba(0, 242, 96, 0.2);
+    }
+    .input-box i.icon {
+      position: absolute;
+      right: 15px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--text-muted);
+      font-size: 1.1rem;
+      transition: var(--transition);
+    }
+    .input-box input:focus + i.icon {
+      color: var(--primary);
+    }
+    /* Botão Toggle Password */
+    .input-box i.toggle-pass {
+      right: 40px;
+      cursor: pointer;
+    }
+    .input-box input:focus ~ i.toggle-pass {
+      color: var(--text-muted);
+    }
+    .input-box i.toggle-pass:hover {
+      color: #fff !important;
+    }
+    /* --- Links --- */
+    .forgot-link {
+      text-align: right;
+      font-size: 0.85rem;
+      color: var(--text-muted);
+      text-decoration: none;
+      transition: 0.3s;
+      align-self: flex-end;
+    }
+    .forgot-link:hover {
+      color: var(--primary);
+      text-shadow: 0 0 8px rgba(0, 242, 96, 0.4);
+    }
+    /* --- Botões --- */
+    .btn-main {
+      width: 100%;
+      height: 50px;
+      background: linear-gradient(90deg, var(--secondary), var(--primary));
+      border: none;
+      border-radius: 25px;
+      color: #fff;
+      font-weight: 600;
+      font-size: 1rem;
+      cursor: pointer;
+      transition: var(--transition);
+      position: relative;
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+    }
+    .btn-main::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+      transition: 0.5s;
+    }
+    .btn-main:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 10px 20px rgba(0, 242, 96, 0.3);
+    }
+    .btn-main:hover::before {
+      left: 100%;
+    }
+    .btn-main:active {
+      transform: scale(0.98);
+    }
+    /* --- Painel Lateral (Overlay) --- */
+    .overlay-panel {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      width: 50%;
+      height: 100%;
+      background: linear-gradient(135deg, rgba(5, 117, 230, 0.8), rgba(0, 242, 96, 0.6));
+      backdrop-filter: blur(20px);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      padding: 40px;
+      transition: var(--transition);
+      z-index: 20;
+      clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
+    }
+    .overlay-content {
+      text-align: center;
+      color: #fff;
+      transform: translateX(0);
+      transition: var(--transition);
+    }
+    .overlay-content h3 {
+      font-family: 'Orbitron', sans-serif;
+      font-size: 2.2rem;
+      margin-bottom: 15px;
+      text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+    }
+    .overlay-content p {
+      font-size: 1rem;
+      margin-bottom: 30px;
+      line-height: 1.6;
+      opacity: 0.9;
+    }
+    .btn-ghost {
+      background: transparent;
+      border: 2px solid #fff;
+      color: #fff;
+      padding: 12px 40px;
+      border-radius: 25px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: var(--transition);
+      font-size: 0.9rem;
+      backdrop-filter: blur(5px);
+    }
+    .btn-ghost:hover {
+      background: #fff;
+      color: var(--secondary);
+      box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
+    }
+    /* --- Lógica de Troca de Painel (Desktop) --- */
+    .main-container.switch-mode .overlay-panel {
+      left: 0;
+      clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
+      background: linear-gradient(135deg, rgba(255, 0, 85, 0.7), rgba(5, 117, 230, 0.7));
+    }
+    .main-container.switch-mode .forms-wrapper {
+      /* Ajuste sutil se necessário */
+    }
+    /* Animação do conteúdo dentro do overlay */
+    .overlay-content.hidden-left {
+      transform: translateX(-50px);
+      opacity: 0;
+      pointer-events: none;
+      position: absolute;
+    }
+    .overlay-content.hidden-right {
+      transform: translateX(50px);
+      opacity: 0;
+      pointer-events: none;
+      position: absolute;
+    }
+    /* --- Toast Notification Neon --- */
+    #toast-container {
+      position: fixed;
+      top: 100px;
+      right: 20px;
+      z-index: 200;
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+    }
+    .toast {
+      background: rgba(15, 12, 41, 0.9);
+      border: 1px solid var(--glass-border);
+      color: #fff;
+      padding: 16px 24px;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      min-width: 300px;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(10px);
+      animation: slideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+      border-left: 4px solid;
+    }
+    .toast.success { border-left-color: var(--primary); }
+    .toast.error { border-left-color: var(--accent); }
+    .toast i { font-size: 1.4rem; }
+    .toast.success i { color: var(--primary); text-shadow: 0 0 10px var(--primary); }
+    .toast.error i { color: var(--accent); text-shadow: 0 0 10px var(--accent); }
+    @keyframes slideIn {
+      from { transform: translateX(120%); opacity: 0; }
+      to { transform: translateX(0); opacity: 1; }
+    }
+    @keyframes fadeOut {
+      to { transform: translateX(100%); opacity: 0; }
+    }
+    /* --- Social Icons --- */
+    .social-icons {
+      display: flex;
+      gap: 15px;
+      margin-bottom: 20px;
+    }
+    .social-icons a {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      border: 1px solid rgba(255,255,255,0.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      text-decoration: none;
+      transition: 0.3s;
+      background: rgba(255,255,255,0.05);
+    }
+    .social-icons a:hover {
+      background: var(--primary);
+      border-color: var(--primary);
+      transform: rotate(360deg);
+      box-shadow: 0 0 15px var(--primary);
+    }
+    /* --- Responsividade --- */
+    @media (max-width: 768px) {
+      .main-container {
+        width: 100%;
+        height: 100vh;
+        border-radius: 0;
+        flex-direction: column;
+        overflow-y: auto;
+      }
+      .forms-wrapper {
+        width: 100%;
+        height: 70%;
+        padding: 20px;
+      }
+      .overlay-panel {
+        display: none; /* Esconder overlay complexo no mobile */
+      }
+      /* Modo Mobile Simplificado */
+      .mobile-toggle-btn {
+        display: block;
+        margin-top: 20px;
+        color: var(--primary);
+        cursor: pointer;
+        text-align: center;
+        font-size: 0.9rem;
+        text-decoration: underline;
+      }
+      /* Resetar posições para mobile stack */
+      form {
+        position: relative;
+        top: auto;
+        left: auto;
+        transform: none !important;
+        opacity: 1;
+        pointer-events: all;
+        display: none;
+      }
+      form.active-form {
+        display: flex;
+        animation: fadeIn 0.5s;
+      }
+      @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+    }
+    @media (min-width: 769px) {
+      .mobile-toggle-btn { display: none; }
+    }
+  </style>
+</head>
+<body>
+  <!-- Canvas para Animação de Fundo -->
+  <canvas id="particle-canvas"></canvas>
+  <!-- Header Obrigatório -->
+  <header>
+    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="brand-link">
+      <i class="fas fa-atom"></i> Built with anycoder
+    </a>
+  </header>
+  <!-- Container de Notificações -->
+  <div id="toast-container"></div>
+  <!-- Container Principal -->
+  <div class="main-container" id="mainContainer">
+    <!-- Área dos Formulários -->
+    <div class="forms-wrapper">
+      <!-- Formulário de Login -->
+      <form id="loginForm" class="active-form">
+        <h2>Bem-vindo</h2>
+        <p class="subtitle">Acesse sua conta para continuar</p>
+        <div class="social-icons">
+          <a href="#"><i class="fab fa-google"></i></a>
+          <a href="#"><i class="fab fa-github"></i></a>
+          <a href="#"><i class="fab fa-discord"></i></a>
+        </div>
+        <div class="input-box">
+          <input type="email" placeholder="E-mail" required id="loginEmail">
+          <i class="fas fa-envelope icon"></i>
+        </div>
+        <div class="input-box">
+          <input type="password" placeholder="Senha" required id="loginPassword">
+          <i class="fas fa-lock icon"></i>
+          <i class="fas fa-eye toggle-pass" onclick="togglePassword('loginPassword', this)"></i>
+        </div>
+        <a href="#" class="forgot-link" onclick="forgotPassword()">Esqueceu a senha?</a>
+        <button type="submit" class="btn-main">
+          Entrar <i class="fas fa-arrow-right"></i>
+        </button>
+        <div class="mobile-toggle-btn" onclick="toggleMode('up')">Não tem conta? Cadastre-se</div>
+      </form>
+      <!-- Formulário de Cadastro -->
+      <form id="registerForm" class="inactive-right">
+        <h2>Criar Conta</h2>
+        <p class="subtitle">Junte-se à nossa comunidade</p>
+        <div class="social-icons">
+          <a href="#"><i class="fab fa-google"></i></a>
+          <a href="#"><i class="fab fa-github"></i></a>
+          <a href="#"><i class="fab fa-discord"></i></a>
+        </div>
+        <div class="input-box">
+          <input type="text" placeholder="Nome Completo" required id="regName">
+          <i class="fas fa-user icon"></i>
+        </div>
+        <div class="input-box">
+          <input type="email" placeholder="E-mail" required id="regEmail">
+          <i class="fas fa-envelope icon"></i>
+        </div>
+        <div class="input-box">
+          <input type="password" placeholder="Senha" required id="regPassword">
+          <i class="fas fa-lock icon"></i>
+          <i class="fas fa-eye toggle-pass" onclick="togglePassword('regPassword', this)"></i>
+        </div>
+        <button type="submit" class="btn-main">
+          Cadastrar <i class="fas fa-user-plus"></i>
+        </button>
+        <div class="mobile-toggle-btn" onclick="toggleMode('in')">Já tem conta? Entrar</div>
+      </form>
+    </div>
+    <!-- Painel de Overlay (Animação Lateral) -->
+    <div class="overlay-panel">
+      <!-- Conteúdo Visível quando no Login -->
+      <div class="overlay-content" id="overlayLoginContent">
+        <h3>Novo por aqui?</h3>
+        <p>Descubra um mundo de possibilidades criativas interagindo com nossa plataforma.</p>
+        <button class="btn-ghost" id="btnToRegister">Cadastre-se</button>
+      </div>
+      <!-- Conteúdo Visível quando no Cadastro -->
+      <div class="overlay-content hidden-right" id="overlayRegisterContent">
+        <h3>Já é membro?</h3>
+        <p>Continue sua jornada de onde parou. Estamos ansiosos para te ver novamente.</p>
+        <button class="btn-ghost" id="btnToLogin">Entrar</button>
+      </div>
+    </div>
+  </div>
+  <script>
+    /**
+     * LÓGICA DE PARTÍCULAS (BACKGROUND)
+     */
+    const canvas = document.getElementById('particle-canvas');
+    const ctx = canvas.getContext('2d');
+    let particlesArray;
+    // Ajustar tamanho do canvas
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    // Mouse interaction
+    let mouse = {
+      x: null,
+      y: null,
+      radius: (canvas.height/80) * (canvas.width/80)
+    }
+    window.addEventListener('mousemove', (event) => {
+      mouse.x = event.x;
+      mouse.y = event.y;
+    });
+    // Classe da Partícula
+    class Particle {
+      constructor(x, y, directionX, directionY, size, color) {
+        this.x = x;
+        this.y = y;
+        this.directionX = directionX;
+        this.directionY = directionY;
+        this.size = size;
+        this.color = color;
+      }
+      // Desenhar partícula
+      draw() {
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
+        ctx.fillStyle = this.color;
+        ctx.fill();
+      }
+      // Atualizar movimento e verificar colisão com mouse
+      update() {
+        if (this.x > canvas.width || this.x < 0) this.directionX = -this.directionX;
+        if (this.y > canvas.height || this.y < 0) this.directionY = -this.directionY;
+        // Verificar distância do mouse (efeito de repulsão suave)
+        let dx = mouse.x - this.x;
+        let dy = mouse.y - this.y;
+        let distance = Math.sqrt(dx*dx + dy*dy);
+        if (distance < mouse.radius + this.size) {
+          if (mouse.x < this.x && this.x < canvas.width - this.size * 10) this.x += 3;
+          if (mouse.x > this.x && this.x > this.size * 10) this.x -= 3;
+          if (mouse.y < this.y && this.y < canvas.height - this.size * 10) this.y += 3;
+          if (mouse.y > this.y && this.y > this.size * 10) this.y -= 3;
+        }
+        this.x += this.directionX;
+        this.y += this.directionY;
+        this.draw();
+      }
+    }
+    // Inicializar Partículas
+    function initParticles() {
+      particlesArray = [];
+      let numberOfParticles = (canvas.height * canvas.width) / 9000;
+      for (let i = 0; i < numberOfParticles; i++) {
+        let size = (Math.random() * 2) + 1;
+        let x = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
+        let y = (Math.random() * ((innerHeight - size * 2) - (size * 2)) + size * 2);
+        let directionX = (Math.random() * 0.4) - 0.2;
+        let directionY = (Math.random() * 0.4) - 0.2;
+        let color = '#00f260';
+        particlesArray.push(new Particle(x, y, directionX, directionY, size, color));
+      }
+    }
+    // Loop de Animação
+    function animateParticles() {
+      requestAnimationFrame(animateParticles);
+      ctx.clearRect(0, 0, innerWidth, innerHeight);
+      for (let i = 0; i < particlesArray.length; i++) {
+        particlesArray[i].update();
+      }
+      connectParticles();
+    }
+    // Conectar partículas próximas com linhas
+    function connectParticles() {
+      let opacityValue = 1;
+      for (let a = 0; a < particlesArray.length; a++) {
+        for (let b = a; b < particlesArray.length; b++) {
+          let distance = ((particlesArray[a].x - particlesArray[b].x) * (particlesArray[a].x - particlesArray[b].x)) +
+                         ((particlesArray[a].y - particlesArray[b].y) * (particlesArray[a].y - particlesArray[b].y));
+          if (distance < (canvas.width/7) * (canvas.height/7)) {
+            opacityValue = 1 - (distance/20000);
+            ctx.strokeStyle = 'rgba(0, 242, 96,' + opacityValue + ')';
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(particlesArray[a].x, particlesArray[a].y);
+            ctx.lineTo(particlesArray[b].x, particlesArray[b].y);
+            ctx.stroke();
+          }
+        }
+      }
+    }
+    window.addEventListener('resize', () => {
+      canvas.width = innerWidth;
+      canvas.height = innerHeight;
+      mouse.radius = ((canvas.height/80) * (canvas.height/80));
+      initParticles();
+    });
+    // Iniciar Canvas
+    initParticles();
+    animateParticles();
+    /**
+     * LÓGICA DA UI E FORMULÁRIOS
+     */
+    const container = document.getElementById('mainContainer');
+    const btnToRegister = document.getElementById('btnToRegister');
+    const btnToLogin = document.getElementById('btnToLogin');
+    const loginForm = document.getElementById('loginForm');
+    const registerForm = document.getElementById('registerForm');
+    const overlayLoginContent = document.getElementById('overlayLoginContent');
+    const overlayRegisterContent = document.getElementById('overlayRegisterContent');
+    // Função para alternar modos (Desktop)
+    function switchPanel() {
+      container.classList.toggle('switch-mode');
+      // Animar textos do overlay
+      if (container.classList.contains('switch-mode')) {
+        overlayLoginContent.classList.add('hidden-left');
+        overlayLoginContent.classList.remove('hidden-right');
+        overlayRegisterContent.classList.remove('hidden-right');
+        // Trocar Forms
+        loginForm.classList.remove('active-form');
+        loginForm.classList.add('inactive-left');
+        registerForm.classList.remove('inactive-right');
+        registerForm.classList.add('active-form');
+      } else {
+        overlayLoginContent.classList.remove('hidden-left');
+        overlayRegisterContent.classList.add('hidden-right');
+        // Trocar Forms
+        registerForm.classList.remove('active-form');
+        registerForm.classList.add('inactive-right');
+        loginForm.classList.remove('inactive-left');
+        loginForm.classList.add('active-form');
+      }
+    }
+    // Event Listeners Desktop
+    btnToRegister.addEventListener('click', switchPanel);
+    btnToLogin.addEventListener('click', switchPanel);
+    // Função Mobile (Simples troca de display)
+    function toggleMode(mode) {
+      if (mode === 'up') {
+        loginForm.classList.remove('active-form');
+        registerForm.classList.add('active-form');
+      } else {
+        registerForm.classList.remove('active-form');
+        loginForm.classList.add('active-form');
+      }
+    }
+    // Toggle Password Visibility
+    function togglePassword(inputId, icon) {
+      const input = document.getElementById(inputId);
+      if (input.type === "password") {
+        input.type = "text";
+        icon.classList.remove("fa-eye");
+        icon.classList.add("fa-eye-slash");
+      } else {
+        input.type = "password";
+        icon.classList.remove("fa-eye-slash");
+        icon.classList.add("fa-eye");
+      }
+    }
+    // Sistema de Toast (Notificações)
+    function showToast(message, type = 'success') {
+      const toastContainer = document.getElementById('toast-container');
+      const toast = document.createElement('div');
+      toast.className = `toast ${type}`;
+      const iconClass = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-triangle';
+      const title = type === 'success' ? 'Sucesso' : 'Atenção';
+      toast.innerHTML = `
+        <i class="fas ${iconClass}"></i>
+        <div>
+          <h4 style="font-size:14px; margin-bottom:2px;">${title}</h4>
+          <p style="font-size:12px; opacity:0.8;">${message}</p>
         </div>
+      `;
+      toastContainer.appendChild(toast);
+      setTimeout(() => {
+        toast.style.animation = 'fadeOut 0.5s ease forwards';
+        toast.addEventListener('animationend', () => toast.remove());
+      }, 3500);
+    }
+    // Simulação de Forgot Password
+    function forgotPassword() {
+      const email = document.getElementById('loginEmail').value;
+      if (!email) {
+        showToast('Digite seu e-mail no campo de login primeiro.', 'error');
+        return;
+      }
+      showToast(`Link de recuperação enviado para ${email}`, 'success');
+    }
+    // Handler Login
+    document.getElementById('loginForm').addEventListener('submit', (e) => {
+      e.preventDefault();
+      const btn = e.target.querySelector('button');
+      const originalContent = btn.innerHTML;
+      // Loading state
+      btn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> Processando...';
+      btn.disabled = true;
+      setTimeout(() => {
+        btn.innerHTML = originalContent;
+        btn.disabled = false;
+        showToast('Login realizado com sucesso!', 'success');
+      }, 2000);
+    });
+    // Handler Registro
+    document.getElementById('registerForm').addEventListener('submit', (e) => {
+      e.preventDefault();
+      const btn = e.target.querySelector('button');
+      const originalContent = btn.innerHTML;
+      btn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> Criando...';
+      btn.disabled = true;
+      setTimeout(() => {
+        btn.innerHTML = originalContent;
+        btn.disabled = false;
+        showToast('Conta criada! Bem-vindo a bordo.', 'success');
+        // Resetar e ir para login
+        e.target.reset();
+        if (window.innerWidth > 768) {
+          switchPanel();
+        } else {
+          toggleMode('in');
         }
+      }, 2000);
+    });
+  </script>
 </body>
 </html>