File size: 10,682 Bytes
21eef67 1b413f9 21eef67 1b413f9 21eef67 1bbe3b9 1b413f9 21eef67 1b413f9 21eef67 1b413f9 21eef67 1b413f9 21eef67 1b413f9 61c1d30 1b413f9 fc67470 1b413f9 21eef67 1b413f9 21eef67 1b413f9 21eef67 1b413f9 21eef67 1b413f9 1bbe3b9 1b413f9 21eef67 1b413f9 1bbe3b9 1b413f9 1bbe3b9 21eef67 1b413f9 21eef67 1b413f9 1bbe3b9 21eef67 1b413f9 612fc5c 1b413f9 21eef67 1b413f9 21eef67 1b413f9 612fc5c 1b413f9 1bbe3b9 1b413f9 fc67470 21eef67 1b413f9 21eef67 1bbe3b9 |
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 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 |
<!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">
<!-- Language Selector -->
<div class="relative">
<select class="appearance-none bg-transparent border border-gray-300 dark:border-gray-600 rounded px-3 py-1 pr-8 text-sm text-gray-700 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:bg-gray-700">
<option value="en" class="dark:bg-gray-700 dark:text-gray-100">English</option>
<option value="es" class="dark:bg-gray-700 dark:text-gray-100">Español</option>
<option value="fr" class="dark:bg-gray-700 dark:text-gray-100">Français</option>
<option value="de" class="dark:bg-gray-700 dark:text-gray-100">Deutsch</option>
<option value="ja" class="dark:bg-gray-700 dark:text-gray-100">日本語</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<i data-feather="globe" class="h-4 w-4 text-gray-400 dark:text-gray-300"></i>
</div>
</div>
<!-- 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" data-i18n="sign_in_title">
<span data-i18n="sign_in_button">Sign in</span>
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" data-i18n="username_label">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" data-i18n="password_label">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" data-i18n="remember_me">
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">
<span data-i18n="forgot_password">Forgot your password?</span>
</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();
}
// Language change handler
document.querySelector('select').addEventListener('change', function() {
const lang = this.value;
// In a real app, you would load translations here
// For demo purposes, we'll just show the selected language
console.log('Language changed to:', lang);
});
// Initialize feather icons
feather.replace();
</script>
</body>
</html>
|