| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>BRShare - Acesse sua conta</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, #3b82f6 0%, #8b5cf6 100%); |
| } |
| .auth-card { |
| transition: all 0.3s ease; |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| } |
| .auth-card:hover { |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .input-field:focus { |
| border-color: #3b82f6; |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); |
| } |
| .toggle-forms { |
| display: none; |
| } |
| #loginForm:target ~ #registerContainer, |
| #registerForm:target ~ #loginContainer { |
| display: none; |
| } |
| #loginForm:target ~ #loginContainer, |
| #registerForm:target ~ #registerContainer { |
| display: flex; |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50 text-gray-800 min-h-screen flex flex-col"> |
| |
| <header class="bg-white shadow-sm sticky top-0 z-50"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-share-alt text-blue-600 text-2xl"></i> |
| <a href="index.html" class="text-2xl font-bold text-blue-600">BRShare</a> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <a href="index.html" class="px-4 py-2 text-gray-600 hover:text-blue-600 transition">Voltar ao site</a> |
| <a href="#registerForm" class="px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 transition">Criar conta</a> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="flex-grow"> |
| |
| <div id="loginForm"></div> |
| <div id="registerForm"></div> |
|
|
| |
| <div id="loginContainer" class="flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> |
| <div class="w-full max-w-md"> |
| <div class="auth-card bg-white py-8 px-6 rounded-xl"> |
| <div class="text-center mb-8"> |
| <i class="fas fa-share-alt text-blue-600 text-5xl mb-4"></i> |
| <h2 class="text-3xl font-bold text-gray-900">Acesse sua conta</h2> |
| <p class="text-gray-600 mt-2">Entre para compartilhar seus arquivos</p> |
| </div> |
| |
| <form class="space-y-6" action="#" method="POST"> |
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-700">E-mail</label> |
| <div class="mt-1 relative rounded-md shadow-sm"> |
| <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 id="email" name="email" type="email" autocomplete="email" required |
| class="input-field py-3 pl-10 block w-full border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| </div> |
|
|
| <div> |
| <label for="password" class="block text-sm font-medium text-gray-700">Senha</label> |
| <div class="mt-1 relative rounded-md shadow-sm"> |
| <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 id="password" name="password" type="password" autocomplete="current-password" required |
| class="input-field py-3 pl-10 block w-full border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"> |
| <div class="absolute inset-y-0 right-0 pr-3 flex items-center"> |
| <button type="button" class="text-gray-400 hover:text-gray-500 focus:outline-none" id="togglePassword"> |
| <i class="fas fa-eye" id="passwordIcon"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <input id="remember-me" name="remember-me" type="checkbox" |
| class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
| <label for="remember-me" class="ml-2 block text-sm text-gray-700">Lembrar de mim</label> |
| </div> |
|
|
| <div class="text-sm"> |
| <a href="#" class="font-medium text-blue-600 hover:text-blue-500">Esqueceu sua senha?</a> |
| </div> |
| </div> |
|
|
| <div> |
| <button type="submit" |
| class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition"> |
| Entrar |
| </button> |
| </div> |
| </form> |
|
|
| <div class="mt-6"> |
| <div class="relative"> |
| <div class="absolute inset-0 flex items-center"> |
| <div class="w-full border-t border-gray-300"></div> |
| </div> |
| <div class="relative flex justify-center text-sm"> |
| <span class="px-2 bg-white text-gray-500">Ou continue com</span> |
| </div> |
| </div> |
|
|
| <div class="mt-6 grid grid-cols-3 gap-3"> |
| <div> |
| <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
| <i class="fab fa-google text-red-500"></i> |
| </a> |
| </div> |
| <div> |
| <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
| <i class="fab fa-facebook-f text-blue-600"></i> |
| </a> |
| </div> |
| <div> |
| <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
| <i class="fab fa-apple text-gray-900"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-6 text-center"> |
| <p class="text-sm text-gray-600"> |
| Não tem uma conta? |
| <a href="#registerForm" class="font-medium text-blue-600 hover:text-blue-500">Cadastre-se</a> |
| </p> |
| </div> |
| </div> |
| |
| <div class="mt-6 text-center text-sm text-gray-600"> |
| <p>Ao continuar, você concorda com nossos <a href="#" class="font-medium text-blue-600 hover:text-blue-500">Termos de Serviço</a> e <a href="#" class="font-medium text-blue-600 hover:text-blue-500">Política de Privacidade</a>.</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="registerContainer" class="hidden items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> |
| <div class="w-full max-w-md"> |
| <div class="auth-card bg-white py-8 px-6 rounded-xl"> |
| <div class="text-center mb-8"> |
| <i class="fas fa-user-plus text-blue-600 text-5xl mb-4"></i> |
| <h2 class="text-3xl font-bold text-gray-900">Crie sua conta</h2> |
| <p class="text-gray-600 mt-2">Comece a compartilhar arquivos em minutos</p> |
| </div> |
| |
| <form class="space-y-6" action="#" method="POST"> |
| <div> |
| <label for="full-name" class="block text-sm font-medium text-gray-700">Nome completo</label> |
| <div class="mt-1 relative rounded-md shadow-sm"> |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
| <i class="fas fa-user text-gray-400"></i> |
| </div> |
| <input id="full-name" name="full-name" type="text" autocomplete="name" required |
| class="input-field py-3 pl-10 block w-full border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| </div> |
|
|
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-700">E-mail</label> |
| <div class="mt-1 relative rounded-md shadow-sm"> |
| <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 id="email" name="email" type="email" autocomplete="email" required |
| class="input-field py-3 pl-10 block w-full border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| </div> |
|
|
| <div> |
| <label for="password" class="block text-sm font-medium text-gray-700">Senha</label> |
| <div class="mt-1 relative rounded-md shadow-sm"> |
| <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 id="password" name="password" type="password" autocomplete="new-password" required |
| class="input-field py-3 pl-10 block w-full border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"> |
| <div class="absolute inset-y-0 right-0 pr-3 flex items-center"> |
| <button type="button" class="text-gray-400 hover:text-gray-500 focus:outline-none" id="toggleRegPassword"> |
| <i class="fas fa-eye" id="regPasswordIcon"></i> |
| </button> |
| </div> |
| </div> |
| <p class="mt-2 text-xs text-gray-500">Mínimo de 8 caracteres com letras e números</p> |
| </div> |
|
|
| <div> |
| <label for="confirm-password" class="block text-sm font-medium text-gray-700">Confirme sua senha</label> |
| <div class="mt-1 relative rounded-md shadow-sm"> |
| <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 id="confirm-password" name="confirm-password" type="password" autocomplete="new-password" required |
| class="input-field py-3 pl-10 block w-full border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500"> |
| <div class="absolute inset-y-0 right-0 pr-3 flex items-center"> |
| <button type="button" class="text-gray-400 hover:text-gray-500 focus:outline-none" id="toggleConfirmPassword"> |
| <i class="fas fa-eye" id="confirmPasswordIcon"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="flex items-start"> |
| <div class="flex items-center h-5"> |
| <input id="terms" name="terms" type="checkbox" |
| class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" required> |
| </div> |
| <div class="ml-3 text-sm"> |
| <label for="terms" class="font-medium text-gray-700">Eu concordo com os</label> |
| <a href="#" class="text-blue-600 hover:text-blue-500"> Termos de Serviço</a> e <a href="#" class="text-blue-600 hover:text-blue-500">Política de Privacidade</a> |
| </div> |
| </div> |
|
|
| <div> |
| <button type="submit" |
| class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition"> |
| Criar conta |
| </button> |
| </div> |
| </form> |
|
|
| <div class="mt-6"> |
| <div class="relative"> |
| <div class="absolute inset-0 flex items-center"> |
| <div class="w-full border-t border-gray-300"></div> |
| </div> |
| <div class="relative flex justify-center text-sm"> |
| <span class="px-2 bg-white text-gray-500">Ou cadastre-se com</span> |
| </div> |
| </div> |
|
|
| <div class="mt-6 grid grid-cols-3 gap-3"> |
| <div> |
| <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
| <i class="fab fa-google text-red-500"></i> |
| </a> |
| </div> |
| <div> |
| <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
| <i class="fab fa-facebook-f text-blue-600"></i> |
| </a> |
| </div> |
| <div> |
| <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
| <i class="fab fa-apple text-gray-900"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-6 text-center"> |
| <p class="text-sm text-gray-600"> |
| Já tem uma conta? |
| <a href="#loginForm" class="font-medium text-blue-600 hover:text-blue-500">Faça login</a> |
| </p> |
| </div> |
| </div> |
| |
| <div class="mt-6 text-center text-sm text-gray-600"> |
| <p>Seu cadastro está protegido por criptografia de ponta a ponta.</p> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="bg-gray-900 text-white py-8"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> |
| <i class="fas fa-share-alt text-blue-400 text-xl"></i> |
| <span class="text-xl font-bold">BRShare</span> |
| </div> |
| |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white transition">Termos</a> |
| <a href="#" class="text-gray-400 hover:text-white transition">Privacidade</a> |
| <a href="#" class="text-gray-400 hover:text-white transition">Segurança</a> |
| <a href="#" class="text-gray-400 hover:text-white transition">Contato</a> |
| </div> |
| </div> |
| |
| <div class="mt-6 pt-6 border-t border-gray-800 text-center text-sm text-gray-400"> |
| <p>© 2023 BRShare. Todos os direitos reservados.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.getElementById('togglePassword').addEventListener('click', function() { |
| const passwordInput = document.getElementById('password'); |
| const icon = document.getElementById('passwordIcon'); |
| |
| if (passwordInput.type === 'password') { |
| passwordInput.type = 'text'; |
| icon.classList.remove('fa-eye'); |
| icon.classList.add('fa-eye-slash'); |
| } else { |
| passwordInput.type = 'password'; |
| icon.classList.remove('fa-eye-slash'); |
| icon.classList.add('fa-eye'); |
| } |
| }); |
| |
| |
| document.getElementById('toggleRegPassword').addEventListener('click', function() { |
| const passwordInput = document.getElementById('password'); |
| const icon = document.getElementById('regPasswordIcon'); |
| |
| if (passwordInput.type === 'password') { |
| passwordInput.type = 'text'; |
| icon.classList.remove('fa-eye'); |
| icon.classList.add('fa-eye-slash'); |
| } else { |
| passwordInput.type = 'password'; |
| icon.classList.remove('fa-eye-slash'); |
| icon.classList.add('fa-eye'); |
| } |
| }); |
| |
| |
| document.getElementById('toggleConfirmPassword').addEventListener('click', function() { |
| const passwordInput = document.getElementById('confirm-password'); |
| const icon = document.getElementById('confirmPasswordIcon'); |
| |
| if (passwordInput.type === 'password') { |
| passwordInput.type = 'text'; |
| icon.classList.remove('fa-eye'); |
| icon.classList.add('fa-eye-slash'); |
| } else { |
| passwordInput.type = 'password'; |
| icon.classList.remove('fa-eye-slash'); |
| icon.classList.add('fa-eye'); |
| } |
| }); |
| |
| |
| document.querySelectorAll('form').forEach(form => { |
| form.addEventListener('submit', function(e) { |
| |
| if (this.querySelector('#confirm-password')) { |
| const password = this.querySelector('#password').value; |
| const confirmPassword = this.querySelector('#confirm-password').value; |
| |
| if (password !== confirmPassword) { |
| e.preventDefault(); |
| alert('As senhas não coincidem. Por favor, verifique e tente novamente.'); |
| return; |
| } |
| |
| if (password.length < 8) { |
| e.preventDefault(); |
| alert('A senha deve ter pelo menos 8 caracteres.'); |
| return; |
| } |
| } |
| |
| |
| e.preventDefault(); |
| alert('Formulário enviado com sucesso! Redirecionando...'); |
| setTimeout(() => { |
| window.location.href = 'index.html'; |
| }, 1500); |
| }); |
| }); |
| |
| |
| window.addEventListener('load', function() { |
| if (window.location.hash === '#registerForm') { |
| document.getElementById('registerContainer').classList.remove('hidden'); |
| document.getElementById('loginContainer').classList.add('hidden'); |
| } else { |
| document.getElementById('loginContainer').classList.remove('hidden'); |
| document.getElementById('registerContainer').classList.add('hidden'); |
| } |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=tidotto/brshare" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
