| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Login - FinTrack</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> |
| <style> |
| .auth-container { |
| background: linear-gradient(135deg, #f9f0ff 0%, #e0c3fc 100%); |
| } |
| .dark .auth-container { |
| background: linear-gradient(135deg, #4a1d96 0%, #2e1065 100%); |
| } |
| .cute-btn { |
| background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%); |
| box-shadow: 0 4px 6px -1px rgba(167, 139, 250, 0.3), 0 2px 4px -1px rgba(167, 139, 250, 0.2); |
| } |
| .cute-btn:hover { |
| background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); |
| } |
| .cute-input { |
| border-color: #ddd6fe; |
| } |
| .cute-input:focus { |
| border-color: #8b5cf6; |
| box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 dark:bg-gray-900"> |
| <div class="min-h-screen flex items-center justify-center auth-container"> |
| <div class="max-w-md w-full space-y-8 p-10 bg-white dark:bg-gray-800 rounded-xl shadow-lg"> |
| <div> |
| <div class="flex justify-center animate-bounce"> |
| <i data-feather="heart" class="h-12 w-12 text-pink-500 dark:text-pink-400"></i> |
| </div> |
| <h2 class="mt-6 text-center text-3xl font-extrabold text-purple-900 dark:text-purple-100"> |
| Welcome back! 💖 |
| </h2> |
| <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400"> |
| Or |
| <a href="/signup" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300"> |
| create a new account |
| </a> |
| </p> |
| </div> |
| <form class="mt-8 space-y-6" action="#" method="POST"> |
| <input type="hidden" name="remember" value="true"> |
| <div class="rounded-md shadow-sm space-y-4"> |
| <div> |
| <label for="email" class="sr-only">Email address</label> |
| <input id="email" name="email" type="email" autocomplete="email" required class="cute-input appearance-none rounded-lg relative block w-full px-3 py-3 border placeholder-pink-300 dark:placeholder-purple-300 text-purple-900 dark:text-purple-100 bg-white dark:bg-purple-900/20 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:focus:ring-purple-700 sm:text-sm" placeholder="Your cute email 💌"> |
| </div> |
| <div> |
| <label for="password" class="sr-only">Password</label> |
| <input id="password" name="password" type="password" autocomplete="current-password" required class="cute-input appearance-none rounded-lg relative block w-full px-3 py-3 border placeholder-pink-300 dark:placeholder-purple-300 text-purple-900 dark:text-purple-100 bg-white dark:bg-purple-900/20 focus:outline-none focus:ring-2 focus:ring-purple-200 dark:focus:ring-purple-700 sm:text-sm" placeholder="Secret password 🔑"> |
| </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-indigo-600 dark:text-indigo-400 focus:ring-indigo-500 dark:focus:ring-indigo-600 border-gray-300 dark:border-gray-600 rounded"> |
| <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300"> |
| Remember me |
| </label> |
| </div> |
|
|
| <div class="text-sm"> |
| <a href="/forgot-password" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300"> |
| Forgot your password? |
| </a> |
| </div> |
| </div> |
|
|
| <div> |
| <button type="submit" class="cute-btn group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-full text-white transition-all duration-300 transform hover:scale-105"> |
| <span class="absolute left-0 inset-y-0 flex items-center pl-3"> |
| <i data-feather="unlock" class="h-5 w-5 text-white"></i> |
| </span> |
| Unlock your account ✨ |
| </button> |
| </div> |
| </form> |
| |
| <div class="relative"> |
| <div class="absolute inset-0 flex items-center"> |
| <div class="w-full border-t border-gray-300 dark:border-gray-600"></div> |
| </div> |
| <div class="relative flex justify-center text-sm"> |
| <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400"> |
| Or continue with |
| </span> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-2 gap-3"> |
| <div> |
| <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-purple-200 dark:border-purple-700 rounded-full shadow-sm bg-white dark:bg-purple-900/20 text-sm font-medium text-purple-600 dark:text-purple-200 hover:bg-purple-50 dark:hover:bg-purple-900/30 transition-colors duration-300"> |
| <i data-feather="github" class="h-5 w-5"></i> |
| </a> |
| </div> |
| <div> |
| <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-purple-200 dark:border-purple-700 rounded-full shadow-sm bg-white dark:bg-purple-900/20 text-sm font-medium text-purple-600 dark:text-purple-200 hover:bg-purple-50 dark:hover:bg-purple-900/30 transition-colors duration-300"> |
| <i data-feather="google" class="h-5 w-5"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| <script> |
| feather.replace(); |
| |
| document.querySelector('form').addEventListener('submit', function(e) { |
| const email = document.getElementById('email').value; |
| const password = document.getElementById('password').value; |
| |
| if (!email || !password) { |
| e.preventDefault(); |
| alert('Please fill in all fields with love 💕'); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
