<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Practice Mode Dashboard</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&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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#6D28D9", // Vibrant Purple
accent: "#FBBF24", // Gold
"background-light": "#F3F4F6",
"background-dark": "#0F0E17",
"surface-light": "#FFFFFF",
"surface-dark": "#1E1B2E",
"surface-dark-2": "#262338",
"success": "#10B981",
"warning": "#F59E0B",
},
fontFamily: {
display: ["Inter", "sans-serif"],
sans: ["Inter", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.75rem",
},
},
},
};
// Force dark mode for this dashboard view to match the cyber aesthetic
document.documentElement.classList.add('dark');
</script>
<style>
.gradient-text {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(to right, #FBBF24, #F59E0B);
}
.hero-glow {
background: radial-gradient(circle at center, rgba(109, 40, 217, 0.4) 0%, rgba(15, 14, 23, 0) 70%);
}::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #1E1B2E;
}
::-webkit-scrollbar-thumb {
background: #4B5563;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #6D28D9;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-gray-900 dark:text-white font-sans transition-colors duration-300 min-h-screen flex flex-col">
<nav class="fixed w-full z-50 bg-background-light/90 dark:bg-background-dark/90 backdrop-blur-sm border-b border-gray-200 dark:border-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-20 items-center">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white text-xl shadow-lg shadow-purple-500/20">
<i class="fas fa-gamepad"></i>
</div>
<span class="font-bold text-xl tracking-tight text-white">QuizQuest</span>
</div>
<div class="hidden md:flex items-center space-x-1 bg-surface-dark-2 rounded-full p-1 border border-gray-700/50">
<a class="text-gray-400 hover:text-white hover:bg-white/10 px-4 py-2 rounded-full text-sm font-medium transition" href="#">My Quests</a>
<a class="bg-primary text-white px-4 py-2 rounded-full text-sm font-medium shadow-md" href="#">Practice</a>
<a class="text-gray-400 hover:text-white hover:bg-white/10 px-4 py-2 rounded-full text-sm font-medium transition" href="#">Leaderboard</a>
</div>
<div class="flex items-center gap-4">
<div class="hidden md:flex items-center gap-3 bg-surface-dark-2 px-3 py-1.5 rounded-full border border-gray-700/50">
<div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
<span class="text-xs font-medium text-gray-300">Training Mode</span>
</div>
<div class="w-10 h-10 rounded-full bg-gradient-to-tr from-yellow-400 to-orange-500 p-[2px]">
<div class="w-full h-full rounded-full bg-surface-dark overflow-hidden">
<img alt="User Profile" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuApFqSAVg2Eab-CXO2F9Nvr28cZiGpI_tj7WoZWxuyEhPlOopvuxUHDEKlyq5qJ3a9ilCLddV-TcxlaytnuA377qKvxfzDewb1Dxx4b8zjo7C6NygYOqJlhLXuvL-eVKGIvmzzfGpxEtiwgHzhlmQeSYvGy-8WyMlurlFrf76iAqelgVVbi3ksB1-_JJjmjczjt6XOJjfR3Ht-lpm1sI6eS5Wc3vm-CDUzL3qG5uqMUtc7M_nrLR6xN-ONCxyaI-c2kZ89Tscq3"/>
</div>
</div>
</div>
</div>
</div>
</nav>
<main class="flex-grow pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto w-full">
<div class="mb-10 flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
<div>
<div class="inline-flex items-center gap-2 text-primary text-sm font-bold mb-2 uppercase tracking-wider">
<span class="material-symbols-outlined text-lg">school</span>
Practice Arena
</div>
<h1 class="text-4xl font-extrabold text-white mb-2">Sharpen Your Skills</h1>
<p class="text-gray-400 max-w-xl">Master new topics without pressure. No points, just pure knowledge gains. Ready to level up?</p>
</div>
<div class="bg-gradient-to-r from-blue-900/40 to-primary/20 border border-blue-500/30 rounded-xl p-4 flex items-center gap-4 max-w-md w-full backdrop-blur-sm">
<div class="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center text-blue-400">
<span class="material-symbols-outlined">info</span>
</div>
<div>
<h4 class="text-sm font-bold text-blue-200">Training Mode Active</h4>
<p class="text-xs text-blue-300/70">XP and Ranking are disabled in this section.</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
<div class="lg:col-span-8 space-y-8">
<section>
<h3 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
<span class="w-1 h-6 bg-primary rounded-full"></span>
Select Category
</h3>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<label class="group cursor-pointer relative">
<input checked="" class="peer sr-only" name="category" type="radio"/>
<div class="bg-surface-dark border border-gray-800 rounded-2xl p-6 h-full transition-all duration-300 hover:border-primary/50 hover:shadow-lg hover:shadow-primary/10 peer-checked:border-primary peer-checked:bg-primary/5 peer-checked:ring-1 peer-checked:ring-primary">
<div class="w-12 h-12 rounded-xl bg-purple-500/20 text-purple-400 flex items-center justify-center text-2xl mb-4 group-hover:scale-110 transition-transform">
<i class="fas fa-microchip"></i>
</div>
<h4 class="text-lg font-bold text-white mb-1">Technology</h4>
<p class="text-xs text-gray-500">Coding, Hardware, AI & Future Tech</p>
<div class="absolute top-4 right-4 w-5 h-5 rounded-full border border-gray-600 peer-checked:bg-primary peer-checked:border-primary flex items-center justify-center">
<i class="fas fa-check text-[10px] text-white opacity-0 peer-checked:opacity-100"></i>
</div>
</div>
</label>
<label class="group cursor-pointer relative">
<input class="peer sr-only" name="category" type="radio"/>
<div class="bg-surface-dark border border-gray-800 rounded-2xl p-6 h-full transition-all duration-300 hover:border-blue-500/50 hover:shadow-lg hover:shadow-blue-500/10 peer-checked:border-blue-500 peer-checked:bg-blue-500/5 peer-checked:ring-1 peer-checked:ring-blue-500">
<div class="w-12 h-12 rounded-xl bg-blue-500/20 text-blue-400 flex items-center justify-center text-2xl mb-4 group-hover:scale-110 transition-transform">
<i class="fas fa-square-root-alt"></i>
</div>
<h4 class="text-lg font-bold text-white mb-1">Mathematics</h4>
<p class="text-xs text-gray-500">Algebra, Calculus, Logic & Stats</p>
<div class="absolute top-4 right-4 w-5 h-5 rounded-full border border-gray-600 peer-checked:bg-blue-500 peer-checked:border-blue-500 flex items-center justify-center">
<i class="fas fa-check text-[10px] text-white opacity-0 peer-checked:opacity-100"></i>
</div>
</div>
</label>
<label class="group cursor-pointer relative">
<input class="peer sr-only" name="category" type="radio"/>
<div class="bg-surface-dark border border-gray-800 rounded-2xl p-6 h-full transition-all duration-300 hover:border-yellow-500/50 hover:shadow-lg hover:shadow-yellow-500/10 peer-checked:border-yellow-500 peer-checked:bg-yellow-500/5 peer-checked:ring-1 peer-checked:ring-yellow-500">
<div class="w-12 h-12 rounded-xl bg-yellow-500/20 text-yellow-400 flex items-center justify-center text-2xl mb-4 group-hover:scale-110 transition-transform">
<i class="fas fa-globe-asia"></i>
</div>
<h4 class="text-lg font-bold text-white mb-1">General Knowledge</h4>
<p class="text-xs text-gray-500">History, Geography, Current Affairs</p>
<div class="absolute top-4 right-4 w-5 h-5 rounded-full border border-gray-600 peer-checked:bg-yellow-500 peer-checked:border-yellow-500 flex items-center justify-center">
<i class="fas fa-check text-[10px] text-white opacity-0 peer-checked:opacity-100"></i>
</div>
</div>
</label>
</div>
</section>
<section>
<h3 class="text-lg font-bold text-white mb-4 flex items-center gap-2">
<span class="w-1 h-6 bg-accent rounded-full"></span>
Select Difficulty
</h3>
<div class="bg-surface-dark border border-gray-800 rounded-2xl p-1 flex relative">
<label class="flex-1 text-center cursor-pointer relative z-10">
<input checked="" class="peer sr-only" name="difficulty" type="radio"/>
<div class="py-3 px-4 rounded-xl transition-colors text-gray-400 peer-checked:text-white peer-checked:bg-surface-dark-2 peer-checked:shadow-sm">
<span class="font-bold block">Novice</span>
<span class="text-[10px] uppercase tracking-wider opacity-60">Easy Start</span>
</div>
</label>
<label class="flex-1 text-center cursor-pointer relative z-10">
<input class="peer sr-only" name="difficulty" type="radio"/>
<div class="py-3 px-4 rounded-xl transition-colors text-gray-400 peer-checked:text-white peer-checked:bg-surface-dark-2 peer-checked:shadow-sm">
<span class="font-bold block">Apprentice</span>
<span class="text-[10px] uppercase tracking-wider opacity-60">Standard</span>
</div>
</label>
<label class="flex-1 text-center cursor-pointer relative z-10">
<input class="peer sr-only" name="difficulty" type="radio"/>
<div class="py-3 px-4 rounded-xl transition-colors text-gray-400 peer-checked:text-white peer-checked:bg-surface-dark-2 peer-checked:shadow-sm">
<span class="font-bold block">Master</span>
<span class="text-[10px] uppercase tracking-wider opacity-60">Hardcore</span>
</div>
</label>
</div>
</section>
<div class="pt-4">
<button class="w-full bg-gradient-to-r from-primary to-purple-600 hover:from-purple-600 hover:to-primary text-white py-5 rounded-2xl font-bold text-xl shadow-lg shadow-purple-900/40 transition-all hover:scale-[1.01] active:scale-[0.99] flex items-center justify-center gap-3 group relative overflow-hidden">
<div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300 skew-y-12"></div>
<span class="material-symbols-outlined group-hover:animate-pulse">play_circle</span>
Start Practice Session
</button>
</div>
</div>
<div class="lg:col-span-4 space-y-6">
<div class="bg-surface-dark border border-gray-800 rounded-3xl p-6 shadow-xl relative overflow-hidden">
<div class="flex justify-between items-center mb-6">
<h3 class="font-bold text-white">Recent Accuracy</h3>
<select class="bg-surface-dark-2 border-none text-xs text-gray-400 rounded-lg py-1 px-2 focus:ring-0">
<option>Last 7 Days</option>
<option>Last 30 Days</option>
</select>
</div>
<div class="h-48 relative flex items-end justify-between gap-2 px-2">
<div class="absolute inset-0 flex flex-col justify-between pointer-events-none opacity-20 z-0">
<div class="border-t border-gray-500 w-full h-0"></div>
<div class="border-t border-gray-500 w-full h-0"></div>
<div class="border-t border-gray-500 w-full h-0"></div>
<div class="border-t border-gray-500 w-full h-0"></div>
</div>
<div class="w-full bg-surface-dark-2 rounded-t-lg h-[40%] relative group z-10 hover:bg-surface-light/20 transition-colors cursor-help">
<div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-gray-900 text-xs text-white px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">40%</div>
</div>
<div class="w-full bg-surface-dark-2 rounded-t-lg h-[65%] relative group z-10 hover:bg-surface-light/20 transition-colors cursor-help">
<div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-gray-900 text-xs text-white px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">65%</div>
</div>
<div class="w-full bg-purple-500/50 rounded-t-lg h-[50%] relative group z-10 hover:bg-purple-500 transition-colors cursor-help">
<div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-gray-900 text-xs text-white px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">50%</div>
</div>
<div class="w-full bg-surface-dark-2 rounded-t-lg h-[75%] relative group z-10 hover:bg-surface-light/20 transition-colors cursor-help">
<div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-gray-900 text-xs text-white px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">75%</div>
</div>
<div class="w-full bg-surface-dark-2 rounded-t-lg h-[60%] relative group z-10 hover:bg-surface-light/20 transition-colors cursor-help">
<div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-gray-900 text-xs text-white px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">60%</div>
</div>
<div class="w-full bg-accent rounded-t-lg h-[85%] relative group z-10 hover:bg-yellow-400 transition-colors cursor-help shadow-[0_0_15px_rgba(251,191,36,0.4)]">
<div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-gray-900 text-xs text-white px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">85%</div>
</div>
</div>
<div class="flex justify-between text-[10px] text-gray-500 mt-2 px-2 font-mono uppercase">
<span>Mon</span>
<span>Tue</span>
<span>Wed</span>
<span>Thu</span>
<span>Fri</span>
<span class="text-accent font-bold">Today</span>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="bg-surface-dark border border-gray-800 rounded-2xl p-4">
<div class="flex items-center gap-2 mb-2 text-gray-400 text-xs uppercase tracking-wider font-bold">
<span class="w-2 h-2 rounded-full bg-green-500"></span>
Questions
</div>
<div class="text-2xl font-bold text-white">1,248</div>
<div class="text-xs text-green-500 mt-1 flex items-center">
<span class="material-symbols-outlined text-sm mr-1">trending_up</span>
+12 this week
</div>
</div>
<div class="bg-surface-dark border border-gray-800 rounded-2xl p-4">
<div class="flex items-center gap-2 mb-2 text-gray-400 text-xs uppercase tracking-wider font-bold">
<span class="w-2 h-2 rounded-full bg-purple-500"></span>
Time Spent
</div>
<div class="text-2xl font-bold text-white">4h 20m</div>
<div class="text-xs text-gray-500 mt-1">Total practice</div>
</div>
</div>
<div class="bg-gradient-to-br from-surface-dark to-surface-dark-2 border border-gray-800 rounded-2xl p-5 relative overflow-hidden group">
<div class="absolute top-0 right-0 w-24 h-24 bg-primary opacity-10 blur-2xl rounded-full -mr-10 -mt-10 group-hover:opacity-20 transition-opacity"></div>
<div class="relative z-10">
<h4 class="text-xs font-bold text-primary uppercase mb-2">Recommended for you</h4>
<h3 class="text-white font-bold text-lg mb-1">Advanced Algebra</h3>
<p class="text-gray-400 text-sm mb-4">Based on your recent mistakes in Math category.</p>
<a class="inline-flex items-center text-sm font-bold text-white hover:text-accent transition-colors" href="#">
Start Quick Drill <i class="fas fa-arrow-right ml-2 text-xs"></i>
</a>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-surface-dark py-8 border-t border-gray-900 mt-auto">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-4">
<div class="flex items-center gap-2 text-gray-500 text-sm">
<span>© 2023 QuizQuest.</span>
<span class="w-1 h-1 bg-gray-600 rounded-full"></span>
<span>Practice Mode v1.2</span>
</div>
<div class="flex gap-6 text-sm text-gray-500">
<a class="hover:text-white transition" href="#">Help</a>
<a class="hover:text-white transition" href="#">Report Issue</a>
</div>
</div>
</footer>
</body></html>