| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Login - TaskFlow Pro</title> |
| <link rel="icon" type="image/x-icon" href="/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="style.css"> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 500: '#06b6d4', |
| 600: '#0891b2', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body class="bg-gray-900 text-gray-100 min-h-screen flex items-center justify-center p-4"> |
| <div class="w-full max-w-md"> |
| <div class="bg-gray-800 rounded-xl shadow-xl p-8 border border-gray-700"> |
| <div class="text-center mb-8"> |
| <div class="w-16 h-16 bg-primary-500 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i data-feather="log-in" class="text-white text-2xl"></i> |
| </div> |
| <h2 class="text-3xl font-bold">Welcome Back</h2> |
| <p class="text-gray-400 mt-2">Sign in to your account</p> |
| </div> |
|
|
| <form id="loginForm" class="space-y-6"> |
| <div> |
| <label class="block text-sm font-medium mb-2">Email Address</label> |
| <input |
| type="email" |
| id="email" |
| required |
| class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" |
| placeholder="Enter your email" |
| > |
| </div> |
|
|
| <div> |
| <label class="block text-sm font-medium mb-2">Password</label> |
| <input |
| type="password" |
| id="password" |
| required |
| class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" |
| placeholder="Enter your password" |
| > |
| </div> |
|
|
| <div class="flex items-center justify-between"> |
| <label class="flex items-center"> |
| <input type="checkbox" class="w-4 h-4 text-primary-500 border-gray-600 rounded focus:ring-primary-500"> |
| <span class="ml-2 text-sm text-gray-400">Remember me</span> |
| </label> |
| <a href="#" class="text-sm text-primary-500 hover:text-primary-400">Forgot password?</a> |
| </div> |
|
|
| <button |
| type="submit" |
| class="w-full bg-primary-500 hover:bg-primary-600 text-white font-medium py-3 rounded-lg transition-colors" |
| > |
| Sign In |
| </button> |
| </form> |
|
|
| <div class="mt-8 text-center"> |
| <p class="text-gray-400"> |
| Don't have an account?{' '} |
| <a href="#register" class="text-primary-500 hover:text-primary-400 font-medium">Sign up</a> |
| </p> |
| </div> |
|
|
| <div class="mt-6 pt-6 border-t border-gray-700"> |
| <p class="text-xs text-center text-gray-500 mb-2">Demo accounts:</p> |
| <div class="space-y-1 text-xs text-center text-gray-400"> |
| <p>Admin: admin@taskflow.com / admin123</p> |
| <p>Manager: manager@taskflow.com / manager123</p> |
| <p>Employee: employee@taskflow.com / employee123</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="script.js"></script> |
| <script> |
| document.getElementById('loginForm').addEventListener('submit', async (e) => { |
| e.preventDefault(); |
| const email = document.getElementById('email').value; |
| const password = document.getElementById('password').value; |
| |
| |
| if ((email === 'admin@taskflow.com' && password === 'admin123') || |
| (email === 'manager@taskflow.com' && password === 'manager123') || |
| (email === 'employee@taskflow.com' && password === 'employee123')) { |
| |
| const role = email.split('@')[0]; |
| localStorage.setItem('user', JSON.stringify({ email, role })); |
| window.location.href = `/${role}.html`; |
| } else { |
| alert('Invalid credentials. Please try demo accounts.'); |
| } |
| }); |
| |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
