<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Global Leaderboard | QuizPortal</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": "#490fbd",
"background-light": "#f6f6f8",
"background-dark": "#161022",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}
.neon-glow-primary {
box-shadow: 0 0 20px rgba(73, 15, 189, 0.4);
}
.podium-gold {
background: linear-gradient(180deg, rgba(255, 215, 0, 0.2) 0%, rgba(73, 15, 189, 0.1) 100%);
border-top: 2px solid #ffd700;
}
.podium-silver {
background: linear-gradient(180deg, rgba(192, 192, 192, 0.2) 0%, rgba(73, 15, 189, 0.1) 100%);
border-top: 2px solid #c0c0c0;
}
.podium-bronze {
background: linear-gradient(180deg, rgba(205, 127, 50, 0.2) 0%, rgba(73, 15, 189, 0.1) 100%);
border-top: 2px solid #cd7f32;
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: #161022;
}
::-webkit-scrollbar-thumb {
background: #2e2839;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #490fbd;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen flex flex-col">
<!-- Top Navigation Bar -->
<header class="sticky top-0 z-50 w-full border-b border-primary/20 bg-background-dark/80 backdrop-blur-md px-6 md:px-20 py-4">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<div class="flex items-center gap-12">
<div class="flex items-center gap-3">
<div class="text-primary">
<span class="material-symbols-outlined text-4xl" style="font-variation-settings: 'FILL' 1">extension</span>
</div>
<h1 class="text-2xl font-bold tracking-tighter text-slate-100">QuizPortal</h1>
</div>
<nav class="hidden lg:flex items-center gap-8">
<a class="text-slate-400 hover:text-primary transition-colors font-medium" href="#">Dashboard</a>
<a class="text-primary font-bold border-b-2 border-primary pb-1" href="#">Leaderboard</a>
<a class="text-slate-400 hover:text-primary transition-colors font-medium" href="#">Quizzes</a>
<a class="text-slate-400 hover:text-primary transition-colors font-medium" href="#">Challenges</a>
</nav>
</div>
<div class="flex items-center gap-6">
<div class="relative hidden md:block">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-xl">search</span>
<input class="bg-primary/10 border-none rounded-full pl-10 pr-4 py-2 text-sm focus:ring-2 focus:ring-primary w-64 text-slate-100" placeholder="Search players..." type="text"/>
</div>
<div class="flex items-center gap-3">
<button class="p-2 rounded-full bg-primary/10 text-slate-100 hover:bg-primary/20">
<span class="material-symbols-outlined">notifications</span>
</button>
<div class="h-10 w-10 rounded-full border-2 border-primary p-0.5">
<div class="h-full w-full rounded-full bg-cover bg-center" data-alt="User profile avatar close up" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAkLsGC4XlZD-Y1bMPjKCjYhFSaHNtXiA6XOTRDDjcAV-NNWwLBpq46T5qghO3cR0Bm_HnxaDiqp-Rhp7TtD71Vs3mI7T3DUTsZWxg75b6Pbd0YpJr3wxsVlgk2j90erMsisefR030Qx1OoHf2wA5LZbGnFL1yFbDl-wLPuw66QhqaAfnSOZPP_mX1oZtROEvWaPSDX0cyoIIBsE2z8gAtBQcbwJwd_zabKf23w35Sx0g4_hBpiA4cIlmBr3f6E9Uaezfln7jHsuzKw')"></div>
</div>
</div>
</div>
</div>
</header>
<main class="flex-grow max-w-5xl mx-auto w-full px-6 pt-10 pb-32">
<!-- Title & Timeframes -->
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
<div>
<div class="flex items-center gap-2 text-primary mb-2">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1">emoji_events</span>
<span class="font-bold tracking-widest uppercase text-xs">Season 12 Ranking</span>
</div>
<h2 class="text-5xl font-extrabold text-slate-100 tracking-tight">Global Leaderboard</h2>
<p class="text-slate-400 mt-2 text-lg">Are you ready to claim your throne among the elites?</p>
</div>
<div class="bg-primary/10 p-1.5 rounded-full flex items-center">
<button class="px-6 py-2 rounded-full text-sm font-bold text-slate-400 hover:text-slate-100 transition-all">Daily</button>
<button class="px-6 py-2 rounded-full text-sm font-bold bg-primary text-white shadow-lg shadow-primary/40">Weekly</button>
<button class="px-6 py-2 rounded-full text-sm font-bold text-slate-400 hover:text-slate-100 transition-all">Monthly</button>
</div>
</div>
<!-- The Podium Section -->
<div class="grid grid-cols-3 gap-4 items-end mb-16 px-4">
<!-- Rank 2: Silver -->
<div class="flex flex-col items-center">
<div class="relative mb-4 group">
<div class="absolute -inset-2 bg-slate-400/20 rounded-full blur group-hover:bg-slate-400/30 transition-all"></div>
<div class="relative h-24 w-24 md:h-32 md:w-32 rounded-full border-4 border-slate-400 overflow-hidden bg-background-dark shadow-2xl">
<img alt="" class="w-full h-full object-cover" data-alt="Portrait of a gamer with silver rank" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDtA1iTRbHRHNCzmwtTy74yZUq-s5YItUuiOwgWAZWADEG5yeb6VKCp4rx8SgKAgrIRanZ8TfukanFDtOsqYaXOBpziYj7Sj43FhBNEk5FnKvZP2kd8lyHm-M-mQJFn7kd6Uy2TvCkiNK7nVlBFBNq7NSUFgQVhZNX5CH9OyvIwcM3gdtlrk8b--kgZAryGb0mI3VI_RhjSJy4Ohq6v8UHsTxPDXpA6ZzGziLSGWJG7gnDufIuTQk0OIAe2q28KNXwN_wgsxG9NOynb"/>
</div>
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 bg-slate-400 text-background-dark font-black text-xs px-3 py-1 rounded-full uppercase">2nd Rank</div>
</div>
<div class="text-center mb-6">
<h3 class="text-lg font-bold text-slate-100">HyperVoid</h3>
<p class="text-primary font-bold text-sm tracking-widest">14,250 PTS</p>
</div>
<div class="w-full h-32 md:h-48 podium-silver rounded-t-2xl flex items-center justify-center">
<span class="text-slate-400/20 text-7xl font-black">2</span>
</div>
</div>
<!-- Rank 1: Gold -->
<div class="flex flex-col items-center">
<div class="relative mb-6 group">
<div class="absolute -inset-4 bg-primary/40 rounded-full blur-xl animate-pulse"></div>
<div class="relative h-32 w-32 md:h-44 md:w-44 rounded-full border-4 border-yellow-400 overflow-hidden bg-background-dark shadow-2xl">
<img alt="" class="w-full h-full object-cover" data-alt="Portrait of the first place winner" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBha1wXccg9YbkysN7GglvOJ1uc_AZMCOobpd6moH05qhoVzACtcCH73gl7b-_9zIMKUcX2W_HD8Nn9Ma7h_o9-VfMY-8_swGt_laizWlBMagQeCkH38yzcMtZz1S4SbYytBosIcJKCH2DBY7ZMM_ZcWb4z3PIwp45WVNRbOz1ATgnQLL_rF_0CfwmllZEuicuctEqJCrzEPfQ9TDQLtEpIfEp-uBaXjJ9oOJW1K615VQrp8DakImV0cFwG-VbLvcktR3JIS9yN562S"/>
</div>
<div class="absolute -bottom-3 left-1/2 -translate-x-1/2 bg-yellow-400 text-background-dark font-black text-sm px-4 py-1.5 rounded-full uppercase shadow-xl">1st Rank</div>
<div class="absolute -top-6 left-1/2 -translate-x-1/2">
<span class="material-symbols-outlined text-yellow-400 text-4xl drop-shadow-lg" style="font-variation-settings: 'FILL' 1">military_tech</span>
</div>
</div>
<div class="text-center mb-8">
<h3 class="text-2xl font-black text-slate-100 tracking-tight">QuizMaster_Elite</h3>
<p class="text-yellow-400 font-bold text-lg tracking-widest">18,900 PTS</p>
</div>
<div class="w-full h-48 md:h-72 podium-gold rounded-t-2xl flex items-center justify-center neon-glow-primary">
<span class="text-yellow-400/20 text-9xl font-black">1</span>
</div>
</div>
<!-- Rank 3: Bronze -->
<div class="flex flex-col items-center">
<div class="relative mb-4 group">
<div class="absolute -inset-2 bg-orange-700/20 rounded-full blur group-hover:bg-orange-700/30 transition-all"></div>
<div class="relative h-20 w-20 md:h-28 md:w-28 rounded-full border-4 border-orange-700 overflow-hidden bg-background-dark shadow-2xl">
<img alt="" class="w-full h-full object-cover" data-alt="Portrait of a female gamer with bronze rank" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA5AuCILWzwNiIvJEMSzPwC92Xe5GtQcGrtHEztZIXalFdMTD6MwnzcwflDxsENlJGxhdh0lbkttWhbnu6VfAZ-7hDRYyBGeQgjgIADwIl1JYz5ey1skfUAI4gc83ChziyEsUSNbfAzsZeTQ1zu3JZEt7EVI3deozoiEuqXlj6bm8n1wEzrxLSYCTZGdrd0GDXfT_CZ7CW2NjvUIZqwcZmO-MLuBbejJssTzTj_t45zUznp-aQoWaUlSvhoWSxU4BJ8r-VSLE3JdbBt"/>
</div>
<div class="absolute -bottom-2 left-1/2 -translate-x-1/2 bg-orange-700 text-background-dark font-black text-xs px-3 py-1 rounded-full uppercase">3rd Rank</div>
</div>
<div class="text-center mb-6">
<h3 class="text-lg font-bold text-slate-100">TriviaQueen</h3>
<p class="text-primary font-bold text-sm tracking-widest">13,920 PTS</p>
</div>
<div class="w-full h-24 md:h-36 podium-bronze rounded-t-2xl flex items-center justify-center">
<span class="text-orange-900/20 text-6xl font-black">3</span>
</div>
</div>
</div>
<!-- Scrollable Leaderboard List -->
<div class="bg-primary/5 rounded-3xl p-4 md:p-8 backdrop-blur-sm border border-primary/10">
<div class="flex items-center justify-between mb-8 px-4">
<h4 class="text-xl font-bold text-slate-100">Overall Rankings</h4>
<div class="flex items-center gap-4 text-sm font-medium text-slate-400">
<span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-green-500"></span> 1,240 Online</span>
</div>
</div>
<div class="space-y-3">
<!-- Rank Item 4 -->
<div class="flex items-center gap-4 p-4 rounded-2xl bg-primary/10 hover:bg-primary/20 transition-all cursor-pointer border border-primary/5">
<div class="w-10 text-xl font-black text-slate-400">04</div>
<div class="h-12 w-12 rounded-full overflow-hidden bg-background-dark">
<img alt="" class="w-full h-full object-cover" data-alt="Player profile picture small" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCbiMwq2ZLLWEebENy8-0452ay7gvEth19VPbe4yshZdE3E-MWp-7VrPLIEKZPlOrg-sd7BwHbTp4PGXrts9VStZ8VXQ6WPrDB5GVSW3dx9vt3tn24j5XI82rDQwZsNgLDa-MAyghC_dCYGXoAnfJKzQ3FDZcindEvZIkgvTMaR7O_QvUga_0xl_NXNv-Xc-VJuF_wjJc7Xbh4Bbm327MLPcFTo4J_VlKPGtzyn2MWslR9SStm4jMmm9KUUo6DxyNAaL9rf7lnOIyWE"/>
</div>
<div class="flex-grow">
<h5 class="font-bold text-slate-100">PixelPioneer</h5>
<p class="text-xs text-slate-400 flex items-center gap-1">
<span class="material-symbols-outlined text-xs">local_fire_department</span> 12 Day Streak
</p>
</div>
<div class="text-right">
<p class="font-black text-slate-100">12,400</p>
<p class="text-[10px] text-primary uppercase font-bold tracking-widest">Points</p>
</div>
</div>
<!-- Rank Item 5 -->
<div class="flex items-center gap-4 p-4 rounded-2xl bg-primary/10 hover:bg-primary/20 transition-all cursor-pointer border border-primary/5">
<div class="w-10 text-xl font-black text-slate-400">05</div>
<div class="h-12 w-12 rounded-full overflow-hidden bg-background-dark">
<img alt="" class="w-full h-full object-cover" data-alt="Player profile picture small" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBy9GR68dNIQnDoiUC_acaJDZz-Jv1Rsl-KjUV8_tlwPzZm6otZllem9MeP3_9vF1sIwwSVU2d73OmLYPyfEyYw8RLHdIdGAHAA1S-WC6ayUcE_P1VgSWWShX5P4sUKOorzftWBdd_qa3kQ64uuOIUEmGHiVOcpODj_8JLj438Kux2oNhMzNTE6uPP0I4d2ed8-XgioaxnXMiKCg-DwamO_7pVbAEYX7nLoB5HBUpztj_9GAiu3wjhJzHCZ1Xgk8bhFx-o51HQxwJvY"/>
</div>
<div class="flex-grow">
<h5 class="font-bold text-slate-100">NeonGhost</h5>
<p class="text-xs text-slate-400 flex items-center gap-1">
<span class="material-symbols-outlined text-xs">workspace_premium</span> Pro Badge
</p>
</div>
<div class="text-right">
<p class="font-black text-slate-100">11,980</p>
<p class="text-[10px] text-primary uppercase font-bold tracking-widest">Points</p>
</div>
</div>
<!-- Rank Item 6 -->
<div class="flex items-center gap-4 p-4 rounded-2xl bg-primary/10 hover:bg-primary/20 transition-all cursor-pointer border border-primary/5">
<div class="w-10 text-xl font-black text-slate-400">06</div>
<div class="h-12 w-12 rounded-full overflow-hidden bg-background-dark">
<img alt="" class="w-full h-full object-cover" data-alt="Player profile picture small" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBXo59VDxSoAlXSaLv7pkzg_e3VlA3vI7udW07RNokKQztdJtqOMXInM7sJ7DJEjv9-o_UZR6ang0s0cXUvDT_A6AiJizG1ku3OHrSPatqmIX98g1PgMTKS0T17pYmi8KAxTDa0SjEFa3P_MlpZrj_OZ22j58PTy6RZZ-FtvjIiFjh696pzoJjkbFS0L5e8sKS71R1KPhdxIN-IKp_7tfi-w1c2GTSLxBgZuCF20m8Di8Y6-4E2otweAD3fXAaYNslvbEYekp3DWMHv"/>
</div>
<div class="flex-grow">
<h5 class="font-bold text-slate-100">SkyWalker_99</h5>
<p class="text-xs text-slate-400 flex items-center gap-1">
<span class="material-symbols-outlined text-xs">trending_up</span> Moving Up
</p>
</div>
<div class="text-right">
<p class="font-black text-slate-100">10,550</p>
<p class="text-[10px] text-primary uppercase font-bold tracking-widest">Points</p>
</div>
</div>
<!-- Rank Item 7 -->
<div class="flex items-center gap-4 p-4 rounded-2xl bg-primary/10 hover:bg-primary/20 transition-all cursor-pointer border border-primary/5">
<div class="w-10 text-xl font-black text-slate-400">07</div>
<div class="h-12 w-12 rounded-full overflow-hidden bg-background-dark">
<img alt="" class="w-full h-full object-cover" data-alt="Player profile picture small" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDZTKb4ZO_SLTF9qLq_uS_cVqvKaopiCryIPwontUqQclDbyNHzAV54Uqh_H6-IjG15IYAdDcaiIfChnAQffsH1E3kYemRkGP8WSw_R01DYeGJRyTsIpDdyXXwV93lgcWUV87w5IF0bxLrpVKZu8YBs4Tg4CCYHREwfDafzTlUGHEMn6cPhfIW7vs8jWQD2PRk2FmBoNRclXaEmVc_4hRWVPFasg4R0aDFh8whuWNfEuq56g_HkifbgF8VmwSkqnqqawpQUanM1Zcne"/>
</div>
<div class="flex-grow">
<h5 class="font-bold text-slate-100">BrainyGamer</h5>
<p class="text-xs text-slate-400 flex items-center gap-1">
<span class="material-symbols-outlined text-xs">bolt</span> Top Strategist
</p>
</div>
<div class="text-right">
<p class="font-black text-slate-100">9,800</p>
<p class="text-[10px] text-primary uppercase font-bold tracking-widest">Points</p>
</div>
</div>
</div>
<!-- View More Button -->
<button class="w-full mt-8 py-4 border-2 border-dashed border-primary/30 rounded-2xl text-slate-400 hover:text-slate-100 hover:border-primary/60 transition-all font-bold">
View All 100 Rankings
</button>
</div>
</main>
<!-- Pinned User Footer Bar -->
<footer class="fixed bottom-0 left-0 w-full z-50 bg-background-dark/90 backdrop-blur-xl border-t border-primary/40 py-4 px-6 md:px-20 shadow-[0_-10px_30px_rgba(73,15,189,0.2)]">
<div class="max-w-5xl mx-auto flex items-center justify-between">
<div class="flex items-center gap-6">
<div class="flex flex-col items-center">
<span class="text-primary font-black text-sm uppercase leading-none">Your Rank</span>
<span class="text-3xl font-black text-slate-100 tracking-tighter">#42</span>
</div>
<div class="h-14 w-14 rounded-full border-2 border-primary overflow-hidden">
<img alt="" class="w-full h-full object-cover" data-alt="User profile avatar close up" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDxEKuG04WLfu1mQcjoq2lUgVxSdPITzrb8mlwbTmVohlX3bPgBPjhKqPqSguTR8sxF2BHZxeEvPgSiOPcFgJOZN6D5EMkge4FvLO7algFWYlzJW29gxVX2JGCOxGdfG91-IOj41xmaYZJs3Dq4usQ50_F4yQuHDEEHlDAfE0_pA0ph3jib_PM6c7zIPzVAdp6-i1xi8_HwWklVVcLZuXLaVMJ_JHWcRvFe1IAgOyEVUNgXEbXVRAY0WgMrQCKcgAfxNYzuoywlNCkk"/>
</div>
<div>
<h6 class="text-xl font-bold text-slate-100">Alex_Shadow</h6>
<div class="flex items-center gap-3">
<div class="w-32 h-1.5 bg-primary/20 rounded-full overflow-hidden">
<div class="w-2/3 h-full bg-primary rounded-full"></div>
</div>
<span class="text-[10px] text-slate-400 font-bold">66% to Rank #41</span>
</div>
</div>
</div>
<div class="flex items-center gap-8">
<div class="text-right">
<p class="text-2xl font-black text-slate-100 tracking-tight">4,820</p>
<p class="text-[10px] text-primary uppercase font-bold tracking-widest text-right">Total Points</p>
</div>
<button class="bg-primary hover:bg-primary/80 text-white font-black px-8 py-3 rounded-full shadow-lg shadow-primary/40 transition-all transform hover:scale-105 active:scale-95 flex items-center gap-2">
<span class="material-symbols-outlined">play_circle</span>
Play to Climb
</button>
</div>
</div>
</footer>
</body></html>