<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest | Join the Quest</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#5b13ec",
"background-light": "#f6f6f8",
"background-dark": "#0a0812",
"surface-dark": "#161022",
"border-dark": "#2e2839",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}
.bg-grid {
background-size: 40px 40px;
background-image: radial-gradient(circle, rgba(91, 19, 236, 0.1) 1px, transparent 1px);
}
.glow-input:focus {
box-shadow: 0 0 15px rgba(91, 19, 236, 0.3);
}
.glass-panel {
background: rgba(22, 16, 34, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-display selection:bg-primary/30">
<div class="relative min-h-screen w-full flex overflow-hidden">
<!-- Left Side: Branding & Hero -->
<div class="hidden lg:flex lg:w-1/2 relative flex-col justify-center items-center p-12 overflow-hidden bg-background-dark">
<!-- Background Decorations -->
<div class="absolute inset-0 bg-grid opacity-30"></div>
<div class="absolute -top-24 -left-24 w-96 h-96 bg-primary/20 rounded-full blur-[120px]"></div>
<div class="absolute bottom-0 right-0 w-[500px] h-[500px] bg-primary/10 rounded-full blur-[150px]"></div>
<div class="relative z-10 flex flex-col items-center text-center max-w-lg">
<div class="flex items-center gap-3 mb-12">
<div class="bg-primary p-2 rounded-xl shadow-[0_0_20px_rgba(91,19,236,0.5)]">
<span class="material-symbols-outlined text-white text-3xl">database</span>
</div>
<h1 class="text-3xl font-black tracking-tight text-white uppercase">QuizQuest</h1>
</div>
<div class="w-full aspect-square mb-12 relative group">
<div class="absolute inset-0 bg-primary/20 rounded-full animate-pulse blur-3xl"></div>
<img alt="3D robotic mascot character holding a glowing trophy" class="w-full h-full object-contain relative z-10" data-alt="3D futuristic robotic mascot with glowing neon accents" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDdVXlCJC9wCjMZ89R5z4P3aF2SB82SreY3F2vG4wnsTF420xIgC_-vXfT5mhd3iIMK1xQtybHaue9BIDMLlP6Qwcg3QNLRL6Sy3XRPNjXOj5PEOKdCcJO6ImBl7hHttxSj_Dco7CRJnyqVygXu175XE0N08ANvP3_TkB5jxr7KeYgEDWevSnUykEHglZEY184XKOwbKDhaLpOqu8SGbe2k5z5r9wIUZ-wi02JUnrm2twkPJT7LQazTbPwRyT_mzcVEVY7x--quNm7P"/>
</div>
<div class="space-y-4">
<h2 class="text-5xl font-black text-white leading-tight">
Play. <span class="text-primary">Earn.</span> Rule.
</h2>
<p class="text-slate-400 text-lg">
The ultimate high-energy, gamified quiz portal. Compete, climb the ranks, and claim your rewards.
</p>
</div>
<div class="mt-12 flex gap-4">
<div class="flex -space-x-3">
<img alt="User" class="w-10 h-10 rounded-full border-2 border-background-dark" data-alt="Small round user profile avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC2OywjyUhFaWaAJgQYB9sGEGv_bB_0MGvS_Ypq6IcdNQ_CUMuEMdP9P9deuL1nO8kqvD0RDHeMP5puwFCk3KT50ovfkIkq9zBVMKk2lOMC30PY3LXFURaQvw9eqw1ac9OsLk0KBeqbzcBpH0vj5engPjKMIU0VBajNpgnNi4O9DYCghcE1MwUmuafnu8Uyv0IkcWRVZ7wDgm0B7CdC2F-dq886dVj3nvUdkxpDdGQNfIkgGHS5LffBRaFrY9hGk6Ozr76JKTJTTkEh"/>
<img alt="User" class="w-10 h-10 rounded-full border-2 border-background-dark" data-alt="Small round user profile avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDEIl_Rtph6gKi_thYK92OOE7ukxYbUjAj-w0EtcA4AlYi0BADvyYVUgTVwViilbFeWEqR5Km0Frm-E57pKzcQ7HlcVB1xUugoJnTm3njZbrupoXRWG9Gs9KgO39GL6uGJ0679I7H9eF3lL0NOmJNyeO50fY7e5l_G85NtBSPa-fmmaY49fyg7Dm1FnxIbDiu-q3QNU8L8k3CEXXf-EnUh1iPbcWddT3HP99P5C95iNqBOV3CQE5zXpErQGRbeGTKQObV6Ic4Y1hTME"/>
<img alt="User" class="w-10 h-10 rounded-full border-2 border-background-dark" data-alt="Small round user profile avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAuBVCCPT7ztrgyV2wzMChJB0zyG3DQVadr8_DT43-d1nM7a78fPC6UZdHB-1gfMBk51eFwbFHKDD1kYunlG1c4JyA6FO35a1UNtdDasbBNuW29YX5YimPTyArtNLwxA3amwnC_15xkYdj1YFtyw2eIt9HondYKw0esl1dVYRi9LHmLymuH2_ZLyPMwAx56jCjJ0uvfKwt4QphWuq3LGSfQuUEhMDZxVaWdxGbWlgG1UPgqWx0xmxEMAE75DZ98v3f9dBHm2a2j8FK3"/>
<div class="w-10 h-10 rounded-full border-2 border-background-dark bg-surface-dark flex items-center justify-center text-xs font-bold text-primary">+2k</div>
</div>
<p class="text-slate-500 text-sm self-center">Heroes online now</p>
</div>
</div>
</div>
<!-- Right Side: Auth Form -->
<div class="w-full lg:w-1/2 flex flex-col justify-center items-center p-6 sm:p-12 relative">
<!-- Mobile Logo -->
<div class="lg:hidden absolute top-8 left-8 flex items-center gap-2">
<div class="bg-primary p-1.5 rounded-lg">
<span class="material-symbols-outlined text-white text-xl">database</span>
</div>
<h1 class="text-xl font-black text-white uppercase">QuizQuest</h1>
</div>
<div class="w-full max-w-md space-y-8 relative z-10">
<div class="text-center lg:text-left space-y-2">
<h2 class="text-3xl font-bold text-white tracking-tight">Welcome Back, Hero!</h2>
<p class="text-slate-400">Enter your credentials to continue your quest.</p>
</div>
<!-- Form -->
<form class="space-y-6">
<div class="space-y-4">
<div class="space-y-2 group">
<label class="text-sm font-semibold text-slate-300 ml-1">Email Address</label>
<div class="relative">
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 group-focus-within:text-primary transition-colors">mail</span>
<input class="w-full bg-surface-dark border-border-dark text-white rounded-xl py-4 pl-12 pr-4 focus:ring-primary focus:border-primary glow-input transition-all placeholder:text-slate-600" placeholder="hero@quizquest.com" type="email"/>
</div>
</div>
<div class="space-y-2 group">
<div class="flex justify-between items-center ml-1">
<label class="text-sm font-semibold text-slate-300">Password</label>
<a class="text-xs text-primary font-medium hover:underline" href="#">Forgot Password?</a>
</div>
<div class="relative">
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 group-focus-within:text-primary transition-colors">lock</span>
<input class="w-full bg-surface-dark border-border-dark text-white rounded-xl py-4 pl-12 pr-12 focus:ring-primary focus:border-primary glow-input transition-all placeholder:text-slate-600" placeholder="••••••••" type="password"/>
<button class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 hover:text-white transition-colors" type="button">
<span class="material-symbols-outlined">visibility</span>
</button>
</div>
</div>
</div>
<div class="flex items-center gap-2 ml-1">
<input class="rounded border-border-dark bg-surface-dark text-primary focus:ring-primary" id="remember" type="checkbox"/>
<label class="text-sm text-slate-400 cursor-pointer select-none" for="remember">Remember my session</label>
</div>
<button class="w-full bg-primary hover:bg-primary/90 text-white font-bold py-4 rounded-full shadow-[0_10px_30px_-10px_rgba(91,19,236,0.6)] transition-all transform hover:-translate-y-0.5 active:translate-y-0 flex items-center justify-center gap-2" type="submit">
<span>Join the Quest</span>
<span class="material-symbols-outlined text-xl">bolt</span>
</button>
</form>
<div class="relative py-4">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-border-dark"></div>
</div>
<div class="relative flex justify-center text-xs uppercase">
<span class="bg-background-dark px-4 text-slate-500 font-medium tracking-widest">Or continue with</span>
</div>
</div>
<!-- Social Logins -->
<div class="grid grid-cols-3 gap-4">
<button class="flex items-center justify-center p-3 bg-surface-dark border border-border-dark rounded-xl hover:border-primary/50 transition-colors group">
<svg class="w-5 h-5" fill="currentColor" viewbox="0 0 24 24">
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"></path>
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"></path>
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"></path>
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"></path>
</svg>
</button>
<button class="flex items-center justify-center p-3 bg-surface-dark border border-border-dark rounded-xl hover:border-primary/50 transition-colors group text-[#5865F2]">
<svg class="w-6 h-6" fill="currentColor" viewbox="0 0 24 24">
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.06.06 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"></path>
</svg>
</button>
<button class="flex items-center justify-center p-3 bg-surface-dark border border-border-dark rounded-xl hover:border-primary/50 transition-colors group text-white">
<svg class="w-6 h-6" fill="currentColor" viewbox="0 0 24 24">
<path d="M17.05 20.28c-.98.95-2.05 1.72-3.21 2.31c-1.16.59-2.32.88-3.48.88c-1.42 0-2.73-.34-3.93-1.02a8.66 8.66 0 0 1-2.92-2.78c-.76-1.18-1.14-2.5-1.14-3.96c0-1.63.46-3.09 1.38-4.38c.92-1.29 2.14-2.31 3.65-3.05c1.51-.74 3.12-1.11 4.83-1.11c1.27 0 2.48.24 3.63.72c1.15.48 2.15 1.15 3.01 2.01l-1.92 1.84c-.6-.56-1.27-1-2.01-1.31c-.74-.31-1.53-.46-2.37-.46c-1.21 0-2.3.26-3.26.78a5.9 5.9 0 0 0-2.31 2.18c-.55.93-.82 2-.82 3.2s.27 2.26.82 3.2c.55.94 1.32 1.66 2.31 2.17c.99.51 2.08.76 3.26.76c.88 0 1.7-.16 2.46-.48c.76-.32 1.43-.76 2.01-1.32l1.92 1.84z"></path>
</svg>
</button>
</div>
<div class="text-center pt-4">
<p class="text-slate-500 text-sm">
New to the realm?
<a class="text-primary font-bold hover:underline ml-1" href="#">Create an account</a>
</p>
</div>
</div>
<!-- Footer Links -->
<div class="absolute bottom-8 flex gap-6 text-xs text-slate-600 font-medium">
<a class="hover:text-primary transition-colors" href="#">Support</a>
<a class="hover:text-primary transition-colors" href="#">Privacy Policy</a>
<a class="hover:text-primary transition-colors" href="#">Terms of Service</a>
</div>
</div>
</div>
</body></html>