| <!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> |
|
|
