Spaces:
Running
Running
File size: 8,575 Bytes
a36bbb5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 | <!DOCTYPE html>
<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> |