<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Login</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#6200EA", // Vivid Purple/Indigo from screenshots
"primary-hover": "#5000C0",
"secondary": "#FFD700", // Gold accent
"background-light": "#F3F4F6", // Light gray
"background-dark": "#0B0516", // Deep dark purple/black
"card-light": "#FFFFFF",
"card-dark": "#161022",
"input-bg-dark": "#1F1630",
"input-bg-light": "#F9FAFB",
},
fontFamily: {
display: ["Inter", "sans-serif"],
sans: ["Inter", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.5rem",
'xl': '1rem',
'2xl': '1.5rem',
},
},
},
};
</script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<script>
// Simple script to toggle dark mode for demonstration
function toggleDarkMode() {
document.documentElement.classList.toggle('dark');
}
</script>
</head>
<body class="bg-background-light dark:bg-background-dark font-sans text-gray-900 dark:text-white min-h-screen flex flex-col transition-colors duration-300">
<nav class="w-full py-6 px-8 flex justify-between items-center z-20">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center shadow-lg shadow-primary/30">
<span class="material-icons text-white text-2xl">sports_esports</span>
</div>
<span class="text-xl font-bold tracking-tight dark:text-white text-gray-900">QuizQuest</span>
</div>
<button class="p-2 rounded-full bg-gray-200 dark:bg-card-dark text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors" onclick="toggleDarkMode()">
<span class="material-icons dark:hidden">dark_mode</span>
<span class="material-icons hidden dark:block">light_mode</span>
</button>
</nav>
<main class="flex-grow flex items-center justify-center px-4 sm:px-6 lg:px-8 py-4 relative z-10">
<div class="absolute top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
<div class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/20 rounded-full blur-[120px] dark:bg-primary/10"></div>
<div class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-blue-600/20 rounded-full blur-[120px] dark:bg-blue-600/10"></div>
</div>
<div class="max-w-7xl w-full grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24 items-center">
<div class="hidden lg:flex flex-col items-center justify-center space-y-8 animate-fade-in-up">
<div class="relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-primary to-blue-600 rounded-2xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
<div class="relative bg-card-light dark:bg-card-dark rounded-2xl p-2 shadow-2xl overflow-hidden border border-gray-100 dark:border-gray-800">
<img alt="3D robot holding a golden trophy representing achievement" class="rounded-xl w-full h-auto max-h-[500px] object-cover transform transition duration-500 hover:scale-[1.02]" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD609FHHvODKcE-zDo49yCNuh4-MdRyzy51NxNY7t3v12JnOPCjsEy4bO579rqCdeQm07_WE2rhBSPk7wovGJnCR7l3ZzJJyT-PjbpcZv4kSz_-klFSXJPyVfnQdyyM1nN3Iyb6ZL7t0rCFnV6waRXBgAs5gCElpWokNI4V9vVXUlP40So3Nk9vau4khZ4IUbE33Q671kIzoMOzJtv52XVJ8_YLqATP3qjyEqqpCNEHvjwU649VNxTAMm-iu1ZNX88ykjUwv3Pa"/>
</div>
</div>
<div class="text-center space-y-4 max-w-lg">
<h2 class="text-4xl font-extrabold tracking-tight">
<span class="text-gray-900 dark:text-white">Play. </span>
<span class="text-primary">Earn. </span>
<span class="text-gray-900 dark:text-white">Rule.</span>
</h2>
<p class="text-gray-600 dark:text-gray-400 text-lg">
The ultimate high-energy, gamified quiz portal. Compete, climb the ranks, and claim your rewards.
</p>
<div class="flex items-center justify-center gap-3 pt-2">
<div class="flex -space-x-3">
<img alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-background-dark" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBhepf3sFQQCbJwTmMCBJMiRSJpAPBATDXESuPYcg4vcUbg_7pojARPnOPC5XBsUvRaR_nzWnshsK34yVi9vlhsIZSXWLSgwP14yric3snW1rco77uu-GtZUJ36mgreQK5zUVLRm9ygCgVORoSill3MMR5nD7K1nHvklWO4qrIlE8weKXfGXfisXZ_cConmSSw_CLy1tmAjMUNfq_8OxCPMqLzsnMxnsnJcGtAV9rafGBRmAbj1t13eUHRfKjTjh4Mgtq37NAZ9"/>
<img alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-background-dark" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCmkv_rT-HMrIDf26TcUbmf6ZRtF6YoIskj9CE5-Q_86RSX5wB-HCDlQWxxFtvgr1W5AjeWzTKa04pKBwMzy5ZHLIEWIjTEMUcrfL8FmpGZiu_ouvquwpvgm_JSFBYtL8soJ2UWpkcnW5XHSTR-m3htLDsqn3zjw3jrUNfwopYn1c0kOEi_riL7OcDeiV9WqxRhTRfEm-quKMx65Hxdw3jzgCipC5DW1jjDqZYJkDb0QNi1rasOTwxwclXu65VXhOSRA6wEWAKK"/>
<img alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-background-dark" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDbuqfP3DK_MWUTIOWJEKV-4O0CIar9elNNSO7PwGB_SAsuXZlw4N7Wgj_6r7ET5No1ZTMY_Y69H1Zm9IdVeZXYFZLsgfNEskOVPWZQiR5wW856SDb3lR8UcBpoQWBR-vxsBz0usPLc0b6HSymDYQwSXgmy__AQ_2sMVQT8BgTNIOl1LHiVySDTzYQSXYKt3I_3WY9JPjsD3KJk8H6oJFF59Kr5uHzapDsIuC7CgFa111-DkAhN5D7Qo4c-L7jo2vPnpViZ4L9B"/>
<div class="w-10 h-10 rounded-full border-2 border-white dark:border-background-dark bg-primary flex items-center justify-center text-xs font-bold text-white">
+2k
</div>
</div>
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">Heroes online now</span>
</div>
</div>
</div>
<div class="w-full max-w-md mx-auto">
<div class="bg-card-light dark:bg-card-dark p-8 md:p-10 rounded-3xl shadow-xl border border-gray-100 dark:border-gray-800/50 backdrop-blur-sm">
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Welcome Back, Hero!</h1>
<p class="text-gray-500 dark:text-gray-400">Enter your credentials to continue your quest.</p>
</div>
<form action="#" class="space-y-6" method="POST">
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email Address</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<span class="material-icons text-gray-400 text-xl">mail</span>
</div>
<input class="block w-full pl-11 pr-4 py-3 bg-gray-50 dark:bg-input-bg-dark border border-gray-200 dark:border-gray-700 rounded-xl text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all" id="email" name="email" placeholder="hero@quizquest.com" type="email"/>
</div>
</div>
<div class="space-y-2">
<div class="flex items-center justify-between">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="password">Password</label>
<a class="text-sm font-medium text-primary hover:text-primary-hover transition-colors" href="#">Forgot Password?</a>
</div>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<span class="material-icons text-gray-400 text-xl">lock</span>
</div>
<input class="block w-full pl-11 pr-12 py-3 bg-gray-50 dark:bg-input-bg-dark border border-gray-200 dark:border-gray-700 rounded-xl text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all" id="password" name="password" placeholder="••••••••" type="password"/>
<div class="absolute inset-y-0 right-0 pr-4 flex items-center cursor-pointer">
<span class="material-icons text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors text-xl">visibility</span>
</div>
</div>
</div>
<div class="flex items-center">
<input class="h-5 w-5 text-primary focus:ring-primary border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded transition-colors" id="remember-me" name="remember-me" type="checkbox"/>
<label class="ml-2 block text-sm text-gray-600 dark:text-gray-400" for="remember-me">
Remember my session
</label>
</div>
<button class="w-full flex justify-center items-center py-3.5 px-4 border border-transparent rounded-xl shadow-lg shadow-primary/40 text-sm font-bold text-white bg-primary hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all transform hover:-translate-y-0.5" type="submit">
Join the Quest
<span class="material-icons ml-2 text-lg">bolt</span>
</button>
</form>
<div class="relative my-8">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-200 dark:border-gray-700"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-4 bg-card-light dark:bg-card-dark text-gray-500 dark:text-gray-400 font-medium tracking-wide text-xs uppercase">Or continue with</span>
</div>
</div>
<div class="grid grid-cols-3 gap-4">
<a class="flex justify-center items-center py-2.5 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800/50 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors group" href="#">
<img alt="Google" class="h-6 w-6" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCpv8DP72nPYgBcWWl34IrGKQRvmGXib2Yal-C6dwxm7ZO-KrAE6_UMP585nKH3WkwZONY0LWD_b8us64fT97MqZkshAAA3DwbPZ4hWKsUAg5Sq4NStpQdNJUgPiMwWh2tdi00eTXteSfqeybof3DETnkhCqEXlgXFXjyq81_S-p5_S6iTbhvu3VpJHbLgFO1gLhX40IMB_QTwPTcgL0oYv3BtQljsiJz2BByhESYyuuQze4xbIpZOrIto0eAKcTkv5dLtM_oqM"/>
</a>
<a class="flex justify-center items-center py-2.5 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800/50 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors group" href="#">
<i class="fa-brands fa-discord text-2xl text-[#5865F2]"></i>
</a>
<a class="flex justify-center items-center py-2.5 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800/50 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors group" href="#">
<i class="fa-brands fa-apple text-2xl text-gray-900 dark:text-white"></i>
</a>
</div>
<p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
New to the realm?
<a class="font-semibold text-primary hover:text-primary-hover transition-colors" href="#">Create an account</a>
</p>
</div>
<div class="mt-8 flex justify-center space-x-6 text-xs text-gray-500 dark:text-gray-500">
<a class="hover:text-gray-800 dark:hover:text-gray-300 transition-colors" href="#">Support</a>
<a class="hover:text-gray-800 dark:hover:text-gray-300 transition-colors" href="#">Privacy Policy</a>
<a class="hover:text-gray-800 dark:hover:text-gray-300 transition-colors" href="#">Terms of Service</a>
</div>
</div>
</div>
</main>
<footer class="w-full py-4 text-center z-10">
<p class="text-xs text-gray-400 dark:text-gray-600">
© 2023 QuizQuest. All rights reserved.
</p>
</footer>
</body></html>