<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Quiz Portal - Rules & Rewards</title>
<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=Spline+Sans: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"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#5b13ec",
"primary-light": "#7c42f2",
"primary-dark": "#430eb5",
"background-light": "#f6f6f8",
"background-dark": "#161022",
"surface-dark": "#1f1c27",
"surface-light": "#ffffff",
"border-dark": "#2e2839",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"},
},
},
}
</script>
<style>
/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #161022;
}
::-webkit-scrollbar-thumb {
background: #2e2839;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #433b54;
}
.glass-panel {
background: rgba(31, 28, 39, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-display antialiased min-h-screen flex flex-col">
<!-- Navbar -->
<header class="sticky top-0 z-50 flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-[#2e2839] px-6 lg:px-10 py-3 bg-background-light/95 dark:bg-[#131118]/95 backdrop-blur-md">
<div class="flex items-center gap-4 text-slate-900 dark:text-white">
<div class="size-8 text-primary flex items-center justify-center">
<span class="material-symbols-outlined text-3xl">bolt</span>
</div>
<h2 class="text-lg font-bold leading-tight tracking-[-0.015em]">Quiz Portal</h2>
</div>
<div class="flex flex-1 justify-end gap-4 lg:gap-8 items-center">
<div class="hidden md:flex items-center gap-9">
<a class="text-slate-600 dark:text-slate-300 text-sm font-medium leading-normal hover:text-primary transition-colors" href="#">Home</a>
<a class="text-slate-600 dark:text-slate-300 text-sm font-medium leading-normal hover:text-primary transition-colors" href="#">Leaderboard</a>
<a class="text-slate-600 dark:text-slate-300 text-sm font-medium leading-normal hover:text-primary transition-colors" href="#">Profile</a>
</div>
<div class="flex items-center gap-4">
<div class="flex flex-col items-end hidden sm:flex">
<span class="text-xs font-medium text-slate-400">Welcome back,</span>
<span class="text-sm font-bold">Alex Gamer</span>
</div>
<div class="bg-center bg-no-repeat bg-cover rounded-full size-10 ring-2 ring-primary/20" data-alt="User profile avatar" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBC6S0EDBzwZ0qHRHRGtAC1B9Hx-199PhJgm4cqt14Z3AVjyEFldm0oept5Y2YpjfLSe5eVVmFvEwn6o88ssycJH9bW9dmDb30ktqZAmtWf4paaIXLz1_jEtW-yjfldlm4Eqwr3XkeFcUM_lXIQpFJFnMU0t9n53MSTLR0A6KK2v56MKR45CWTUzsNso1jX7eY6MmLNtAjzJCCyhTTUJFw9O0BNJimimcUIX6xt5i9GxIH2uCVHvZRJ9nq1YbNE55wM7NbtBjy8uMLR");'></div>
</div>
</div>
</header>
<!-- Main Content Area -->
<main class="flex-grow flex flex-col items-center justify-start px-4 pb-24 pt-8 w-full max-w-[1200px] mx-auto">
<!-- Hero Section -->
<div class="w-full grid grid-cols-1 lg:grid-cols-12 gap-8 mb-12">
<!-- Left: Title & Info -->
<div class="lg:col-span-8 flex flex-col justify-center gap-6">
<div class="inline-flex items-center self-start gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-wider">
<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 Event
</div>
<div>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-black tracking-tight text-slate-900 dark:text-white mb-2 leading-[1.1]">
Cyber-Sprint Challenge: <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-purple-400">Week 4</span>
</h1>
<p class="text-slate-500 dark:text-[#a69db9] text-lg max-w-2xl">
Test your tech knowledge in a high-speed sprint. Top rankers take home premium gadgets and exclusive badges.
</p>
</div>
<!-- Stats Row -->
<div class="flex flex-wrap gap-4 mt-2">
<div class="bg-white dark:bg-[#1f1c27] border border-slate-200 dark:border-[#2e2839] rounded-xl p-4 flex items-center gap-3 min-w-[160px]">
<div class="bg-primary/10 p-2 rounded-lg text-primary">
<span class="material-symbols-outlined">quiz</span>
</div>
<div>
<div class="text-xs text-slate-500 dark:text-slate-400 uppercase font-semibold">Questions</div>
<div class="text-xl font-bold dark:text-white">20 Qs</div>
</div>
</div>
<div class="bg-white dark:bg-[#1f1c27] border border-slate-200 dark:border-[#2e2839] rounded-xl p-4 flex items-center gap-3 min-w-[160px]">
<div class="bg-primary/10 p-2 rounded-lg text-primary">
<span class="material-symbols-outlined">timer</span>
</div>
<div>
<div class="text-xs text-slate-500 dark:text-slate-400 uppercase font-semibold">Duration</div>
<div class="text-xl font-bold dark:text-white">10 Mins</div>
</div>
</div>
<div class="bg-white dark:bg-[#1f1c27] border border-slate-200 dark:border-[#2e2839] rounded-xl p-4 flex items-center gap-3 min-w-[160px]">
<div class="bg-primary/10 p-2 rounded-lg text-primary">
<span class="material-symbols-outlined">group</span>
</div>
<div>
<div class="text-xs text-slate-500 dark:text-slate-400 uppercase font-semibold">Participants</div>
<div class="text-xl font-bold dark:text-white">1,240+</div>
</div>
</div>
</div>
</div>
<!-- Right: Prize Pool Hero Card -->
<div class="lg:col-span-4">
<div class="h-full relative overflow-hidden rounded-2xl bg-gradient-to-br from-[#1f1c27] to-[#131118] border border-primary/30 shadow-2xl shadow-primary/10 flex flex-col items-center justify-center text-center p-8 group">
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1550684848-fac1c5b4e853?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80')] opacity-10 bg-cover bg-center mix-blend-overlay" data-alt="Abstract cyber texture background"></div>
<div class="relative z-10 flex flex-col items-center">
<span class="text-primary-light font-bold tracking-widest uppercase text-sm mb-2">Total Prize Pool</span>
<h2 class="text-5xl font-black text-white mb-1">$5,000</h2>
<p class="text-slate-400 text-sm mb-6">+ Tech Gadgets</p>
<div class="flex items-center gap-2 mb-6">
<div class="flex -space-x-3">
<img alt="Winner 1" class="w-10 h-10 rounded-full border-2 border-[#1f1c27]" data-alt="Portrait of past winner" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD9Td1cNCOrQbt8hvd4AQBV2k8JZZ9SyDiwsbzyW0PtHQt2GrvP-YEx-XzChSts-sARHQgI3XyS-_zsycZrFXz_eZ6kBPq3pDGIWSsfQ8PDmRh6qqXhEXyfdhUlokyrZ5XT8jW6PJIkm8mAHOWOleF1Fm0Gn008G-akBEDzc9iLjKPIcuYOQ6fgao3UkZnSvVGxXvYms6VQPfy3oeSPtpHHbHzJ58EZMwYHf3qtYHcS1IuLfwf7tgxGUzSl0s4fYT_GDfZmp-SGOAJ_"/>
<img alt="Winner 2" class="w-10 h-10 rounded-full border-2 border-[#1f1c27]" data-alt="Portrait of past winner" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAyJda30MM9hnkpBLM24NZ7AM7t0g2RVDXm0X3SqUteFanEZiA8M3HwP3SB3vYCTJkY6rE2MxorJIVcYi5EAHRX-_qftf4AE6RdjKSxVOsPykMLJVamYPv9QJcSLi-8mVZfbmu15ncGNqLYckAcRwbojMerHOeU75kupS37qIrk7so9LbfDx2LW8G66olYqAmPu1NSFWXcxLWuTayhTopuLONPbRjFhrQXWnezcwaImOSojvi7URF2DZHnfy6Azfi6vL2iVgZ6Dnh2Q"/>
<img alt="Winner 3" class="w-10 h-10 rounded-full border-2 border-[#1f1c27]" data-alt="Portrait of past winner" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD3r0x2PXGMjcz7tg3FeSSef5nzbSAQZ5pXUNEkRx3cPtvw5YXVcFGfEnVve78TVVhupdwRb7saddWfLw9fd1mhGXj-ZJs8il4OwjHncKjyyO0dKis9q4Pbk2GrZ1HyHpVpIIQrj3Aj_i7Hr68JK5w3xYOib5yk3PiyG5uMITrvy1sBQGQlx-Q659GlDB2kjw2v3jEaBdGGYvRKA8oRUt4kZ8wzkgGBjcwq7OAcn_kGktEGdnZGrRTzX2zFeJ9kWa0NBWaT9d6jvWr9"/>
</div>
<span class="text-xs text-slate-400 font-medium">Recent Winners</span>
</div>
<button class="w-full py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-full text-white text-sm font-bold transition-all flex items-center justify-center gap-2">
<span class="material-symbols-outlined text-lg">share</span>
Share Challenge
</button>
</div>
</div>
</div>
</div>
<!-- Content Grid: Rules & Rewards -->
<div class="w-full grid grid-cols-1 lg:grid-cols-12 gap-8">
<!-- Left Column: Rulebook -->
<div class="lg:col-span-7 flex flex-col gap-8">
<div>
<h3 class="text-2xl font-bold dark:text-white mb-6 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">gavel</span>
Rulebook
</h3>
<div class="grid gap-4">
<!-- Rule 1 -->
<div class="group relative overflow-hidden rounded-xl bg-white dark:bg-[#1f1c27] border border-slate-200 dark:border-[#2e2839] p-5 transition-all hover:border-primary/50 hover:shadow-lg hover:shadow-primary/5">
<div class="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-6xl text-primary">bolt</span>
</div>
<div class="flex gap-5 items-start relative z-10">
<div class="bg-primary/10 p-3 rounded-full text-primary shrink-0">
<span class="material-symbols-outlined">speed</span>
</div>
<div>
<h4 class="text-lg font-bold dark:text-white mb-1">Speed Demon Bonus</h4>
<p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">
Answer within <span class="text-primary font-bold">5 seconds</span> to earn +10 bonus points per question. Hesitation costs points!
</p>
</div>
</div>
</div>
<!-- Rule 2 -->
<div class="group relative overflow-hidden rounded-xl bg-white dark:bg-[#1f1c27] border border-slate-200 dark:border-[#2e2839] p-5 transition-all hover:border-primary/50 hover:shadow-lg hover:shadow-primary/5">
<div class="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-6xl text-primary">timer</span>
</div>
<div class="flex gap-5 items-start relative z-10">
<div class="bg-primary/10 p-3 rounded-full text-primary shrink-0">
<span class="material-symbols-outlined">hourglass_top</span>
</div>
<div>
<h4 class="text-lg font-bold dark:text-white mb-1">Clock is Ticking</h4>
<p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">
You have strictly <span class="text-primary font-bold">20 seconds</span> per question. Unanswered questions will be marked as zero.
</p>
</div>
</div>
</div>
<!-- Rule 3 -->
<div class="group relative overflow-hidden rounded-xl bg-white dark:bg-[#1f1c27] border border-slate-200 dark:border-[#2e2839] p-5 transition-all hover:border-primary/50 hover:shadow-lg hover:shadow-primary/5">
<div class="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-6xl text-primary">security</span>
</div>
<div class="flex gap-5 items-start relative z-10">
<div class="bg-primary/10 p-3 rounded-full text-primary shrink-0">
<span class="material-symbols-outlined">verified_user</span>
</div>
<div>
<h4 class="text-lg font-bold dark:text-white mb-1">Fair Play Policy</h4>
<p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">
Tab switching or minimizing the browser will result in <span class="text-red-400 font-bold">immediate disqualification</span>.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column: Rewards -->
<div class="lg:col-span-5 flex flex-col gap-8">
<div>
<h3 class="text-2xl font-bold dark:text-white mb-6 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">trophy</span>
Reward Distribution
</h3>
<div class="flex flex-col gap-3">
<!-- Rank 1 Card -->
<div class="relative overflow-hidden rounded-xl p-[1px] bg-gradient-to-r from-yellow-400 via-yellow-200 to-yellow-500">
<div class="relative h-full bg-[#1f1c27] rounded-[11px] p-4 flex items-center gap-4">
<div class="flex flex-col items-center justify-center w-14 h-14 bg-gradient-to-br from-yellow-400 to-amber-600 rounded-lg shadow-lg shrink-0 text-white">
<span class="text-[10px] font-bold uppercase tracking-wider">Rank</span>
<span class="text-2xl font-black leading-none">1</span>
</div>
<div class="flex-1">
<h4 class="text-white font-bold text-lg">iPhone 15 Pro Max</h4>
<p class="text-yellow-400/80 text-xs font-medium">Titanium Black • 256GB</p>
</div>
<div class="h-12 w-12 bg-contain bg-center bg-no-repeat" data-alt="iPhone 15 product shot" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuATjLHjWlLxZ4NTBQi9U-DhpPyg0f0YOuN6xmq057vMugzXNvJGtZeiXqaSfBJG1HsZz52vrIMiJv5l7m9-E2eQEGsLyrPAzz8C3HwAWMPwyf1PN4fcvGQcM9HIIaM-00lKO9AGzcolGTvD1ZDBxTBArLtDJk2dOmRscxtPaMN4Ij4_MXt6go8mCNei_wIJQEGQd_5fViv0sT8QU3hetxr32YvmOKiQeAcBOaPuaJyGR7X3l-N7YzKrVE_1UKdQCSIagfkbW7MhpnDu');"></div>
</div>
</div>
<!-- Rank 2 Card -->
<div class="relative overflow-hidden rounded-xl bg-[#1f1c27] border border-slate-700 p-4 flex items-center gap-4">
<div class="flex flex-col items-center justify-center w-12 h-12 bg-slate-600 rounded-lg shrink-0 text-white/90">
<span class="text-[9px] font-bold uppercase tracking-wider">Rank</span>
<span class="text-xl font-black leading-none">2</span>
</div>
<div class="flex-1">
<h4 class="text-white font-bold text-base">Sony WH-1000XM5</h4>
<p class="text-slate-400 text-xs font-medium">Noise Cancelling Headphones</p>
</div>
<div class="h-10 w-10 bg-contain bg-center bg-no-repeat rounded-md bg-white" data-alt="Headphones product shot" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCseCKWDgJEqrnoiScrfW86VnRJgq9pzhV7q5xajExtPTrHQruwiPTRztRDO5AHiSgUCcXavtNALrUHMxcjhpVUZD80mmE0cvfJ4lXpmKdmK9i4XBguDBVZkRRVNlc126cEO0Z0NyMeZ2W4QZbzmaO_LwNCjkJW5C4ghoQ7t5krc2RTw-y49eyFF28YgBLSdciTZPyeF37IBspoWTz9m3nQea8act59FSVh2oO0SNx8bJ0bfz-NUErV04EkQBcsPb3fUs18Y769s1G8');"></div>
</div>
<!-- Rank 3 Card -->
<div class="relative overflow-hidden rounded-xl bg-[#1f1c27] border border-slate-700 p-4 flex items-center gap-4">
<div class="flex flex-col items-center justify-center w-12 h-12 bg-[#8c5737] rounded-lg shrink-0 text-white/90">
<span class="text-[9px] font-bold uppercase tracking-wider">Rank</span>
<span class="text-xl font-black leading-none">3</span>
</div>
<div class="flex-1">
<h4 class="text-white font-bold text-base">Mechanical Keyboard</h4>
<p class="text-slate-400 text-xs font-medium">Keychron K2 Pro</p>
</div>
<div class="h-10 w-10 bg-contain bg-center bg-no-repeat rounded-md" data-alt="Keyboard product shot" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuA-StlVhxejZQPJwcnu-PcXWjo2FaKb-tRzgBDo_V-y0E3FgOOSnH-OBTncBOK94SH-TWbWcHXLv2fUz1xq6eCzEUxQVADQH6b3-EO2-F92P8XabZ8XJJ4Rf_HbFdHO3ZSEZ5aSJit-k3uoGT0lRSCwre1dKPt6BtQ-jvVYYU4xy1bNVRqF1eSQc0xLHp97Fu5IPxVieS4ByC1YZAlq2wSm68cTlDFf9Cyh6RKxvaKugQn4BdpzeN28jq9JBq2xmBl59hyL6z5YSbFR');"></div>
</div>
<!-- Rank 4-10 Card -->
<div class="relative overflow-hidden rounded-xl bg-[#1f1c27]/50 border border-[#2e2839] p-3 flex items-center gap-4">
<div class="flex items-center justify-center w-10 h-10 bg-[#2e2839] rounded-lg shrink-0 text-slate-300">
<span class="text-xs font-bold">4-10</span>
</div>
<div class="flex-1">
<h4 class="text-slate-300 font-medium text-sm">$50 Amazon Gift Card</h4>
</div>
<span class="material-symbols-outlined text-slate-500">card_giftcard</span>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Sticky Footer Action Bar -->
<div class="fixed bottom-0 left-0 w-full z-40 px-4 pb-6 pt-4 bg-gradient-to-t from-background-dark via-background-dark to-transparent pointer-events-none">
<div class="max-w-[1200px] mx-auto flex items-center justify-between pointer-events-auto bg-[#1f1c27] border border-[#2e2839] rounded-2xl p-4 shadow-2xl shadow-black/50">
<div class="hidden md:flex flex-col px-2">
<span class="text-xs text-slate-400 uppercase tracking-wider font-bold">Entry Fee</span>
<div class="flex items-center gap-2">
<span class="text-white font-bold text-xl">Free</span>
<span class="text-xs bg-green-500/20 text-green-400 px-2 py-0.5 rounded-full font-bold">Sponsored</span>
</div>
</div>
<div class="flex-1 md:flex-none flex items-center justify-end gap-4 md:gap-8 w-full md:w-auto">
<div class="flex flex-col items-end mr-4">
<span class="text-xs text-slate-400 mb-1">Starts in</span>
<div class="flex gap-1 text-white font-mono text-sm font-bold">
<span class="bg-[#2e2839] px-1.5 py-1 rounded">02</span>:
<span class="bg-[#2e2839] px-1.5 py-1 rounded">14</span>:
<span class="bg-[#2e2839] px-1.5 py-1 rounded">59</span>
</div>
</div>
<button class="flex-1 md:flex-none bg-primary hover:bg-primary-light text-white font-bold text-lg py-3 px-10 rounded-full shadow-lg shadow-primary/40 transition-all transform hover:scale-105 active:scale-95 flex items-center justify-center gap-2 group">
<span>Enter Quest</span>
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span>
</button>
</div>
</div>
</div>
</body></html>