<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Practice Quest Setup Dashboard</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#a413ec",
"primary-dark": "#7a0eb0",
"secondary": "#FFD700",
"accent-green": "#39FF14",
"accent-red": "#FF003C",
"accent-blue": "#00F0FF",
"background-light": "#f7f6f8",
"background-dark": "#0a0a0a",
"surface-dark": "#1c1022",
"surface-darker": "#150a1a",
"border-dark": "#332839",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"]
},
borderRadius: {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"2xl": "1rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Space Grotesk', sans-serif;
}
.neon-glow-primary {
box-shadow: 0 0 15px rgba(164, 19, 236, 0.4);
}
.neon-glow-primary:hover {
box-shadow: 0 0 25px rgba(164, 19, 236, 0.6);
}
.neon-glow-gold {
box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.neon-border-hover:hover {
box-shadow: 0 0 10px rgba(164, 19, 236, 0.5), inset 0 0 10px rgba(164, 19, 236, 0.2);
border-color: #a413ec;
}
.glass-panel {
backdrop-filter: blur(12px);
background: rgba(28, 16, 34, 0.8);
}
.metallic-bronze {
background: linear-gradient(135deg, #804A00, #CA7345, #FFBB91, #A35400, #804A00);
}
.metallic-silver {
background: linear-gradient(135deg, #C0C0C0, #E8E8E8, #A9A9A9, #FFFFFF, #808080);
}
.metallic-gold {
background: linear-gradient(135deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
}
.card-selected {
background: rgba(164, 19, 236, 0.15);
border-color: #a413ec;
box-shadow: 0 0 15px rgba(164, 19, 236, 0.3);
}input[type=range] {
-webkit-appearance: none;
background: transparent;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: #FFD700;
cursor: pointer;
margin-top: -8px;
box-shadow: 0 0 10px #FFD700;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
background: #332839;
border-radius: 2px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #a413ec;
}
</style>
</head>
<body class="bg-background-dark text-slate-100 min-h-screen overflow-hidden">
<div class="relative flex h-screen w-full flex-col overflow-hidden">
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-border-dark px-6 py-3 glass-panel z-50 shrink-0">
<div class="flex items-center gap-6">
<div class="flex items-center gap-3 text-primary cursor-pointer hover:scale-105 transition-transform">
<div class="size-8">
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M39.475 21.6262C40.358 21.4363 40.6863 21.5589 40.7581 21.5934C40.7876 21.655 40.8547 21.857 40.8082 22.3336C40.7408 23.0255 40.4502 24.0046 39.8572 25.2301C38.6799 27.6631 36.5085 30.6631 33.5858 33.5858C30.6631 36.5085 27.6632 38.6799 25.2301 39.8572C24.0046 40.4502 23.0255 40.7407 22.3336 40.8082C21.8571 40.8547 21.6551 40.7875 21.5934 40.7581C21.5589 40.6863 21.4363 40.358 21.6262 39.475C21.8562 38.4054 22.4689 36.9657 23.5038 35.2817C24.7575 33.2417 26.5497 30.9744 28.7621 28.762C30.9744 26.5497 33.2417 24.7574 35.2817 23.5037C36.9657 22.4689 38.4054 21.8562 39.475 21.6262ZM4.41189 29.2403L18.7597 43.5881C19.8813 44.7097 21.4027 44.9179 22.7217 44.7893C24.0585 44.659 25.5148 44.1631 26.9723 43.4579C29.9052 42.0387 33.2618 39.5667 36.4142 36.4142C39.5667 33.2618 42.0387 29.9052 43.4579 26.9723C44.1631 25.5148 44.659 24.0585 44.7893 22.7217C44.9179 21.4027 44.7097 19.8813 43.5881 18.7597L29.2403 4.41187C27.8527 3.02428 25.8765 3.02573 24.2861 3.36776C22.6081 3.72863 20.7334 4.58419 18.8396 5.74801C16.4978 7.18716 13.9881 9.18353 11.5858 11.5858C9.18354 13.988 7.18717 16.4978 5.74802 18.8396C4.58421 20.7334 3.72865 22.6081 3.36778 24.2861C3.02574 25.8765 3.02429 27.8527 4.41189 29.2403Z" fill="currentColor" fill-rule="evenodd"></path>
</svg>
</div>
<span class="text-slate-100 text-lg font-bold tracking-tight">QuizQuest</span>
</div>
<nav class="hidden md:flex items-center gap-6 border-l border-border-dark pl-6">
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-medium" href="#">Dashboard</a>
<a class="text-primary text-sm font-bold flex items-center gap-1 neon-glow-text" href="#">
<span class="material-symbols-outlined text-sm">stadia_controller</span>
Practice Mode
</a>
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-medium" href="#">Tournaments</a>
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-medium" href="#">Leaderboard</a>
</nav>
</div>
<div class="flex justify-end gap-4 items-center">
<div class="hidden md:flex items-center gap-2 bg-surface-darker px-3 py-1.5 rounded-full border border-border-dark">
<span class="text-secondary font-bold text-sm">LVL 42</span>
<div class="h-1.5 w-16 bg-slate-800 rounded-full overflow-hidden">
<div class="h-full w-3/4 bg-gradient-to-r from-primary to-secondary"></div>
</div>
</div>
<div class="flex items-center gap-2">
<button class="size-9 rounded-full bg-surface-dark hover:bg-border-dark flex items-center justify-center text-slate-300 transition-colors relative">
<span class="material-symbols-outlined text-lg">notifications</span>
<span class="absolute top-2 right-2 size-2 bg-accent-red rounded-full"></span>
</button>
<div class="size-9 rounded-full border-2 border-primary overflow-hidden cursor-pointer hover:shadow-[0_0_10px_rgba(164,19,236,0.5)] transition-shadow">
<img alt="User Avatar" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCpGqq6rSUuUL1mNwvakxxZM-Qq8evGRaW_yyBUfoHO-Kcz779tFX15o-IZhA7QKLKSZ6cArlH2x0Vrpya3iZhS8_7uaH73QeXuue4tTBw8AKDKuBB5e1gcoBXuqAlX1AAoKjmYixsTKji5vAE6xnU_XMw2oqlB33w0RZ3NFjNl5lp2nyPJc-eqzrRwpPEK-qzR6CE3p4xCfo7yP3uoEOyOUUDbZyLIG8lAmmKWci72p2QPJGScoWA616f00p707coG0dCyYumOu4VZ"/>
</div>
</div>
</div>
</header>
<main class="flex-1 flex overflow-hidden">
<aside class="w-80 border-r border-border-dark bg-surface-dark flex flex-col overflow-y-auto hidden lg:flex shrink-0">
<div class="p-6 border-b border-border-dark">
<h3 class="text-slate-400 text-xs font-bold uppercase tracking-widest mb-4">Current Session Stats</h3>
<div class="flex flex-col gap-6">
<div class="relative flex flex-col items-center">
<div class="relative size-32">
<svg class="size-full -rotate-90" viewBox="0 0 36 36">
<path class="text-slate-800" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-width="3"></path>
<path class="text-primary drop-shadow-[0_0_4px_rgba(164,19,236,0.8)]" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" stroke-dasharray="78, 100" stroke-width="3"></path>
</svg>
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
<div class="text-3xl font-bold text-white">78%</div>
<div class="text-[10px] text-slate-400 uppercase tracking-wider">Accuracy</div>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-3 text-center">
<div class="bg-surface-darker p-3 rounded-lg border border-border-dark">
<div class="text-xl font-bold text-accent-green">12</div>
<div class="text-[10px] text-slate-500 uppercase">Streak</div>
</div>
<div class="bg-surface-darker p-3 rounded-lg border border-border-dark">
<div class="text-xl font-bold text-secondary">4.2k</div>
<div class="text-[10px] text-slate-500 uppercase">XP Gained</div>
</div>
</div>
</div>
</div>
<div class="p-6 flex-1">
<h3 class="text-slate-400 text-xs font-bold uppercase tracking-widest mb-4">Recent Mastery Badges</h3>
<div class="grid grid-cols-2 gap-4">
<div class="flex flex-col items-center gap-2 group cursor-pointer">
<div class="size-16 rounded-full metallic-gold flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
<span class="material-symbols-outlined text-3xl text-yellow-900/60">history_edu</span>
</div>
<span class="text-xs text-secondary font-medium text-center">History Buff</span>
</div>
<div class="flex flex-col items-center gap-2 group cursor-pointer">
<div class="size-16 rounded-full metallic-silver flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
<span class="material-symbols-outlined text-3xl text-slate-800/50">science</span>
</div>
<span class="text-xs text-slate-300 font-medium text-center">Lab Rat</span>
</div>
<div class="flex flex-col items-center gap-2 group cursor-pointer opacity-50 grayscale hover:grayscale-0 hover:opacity-100 transition-all">
<div class="size-16 rounded-full metallic-bronze flex items-center justify-center shadow-lg">
<span class="material-symbols-outlined text-3xl text-orange-950/40">terminal</span>
</div>
<span class="text-xs text-slate-500 font-medium text-center">Code Novice</span>
</div>
<div class="flex flex-col items-center gap-2 group cursor-pointer">
<div class="size-16 rounded-full border-2 border-dashed border-slate-700 bg-surface-darker flex items-center justify-center group-hover:border-primary transition-colors">
<span class="material-symbols-outlined text-2xl text-slate-700">lock</span>
</div>
<span class="text-xs text-slate-600 font-medium text-center">Locked</span>
</div>
</div>
<div class="mt-8 p-4 rounded-xl bg-gradient-to-br from-primary/10 to-transparent border border-primary/20">
<div class="flex items-start gap-3">
<span class="material-symbols-outlined text-primary text-xl mt-1">tips_and_updates</span>
<div>
<h4 class="text-sm font-bold text-white mb-1">Daily Tip</h4>
<p class="text-xs text-slate-400 leading-relaxed">Focus on "Tech Giants" category today to double your XP gain!</p>
</div>
</div>
</div>
</div>
</aside>
<section class="flex-1 overflow-y-auto bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoNTEs 40L 57L 0.1)”] bg-repeat p-6 lg:p-10 flex flex-col gap-8 relative">
<div class="fixed top-20 right-0 w-[500px] h-[500px] bg-primary/10 blur-[120px] rounded-full pointer-events-none"></div>
<div class="max-w-5xl mx-auto w-full space-y-8 z-10">
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 bg-primary/20 text-primary border border-primary/30 rounded-full text-xs font-bold uppercase tracking-widest mb-3">
<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>
System Ready
</div>
<h1 class="text-4xl md:text-5xl font-black text-white tracking-tight">Setup <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-blue">Practice Quest</span></h1>
<p class="text-slate-400 mt-2 max-w-2xl">Configure your training simulation parameters. Select a knowledge domain and difficulty level to begin calibration.</p>
</div>
<div class="hidden md:block">
<button class="text-sm text-slate-400 hover:text-white flex items-center gap-2 transition-colors">
<span class="material-symbols-outlined">history</span>
Load Last Configuration
</button>
</div>
</div>
<div class="grid lg:grid-cols-3 gap-8">
<div class="lg:col-span-2 space-y-6">
<div class="flex items-center justify-between">
<h2 class="text-lg font-bold flex items-center gap-2 text-slate-200">
<span class="material-symbols-outlined text-primary">category</span>
Select Domain
</h2>
<div class="flex gap-2">
<button class="size-8 rounded hover:bg-surface-dark border border-transparent hover:border-border-dark flex items-center justify-center text-slate-400 transition-colors">
<span class="material-symbols-outlined text-lg">grid_view</span>
</button>
<button class="size-8 rounded hover:bg-surface-dark border border-transparent hover:border-border-dark flex items-center justify-center text-slate-400 transition-colors">
<span class="material-symbols-outlined text-lg">list</span>
</button>
</div>
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
<div class="group relative bg-surface-dark border border-border-dark rounded-xl p-5 cursor-pointer transition-all hover:scale-[1.02] neon-border-hover overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-transparent to-primary/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>
<div class="relative z-10 flex flex-col items-center text-center gap-3">
<div class="size-12 rounded-lg bg-orange-900/20 text-orange-400 flex items-center justify-center mb-1 group-hover:bg-orange-500 group-hover:text-white transition-colors duration-300">
<span class="material-symbols-outlined text-2xl">history_edu</span>
</div>
<h3 class="font-bold text-slate-200 group-hover:text-white">History</h3>
<p class="text-[10px] text-slate-500 uppercase tracking-wider">42 Modules</p>
</div>
</div>
<div class="group relative bg-surface-dark border rounded-xl p-5 cursor-pointer transition-all hover:scale-[1.02] card-selected">
<div class="absolute top-2 right-2 text-primary">
<span class="material-symbols-outlined text-lg filled">check_circle</span>
</div>
<div class="relative z-10 flex flex-col items-center text-center gap-3">
<div class="size-12 rounded-lg bg-blue-900/20 text-blue-400 flex items-center justify-center mb-1 group-hover:bg-blue-500 group-hover:text-white transition-colors duration-300">
<span class="material-symbols-outlined text-2xl">science</span>
</div>
<h3 class="font-bold text-white">Science</h3>
<p class="text-[10px] text-primary font-bold uppercase tracking-wider">Selected</p>
</div>
</div>
<div class="group relative bg-surface-dark border border-border-dark rounded-xl p-5 cursor-pointer transition-all hover:scale-[1.02] neon-border-hover overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-transparent to-primary/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>
<div class="relative z-10 flex flex-col items-center text-center gap-3">
<div class="size-12 rounded-lg bg-purple-900/20 text-purple-400 flex items-center justify-center mb-1 group-hover:bg-purple-500 group-hover:text-white transition-colors duration-300">
<span class="material-symbols-outlined text-2xl">memory</span>
</div>
<h3 class="font-bold text-slate-200 group-hover:text-white">Technology</h3>
<p class="text-[10px] text-slate-500 uppercase tracking-wider">89 Modules</p>
</div>
</div>
<div class="group relative bg-surface-dark border border-border-dark rounded-xl p-5 cursor-pointer transition-all hover:scale-[1.02] neon-border-hover overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-transparent to-primary/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>
<div class="relative z-10 flex flex-col items-center text-center gap-3">
<div class="size-12 rounded-lg bg-green-900/20 text-green-400 flex items-center justify-center mb-1 group-hover:bg-green-500 group-hover:text-white transition-colors duration-300">
<span class="material-symbols-outlined text-2xl">public</span>
</div>
<h3 class="font-bold text-slate-200 group-hover:text-white">Geography</h3>
<p class="text-[10px] text-slate-500 uppercase tracking-wider">35 Modules</p>
</div>
</div>
<div class="group relative bg-surface-dark border border-border-dark rounded-xl p-5 cursor-pointer transition-all hover:scale-[1.02] neon-border-hover overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-transparent to-primary/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>
<div class="relative z-10 flex flex-col items-center text-center gap-3">
<div class="size-12 rounded-lg bg-pink-900/20 text-pink-400 flex items-center justify-center mb-1 group-hover:bg-pink-500 group-hover:text-white transition-colors duration-300">
<span class="material-symbols-outlined text-2xl">palette</span>
</div>
<h3 class="font-bold text-slate-200 group-hover:text-white">Arts & Lit</h3>
<p class="text-[10px] text-slate-500 uppercase tracking-wider">21 Modules</p>
</div>
</div>
<div class="group relative bg-surface-dark border border-border-dark rounded-xl p-5 cursor-pointer transition-all hover:scale-[1.02] neon-border-hover overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-transparent to-primary/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>
<div class="relative z-10 flex flex-col items-center text-center gap-3">
<div class="size-12 rounded-lg bg-slate-800 text-slate-300 flex items-center justify-center mb-1 group-hover:bg-slate-200 group-hover:text-slate-900 transition-colors duration-300">
<span class="material-symbols-outlined text-2xl">shuffle</span>
</div>
<h3 class="font-bold text-slate-200 group-hover:text-white">Random</h3>
<p class="text-[10px] text-slate-500 uppercase tracking-wider">All Domains</p>
</div>
</div>
</div>
</div>
<div class="space-y-6">
<div class="bg-surface-dark border border-border-dark rounded-xl p-6 space-y-6">
<h2 class="text-lg font-bold flex items-center gap-2 text-slate-200">
<span class="material-symbols-outlined text-secondary">tune</span>
Difficulty Level
</h2>
<div class="space-y-4">
<div class="flex justify-between text-xs font-bold uppercase tracking-wider text-slate-500">
<span>Easy</span>
<span class="text-secondary">Hard</span>
<span>Legendary</span>
</div>
<input class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer focus:outline-none" max="5" min="1" type="range" value="3"/>
<div class="bg-surface-darker rounded-lg p-3 border border-border-dark flex items-start gap-3 mt-2">
<span class="material-symbols-outlined text-secondary text-lg mt-0.5">warning</span>
<div>
<p class="text-secondary font-bold text-sm">Hard Mode Active</p>
<p class="text-xs text-slate-400 mt-1">Timer reduced by 20%. Multiplier set to 2.5x.</p>
</div>
</div>
</div>
</div>
<div class="bg-surface-dark border border-border-dark rounded-xl p-6 space-y-6">
<h2 class="text-lg font-bold flex items-center gap-2 text-slate-200">
<span class="material-symbols-outlined text-accent-green">list_alt</span>
Question Count
</h2>
<div class="flex items-center gap-3">
<button class="flex-1 py-3 rounded-lg border border-border-dark hover:border-primary hover:bg-primary/10 transition-all font-bold text-slate-400 hover:text-white">10</button>
<button class="flex-1 py-3 rounded-lg border border-primary bg-primary/20 text-white font-bold transition-all shadow-[0_0_10px_rgba(164,19,236,0.2)]">20</button>
<button class="flex-1 py-3 rounded-lg border border-border-dark hover:border-primary hover:bg-primary/10 transition-all font-bold text-slate-400 hover:text-white">50</button>
</div>
</div>
<div class="pt-4">
<button class="group w-full relative py-5 bg-primary text-white font-black text-xl rounded-xl neon-glow-primary hover:brightness-110 active:scale-[0.98] transition-all overflow-hidden">
<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48ZyBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0wIDQwaDQwVjBIMHY0MHptMjAgMjBWMjBIMjB2MjB6TTEwIDEwdjIwMTAgMTB6IiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAuMDUiLz48L2c+PC9zdmc+')] opacity-30"></div>
<span class="relative z-10 flex items-center justify-center gap-3">
BEGIN TRAINING
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform font-bold">arrow_forward</span>
</span>
</button>
<p class="text-center text-xs text-slate-500 mt-4 font-mono">ESTIMATED DURATION: 12 MIN</p>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
</body></html>