<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Master Admin Dashboard | Quiz Portal</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&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": "#5b13ec",
"background-light": "#f6f6f8",
"background-dark": "#0a0a0c",
"card-dark": "#161022",
"accent-neon": "#0bda6f"
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
background-color: #0a0a0c;
}
.sidebar-glow {
box-shadow: 0 0 15px rgba(91, 19, 236, 0.3);
}
.neon-border {
border: 1px solid rgba(91, 19, 236, 0.2);
}
.neon-border-active {
border: 1px solid #5b13ec;
box-shadow: 0 0 10px rgba(91, 19, 236, 0.2);
}
</style>
</head>
<body class="text-slate-100 antialiased h-screen flex overflow-hidden">
<!-- Sidebar Navigation -->
<aside class="w-64 bg-card-dark border-r border-white/5 flex flex-col shrink-0">
<div class="p-6 flex items-center gap-3">
<div class="size-10 bg-primary rounded-lg flex items-center justify-center sidebar-glow">
<span class="material-symbols-outlined text-white text-2xl">rocket_launch</span>
</div>
<div class="flex flex-col">
<span class="text-white font-bold tracking-tight">QUIZ MASTER</span>
<span class="text-xs text-slate-500 uppercase tracking-widest">Admin Hub</span>
</div>
</div>
<nav class="flex-1 px-4 py-2 space-y-1">
<div class="group flex items-center gap-3 px-3 py-3 rounded-lg bg-primary/10 text-primary cursor-pointer border border-primary/20">
<span class="material-symbols-outlined fill-[1]">dashboard</span>
<span class="text-sm font-medium">Dashboard</span>
</div>
<div class="group flex items-center gap-3 px-3 py-3 rounded-lg text-slate-400 hover:bg-white/5 hover:text-white transition-all cursor-pointer">
<span class="material-symbols-outlined">quiz</span>
<span class="text-sm font-medium">Quiz Manager</span>
</div>
<div class="group flex items-center gap-3 px-3 py-3 rounded-lg text-slate-400 hover:bg-white/5 hover:text-white transition-all cursor-pointer">
<span class="material-symbols-outlined">group</span>
<span class="text-sm font-medium">User Management</span>
</div>
<div class="group flex items-center gap-3 px-3 py-3 rounded-lg text-slate-400 hover:bg-white/5 hover:text-white transition-all cursor-pointer">
<span class="material-symbols-outlined">payments</span>
<span class="text-sm font-medium">Payouts</span>
</div>
<div class="group flex items-center gap-3 px-3 py-3 rounded-lg text-slate-400 hover:bg-white/5 hover:text-white transition-all cursor-pointer">
<span class="material-symbols-outlined">analytics</span>
<span class="text-sm font-medium">Deep Analytics</span>
</div>
<div class="pt-8 pb-4 text-[10px] font-bold text-slate-600 uppercase tracking-[2px] px-3">System</div>
<div class="group flex items-center gap-3 px-3 py-3 rounded-lg text-slate-400 hover:bg-white/5 hover:text-white transition-all cursor-pointer">
<span class="material-symbols-outlined">settings</span>
<span class="text-sm font-medium">Configuration</span>
</div>
<div class="group flex items-center gap-3 px-3 py-3 rounded-lg text-slate-400 hover:bg-white/5 hover:text-white transition-all cursor-pointer">
<span class="material-symbols-outlined">history</span>
<span class="text-sm font-medium">System Logs</span>
</div>
</nav>
<div class="p-4 border-t border-white/5">
<div class="flex items-center gap-3 p-3 bg-white/5 rounded-xl">
<img class="size-10 rounded-full border border-primary/30" data-alt="Admin user avatar headshot" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB6luYAdC5urNI9z4-8i3DzfunYraaOE-77RW7vj4PF5MtJPWmsSaAW9xyr9IDpLZo4UqWYNHzr_fS49oQp26E96kIRBW2H9DmMPpiymuuogArzeBO2-lbl-K38x4gBunXXBVbluzGF974PTNdkweboW2ikhXmP8v9YUNLlEglVa-izzm_K1yoYSIN5Hdi9FnwgDPVRorTBrmzkyRMtJSMtFs5W-dh06oF2O97gTpSJVL2jczMSbomyB69yP42-c4bTwDlLukLqPrVg"/>
<div class="flex flex-col overflow-hidden">
<span class="text-sm font-semibold truncate">Alex Rivera</span>
<span class="text-xs text-slate-500 uppercase tracking-tighter">Super Admin</span>
</div>
<span class="material-symbols-outlined text-slate-500 ml-auto text-sm cursor-pointer hover:text-white">logout</span>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 overflow-y-auto flex flex-col bg-background-dark">
<!-- Header -->
<header class="h-16 border-b border-white/5 flex items-center justify-between px-8 bg-background-dark/80 backdrop-blur-md sticky top-0 z-20">
<div class="flex items-center gap-6">
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-500">search</span>
<input class="bg-white/5 border-none focus:ring-1 focus:ring-primary/50 text-sm rounded-lg pl-10 pr-4 w-80 text-slate-300 placeholder-slate-600 h-10" placeholder="Search data points..." type="text"/>
</div>
<div class="flex items-center gap-2 px-3 py-1 bg-accent-neon/10 rounded-full border border-accent-neon/20">
<span class="size-2 rounded-full bg-accent-neon animate-pulse"></span>
<span class="text-[11px] font-bold text-accent-neon uppercase">System Live</span>
</div>
</div>
<div class="flex items-center gap-4">
<button class="relative p-2 text-slate-400 hover:text-white">
<span class="material-symbols-outlined">notifications</span>
<span class="absolute top-2 right-2 size-2 bg-primary rounded-full border border-background-dark"></span>
</button>
<div class="h-8 w-[1px] bg-white/10 mx-2"></div>
<div class="flex flex-col items-end">
<span class="text-xs text-slate-500 font-medium tracking-wide">SERVER LOAD</span>
<div class="w-24 h-1.5 bg-white/5 rounded-full mt-1 overflow-hidden">
<div class="w-[42%] h-full bg-primary shadow-[0_0_8px_#5b13ec]"></div>
</div>
</div>
</div>
</header>
<!-- Dashboard Grid -->
<div class="p-8 space-y-6">
<!-- Stats Bar -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-card-dark p-6 rounded-xl border border-white/5 flex flex-col gap-1 relative overflow-hidden group hover:border-primary/30 transition-all cursor-pointer">
<div class="absolute -right-4 -top-4 bg-primary/10 size-20 rounded-full blur-2xl group-hover:bg-primary/20 transition-all"></div>
<span class="text-slate-500 text-xs font-bold uppercase tracking-widest">Active Players</span>
<div class="flex items-end gap-3">
<span class="text-3xl font-bold tracking-tight">42,842</span>
<span class="text-accent-neon text-sm font-bold flex items-center mb-1"><span class="material-symbols-outlined text-sm">trending_up</span> 12%</span>
</div>
<div class="mt-4 h-12 w-full flex items-end gap-1">
<div class="w-full bg-primary/20 h-[30%] rounded-sm"></div>
<div class="w-full bg-primary/20 h-[50%] rounded-sm"></div>
<div class="w-full bg-primary/20 h-[45%] rounded-sm"></div>
<div class="w-full bg-primary h-[80%] rounded-sm"></div>
<div class="w-full bg-primary h-[60%] rounded-sm"></div>
<div class="w-full bg-primary h-[90%] rounded-sm"></div>
</div>
</div>
<div class="bg-card-dark p-6 rounded-xl border border-white/5 flex flex-col gap-1 relative overflow-hidden group hover:border-primary/30 transition-all cursor-pointer">
<span class="text-slate-500 text-xs font-bold uppercase tracking-widest">Live Quizzes</span>
<div class="flex items-end gap-3">
<span class="text-3xl font-bold tracking-tight">156</span>
<span class="text-accent-neon text-sm font-bold flex items-center mb-1"><span class="material-symbols-outlined text-sm">trending_up</span> 5%</span>
</div>
<div class="mt-4 flex items-center gap-2">
<div class="flex -space-x-2">
<img class="size-8 rounded-full border-2 border-card-dark" data-alt="Quiz thumbnail icon" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBz90xAdZHH2R3DmPN6byEve-2vjy_niRR8wUApkZzafvNkNh9MRwLAjM69Tva_VTXyO2q_RkGpZXospKQSkJMaFiGsXKUVMAqstuM16nLeLVull0BqWuBiUNd0jCWl35LAwzAgUr0clK-RntE8f57hOOL5LYKjzq0PQeorecidXMUNIWZX86yd4T1SoYmKE65v95cnRTizUB0QkZny-Ng88aGZ8JzDbozUDeCJVEcC0KE_lJ9-_Jl_4d4umj4tm09PmNdFhkFtjqKf"/>
<img class="size-8 rounded-full border-2 border-card-dark" data-alt="Quiz thumbnail icon" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAJfNoK7aO4RM2CuPoZxldIJi9qNP7lrKo3RbFpmDg_1dUJblAJudTPPcwaFHgEQGw0QQmr2u6jyNZt6O8aK6-E8uuH4jroRqBJzZCUe8Zhh9KyitF8oDzpCB3PwO_amxdK5_LJzourO_41TopF4Cb91YYCHoiXVCmHLGN_Uv8MXnKIh1EUZmbkbLi_xj12SlRW6-Cry8P00aaPdUYHDm_rQowfs-0P-xUiei9rMoXhmNLNZhMmjhZNfxy0-YjKaVXytfKi9JO5pith"/>
<img class="size-8 rounded-full border-2 border-card-dark" data-alt="Quiz thumbnail icon" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBXMr5Jt0rLjp54544-OrWnt6S_qLCBkhljpFQxYwaih1qfA2Y7ijEvhwedAt1GcsFNQFR9di2V75T7e206LZFALCfmZSVpGo3eVTZW7xdSxz5ax1_YZYWOCTo93i5W4R16j6CbrkJeCvHgIM76_xnqtH1BRJ786NeGpmWk1-xpJYDOEzIn0rnlkDJBHEE7GpyXzuxaPz3xtooIM9Uwl3Uc0vk-O-e5rp6qWxjBze6gJroSz_uOoRTdOux_Yymo1hs6bn8_XGYxZOpQ"/>
</div>
<span class="text-xs text-slate-500 font-medium">+12 rooms starting soon</span>
</div>
</div>
<div class="bg-card-dark p-6 rounded-xl border border-white/5 flex flex-col gap-1 group hover:border-primary/30 transition-all cursor-pointer">
<span class="text-slate-500 text-xs font-bold uppercase tracking-widest">Revenue (24h)</span>
<div class="flex items-end gap-3">
<span class="text-3xl font-bold tracking-tight">$8,240</span>
<span class="text-accent-neon text-sm font-bold flex items-center mb-1"><span class="material-symbols-outlined text-sm">trending_up</span> 18%</span>
</div>
<div class="mt-4 grid grid-cols-7 gap-1 h-12">
<div class="bg-slate-800 rounded-sm self-end h-[20%]"></div>
<div class="bg-slate-800 rounded-sm self-end h-[40%]"></div>
<div class="bg-slate-800 rounded-sm self-end h-[35%]"></div>
<div class="bg-slate-800 rounded-sm self-end h-[70%]"></div>
<div class="bg-slate-800 rounded-sm self-end h-[60%]"></div>
<div class="bg-slate-800 rounded-sm self-end h-[85%]"></div>
<div class="bg-primary rounded-sm self-end h-[95%]"></div>
</div>
</div>
<div class="bg-card-dark p-6 rounded-xl border border-white/5 flex flex-col gap-1 group hover:border-primary/30 transition-all cursor-pointer">
<span class="text-slate-500 text-xs font-bold uppercase tracking-widest">Payout Success</span>
<div class="flex items-end gap-3">
<span class="text-3xl font-bold tracking-tight">99.2%</span>
<span class="text-primary text-sm font-bold flex items-center mb-1">Stable</span>
</div>
<div class="mt-4 h-12 w-full flex items-center">
<div class="w-full h-2 bg-white/5 rounded-full overflow-hidden">
<div class="w-[99.2%] h-full bg-accent-neon shadow-[0_0_8px_#0bda6f]"></div>
</div>
</div>
</div>
</div>
<!-- Central Content: Map & Growth -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Live Monitor Map -->
<div class="lg:col-span-2 bg-card-dark rounded-xl border border-white/5 overflow-hidden flex flex-col">
<div class="p-6 border-b border-white/5 flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary">public</span>
<h3 class="font-bold">Live Quiz Monitor</h3>
</div>
<div class="flex gap-2">
<button class="bg-white/5 p-1.5 rounded hover:bg-white/10 transition-colors">
<span class="material-symbols-outlined text-sm">zoom_in</span>
</button>
<button class="bg-white/5 p-1.5 rounded hover:bg-white/10 transition-colors">
<span class="material-symbols-outlined text-sm">my_location</span>
</button>
</div>
</div>
<div class="flex-1 min-h-[400px] relative bg-slate-900/30">
<div class="absolute inset-0 bg-cover bg-center opacity-30 mix-blend-overlay" data-alt="Abstract global map visualization" data-location="World Map" style="background-image: url('https://placeholder.pics/svg/300')"></div>
<!-- Map Hotspots -->
<div class="absolute top-[30%] left-[25%] group cursor-pointer">
<div class="size-4 bg-primary rounded-full animate-ping absolute opacity-75"></div>
<div class="size-4 bg-primary rounded-full relative sidebar-glow"></div>
<div class="absolute top-full mt-2 left-1/2 -translate-x-1/2 bg-card-dark border border-white/10 px-2 py-1 rounded shadow-2xl opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-10">
<span class="text-[10px] font-bold">NEW YORK: 12.4k LIVE</span>
</div>
</div>
<div class="absolute top-[45%] left-[55%] group cursor-pointer">
<div class="size-3 bg-accent-neon rounded-full animate-ping absolute opacity-75"></div>
<div class="size-3 bg-accent-neon rounded-full relative"></div>
</div>
<div class="absolute top-[65%] left-[75%] group cursor-pointer">
<div class="size-2 bg-primary rounded-full animate-ping absolute opacity-75"></div>
<div class="size-2 bg-primary rounded-full relative"></div>
</div>
<!-- Map Overlay Info -->
<div class="absolute bottom-6 left-6 p-4 bg-background-dark/80 backdrop-blur rounded-lg border border-white/5 max-w-[200px]">
<p class="text-[10px] text-slate-500 uppercase font-bold tracking-widest mb-2">Peak Activity</p>
<div class="space-y-3">
<div class="flex items-center justify-between">
<span class="text-xs">United States</span>
<span class="text-xs font-bold text-accent-neon">84%</span>
</div>
<div class="flex items-center justify-between">
<span class="text-xs">Europe</span>
<span class="text-xs font-bold text-primary">62%</span>
</div>
</div>
</div>
</div>
</div>
<!-- Trending Quizzes Leaderboard -->
<div class="bg-card-dark rounded-xl border border-white/5 flex flex-col">
<div class="p-6 border-b border-white/5">
<h3 class="font-bold flex items-center gap-2">
<span class="material-symbols-outlined text-yellow-500 fill-[1]">trophy</span>
Live Leaderboard
</h3>
</div>
<div class="flex-1 p-4 space-y-4 overflow-y-auto max-h-[400px]">
<!-- Quiz Row -->
<div class="p-4 rounded-lg bg-white/5 border border-white/5 hover:border-primary/50 transition-all cursor-pointer group">
<div class="flex items-start justify-between mb-3">
<div class="flex gap-3">
<div class="size-10 bg-gradient-to-br from-primary to-purple-800 rounded-lg flex items-center justify-center text-white font-bold italic">
IQ
</div>
<div class="flex flex-col">
<span class="text-sm font-bold truncate">Ultra Logic Rush</span>
<span class="text-[10px] text-slate-500 uppercase tracking-tighter">Pro Tournament</span>
</div>
</div>
<span class="text-xs font-bold text-accent-neon">$2.5k Pool</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1 text-[10px] text-slate-400">
<span class="material-symbols-outlined text-xs">person</span>
4,290 playing
</div>
<div class="px-2 py-0.5 rounded-full bg-primary/20 text-primary text-[9px] font-bold uppercase tracking-widest">Round 4/10</div>
</div>
</div>
<!-- Quiz Row -->
<div class="p-4 rounded-lg bg-white/5 border border-white/5 hover:border-primary/50 transition-all cursor-pointer group">
<div class="flex items-start justify-between mb-3">
<div class="flex gap-3">
<div class="size-10 bg-gradient-to-br from-blue-600 to-indigo-800 rounded-lg flex items-center justify-center text-white font-bold italic">
GE
</div>
<div class="flex flex-col">
<span class="text-sm font-bold truncate">Global Explorer</span>
<span class="text-[10px] text-slate-500 uppercase tracking-tighter">Casual Trivia</span>
</div>
</div>
<span class="text-xs font-bold text-slate-400">$500 Pool</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1 text-[10px] text-slate-400">
<span class="material-symbols-outlined text-xs">person</span>
1,120 playing
</div>
<div class="px-2 py-0.5 rounded-full bg-slate-800 text-slate-500 text-[9px] font-bold uppercase tracking-widest">Starting 2m</div>
</div>
</div>
<!-- Quiz Row -->
<div class="p-4 rounded-lg bg-white/5 border border-white/5 hover:border-primary/50 transition-all cursor-pointer group">
<div class="flex items-start justify-between mb-3">
<div class="flex gap-3">
<div class="size-10 bg-gradient-to-br from-orange-500 to-red-600 rounded-lg flex items-center justify-center text-white font-bold italic">
MZ
</div>
<div class="flex flex-col">
<span class="text-sm font-bold truncate">Movie Zenith</span>
<span class="text-[10px] text-slate-500 uppercase tracking-tighter">Blitz Event</span>
</div>
</div>
<span class="text-xs font-bold text-accent-neon">$1k Pool</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1 text-[10px] text-slate-400">
<span class="material-symbols-outlined text-xs">person</span>
842 playing
</div>
<div class="px-2 py-0.5 rounded-full bg-primary/20 text-primary text-[9px] font-bold uppercase tracking-widest">Final Lap</div>
</div>
</div>
</div>
<div class="p-4 border-t border-white/5">
<button class="w-full py-2 bg-white/5 text-xs font-bold rounded hover:bg-white/10 transition-colors uppercase tracking-widest">View All Sessions</button>
</div>
</div>
</div>
<!-- Lower Grid: Growth & Revenue -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- User Growth Chart Container -->
<div class="bg-card-dark rounded-xl border border-white/5 p-6 flex flex-col gap-6">
<div class="flex items-center justify-between">
<div>
<h3 class="font-bold">User Growth Trend</h3>
<p class="text-xs text-slate-500">Last 12 Months activity data</p>
</div>
<select class="bg-white/5 border-none text-[11px] font-bold rounded-lg focus:ring-0 cursor-pointer">
<option>Yearly</option>
<option>Monthly</option>
</select>
</div>
<div class="flex-1 min-h-[220px] flex items-end justify-between gap-4">
<!-- Simulated SVG Line Chart -->
<svg class="w-full h-full min-h-[180px]" preserveaspectratio="none" viewbox="0 0 400 150">
<defs>
<lineargradient id="chartGradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#5b13ec" stop-opacity="0.5"></stop>
<stop offset="100%" stop-color="#5b13ec" stop-opacity="0"></stop>
</lineargradient>
</defs>
<path d="M0 120 C 50 110, 80 140, 100 100 C 130 60, 150 80, 200 50 S 300 10, 400 30" fill="none" stroke="#5b13ec" stroke-linecap="round" stroke-width="4"></path>
<path d="M0 120 C 50 110, 80 140, 100 100 C 130 60, 150 80, 200 50 S 300 10, 400 30 V 150 H 0 Z" fill="url(#chartGradient)"></path>
<!-- Data Points -->
<circle cx="100" cy="100" fill="#5b13ec" r="4" stroke="#0a0a0c" stroke-width="2"></circle>
<circle cx="200" cy="50" fill="#5b13ec" r="4" stroke="#0a0a0c" stroke-width="2"></circle>
</svg>
</div>
<div class="flex justify-between text-[10px] font-bold text-slate-600 uppercase">
<span>Jan</span><span>Mar</span><span>May</span><span>Jul</span><span>Sep</span><span>Nov</span>
</div>
</div>
<!-- Revenue Breakdown -->
<div class="bg-card-dark rounded-xl border border-white/5 p-6 flex flex-col gap-6">
<div class="flex items-center justify-between">
<div>
<h3 class="font-bold">Revenue Breakdown</h3>
<p class="text-xs text-slate-500">Weekly fees vs sponsorships</p>
</div>
<div class="flex gap-4">
<div class="flex items-center gap-2">
<span class="size-2 rounded-full bg-primary"></span>
<span class="text-[10px] font-bold text-slate-500 uppercase">Entry Fees</span>
</div>
<div class="flex items-center gap-2">
<span class="size-2 rounded-full bg-slate-700"></span>
<span class="text-[10px] font-bold text-slate-500 uppercase">Sponsor</span>
</div>
</div>
</div>
<div class="flex-1 flex items-end justify-between px-2 pt-4 min-h-[220px]">
<!-- Bar Chart Simulation -->
<div class="flex flex-col items-center gap-2 w-full h-full justify-end">
<div class="w-8 bg-slate-800 rounded-t h-[40%] relative">
<div class="absolute bottom-0 w-8 bg-primary h-[70%] rounded-t"></div>
</div>
<span class="text-[10px] text-slate-600">Mon</span>
</div>
<div class="flex flex-col items-center gap-2 w-full h-full justify-end">
<div class="w-8 bg-slate-800 rounded-t h-[60%] relative">
<div class="absolute bottom-0 w-8 bg-primary h-[85%] rounded-t"></div>
</div>
<span class="text-[10px] text-slate-600">Tue</span>
</div>
<div class="flex flex-col items-center gap-2 w-full h-full justify-end">
<div class="w-8 bg-slate-800 rounded-t h-[80%] relative">
<div class="absolute bottom-0 w-8 bg-primary h-[60%] rounded-t"></div>
</div>
<span class="text-[10px] text-slate-600">Wed</span>
</div>
<div class="flex flex-col items-center gap-2 w-full h-full justify-end">
<div class="w-8 bg-slate-800 rounded-t h-[55%] relative">
<div class="absolute bottom-0 w-8 bg-primary h-[40%] rounded-t"></div>
</div>
<span class="text-[10px] text-slate-600">Thu</span>
</div>
<div class="flex flex-col items-center gap-2 w-full h-full justify-end">
<div class="w-8 bg-slate-800 rounded-t h-[90%] relative">
<div class="absolute bottom-0 w-8 bg-primary h-[95%] rounded-t shadow-[0_0_10px_#5b13ec]"></div>
</div>
<span class="text-[10px] text-slate-600">Fri</span>
</div>
<div class="flex flex-col items-center gap-2 w-full h-full justify-end">
<div class="w-8 bg-slate-800 rounded-t h-[30%] relative">
<div class="absolute bottom-0 w-8 bg-primary h-[50%] rounded-t"></div>
</div>
<span class="text-[10px] text-slate-600">Sat</span>
</div>
<div class="flex flex-col items-center gap-2 w-full h-full justify-end">
<div class="w-8 bg-slate-800 rounded-t h-[20%] relative">
<div class="absolute bottom-0 w-8 bg-primary h-[40%] rounded-t"></div>
</div>
<span class="text-[10px] text-slate-600">Sun</span>
</div>
</div>
</div>
</div>
</div>
<!-- Footer Info -->
<footer class="p-8 border-t border-white/5 flex items-center justify-between text-slate-600">
<span class="text-xs uppercase font-medium tracking-widest">© 2024 QuizMaster Protocol • V2.4.1</span>
<div class="flex gap-6">
<a class="text-xs hover:text-primary transition-colors uppercase font-bold tracking-tighter" href="#">Support Desk</a>
<a class="text-xs hover:text-primary transition-colors uppercase font-bold tracking-tighter" href="#">API Docs</a>
<a class="text-xs hover:text-primary transition-colors uppercase font-bold tracking-tighter" href="#">Security Audit</a>
</div>
</footer>
</main>
</body></html>