<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizMaster - Reward Center</title>
<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",
"accent": "#00f0ff",
"background-light": "#f6f6f8",
"background-dark": "#0a0a12", // Deeper dark for cyberpunk feel
"surface-dark": "#131118",
"surface-light": "#ffffff",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"],
"body": ["Spline Sans", "sans-serif"],
},
borderRadius: {
"DEFAULT": "0.125rem",
"sm": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "9999px",
},
boxShadow: {
'neon': '0 0 5px theme("colors.primary"), 0 0 20px theme("colors.primary")',
'neon-accent': '0 0 5px theme("colors.accent"), 0 0 20px theme("colors.accent")',
},
animation: {
'pulse-glow': 'pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
'pulse-glow': {
'0%, 100%': { boxShadow: '0 0 5px #5b13ec, 0 0 20px #5b13ec' },
'50%': { boxShadow: '0 0 10px #00f0ff, 0 0 30px #00f0ff' },
}
}
},
},
}
</script>
<style>
/* Custom scrollbar for cyberpunk feel */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0a0a12;
}
::-webkit-scrollbar-thumb {
background: #2e2839;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #5b13ec;
}
.clip-path-slant {
clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}
.clip-path-corner {
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - 15px),
calc(100% - 15px) 100%,
0 100%
);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 min-h-screen flex flex-col overflow-x-hidden selection:bg-accent selection:text-black">
<!-- Top Navigation -->
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-[#2e2839] px-6 py-4 bg-white/90 dark:bg-[#131118]/90 backdrop-blur-md sticky top-0 z-50">
<div class="flex items-center gap-4 text-slate-900 dark:text-white">
<div class="size-8 text-primary">
<span class="material-symbols-outlined !text-[32px]">sports_esports</span>
</div>
<h2 class="text-xl font-black leading-tight tracking-[-0.015em] uppercase">QuizMaster</h2>
</div>
<div class="flex flex-1 justify-end gap-8 items-center">
<nav class="hidden md:flex items-center gap-9">
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-accent text-sm font-bold uppercase tracking-wider transition-colors" href="#">Home</a>
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-accent text-sm font-bold uppercase tracking-wider transition-colors" href="#">Quizzes</a>
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-accent text-sm font-bold uppercase tracking-wider transition-colors" href="#">Leaderboard</a>
<a class="text-slate-600 dark:text-slate-300 hover:text-primary dark:hover:text-accent text-sm font-bold uppercase tracking-wider transition-colors" href="#">Shop</a>
</nav>
<div class="flex gap-3 items-center">
<button class="flex items-center justify-center overflow-hidden rounded bg-slate-100 dark:bg-[#2e2839] text-slate-900 dark:text-white gap-2 text-sm font-bold leading-normal tracking-[0.015em] px-3 py-2 border border-slate-300 dark:border-slate-700 hover:border-primary transition-colors">
<span class="material-symbols-outlined text-yellow-400 !text-[20px]">monetization_on</span>
<span>2,450</span>
</button>
<button class="flex items-center justify-center overflow-hidden rounded bg-slate-100 dark:bg-[#2e2839] text-slate-900 dark:text-white gap-2 text-sm font-bold leading-normal tracking-[0.015em] px-3 py-2 border border-slate-300 dark:border-slate-700 hover:border-accent transition-colors">
<span class="material-symbols-outlined text-accent !text-[20px]">bolt</span>
<span>12</span>
</button>
<button class="flex size-10 items-center justify-center overflow-hidden rounded-full bg-primary text-white hover:bg-primary/80 transition-all shadow-neon">
<img alt="User Profile" class="h-full w-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuArQPsDgdQrMSSK4-WI6vPNbo-27kbsRPqQ6XvvQdKZVlXEE0fPcVaCyEbzAoN0vMSHur2l6DiSS2GBlCcRzXMuXwqHQ9uGEVVgtFBgKWYi1Dvkrj7BZfmm7S0f1qfqJ4_C68wE2thEX4MhqdvrCGvEIRmRGTHgM1Yhrw20cwKVibXKcS5KILDN9qH6WePiw3RMmFhVukC2vIFybnsATPnNSPtmx8PWtyBztQCdFgPPb67XhsrLQtC6ev2vg7bDBQxErSGkEDflVOaP"/>
</button>
</div>
</div>
</header>
<main class="flex-grow container mx-auto px-4 py-8 max-w-7xl">
<!-- Hero Section: Reward Center Dashboard -->
<div class="mb-12 relative overflow-hidden rounded-xl border-2 border-primary/50 bg-surface-dark p-8 md:p-12 clip-path-corner">
<!-- Background Decoration -->
<div class="absolute top-0 right-0 -mt-20 -mr-20 h-96 w-96 rounded-full bg-primary/20 blur-3xl"></div>
<div class="absolute bottom-0 left-0 -mb-20 -ml-20 h-64 w-64 rounded-full bg-accent/10 blur-3xl"></div>
<div class="relative z-10 flex flex-col md:flex-row justify-between items-end gap-6">
<div class="max-w-2xl">
<div class="flex items-center gap-2 mb-2">
<span class="material-symbols-outlined text-accent">military_tech</span>
<span class="text-accent text-sm font-bold tracking-widest uppercase">Level 42 Commander</span>
</div>
<h1 class="text-5xl md:text-6xl font-black text-white tracking-tighter mb-4 drop-shadow-[0_0_10px_rgba(91,19,236,0.5)]">
REWARD <span class="text-transparent bg-clip-text bg-gradient-to-r from-accent to-primary">CENTER</span>
</h1>
<p class="text-slate-400 text-lg max-w-lg">Complete daily quests and weekly challenges to earn XP, Coins, and exclusive cyber-gear for your avatar.</p>
</div>
<!-- Today's Stats Cards -->
<div class="flex gap-4 w-full md:w-auto">
<div class="flex-1 md:w-40 bg-black/40 backdrop-blur border border-slate-700 p-4 rounded group hover:border-accent transition-colors">
<p class="text-slate-400 text-xs font-bold uppercase tracking-wider mb-1">Today's XP</p>
<div class="flex items-baseline gap-1">
<span class="text-2xl font-black text-white">1,250</span>
<span class="text-xs font-bold text-accent">+12%</span>
</div>
</div>
<div class="flex-1 md:w-40 bg-black/40 backdrop-blur border border-slate-700 p-4 rounded group hover:border-primary transition-colors">
<p class="text-slate-400 text-xs font-bold uppercase tracking-wider mb-1">Streak</p>
<div class="flex items-baseline gap-1">
<span class="text-2xl font-black text-white">7</span>
<span class="text-xs font-bold text-slate-400">Days</span>
</div>
<div class="w-full bg-slate-800 h-1 mt-2 rounded-full overflow-hidden">
<div class="bg-gradient-to-r from-primary to-accent w-full h-full"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Dashboard Grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
<!-- Left Column: Daily Quests (8 cols) -->
<div class="lg:col-span-7 xl:col-span-8 flex flex-col gap-6">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-accent text-3xl">timer</span>
<h2 class="text-2xl font-bold text-white tracking-wide uppercase">Daily Quests</h2>
</div>
<div class="text-sm font-mono text-slate-400 bg-slate-900 px-3 py-1 rounded border border-slate-700">
Resets in <span class="text-accent">04:23:12</span>
</div>
</div>
<!-- Active Quest Card -->
<div class="bg-[#1a1625] border border-l-4 border-slate-700 border-l-accent p-5 rounded relative overflow-hidden group hover:bg-[#201c2e] transition-all">
<div class="absolute top-0 right-0 p-2 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-9xl">history_edu</span>
</div>
<div class="flex flex-col sm:flex-row justify-between sm:items-center gap-4 relative z-10">
<div class="flex items-start gap-4">
<div class="bg-slate-800 p-3 rounded text-accent shrink-0">
<span class="material-symbols-outlined">menu_book</span>
</div>
<div>
<h3 class="text-lg font-bold text-white mb-1">History Buff</h3>
<p class="text-slate-400 text-sm mb-3">Answer 5 history questions correctly without a hint.</p>
<div class="flex items-center gap-4 text-xs font-bold uppercase tracking-wider text-slate-500">
<span class="flex items-center gap-1 text-accent"><span class="material-symbols-outlined !text-[16px]">bolt</span> 100 XP</span>
<span class="flex items-center gap-1 text-yellow-400"><span class="material-symbols-outlined !text-[16px]">monetization_on</span> 50 Coins</span>
</div>
</div>
</div>
<div class="flex flex-col items-end gap-2 min-w-[140px]">
<span class="text-accent font-mono text-sm">3/5 Completed</span>
<div class="w-full h-2 bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-primary to-accent w-[60%] shadow-[0_0_10px_#00f0ff]"></div>
</div>
<button class="mt-2 w-full py-2 px-4 bg-slate-800 hover:bg-slate-700 text-slate-300 text-sm font-bold uppercase rounded transition-colors disabled:opacity-50">
Continue
</button>
</div>
</div>
</div>
<!-- Completed Quest Card (Ready to Claim) -->
<div class="bg-[#1a1625] border border-l-4 border-primary shadow-[0_0_15px_rgba(91,19,236,0.15)] p-5 rounded relative overflow-hidden">
<div class="flex flex-col sm:flex-row justify-between sm:items-center gap-4 relative z-10">
<div class="flex items-start gap-4">
<div class="bg-primary/20 p-3 rounded text-primary shrink-0 ring-1 ring-primary/50">
<span class="material-symbols-outlined">science</span>
</div>
<div>
<h3 class="text-lg font-bold text-white mb-1">Lab Rat</h3>
<p class="text-slate-400 text-sm mb-3">Complete a Science quiz with >90% accuracy.</p>
<div class="flex items-center gap-4 text-xs font-bold uppercase tracking-wider text-slate-500">
<span class="flex items-center gap-1 text-accent"><span class="material-symbols-outlined !text-[16px]">bolt</span> 150 XP</span>
<span class="flex items-center gap-1 text-yellow-400"><span class="material-symbols-outlined !text-[16px]">monetization_on</span> 75 Coins</span>
</div>
</div>
</div>
<div class="flex flex-col items-end gap-2 min-w-[140px]">
<span class="text-primary font-bold font-mono text-sm flex items-center gap-1">
<span class="material-symbols-outlined !text-[16px]">check_circle</span> DONE
</span>
<button class="mt-2 w-full py-2 px-4 bg-primary text-white text-sm font-bold uppercase rounded animate-pulse-glow hover:bg-primary/90 transition-colors">
Claim Reward
</button>
</div>
</div>
</div>
<!-- Locked/Future Quest Card -->
<div class="bg-[#131118] border border-slate-800 p-5 rounded relative overflow-hidden opacity-75">
<div class="flex flex-col sm:flex-row justify-between sm:items-center gap-4 relative z-10">
<div class="flex items-start gap-4">
<div class="bg-slate-800 p-3 rounded text-slate-500 shrink-0">
<span class="material-symbols-outlined">lock</span>
</div>
<div>
<h3 class="text-lg font-bold text-slate-300 mb-1">Speed Demon</h3>
<p class="text-slate-500 text-sm mb-3">Answer 10 questions in under 60 seconds.</p>
<div class="flex items-center gap-4 text-xs font-bold uppercase tracking-wider text-slate-600">
<span class="flex items-center gap-1"><span class="material-symbols-outlined !text-[16px]">bolt</span> 200 XP</span>
</div>
</div>
</div>
<div class="flex flex-col items-end gap-2 min-w-[140px]">
<span class="text-slate-600 font-mono text-sm">Locked</span>
<div class="w-full h-2 bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-slate-700 w-0"></div>
</div>
</div>
</div>
</div>
<!-- Locked/Future Quest Card -->
<div class="bg-[#131118] border border-slate-800 p-5 rounded relative overflow-hidden opacity-75">
<div class="flex flex-col sm:flex-row justify-between sm:items-center gap-4 relative z-10">
<div class="flex items-start gap-4">
<div class="bg-slate-800 p-3 rounded text-slate-500 shrink-0">
<span class="material-symbols-outlined">lock</span>
</div>
<div>
<h3 class="text-lg font-bold text-slate-300 mb-1">Perfect Score</h3>
<p class="text-slate-500 text-sm mb-3">Get 100% on any Hard difficulty quiz.</p>
<div class="flex items-center gap-4 text-xs font-bold uppercase tracking-wider text-slate-600">
<span class="flex items-center gap-1"><span class="material-symbols-outlined !text-[16px]">bolt</span> 300 XP</span>
</div>
</div>
</div>
<div class="flex flex-col items-end gap-2 min-w-[140px]">
<span class="text-slate-600 font-mono text-sm">Locked</span>
<div class="w-full h-2 bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-slate-700 w-0"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column: Weekly Challenges (4 cols) -->
<div class="lg:col-span-5 xl:col-span-4 flex flex-col gap-6">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-primary text-3xl">emoji_events</span>
<h2 class="text-2xl font-bold text-white tracking-wide uppercase">Weekly Elite</h2>
</div>
</div>
<!-- Weekly Card 1 -->
<div class="bg-gradient-to-br from-[#1a1625] to-[#131118] border border-primary/30 p-6 rounded-lg relative overflow-hidden group clip-path-corner">
<div class="absolute top-0 right-0 w-24 h-24 bg-primary/10 rounded-full blur-2xl -mr-10 -mt-10"></div>
<div class="flex justify-between items-start mb-4">
<div class="bg-primary/20 text-primary px-3 py-1 text-xs font-bold uppercase rounded border border-primary/30">
Hard Mode
</div>
<div class="text-slate-400 text-xs font-mono">Ends in 2d 14h</div>
</div>
<h3 class="text-xl font-black text-white mb-2 uppercase italic">The Marathon</h3>
<p class="text-slate-400 text-sm mb-6">Complete 50 quizzes in a single week with an average score above 80%.</p>
<div class="space-y-4">
<div class="flex justify-between text-sm">
<span class="text-slate-300">Progress</span>
<span class="text-accent font-bold">42/50</span>
</div>
<div class="w-full h-3 bg-slate-800 rounded-sm overflow-hidden border border-slate-700">
<div class="h-full bg-gradient-to-r from-primary via-purple-500 to-accent w-[84%] relative">
<div class="absolute right-0 top-0 bottom-0 w-1 bg-white/50 animate-pulse"></div>
</div>
</div>
</div>
<div class="mt-6 pt-4 border-t border-slate-800 flex justify-between items-center">
<div class="flex flex-col">
<span class="text-[10px] text-slate-500 uppercase tracking-widest">Reward</span>
<div class="flex items-center gap-2 text-white font-bold">
<span class="material-symbols-outlined text-yellow-400">workspace_premium</span>
<span>1,000 XP</span>
</div>
</div>
<button class="bg-[#2e2839] hover:bg-primary hover:text-white text-slate-300 transition-colors p-2 rounded">
<span class="material-symbols-outlined">arrow_forward</span>
</button>
</div>
</div>
<!-- Weekly Card 2 -->
<div class="bg-gradient-to-br from-[#1a1625] to-[#131118] border border-slate-700 p-6 rounded-lg relative overflow-hidden group clip-path-corner hover:border-accent/50 transition-colors">
<div class="flex justify-between items-start mb-4">
<div class="bg-slate-700 text-slate-300 px-3 py-1 text-xs font-bold uppercase rounded">
Social
</div>
<div class="text-slate-400 text-xs font-mono">Ends in 5d 02h</div>
</div>
<h3 class="text-xl font-black text-white mb-2 uppercase italic">Challenger</h3>
<p class="text-slate-400 text-sm mb-6">Win 10 multiplayer duels against friends or random opponents.</p>
<div class="space-y-4">
<div class="flex justify-between text-sm">
<span class="text-slate-300">Progress</span>
<span class="text-accent font-bold">2/10</span>
</div>
<div class="w-full h-3 bg-slate-800 rounded-sm overflow-hidden border border-slate-700">
<div class="h-full bg-gradient-to-r from-primary to-accent w-[20%]"></div>
</div>
</div>
<div class="mt-6 pt-4 border-t border-slate-800 flex justify-between items-center">
<div class="flex flex-col">
<span class="text-[10px] text-slate-500 uppercase tracking-widest">Reward</span>
<div class="flex items-center gap-2 text-white font-bold">
<span class="material-symbols-outlined text-accent">diamond</span>
<span>500 Coins</span>
</div>
</div>
<button class="bg-[#2e2839] hover:bg-accent hover:text-black text-slate-300 transition-colors p-2 rounded">
<span class="material-symbols-outlined">arrow_forward</span>
</button>
</div>
</div>
<!-- Cyberpunk Ad / Promo Block -->
<div class="mt-4 border border-dashed border-slate-700 rounded p-6 flex flex-col items-center text-center bg-black/20">
<span class="material-symbols-outlined text-4xl text-slate-600 mb-2">stars</span>
<h4 class="text-white font-bold uppercase mb-1">Premium Pass</h4>
<p class="text-xs text-slate-500 mb-4">Unlock double XP and exclusive neon skins.</p>
<button class="text-xs font-bold text-primary hover:text-accent uppercase tracking-wider border-b border-primary hover:border-accent transition-colors pb-1">
View Shop
</button>
</div>
</div>
</div>
</main>
</body></html>