Spaces:
Sleeping
Sleeping
| <html lang="pt-BR" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Login - SoftEdge Corporation</title> | |
| <!-- SEO & SOCIAL --> | |
| <meta name="description" content="Acesse sua conta SoftEdge Corporation. Área restrita para clientes e administradores."> | |
| <meta name="keywords" content="login, conta, softedge, acesso"> | |
| <!-- FAVICON --> | |
| <link rel="icon" href="/assets/placeholder.svg" type="image/svg+xml"> | |
| <link rel="apple-touch-icon" href="/assets/placeholder.svg"> | |
| <meta property="og:image" content="/assets/placeholder.svg" /> | |
| <meta property="og:title" content="Login - SoftEdge Corporation" /> | |
| <meta property="og:description" content="Acesse sua conta" /> | |
| <!-- FONTS --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> | |
| <!-- TAILWIND CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Inter', 'system-ui', 'sans-serif'], | |
| }, | |
| colors: { | |
| primary: { | |
| 50: '#ecfeff', | |
| 100: '#cffafe', | |
| 500: '#06b6d4', | |
| 600: '#0891b2', | |
| 700: '#0e7490', | |
| 900: '#164e63', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <!-- LUCIDE ICONS --> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <!-- CUSTOM CSS --> | |
| <link href="/assets/css/style.css" rel="stylesheet"> | |
| </head> | |
| <body class="min-h-screen bg-linear-to-br from-slate-950 via-slate-900 to-slate-950 text-white antialiased font-sans flex items-center justify-center p-4"> | |
| <!-- BACKGROUND --> | |
| <div class="absolute inset-0 -z-10"> | |
| <div class="absolute inset-0 bg-linear-to-br from-slate-950 via-slate-900 to-slate-950"></div> | |
| <div class="absolute inset-0 opacity-20"> | |
| <div class="absolute top-20 left-20 w-96 h-96 bg-cyan-500/20 rounded-full blur-3xl"></div> | |
| <div class="absolute bottom-20 right-20 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl"></div> | |
| </div> | |
| </div> | |
| <!-- LOGIN FORM --> | |
| <div class="w-full max-w-md"> | |
| <!-- HEADER --> | |
| <div class="text-center mb-8"> | |
| <div class="flex items-center justify-center space-x-3 mb-6"> | |
| <div class="w-12 h-12 rounded-xl overflow-hidden bg-linear-to-br from-cyan-500 to-blue-600 p-0.5"> | |
| <img src="/assets/logo.jpeg" alt="SoftEdge Logo" class="w-full h-full object-cover rounded-xl"> | |
| </div> | |
| <span class="text-2xl font-bold gradient-text">SoftEdge</span> | |
| </div> | |
| <h1 class="text-2xl font-bold text-white mb-2">Bem-vindo de volta</h1> | |
| <p class="text-gray-400">Entre na sua conta para continuar</p> | |
| </div> | |
| <!-- FORM --> | |
| <div class="glass rounded-2xl p-8"> | |
| <form id="login-form" class="space-y-6"> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-300 mb-2"> | |
| </label> | |
| <div class="relative"> | |
| <input | |
| type="email" | |
| id="email" | |
| name="email" | |
| required | |
| class="w-full pl-12 pr-4 py-3 bg-slate-800/50 border border-slate-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors" | |
| placeholder="seu@email.com" | |
| > | |
| <div class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"> | |
| <i data-lucide="mail" class="w-5 h-5"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="password" class="block text-sm font-medium text-gray-300 mb-2"> | |
| Senha | |
| </label> | |
| <div class="relative"> | |
| <input | |
| type="password" | |
| id="password" | |
| name="password" | |
| required | |
| class="w-full pl-12 pr-12 py-3 bg-slate-800/50 border border-slate-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent transition-colors" | |
| placeholder="••••••••" | |
| > | |
| <div class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"> | |
| <i data-lucide="lock" class="w-5 h-5"></i> | |
| </div> | |
| <button type="button" class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-300" id="toggle-password"> | |
| <i data-lucide="eye" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="w-4 h-4 bg-slate-800 border-slate-600 rounded focus:ring-cyan-500 focus:ring-2"> | |
| <span class="ml-2 text-sm text-gray-400">Lembrar-me</span> | |
| </label> | |
| <a href="#" class="text-sm text-cyan-400 hover:text-cyan-300 transition-colors"> | |
| Esqueceu a senha? | |
| </a> | |
| </div> | |
| <button | |
| type="submit" | |
| id="login-btn" | |
| class="w-full bg-linear-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 hover-lift disabled:opacity-50 disabled:cursor-not-allowed" | |
| > | |
| <span id="btn-text">Entrar</span> | |
| <i data-lucide="log-in" class="inline w-5 h-5 ml-2"></i> | |
| </button> | |
| </form> | |
| <!-- SUCCESS MESSAGE --> | |
| <div id="success-message" class="hidden mt-6 p-4 bg-green-500/10 border border-green-500/20 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-green-400 mr-3"></i> | |
| <div> | |
| <h3 class="text-green-400 font-semibold">Login realizado!</h3> | |
| <p class="text-green-300 text-sm">Redirecionando...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ERROR MESSAGE --> | |
| <div id="error-message" class="hidden mt-6 p-4 bg-red-500/10 border border-red-500/20 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i data-lucide="alert-circle" class="w-5 h-5 text-red-400 mr-3"></i> | |
| <div> | |
| <h3 class="text-red-400 font-semibold">Erro no login</h3> | |
| <p id="error-text" class="text-red-300 text-sm">Verifique suas credenciais e tente novamente.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- FOOTER --> | |
| <div class="text-center mt-8"> | |
| <p class="text-gray-400 text-sm"> | |
| Não tem uma conta? | |
| <a href="/register" class="text-cyan-400 hover:text-cyan-300 transition-colors font-medium"> | |
| Criar conta | |
| </a> | |
| </p> | |
| <div class="mt-6 pt-6 border-t border-slate-700"> | |
| <a href="/" class="text-gray-400 hover:text-cyan-400 transition-colors text-sm"> | |
| ← Voltar ao site | |
| </a> | |
| </div> | |
| </div> | |
| <!-- DEMO CREDENTIALS --> | |
| <div class="mt-8 p-4 bg-slate-800/50 rounded-lg border border-slate-600"> | |
| <h3 class="text-sm font-semibold text-gray-300 mb-2">Credenciais de Demonstração:</h3> | |
| <div class="text-xs text-gray-400 space-y-1"> | |
| <p><strong>Email:</strong> admin@softedge.com</p> | |
| <p><strong>Senha:</strong> Admin@123456</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SCRIPTS --> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize Lucide icons | |
| lucide.createIcons(); | |
| // Password toggle | |
| const togglePassword = document.getElementById('toggle-password'); | |
| const passwordInput = document.getElementById('password'); | |
| togglePassword.addEventListener('click', function() { | |
| const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password'; | |
| passwordInput.setAttribute('type', type); | |
| const icon = this.querySelector('i'); | |
| icon.setAttribute('data-lucide', type === 'password' ? 'eye' : 'eye-off'); | |
| lucide.createIcons(); | |
| }); | |
| // Login form handling | |
| const loginForm = document.getElementById('login-form'); | |
| const loginBtn = document.getElementById('login-btn'); | |
| const btnText = document.getElementById('btn-text'); | |
| const successMessage = document.getElementById('success-message'); | |
| const errorMessage = document.getElementById('error-message'); | |
| const errorText = document.getElementById('error-text'); | |
| loginForm.addEventListener('submit', async function(e) { | |
| e.preventDefault(); | |
| // Show loading state | |
| loginBtn.disabled = true; | |
| btnText.textContent = 'Entrando...'; | |
| // Hide previous messages | |
| successMessage.classList.add('hidden'); | |
| errorMessage.classList.add('hidden'); | |
| // Get form data | |
| const formData = new FormData(loginForm); | |
| const data = Object.fromEntries(formData.entries()); | |
| try { | |
| const response = await fetch('/api/auth/login', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify(data) | |
| }); | |
| const result = await response.json(); | |
| if (response.ok) { | |
| // Show success message | |
| successMessage.classList.remove('hidden'); | |
| // Redirect after delay | |
| setTimeout(() => { | |
| window.location.href = '/admin'; | |
| }, 1500); | |
| } else { | |
| // Show error message | |
| errorText.textContent = result.error || 'Erro ao fazer login'; | |
| errorMessage.classList.remove('hidden'); | |
| } | |
| } catch (error) { | |
| console.error('Error:', error); | |
| errorText.textContent = 'Erro de conexão. Tente novamente.'; | |
| errorMessage.classList.remove('hidden'); | |
| } finally { | |
| // Reset button state | |
| loginBtn.disabled = false; | |
| btnText.textContent = 'Entrar'; | |
| } | |
| }); | |
| }); | |
| </script> | |
| <style> | |
| .glass { | |
| background: rgba(0, 0, 0, 0.8); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #06b6d4, #3b82f6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hover-lift { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .hover-lift:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(6, 182, 212, 0.2); | |
| } | |
| </style> | |
| </body> | |
| </html> | |