File size: 9,154 Bytes
21eef67 24c38b7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 | <!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">
<!-- Navigation Bar -->
<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">
<!-- Dark Mode Toggle -->
<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 Content -->
<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">
<!-- Logo Placeholder -->
<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>
// Theme toggle functionality
const themeToggle = document.getElementById('theme-toggle');
const themeIcon = document.getElementById('theme-icon');
const html = document.documentElement;
// Check for saved theme preference or use preferred OS theme
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();
});
// Password visibility toggle
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();
}
// Initialize feather icons
feather.replace();
</script>
</body>
</html>
|