<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Help Center</title>
<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"/>
<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": "#7f13ec",
"primary-hover": "#6b0fca",
"background-light": "#f7f6f8",
"background-dark": "#0f0814",
"surface-dark": "#1a1122",
"surface-light": "#261933",
"accent-cyan": "#00f0ff",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"],
"body": ["Space Grotesk", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "1.5rem",
"xl": "2rem",
"2xl": "3rem",
"full": "9999px"
},
backgroundImage: {
'cyber-grid': "linear-gradient(rgba(127, 19, 236, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 19, 236, 0.05) 1px, transparent 1px)",
}
},
},
}
</script>
<style>
.neon-shadow {
box-shadow: 0 0 15px rgba(127, 19, 236, 0.3);
}
.neon-text {
text-shadow: 0 0 10px rgba(127, 19, 236, 0.5);
}
.cyber-border {
position: relative;
}
.cyber-border::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, #7f13ec, transparent);
}
/* Custom scrollbar for cyber look */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0f0814;
}
::-webkit-scrollbar-thumb {
background: #362348;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #7f13ec;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-display antialiased overflow-x-hidden min-h-screen flex flex-col">
<!-- Background Grid Effect -->
<div class="fixed inset-0 pointer-events-none z-0 bg-cyber-grid bg-[length:40px_40px] opacity-20"></div>
<!-- Top Navigation -->
<div class="relative z-10 w-full border-b border-[#362348] bg-surface-dark/90 backdrop-blur-md sticky top-0">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<div class="flex items-center gap-3">
<div class="size-8 text-primary animate-pulse">
<svg fill="none" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path d="M44 11.2727C44 14.0109 39.8386 16.3957 33.69 17.6364C39.8386 18.877 44 21.2618 44 24C44 26.7382 39.8386 29.123 33.69 30.3636C39.8386 31.6043 44 33.9891 44 36.7273C44 40.7439 35.0457 44 24 44C12.9543 44 4 40.7439 4 36.7273C4 33.9891 8.16144 31.6043 14.31 30.3636C8.16144 29.123 4 26.7382 4 24C4 21.2618 8.16144 18.877 14.31 17.6364C8.16144 16.3957 4 14.0109 4 11.2727C4 7.25611 12.9543 4 24 4C35.0457 4 44 7.25611 44 11.2727Z" fill="currentColor"></path>
</svg>
</div>
<h2 class="text-white text-xl font-bold tracking-tight uppercase">QuizQuest <span class="text-xs text-primary bg-primary/10 px-2 py-0.5 rounded border border-primary/20 ml-2 align-middle">Beta</span></h2>
</div>
<!-- Desktop Menu -->
<div class="hidden md:flex flex-1 justify-center gap-8">
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-medium uppercase tracking-widest" href="#">Home</a>
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-medium uppercase tracking-widest" href="#">Quizzes</a>
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-medium uppercase tracking-widest" href="#">Leaderboard</a>
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-medium uppercase tracking-widest" href="#">Shop</a>
</div>
<!-- User Actions -->
<div class="flex items-center gap-4">
<div class="hidden sm:flex items-center gap-3">
<!-- Notifications -->
<button class="relative group p-2 rounded-full hover:bg-surface-light transition-colors text-slate-300">
<span class="material-symbols-outlined text-[24px]">notifications</span>
<span class="absolute top-2 right-2 size-2 bg-primary rounded-full neon-shadow"></span>
</button>
</div>
<!-- Avatar -->
<div class="flex items-center gap-3 pl-4 border-l border-[#362348]">
<div class="text-right hidden lg:block">
<p class="text-xs text-slate-400 uppercase tracking-wide">Level 42</p>
<p class="text-sm text-white font-bold">CyberSamurai</p>
</div>
<div class="relative size-10 rounded-full border-2 border-primary overflow-hidden neon-shadow">
<img alt="User avatar showing a confident person" class="object-cover w-full h-full" data-alt="User profile avatar" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBieXD5VIaNeywbSjNAS9YNz19of4Y_BlsBvkrlrRZk-hqg1WE7Z24y6OjMLtLOWLl6YgHDRw_3nKyFuZ5u_IV7mxuNFRLVTmgXca3YBwhVOKDiRwuQqlcdHVepAXPh1z8JEWjq1SvLZzWiNRtj29OUWQumjLUEvAwT-Q6D6yiCF3YsAial7ThXXO5n0WzQdUeypvFrtWS3FUOX89R1oW7YPJkQDGMgoedNx3NbIudGA4-hG3UpliAQWGgEfXwOq5Qzo5_v8J4x"/>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main Content Area -->
<main class="relative z-0 flex-grow flex flex-col items-center w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<!-- Hero Search Section -->
<div class="w-full max-w-4xl mx-auto text-center mb-16 relative">
<!-- Decorative elements behind -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-primary/5 blur-3xl rounded-full -z-10"></div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold tracking-widest uppercase mb-6">
<span class="size-2 rounded-full bg-primary animate-ping"></span>
System Status: Online
</div>
<h1 class="text-5xl md:text-7xl font-black text-white mb-4 tracking-tight leading-none neon-text">
NEED HELP, <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-cyan">WARRIOR?</span>
</h1>
<p class="text-slate-400 text-lg md:text-xl max-w-2xl mx-auto mb-10 font-light">
Access the support terminal to continue your quest. Search the database or select a module below.
</p>
<!-- Search Bar -->
<div class="relative max-w-2xl mx-auto group">
<div class="absolute -inset-0.5 bg-gradient-to-r from-primary to-purple-600 rounded-full blur opacity-50 group-hover:opacity-100 transition duration-500"></div>
<div class="relative flex items-center bg-surface-dark rounded-full p-2 pl-6 shadow-2xl">
<span class="material-symbols-outlined text-primary/70 mr-3 text-3xl">search</span>
<input class="w-full bg-transparent border-none text-white text-lg placeholder-slate-500 focus:ring-0 focus:outline-none h-12" placeholder="Search for error codes, loot drops, or account help..." type="text"/>
<button class="bg-primary hover:bg-primary-hover text-white px-8 h-12 rounded-full font-bold tracking-wide transition-all transform hover:scale-105 shadow-lg flex items-center gap-2">
SCAN <span class="material-symbols-outlined text-sm">qr_code_scanner</span>
</button>
</div>
</div>
</div>
<!-- Category Grid -->
<div class="w-full max-w-6xl mx-auto mb-20">
<div class="flex items-center justify-between mb-8 cyber-border pb-4">
<h2 class="text-2xl font-bold text-white uppercase tracking-wider flex items-center gap-2">
<span class="material-symbols-outlined text-primary">grid_view</span> Support Modules
</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Card 1: Account -->
<a class="group relative bg-surface-light hover:bg-[#2d1f3d] border border-white/5 rounded-2xl p-8 transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_0_30px_rgba(127,19,236,0.15)] overflow-hidden" href="#">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-9xl text-primary transform rotate-12">badge</span>
</div>
<div class="size-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-6 group-hover:bg-primary/20 transition-colors border border-primary/20">
<span class="material-symbols-outlined text-3xl text-primary">person_filled</span>
</div>
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-primary transition-colors">Account Management</h3>
<p class="text-slate-400 text-sm leading-relaxed mb-6">Update your warrior profile, change callsign, manage security settings, and link external accounts.</p>
<div class="flex items-center text-primary text-sm font-bold uppercase tracking-wider group-hover:gap-2 transition-all">
Access Terminal <span class="material-symbols-outlined text-base ml-1">arrow_forward</span>
</div>
</a>
<!-- Card 2: Prizes -->
<a class="group relative bg-surface-light hover:bg-[#2d1f3d] border border-white/5 rounded-2xl p-8 transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_0_30px_rgba(127,19,236,0.15)] overflow-hidden" href="#">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-9xl text-accent-cyan transform rotate-12">emoji_events</span>
</div>
<div class="size-16 rounded-2xl bg-accent-cyan/10 flex items-center justify-center mb-6 group-hover:bg-accent-cyan/20 transition-colors border border-accent-cyan/20">
<span class="material-symbols-outlined text-3xl text-accent-cyan">trophy</span>
</div>
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-accent-cyan transition-colors">Loot & Rewards</h3>
<p class="text-slate-400 text-sm leading-relaxed mb-6">Track your digital trophy shipments, claim daily XP boosts, and troubleshoot missing inventory items.</p>
<div class="flex items-center text-accent-cyan text-sm font-bold uppercase tracking-wider group-hover:gap-2 transition-all">
View Inventory <span class="material-symbols-outlined text-base ml-1">arrow_forward</span>
</div>
</a>
<!-- Card 3: Billing -->
<a class="group relative bg-surface-light hover:bg-[#2d1f3d] border border-white/5 rounded-2xl p-8 transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_0_30px_rgba(127,19,236,0.15)] overflow-hidden" href="#">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-9xl text-pink-500 transform rotate-12">credit_card</span>
</div>
<div class="size-16 rounded-2xl bg-pink-500/10 flex items-center justify-center mb-6 group-hover:bg-pink-500/20 transition-colors border border-pink-500/20">
<span class="material-symbols-outlined text-3xl text-pink-500">payments</span>
</div>
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-pink-500 transition-colors">Credits & Billing</h3>
<p class="text-slate-400 text-sm leading-relaxed mb-6">Manage your subscription, purchase credit packs, review transaction history, and payment methods.</p>
<div class="flex items-center text-pink-500 text-sm font-bold uppercase tracking-wider group-hover:gap-2 transition-all">
Open Ledger <span class="material-symbols-outlined text-base ml-1">arrow_forward</span>
</div>
</a>
</div>
</div>
<!-- FAQ Section -->
<div class="w-full max-w-4xl mx-auto pb-20">
<h2 class="text-2xl font-bold text-white uppercase tracking-wider mb-6 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">terminal</span> Common Errors / FAQs
</h2>
<div class="space-y-4">
<!-- FAQ Item 1 -->
<div class="bg-surface-light border border-white/5 rounded-xl overflow-hidden group">
<details class="w-full">
<summary class="flex items-center justify-between p-6 cursor-pointer list-none text-white font-medium hover:text-primary transition-colors">
<span class="flex items-center gap-3">
<span class="text-xs text-slate-500 font-mono">[ERR_01]</span>
How do I reset my battle pass progress?
</span>
<span class="material-symbols-outlined transform group-open:rotate-180 transition-transform">expand_more</span>
</summary>
<div class="px-6 pb-6 text-slate-400 text-sm leading-relaxed border-t border-white/5 pt-4">
Battle pass progress is tied to your account season. To reset, you must prestige your account in the main settings menu. Warning: This action cannot be undone and will consume one Prestige Token.
</div>
</details>
</div>
<!-- FAQ Item 2 -->
<div class="bg-surface-light border border-white/5 rounded-xl overflow-hidden group">
<details class="w-full">
<summary class="flex items-center justify-between p-6 cursor-pointer list-none text-white font-medium hover:text-primary transition-colors">
<span class="flex items-center gap-3">
<span class="text-xs text-slate-500 font-mono">[ERR_02]</span>
Why isn't my multiplier applying to quizzes?
</span>
<span class="material-symbols-outlined transform group-open:rotate-180 transition-transform">expand_more</span>
</summary>
<div class="px-6 pb-6 text-slate-400 text-sm leading-relaxed border-t border-white/5 pt-4">
Multipliers are only active during "Power Hours" or when a Boost Item is consumed from your inventory. Check your active buffs in the top-right corner of the HUD during gameplay.
</div>
</details>
</div>
<!-- FAQ Item 3 -->
<div class="bg-surface-light border border-white/5 rounded-xl overflow-hidden group">
<details class="w-full">
<summary class="flex items-center justify-between p-6 cursor-pointer list-none text-white font-medium hover:text-primary transition-colors">
<span class="flex items-center gap-3">
<span class="text-xs text-slate-500 font-mono">[ERR_03]</span>
Can I change my team after joining a guild?
</span>
<span class="material-symbols-outlined transform group-open:rotate-180 transition-transform">expand_more</span>
</summary>
<div class="px-6 pb-6 text-slate-400 text-sm leading-relaxed border-t border-white/5 pt-4">
Guild allegiance is locked for the duration of the current season (30 days). You may petition for a transfer once the season concludes. Early transfer requires a "Traitor's Fee" of 500 Credits.
</div>
</details>
</div>
</div>
<div class="mt-8 text-center">
<a class="inline-flex items-center gap-2 text-primary hover:text-white transition-colors text-sm uppercase tracking-widest font-bold border-b border-primary pb-1 hover:border-white" href="#">
View Entire Database <span class="material-symbols-outlined text-sm">arrow_forward</span>
</a>
</div>
</div>
</main>
<!-- Floating Live Chat Button -->
<div class="fixed bottom-8 right-8 z-50">
<button class="group flex items-center gap-3 bg-primary hover:bg-white text-white hover:text-primary pl-5 pr-2 py-2 h-14 rounded-full shadow-[0_0_20px_rgba(127,19,236,0.5)] hover:shadow-[0_0_30px_rgba(255,255,255,0.5)] transition-all duration-300">
<span class="font-bold tracking-wide uppercase text-sm">Live Support</span>
<div class="size-10 bg-white group-hover:bg-primary text-primary group-hover:text-white rounded-full flex items-center justify-center transition-colors">
<span class="material-symbols-outlined">headset_mic</span>
</div>
<!-- Online Indicator -->
<span class="absolute top-0 right-0 flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
</span>
</button>
</div>
</body></html>