<!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 - Global Leaderboard</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&family=Noto+Sans:wght@400;500;700&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>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#7f13ec",
"primary-dark": "#5e0eb0",
"background-light": "#f7f6f8",
"background-dark": "#1a1122",
"surface-dark": "#261933",
"accent-gold": "#FFD700",
"accent-silver": "#C0C0C0",
"accent-bronze": "#CD7F32",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"],
"body": ["Noto Sans", "sans-serif"],
},
borderRadius: {"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"},
boxShadow: {
'glow': '0 0 20px -5px rgba(127, 19, 236, 0.5)',
'glow-gold': '0 0 25px -5px rgba(255, 215, 0, 0.6)',
'glow-silver': '0 0 20px -5px rgba(192, 192, 192, 0.4)',
'glow-bronze': '0 0 20px -5px rgba(205, 127, 50, 0.4)',
}
},
},
}
</script>
<style>
body {
font-family: "Spline Sans", sans-serif;
}
/* Custom scrollbar for the table container */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #1a1122;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #362348;
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #4d3267;
}
.floating-animation {
animation: float 6s ease-in-out infinite;
}
.floating-animation-delayed {
animation: float 6s ease-in-out 3s infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
</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 -->
<nav class="sticky top-0 z-50 w-full border-b border-[#362348] bg-background-dark/95 backdrop-blur-sm px-6 py-4">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<div class="flex items-center gap-3 text-white">
<div class="w-8 h-8 flex items-center justify-center bg-primary rounded-lg text-white">
<span class="material-symbols-outlined text-xl">stadia_controller</span>
</div>
<h1 class="text-xl font-bold tracking-tight">QuizQuest</h1>
</div>
<div class="hidden md:flex items-center gap-8">
<a class="text-slate-300 hover:text-white text-sm font-medium transition-colors" href="#">Home</a>
<a class="text-slate-300 hover:text-white text-sm font-medium transition-colors" href="#">Quizzes</a>
<a class="text-white text-sm font-bold border-b-2 border-primary pb-1" href="#">Leaderboard</a>
</div>
<div class="flex items-center gap-4">
<button class="bg-surface-dark hover:bg-[#362348] text-white p-2 rounded-full transition-colors relative">
<span class="material-symbols-outlined">notifications</span>
<span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full"></span>
</button>
<div class="hidden sm:flex items-center gap-3 pl-4 border-l border-[#362348]">
<div class="text-right hidden md:block">
<p class="text-xs text-slate-400">Welcome,</p>
<p class="text-sm font-bold text-white">GamerOne</p>
</div>
<div class="w-10 h-10 rounded-full bg-gradient-to-tr from-primary to-purple-400 p-0.5">
<img alt="User profile avatar" class="w-full h-full rounded-full object-cover border-2 border-background-dark" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDXMVTKZfn3Agp_81bCislxT0hxkZyrHIBetl_cTjBX0-4efZRCJc7PsxHzI2C3nJ6CmStE3E2JNqMTJk6qHjaaqRN0WNRed6huy6hLzGBdo74b0ekP0b2RkvAcFVj9IxBp-BTbyeUqxkA8Wj6Slfr_ib_aJeD_ZCrovyN5wDBX0_u2tmKekylrSXWZ5yGjkSjD2y-Gd_mVwvACq-F1RPhAdRhUQkYqXknuD1JwfkKNpcilOZuSicizCTDUWs9myKQFaxxGUxYG"/>
</div>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="flex-grow w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex flex-col gap-8">
<!-- Header & Toggles -->
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
<div class="text-center md:text-left">
<h2 class="text-4xl md:text-5xl font-black tracking-tight text-white mb-2">Global Legends</h2>
<p class="text-[#ad92c9] text-lg">Top Quiz Masters of the Universe</p>
</div>
<!-- Timeframe Toggle -->
<div class="bg-surface-dark p-1 rounded-full flex items-center shadow-lg border border-[#362348]">
<button class="px-6 py-2 rounded-full text-sm font-medium text-[#ad92c9] hover:text-white transition-colors">Daily</button>
<button class="px-6 py-2 rounded-full text-sm font-bold bg-primary text-white shadow-lg">Weekly</button>
<button class="px-6 py-2 rounded-full text-sm font-medium text-[#ad92c9] hover:text-white transition-colors">Monthly</button>
</div>
</div>
<!-- Podium Section -->
<div class="relative w-full py-10 px-4 mt-8 mb-12">
<!-- Background Glow -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-3/4 h-3/4 bg-primary/20 blur-[100px] rounded-full -z-10"></div>
<div class="flex flex-wrap justify-center items-end gap-4 md:gap-8 lg:gap-12 min-h-[360px]">
<!-- Rank 2 -->
<div class="flex flex-col items-center order-2 md:order-1 floating-animation-delayed w-36 md:w-48">
<div class="relative mb-4 group cursor-pointer">
<div class="absolute -inset-1 rounded-full bg-gradient-to-tr from-gray-400 to-gray-600 opacity-70 blur group-hover:opacity-100 transition duration-500"></div>
<div class="w-24 h-24 md:w-32 md:h-32 rounded-full border-4 border-[#C0C0C0] relative z-10 overflow-hidden bg-surface-dark">
<img alt="Rank 2" class="w-full h-full object-cover" data-alt="Profile picture of rank 2 player" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBLUPSO1DKRbM929kr7Y3uZM-NOKy4BBASQgom9Q2pX7JO2NYRpBHZvhNFwWBQoxqt7P56UmzjRxRosZguS6Q1rbnT3m_7wZTMOfZBpemPXlSTWv6padcJkoKEwoz9JCiLLVe25WKrsYk5Nr_nxCHIwUpxMeLLnPGBX_KPqGrofmYlQo5KtP8FnMYVLCrNKvGEQeNdxOMdMp34Exr-mPIQ3s3JL4Z0X-PEE-mcnpYKnpqFZyG0VuKVtSkcdcQF_Zvb8Q6E4XcUr"/>
</div>
<div class="absolute -bottom-3 left-1/2 -translate-x-1/2 z-20 bg-[#C0C0C0] text-black w-8 h-8 flex items-center justify-center rounded-full font-bold text-lg shadow-glow-silver border-2 border-background-dark">
2
</div>
</div>
<h3 class="text-white font-bold text-lg truncate w-full text-center">SilverSurfer</h3>
<p class="text-[#ad92c9] text-sm font-medium">10,450 XP</p>
<div class="h-24 md:h-32 w-full bg-gradient-to-t from-surface-dark to-[#362348]/20 mt-4 rounded-t-2xl border-x border-t border-[#C0C0C0]/20 relative flex flex-col justify-end pb-4 items-center">
<span class="material-symbols-outlined text-[#C0C0C0] text-4xl opacity-50">workspace_premium</span>
</div>
</div>
<!-- Rank 1 -->
<div class="flex flex-col items-center order-1 md:order-2 floating-animation w-40 md:w-56 -mt-12 md:-mt-20 z-10">
<div class="relative mb-4 group cursor-pointer">
<div class="absolute -top-12 left-1/2 -translate-x-1/2 text-[#FFD700] animate-bounce">
<span class="material-symbols-outlined text-5xl drop-shadow-[0_0_10px_rgba(255,215,0,0.6)]">crown</span>
</div>
<div class="absolute -inset-1 rounded-full bg-gradient-to-tr from-yellow-400 to-orange-500 opacity-80 blur-md group-hover:opacity-100 transition duration-500"></div>
<div class="w-32 h-32 md:w-40 md:h-40 rounded-full border-4 border-[#FFD700] relative z-10 overflow-hidden bg-surface-dark shadow-glow-gold">
<img alt="Rank 1" class="w-full h-full object-cover" data-alt="Profile picture of rank 1 player" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDFwT5kmBdJ1wI9wOLKjbbOQMtR1ysg-pBekPXXpZLWVoUKE_bQMTmyBWbthvXTDeduaOdkFao2GwYA5vvFa9cTrsmBxYLnQG-wBxy1ztj85R9LQbw_9CjGQn9b5M-ifGsNcTRx6s7Yjb3UVAnI_kCrRNJb8L4x_Wcr8msSAXx8b_IGkKBz8euvRDXI3L5hR_WlH7YOS6cqrdIEPX59DZPQbLg9wOFxJkyEUS3DcdEp2_TbPNyzRPAdzBt_VMRx373zXnJ42Dzf"/>
</div>
<div class="absolute -bottom-4 left-1/2 -translate-x-1/2 z-20 bg-[#FFD700] text-black w-10 h-10 flex items-center justify-center rounded-full font-black text-xl shadow-glow-gold border-2 border-background-dark">
1
</div>
</div>
<h3 class="text-white font-black text-xl truncate w-full text-center bg-clip-text text-transparent bg-gradient-to-r from-yellow-200 to-yellow-500">KingQuiz</h3>
<p class="text-[#FFD700] text-base font-bold drop-shadow-md">12,500 XP</p>
<div class="h-32 md:h-48 w-full bg-gradient-to-t from-surface-dark via-primary/20 to-primary/5 mt-4 rounded-t-2xl border-x border-t border-[#FFD700]/30 relative flex flex-col justify-end pb-6 items-center shadow-[0_-10px_40px_-15px_rgba(127,19,236,0.3)]">
<span class="material-symbols-outlined text-[#FFD700] text-6xl opacity-80 drop-shadow-lg">trophy</span>
</div>
</div>
<!-- Rank 3 -->
<div class="flex flex-col items-center order-3 md:order-3 floating-animation-delayed w-36 md:w-48">
<div class="relative mb-4 group cursor-pointer">
<div class="absolute -inset-1 rounded-full bg-gradient-to-tr from-orange-700 to-amber-800 opacity-70 blur group-hover:opacity-100 transition duration-500"></div>
<div class="w-24 h-24 md:w-32 md:h-32 rounded-full border-4 border-[#CD7F32] relative z-10 overflow-hidden bg-surface-dark">
<img alt="Rank 3" class="w-full h-full object-cover" data-alt="Profile picture of rank 3 player" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBVwPx1FvDJeUn9qXSfNOklQbmsI8GavQBuipVNHBOu9qKWUblWNWWMxEFkpTqY2U1EZQ_2pCteIGj3LGRWktrZGnFEkG8bItOUfNGK1dQt4MEwzwy5hPF03Oljl0UqgLKhEBn4-N0WMFcKGH1O1rjkGIziIs7uj_IgP9gj8GpJRKPZdmimKMV7M18rlNi_1kc3utZiWYZoQoR10ncXxu-jLO4NO68_kmGZtadLQIS9gF4snyYIxR4LphBqgkNUe_qwMl264u51"/>
</div>
<div class="absolute -bottom-3 left-1/2 -translate-x-1/2 z-20 bg-[#CD7F32] text-black w-8 h-8 flex items-center justify-center rounded-full font-bold text-lg shadow-glow-bronze border-2 border-background-dark">
3
</div>
</div>
<h3 class="text-white font-bold text-lg truncate w-full text-center">BronzeMaster</h3>
<p class="text-[#ad92c9] text-sm font-medium">8,200 XP</p>
<div class="h-20 md:h-24 w-full bg-gradient-to-t from-surface-dark to-[#362348]/20 mt-4 rounded-t-2xl border-x border-t border-[#CD7F32]/20 relative flex flex-col justify-end pb-4 items-center">
<span class="material-symbols-outlined text-[#CD7F32] text-4xl opacity-50">military_tech</span>
</div>
</div>
</div>
</div>
<!-- Leaderboard Table -->
<div class="w-full bg-surface-dark rounded-3xl border border-[#362348] overflow-hidden shadow-2xl flex flex-col">
<!-- Table Header -->
<div class="grid grid-cols-12 gap-4 px-6 py-5 bg-[#362348]/50 border-b border-[#362348] text-[#ad92c9] font-semibold text-sm uppercase tracking-wider sticky top-0 z-10 backdrop-blur-md">
<div class="col-span-2 md:col-span-1 text-center">Rank</div>
<div class="col-span-6 md:col-span-5">Player</div>
<div class="col-span-4 md:col-span-3 text-center">Quizzes Won</div>
<div class="col-span-0 md:col-span-3 text-right hidden md:block">Total XP</div>
</div>
<!-- Table Body -->
<div class="flex flex-col max-h-[600px] overflow-y-auto custom-scrollbar">
<!-- User Row 4 -->
<div class="grid grid-cols-12 gap-4 px-6 py-4 items-center border-b border-[#362348] hover:bg-white/5 transition-colors group">
<div class="col-span-2 md:col-span-1 text-center font-bold text-white text-lg">04</div>
<div class="col-span-6 md:col-span-5 flex items-center gap-3">
<div class="w-10 h-10 rounded-full overflow-hidden border border-[#362348] group-hover:border-primary transition-colors">
<img class="w-full h-full object-cover" data-alt="Avatar for CyberNinja" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCXEe4pzHo3Na10NFqnIXvn-X7tgLJj-TKvgUKMBvpSQ9zoGQ3GbrnqbjXc-oHRvVRVwFNF6hUUDaB21pN6A3Ua3hGtAq7fSgt3B73zQ38H3Sh5ecZIZ8IW5eH8gz-eb23sbJxfvYZ33vuEkGn1jYtq-E87lYccQqQ4n27db4JXCoZwYswMX4QgKiD6gePTtGkuioTIF_pqE_MtJLbLfRw5jH7mnpKRIyl-gcKo78iFJi3YvXcAsU3DZ_ochW128pYq8uwyfeK8"/>
</div>
<div class="flex flex-col">
<span class="text-white font-medium group-hover:text-primary transition-colors">CyberNinja</span>
<span class="text-xs text-[#ad92c9] md:hidden">7,800 XP</span>
</div>
</div>
<div class="col-span-4 md:col-span-3 text-center">
<span class="inline-flex items-center px-3 py-1 rounded-full bg-[#362348] text-white text-sm font-medium border border-[#4d3267]">
<span class="material-symbols-outlined text-xs mr-1 text-primary">emoji_events</span> 42
</span>
</div>
<div class="col-span-0 md:col-span-3 text-right hidden md:block">
<span class="text-[#ad92c9] font-mono">7,800 XP</span>
</div>
</div>
<!-- User Row 5 -->
<div class="grid grid-cols-12 gap-4 px-6 py-4 items-center border-b border-[#362348] hover:bg-white/5 transition-colors group">
<div class="col-span-2 md:col-span-1 text-center font-bold text-white text-lg">05</div>
<div class="col-span-6 md:col-span-5 flex items-center gap-3">
<div class="w-10 h-10 rounded-full overflow-hidden border border-[#362348] group-hover:border-primary transition-colors">
<img class="w-full h-full object-cover" data-alt="Avatar for PixelPioneer" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAQ_fznC6sEdDwnySvsx54CnKNOF8FFmZoWP2DMNHRlbTJDkRV_ysUI8xiphqmAOv_VnVsIQc1fSunCP8RdP1Welnbh3UWFJ3sr29Mvgf1i36IUOVEvOEt-fYAcxDWF_7KSqzg1499iXzQl6YOkkASx0SXo8eJ8aNahXVZZUXzIfbzIXtfgLRvzp34oh_N7ETJEX-RzdoGJ5LTnS3PxwJLVAmym-wodpAxlDbEOaCiuTHG7czInKaYSa70cXzBqDz5BmJLPaj4H"/>
</div>
<div class="flex flex-col">
<span class="text-white font-medium group-hover:text-primary transition-colors">PixelPioneer</span>
<span class="text-xs text-[#ad92c9] md:hidden">7,650 XP</span>
</div>
</div>
<div class="col-span-4 md:col-span-3 text-center">
<span class="inline-flex items-center px-3 py-1 rounded-full bg-[#362348] text-white text-sm font-medium border border-[#4d3267]">
<span class="material-symbols-outlined text-xs mr-1 text-primary">emoji_events</span> 40
</span>
</div>
<div class="col-span-0 md:col-span-3 text-right hidden md:block">
<span class="text-[#ad92c9] font-mono">7,650 XP</span>
</div>
</div>
<!-- User Row 6 -->
<div class="grid grid-cols-12 gap-4 px-6 py-4 items-center border-b border-[#362348] hover:bg-white/5 transition-colors group">
<div class="col-span-2 md:col-span-1 text-center font-bold text-white text-lg">06</div>
<div class="col-span-6 md:col-span-5 flex items-center gap-3">
<div class="w-10 h-10 rounded-full overflow-hidden border border-[#362348] group-hover:border-primary transition-colors">
<img class="w-full h-full object-cover" data-alt="Avatar for NeonKnight" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDNrPYlinpub35-L7imZK8H1Rm2ZK5q0BaDG1uuHAFQjzz6JZxC6LMhgubWGSzhQ4NZ3Q9R5tAE2pRXjvvrOcw2opjMSiNXfj7cCOX6BBPCLbsIOt39J9XSVGGGWOUFNjVFCclPlbe3VylIEg0ehYXJzsCMUsvcN6yzemWPKPgsHHMCmg_x60x52pOB7f1Wz24poOX5INegXUltoe9xWCrtDGDhlwxsi9aMZgmk11KvdFzn4lcH9vQ3U-McdNdQN-5LR8OkPubD"/>
</div>
<div class="flex flex-col">
<span class="text-white font-medium group-hover:text-primary transition-colors">NeonKnight</span>
<span class="text-xs text-[#ad92c9] md:hidden">7,200 XP</span>
</div>
</div>
<div class="col-span-4 md:col-span-3 text-center">
<span class="inline-flex items-center px-3 py-1 rounded-full bg-[#362348] text-white text-sm font-medium border border-[#4d3267]">
<span class="material-symbols-outlined text-xs mr-1 text-primary">emoji_events</span> 38
</span>
</div>
<div class="col-span-0 md:col-span-3 text-right hidden md:block">
<span class="text-[#ad92c9] font-mono">7,200 XP</span>
</div>
</div>
<!-- User Row 7 -->
<div class="grid grid-cols-12 gap-4 px-6 py-4 items-center border-b border-[#362348] hover:bg-white/5 transition-colors group">
<div class="col-span-2 md:col-span-1 text-center font-bold text-white text-lg">07</div>
<div class="col-span-6 md:col-span-5 flex items-center gap-3">
<div class="w-10 h-10 rounded-full overflow-hidden border border-[#362348] group-hover:border-primary transition-colors">
<img class="w-full h-full object-cover" data-alt="Avatar for DataDragon" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCOa3J_KvCx0irhw5v9n5Ho1SsEJVcwXskO_NCXjFFdRotqQvLMUv4qu24BlEoSfcZQRhSllwHolFoMvcV5hykD6rhDZ2Igf8FgHXTgqssrTJShcWDNG5kUBKHlZJzwrL-fcycaQaKnV7PbzyEmvCcnKYoFKjpqJZEQJ8r6wWytklTttYhl4gdi-VTnk67-ZbdrruDGhev8TVJyHAYaEA6o-LBUbAxyDO6L-GDAw8yQBD-CzIzyDbbU5KrITI6t2ggSviEC2Xy4"/>
</div>
<div class="flex flex-col">
<span class="text-white font-medium group-hover:text-primary transition-colors">DataDragon</span>
<span class="text-xs text-[#ad92c9] md:hidden">6,900 XP</span>
</div>
</div>
<div class="col-span-4 md:col-span-3 text-center">
<span class="inline-flex items-center px-3 py-1 rounded-full bg-[#362348] text-white text-sm font-medium border border-[#4d3267]">
<span class="material-symbols-outlined text-xs mr-1 text-primary">emoji_events</span> 35
</span>
</div>
<div class="col-span-0 md:col-span-3 text-right hidden md:block">
<span class="text-[#ad92c9] font-mono">6,900 XP</span>
</div>
</div>
<!-- User Row 8 -->
<div class="grid grid-cols-12 gap-4 px-6 py-4 items-center border-b border-[#362348] hover:bg-white/5 transition-colors group">
<div class="col-span-2 md:col-span-1 text-center font-bold text-white text-lg">08</div>
<div class="col-span-6 md:col-span-5 flex items-center gap-3">
<div class="w-10 h-10 rounded-full overflow-hidden border border-[#362348] group-hover:border-primary transition-colors">
<img class="w-full h-full object-cover" data-alt="Avatar for LogicLord" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCqSXN0Wyukg3MdmFRnsQYRYqviOhNuQpXp1CY9kD8zO1BBi66Sp7hY3REqe56fNnQOKkJRxyEL0u7ACppEn8OnKS-s_V75YRWtNWAJqjPy0-MKaDdjqJNb926DVLFJu2H0H6ss-_g2zawLCFoaDmvx6Kr4TOs5F2TyAUs5U-eaqLzFnuHwLXavhSkxJmzoR3Ew5H7bJKjoACAQxAWHvuUwpVMQeUkvnBlnslX7PVthhEwlPM4cUfuEFxSPK9d6lVlxboW3JBla"/>
</div>
<div class="flex flex-col">
<span class="text-white font-medium group-hover:text-primary transition-colors">LogicLord</span>
<span class="text-xs text-[#ad92c9] md:hidden">6,500 XP</span>
</div>
</div>
<div class="col-span-4 md:col-span-3 text-center">
<span class="inline-flex items-center px-3 py-1 rounded-full bg-[#362348] text-white text-sm font-medium border border-[#4d3267]">
<span class="material-symbols-outlined text-xs mr-1 text-primary">emoji_events</span> 33
</span>
</div>
<div class="col-span-0 md:col-span-3 text-right hidden md:block">
<span class="text-[#ad92c9] font-mono">6,500 XP</span>
</div>
</div>
<!-- Current User Row (Sticky / Highlighted) -->
<div class="sticky bottom-0 bg-[#362348] grid grid-cols-12 gap-4 px-6 py-4 items-center border-t-2 border-primary/50 shadow-[0_-5px_15px_rgba(0,0,0,0.3)] z-10">
<div class="col-span-2 md:col-span-1 text-center font-bold text-primary text-lg">42</div>
<div class="col-span-6 md:col-span-5 flex items-center gap-3">
<div class="w-10 h-10 rounded-full overflow-hidden border-2 border-primary">
<img class="w-full h-full object-cover" data-alt="My Avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBKoaoBqJkWbMGfUpAjctjq1M7CTG8wFzqDvMraxjuXjDTgGCopACEgAVIf1eX9KT9XPe5RTmUvAKmZI-vkaZSK8LjUtnkiqIPy0N2nnc5xE-pkYMaIuF3rz_3hU9xkIxo2-t2QkP8pNvAfo7IktmLKPyoDKQgg45H2t5M_RuMD5EAIRLS9LCUHHUR1Dqfjxiz_OBusQqoec868KplYjdJR67iAOrsFbYOiIQFU3fdxrI3QBS7xT_5F4rmxiPbqn8ac6_tV0JHN"/>
</div>
<div class="flex flex-col">
<span class="text-white font-bold">You (GamerOne)</span>
<span class="text-xs text-primary-200 md:hidden">2,100 XP</span>
</div>
</div>
<div class="col-span-4 md:col-span-3 text-center">
<span class="inline-flex items-center px-3 py-1 rounded-full bg-primary text-white text-sm font-bold shadow-lg shadow-primary/30">
<span class="material-symbols-outlined text-xs mr-1 text-white">emoji_events</span> 12
</span>
</div>
<div class="col-span-0 md:col-span-3 text-right hidden md:block">
<span class="text-white font-mono font-bold">2,100 XP</span>
</div>
</div>
</div>
<!-- Load More -->
<div class="p-4 bg-surface-dark border-t border-[#362348] text-center">
<button class="bg-[#362348] hover:bg-[#4d3267] text-white px-8 py-3 rounded-full font-bold text-sm transition-all hover:shadow-lg inline-flex items-center gap-2">
Load More Players
<span class="material-symbols-outlined text-sm">expand_more</span>
</button>
</div>
</div>
</main>
<!-- Footer -->
<footer class="border-t border-[#362348] bg-background-dark py-8 mt-12">
<div class="max-w-7xl mx-auto px-6 text-center text-[#ad92c9] text-sm">
<p>© 2023 QuizQuest. All rights reserved. Level up your knowledge.</p>
</div>
</footer>
</body></html>