| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Login | Modern UI</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| | <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <style> |
| | .gradient-bg { |
| | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | } |
| | .input-field { |
| | transition: all 0.3s ease; |
| | } |
| | .input-field:focus { |
| | box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3); |
| | } |
| | .btn-hover:hover { |
| | transform: translateY(-2px); |
| | box-shadow: 0 10px 20px -10px rgba(102, 126, 234, 0.6); |
| | } |
| | </style> |
| | </head> |
| | <body class="min-h-screen bg-gray-100 flex items-center justify-center"> |
| | <div class="w-full max-w-md mx-auto"> |
| | <div class="bg-white rounded-xl shadow-2xl overflow-hidden" data-aos="fade-up" data-aos-duration="800"> |
| | <div class="gradient-bg py-6 px-8 text-center"> |
| | <h1 class="text-3xl font-bold text-white">Welcome Back</h1> |
| | <p class="text-white opacity-80 mt-2">Sign in to your account</p> |
| | </div> |
| | |
| | <div class="px-8 py-6"> |
| | <form> |
| | <div class="mb-6"> |
| | <label class="block text-gray-700 text-sm font-medium mb-2" for="email"> |
| | Email Address |
| | </label> |
| | <div class="relative"> |
| | <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
| | <i data-feather="mail" class="text-gray-400"></i> |
| | </div> |
| | <input |
| | id="email" |
| | type="email" |
| | class="input-field w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:outline-none" |
| | placeholder="you@example.com" |
| | required |
| | > |
| | </div> |
| | </div> |
| | |
| | <div class="mb-6"> |
| | <label class="block text-gray-700 text-sm font-medium mb-2" for="password"> |
| | 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="text-gray-400"></i> |
| | </div> |
| | <input |
| | id="password" |
| | type="password" |
| | class="input-field w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:outline-none" |
| | placeholder="••••••••" |
| | required |
| | > |
| | </div> |
| | </div> |
| | |
| | <div class="flex items-center justify-between mb-6"> |
| | <div class="flex items-center"> |
| | <input id="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> |
| | <label for="remember-me" class="ml-2 block text-sm text-gray-700"> |
| | Remember me |
| | </label> |
| | </div> |
| | <a href="#" class="text-sm text-indigo-600 hover:text-indigo-500"> |
| | Forgot password? |
| | </a> |
| | </div> |
| | |
| | <button type="submit" class="btn-hover w-full bg-indigo-600 text-white py-3 px-4 rounded-lg font-medium transition duration-300 ease-in-out"> |
| | Sign In |
| | </button> |
| | |
| | <div class="mt-6 text-center"> |
| | <p class="text-gray-600"> |
| | Don't have an account? |
| | <a href="#" class="text-indigo-600 font-medium hover:text-indigo-500">Sign up</a> |
| | </p> |
| | </div> |
| | </form> |
| | |
| | <div class="mt-8"> |
| | <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"> |
| | Or continue with |
| | </span> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-6 grid grid-cols-3 gap-3"> |
| | <div> |
| | <a href="#" class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> |
| | <i data-feather="github" class="mr-2"></i> |
| | </a> |
| | </div> |
| | <div> |
| | <a href="#" class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> |
| | <i data-feather="twitter" class="mr-2"></i> |
| | </a> |
| | </div> |
| | <div> |
| | <a href="#" class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"> |
| | <i data-feather="facebook" class="mr-2"></i> |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <script> |
| | AOS.init(); |
| | feather.replace(); |
| | |
| | |
| | document.querySelectorAll('.input-field').forEach(input => { |
| | input.addEventListener('focus', () => { |
| | input.parentElement.querySelector('i').style.color = '#667eea'; |
| | }); |
| | input.addEventListener('blur', () => { |
| | input.parentElement.querySelector('i').style.color = '#9ca3af'; |
| | }); |
| | }); |
| | </script> |
| | </body> |
| | </html> |
| |
|
