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 Moderno</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .input-focus:focus { | |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3); | |
| } | |
| .shake { | |
| animation: shake 0.5s; | |
| } | |
| @keyframes shake { | |
| 0%, 100% { transform: translateX(0); } | |
| 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } | |
| 20%, 40%, 60%, 80% { transform: translateX(5px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex items-center justify-center gradient-bg p-4"> | |
| <div class="w-full max-w-md"> | |
| <div class="bg-white rounded-2xl shadow-xl overflow-hidden"> | |
| <!-- Header --> | |
| <div class="p-8 text-center"> | |
| <h1 class="text-3xl font-bold text-gray-800">Bem-vindo de volta</h1> | |
| <p class="text-gray-600 mt-2">Faça login para acessar sua conta</p> | |
| </div> | |
| <!-- Login Form --> | |
| <form id="loginForm" class="px-8 pb-8"> | |
| <!-- Email Field --> | |
| <div class="mb-6"> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-envelope text-gray-400"></i> | |
| </div> | |
| <input | |
| type="login" | |
| id="login" | |
| class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none input-focus transition duration-200" | |
| placeholder="login do Usuario" | |
| required | |
| > | |
| </div> | |
| <p id="emailError" class="text-red-500 text-sm mt-1 hidden">Por favor, insira um e-mail válido</p> | |
| </div> | |
| <!-- Password Field --> | |
| <div class="mb-1"> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-lock text-gray-400"></i> | |
| </div> | |
| <input | |
| type="password" | |
| id="password" | |
| class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none input-focus transition duration-200" | |
| placeholder="Sua senha" | |
| required | |
| > | |
| <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 pr-3 flex items-center"> | |
| <i class="fas fa-eye text-gray-400 hover:text-gray-600"></i> | |
| </button> | |
| </div> | |
| <p id="passwordError" class="text-red-500 text-sm mt-1 hidden">A senha deve ter pelo menos 6 caracteres</p> | |
| </div> | |
| <!-- Remember & Forgot --> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div class="flex items-center"> | |
| <input id="remember" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| <label for="remember" class="ml-2 block text-sm text-gray-700">Lembrar-me</label> | |
| </div> | |
| <a href="#" id="forgotPassword" class="text-sm text-indigo-600 hover:text-indigo-500">Esqueceu a senha?</a> | |
| </div> | |
| <!-- Submit Button --> | |
| <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-4 rounded-lg transition duration-200 transform hover:scale-105"> | |
| Entrar | |
| </button> | |
| </form> | |
| <!-- Footer Links --> | |
| <div class="px-8 py-4 bg-gray-50 border-t border-gray-200 flex justify-between"> | |
| <a href="#" id="resendEmail" class="text-sm text-gray-600 hover:text-indigo-600">Reenviar e-mail de verificação</a> | |
| <a href="#" class="text-sm text-gray-600 hover:text-indigo-600">Criar conta</a> | |
| </div> | |
| </div> | |
| <!-- Forgot Password Modal --> | |
| <div id="forgotModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"> | |
| <div class="bg-white rounded-xl shadow-2xl max-w-md w-full p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-gray-800">Recuperar senha</h3> | |
| <button id="closeForgotModal" class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <p class="text-gray-600 mb-6">Digite seu e-mail para receber um link de recuperação de senha.</p> | |
| <div class="mb-4"> | |
| <input | |
| type="email" | |
| id="recoveryEmail" | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none input-focus transition duration-200" | |
| placeholder="Seu e-mail" | |
| > | |
| <p id="recoveryEmailError" class="text-red-500 text-sm mt-1 hidden">Por favor, insira um e-mail válido</p> | |
| </div> | |
| <button id="sendRecovery" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-4 rounded-lg transition duration-200"> | |
| Enviar link | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Resend Email Modal --> | |
| <div id="resendModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"> | |
| <div class="bg-white rounded-xl shadow-2xl max-w-md w-full p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-gray-800">Reenviar e-mail</h3> | |
| <button id="closeResendModal" class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <p class="text-gray-600 mb-6">Digite seu e-mail para reenviar o e-mail de verificação.</p> | |
| <div class="mb-4"> | |
| <input | |
| type="email" | |
| id="resendEmailInput" | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none input-focus transition duration-200" | |
| placeholder="Seu e-mail" | |
| > | |
| <p id="resendEmailError" class="text-red-500 text-sm mt-1 hidden">Por favor, insira um e-mail válido</p> | |
| </div> | |
| <button id="confirmResend" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-4 rounded-lg transition duration-200"> | |
| Reenviar e-mail | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Success Toast --> | |
| <div id="successToast" class="hidden fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center"> | |
| <i class="fas fa-check-circle mr-2"></i> | |
| <span id="toastMessage">Operação realizada com sucesso!</span> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Toggle password visibility | |
| const togglePassword = document.getElementById('togglePassword'); | |
| const password = document.getElementById('password'); | |
| togglePassword.addEventListener('click', function() { | |
| const type = password.getAttribute('type') === 'password' ? 'text' : 'password'; | |
| password.setAttribute('type', type); | |
| this | |
| </html> |