Spaces:
Running
Running
| <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 ; | |
| } | |
| /* --- 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 ; | |
| 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> |