<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Global Leaderboard - QuizQuest</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&family=Noto+Sans:wght@400;500;700&display=swap" rel="stylesheet"/>
<!-- Material Symbols -->
<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"/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#2b8cee",
"primary-dark": "#1a6bbd",
"background-light": "#f6f7f8",
"background-dark": "#101922",
"neutral-surface": "#ffffff",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"],
"body": ["Noto Sans", "sans-serif"],
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "1.5rem",
"xl": "2rem",
"2xl": "3rem",
"full": "9999px"
},
boxShadow: {
"soft": "0 4px 20px -2px rgba(43, 140, 238, 0.1)",
"glow": "0 0 15px rgba(43, 140, 238, 0.3)",
}
},
},
}
</script>
<style>
/* Custom scrollbar for table container */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #9ca3af;
}
.medal-shine {
background: linear-gradient(45deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 60%);
background-size: 200% 200%;
animation: shine 3s infinite;
}
@keyframes shine {
0% { background-position: 200% 200%; }
100% { background-position: -200% -200%; }
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 min-h-screen flex flex-col antialiased selection:bg-primary/30 selection:text-primary-dark">
<!-- Header -->
<header class="sticky top-0 z-50 bg-neutral-surface/80 dark:bg-background-dark/80 backdrop-blur-md border-b border-slate-200 dark:border-slate-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<div class="flex items-center gap-3">
<div class="size-8 text-primary bg-primary/10 rounded-lg flex items-center justify-center">
<span class="material-symbols-outlined text-[24px]">trophy</span>
</div>
<span class="text-xl font-bold tracking-tight text-slate-900 dark:text-white">QuizQuest</span>
</div>
<!-- Desktop Nav -->
<nav class="hidden md:flex items-center gap-8">
<a class="text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" href="#">Home</a>
<a class="text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" href="#">Quizzes</a>
<a class="text-sm font-medium text-primary font-bold" href="#">Leaderboard</a>
<a class="text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-primary transition-colors" href="#">Login</a>
</nav>
<!-- CTA -->
<div class="flex items-center gap-4">
<button class="hidden sm:flex items-center justify-center h-10 px-6 rounded-full bg-primary text-white text-sm font-bold shadow-soft hover:bg-primary-dark hover:shadow-glow transition-all duration-300 transform hover:-translate-y-0.5">
Join the Competition
</button>
<!-- Mobile Menu Button -->
<button class="md:hidden p-2 rounded-lg text-slate-600 hover:bg-slate-100 dark:hover:bg-slate-800">
<span class="material-symbols-outlined">menu</span>
</button>
</div>
</div>
</div>
</header>
<main class="flex-grow w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12">
<!-- Page Header -->
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
<div class="space-y-2">
<h1 class="text-4xl md:text-5xl font-black tracking-tight text-slate-900 dark:text-white">Global Hall of Fame</h1>
<p class="text-lg text-slate-500 dark:text-slate-400 max-w-lg">Top minds from around the world competing for glory. Do you have what it takes to reach the summit?</p>
</div>
<!-- Timeframe Filter -->
<div class="bg-slate-100 dark:bg-slate-800 p-1.5 rounded-full inline-flex items-center self-start md:self-end shadow-inner">
<label class="relative cursor-pointer group">
<input checked="" class="peer sr-only" name="timeframe" type="radio" value="all-time"/>
<span class="flex items-center justify-center px-5 py-2 rounded-full text-sm font-medium text-slate-500 transition-all duration-200 peer-checked:bg-white peer-checked:text-primary peer-checked:shadow-sm dark:peer-checked:bg-slate-700 dark:text-slate-400 dark:peer-checked:text-white group-hover:text-slate-700 dark:group-hover:text-slate-300">
All Time
</span>
</label>
<label class="relative cursor-pointer group">
<input class="peer sr-only" name="timeframe" type="radio" value="weekly"/>
<span class="flex items-center justify-center px-5 py-2 rounded-full text-sm font-medium text-slate-500 transition-all duration-200 peer-checked:bg-white peer-checked:text-primary peer-checked:shadow-sm dark:peer-checked:bg-slate-700 dark:text-slate-400 dark:peer-checked:text-white group-hover:text-slate-700 dark:group-hover:text-slate-300">
Weekly
</span>
</label>
<label class="relative cursor-pointer group">
<input class="peer sr-only" name="timeframe" type="radio" value="monthly"/>
<span class="flex items-center justify-center px-5 py-2 rounded-full text-sm font-medium text-slate-500 transition-all duration-200 peer-checked:bg-white peer-checked:text-primary peer-checked:shadow-sm dark:peer-checked:bg-slate-700 dark:text-slate-400 dark:peer-checked:text-white group-hover:text-slate-700 dark:group-hover:text-slate-300">
Monthly
</span>
</label>
</div>
</div>
<!-- Podium Section -->
<div class="relative mb-16 pt-8">
<!-- Background Decoration -->
<div class="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-slate-100/50 to-transparent dark:from-slate-800/30 rounded-3xl -z-10"></div>
<div class="flex flex-col md:flex-row items-end justify-center gap-6 md:gap-8 lg:gap-12 pb-8">
<!-- 2nd Place -->
<div class="order-2 md:order-1 flex flex-col items-center group">
<div class="relative mb-4">
<div class="absolute -top-6 left-1/2 -translate-x-1/2 bg-slate-200 text-slate-600 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-sm border border-slate-300 z-10">
2nd Place
</div>
<div class="size-24 md:size-28 rounded-full p-1 bg-gradient-to-br from-slate-200 to-slate-400 shadow-lg relative">
<img alt="Smiling woman portrait" class="w-full h-full object-cover rounded-full border-4 border-white dark:border-slate-800" data-alt="Portrait of the second place winner" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAeQpgWN4mC0OQegESTFok2Z7_csBsIkND5B0Hykbe4KHDNbeTmzD4qlfQsr5B5BHhEWetkrP2TGFC5Q9--xHoiJrkFWn6fflXs-FVhXEH6LHG2flxn-y2sbcQXLkslkF0W5OmaKxluxk-Pi6bMS2wjEpWyj8l1ostIuJ4cCaY42P9xSXLVoeL9TLq_ga3Pb7-Y4NRoumH9nQN7m1kw1tFGqcaSqsieoCV9MfdFaG2d8zZGZXPugLXsXjxEWY9Q6OLyVS7EcUj3"/>
<div class="absolute -bottom-2 -right-2 bg-slate-300 text-white rounded-full p-2 shadow-md border-2 border-white dark:border-slate-800 flex items-center justify-center size-10">
<span class="material-symbols-outlined text-[20px] text-slate-600">workspace_premium</span>
</div>
</div>
</div>
<div class="text-center bg-white dark:bg-slate-800 p-4 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-700 w-44 md:w-56 transform transition-transform group-hover:-translate-y-1">
<h3 class="font-bold text-slate-900 dark:text-white truncate">TriviaQueen</h3>
<p class="text-primary font-bold text-lg mt-1">14,200 pts</p>
<div class="flex items-center justify-center gap-1 mt-2 text-xs text-slate-500">
<span class="material-symbols-outlined text-[14px]">flag</span> France
</div>
</div>
</div>
<!-- 1st Place -->
<div class="order-1 md:order-2 flex flex-col items-center z-10 scale-110 md:mb-8 group">
<div class="relative mb-6">
<div class="absolute -top-12 left-1/2 -translate-x-1/2 z-20 animate-bounce">
<span class="material-symbols-outlined text-5xl text-yellow-400 drop-shadow-md">crown</span>
</div>
<div class="size-32 md:size-40 rounded-full p-1.5 bg-gradient-to-br from-yellow-300 via-yellow-400 to-yellow-600 shadow-xl relative medal-shine">
<img alt="Confident man portrait" class="w-full h-full object-cover rounded-full border-4 border-white dark:border-slate-800" data-alt="Portrait of the first place winner" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD5eI6_8UhcFZQWDEbuPXvmHkYLeEflxT6fN1zEWu0ahPDO_h0DwBoooThD33iKe7y9laQCLAM9ZleBbyJqeZ72dGV9nPqeLQ5FMyyFtneFVWIDCPNRTM_dyjKRSjnXS95W0Fi4epeh5p3NYl_UL_dng1OSTeXlTPGoRpEKRRrtmSuuRbKJRSvqfXrwUi4efW2_PUEmbRpDplPO9hNnE3z0w9k713Qgf2wiO6GeekBU2ouokD-orO-sXPtK7tQ69aZ-tWJandC7"/>
<div class="absolute -bottom-3 -right-3 bg-yellow-400 text-white rounded-full p-2 shadow-md border-4 border-white dark:border-slate-800 flex items-center justify-center size-12">
<span class="material-symbols-outlined text-[24px] text-yellow-900">workspace_premium</span>
</div>
</div>
</div>
<div class="text-center bg-white dark:bg-slate-800 p-6 rounded-2xl shadow-lg border-b-4 border-primary w-52 md:w-64 relative transform transition-transform group-hover:-translate-y-2">
<div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-white px-3 py-0.5 rounded-full text-xs font-bold uppercase tracking-wider shadow-md">
Champion
</div>
<h3 class="font-black text-xl text-slate-900 dark:text-white truncate">QuizMaster99</h3>
<p class="text-primary font-black text-2xl mt-1">15,400 pts</p>
<div class="flex items-center justify-center gap-1 mt-3 text-sm text-slate-500 font-medium">
<span class="material-symbols-outlined text-[16px]">flag</span> USA
</div>
</div>
</div>
<!-- 3rd Place -->
<div class="order-3 flex flex-col items-center group">
<div class="relative mb-4">
<div class="absolute -top-6 left-1/2 -translate-x-1/2 bg-orange-200 text-orange-800 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-sm border border-orange-300 z-10">
3rd Place
</div>
<div class="size-24 md:size-28 rounded-full p-1 bg-gradient-to-br from-orange-300 to-orange-600 shadow-lg relative">
<img alt="Smiling young woman portrait" class="w-full h-full object-cover rounded-full border-4 border-white dark:border-slate-800" data-alt="Portrait of the third place winner" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCFVrP8lJpkqf_gu42cUXzUNclfapeq-5ZGGhoeYLKkM9Qw9XTSCLumfm9mJwp-SbDYR74x2qEh105ZtH_LEoIRJZ7u0TrQTh0kMJdn4ZkwLF4aXOUFi_9tbzPp_u_QrBzhGKKtsM7ImMBrB1zMuPB8-3Esu1GL-M_FbF21yeD2c_0h7SCyXq41w1JCHIiYrXdawEviVTqcu1tPS9zFaBXaE9SwwtJIFl6zRDF0nHxLgrc_WIV1MepUeIKqYigP4YAxxQ5tafSu"/>
<div class="absolute -bottom-2 -right-2 bg-orange-400 text-white rounded-full p-2 shadow-md border-2 border-white dark:border-slate-800 flex items-center justify-center size-10">
<span class="material-symbols-outlined text-[20px] text-orange-900">workspace_premium</span>
</div>
</div>
</div>
<div class="text-center bg-white dark:bg-slate-800 p-4 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-700 w-44 md:w-56 transform transition-transform group-hover:-translate-y-1">
<h3 class="font-bold text-slate-900 dark:text-white truncate">BrainiacX</h3>
<p class="text-primary font-bold text-lg mt-1">13,800 pts</p>
<div class="flex items-center justify-center gap-1 mt-2 text-xs text-slate-500">
<span class="material-symbols-outlined text-[14px]">flag</span> Canada
</div>
</div>
</div>
</div>
</div>
<!-- Leaderboard Table -->
<div class="bg-white dark:bg-slate-800 rounded-3xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
<div class="overflow-x-auto custom-scrollbar">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-slate-50 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider">
<th class="px-6 py-5 w-20 text-center">Rank</th>
<th class="px-6 py-5">Player</th>
<th class="px-6 py-5 hidden md:table-cell">Badge</th>
<th class="px-6 py-5 text-right">Accuracy</th>
<th class="px-6 py-5 text-right">Score</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100 dark:divide-slate-700 text-sm">
<!-- Row 4 -->
<tr class="group hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
<td class="px-6 py-4 text-center font-bold text-slate-400 group-hover:text-primary transition-colors">4</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<img alt="User avatar" class="size-10 rounded-full object-cover border border-slate-200 dark:border-slate-600" data-alt="Avatar of ranked player 4" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDnmo74Hm5F2fa4fIJC_p4X6l449-MFaXIYCFkfaIOTyMHMRo-RQyluBKn3wYvGkJCu1DhpUfLGm8zHkVC_1uX_wRQ2zGzUOp_Z_k9CRlCFnJU8s1jQisFLk310qRjGHbvEeMX34MgF0ZtpQBDI7SPbIlDVKkf1ZQBJMmPz7eykd3YOQ8dISI3xN_Im32T4ZV9iobRq6OEYW_eFFHCpIU8TOI0dY7Ab7O6MuDE-1HVNt0BpuhOFyi61Q4evlUFb5oHDJKo_RN0G"/>
<div>
<p class="font-bold text-slate-900 dark:text-white">NeonNinja</p>
<p class="text-xs text-slate-500">Japan</p>
</div>
</div>
</td>
<td class="px-6 py-4 hidden md:table-cell">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300">
Rising Star
</span>
</td>
<td class="px-6 py-4 text-right text-slate-600 dark:text-slate-400 font-medium">92%</td>
<td class="px-6 py-4 text-right font-bold text-slate-900 dark:text-white">12,950</td>
</tr>
<!-- Row 5 (Zebra) -->
<tr class="bg-slate-50/50 dark:bg-slate-800/50 group hover:bg-slate-100 dark:hover:bg-slate-700/50 transition-colors">
<td class="px-6 py-4 text-center font-bold text-slate-400 group-hover:text-primary transition-colors">5</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="size-10 rounded-full bg-teal-100 text-teal-600 flex items-center justify-center font-bold text-lg border border-teal-200 dark:bg-teal-900/30 dark:border-teal-800 dark:text-teal-400">
DL
</div>
<div>
<p class="font-bold text-slate-900 dark:text-white">DataLord</p>
<p class="text-xs text-slate-500">UK</p>
</div>
</div>
</td>
<td class="px-6 py-4 hidden md:table-cell">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
Consistent
</span>
</td>
<td class="px-6 py-4 text-right text-slate-600 dark:text-slate-400 font-medium">88%</td>
<td class="px-6 py-4 text-right font-bold text-slate-900 dark:text-white">11,800</td>
</tr>
<!-- Row 6 -->
<tr class="group hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
<td class="px-6 py-4 text-center font-bold text-slate-400 group-hover:text-primary transition-colors">6</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<img alt="User avatar" class="size-10 rounded-full object-cover border border-slate-200 dark:border-slate-600" data-alt="Avatar of ranked player 6" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDLxMvEzwaHi02VU3o45EzzSgExNT5MQDBBdkAsnq0KEaQwJua6mJq9RbUfDEg4qnTis1uj0TD78qqLvMECUIuCDO3DQzkKALDlrl9kuV__DLR5Z33TMjxF2Bi8aUSGKRvIj7KVpS3bgGTptbyoZrxi3ZvqUbctYGWDx9UH_E-nmsgqdNcd_SrWG4GjsZicthxVTna-F90UbidqZNrfTzAM-9OtJOb-zZ9Fa1xPRtxmrF2EU_XIsMInozSG3RiJU6FupBnva_dG"/>
<div>
<p class="font-bold text-slate-900 dark:text-white">CyberSage</p>
<p class="text-xs text-slate-500">Brazil</p>
</div>
</div>
</td>
<td class="px-6 py-4 hidden md:table-cell">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
Speedster
</span>
</td>
<td class="px-6 py-4 text-right text-slate-600 dark:text-slate-400 font-medium">85%</td>
<td class="px-6 py-4 text-right font-bold text-slate-900 dark:text-white">10,420</td>
</tr>
<!-- Row 7 (Zebra) -->
<tr class="bg-slate-50/50 dark:bg-slate-800/50 group hover:bg-slate-100 dark:hover:bg-slate-700/50 transition-colors">
<td class="px-6 py-4 text-center font-bold text-slate-400 group-hover:text-primary transition-colors">7</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<img alt="User avatar" class="size-10 rounded-full object-cover border border-slate-200 dark:border-slate-600" data-alt="Avatar of ranked player 7" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAGFfHrnX_IXIY2G_eNlCdXnHibzRyp-fwRiMS4YhHjGlo6ulaZiu_FRKncgjgdIY7uobeqa9mMG796JHY5XLi6Ybzw_T62oW8fmg0kvTJWkZqp6nbYAUWa1hFkftktd9PvY8kMiMQLBM3dhhPi4ohriiiLeJYPcepfWO6RLf2Fj3AK9PFjbD192C2FnMw5lH-yA2RRyyqAqPLUGxK6XMSVtJbD60G755nlKy2d2F3BMpGEs6BersBjlVpiFP7gpPICoeJheZIT"/>
<div>
<p class="font-bold text-slate-900 dark:text-white">PixelPioneer</p>
<p class="text-xs text-slate-500">Germany</p>
</div>
</div>
</td>
<td class="px-6 py-4 hidden md:table-cell">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-300">
Veteran
</span>
</td>
<td class="px-6 py-4 text-right text-slate-600 dark:text-slate-400 font-medium">94%</td>
<td class="px-6 py-4 text-right font-bold text-slate-900 dark:text-white">9,950</td>
</tr>
<!-- Row 8 -->
<tr class="group hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
<td class="px-6 py-4 text-center font-bold text-slate-400 group-hover:text-primary transition-colors">8</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="size-10 rounded-full bg-pink-100 text-pink-600 flex items-center justify-center font-bold text-lg border border-pink-200 dark:bg-pink-900/30 dark:border-pink-800 dark:text-pink-400">
K
</div>
<div>
<p class="font-bold text-slate-900 dark:text-white">KnowledgeSeeker</p>
<p class="text-xs text-slate-500">Australia</p>
</div>
</div>
</td>
<td class="px-6 py-4 hidden md:table-cell">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300">
Hard Worker
</span>
</td>
<td class="px-6 py-4 text-right text-slate-600 dark:text-slate-400 font-medium">78%</td>
<td class="px-6 py-4 text-right font-bold text-slate-900 dark:text-white">9,100</td>
</tr>
<!-- Row 9 (Zebra) -->
<tr class="bg-slate-50/50 dark:bg-slate-800/50 group hover:bg-slate-100 dark:hover:bg-slate-700/50 transition-colors">
<td class="px-6 py-4 text-center font-bold text-slate-400 group-hover:text-primary transition-colors">9</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<img alt="User avatar" class="size-10 rounded-full object-cover border border-slate-200 dark:border-slate-600" data-alt="Avatar of ranked player 9" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCkv6aUc8_yIK47Q2-cpQXTIAva0W-y03NMk33ErrXUWZ5Xtt6ZEqd9YUAwClfJ7EIXLNIswgrdpOMcVi0bQwTRgVA2ebQZgiUDd9u7Vnub8zZapB-_oJblTlxqK6B8uHspdCLb0hjK1fSempMdqQc4alGg57_bMc_gBXss6SCi1PvvXBiwr8ZAtoNnPSeHmR3YsfergbaUfGAShNxIDXpv8sXIzT1olMgQGM-n_10-otACvoDa0zt_W2M51lW_EOGkNfSF-JnH"/>
<div>
<p class="font-bold text-slate-900 dark:text-white">GeoGenius</p>
<p class="text-xs text-slate-500">India</p>
</div>
</div>
</td>
<td class="px-6 py-4 hidden md:table-cell">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
Streak Master
</span>
</td>
<td class="px-6 py-4 text-right text-slate-600 dark:text-slate-400 font-medium">81%</td>
<td class="px-6 py-4 text-right font-bold text-slate-900 dark:text-white">8,880</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination / Show More -->
<div class="px-6 py-4 bg-slate-50 dark:bg-slate-800/50 border-t border-slate-200 dark:border-slate-700 flex items-center justify-center">
<button class="text-primary hover:text-primary-dark font-semibold text-sm flex items-center gap-2 px-4 py-2 rounded-lg hover:bg-primary/5 transition-colors">
Show next 10 players
<span class="material-symbols-outlined text-[18px]">expand_more</span>
</button>
</div>
</div>
</main>
<!-- User Sticky Stats Bar (Bottom) -->
<div class="fixed bottom-0 left-0 w-full bg-white dark:bg-slate-900 border-t border-primary/20 shadow-[0_-4px_20px_-5px_rgba(0,0,0,0.1)] p-4 z-40 transform transition-transform translate-y-0">
<div class="max-w-7xl mx-auto flex items-center justify-between gap-4">
<div class="flex items-center gap-4">
<div class="size-10 rounded-full bg-slate-200 dark:bg-slate-700 flex items-center justify-center text-slate-500 dark:text-slate-400">
<span class="material-symbols-outlined">person</span>
</div>
<div>
<p class="text-sm font-medium text-slate-900 dark:text-white">Your Rank</p>
<p class="text-xs text-slate-500">Join to see where you stand!</p>
</div>
</div>
<div class="flex gap-3">
<button class="hidden sm:block text-slate-600 dark:text-slate-400 text-sm font-medium hover:text-slate-900 dark:hover:text-white px-3 py-2">
Login
</button>
<button class="bg-primary hover:bg-primary-dark text-white text-sm font-bold px-5 py-2 rounded-full shadow-lg shadow-primary/30 transition-all">
Sign Up Free
</button>
</div>
</div>
</div>
<!-- Spacing for sticky footer -->
<div class="h-20"></div>
</body></html>