<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Global Leaderboard</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=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#6D28D9", // Purple tone from screenshots
"primary-hover": "#5B21B6",
"accent-yellow": "#FFD700",
"background-light": "#F3F4F6",
"background-dark": "#0B0A14", // Very dark background
"card-dark": "#161523",
"card-light": "#FFFFFF",
"text-light": "#1F2937",
"text-dark": "#F3F4F6",
"gold": "#FFC107",
"silver": "#C0C0C0",
"bronze": "#CD7F32",
},
fontFamily: {
display: ["Space Grotesk", "sans-serif"],
sans: ["Inter", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.5rem",
'xl': '1rem',
'2xl': '1.5rem',
},
},
},
};
</script>
<style>
body {
font-family: 'Inter', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Space Grotesk', sans-serif;
}.glow-gold {
box-shadow: 0 0 20px rgba(255, 193, 7, 0.3);
}
.glow-silver {
box-shadow: 0 0 20px rgba(192, 192, 192, 0.2);
}
.glow-bronze {
box-shadow: 0 0 20px rgba(205, 127, 50, 0.2);
}
.glow-primary {
box-shadow: 0 0 30px rgba(109, 40, 217, 0.4);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark transition-colors duration-300 min-h-screen flex flex-col">
<nav class="w-full py-4 px-6 md:px-12 flex justify-between items-center bg-white/80 dark:bg-background-dark/80 backdrop-blur-md sticky top-0 z-50 border-b border-gray-200 dark:border-white/10">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white">
<span class="material-icons text-xl">sports_esports</span>
</div>
<span class="font-display font-bold text-xl tracking-tight">QuizQuest</span>
</div>
<div class="hidden md:flex gap-8 font-medium text-sm text-gray-600 dark:text-gray-400">
<a class="hover:text-primary dark:hover:text-white transition-colors" href="#">Home</a>
<a class="hover:text-primary dark:hover:text-white transition-colors" href="#">Prizes</a>
<a class="text-primary dark:text-white transition-colors font-bold" href="#">Leaderboard</a>
</div>
<div class="flex items-center gap-4">
<a class="hidden md:block text-sm font-medium hover:text-primary dark:hover:text-white transition-colors" href="#">Login</a>
<button class="bg-primary hover:bg-primary-hover text-white px-5 py-2 rounded-full font-medium text-sm transition-all shadow-lg shadow-primary/30">
Join Now
</button>
<button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-white/10 transition-colors" onclick="document.documentElement.classList.toggle('dark')">
<span class="material-icons text-gray-600 dark:text-gray-300">brightness_4</span>
</button>
</div>
</nav>
<main class="flex-grow container mx-auto px-4 md:px-6 py-12">
<div class="text-center mb-12 relative">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-96 h-96 bg-primary/20 rounded-full blur-[100px] -z-10 pointer-events-none"></div>
<h1 class="text-4xl md:text-6xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-400">Hall of Fame</h1>
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-lg">
The elite league of quiz masters. Compete daily to claim your throne and win exclusive rewards.
</p>
</div>
<div class="flex justify-center mb-16">
<div class="bg-white dark:bg-card-dark p-1.5 rounded-full shadow-lg border border-gray-100 dark:border-white/5 inline-flex">
<button class="px-6 py-2 rounded-full bg-primary text-white shadow-md font-medium text-sm transition-all">Daily</button>
<button class="px-6 py-2 rounded-full text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-white font-medium text-sm transition-all">Weekly</button>
<button class="px-6 py-2 rounded-full text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-white font-medium text-sm transition-all">Monthly</button>
<button class="px-6 py-2 rounded-full text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-white font-medium text-sm transition-all">All Time</button>
</div>
</div>
<div class="flex flex-col md:flex-row items-end justify-center gap-6 md:gap-12 mb-20 px-4">
<div class="order-2 md:order-1 flex flex-col items-center w-full md:w-1/4">
<div class="relative group">
<div class="absolute -inset-0.5 bg-gradient-to-b from-silver to-gray-500 rounded-full opacity-75 blur group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
<div class="relative w-24 h-24 md:w-28 md:h-28 rounded-full border-4 border-silver overflow-hidden bg-gray-800 glow-silver">
<img alt="Silver Winner" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDFzkvWfF0OAzSjq59RHVjKegmIqNixuzYviaxkTkMJmmUg0y5jg0etlTSHkm91oqUdrM_WjJFtGtq3AXlW8n7U7boU5ehl8OD4uP6VZgMuJT6dHc6CoTpqOjGqvOqeKDvfQSfGwFdjGfLn7M02m72wlewEJYhKZagLzAzmDAdXte_KCsMNMFA1NmvVBbnX_9wWic3YFqMQLvGvnYMeK3DsJoEbZ1_d9wrSRhpEm6KZPpxt4PUMf2E-ujANGu_HVSlP9EqkkklB"/>
</div>
<div class="absolute -bottom-3 left-1/2 -translate-x-1/2 bg-silver text-gray-900 font-bold w-8 h-8 rounded-full flex items-center justify-center border-2 border-background-dark shadow-lg">2</div>
</div>
<div class="text-center mt-6 p-4 bg-white dark:bg-card-dark rounded-2xl w-full border border-silver/20 shadow-xl relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-silver to-transparent opacity-50"></div>
<h3 class="font-bold text-lg truncate">CyberNinja</h3>
<p class="text-silver font-display font-bold text-xl mt-1">48,290 XP</p>
<div class="flex items-center justify-center gap-1 mt-2 text-xs text-green-500 font-medium">
<span class="material-icons text-[14px]">arrow_drop_up</span>
<span>4 ranks</span>
</div>
</div>
</div>
<div class="order-1 md:order-2 flex flex-col items-center w-full md:w-1/3 -mt-10 md:-mt-12 z-10">
<div class="relative group scale-110">
<div class="absolute -top-12 left-1/2 -translate-x-1/2 text-gold animate-bounce">
<span class="material-icons text-5xl drop-shadow-[0_0_10px_rgba(255,215,0,0.5)]">emoji_events</span>
</div>
<div class="absolute -inset-1 bg-gradient-to-b from-gold to-yellow-600 rounded-full opacity-75 blur-md group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
<div class="relative w-32 h-32 md:w-40 md:h-40 rounded-full border-4 border-gold overflow-hidden bg-gray-800 glow-gold shadow-[0_0_40px_rgba(255,215,0,0.2)]">
<img alt="Gold Winner" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAQBUWSlXO9EXK_rUgdbJUdubdC7p49KS5EP5_SkPW4LEgWZCNhIOfLOLDeJnK7Mch6-tMnkMTdVtjd3cccSqTC2sOBXR7jhumQTvXxvU8f3eCt0cbD50Y1tu_IIScfB7SLHOQtOzaT1pSau9QSkXSQXTG1rvfq5ir0cu1mAkIbgs2M7KKl5XHfzXxnrEZ7_feXILJA9gfnSYGDwkGdsBb5yr0o_qFkY2ruGD8yHEHgtOEqv7RgtX9wF5CaJoHBD06eHHJaiXyj"/>
</div>
<div class="absolute -bottom-4 left-1/2 -translate-x-1/2 bg-gold text-yellow-900 font-bold w-10 h-10 rounded-full flex items-center justify-center border-2 border-background-dark shadow-lg text-lg">1</div>
</div>
<div class="text-center mt-8 p-6 bg-gradient-to-b from-white to-gray-50 dark:from-card-dark dark:to-[#1a192e] rounded-2xl w-full border border-gold/30 shadow-2xl shadow-gold/10 relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1.5 bg-gradient-to-r from-yellow-600 via-gold to-yellow-600"></div>
<h3 class="font-bold text-2xl truncate bg-clip-text text-transparent bg-gradient-to-r from-gold to-yellow-600">QuizKing99</h3>
<p class="text-gold font-display font-bold text-3xl mt-2">52,100 XP</p>
<div class="flex items-center justify-center gap-2 mt-3">
<span class="bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 text-xs px-2 py-0.5 rounded border border-yellow-200 dark:border-yellow-700/50">👑 Streak: 12 Days</span>
</div>
</div>
</div>
<div class="order-3 flex flex-col items-center w-full md:w-1/4">
<div class="relative group">
<div class="absolute -inset-0.5 bg-gradient-to-b from-bronze to-orange-800 rounded-full opacity-75 blur group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
<div class="relative w-24 h-24 md:w-28 md:h-28 rounded-full border-4 border-bronze overflow-hidden bg-gray-800 glow-bronze">
<img alt="Bronze Winner" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCTnyAzKSnO1v9ZKci8u492MkkwRaPLB9pobTR2PEFmYZBvnZiVihBQopZR4Gs3SA0OmEpg7Fd_meckqEQgGlL-9y6x2sqQpBj8Kui2FaI_x81wBqTvICwZVoQNyNFC2yAupGTa7gpXWhfc_CSxwLv9Qte1nk3xttp6yNfpYZwiax505EwUZCGaKaoChcmvAPtJjFxPhRqZpKBUW0_ExY4dx1cReXIr7wuZz-Nbi8DzA1aovIp3KsMLZBxyLert-ii9xLm0DUOY"/>
</div>
<div class="absolute -bottom-3 left-1/2 -translate-x-1/2 bg-bronze text-white font-bold w-8 h-8 rounded-full flex items-center justify-center border-2 border-background-dark shadow-lg">3</div>
</div>
<div class="text-center mt-6 p-4 bg-white dark:bg-card-dark rounded-2xl w-full border border-bronze/20 shadow-xl relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-bronze to-transparent opacity-50"></div>
<h3 class="font-bold text-lg truncate">PixelMaster</h3>
<p class="text-bronze font-display font-bold text-xl mt-1">45,500 XP</p>
<div class="flex items-center justify-center gap-1 mt-2 text-xs text-gray-500 font-medium">
<span class="material-icons text-[14px]">remove</span>
<span>No change</span>
</div>
</div>
</div>
</div>
<div class="max-w-4xl mx-auto">
<div class="bg-white dark:bg-card-dark rounded-2xl shadow-lg border border-gray-100 dark:border-white/5 overflow-hidden">
<div class="grid grid-cols-12 gap-4 px-6 py-4 bg-gray-50 dark:bg-white/5 text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider border-b border-gray-100 dark:border-white/5">
<div class="col-span-2 md:col-span-1 text-center">Rank</div>
<div class="col-span-6 md:col-span-6">Player</div>
<div class="col-span-4 md:col-span-3 text-right">Points</div>
<div class="hidden md:block md:col-span-2 text-right">Win Rate</div>
</div>
<div class="divide-y divide-gray-100 dark:divide-white/5">
<div class="grid grid-cols-12 gap-4 px-6 py-4 items-center hover:bg-gray-50 dark:hover:bg-white/5 transition-colors group">
<div class="col-span-2 md:col-span-1 text-center font-display font-bold text-gray-400 group-hover:text-primary transition-colors">#4</div>
<div class="col-span-6 md:col-span-6 flex items-center gap-3">
<img alt="User" class="w-10 h-10 rounded-full border border-gray-200 dark:border-white/10" src="https://lh3.googleusercontent.com/aida-public/AB6AXuByB5zPI3zw0w1JfdHvPeCcTLsPb3ozuVt_VGylIpn5X8dmSXoddIDDStMUq8kHw5L1jNQDjfBgtRAKAiG4ZhyB8Uh9RrWl9W2v2-coZYHBvDos7TIJGboPCo8r-2FjnJkK2smID_Yni0TbD_pIPxOu4wInhkfX5vm2I0z72MDat6OHO8laFvLBB0AoExxf37VA225sUbSerw6HJ-4CdF3RXLZ8Z7giwH3mJGQyeJKWrN_OSVPFwEFFZX-0LNc2U_ervOyizBBF"/>
<div>
<div class="font-bold text-sm">NeonViper</div>
<div class="text-xs text-gray-500">Level 42 Master</div>
</div>
</div>
<div class="col-span-4 md:col-span-3 text-right font-display font-bold text-primary">42,100 XP</div>
<div class="hidden md:block md:col-span-2 text-right text-sm text-gray-500">88%</div>
</div>
<div class="grid grid-cols-12 gap-4 px-6 py-4 items-center hover:bg-gray-50 dark:hover:bg-white/5 transition-colors group">
<div class="col-span-2 md:col-span-1 text-center font-display font-bold text-gray-400 group-hover:text-primary transition-colors">#5</div>
<div class="col-span-6 md:col-span-6 flex items-center gap-3">
<img alt="User" class="w-10 h-10 rounded-full border border-gray-200 dark:border-white/10" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDGMEXlV9LvgA5BjztPMHsD3h2iRBeWA95IUt9JeJ8t6-1ZkZwLxS6DPReWwAbwy-BR9AHxzcsrFjlqje22YUiTaELgIVRnPNJ4dGkwpYmznhCcusZizgLreqampyHpuODoanGeZDoP_gUxbAniKcq0SXfO09sbHKZg8EwV-KT8gK157pz3BlH-F9PAXfFaKTER1_jh8WTjPABJAwbRbyH8QTGO9150vQiZ76e2FtypXkMfHHcj-uLQdypgPB7pthWxzDauFhxA"/>
<div>
<div class="font-bold text-sm">TechGuru23</div>
<div class="text-xs text-gray-500">Level 38 Expert</div>
</div>
</div>
<div class="col-span-4 md:col-span-3 text-right font-display font-bold text-primary">39,850 XP</div>
<div class="hidden md:block md:col-span-2 text-right text-sm text-gray-500">75%</div>
</div>
<div class="grid grid-cols-12 gap-4 px-6 py-4 items-center hover:bg-gray-50 dark:hover:bg-white/5 transition-colors group">
<div class="col-span-2 md:col-span-1 text-center font-display font-bold text-gray-400 group-hover:text-primary transition-colors">#6</div>
<div class="col-span-6 md:col-span-6 flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-gradient-to-tr from-blue-500 to-purple-500 flex items-center justify-center text-white font-bold text-xs">AQ</div>
<div>
<div class="font-bold text-sm">AlphaQuest</div>
<div class="text-xs text-gray-500">Level 35 Scholar</div>
</div>
</div>
<div class="col-span-4 md:col-span-3 text-right font-display font-bold text-primary">36,200 XP</div>
<div class="hidden md:block md:col-span-2 text-right text-sm text-gray-500">62%</div>
</div>
<div class="grid grid-cols-12 gap-4 px-6 py-4 items-center hover:bg-gray-50 dark:hover:bg-white/5 transition-colors group">
<div class="col-span-2 md:col-span-1 text-center font-display font-bold text-gray-400 group-hover:text-primary transition-colors">#7</div>
<div class="col-span-6 md:col-span-6 flex items-center gap-3">
<img alt="User" class="w-10 h-10 rounded-full border border-gray-200 dark:border-white/10" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAt3N19rFBsHVIBrds9leHquey1LliIpOfAS-UY2ZDpuLK13itEweFjwk4cES7_Iz_TBlKwHB_BwYW3PqSL6JKXeLRYH9UWLN6nhhgnT3DaR8uwqDcS1zpGJeBHJflP4WRUWFve7D5rkcXbJ9Ty8UJa6yGBCeshiqYqezyKRAPYrvobrsem9S5ydAqpmPhqD2uMsmTMluKrrzxCKUvoniRTaqGw1ZH3Jq3ZJ-2QjVxfI1FDKwVl2-19ZW9i7ugbgo6A-5a-44Xl"/>
<div>
<div class="font-bold text-sm">LunaStar</div>
<div class="text-xs text-gray-500">Level 31 Explorer</div>
</div>
</div>
<div class="col-span-4 md:col-span-3 text-right font-display font-bold text-primary">34,150 XP</div>
<div class="hidden md:block md:col-span-2 text-right text-sm text-gray-500">59%</div>
</div>
<div class="grid grid-cols-12 gap-4 px-6 py-4 items-center hover:bg-gray-50 dark:hover:bg-white/5 transition-colors group">
<div class="col-span-2 md:col-span-1 text-center font-display font-bold text-gray-400 group-hover:text-primary transition-colors">#8</div>
<div class="col-span-6 md:col-span-6 flex items-center gap-3">
<img alt="User" class="w-10 h-10 rounded-full border border-gray-200 dark:border-white/10" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBg9M-CHvMT8LLDEdr3G998RVssKBIRCRxBjj_w4CPuDXasCOhsk4JatQHIvXqZN2B2bOSPHvdTG7KTUwAGH2k1pbd9Y08iBVJzAJLv_mPSEyHYWiCgin9s0h8jy6wtjACCeb8nEYeAnYaeKTjc8eFT8DXIZ9u3U8mRTrZwyHKI7XTShmONd_6D2tWgHGdOD3sTFlNlsqErCEcYbUvyNo5NujJsyqcIjiO6fMXuiuumvT3vi6v9_2Hxuh40Ecf7TWlRdAMY7Kn3"/>
<div>
<div class="font-bold text-sm">DrBrainiac</div>
<div class="text-xs text-gray-500">Level 30 Prodigy</div>
</div>
</div>
<div class="col-span-4 md:col-span-3 text-right font-display font-bold text-primary">31,000 XP</div>
<div class="hidden md:block md:col-span-2 text-right text-sm text-gray-500">91%</div>
</div>
<div class="grid grid-cols-12 gap-4 px-6 py-4 items-center bg-primary/10 dark:bg-primary/20 border-t border-primary/20">
<div class="col-span-2 md:col-span-1 text-center font-display font-bold text-primary">#452</div>
<div class="col-span-6 md:col-span-6 flex items-center gap-3">
<div class="relative">
<img alt="User" class="w-10 h-10 rounded-full border-2 border-primary" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD60XPjUQMS5vJCXuxxGtiJjwtji7fZh5UZJzkRMUmtyxNi-U1YQU2ox9K-BtnS694jDUHElXmu2hWnVA00PTKrmeM0HJOC0j0xDsJ8l5K7gOihiAQM2XBDi2GzHOgVi_7KykYohKcR-ZtkPOdE6aJdYtBDWQmR0irsaYpXpgEiijbwyEKVGwmCY8YyLm2-iHvIkYVBzcX2PsuQ5PeGqmiOynS8pGGLCaDVBxPc5S5WqSmG3xDpx9QmH5SSrf1P2YNr2vQr4Mzf"/>
<div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-white dark:border-card-dark"></div>
</div>
<div>
<div class="font-bold text-sm">You</div>
<div class="text-xs text-gray-500">Level 12 Novice</div>
</div>
</div>
<div class="col-span-4 md:col-span-3 text-right font-display font-bold text-primary">5,400 XP</div>
<div class="hidden md:block md:col-span-2 text-right text-sm text-gray-500">68%</div>
</div>
</div>
</div>
<div class="text-center mt-8">
<button class="text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-white text-sm font-medium flex items-center justify-center gap-1 mx-auto transition-colors">
View full leaderboard
<span class="material-icons text-sm">arrow_forward</span>
</button>
</div>
</div>
</main>
<footer class="bg-white dark:bg-black py-8 border-t border-gray-200 dark:border-white/5 mt-auto">
<div class="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
<div class="flex items-center gap-2">
<span class="material-icons text-gray-400">sports_esports</span>
<span>QuizQuest © 2023</span>
</div>
<div class="flex gap-6">
<a class="hover:text-primary transition-colors" href="#">Privacy</a>
<a class="hover:text-primary transition-colors" href="#">Terms</a>
<a class="hover:text-primary transition-colors" href="#">Support</a>
</div>
</div>
</footer>
<script>
// Init dark mode based on user system or default
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
}
</script>
</body></html>