|
|
<!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"> |
|
|
|
|
|
<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"> |
|
|
Sign in 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">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">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"> |
|
|
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"> |
|
|
Forgot your password? |
|
|
</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(); |
|
|
} |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
