<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Auth Portal - QuizQuest</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@500;700;900&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#7C3AED", // Violet-600
"primary-hover": "#6D28D9", // Violet-700
"accent-yellow": "#FACC15", // Yellow-400
"background-light": "#F3F4F6", // Gray-100
"background-dark": "#0F0720", // Very dark purple/black
"card-dark": "#1A1033", // Dark purple card bg
"input-bg": "#1E1635",
"text-light": "#1F2937", // Gray-800
"text-dark": "#F3F4F6", // Gray-100
},
fontFamily: {
sans: ["Inter", "sans-serif"],
display: ["Outfit", "sans-serif"],
},
backgroundImage: {
'auth-gradient': 'radial-gradient(circle at 0% 0%, rgba(124, 58, 237, 0.15) 0%, rgba(15, 7, 32, 0) 50%)',
'glow': 'conic-gradient(from 180deg at 50% 50%, #2a8af6 0deg, #a853ba 180deg, #e92a67 360deg)',
}
},
},
};
</script>
<style>
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #fff, #a78bfa);
}.custom-checkbox:checked {
background-color: #7C3AED;
border-color: #7C3AED;
}.toggle-checkbox:checked {
right: 0;
border-color: #7C3AED;
}
.toggle-checkbox:checked + .toggle-label {
background-color: #7C3AED;
}
</style>
</head>
<body class="bg-background-dark text-text-dark font-sans antialiased h-screen overflow-hidden flex flex-col">
<nav class="absolute top-0 left-0 w-full z-50 p-6">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<a class="flex items-center gap-2 cursor-pointer group" href="#">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white shadow-lg shadow-primary/30 group-hover:scale-105 transition-transform">
<span class="material-icons-outlined text-2xl">sports_esports</span>
</div>
<span class="font-display font-bold text-xl tracking-tight">QuizQuest</span>
</a>
<a class="text-sm text-gray-400 hover:text-white transition-colors flex items-center gap-1" href="#">
<span class="material-icons-outlined text-base">arrow_back</span> Back to Home
</a>
</div>
</nav>
<div class="flex-1 flex w-full h-full relative">
<div class="absolute top-0 left-0 w-1/2 h-full bg-primary/5 blur-3xl pointer-events-none"></div>
<div class="absolute bottom-0 right-0 w-1/2 h-full bg-blue-600/5 blur-3xl pointer-events-none"></div>
<div class="hidden lg:flex w-1/2 h-full relative items-center justify-center p-12 overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-[#1A1033] to-[#0F0720] opacity-90 z-0"></div>
<div class="relative z-10 max-w-lg text-center">
<div class="relative w-80 h-80 mx-auto mb-10 group">
<div class="absolute inset-0 bg-primary/30 rounded-full blur-[60px] animate-pulse"></div>
<div class="relative w-full h-full transform transition-transform duration-700 hover:scale-105 hover:rotate-2">
<img alt="Victory Trophy" class="w-full h-full object-contain drop-shadow-2xl mix-blend-lighten opacity-90" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBMb8bmFgy_XnzEbWR5PTLJPitWWBpL0Xez-Jqc-3huPIvHwCeMGfNYluLgNZHOA-B1hM7rC4OKnr45DleJ8QGbOgm7Lma1tdg6QDLHIxIkaPS7iTgnlIo2xf1NwiJwbnVAnYgSfbntuKu3RpN3HLwJbCXMk0suLGbERuRgtQddp0GQOcizFliVClX3Mp8Sc4XkSxd7x5RC80faPTfUqKx7BcpcO_tJx-gKzM-bYkDmR8tpAfa8RkNdqvhYojb8k1m6sz4_wIoIZEc"/>
</div>
</div>
<h2 class="font-display text-4xl font-bold mb-4 leading-tight">
Play. <span class="text-primary">Earn.</span> Rule.
</h2>
<p class="text-gray-400 text-lg mb-8">
Join the 100k+ players winning daily rewards. Compete in high-stakes quizzes and climb the global leaderboard.
</p>
<div class="flex items-center justify-center gap-4 bg-white/5 backdrop-blur-sm py-3 px-6 rounded-full border border-white/5 w-fit mx-auto">
<div class="flex -space-x-3">
<img alt="User" class="w-8 h-8 rounded-full border-2 border-[#1A1033]" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAOp6MpId4bUQoVCkh2s7GgOZ8XpWDpQeIQ-iLShojYqTmeBLZZc2EI2_FfN6iLKy4engnZmLlH__hy-H-FFxELdNwRiztu8zSgZ8P347V0WOScV1QT2k_jvsL_j7aQLlYcpsZ8PJxvRB5Txe3naIvD5WvKorP_W3XPIEsXDMUFm1AZZ2-0FdKTIRbrahyQd7gRRTq8ya6-zgUq_mJigO_E-w8puTo2Z7bIr9LPxk7Cd6jZAr4pzBUYEtE15nVf1lkkRP5cpPO0xTs"/>
<img alt="User" class="w-8 h-8 rounded-full border-2 border-[#1A1033]" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDisG_tH-FAKqpDFARM15wvCaeIRyxHNgRMazI9RmEAZ4QjbHshwTY0JhNLgZp6gjXCRuHN9BLCVv-I83gaB9a1ynXTYhMAno7K_Nz_-sgAJgo5TTUeztuuiNJJB-5GN_xx5E2hzh1PjEM4wAE-aZeq6oft6wMuJaqDay8H_rr2xjdv898y8l0LX0O1-9rI6mIgKMiNakJzVNr1LqddlqKj9RyhAU_7DkCXGHso0YnUipFk6M2sth4m4o79qDknA7kMRAuGwlKX_uc"/>
<img alt="User" class="w-8 h-8 rounded-full border-2 border-[#1A1033]" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDizQS34vm51FLU5MkkF3dOBSktkh_MY_QxrGJajS0Ei-jAaEEHu7VxFHFx33tSQb__LC3BkjruuA3KysY9A2HhD4cQoL1OHO67PKAI23CupW8yBE2I3Y6sFOG3kciMb3G-hUN2rWg7dJhM-NUrbzxmHK3HNBrvsaNo_rRrf5luiVuuNHjnA9hnaEJ9E1RNOYKic4leV8HAYFFoynK4tLimGBuxeJiNAVyIo52MMQ8VFJSc6CWyKtFbONRLqc8YXkibyDLapwc9Gg4"/>
</div>
<div class="text-left">
<p class="text-white text-xs font-bold">2k+ Heroes</p>
<p class="text-gray-400 text-[10px]">Online now</p>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 h-full flex items-center justify-center p-4 sm:p-12 relative z-10 bg-[#0B0518] lg:bg-transparent">
<div class="w-full max-w-md space-y-8">
<div class="flex justify-center mb-8">
<div class="relative bg-input-bg p-1 rounded-full flex w-64 border border-white/5">
<div class="absolute left-1 top-1 bottom-1 w-[calc(50%-4px)] bg-primary rounded-full transition-all duration-300" id="toggle-bg"></div>
<button class="relative z-10 w-1/2 py-2 text-sm font-bold text-white transition-colors duration-300" id="btn-login" onclick="switchTab('login')">Login</button>
<button class="relative z-10 w-1/2 py-2 text-sm font-medium text-gray-400 hover:text-white transition-colors duration-300" id="btn-signup" onclick="switchTab('signup')">Sign Up</button>
</div>
</div>
<div class="relative min-h-[480px]">
<div class="absolute inset-0 transition-all duration-300 opacity-100 transform translate-x-0" id="login-form">
<div class="text-center mb-8">
<h1 class="font-display text-3xl font-bold mb-2">Welcome Back, Hero!</h1>
<p class="text-gray-400 text-sm">Enter your credentials to continue your quest.</p>
</div>
<form class="space-y-5">
<div class="space-y-1">
<label class="text-xs font-semibold text-gray-300 ml-1">Email Address</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<span class="material-icons-outlined text-gray-500 text-sm">email</span>
</div>
<input class="block w-full pl-10 pr-3 py-3 border border-white/10 rounded-xl leading-5 bg-input-bg text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary sm:text-sm transition-all" placeholder="hero@quizquest.com" type="email"/>
</div>
</div>
<div class="space-y-1">
<div class="flex justify-between items-center ml-1">
<label class="text-xs font-semibold text-gray-300">Password</label>
<a class="text-xs text-primary hover:text-primary-hover font-medium" href="#">Forgot Password?</a>
</div>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<span class="material-icons-outlined text-gray-500 text-sm">lock</span>
</div>
<input class="block w-full pl-10 pr-10 py-3 border border-white/10 rounded-xl leading-5 bg-input-bg text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary sm:text-sm transition-all" placeholder="••••••••" type="password"/>
<div class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer">
<span class="material-icons-outlined text-gray-500 hover:text-white text-sm">visibility</span>
</div>
</div>
</div>
<div class="flex items-center">
<input class="h-4 w-4 text-primary focus:ring-primary border-gray-600 rounded bg-input-bg custom-checkbox" id="remember-me" name="remember-me" type="checkbox"/>
<label class="ml-2 block text-sm text-gray-400" for="remember-me">
Remember my session
</label>
</div>
<button class="group relative w-full flex justify-center py-3.5 px-4 border border-transparent text-sm font-bold rounded-xl text-white bg-primary hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all shadow-lg shadow-primary/30 hover:scale-[1.02]" type="button">
<span class="absolute right-4 flex items-center pl-3">
<span class="material-icons-outlined group-hover:translate-x-1 transition-transform">bolt</span>
</span>
Join the Quest
</button>
</form>
</div>
<div class="absolute inset-0 transition-all duration-300 opacity-0 pointer-events-none transform translate-x-8" id="signup-form">
<div class="text-center mb-6">
<h1 class="font-display text-3xl font-bold mb-2">Create Account</h1>
<p class="text-gray-400 text-sm">Begin your journey to fortune today.</p>
</div>
<form class="space-y-4">
<div class="space-y-1">
<label class="text-xs font-semibold text-gray-300 ml-1">Full Name</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<span class="material-icons-outlined text-gray-500 text-sm">person</span>
</div>
<input class="block w-full pl-10 pr-3 py-3 border border-white/10 rounded-xl leading-5 bg-input-bg text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary sm:text-sm transition-all" placeholder="John Doe" type="text"/>
</div>
</div>
<div class="space-y-1">
<label class="text-xs font-semibold text-gray-300 ml-1">Email Address</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<span class="material-icons-outlined text-gray-500 text-sm">email</span>
</div>
<input class="block w-full pl-10 pr-3 py-3 border border-white/10 rounded-xl leading-5 bg-input-bg text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary sm:text-sm transition-all" placeholder="hero@quizquest.com" type="email"/>
</div>
</div>
<div class="space-y-1">
<label class="text-xs font-semibold text-gray-300 ml-1">Password</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<span class="material-icons-outlined text-gray-500 text-sm">lock</span>
</div>
<input class="block w-full pl-10 pr-3 py-3 border border-white/10 rounded-xl leading-5 bg-input-bg text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary sm:text-sm transition-all" placeholder="Create a strong password" type="password"/>
</div>
</div>
<div class="space-y-1">
<label class="text-xs font-semibold text-gray-300 ml-1 flex items-center gap-1">
Referral Code <span class="text-xs text-gray-500 font-normal">(Optional)</span>
</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<span class="material-icons-outlined text-gray-500 text-sm">loyalty</span>
</div>
<input class="block w-full pl-10 pr-3 py-3 border border-white/10 rounded-xl leading-5 bg-input-bg text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary sm:text-sm transition-all" placeholder="FRIEND123" type="text"/>
</div>
</div>
<button class="group relative w-full flex justify-center py-3.5 px-4 mt-2 border border-transparent text-sm font-bold rounded-xl text-white bg-primary hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all shadow-lg shadow-primary/30 hover:scale-[1.02]" type="button">
Create Account
</button>
</form>
</div>
</div>
<div class="relative mt-2">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-white/10"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-[#0B0518] lg:bg-transparent text-gray-500 uppercase text-xs tracking-wider font-semibold">Or continue with</span>
</div>
</div>
<div class="grid grid-cols-3 gap-3 mt-6">
<button class="flex items-center justify-center py-2.5 border border-white/10 rounded-xl bg-input-bg hover:bg-white/5 transition-colors group">
<img alt="Google" class="h-5 w-5 group-hover:scale-110 transition-transform" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDWRTvCZZ8-wBr4WA21_tHF395PEhauT5kfCDPLaRukJTc6d26Jlsf7lIwutmfJyswmg89VODB9kx5Pbm7e5utxbY5MU8n-81vNxcP97jc3SaWdfZ70le3bluwa1gE0Dr_-1kfIpccfBNTo2ihAA_abCIthIc8tTHkn9evylsT3LIbo7w8XBc0YQL8P-M1MAZj7mbWiggZ2qMXypLVBlJ-Yl82CigTvPXTy9XquT2v8V9wudwDVH98eBRFcqfZlQWcmcwcD1BVC5e4"/>
</button>
<button class="flex items-center justify-center py-2.5 border border-white/10 rounded-xl bg-input-bg hover:bg-white/5 transition-colors group">
<img alt="Discord" class="h-5 w-5 group-hover:scale-110 transition-transform filter brightness-150" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCvU2TgcCJF55sIAW4FHjIiH3DB6GV-nXNljQoR6YnKM7RRHHnNf7KLI8wuBG36CkyMnoVi2OuNpwOOZpIBlTEolAh-t1KnLG_VOm9F55tLsc1JRFE8e8PgD7Mk2aFHqOk-yOLMuIylQe5FCWZd8inyE8l7RYijmLOgyHT-2QtM1oE5sSFjklrna8z161o1vg2Yn9IKIGMR1ugGU-qx9DlkPASITFsEltGieg2QJBpGYM736qdCOK_46igMxX3WL-LikLNClg2H_UA"/>
</button>
<button class="flex items-center justify-center py-2.5 border border-white/10 rounded-xl bg-input-bg hover:bg-white/5 transition-colors group">
<span class="material-icons-outlined text-gray-400 group-hover:text-white transition-colors">more_horiz</span>
</button>
</div>
<div class="text-center mt-8">
<p class="text-xs text-gray-500 hover:text-gray-400 transition-colors cursor-pointer">
Protected by reCAPTCHA. <a class="underline" href="#">Privacy</a> & <a class="underline" href="#">Terms</a>
</p>
</div>
</div>
</div>
</div>
<script>
function switchTab(tab) {
const loginBtn = document.getElementById('btn-login');
const signupBtn = document.getElementById('btn-signup');
const toggleBg = document.getElementById('toggle-bg');
const loginForm = document.getElementById('login-form');
const signupForm = document.getElementById('signup-form');
if (tab === 'login') {
// Button Styling
loginBtn.classList.remove('text-gray-400', 'font-medium');
loginBtn.classList.add('text-white', 'font-bold');
signupBtn.classList.add('text-gray-400', 'font-medium');
signupBtn.classList.remove('text-white', 'font-bold');
// Toggle Movement
toggleBg.style.transform = 'translateX(0)';
// Form Visibility
loginForm.classList.remove('opacity-0', 'pointer-events-none', '-translate-x-8');
loginForm.classList.add('opacity-100', 'translate-x-0');
signupForm.classList.add('opacity-0', 'pointer-events-none', 'translate-x-8');
signupForm.classList.remove('opacity-100', 'translate-x-0');
} else {
// Button Styling
signupBtn.classList.remove('text-gray-400', 'font-medium');
signupBtn.classList.add('text-white', 'font-bold');
loginBtn.classList.add('text-gray-400', 'font-medium');
loginBtn.classList.remove('text-white', 'font-bold');
// Toggle Movement
toggleBg.style.transform = 'translateX(100%)';
// Form Visibility
signupForm.classList.remove('opacity-0', 'pointer-events-none', 'translate-x-8');
signupForm.classList.add('opacity-100', 'translate-x-0');
loginForm.classList.add('opacity-0', 'pointer-events-none', '-translate-x-8');
loginForm.classList.remove('opacity-100', 'translate-x-0');
}
}
</script>
</body></html>