<!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 - Practice Arena</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@500;700;900&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#3B82F6", // Blue-500 - more tactical blue
"primary-hover": "#2563EB", // Blue-600
"accent-cyan": "#22D3EE", // Cyan-400
"accent-purple": "#A855F7", // Purple-500
"background-dark": "#0F172A", // Slate-900 (Deep blue-grey)
"card-dark": "#1E293B", // Slate-800
"card-lighter": "#334155", // Slate-700
"text-light": "#1F2937",
"text-dark": "#F1F5F9", // Slate-100
"text-muted": "#94A3B8", // Slate-400
"glass-dark": "rgba(30, 41, 59, 0.7)",
},
fontFamily: {
sans: ["Inter", "sans-serif"],
display: ["Outfit", "sans-serif"],
},
backgroundImage: {
'grid-pattern': "linear-gradient(to right, #1e293b 1px, transparent 1px), linear-gradient(to bottom, #1e293b 1px, transparent 1px)",
'radial-glow': 'radial-gradient(circle at center, rgba(59, 130, 246, 0.15) 0%, rgba(15, 23, 42, 0) 70%)',
}
},
},
};
</script>
<style>
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0f172a;
}
::-webkit-scrollbar-thumb {
background: #334155;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #475569;
}
</style>
</head>
<body class="bg-background-dark text-text-dark font-sans antialiased selection:bg-primary selection:text-white">
<nav class="fixed top-0 w-full z-50 bg-background-dark/80 backdrop-blur-md border-b border-white/5">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex-shrink-0 flex items-center gap-2 cursor-pointer">
<div class="w-10 h-10 bg-primary/20 border border-primary/50 rounded-xl flex items-center justify-center text-primary">
<span class="material-icons-outlined text-2xl">fitness_center</span>
</div>
<span class="font-display font-bold text-xl tracking-tight text-white">QuizQuest <span class="text-primary font-normal text-sm ml-1 px-2 py-0.5 bg-primary/10 rounded-md border border-primary/20">Arena</span></span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-2">
<a class="text-text-muted hover:text-white transition-colors px-4 py-2 rounded-lg text-sm font-medium" href="#">Dashboard</a>
<a class="bg-card-dark text-white border border-primary/30 px-4 py-2 rounded-lg text-sm font-medium shadow-[0_0_15px_rgba(59,130,246,0.3)]" href="#">Practice</a>
<a class="text-text-muted hover:text-white transition-colors px-4 py-2 rounded-lg text-sm font-medium" href="#">Live Quizzes</a>
<a class="text-text-muted hover:text-white transition-colors px-4 py-2 rounded-lg text-sm font-medium" href="#">Leaderboard</a>
</div>
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2 px-3 py-1.5 bg-card-dark rounded-full border border-white/5">
<span class="material-icons-outlined text-accent-cyan text-sm">bolt</span>
<span class="text-sm font-bold text-white">1,240 XP</span>
</div>
<div class="w-10 h-10 rounded-full bg-gradient-to-tr from-primary to-accent-cyan p-[2px] cursor-pointer">
<img alt="User" class="w-full h-full rounded-full object-cover border-2 border-background-dark" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAx52-X-YPPSDrnZwGsa7Mx44WgFEJ5th_blJUoLBgCIY-0IJs6O2Gk4dKLEabB_XvMMglr2BZptfhXrfqrX1FwxRcPozECsiGlgMoM2FXu_nTb_M7Dl8YkIZVoSftDuE3_1FMRXqyXoNakFtXSx2ebDcK18MPz3Sw0BZ5GedP4UV3R4xiX7P4I1hB9-L1BFmI3ePLOghEYoudpbCVd3NdmJH4WwvMpdX9oFfTUYzPcNTDjk5Y9oHHeKXILNiXOM4cMWlUdTbSQEzU"/>
</div>
</div>
</div>
</div>
</nav>
<div class="pt-28 pb-12 relative min-h-screen overflow-hidden">
<div class="absolute inset-0 bg-grid-pattern bg-[length:40px_40px] opacity-[0.05] pointer-events-none"></div>
<div class="absolute top-0 right-0 w-[600px] h-[600px] bg-primary/10 rounded-full blur-[100px] pointer-events-none translate-x-1/2 -translate-y-1/2"></div>
<div class="absolute bottom-0 left-0 w-[400px] h-[400px] bg-accent-cyan/5 rounded-full blur-[80px] pointer-events-none -translate-x-1/3 translate-y-1/3"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-10">
<div>
<div class="text-primary font-mono text-sm tracking-widest uppercase mb-2">Training Grounds</div>
<h1 class="font-display text-4xl font-bold text-white">Practice Arena</h1>
<p class="text-text-muted mt-2 max-w-xl">Sharpen your skills without pressure. Earn XP and unlock higher difficulty tiers to prepare for the live competitive leagues.</p>
</div>
<div class="bg-card-dark p-1 rounded-xl border border-white/10 flex items-center">
<button class="px-4 py-2 rounded-lg bg-primary text-white text-sm font-medium shadow-lg shadow-primary/20 transition-all">Easy</button>
<button class="px-4 py-2 rounded-lg text-text-muted hover:text-white text-sm font-medium transition-colors">Medium</button>
<button class="px-4 py-2 rounded-lg text-text-muted hover:text-white text-sm font-medium transition-colors flex items-center gap-1">
Hard <span class="material-icons-outlined text-[10px]">lock</span>
</button>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
<div class="lg:col-span-8 space-y-8">
<div class="relative overflow-hidden rounded-2xl bg-card-dark border border-primary/30 p-6 group cursor-pointer transition-all hover:border-primary/60">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-icons-outlined text-8xl text-primary">military_tech</span>
</div>
<div class="relative z-10 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div class="flex items-start gap-4">
<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-primary to-blue-700 flex items-center justify-center text-white shadow-lg shadow-primary/20">
<span class="material-icons-outlined">flag</span>
</div>
<div>
<h3 class="text-lg font-bold text-white group-hover:text-primary transition-colors">Daily Training Quest</h3>
<p class="text-sm text-text-muted">Complete 3 science quizzes with >80% accuracy.</p>
<div class="mt-3 w-full bg-background-dark rounded-full h-1.5 max-w-[200px]">
<div class="bg-primary h-1.5 rounded-full w-1/3"></div>
</div>
<p class="text-xs text-text-muted mt-1">1/3 Completed</p>
</div>
</div>
<div class="flex items-center gap-3">
<div class="bg-background-dark/50 backdrop-blur px-3 py-1.5 rounded-lg border border-white/5 flex items-center gap-2">
<span class="material-icons-outlined text-accent-cyan text-sm">star</span>
<span class="text-sm font-bold text-accent-cyan">+50 XP</span>
</div>
<button class="bg-white text-background-dark hover:bg-gray-100 px-5 py-2 rounded-lg text-sm font-bold transition-colors">
Resume
</button>
</div>
</div>
</div>
<div>
<h2 class="text-xl font-bold text-white mb-6 flex items-center gap-2">
<span class="w-1 h-6 bg-primary rounded-full"></span>
Select Category
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="group relative bg-card-dark hover:bg-card-lighter border border-white/5 hover:border-primary/50 rounded-xl p-5 transition-all duration-300 hover:-translate-y-1 cursor-pointer">
<div class="flex justify-between items-start mb-4">
<div class="w-10 h-10 rounded-lg bg-blue-500/10 text-blue-400 flex items-center justify-center group-hover:bg-blue-500 group-hover:text-white transition-colors">
<span class="material-icons-outlined">science</span>
</div>
<span class="text-xs font-mono text-text-muted bg-background-dark px-2 py-1 rounded border border-white/5">0/20</span>
</div>
<h3 class="font-bold text-white mb-1">Science & Tech</h3>
<p class="text-xs text-text-muted">Physics, Biology, IT basics</p>
<div class="mt-4 flex items-center text-xs font-medium text-primary opacity-0 group-hover:opacity-100 transition-opacity transform translate-y-2 group-hover:translate-y-0">
Start Session <span class="material-icons-outlined text-sm ml-1">arrow_forward</span>
</div>
</div>
<div class="group relative bg-card-dark hover:bg-card-lighter border border-white/5 hover:border-accent-cyan/50 rounded-xl p-5 transition-all duration-300 hover:-translate-y-1 cursor-pointer">
<div class="flex justify-between items-start mb-4">
<div class="w-10 h-10 rounded-lg bg-cyan-500/10 text-cyan-400 flex items-center justify-center group-hover:bg-cyan-500 group-hover:text-white transition-colors">
<span class="material-icons-outlined">public</span>
</div>
<span class="text-xs font-mono text-text-muted bg-background-dark px-2 py-1 rounded border border-white/5">12/50</span>
</div>
<h3 class="font-bold text-white mb-1">History & Geo</h3>
<p class="text-xs text-text-muted">World wars, Capitals, Maps</p>
<div class="mt-4 flex items-center text-xs font-medium text-accent-cyan opacity-0 group-hover:opacity-100 transition-opacity transform translate-y-2 group-hover:translate-y-0">
Start Session <span class="material-icons-outlined text-sm ml-1">arrow_forward</span>
</div>
</div>
<div class="group relative bg-card-dark hover:bg-card-lighter border border-white/5 hover:border-purple-500/50 rounded-xl p-5 transition-all duration-300 hover:-translate-y-1 cursor-pointer">
<div class="flex justify-between items-start mb-4">
<div class="w-10 h-10 rounded-lg bg-purple-500/10 text-purple-400 flex items-center justify-center group-hover:bg-purple-500 group-hover:text-white transition-colors">
<span class="material-icons-outlined">movie</span>
</div>
<span class="text-xs font-mono text-text-muted bg-background-dark px-2 py-1 rounded border border-white/5">5/30</span>
</div>
<h3 class="font-bold text-white mb-1">Pop Culture</h3>
<p class="text-xs text-text-muted">Movies, Music, Celebrities</p>
<div class="mt-4 flex items-center text-xs font-medium text-purple-400 opacity-0 group-hover:opacity-100 transition-opacity transform translate-y-2 group-hover:translate-y-0">
Start Session <span class="material-icons-outlined text-sm ml-1">arrow_forward</span>
</div>
</div>
<div class="group relative bg-card-dark hover:bg-card-lighter border border-white/5 hover:border-pink-500/50 rounded-xl p-5 transition-all duration-300 hover:-translate-y-1 cursor-pointer">
<div class="flex justify-between items-start mb-4">
<div class="w-10 h-10 rounded-lg bg-pink-500/10 text-pink-400 flex items-center justify-center group-hover:bg-pink-500 group-hover:text-white transition-colors">
<span class="material-icons-outlined">sports_basketball</span>
</div>
<span class="text-xs font-mono text-text-muted bg-background-dark px-2 py-1 rounded border border-white/5">8/25</span>
</div>
<h3 class="font-bold text-white mb-1">Sports</h3>
<p class="text-xs text-text-muted">Football, Cricket, Olympics</p>
<div class="mt-4 flex items-center text-xs font-medium text-pink-400 opacity-0 group-hover:opacity-100 transition-opacity transform translate-y-2 group-hover:translate-y-0">
Start Session <span class="material-icons-outlined text-sm ml-1">arrow_forward</span>
</div>
</div>
<div class="group relative bg-card-dark hover:bg-card-lighter border border-white/5 hover:border-green-500/50 rounded-xl p-5 transition-all duration-300 hover:-translate-y-1 cursor-pointer">
<div class="flex justify-between items-start mb-4">
<div class="w-10 h-10 rounded-lg bg-green-500/10 text-green-400 flex items-center justify-center group-hover:bg-green-500 group-hover:text-white transition-colors">
<span class="material-icons-outlined">calculate</span>
</div>
<span class="text-xs font-mono text-text-muted bg-background-dark px-2 py-1 rounded border border-white/5">2/40</span>
</div>
<h3 class="font-bold text-white mb-1">Mathematics</h3>
<p class="text-xs text-text-muted">Algebra, Geometry, Logic</p>
<div class="mt-4 flex items-center text-xs font-medium text-green-400 opacity-0 group-hover:opacity-100 transition-opacity transform translate-y-2 group-hover:translate-y-0">
Start Session <span class="material-icons-outlined text-sm ml-1">arrow_forward</span>
</div>
</div>
<div class="group relative bg-card-dark hover:bg-card-lighter border border-white/5 hover:border-yellow-500/50 rounded-xl p-5 transition-all duration-300 hover:-translate-y-1 cursor-pointer">
<div class="flex justify-between items-start mb-4">
<div class="w-10 h-10 rounded-lg bg-yellow-500/10 text-yellow-400 flex items-center justify-center group-hover:bg-yellow-500 group-hover:text-white transition-colors">
<span class="material-icons-outlined">auto_stories</span>
</div>
<span class="text-xs font-mono text-text-muted bg-background-dark px-2 py-1 rounded border border-white/5">0/15</span>
</div>
<h3 class="font-bold text-white mb-1">Literature</h3>
<p class="text-xs text-text-muted">Classics, Poets, Novels</p>
<div class="mt-4 flex items-center text-xs font-medium text-yellow-400 opacity-0 group-hover:opacity-100 transition-opacity transform translate-y-2 group-hover:translate-y-0">
Start Session <span class="material-icons-outlined text-sm ml-1">arrow_forward</span>
</div>
</div>
</div>
</div>
</div>
<div class="lg:col-span-4 space-y-6">
<div class="bg-card-dark border border-white/5 rounded-2xl p-6">
<h3 class="text-lg font-bold text-white mb-4">Performance Stats</h3>
<div class="space-y-4 mb-6">
<div class="flex justify-between items-center text-sm">
<span class="text-text-muted">Overall Accuracy</span>
<span class="text-white font-mono">78%</span>
</div>
<div class="flex items-end gap-2 h-24 border-b border-white/10 pb-2">
<div class="w-1/5 bg-primary/20 hover:bg-primary/40 transition-colors rounded-t-sm h-[40%] relative group">
<div class="absolute -top-6 left-1/2 -translate-x-1/2 bg-black text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">40%</div>
</div>
<div class="w-1/5 bg-primary/30 hover:bg-primary/50 transition-colors rounded-t-sm h-[60%] relative group">
<div class="absolute -top-6 left-1/2 -translate-x-1/2 bg-black text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">60%</div>
</div>
<div class="w-1/5 bg-primary/50 hover:bg-primary/70 transition-colors rounded-t-sm h-[50%] relative group">
<div class="absolute -top-6 left-1/2 -translate-x-1/2 bg-black text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">50%</div>
</div>
<div class="w-1/5 bg-primary hover:bg-primary-hover transition-colors rounded-t-sm h-[85%] relative group">
<div class="absolute -top-6 left-1/2 -translate-x-1/2 bg-black text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">85%</div>
</div>
<div class="w-1/5 bg-primary/80 hover:bg-primary transition-colors rounded-t-sm h-[75%] relative group">
<div class="absolute -top-6 left-1/2 -translate-x-1/2 bg-black text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">75%</div>
</div>
</div>
<div class="flex justify-between text-xs text-text-muted uppercase font-mono tracking-wider">
<span>M</span><span>T</span><span>W</span><span>T</span><span>F</span>
</div>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="bg-background-dark p-3 rounded-lg border border-white/5">
<div class="text-xs text-text-muted mb-1">Quizzes</div>
<div class="text-xl font-bold text-white">24</div>
</div>
<div class="bg-background-dark p-3 rounded-lg border border-white/5">
<div class="text-xs text-text-muted mb-1">Total XP</div>
<div class="text-xl font-bold text-accent-cyan">1.2k</div>
</div>
</div>
</div>
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-indigo-900 to-card-dark border border-indigo-500/30 p-6 text-center">
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=2670&auto=format&fit=crop')] bg-cover bg-center opacity-10 mix-blend-overlay"></div>
<div class="relative z-10">
<div class="w-12 h-12 mx-auto bg-indigo-500 rounded-full flex items-center justify-center text-white mb-4 shadow-[0_0_20px_rgba(99,102,241,0.5)]">
<span class="material-icons-outlined">workspace_premium</span>
</div>
<h3 class="text-lg font-bold text-white mb-2">Ready for the Big League?</h3>
<p class="text-sm text-indigo-200 mb-6">Join live tournaments and compete for real cash prizes.</p>
<a class="block w-full py-3 bg-white text-indigo-900 font-bold rounded-xl hover:bg-indigo-50 transition-colors shadow-lg" href="#">
Join Tournament
</a>
</div>
</div>
<div class="bg-card-dark border border-white/5 rounded-2xl p-6">
<h3 class="text-sm font-bold text-text-muted uppercase tracking-wider mb-4">Recent Activity</h3>
<div class="space-y-4">
<div class="flex items-center gap-3 pb-3 border-b border-white/5 last:border-0 last:pb-0">
<div class="w-8 h-8 rounded bg-green-500/10 flex items-center justify-center text-green-500">
<span class="material-icons-outlined text-sm">check</span>
</div>
<div class="flex-1">
<div class="text-sm font-medium text-white">Science Basics</div>
<div class="text-xs text-text-muted">Yesterday • 8/10 Correct</div>
</div>
<div class="text-xs font-bold text-green-400">+20 XP</div>
</div>
<div class="flex items-center gap-3 pb-3 border-b border-white/5 last:border-0 last:pb-0">
<div class="w-8 h-8 rounded bg-red-500/10 flex items-center justify-center text-red-500">
<span class="material-icons-outlined text-sm">close</span>
</div>
<div class="flex-1">
<div class="text-sm font-medium text-white">History Hard</div>
<div class="text-xs text-text-muted">2 days ago • 3/10 Correct</div>
</div>
<div class="text-xs font-bold text-text-muted">+5 XP</div>
</div>
<div class="flex items-center gap-3 pb-3 border-b border-white/5 last:border-0 last:pb-0">
<div class="w-8 h-8 rounded bg-green-500/10 flex items-center justify-center text-green-500">
<span class="material-icons-outlined text-sm">check</span>
</div>
<div class="flex-1">
<div class="text-sm font-medium text-white">Pop Culture</div>
<div class="text-xs text-text-muted">3 days ago • 10/10 Correct</div>
</div>
<div class="text-xs font-bold text-green-400">+50 XP</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-background-dark border-t border-white/5 py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2 text-text-muted">
<span class="material-icons-outlined">fitness_center</span>
<span class="text-sm font-medium">QuizQuest Arena © 2023</span>
</div>
<div class="flex items-center gap-8">
<a class="text-sm text-text-muted hover:text-white transition-colors" href="#">Help Center</a>
<a class="text-sm text-text-muted hover:text-white transition-colors" href="#">Community Rules</a>
<a class="text-sm text-text-muted hover:text-white transition-colors" href="#">Report Issue</a>
</div>
</div>
</footer>
</body></html>