| <!DOCTYPE html> |
| <html lang="en" class="light"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Login | AuthPortal Pro</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 500: '#3B82F6', |
| 600: '#2563EB', |
| }, |
| secondary: { |
| 500: '#6366F1', |
| 600: '#4F46E5', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| html { |
| font-family: 'Inter', sans-serif; |
| } |
| .login-container { |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| .dark .login-container { |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); |
| } |
| .input-field:focus { |
| border-color: #3B82F6; |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); |
| } |
| .dark .input-field:focus { |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-200 min-h-screen flex flex-col"> |
| |
| <nav class="bg-white dark:bg-gray-800 shadow-sm py-4 px-6"> |
| <div class="max-w-6xl mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-4"> |
| <div class="flex items-center"> |
| <i data-feather="lock" class="text-primary-500 dark:text-primary-400 w-6 h-6"></i> |
| <span class="ml-2 font-semibold text-gray-800 dark:text-white">AuthPortal Pro</span> |
| </div> |
| </div> |
| <div class="flex items-center space-x-4"> |
| |
| <div class="relative"> |
| <select class="appearance-none bg-transparent border border-gray-300 dark:border-gray-600 rounded px-3 py-1 pr-8 text-sm text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-1 focus:ring-primary-500"> |
| <option value="en">English</option> |
| <option value="es">Español</option> |
| <option value="fr">Français</option> |
| <option value="de">Deutsch</option> |
| <option value="ja">日本語</option> |
| </select> |
| <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"> |
| <i data-feather="globe" class="h-4 w-4 text-gray-400 dark:text-gray-500"></i> |
| </div> |
| </div> |
| |
| <button id="theme-toggle" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2"> |
| <i id="theme-icon" data-feather="moon" class="w-5 h-5"></i> |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <main class="flex-grow flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8"> |
| <div class="max-w-md w-full space-y-8"> |
| <div class="text-center"> |
| |
| <div class="mx-auto flex items-center justify-center h-32 w-32 rounded-full bg-primary-100 dark:bg-primary-900/30 p-4"> |
| <i data-feather="shield" class="h-20 w-20 text-primary-500 dark:text-primary-400"></i> |
| </div> |
| <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white" data-i18n="sign_in_title"> |
| <span data-i18n="sign_in_button">Sign in</span> |
| to your account |
| </h2> |
| </div> |
|
|
| <form class="mt-8 space-y-6 login-container bg-white dark:bg-gray-800 p-8 rounded-lg" action="#" method="POST"> |
| <input type="hidden" name="remember" value="true"> |
| <div class="rounded-md shadow-sm space-y-4"> |
| <div> |
| <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" data-i18n="username_label">Username or Email</label> |
| <div class="relative"> |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
| <i data-feather="user" class="h-5 w-5 text-gray-400 dark:text-gray-500"></i> |
| </div> |
| <input id="username" name="username" type="text" required class="input-field pl-10 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white" placeholder="username@example.com"> |
| </div> |
| </div> |
| <div> |
| <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" data-i18n="password_label">Password</label> |
| <div class="relative"> |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
| <i data-feather="lock" class="h-5 w-5 text-gray-400 dark:text-gray-500"></i> |
| </div> |
| <input id="password" name="password" type="password" autocomplete="current-password" required class="input-field pl-10 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white" placeholder="••••••••"> |
| <div class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer" onclick="togglePasswordVisibility()"> |
| <i id="eye-icon" data-feather="eye" class="h-5 w-5 text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400"></i> |
| </div> |
| </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-primary-500 focus:ring-primary-400 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700"> |
| <label for="remember-me" class="ml-2 block text-sm text-gray-700 dark:text-gray-300" data-i18n="remember_me"> |
| Remember me |
| </label> |
| </div> |
|
|
| <div class="text-sm"> |
| <a href="#" class="font-medium text-primary-500 dark:text-primary-400 hover:text-primary-600 dark:hover:text-primary-300"> |
| <span data-i18n="forgot_password">Forgot your password?</span> |
| </a> |
| </div> |
| </div> |
|
|
| <div> |
| <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary-500 hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-800"> |
| <span class="absolute left-0 inset-y-0 flex items-center pl-3"> |
| <i data-feather="log-in" class="h-5 w-5 text-primary-100 group-hover:text-primary-200"></i> |
| </span> |
| Sign in |
| </button> |
| </div> |
| </form> |
| </div> |
| </main> |
|
|
| <script> |
| |
| const themeToggle = document.getElementById('theme-toggle'); |
| const themeIcon = document.getElementById('theme-icon'); |
| const html = document.documentElement; |
| |
| |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
| html.classList.add('dark'); |
| themeIcon.setAttribute('data-feather', 'sun'); |
| } else { |
| html.classList.remove('dark'); |
| themeIcon.setAttribute('data-feather', 'moon'); |
| } |
| |
| themeToggle.addEventListener('click', () => { |
| html.classList.toggle('dark'); |
| localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light'); |
| |
| if (html.classList.contains('dark')) { |
| themeIcon.setAttribute('data-feather', 'sun'); |
| } else { |
| themeIcon.setAttribute('data-feather', 'moon'); |
| } |
| feather.replace(); |
| }); |
| |
| function togglePasswordVisibility() { |
| const passwordInput = document.getElementById('password'); |
| const eyeIcon = document.getElementById('eye-icon'); |
| |
| if (passwordInput.type === 'password') { |
| passwordInput.type = 'text'; |
| eyeIcon.setAttribute('data-feather', 'eye-off'); |
| } else { |
| passwordInput.type = 'password'; |
| eyeIcon.setAttribute('data-feather', 'eye'); |
| } |
| feather.replace(); |
| } |
| |
| document.querySelector('select').addEventListener('change', function() { |
| const lang = this.value; |
| |
| |
| console.log('Language changed to:', lang); |
| }); |
| |
| |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
|
|
