<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Reward Quest - Bold 3D Gamified</title>
<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" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@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"/>
<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-dark": "#3e0ca8",
"primary-light": "#8451f5",
"accent-yellow": "#FACC15",
"accent-pink": "#FF00E6",
"background-light": "#f6f6f8",
"background-dark": "#161022",
"surface-dark": "#241a38",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
boxShadow: {
"3d-primary": "0px 8px 0px 0px #3e0ca8",
"3d-accent": "0px 6px 0px 0px #b45309",
"3d-surface": "0px 6px 0px 0px #130e1f",
"glow": "0 0 20px rgba(91, 19, 236, 0.5)",
"glow-yellow": "0 0 20px rgba(250, 204, 21, 0.4)",
}
},
},
}
</script>
<style>
/* Custom scrollbar for a cleaner look */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #161022;
}
::-webkit-scrollbar-thumb {
background: #3e0ca8;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #5b13ec;
}
/* 3D Button Active State simulation */
.btn-3d:active {
transform: translateY(4px);
box-shadow: 0px 2px 0px 0px #3e0ca8 !important; /* Adjust shadow color dynamically if needed */
}
/* Map Path Dashed Line Animation simulation */
.map-path {
background-image: radial-gradient(circle, #5b13ec 25%, transparent 25%);
background-size: 20px 20px;
background-position: center;
}
.floating-element {
animation: float 4s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
/* Abstract Particles Background */
.particles {
background-image: radial-gradient(#2e2839 1px, transparent 1px), radial-gradient(#2e2839 1px, transparent 1px);
background-size: 40px 40px;
background-position: 0 0, 20px 20px;
opacity: 0.2;
}
</style>
</head>
<body class="bg-background-dark text-slate-100 font-display overflow-x-hidden min-h-screen flex flex-col relative selection:bg-accent-yellow selection:text-black">
<!-- Ambient Glow Background -->
<div class="fixed inset-0 pointer-events-none z-0 overflow-hidden">
<div class="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-primary/20 rounded-full blur-[120px]"></div>
<div class="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-accent-pink/10 rounded-full blur-[120px]"></div>
<div class="absolute top-[20%] right-[20%] w-[20%] h-[20%] bg-accent-yellow/5 rounded-full blur-[80px]"></div>
<div class="absolute inset-0 particles"></div>
</div>
<!-- Top Navigation (Gamified HUD) -->
<header class="relative z-20 flex items-center justify-between px-6 py-4 lg:px-12 w-full max-w-7xl mx-auto">
<!-- Logo / Title -->
<div class="flex items-center gap-3">
<div class="w-12 h-12 bg-gradient-to-br from-accent-yellow to-orange-500 rounded-2xl flex items-center justify-center shadow-3d-accent transform -rotate-3 border-2 border-white/10">
<span class="material-symbols-outlined text-black font-bold text-3xl">sports_esports</span>
</div>
<div class="flex flex-col">
<h1 class="text-2xl font-black tracking-tight leading-none uppercase italic text-white drop-shadow-md">Quest<span class="text-accent-yellow">Master</span></h1>
<span class="text-xs font-bold text-slate-400 uppercase tracking-widest">Saga Map</span>
</div>
</div>
<!-- Resources / Stats -->
<div class="hidden md:flex items-center gap-4 bg-surface-dark/80 backdrop-blur-md p-2 rounded-full border border-white/5 shadow-xl">
<!-- Energy -->
<div class="flex items-center gap-2 pl-2 pr-4 py-1.5 bg-[#1a1426] rounded-full border border-white/5">
<span class="material-symbols-outlined text-accent-yellow">bolt</span>
<div class="flex flex-col leading-none">
<span class="text-xs text-slate-400 font-bold uppercase">Energy</span>
<span class="font-black text-white">12/20</span>
</div>
</div>
<!-- Gems -->
<div class="flex items-center gap-2 pl-2 pr-4 py-1.5 bg-[#1a1426] rounded-full border border-white/5">
<span class="material-symbols-outlined text-accent-pink">diamond</span>
<div class="flex flex-col leading-none">
<span class="text-xs text-slate-400 font-bold uppercase">Gems</span>
<span class="font-black text-white">450</span>
</div>
</div>
<!-- Coins -->
<div class="flex items-center gap-2 pl-2 pr-4 py-1.5 bg-[#1a1426] rounded-full border border-white/5">
<span class="material-symbols-outlined text-amber-400">monetization_on</span>
<div class="flex flex-col leading-none">
<span class="text-xs text-slate-400 font-bold uppercase">Gold</span>
<span class="font-black text-white">1,200</span>
</div>
</div>
<!-- Avatar -->
<button class="relative group ml-2">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-primary-dark border-2 border-white/20 shadow-lg overflow-hidden">
<img alt="3D avatar character headshot" class="w-full h-full object-cover" data-alt="User avatar showing a character face" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDslmAg43l1YAqFOT-iPQ0wzT7cZ7VehjpRQBcqkXrIRIV25zTST1VXluLIEcU-NCeE7Hbr_MAAIeaZalk-Z0yu03F-Jy9a6meZYRZgU1WCEHHxiIza_iGO8FgkteYivw4Gfeqk5G-Y8CGeDWYXa7UwmHPb6Lcuw1LpC3UYcI6nzVF_W8nPtjqE5EYHCW0KPiq57xP91rWhegJQJY_sjHMJRYIaVtiX6jS00KNz9ovvYe3tgWkbDrs7A10zZq5QcottO5j6M3hQ--tq"/>
</div>
<div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-surface-dark"></div>
</button>
</div>
<!-- Mobile Menu Icon -->
<button class="md:hidden w-10 h-10 bg-surface-dark rounded-xl flex items-center justify-center text-white shadow-3d-surface border border-white/10 active:translate-y-1 active:shadow-none transition-all">
<span class="material-symbols-outlined">menu</span>
</button>
</header>
<!-- Main Content Area -->
<main class="relative z-10 flex-grow w-full max-w-7xl mx-auto px-4 lg:px-8 py-8 flex flex-col lg:flex-row gap-8 lg:gap-16">
<!-- Left Column: The Saga Map -->
<div class="flex-grow relative flex justify-center">
<!-- Path Line (Absolute centered) -->
<div class="absolute top-0 bottom-0 left-1/2 -translate-x-1/2 w-4 md:w-6 bg-surface-dark rounded-full z-0 border-x border-white/5">
<!-- Inner glow line -->
<div class="w-1 h-full mx-auto bg-primary/30 rounded-full blur-[2px]"></div>
</div>
<!-- Map Nodes Container -->
<div class="flex flex-col gap-24 w-full max-w-lg z-10 py-10">
<!-- Node 5: Locked (Top) -->
<div class="flex items-center justify-center relative opacity-60 grayscale group">
<div class="absolute -right-4 md:-right-24 top-1/2 -translate-y-1/2 hidden md:block">
<div class="bg-surface-dark border border-white/5 px-4 py-2 rounded-xl text-sm font-bold text-slate-400 shadow-xl">
Level 5: Legend
</div>
</div>
<div class="w-20 h-20 md:w-24 md:h-24 rounded-full bg-surface-dark border-4 border-[#2e2839] flex items-center justify-center shadow-2xl relative">
<span class="material-symbols-outlined text-4xl text-slate-600">lock</span>
</div>
</div>
<!-- Node 4: Locked -->
<div class="flex items-center justify-center relative opacity-80 group">
<div class="absolute -left-4 md:-left-24 top-1/2 -translate-y-1/2 hidden md:block text-right">
<div class="bg-surface-dark border border-white/5 px-4 py-2 rounded-xl text-sm font-bold text-slate-400 shadow-xl">
Level 4: Master
</div>
</div>
<div class="w-20 h-20 md:w-24 md:h-24 rounded-full bg-surface-dark border-4 border-[#433b54] flex items-center justify-center shadow-2xl relative transition-transform group-hover:scale-105">
<span class="material-symbols-outlined text-4xl text-slate-500">lock</span>
<!-- Connector path hint -->
<div class="absolute -bottom-12 left-1/2 -translate-x-1/2 h-12 w-1 bg-gradient-to-b from-[#433b54] to-transparent"></div>
</div>
</div>
<!-- Node 3: CURRENT ACTIVE (Large Hero) -->
<div class="flex items-center justify-center relative py-4">
<!-- Pulsing rings -->
<div class="absolute inset-0 bg-primary/20 rounded-full blur-xl animate-pulse"></div>
<div class="absolute inset-[-20px] bg-primary/10 rounded-full blur-2xl animate-pulse delay-75"></div>
<!-- Label -->
<div class="absolute -right-2 md:-right-32 top-1/2 -translate-y-1/2 w-32 md:w-auto text-left pl-4 md:pl-0">
<div class="bg-primary border border-primary-light/50 px-4 py-2 rounded-xl text-sm font-black text-white shadow-glow uppercase tracking-wide transform translate-x-12 md:translate-x-0">
Current Level
</div>
<div class="mt-2 ml-12 md:ml-0 md:mt-2 text-center md:text-left">
<h3 class="text-xl font-black text-white leading-tight">Challenger</h3>
<p class="text-accent-yellow text-sm font-bold">Reward Available!</p>
</div>
</div>
<!-- Main Interactable Chest -->
<button class="relative w-32 h-32 md:w-40 md:h-40 rounded-[2.5rem] bg-gradient-to-b from-primary-light to-primary border-b-8 border-primary-dark shadow-glow flex items-center justify-center floating-element z-20 group transition-all active:scale-95 active:border-b-0 active:translate-y-2">
<!-- Icon -->
<div class="text-white drop-shadow-md transform transition-transform group-hover:scale-110 group-hover:rotate-6">
<span class="material-symbols-outlined text-[80px] md:text-[100px]" style="font-variation-settings: 'FILL' 1;">redeem</span>
</div>
<!-- Notification badge -->
<div class="absolute -top-2 -right-2 w-8 h-8 bg-red-500 rounded-full border-4 border-background-dark flex items-center justify-center animate-bounce">
<span class="text-white text-xs font-bold">!</span>
</div>
</button>
</div>
<!-- Node 2: Completed -->
<div class="flex items-center justify-center relative">
<div class="absolute -left-4 md:-left-24 top-1/2 -translate-y-1/2 hidden md:block text-right">
<div class="bg-surface-dark/50 border border-white/5 px-4 py-2 rounded-xl text-sm font-bold text-slate-500 shadow-sm">
Level 2: Apprentice
</div>
</div>
<div class="w-20 h-20 md:w-24 md:h-24 rounded-full bg-[#1f1a2e] border-4 border-primary/30 flex items-center justify-center relative">
<div class="w-full h-full rounded-full flex items-center justify-center bg-primary/10">
<span class="material-symbols-outlined text-4xl text-primary font-bold">check</span>
</div>
<!-- Path connector -->
<div class="absolute -top-12 left-1/2 -translate-x-1/2 h-12 w-1 bg-primary/30"></div>
</div>
</div>
<!-- Node 1: Completed -->
<div class="flex items-center justify-center relative">
<div class="absolute -right-4 md:-right-24 top-1/2 -translate-y-1/2 hidden md:block">
<div class="bg-surface-dark/50 border border-white/5 px-4 py-2 rounded-xl text-sm font-bold text-slate-500 shadow-sm">
Level 1: Novice
</div>
</div>
<div class="w-20 h-20 md:w-24 md:h-24 rounded-full bg-[#1f1a2e] border-4 border-primary/30 flex items-center justify-center relative">
<div class="w-full h-full rounded-full flex items-center justify-center bg-primary/10">
<span class="material-symbols-outlined text-4xl text-primary font-bold">check</span>
</div>
<!-- Path connector -->
<div class="absolute -top-12 left-1/2 -translate-x-1/2 h-12 w-1 bg-primary/30"></div>
</div>
</div>
</div>
</div>
<!-- Right Column: HUD & Quests Sticky Panel -->
<aside class="w-full lg:w-[400px] flex-shrink-0 lg:sticky lg:top-24 h-fit space-y-6">
<!-- Quick Action Card -->
<div class="bg-surface-dark rounded-[2rem] p-6 border border-white/5 shadow-2xl relative overflow-hidden group">
<div class="absolute top-0 right-0 p-8 opacity-10 transform translate-x-4 -translate-y-4 group-hover:scale-110 transition-transform duration-500">
<span class="material-symbols-outlined text-9xl">rocket_launch</span>
</div>
<h2 class="text-2xl font-black text-white mb-2 uppercase italic tracking-wide">Ready to Play?</h2>
<p class="text-slate-400 mb-6 text-sm font-medium leading-relaxed max-w-[80%]">
Complete the next challenge to unlock the <span class="text-accent-yellow">Challenger Chest</span>.
</p>
<button class="w-full bg-accent-yellow hover:bg-yellow-300 text-black font-black text-lg py-4 px-6 rounded-2xl shadow-3d-accent active:translate-y-1 active:shadow-none transition-all flex items-center justify-center gap-2 btn-3d uppercase tracking-wider">
<span class="material-symbols-outlined">play_arrow</span>
Start Quiz
</button>
</div>
<!-- Daily Quests Panel -->
<div class="bg-[#1f1a2e] rounded-[2rem] p-6 border border-white/5 shadow-lg">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-black text-white uppercase flex items-center gap-2">
<span class="material-symbols-outlined text-accent-pink">calendar_today</span>
Daily Quests
</h3>
<div class="px-3 py-1 bg-background-dark rounded-full text-xs font-bold text-slate-400 border border-white/5">
Resets in 4h
</div>
</div>
<!-- Progress Bar Overall -->
<div class="mb-6">
<div class="flex justify-between text-xs font-bold text-slate-400 mb-2 uppercase">
<span>Progress</span>
<span class="text-white">65%</span>
</div>
<div class="h-4 w-full bg-background-dark rounded-full overflow-hidden border border-white/5 p-0.5">
<div class="h-full bg-gradient-to-r from-primary to-accent-pink w-[65%] rounded-full shadow-[0_0_10px_rgba(255,0,230,0.5)]"></div>
</div>
</div>
<!-- Quest List -->
<div class="space-y-3">
<!-- Quest 1 -->
<div class="bg-surface-dark p-4 rounded-2xl border border-white/5 flex items-center justify-between group hover:border-primary/50 transition-colors cursor-pointer">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-green-500/20 text-green-400 flex items-center justify-center">
<span class="material-symbols-outlined">check_circle</span>
</div>
<div>
<h4 class="font-bold text-white text-sm line-through decoration-slate-500 decoration-2 text-slate-500">Speed Runner</h4>
<p class="text-xs text-slate-600 font-medium">Answer 5 questions < 1m</p>
</div>
</div>
</div>
<!-- Quest 2 -->
<div class="bg-surface-dark p-4 rounded-2xl border border-primary/30 flex items-center justify-between group hover:border-primary/50 transition-colors cursor-pointer relative overflow-hidden">
<div class="absolute inset-y-0 left-0 w-1 bg-accent-yellow"></div>
<div class="flex items-center gap-4 pl-2">
<div class="w-10 h-10 rounded-full bg-primary/20 text-primary-light flex items-center justify-center group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined">stars</span>
</div>
<div>
<h4 class="font-bold text-white text-sm">Perfect Score</h4>
<p class="text-xs text-slate-400 font-medium">Get 100% on a quiz</p>
</div>
</div>
<div class="text-accent-yellow text-xs font-black bg-accent-yellow/10 px-2 py-1 rounded-lg">
+50 XP
</div>
</div>
<!-- Quest 3 -->
<div class="bg-surface-dark p-4 rounded-2xl border border-white/5 flex items-center justify-between group hover:border-primary/50 transition-colors cursor-pointer opacity-70 hover:opacity-100">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-background-dark text-slate-500 flex items-center justify-center">
<span class="material-symbols-outlined">lock_clock</span>
</div>
<div>
<h4 class="font-bold text-slate-300 text-sm">Login Streak</h4>
<p class="text-xs text-slate-500 font-medium">Log in 3 days in a row</p>
</div>
</div>
<div class="text-slate-500 text-xs font-bold bg-white/5 px-2 py-1 rounded-lg">
+20 XP
</div>
</div>
</div>
<button class="w-full mt-6 py-3 text-sm font-bold text-primary-light hover:text-white transition-colors flex items-center justify-center gap-1">
View All Quests <span class="material-symbols-outlined text-lg">arrow_forward</span>
</button>
</div>
<!-- Achievement Showcase (Mini) -->
<div class="bg-gradient-to-br from-[#1f1a2e] to-primary-dark/20 rounded-[2rem] p-6 border border-white/5 relative overflow-hidden">
<div class="absolute -right-4 -bottom-4 text-white/5">
<span class="material-symbols-outlined text-9xl">emoji_events</span>
</div>
<h3 class="text-sm font-black text-slate-400 uppercase tracking-wider mb-4">Latest Badge</h3>
<div class="flex items-center gap-4">
<div class="w-16 h-16 rounded-2xl bg-gradient-to-tr from-accent-yellow to-orange-400 shadow-lg flex items-center justify-center transform rotate-6 border-2 border-white/20">
<span class="material-symbols-outlined text-4xl text-white drop-shadow-md">local_fire_department</span>
</div>
<div>
<div class="font-black text-white text-lg leading-tight">Hot Streak</div>
<div class="text-xs text-slate-400 font-medium">Unlocked yesterday</div>
</div>
</div>
</div>
</aside>
</main>
<!-- Bottom Mobile Nav (If needed, sticking to desktop mostly but good for responsiveness) -->
<nav class="md:hidden fixed bottom-0 left-0 w-full bg-surface-dark border-t border-white/10 p-4 z-50 flex justify-around">
<button class="flex flex-col items-center gap-1 text-primary">
<span class="material-symbols-outlined">map</span>
<span class="text-[10px] font-bold uppercase">Map</span>
</button>
<button class="flex flex-col items-center gap-1 text-slate-500">
<span class="material-symbols-outlined">swords</span>
<span class="text-[10px] font-bold uppercase">Quests</span>
</button>
<div class="relative -top-8">
<button class="w-14 h-14 bg-accent-yellow rounded-full flex items-center justify-center shadow-lg text-black border-4 border-background-dark">
<span class="material-symbols-outlined text-2xl">play_arrow</span>
</button>
</div>
<button class="flex flex-col items-center gap-1 text-slate-500">
<span class="material-symbols-outlined">inventory_2</span>
<span class="text-[10px] font-bold uppercase">Shop</span>
</button>
<button class="flex flex-col items-center gap-1 text-slate-500">
<span class="material-symbols-outlined">person</span>
<span class="text-[10px] font-bold uppercase">Profile</span>
</button>
</nav>
</body></html>