<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Platform Stats - Dark Mode V3</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=Space+Grotesk: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"/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- Tailwind Config -->
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#8c25f4",
"primary-glow": "#a855f7",
"secondary": "#00f0ff", // Electric blue
"background-light": "#f7f5f8",
"background-dark": "#0f0f12",
"surface-dark": "#1a1a20",
"surface-darker": "#141418",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"],
"sans": ["Space Grotesk", "sans-serif"]
},
borderRadius: {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"2xl": "1rem",
"full": "9999px"
},
backgroundImage: {
'grid-pattern': "linear-gradient(to right, #1f1f26 1px, transparent 1px), linear-gradient(to bottom, #1f1f26 1px, transparent 1px)",
}
},
},
}
</script>
<style>
body {
font-family: "Space Grotesk", sans-serif;
}
.text-glow-primary {
text-shadow: 0 0 20px rgba(140, 37, 244, 0.5);
}
.text-glow-secondary {
text-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}
.card-glass {
background: linear-gradient(145deg, rgba(26,26,32,0.9) 0%, rgba(20,20,24,0.95) 100%);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
.neon-border {
box-shadow: 0 0 5px rgba(0, 240, 255, 0.2), inset 0 0 5px rgba(0, 240, 255, 0.1);
}
.grid-bg {
background-size: 40px 40px;
mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}
/* Geometric Shape Animations (simulated via CSS) */
.shape-float {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(5deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen flex flex-col font-display overflow-x-hidden">
<!-- Navbar -->
<header class="sticky top-0 z-50 w-full border-b border-[#302839] bg-surface-dark/95 backdrop-blur-md px-6 py-4 lg:px-12">
<div class="mx-auto flex max-w-7xl items-center justify-between">
<div class="flex items-center gap-3">
<div class="flex size-10 items-center justify-center rounded-lg bg-primary/20 text-primary">
<span class="material-symbols-outlined text-3xl">sports_esports</span>
</div>
<h2 class="text-xl font-bold tracking-tight text-white">QuizMaster Pro</h2>
</div>
<nav class="hidden lg:flex items-center gap-8">
<a class="text-sm font-medium text-slate-400 hover:text-primary transition-colors" href="#">Tournaments</a>
<a class="text-sm font-medium text-slate-400 hover:text-primary transition-colors" href="#">Leaderboard</a>
<a class="text-sm font-medium text-white" href="#">Stats</a>
<a class="text-sm font-medium text-slate-400 hover:text-primary transition-colors" href="#">Community</a>
</nav>
<div class="flex items-center gap-3">
<button class="hidden lg:flex h-10 items-center justify-center rounded-lg bg-surface-darker border border-slate-700 px-5 text-sm font-bold text-white transition hover:bg-slate-800">
Log In
</button>
<button class="flex h-10 items-center justify-center rounded-lg bg-primary px-5 text-sm font-bold text-white shadow-[0_0_15px_rgba(140,37,244,0.4)] transition hover:bg-primary/90 hover:shadow-[0_0_25px_rgba(140,37,244,0.6)]">
Sign Up
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="relative flex-1">
<!-- Background Decor -->
<div class="absolute inset-0 z-0 pointer-events-none overflow-hidden">
<div class="absolute top-0 w-full h-full bg-grid-pattern opacity-[0.07] grid-bg"></div>
<!-- Glowing Orbs -->
<div class="absolute top-20 left-10 w-96 h-96 bg-primary/10 rounded-full blur-[100px]"></div>
<div class="absolute bottom-20 right-10 w-80 h-80 bg-secondary/10 rounded-full blur-[80px]"></div>
<!-- Geometric 3D Elements (Visual CSS Shapes) -->
<div class="absolute top-32 right-[10%] opacity-20 shape-float" style="animation-delay: 0s;">
<svg fill="none" height="100" viewbox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg">
<rect height="80" stroke="#00f0ff" stroke-width="2" transform="rotate(15 50 50)" width="80" x="10" y="10"></rect>
<rect height="80" stroke="#8c25f4" stroke-width="2" transform="rotate(45 50 50)" width="80" x="10" y="10"></rect>
</svg>
</div>
<div class="absolute bottom-40 left-[5%] opacity-10 shape-float" style="animation-delay: 2s;">
<svg fill="none" height="120" viewbox="0 0 100 100" width="120" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="#8c25f4" stroke-width="1"></circle>
<circle cx="50" cy="50" r="25" stroke="#00f0ff" stroke-width="1"></circle>
</svg>
</div>
</div>
<div class="relative z-10 mx-auto max-w-7xl px-4 lg:px-8 py-10 lg:py-16">
<!-- Hero Header -->
<div class="mb-12 text-center lg:text-left">
<div class="inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-3 py-1 text-xs font-bold text-primary mb-4">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
</span>
LIVE DATA
</div>
<h1 class="text-4xl lg:text-6xl font-black text-white leading-tight tracking-tight mb-4">
Leveling Up: <br/><span class="text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-400">Our Community by the Numbers</span>
</h1>
<p class="text-slate-400 max-w-2xl text-lg lg:text-xl font-light">
Join the fastest growing quiz platform on the web. See the stats that prove we are the ultimate destination for trivia masters.
</p>
</div>
<!-- KPI Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
<!-- Card 1 -->
<div class="group relative card-glass rounded-2xl p-8 overflow-hidden transition-all hover:-translate-y-1 hover:shadow-lg hover:shadow-primary/10">
<div class="absolute top-0 right-0 p-6 opacity-10 transition-opacity group-hover:opacity-20">
<span class="material-symbols-outlined text-6xl text-primary">groups</span>
</div>
<div class="relative z-10">
<p class="text-sm font-semibold tracking-wider text-slate-400 uppercase mb-2">Total Active Players</p>
<h3 class="text-5xl lg:text-6xl font-bold text-white text-glow-primary tracking-tighter">2.4M+</h3>
<div class="mt-4 flex items-center gap-2">
<span class="flex items-center text-secondary text-sm font-bold bg-secondary/10 px-2 py-1 rounded">
<span class="material-symbols-outlined text-base mr-1">trending_up</span> +12%
</span>
<span class="text-xs text-slate-500">vs last month</span>
</div>
</div>
<div class="absolute bottom-0 left-0 h-1 w-full bg-gradient-to-r from-primary to-transparent"></div>
</div>
<!-- Card 2 -->
<div class="group relative card-glass rounded-2xl p-8 overflow-hidden transition-all hover:-translate-y-1 hover:shadow-lg hover:shadow-secondary/10">
<div class="absolute top-0 right-0 p-6 opacity-10 transition-opacity group-hover:opacity-20">
<span class="material-symbols-outlined text-6xl text-secondary">quiz</span>
</div>
<div class="relative z-10">
<p class="text-sm font-semibold tracking-wider text-slate-400 uppercase mb-2">Quizzes Hosted</p>
<h3 class="text-5xl lg:text-6xl font-bold text-white text-glow-secondary tracking-tighter">850k</h3>
<div class="mt-4 flex items-center gap-2">
<span class="flex items-center text-secondary text-sm font-bold bg-secondary/10 px-2 py-1 rounded">
<span class="material-symbols-outlined text-base mr-1">trending_up</span> +8%
</span>
<span class="text-xs text-slate-500">vs last month</span>
</div>
</div>
<div class="absolute bottom-0 left-0 h-1 w-full bg-gradient-to-r from-secondary to-transparent"></div>
</div>
<!-- Card 3 -->
<div class="group relative card-glass rounded-2xl p-8 overflow-hidden transition-all hover:-translate-y-1 hover:shadow-lg hover:shadow-primary/10">
<div class="absolute top-0 right-0 p-6 opacity-10 transition-opacity group-hover:opacity-20">
<span class="material-symbols-outlined text-6xl text-primary">emoji_events</span>
</div>
<div class="relative z-10">
<p class="text-sm font-semibold tracking-wider text-slate-400 uppercase mb-2">Prizes Awarded</p>
<h3 class="text-5xl lg:text-6xl font-bold text-white text-glow-primary tracking-tighter">$1.2M</h3>
<div class="mt-4 flex items-center gap-2">
<span class="flex items-center text-secondary text-sm font-bold bg-secondary/10 px-2 py-1 rounded">
<span class="material-symbols-outlined text-base mr-1">trending_up</span> +15%
</span>
<span class="text-xs text-slate-500">vs last month</span>
</div>
</div>
<div class="absolute bottom-0 left-0 h-1 w-full bg-gradient-to-r from-primary to-transparent"></div>
</div>
</div>
<!-- Main Chart Section -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-12">
<!-- Large Chart -->
<div class="lg:col-span-2 card-glass rounded-2xl p-6 lg:p-8 relative">
<div class="flex flex-col sm:flex-row sm:items-center justify-between mb-8 gap-4">
<div>
<h3 class="text-xl font-bold text-white">Player Base Growth</h3>
<p class="text-sm text-slate-400">New user acquisitions over the last 30 days</p>
</div>
<div class="flex gap-2">
<button class="px-3 py-1.5 rounded-lg bg-surface-darker border border-slate-700 text-xs font-medium text-slate-300 hover:text-white transition">7D</button>
<button class="px-3 py-1.5 rounded-lg bg-primary/20 border border-primary/50 text-xs font-medium text-primary hover:text-white transition">30D</button>
<button class="px-3 py-1.5 rounded-lg bg-surface-darker border border-slate-700 text-xs font-medium text-slate-300 hover:text-white transition">90D</button>
</div>
</div>
<!-- SVG Chart -->
<div class="w-full h-[300px] relative">
<!-- Grid Lines -->
<div class="absolute inset-0 flex flex-col justify-between text-xs text-slate-600 pointer-events-none">
<div class="border-b border-dashed border-slate-800 w-full h-0 flex items-center"></div>
<div class="border-b border-dashed border-slate-800 w-full h-0 flex items-center"></div>
<div class="border-b border-dashed border-slate-800 w-full h-0 flex items-center"></div>
<div class="border-b border-dashed border-slate-800 w-full h-0 flex items-center"></div>
<div class="border-b border-slate-700 w-full h-0 flex items-center"></div>
</div>
<svg class="absolute inset-0 w-full h-full overflow-visible" preserveaspectratio="none" viewbox="0 0 100 100">
<defs>
<lineargradient id="gradientArea" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#8c25f4" stop-opacity="0.4"></stop>
<stop offset="100%" stop-color="#8c25f4" stop-opacity="0"></stop>
</lineargradient>
</defs>
<!-- Fill -->
<path d="M0,100 L0,80 C10,75 20,85 30,60 C40,45 50,65 60,40 C70,30 80,45 90,20 L100,10 L100,100 Z" fill="url(#gradientArea)"></path>
<!-- Line -->
<path class="drop-shadow-[0_0_10px_rgba(140,37,244,0.8)]" d="M0,80 C10,75 20,85 30,60 C40,45 50,65 60,40 C70,30 80,45 90,20 L100,10" fill="none" stroke="#8c25f4" stroke-linecap="round" stroke-width="2" vector-effect="non-scaling-stroke"></path>
<!-- Points -->
<circle cx="30" cy="60" fill="#1a1a20" r="3" stroke="#00f0ff" stroke-width="2" vector-effect="non-scaling-stroke"></circle>
<circle cx="60" cy="40" fill="#1a1a20" r="3" stroke="#00f0ff" stroke-width="2" vector-effect="non-scaling-stroke"></circle>
<circle cx="90" cy="20" fill="#1a1a20" r="3" stroke="#00f0ff" stroke-width="2" vector-effect="non-scaling-stroke"></circle>
</svg>
</div>
<div class="flex justify-between mt-4 text-xs text-slate-500 font-medium font-mono uppercase">
<span>Week 1</span>
<span>Week 2</span>
<span>Week 3</span>
<span>Week 4</span>
</div>
</div>
<!-- Secondary Stats Grid -->
<div class="flex flex-col gap-6">
<!-- Stat Mini Card 1 -->
<div class="card-glass rounded-xl p-5 flex-1 flex flex-col justify-center border-l-4 border-l-secondary">
<div class="flex items-center justify-between mb-2">
<span class="text-sm text-slate-400 font-medium">Daily Active Users</span>
<span class="material-symbols-outlined text-secondary text-lg">person_add</span>
</div>
<div class="flex items-end gap-2">
<span class="text-2xl font-bold text-white">45,000</span>
<span class="text-xs text-secondary mb-1">↑ High Traffic</span>
</div>
</div>
<!-- Stat Mini Card 2 -->
<div class="card-glass rounded-xl p-5 flex-1 flex flex-col justify-center border-l-4 border-l-primary">
<div class="flex items-center justify-between mb-2">
<span class="text-sm text-slate-400 font-medium">Fastest Completion</span>
<span class="material-symbols-outlined text-primary text-lg">timer</span>
</div>
<div class="flex items-end gap-2">
<span class="text-2xl font-bold text-white">12s</span>
<span class="text-xs text-primary mb-1">New Record!</span>
</div>
</div>
<!-- Stat Mini Card 3 -->
<div class="card-glass rounded-xl p-5 flex-1 flex flex-col justify-center border-l-4 border-l-purple-400">
<div class="flex items-center justify-between mb-2">
<span class="text-sm text-slate-400 font-medium">Top Category</span>
<span class="material-symbols-outlined text-purple-400 text-lg">star</span>
</div>
<div class="flex items-end gap-2">
<span class="text-xl font-bold text-white truncate">Pop Culture</span>
<span class="text-xs text-purple-400 mb-1">32% of plays</span>
</div>
</div>
</div>
</div>
<!-- Bottom CTA -->
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-r from-primary to-[#5b21b6] p-8 lg:p-12 text-center shadow-2xl">
<!-- Abstract BG Pattern -->
<div class="absolute inset-0 opacity-20" style="background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 20px 20px;"></div>
<div class="relative z-10 flex flex-col items-center gap-6">
<h2 class="text-3xl font-black text-white tracking-tight lg:text-4xl">
Ready to Join the Ranks?
</h2>
<p class="max-w-xl text-purple-100 text-lg">
Compete against millions of players and climb the global leaderboard. Your journey to becoming a Quiz Master starts now.
</p>
<div class="flex flex-wrap justify-center gap-4">
<button class="flex items-center justify-center rounded-lg bg-white px-8 py-3 text-base font-bold text-primary transition hover:bg-slate-100 hover:shadow-xl hover:shadow-white/20">
Join Leaderboard
</button>
<button class="flex items-center justify-center rounded-lg border border-purple-300 bg-transparent px-8 py-3 text-base font-bold text-white transition hover:bg-white/10">
View All Stats
</button>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="border-t border-[#302839] bg-surface-darker py-8 text-center text-slate-500 text-sm">
<p>© 2024 QuizMaster Pro. All rights reserved.</p>
</footer>
</body></html>