<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Help Center</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter: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 id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#137fec",
"primary-hover": "#0f6bd0",
"background-light": "#f6f7f8",
"background-dark": "#101922",
},
fontFamily: {
"display": ["Inter", "sans-serif"]
},
borderRadius: {"DEFAULT": "0.375rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
},
},
}
</script>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-display min-h-screen flex flex-col">
<!-- Navigation -->
<header class="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Logo -->
<div class="flex items-center gap-3">
<div class="text-primary">
<span class="material-symbols-outlined text-3xl">sports_esports</span>
</div>
<span class="text-xl font-bold tracking-tight text-slate-900 dark:text-white">QuizQuest</span>
</div>
<!-- Desktop Nav -->
<nav class="hidden md:flex gap-8 items-center">
<a class="text-sm font-medium text-slate-600 hover:text-primary dark:text-slate-300 dark:hover:text-primary transition-colors" href="#">Home</a>
<a class="text-sm font-medium text-slate-600 hover:text-primary dark:text-slate-300 dark:hover:text-primary transition-colors" href="#">Features</a>
<a class="text-sm font-medium text-slate-600 hover:text-primary dark:text-slate-300 dark:hover:text-primary transition-colors" href="#">Pricing</a>
<a class="text-sm font-medium text-slate-600 hover:text-primary dark:text-slate-300 dark:hover:text-primary transition-colors" href="#">Login</a>
<button class="bg-primary hover:bg-primary-hover text-white px-4 py-2 rounded-lg text-sm font-bold transition-colors">
Sign Up
</button>
</nav>
<!-- Mobile Menu Button -->
<button class="md:hidden text-slate-600 dark:text-slate-300">
<span class="material-symbols-outlined">menu</span>
</button>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-3xl sm:text-4xl font-bold tracking-tight text-slate-900 dark:text-white mb-3">Support Center</h1>
<p class="text-slate-500 dark:text-slate-400 max-w-2xl mx-auto mb-8">
How can we engineer a solution for you today? Search our documentation or submit a ticket below.
</p>
<div class="max-w-2xl mx-auto relative group">
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-slate-400 group-focus-within:text-primary transition-colors">search</span>
</div>
<input class="block w-full pl-12 pr-4 py-3.5 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg text-slate-900 dark:text-slate-100 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all shadow-sm" placeholder="Search documentation, error codes, or articles..." type="text"/>
<div class="absolute inset-y-0 right-2 flex items-center">
<button class="bg-primary hover:bg-primary-hover text-white px-4 py-1.5 rounded text-sm font-semibold transition-colors">
Search
</button>
</div>
</div>
</div>
</section>
<!-- Main Content Area -->
<main class="flex-grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
<!-- Sidebar (Left) -->
<aside class="lg:col-span-3 space-y-8">
<!-- System Status -->
<div class="bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800 p-4 shadow-sm">
<div class="flex items-center justify-between mb-2">
<h3 class="text-sm font-semibold text-slate-900 dark:text-white uppercase tracking-wider">System Status</h3>
</div>
<div class="flex items-center gap-2">
<div class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
</div>
<span class="text-sm font-medium text-slate-700 dark:text-slate-300">All Systems Operational</span>
</div>
<div class="mt-3 pt-3 border-t border-slate-100 dark:border-slate-800">
<a class="text-xs text-primary hover:underline flex items-center gap-1" href="#">
View Uptime History
<span class="material-symbols-outlined text-[14px]">arrow_forward</span>
</a>
</div>
</div>
<!-- Navigation Links -->
<nav class="space-y-1">
<p class="px-3 text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Knowledge Base</p>
<a class="flex items-center gap-3 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 rounded-md hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-primary transition-colors group" href="#">
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors text-[20px]">manage_accounts</span>
Account & Security
</a>
<a class="flex items-center gap-3 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 rounded-md hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-primary transition-colors group" href="#">
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors text-[20px]">sports_esports</span>
Game Mechanics
</a>
<a class="flex items-center gap-3 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 rounded-md hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-primary transition-colors group" href="#">
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors text-[20px]">credit_card</span>
Billing & Subscription
</a>
<a class="flex items-center gap-3 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 rounded-md hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-primary transition-colors group" href="#">
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors text-[20px]">api</span>
API Documentation
</a>
</nav>
<!-- Contact Info -->
<div class="bg-blue-50 dark:bg-slate-800/50 rounded-lg p-4 border border-blue-100 dark:border-slate-700">
<h4 class="text-sm font-bold text-primary mb-1">Direct Support</h4>
<p class="text-xs text-slate-600 dark:text-slate-400 mb-3">Need immediate assistance for enterprise plans?</p>
<a class="text-sm font-medium text-slate-800 dark:text-slate-200 flex items-center gap-2 hover:text-primary" href="tel:+18001234567">
<span class="material-symbols-outlined text-[18px]">call</span>
+1 (800) 123-4567
</a>
</div>
</aside>
<!-- Main Content (Ticket Wizard) -->
<div class="lg:col-span-9">
<div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden">
<!-- Wizard Header -->
<div class="px-6 py-5 border-b border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900">
<h2 class="text-lg font-bold text-slate-900 dark:text-white flex items-center gap-2">
<span class="material-symbols-outlined text-primary">confirmation_number</span>
Submit a Request
</h2>
<p class="text-sm text-slate-500 mt-1">Please provide the details below so our engineering team can assist you effectively.</p>
</div>
<!-- Progress Stepper -->
<div class="px-6 py-6 border-b border-slate-100 dark:border-slate-800">
<div class="relative">
<div aria-hidden="true" class="absolute left-0 top-1/2 -mt-px w-full h-0.5 bg-slate-200 dark:bg-slate-700"></div>
<ul class="relative flex justify-between w-full">
<li>
<a class="relative flex items-center justify-center group" href="#">
<span class="h-9 w-9 flex items-center justify-center bg-primary rounded-full ring-4 ring-white dark:ring-slate-900">
<span class="material-symbols-outlined text-white text-[20px]">category</span>
</span>
<span class="absolute -bottom-8 w-32 text-center text-xs font-semibold text-primary">Category</span>
</a>
</li>
<li>
<a aria-current="step" class="relative flex items-center justify-center group" href="#">
<span class="h-9 w-9 flex items-center justify-center bg-white dark:bg-slate-800 border-2 border-primary rounded-full ring-4 ring-white dark:ring-slate-900">
<span class="text-primary font-bold text-sm">2</span>
</span>
<span class="absolute -bottom-8 w-32 text-center text-xs font-semibold text-slate-900 dark:text-white">Details</span>
</a>
</li>
<li>
<a class="relative flex items-center justify-center group" href="#">
<span class="h-9 w-9 flex items-center justify-center bg-white dark:bg-slate-800 border-2 border-slate-300 dark:border-slate-600 rounded-full ring-4 ring-white dark:ring-slate-900 group-hover:border-slate-400">
<span class="text-slate-500 font-bold text-sm">3</span>
</span>
<span class="absolute -bottom-8 w-32 text-center text-xs font-medium text-slate-500">Review</span>
</a>
</li>
</ul>
</div>
</div>
<!-- Form Content -->
<div class="p-6 sm:p-8 mt-4 space-y-8">
<!-- Section: Request Type -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="col-span-1">
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-2" for="category">Topic</label>
<div class="relative">
<select class="appearance-none block w-full px-4 py-3 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow cursor-pointer" id="category">
<option>Technical Issue</option>
<option>Billing Inquiry</option>
<option>Feature Request</option>
<option>Account Access</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-slate-500">
<span class="material-symbols-outlined text-[20px]">expand_more</span>
</div>
</div>
</div>
<div class="col-span-1">
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-2">Priority Level</label>
<div class="grid grid-cols-3 gap-3">
<label class="cursor-pointer">
<input class="peer sr-only" name="priority" type="radio"/>
<div class="flex flex-col items-center justify-center py-2 px-3 border border-slate-200 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-400 peer-checked:border-emerald-500 peer-checked:text-emerald-600 peer-checked:bg-emerald-50 dark:peer-checked:bg-emerald-900/20 transition-all">
<span class="text-xs font-medium">Low</span>
</div>
</label>
<label class="cursor-pointer">
<input checked="" class="peer sr-only" name="priority" type="radio"/>
<div class="flex flex-col items-center justify-center py-2 px-3 border border-slate-200 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-400 peer-checked:border-primary peer-checked:text-primary peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20 transition-all">
<span class="text-xs font-medium">Medium</span>
</div>
</label>
<label class="cursor-pointer">
<input class="peer sr-only" name="priority" type="radio"/>
<div class="flex flex-col items-center justify-center py-2 px-3 border border-slate-200 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-400 peer-checked:border-rose-500 peer-checked:text-rose-600 peer-checked:bg-rose-50 dark:peer-checked:bg-rose-900/20 transition-all">
<span class="text-xs font-medium">High</span>
</div>
</label>
</div>
</div>
</div>
<!-- Section: Details -->
<div class="space-y-6">
<div>
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-2" for="subject">Subject</label>
<input class="block w-full px-4 py-3 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-slate-100 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow" id="subject" placeholder="Brief summary of the issue..." type="text"/>
</div>
<div>
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-2" for="description">Detailed Description</label>
<textarea class="block w-full px-4 py-3 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-slate-100 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-shadow resize-none" id="description" placeholder="Please describe the steps to reproduce the bug..." rows="5"></textarea>
<p class="mt-2 text-xs text-slate-500 text-right">0/2000 characters</p>
</div>
</div>
<!-- Section: Attachments -->
<div>
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-2">Attachments (Optional)</label>
<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-slate-300 dark:border-slate-700 border-dashed rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors cursor-pointer group">
<div class="space-y-1 text-center">
<span class="material-symbols-outlined text-slate-400 text-4xl group-hover:text-primary transition-colors">cloud_upload</span>
<div class="flex text-sm text-slate-600 dark:text-slate-400 justify-center">
<label class="relative cursor-pointer bg-transparent rounded-md font-medium text-primary hover:text-primary-hover focus-within:outline-none" for="file-upload">
<span>Upload a file</span>
<input class="sr-only" id="file-upload" name="file-upload" type="file"/>
</label>
<p class="pl-1">or drag and drop</p>
</div>
<p class="text-xs text-slate-500">PNG, JPG, PDF up to 10MB</p>
</div>
</div>
</div>
<!-- User Info (Auto-filled style) -->
<div class="bg-slate-50 dark:bg-slate-800 rounded-lg p-4 flex items-center gap-4 border border-slate-200 dark:border-slate-700">
<div class="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
<span class="material-symbols-outlined">person</span>
</div>
<div class="flex-grow">
<p class="text-xs font-semibold text-slate-500 uppercase">Submitting as</p>
<p class="text-sm font-medium text-slate-900 dark:text-white">alex.gamer@example.com</p>
</div>
<button class="text-xs text-primary font-semibold hover:underline">Change</button>
</div>
</div>
<!-- Wizard Footer -->
<div class="px-6 py-5 bg-slate-50 dark:bg-slate-800/50 border-t border-slate-200 dark:border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-4">
<button class="w-full sm:w-auto px-6 py-2.5 border border-slate-300 dark:border-slate-600 rounded-lg text-slate-700 dark:text-slate-300 font-medium hover:bg-white dark:hover:bg-slate-700 transition-colors" type="button">
Cancel
</button>
<div class="flex flex-col sm:flex-row items-center gap-4 w-full sm:w-auto">
<div class="flex items-center gap-1.5 text-slate-500 dark:text-slate-400">
<span class="material-symbols-outlined text-[16px]">lock</span>
<span class="text-xs font-medium">Secure Transmission</span>
</div>
<button class="w-full sm:w-auto px-6 py-2.5 bg-primary hover:bg-primary-hover text-white rounded-lg font-bold shadow-sm shadow-primary/30 transition-all flex items-center justify-center gap-2" type="button">
Next Step
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
</button>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Simple Footer -->
<footer class="bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 py-8 mt-auto">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-sm text-slate-500 dark:text-slate-400">© 2023 QuizQuest Inc. All rights reserved.</p>
<div class="flex gap-6">
<a class="text-sm text-slate-500 hover:text-slate-900 dark:hover:text-white transition-colors" href="#">Privacy Policy</a>
<a class="text-sm text-slate-500 hover:text-slate-900 dark:hover:text-white transition-colors" href="#">Terms of Service</a>
<a class="text-sm text-slate-500 hover:text-slate-900 dark:hover:text-white transition-colors" href="#">Cookie Settings</a>
</div>
</div>
</footer>
</body></html>