<!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 Setup - QuizPortal</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;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://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": "#0a0a0a",
"surface-dark": "#161022",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}
.nebula-bg {
background: radial-gradient(circle at 20% 30%, rgba(91, 19, 236, 0.15) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(15, 10, 34, 1) 0%, rgba(5, 5, 5, 1) 100%);
}
.glass-card {
background: rgba(22, 16, 34, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.active-ring {
box-shadow: 0 0 20px rgba(91, 19, 236, 0.4);
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
background: #5b13ec;
cursor: pointer;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 0 0 15px rgba(91, 19, 236, 0.6);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen overflow-x-hidden nebula-bg">
<div class="relative flex min-h-screen w-full flex-col">
<!-- Top Navigation -->
<header class="flex items-center justify-between border-b border-white/5 px-8 py-4 glass-card sticky top-0 z-50">
<div class="flex items-center gap-4">
<div class="size-10 bg-primary rounded-xl flex items-center justify-center text-white">
<span class="material-symbols-outlined text-3xl">rocket_launch</span>
</div>
<h2 class="text-xl font-extrabold tracking-tight">QuizPortal</h2>
</div>
<nav class="hidden md:flex items-center gap-10">
<a class="text-sm font-semibold opacity-70 hover:opacity-100 transition-opacity" href="#">Dashboard</a>
<a class="text-sm font-semibold text-primary underline underline-offset-8" href="#">Practice</a>
<a class="text-sm font-semibold opacity-70 hover:opacity-100 transition-opacity" href="#">Leagues</a>
<a class="text-sm font-semibold opacity-70 hover:opacity-100 transition-opacity" href="#">Profile</a>
</nav>
<div class="flex items-center gap-3">
<button class="flex size-10 items-center justify-center rounded-full bg-white/5 hover:bg-white/10 transition-colors">
<span class="material-symbols-outlined text-xl">notifications</span>
</button>
<button class="flex size-10 items-center justify-center rounded-full bg-white/5 hover:bg-white/10 transition-colors">
<span class="material-symbols-outlined text-xl">settings</span>
</button>
<div class="size-10 rounded-full border-2 border-primary p-0.5 ml-2">
<img alt="User Profile" class="w-full h-full object-cover rounded-full" data-alt="User avatar placeholder image" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCkmTsEGIUVkUDzkfmxPDhdxeqDIWXMXVvBrrIeMsI2VT1EELo4AmtvIplOWla61sQC8LDENlfLUYG522nHSXAEbz2patN6gAACc2OmiQRs0LNyyHMZoezNlA8eUQyfbkctbXVL6sn5EtUQLaSV7kiML1OkZ3yeurEjHEy3AZ-G4NiAOjynkocX88jDO0r7vhrrGR4G75C7mUergu9D9RpR-ly_lSOWrwEC-6IBAgChQORTfAOYId9r9Wv65toiLfIjxgduOaNzxdk7"/>
</div>
</div>
</header>
<main class="flex-1 flex flex-col items-center justify-center px-4 py-12 max-w-5xl mx-auto w-full">
<!-- Hero Header -->
<div class="text-center mb-12">
<span class="inline-block py-1 px-4 rounded-full bg-primary/20 text-primary text-xs font-bold uppercase tracking-widest mb-4">Training Module</span>
<h1 class="text-5xl font-black mb-4 tracking-tighter">Prepare for Excellence</h1>
<p class="text-slate-400 text-lg max-w-xl mx-auto">Configure your training session to sharpen your skills and climb the seasonal leaderboard.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 w-full">
<!-- Left Column: Setup Steps -->
<div class="lg:col-span-8 flex flex-col gap-8">
<!-- Step 1: Category -->
<section>
<div class="flex items-center gap-3 mb-6">
<span class="flex size-8 items-center justify-center rounded-full bg-primary text-white font-bold text-sm">1</span>
<h2 class="text-2xl font-bold">Choose Your Field</h2>
</div>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
<!-- Science -->
<button class="group relative flex flex-col items-center justify-center p-6 rounded-xl glass-card hover:border-primary/50 transition-all border-2 border-transparent active-ring">
<span class="material-symbols-outlined text-4xl text-primary mb-3">science</span>
<span class="font-bold text-sm">Science</span>
<div class="absolute top-2 right-2 opacity-100">
<span class="material-symbols-outlined text-primary text-sm">check_circle</span>
</div>
</button>
<!-- History -->
<button class="group flex flex-col items-center justify-center p-6 rounded-xl glass-card hover:border-primary/50 transition-all border-2 border-transparent">
<span class="material-symbols-outlined text-4xl text-slate-400 group-hover:text-primary mb-3">history_edu</span>
<span class="font-bold text-sm">History</span>
</button>
<!-- Pop Culture -->
<button class="group flex flex-col items-center justify-center p-6 rounded-xl glass-card hover:border-primary/50 transition-all border-2 border-transparent">
<span class="material-symbols-outlined text-4xl text-slate-400 group-hover:text-primary mb-3">movie</span>
<span class="font-bold text-sm">Culture</span>
</button>
<!-- Tech -->
<button class="group flex flex-col items-center justify-center p-6 rounded-xl glass-card hover:border-primary/50 transition-all border-2 border-transparent">
<span class="material-symbols-outlined text-4xl text-slate-400 group-hover:text-primary mb-3">memory</span>
<span class="font-bold text-sm">Tech</span>
</button>
</div>
</section>
<!-- Step 2: Difficulty -->
<section>
<div class="flex items-center gap-3 mb-6">
<span class="flex size-8 items-center justify-center rounded-full bg-primary text-white font-bold text-sm">2</span>
<h2 class="text-2xl font-bold">Set Difficulty</h2>
</div>
<div class="grid grid-cols-3 gap-4">
<button class="flex flex-col gap-2 p-5 rounded-xl glass-card border-2 border-transparent hover:border-emerald-500/30 transition-all text-left">
<span class="text-xs font-bold text-emerald-400 uppercase tracking-widest">Apprentice</span>
<span class="text-lg font-bold">Easy</span>
<span class="text-xs text-slate-500">1.0x Points</span>
</button>
<button class="flex flex-col gap-2 p-5 rounded-xl bg-primary border-2 border-primary active-ring text-left">
<span class="text-xs font-bold text-white/70 uppercase tracking-widest">Warrior</span>
<span class="text-lg font-bold">Medium</span>
<span class="text-xs text-white/60">1.5x Points</span>
</button>
<button class="flex flex-col gap-2 p-5 rounded-xl glass-card border-2 border-transparent hover:border-rose-500/30 transition-all text-left">
<span class="text-xs font-bold text-rose-400 uppercase tracking-widest">Legend</span>
<span class="text-lg font-bold">Hard</span>
<span class="text-xs text-slate-500">2.5x Points</span>
</button>
</div>
</section>
<!-- Step 3: Question Count -->
<section>
<div class="flex items-center gap-3 mb-6">
<span class="flex size-8 items-center justify-center rounded-full bg-primary text-white font-bold text-sm">3</span>
<h2 class="text-2xl font-bold">Number of Questions</h2>
</div>
<div class="p-8 rounded-xl glass-card">
<div class="flex justify-between items-center mb-6">
<span class="text-slate-400 font-medium">Session Length</span>
<span class="text-3xl font-black text-primary">25 <span class="text-sm font-normal text-slate-500 ml-1">Questions</span></span>
</div>
<input class="w-full h-2 bg-white/10 rounded-full appearance-none cursor-pointer accent-primary" max="50" min="5" type="range" value="25"/>
<div class="flex justify-between mt-4 text-xs font-bold text-slate-600 uppercase tracking-tighter">
<span>Quick (5)</span>
<span>Standard (25)</span>
<span>Marathon (50)</span>
</div>
</div>
</section>
</div>
<!-- Right Column: Summary & CTA -->
<div class="lg:col-span-4">
<div class="sticky top-28 flex flex-col gap-6 p-8 rounded-xl glass-card border-primary/20 border">
<h3 class="text-xl font-bold">Session Summary</h3>
<ul class="flex flex-col gap-4">
<li class="flex justify-between items-center text-sm border-b border-white/5 pb-4">
<span class="text-slate-400">Category</span>
<span class="font-bold text-white">Science</span>
</li>
<li class="flex justify-between items-center text-sm border-b border-white/5 pb-4">
<span class="text-slate-400">Difficulty</span>
<span class="font-bold text-white">Medium</span>
</li>
<li class="flex justify-between items-center text-sm border-b border-white/5 pb-4">
<span class="text-slate-400">Questions</span>
<span class="font-bold text-white">25 Items</span>
</li>
<li class="flex justify-between items-center text-sm">
<span class="text-slate-400">XP Potential</span>
<span class="font-bold text-primary">+1,250 XP</span>
</li>
</ul>
<div class="pt-4">
<button class="w-full group relative flex items-center justify-center gap-3 bg-primary py-5 rounded-full text-white font-black text-lg tracking-wide hover:scale-105 transition-transform overflow-hidden shadow-[0_0_30px_rgba(91,19,236,0.5)]">
<span class="relative z-10">START TRAINING</span>
<span class="material-symbols-outlined relative z-10 animate-pulse">play_arrow</span>
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700"></div>
</button>
<p class="text-center text-[10px] text-slate-500 mt-4 uppercase tracking-[0.2em] font-bold">Results will be saved to your profile</p>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="mt-auto px-8 py-8 border-t border-white/5 text-center">
<div class="flex flex-wrap justify-center gap-8 mb-4">
<a class="text-xs text-slate-500 hover:text-white transition-colors" href="#">Privacy Policy</a>
<a class="text-xs text-slate-500 hover:text-white transition-colors" href="#">Terms of Service</a>
<a class="text-xs text-slate-500 hover:text-white transition-colors" href="#">Help Center</a>
<a class="text-xs text-slate-500 hover:text-white transition-colors" href="#">Developer API</a>
</div>
<p class="text-[10px] text-slate-600 font-medium">© 2024 QUIZPORTAL INTERACTIVE. ALL RIGHTS RESERVED.</p>
</footer>
</div>
<!-- Background Decoration -->
<div class="fixed top-0 left-0 w-full h-full pointer-events-none -z-10 opacity-40">
<div class="absolute top-[10%] left-[15%] size-64 bg-primary/20 rounded-full blur-[120px]"></div>
<div class="absolute bottom-[20%] right-[10%] size-96 bg-violet-600/10 rounded-full blur-[150px]"></div>
</div>
</body></html>