<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>User Portal Central Dashboard - QuizQuest</title>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;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"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#6D28D9","primary-glow": "#8b5cf6",
"secondary": "#fbbf24","background-light": "#f6f6f8",
"background-dark": "#0B0A10",
"surface-dark": "#16131D",
"surface-highlight": "#231F2E",
"accent-pink": "#ec4899",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "0.75rem",
"lg": "1.5rem",
"xl": "2rem",
"full": "9999px"
},
backgroundImage: {
'neon-gradient': 'linear-gradient(135deg, #6D28D9 0%, #ec4899 100%)',
'gold-gradient': 'linear-gradient(135deg, #fbbf24 0%, #d97706 100%)',
}
},
},
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.text-glow {
text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}
.text-glow-gold {
text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}
.box-glow {
box-shadow: 0 0 20px rgba(109, 40, 217, 0.15);
}
}
</style>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 antialiased overflow-hidden selection:bg-primary selection:text-white">
<div class="flex h-screen w-full overflow-hidden">
<aside class="hidden w-64 flex-col justify-between border-r border-surface-highlight bg-background-dark/50 backdrop-blur-sm p-6 lg:flex">
<div class="flex flex-col gap-8">
<div class="flex items-center gap-3 px-2">
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-primary to-accent-pink text-white shadow-[0_0_15px_rgba(139,92,246,0.5)]">
<span class="material-symbols-outlined">sports_esports</span>
</div>
<div>
<h1 class="text-xl font-bold leading-tight text-white tracking-wide">QuizQuest</h1>
</div>
</div>
<nav class="flex flex-col gap-2">
<a class="group flex items-center gap-3 rounded-xl bg-surface-highlight px-4 py-3 text-white shadow-lg shadow-primary/10 transition-all hover:scale-[1.02]" href="#">
<span class="material-symbols-outlined text-[20px] text-primary group-hover:text-white transition-colors">dashboard</span>
<span class="text-sm font-semibold">Dashboard</span>
</a>
<a class="group flex items-center gap-3 rounded-xl px-4 py-3 text-slate-400 transition-all hover:bg-surface-highlight hover:text-white hover:pl-5" href="#">
<span class="material-symbols-outlined text-[20px]">swords</span>
<span class="text-sm font-medium">My Quests</span>
</a>
<a class="group flex items-center gap-3 rounded-xl px-4 py-3 text-slate-400 transition-all hover:bg-surface-highlight hover:text-white hover:pl-5" href="#">
<span class="material-symbols-outlined text-[20px]">school</span>
<span class="text-sm font-medium">Practice</span>
</a>
<a class="group flex items-center gap-3 rounded-xl px-4 py-3 text-slate-400 transition-all hover:bg-surface-highlight hover:text-white hover:pl-5" href="#">
<span class="material-symbols-outlined text-[20px]">account_balance_wallet</span>
<span class="text-sm font-medium">Wallet</span>
</a>
<a class="group flex items-center gap-3 rounded-xl px-4 py-3 text-slate-400 transition-all hover:bg-surface-highlight hover:text-white hover:pl-5" href="#">
<span class="material-symbols-outlined text-[20px]">redeem</span>
<span class="text-sm font-medium">Prize Hub</span>
</a>
<a class="group flex items-center gap-3 rounded-xl px-4 py-3 text-slate-400 transition-all hover:bg-surface-highlight hover:text-white hover:pl-5" href="#">
<span class="material-symbols-outlined text-[20px]">share</span>
<span class="text-sm font-medium">Affiliate</span>
</a>
</nav>
</div>
<div class="flex flex-col gap-2">
<a class="flex items-center gap-3 rounded-xl px-4 py-3 text-slate-400 transition-colors hover:bg-surface-highlight hover:text-white" href="#">
<span class="material-symbols-outlined text-[20px]">settings</span>
<span class="text-sm font-medium">Settings</span>
</a>
<a class="flex items-center gap-3 rounded-xl px-4 py-3 text-slate-400 transition-colors hover:bg-surface-highlight hover:text-red-400" href="#">
<span class="material-symbols-outlined text-[20px]">logout</span>
<span class="text-sm font-medium">Log Out</span>
</a>
</div>
</aside>
<main class="flex flex-1 flex-col overflow-y-auto bg-background-dark scrollbar-hide">
<header class="sticky top-0 z-20 flex w-full items-center justify-between border-b border-surface-highlight bg-background-dark/80 px-6 py-4 backdrop-blur-md lg:px-10">
<div class="flex items-center gap-4 lg:hidden">
<button class="text-white">
<span class="material-symbols-outlined">menu</span>
</button>
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-white">
<span class="material-symbols-outlined text-sm">sports_esports</span>
</div>
</div>
<div class="hidden lg:flex items-center gap-6">
<div class="flex items-center gap-2 bg-surface-highlight/50 px-3 py-1.5 rounded-full border border-surface-highlight">
<div class="h-6 w-6 rounded-full bg-gradient-to-br from-blue-500 to-cyan-400 flex items-center justify-center text-[10px] font-bold text-white shadow-sm">12</div>
<span class="text-xs font-semibold text-slate-200">Level</span>
<div class="h-1.5 w-16 bg-surface-dark rounded-full overflow-hidden ml-1">
<div class="h-full w-3/4 bg-blue-500 rounded-full"></div>
</div>
</div>
<div class="flex items-center gap-2 px-2">
<span class="material-symbols-outlined text-secondary text-[20px]">stars</span>
<div class="flex flex-col leading-none">
<span class="text-xs font-bold text-white">2,450</span>
<span class="text-[10px] text-slate-400 uppercase tracking-wider">Points</span>
</div>
</div>
<div class="flex items-center gap-2 px-2 border-l border-surface-highlight">
<span class="material-symbols-outlined text-accent-pink text-[20px]">diamond</span>
<div class="flex flex-col leading-none">
<span class="text-xs font-bold text-white">150</span>
<span class="text-[10px] text-slate-400 uppercase tracking-wider">Affiliate</span>
</div>
</div>
</div>
<div class="flex items-center gap-4">
<button class="relative flex h-10 w-10 items-center justify-center rounded-full bg-surface-highlight text-white transition-colors hover:bg-surface-highlight/80 hover:text-primary">
<span class="material-symbols-outlined text-[20px]">notifications</span>
<span class="absolute top-2 right-2.5 h-2 w-2 rounded-full bg-red-500 border-2 border-surface-highlight"></span>
</button>
<div class="flex h-10 w-10 overflow-hidden rounded-full border-2 border-primary p-0.5">
<img alt="User Profile Picture" class="h-full w-full object-cover rounded-full" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzViL4lc0jczPZTmPDaDclgDRrxY-CoEIhF3LrBitMVCMLnouJJA--yIsKtsNPGtyE4LuMlV4PivDdBDmhCWNkAPTwNpqZHpr1VrBXiZOIQLMV0tqcbN5rlhT8PNPhuitdvbjjJ__KSKmqFbL6C2lgx2_ML9AOeX7zoh0HyaInm8BK6ktedzykYbw63mLopcHpNBH3DhZY7GvRiCGp3eF8zx4jWMXr9ac6huaPlWFvpnlBfg6kuKr1_BJAeuC6YEIKGKuRym9DR1lN"/>
</div>
</div>
</header>
<div class="flex flex-col lg:flex-row gap-6 p-6 lg:p-8 h-full">
<div class="flex-1 flex flex-col gap-8">
<section class="relative overflow-hidden rounded-3xl bg-surface-dark shadow-2xl border border-white/5 group">
<div class="absolute inset-0 bg-cover bg-center opacity-30 mix-blend-overlay" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBNiXM0KQa_JbKzd6kSpbeMX53tyweJ_cJVVX-AnUMBt56Y-lhXFZaZ1c43BJaiTaUAuVfESAE6j2nTwJpmN1aCmwyYI5tYOX4uEmn-tEF5sG2wqwuZhTFRegQBF4GnEPryct2TefTXeHIujSmehShENp4X40OEhf30iuBkQaEdfHRpMSNWBl4Ec0KSlFu0iTyVKNtwcI5ByahKq2q4OxHKYEfdc6koWdY2EJ1VHWPMkxlgWRR_4i9-jrO_mz1MpeMDcfqSbWmcy7nL');"></div>
<div class="absolute inset-0 bg-gradient-to-r from-primary/90 via-surface-dark/95 to-surface-dark/40"></div>
<div class="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-accent-pink opacity-20 blur-[100px]"></div>
<div class="absolute -left-20 -bottom-20 h-64 w-64 rounded-full bg-primary opacity-20 blur-[100px]"></div>
<div class="relative z-10 flex flex-col md:flex-row items-center justify-between p-8 gap-6">
<div class="flex flex-col items-start gap-4 max-w-lg">
<div class="inline-flex items-center gap-2 rounded-full bg-red-500/10 border border-red-500/20 px-3 py-1 backdrop-blur-md">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
</span>
<span class="text-xs font-bold uppercase tracking-widest text-red-400">Next Mega Quiz</span>
</div>
<h2 class="text-4xl md:text-5xl font-black text-white leading-tight">
<span class="text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-400">Win the</span> <br/>
<span class="text-transparent bg-clip-text bg-gold-gradient text-glow-gold">Grand Jackpot</span>
</h2>
<p class="text-slate-300 font-medium">Compete live with 10k+ players. Top prize: Latest Tech Gadgets!</p>
</div>
<div class="flex flex-col items-center gap-4 bg-black/20 backdrop-blur-sm p-6 rounded-2xl border border-white/10">
<p class="text-xs font-bold uppercase tracking-widest text-primary-glow mb-1">Starts In</p>
<div class="flex gap-3 text-white">
<div class="flex flex-col items-center">
<span class="text-3xl font-mono font-bold">02</span>
<span class="text-[10px] uppercase text-slate-500">Hrs</span>
</div>
<span class="text-2xl font-bold text-slate-600">:</span>
<div class="flex flex-col items-center">
<span class="text-3xl font-mono font-bold">14</span>
<span class="text-[10px] uppercase text-slate-500">Min</span>
</div>
<span class="text-2xl font-bold text-slate-600">:</span>
<div class="flex flex-col items-center">
<span class="text-3xl font-mono font-bold text-accent-pink">59</span>
<span class="text-[10px] uppercase text-slate-500">Sec</span>
</div>
</div>
<button class="w-full mt-2 rounded-xl bg-gradient-to-r from-primary to-accent-pink px-6 py-3 font-bold text-white shadow-lg shadow-primary/25 transition-all hover:scale-105 hover:shadow-primary/40">
Join Now
</button>
</div>
</div>
</section>
<section>
<div class="flex items-center justify-between mb-6">
<h3 class="text-xl font-bold text-white flex items-center gap-2">
<span class="material-symbols-outlined text-secondary">bolt</span>
Live Categories
</h3>
<a class="text-sm font-medium text-slate-400 hover:text-white transition-colors" href="#">View All</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-5">
<div class="group relative overflow-hidden rounded-2xl bg-surface-highlight border border-white/5 cursor-pointer transition-all hover:-translate-y-1 hover:border-primary/50">
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 z-10"></div>
<img alt="Science" class="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-110 opacity-60" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAePx8q7K6SusQjspoLviJht5pxCyL63hV0z5L6PL8oS2iHOcJj_5CUzbu7CW0qQbiyhyqYTgrG1qPbpeeUPTAe3M7hMCZzP9g6EvUTwlJoc1ij3b24u4zOY86KIVooIQsNDZl-yjGlJHUSS464Db7NIBoMOe8dWeO9ucb7hawh3Li5NqMPBnM0F9GDNnuHgPVXSX9CBmqsdixaibQkjEWMhbpJCNewx4iTYaf_QOb-BhMVSIOqTgZtrTJ_wY0Hi2GiVTjHgDp63pcD"/>
<div class="relative z-20 flex flex-col justify-end h-48 p-5">
<div class="mb-auto flex justify-between items-start">
<span class="px-2 py-1 rounded bg-blue-500/20 text-blue-300 text-[10px] font-bold uppercase backdrop-blur-md border border-blue-500/30">Science</span>
<div class="flex items-center gap-1 text-xs font-medium text-white/80 bg-black/40 px-2 py-1 rounded-full">
<span class="material-symbols-outlined text-[14px] text-green-400">circle</span>
<span class="text-[10px]">1.2k Live</span>
</div>
</div>
<h4 class="text-lg font-bold text-white mb-1">Cosmic Mysteries</h4>
<p class="text-xs text-slate-300 line-clamp-2">Test your knowledge of the universe, black holes & planets.</p>
</div>
</div>
<div class="group relative overflow-hidden rounded-2xl bg-surface-highlight border border-white/5 cursor-pointer transition-all hover:-translate-y-1 hover:border-secondary/50">
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 z-10"></div>
<img alt="Sports" class="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-110 opacity-60" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBsa6Z7Q9tgsN_wf6XagSTUivNHxSLgnOBE842Ml_NClCYYPb_ru2JU2pHKb87gF7DUXFmxisgI7TUZJBUO8MRpZLyIV76IfgXptFHHheUvbGbXnV7U7b0QKaSuX9tTveZZKrzXEzPNzUE9cb9WyqhAUG1WdJ4TwhVc7_r9QsIOuOLNsg7pwUeqKTPdKi7-_tXLm-saa4BAGRLRWW94bu3pYYf8nQL_qhnmyWY7xwGC7xSPbGWm5TaCuznbqDbrNq_-3eKtrKmrzUCH"/>
<div class="relative z-20 flex flex-col justify-end h-48 p-5">
<div class="mb-auto flex justify-between items-start">
<span class="px-2 py-1 rounded bg-orange-500/20 text-orange-300 text-[10px] font-bold uppercase backdrop-blur-md border border-orange-500/30">Sports</span>
<div class="flex items-center gap-1 text-xs font-medium text-white/80 bg-black/40 px-2 py-1 rounded-full">
<span class="material-symbols-outlined text-[14px] text-green-400">circle</span>
<span class="text-[10px]">3.4k Live</span>
</div>
</div>
<h4 class="text-lg font-bold text-white mb-1">Premier League</h4>
<p class="text-xs text-slate-300 line-clamp-2">Who scored the most goals? Ultimate football trivia.</p>
</div>
</div>
<div class="group relative overflow-hidden rounded-2xl bg-surface-highlight border border-white/5 cursor-pointer transition-all hover:-translate-y-1 hover:border-accent-pink/50">
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/80 z-10"></div>
<img alt="Pop Culture" class="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-110 opacity-60" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCTDFZ6owiPpfE6PhooilFxqPfHT49CCXtFvONPWi2iQAifOhqDEPJqEkmUP3IWVEeGyqiC32DTmcZz1YM4bAsLrsy4WVcCXqaLEjIdB5xmI3AIbqNjZHZL_alY40oIltFFUPoU87n_D8WMimO10ULnJTVwndULO408CSV_ybHGankBDyh5SRZb1iZdqX3CXC934ZrNX7K_k7YmOq-Yh0Yf6ljnJbKJn6vUy1gPiif9MWS9pDI-jA1Z0ICgqkulKkCTyZ_GGvFfAJEk"/>
<div class="relative z-20 flex flex-col justify-end h-48 p-5">
<div class="mb-auto flex justify-between items-start">
<span class="px-2 py-1 rounded bg-pink-500/20 text-pink-300 text-[10px] font-bold uppercase backdrop-blur-md border border-pink-500/30">Pop Culture</span>
<div class="flex items-center gap-1 text-xs font-medium text-white/80 bg-black/40 px-2 py-1 rounded-full">
<span class="material-symbols-outlined text-[14px] text-green-400">circle</span>
<span class="text-[10px]">850 Live</span>
</div>
</div>
<h4 class="text-lg font-bold text-white mb-1">Movies & Music</h4>
<p class="text-xs text-slate-300 line-clamp-2">From 90s hits to latest blockbusters. Can you guess?</p>
</div>
</div>
</div>
</section>
<section class="bg-surface-highlight/50 rounded-2xl p-6 border border-white/5">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold text-white">Your Recent Quests</h3>
<button class="text-xs font-bold text-primary hover:text-primary-glow">View History</button>
</div>
<div class="space-y-3">
<div class="flex items-center justify-between p-3 rounded-xl hover:bg-white/5 transition-colors cursor-pointer group">
<div class="flex items-center gap-4">
<div class="h-10 w-10 rounded-lg bg-indigo-500/20 flex items-center justify-center text-indigo-400 group-hover:bg-indigo-500 group-hover:text-white transition-colors">
<span class="material-symbols-outlined">history_edu</span>
</div>
<div>
<h4 class="text-sm font-bold text-white">History Buffs Daily</h4>
<p class="text-xs text-slate-400">Rank #42 • Score 850</p>
</div>
</div>
<div class="text-right">
<span class="block text-sm font-bold text-secondary">+120 XP</span>
<span class="text-[10px] text-slate-500">2 hours ago</span>
</div>
</div>
<div class="flex items-center justify-between p-3 rounded-xl hover:bg-white/5 transition-colors cursor-pointer group">
<div class="flex items-center gap-4">
<div class="h-10 w-10 rounded-lg bg-emerald-500/20 flex items-center justify-center text-emerald-400 group-hover:bg-emerald-500 group-hover:text-white transition-colors">
<span class="material-symbols-outlined">eco</span>
</div>
<div>
<h4 class="text-sm font-bold text-white">Nature Walk Trivia</h4>
<p class="text-xs text-slate-400">Rank #12 • Score 920</p>
</div>
</div>
<div class="text-right">
<span class="block text-sm font-bold text-secondary">+200 XP</span>
<span class="text-[10px] text-slate-500">Yesterday</span>
</div>
</div>
</div>
</section>
</div>
<div class="w-full lg:w-80 flex flex-col gap-6">
<div class="rounded-2xl bg-gradient-to-br from-surface-highlight to-surface-dark border border-surface-highlight p-6 relative overflow-hidden">
<div class="absolute top-0 right-0 p-4 opacity-10">
<span class="material-symbols-outlined text-9xl text-orange-500">local_fire_department</span>
</div>
<h3 class="text-lg font-bold text-white mb-2 relative z-10">Daily Streak</h3>
<div class="flex items-end gap-2 mb-4 relative z-10">
<span class="text-4xl font-black text-white">12</span>
<span class="text-sm font-medium text-orange-400 mb-1.5">Days on fire! 🔥</span>
</div>
<div class="flex items-end gap-2 h-16 w-full mb-2 relative z-10">
<div class="w-1/7 bg-surface-highlight rounded-t-lg h-[40%] flex-1"></div>
<div class="w-1/7 bg-surface-highlight rounded-t-lg h-[60%] flex-1"></div>
<div class="w-1/7 bg-surface-highlight rounded-t-lg h-[30%] flex-1"></div>
<div class="w-1/7 bg-surface-highlight rounded-t-lg h-[70%] flex-1"></div>
<div class="w-1/7 bg-surface-highlight rounded-t-lg h-[50%] flex-1"></div>
<div class="w-1/7 bg-orange-500/20 rounded-t-lg h-[80%] flex-1 relative overflow-hidden">
<div class="absolute bottom-0 left-0 w-full h-full bg-gradient-to-t from-orange-600 to-orange-400"></div>
</div>
<div class="w-1/7 bg-surface-highlight/30 rounded-t-lg h-[20%] flex-1 border border-dashed border-slate-600"></div>
</div>
<div class="flex justify-between text-[10px] text-slate-500 uppercase font-bold relative z-10">
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span class="text-orange-400">Sat</span><span>Sun</span>
</div>
<p class="mt-4 text-xs text-slate-400 relative z-10">Keep playing tomorrow to earn a <span class="text-white font-bold">2x Booster!</span></p>
</div>
<div class="rounded-2xl bg-surface-highlight p-6 border border-white/5 flex-1 flex flex-col">
<div class="flex items-center justify-between mb-5">
<h3 class="text-lg font-bold text-white">Top Rivals</h3>
<button class="p-1 rounded hover:bg-white/10 text-slate-400 transition-colors">
<span class="material-symbols-outlined text-[18px]">more_horiz</span>
</button>
</div>
<div class="flex flex-col gap-4 overflow-y-auto flex-1 pr-1">
<div class="flex items-center gap-3">
<div class="relative">
<div class="h-10 w-10 rounded-full overflow-hidden border-2 border-secondary">
<img class="h-full w-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAspyNd1K0WlTL9T2hBBlxZ_V1PLtG9Bl1gn7jESEVPOzg5iAZZR9_tBf2nY89WyNBbYoqNnr7wgL97jmY0CwSmQxIRyitYqI13_YqsHvv3-cVzAXJbZTpJ7YG9VH5jtMJDh0kzmqdbqJDJvACnpl2qDhQiNwaaeuyCuf6GAJjQB109IkdWrh3c_XcfSrD4XHb5FWGPFhWqIV2TCJxFd1g_8KsisFsTd4S55IyvuQWMSPv42uFB7B3eH8BvDB71HoZYLy23kFifLdWl"/>
</div>
<div class="absolute -bottom-1 -right-1 h-5 w-5 bg-secondary rounded-full flex items-center justify-center text-[10px] font-bold text-black border-2 border-surface-highlight">1</div>
</div>
<div class="flex-1">
<h4 class="text-sm font-bold text-white">Sarah Jenkins</h4>
<p class="text-[10px] text-slate-400">Pro Gamer</p>
</div>
<div class="text-right">
<span class="text-sm font-bold text-secondary">24k</span>
</div>
</div>
<div class="flex items-center gap-3">
<div class="relative">
<div class="h-10 w-10 rounded-full overflow-hidden border-2 border-slate-600">
<img class="h-full w-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB6RuLCmWb95hgO5Is3hiMS0_FVI_JLOq3mJAUXYg7uKBbIPBTmaoF9WxMBSqqQt1cHoRoJZvrY_BVIZIMURAhdyK3rtci_Be7NXoI67-fYV-BXCAZbz8OChqnwnixiAWA6hhV9SaY_wiFaU-hEmkJ5Vrk7ve6y2qCC-ldXdD66bX0P0EMbeTgrg1rHVDexU_orguvgpPp2saemcwl9E3GDtoVAskruFuVhKbnSbqsG1soXQW6rubBXx5qEJx9b1NXaOJA9AvrF3voZ"/>
</div>
<div class="absolute -bottom-1 -right-1 h-5 w-5 bg-slate-600 rounded-full flex items-center justify-center text-[10px] font-bold text-white border-2 border-surface-highlight">2</div>
</div>
<div class="flex-1">
<h4 class="text-sm font-bold text-white">Michael Chen</h4>
<p class="text-[10px] text-slate-400">Elite Squad</p>
</div>
<div class="text-right">
<span class="text-sm font-bold text-slate-300">21k</span>
</div>
</div>
<div class="flex items-center gap-3">
<div class="relative">
<div class="h-10 w-10 rounded-full overflow-hidden border-2 border-slate-700">
<img class="h-full w-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB4BvJeSkFEj5nLJuhlyXRzb7wTEAaLOnCtRiqE94WD36FRVEKBCDFLyVWOIPVSt3Ev85PNh-Y8jNk-6RgPQjLsE4QFzz0744_biTKt5smk1tSDtuhHxj9OJJqeEaJAn_Pxv5de_ipngAatw1o89PbZqS3p-raYQi4mzkZp1ubYCALYdTl1MrZ5o7wHUuujeOzm_dSnAGJ6zNJV-YUoox2G7THWRLAEsN49znJscTyiWCbUAJLt0KpeneJvqebNPT57eYO55h38JhJX"/>
</div>
<div class="absolute -bottom-1 -right-1 h-5 w-5 bg-slate-700 rounded-full flex items-center justify-center text-[10px] font-bold text-white border-2 border-surface-highlight">3</div>
</div>
<div class="flex-1">
<h4 class="text-sm font-bold text-white">Jessica Wong</h4>
<p class="text-[10px] text-slate-400">Rookie</p>
</div>
<div class="text-right">
<span class="text-sm font-bold text-slate-300">18k</span>
</div>
</div>
<div class="mt-2 pt-4 border-t border-white/5 flex items-center gap-3">
<div class="relative">
<div class="h-10 w-10 rounded-full overflow-hidden border-2 border-primary/50">
<img class="h-full w-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzViL4lc0jczPZTmPDaDclgDRrxY-CoEIhF3LrBitMVCMLnouJJA--yIsKtsNPGtyE4LuMlV4PivDdBDmhCWNkAPTwNpqZHpr1VrBXiZOIQLMV0tqcbN5rlhT8PNPhuitdvbjjJ__KSKmqFbL6C2lgx2_ML9AOeX7zoh0HyaInm8BK6ktedzykYbw63mLopcHpNBH3DhZY7GvRiCGp3eF8zx4jWMXr9ac6huaPlWFvpnlBfg6kuKr1_BJAeuC6YEIKGKuRym9DR1lN"/>
</div>
<div class="absolute -bottom-1 -right-1 h-5 w-5 bg-primary rounded-full flex items-center justify-center text-[10px] font-bold text-white border-2 border-surface-highlight">12</div>
</div>
<div class="flex-1">
<h4 class="text-sm font-bold text-white">You</h4>
<p class="text-[10px] text-slate-400">Level 12</p>
</div>
<div class="text-right">
<span class="text-sm font-bold text-primary-glow">8.5k</span>
</div>
</div>
</div>
<button class="w-full py-3 rounded-xl bg-surface-dark border border-white/5 text-sm font-bold text-slate-300 hover:text-white hover:bg-surface-dark/80 transition-all">
View Full Leaderboard
</button>
</div>
</div>
</div>
</main>
</div>
</body></html>