<!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 - Legal Protocols</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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 id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#7f13ec",
"primary-dark": "#5e0eb0",
"primary-light": "#9f4bf2",
"background-light": "#f7f6f8",
"background-dark": "#191022",
"surface-dark": "#2a1d36",
"surface-glass": "rgba(42, 29, 54, 0.7)",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1rem", "full": "9999px" },
boxShadow: {
'neon': '0 0 10px rgba(127, 19, 236, 0.5), 0 0 20px rgba(127, 19, 236, 0.3)',
'neon-sm': '0 0 5px rgba(127, 19, 236, 0.5)',
}
},
},
}
</script>
<style>
/* Cyberpunk Grid Background */
.cyber-grid {
background-size: 40px 40px;
background-image:
linear-gradient(to right, rgba(127, 19, 236, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(127, 19, 236, 0.05) 1px, transparent 1px);
mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
}
/* Glassmorphism Utilities */
.glass-panel {
background: rgba(25, 16, 34, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(127, 19, 236, 0.2);
}
.glass-panel-active {
background: rgba(127, 19, 236, 0.15);
border: 1px solid rgba(127, 19, 236, 0.6);
box-shadow: 0 0 15px rgba(127, 19, 236, 0.2);
}
/* Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #191022;
}
::-webkit-scrollbar-thumb {
background: #362348;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #7f13ec;
}
/* Custom selection color */
::selection {
background: #7f13ec;
color: white;
}
</style>
</head>
<body class="font-display bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen flex flex-col overflow-x-hidden selection:bg-primary selection:text-white">
<!-- Top Navigation -->
<header class="sticky top-0 z-50 w-full glass-panel border-b border-[#362348]">
<div class="max-w-[1440px] mx-auto px-6 h-16 flex items-center justify-between">
<div class="flex items-center gap-3 text-slate-900 dark:text-white group cursor-pointer">
<div class="size-8 text-primary flex items-center justify-center">
<span class="material-symbols-outlined text-3xl">sports_esports</span>
</div>
<h2 class="text-xl font-bold tracking-tight group-hover:text-primary transition-colors duration-300">QuizQuest</h2>
</div>
<nav class="hidden md:flex items-center gap-8">
<a class="text-slate-600 dark:text-slate-300 text-sm font-medium hover:text-primary dark:hover:text-primary transition-colors" href="#">Home</a>
<a class="text-slate-600 dark:text-slate-300 text-sm font-medium hover:text-primary dark:hover:text-primary transition-colors" href="#">Quizzes</a>
<a class="text-slate-600 dark:text-slate-300 text-sm font-medium hover:text-primary dark:hover:text-primary transition-colors" href="#">Leaderboard</a>
<a class="text-slate-600 dark:text-slate-300 text-sm font-medium hover:text-primary dark:hover:text-primary transition-colors" href="#">Profile</a>
</nav>
<button class="hidden md:flex h-9 items-center justify-center px-6 rounded-lg bg-primary hover:bg-primary-dark transition-all duration-300 shadow-neon-sm text-white text-sm font-bold tracking-wide">
<span>LOGIN</span>
</button>
<button class="md:hidden text-white">
<span class="material-symbols-outlined">menu</span>
</button>
</div>
<!-- Progress Bar -->
<div class="w-full h-[2px] bg-[#362348]">
<div class="h-full bg-primary w-1/3 shadow-neon"></div>
</div>
</header>
<!-- Main Content Layout -->
<main class="relative flex-1 flex flex-col lg:flex-row max-w-[1440px] mx-auto w-full pt-8 pb-20 px-4 md:px-8 gap-8">
<!-- Cyber Background Elements -->
<div class="fixed inset-0 pointer-events-none z-0">
<div class="absolute inset-0 cyber-grid opacity-20"></div>
<div class="absolute top-1/4 left-0 w-96 h-96 bg-primary opacity-5 blur-[120px] rounded-full"></div>
<div class="absolute bottom-0 right-0 w-[500px] h-[500px] bg-primary opacity-5 blur-[150px] rounded-full"></div>
</div>
<!-- Sidebar Navigation (Sticky) -->
<aside class="w-full lg:w-72 lg:shrink-0 z-10">
<div class="lg:sticky lg:top-24 flex flex-col gap-6">
<div class="flex flex-col gap-2">
<h1 class="text-2xl font-bold tracking-tight text-white uppercase glitch-text">System<br/><span class="text-primary">Protocols</span></h1>
<p class="text-slate-400 text-sm">Select a data directive to review governing rules.</p>
</div>
<nav class="flex flex-col gap-3">
<a class="group flex items-center gap-3 px-4 py-3 rounded-xl glass-panel-active transition-all duration-300" href="#">
<span class="material-symbols-outlined text-primary group-hover:text-white transition-colors">description</span>
<div class="flex flex-col">
<span class="text-white font-semibold text-sm">Terms & Conditions</span>
<span class="text-[10px] text-primary uppercase tracking-wider">Active Protocol</span>
</div>
</a>
<a class="group flex items-center gap-3 px-4 py-3 rounded-xl glass-panel hover:bg-surface-dark/80 hover:border-primary/50 transition-all duration-300" href="#">
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors">shield</span>
<div class="flex flex-col">
<span class="text-slate-300 group-hover:text-white font-medium text-sm transition-colors">Privacy Policy</span>
<span class="text-[10px] text-slate-500 uppercase tracking-wider">Security Level 5</span>
</div>
</a>
<a class="group flex items-center gap-3 px-4 py-3 rounded-xl glass-panel hover:bg-surface-dark/80 hover:border-primary/50 transition-all duration-300" href="#">
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors">currency_exchange</span>
<div class="flex flex-col">
<span class="text-slate-300 group-hover:text-white font-medium text-sm transition-colors">Refund Policy</span>
<span class="text-[10px] text-slate-500 uppercase tracking-wider">Virtual Goods</span>
</div>
</a>
<a class="group flex items-center gap-3 px-4 py-3 rounded-xl glass-panel hover:bg-surface-dark/80 hover:border-primary/50 transition-all duration-300" href="#">
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors">cookie</span>
<div class="flex flex-col">
<span class="text-slate-300 group-hover:text-white font-medium text-sm transition-colors">Cookie Settings</span>
<span class="text-[10px] text-slate-500 uppercase tracking-wider">Tracking Data</span>
</div>
</a>
</nav>
<div class="mt-4 p-4 rounded-xl border border-primary/20 bg-primary/5">
<div class="flex items-center gap-2 mb-2">
<span class="w-2 h-2 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)] animate-pulse"></span>
<span class="text-xs font-bold text-primary tracking-widest uppercase">System Status</span>
</div>
<p class="text-xs text-slate-400">All legal frameworks operational. Last update cycle: <span class="text-slate-200 font-mono">2023-10-27 | v4.2</span></p>
</div>
</div>
</aside>
<!-- Main Content Area -->
<section class="flex-1 flex flex-col gap-8 z-10 min-w-0">
<!-- Hero Header for Section -->
<div class="glass-panel p-6 md:p-10 rounded-2xl relative overflow-hidden group">
<div class="absolute top-0 right-0 p-4 opacity-20 group-hover:opacity-40 transition-opacity duration-500">
<span class="material-symbols-outlined text-9xl text-primary transform rotate-12">gavel</span>
</div>
<div class="relative z-10">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/20 border border-primary/30 text-primary-light text-xs font-bold uppercase tracking-wider mb-4">
<span class="material-symbols-outlined text-sm">verified</span>
Official Document
</div>
<h2 class="text-3xl md:text-5xl font-bold text-white mb-4">Terms & Conditions</h2>
<p class="text-slate-400 text-lg max-w-2xl leading-relaxed">
Welcome to the QuizQuest Network. By accessing our neural interface (the "Service"), you agree to the following protocols. Failure to comply may result in immediate termination of your digital avatar.
</p>
</div>
<div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-primary via-purple-400 to-transparent"></div>
</div>
<!-- Content Blocks -->
<div class="flex flex-col gap-6">
<!-- Section 1 -->
<article class="glass-panel p-6 md:p-8 rounded-xl border-l-4 border-l-primary hover:border-l-primary-light transition-all duration-300">
<div class="flex items-start gap-4 mb-4">
<span class="flex-shrink-0 flex items-center justify-center size-8 rounded bg-surface-dark text-primary font-mono text-sm font-bold border border-primary/30">01</span>
<h3 class="text-xl md:text-2xl font-bold text-white">User Conduct & Fair Play</h3>
</div>
<div class="pl-12 text-slate-300 leading-relaxed space-y-4">
<p>
Users agree to maintain the integrity of the QuizQuest ecosystem. Any use of unauthorized third-party software, bots, or neural-link exploits to gain an unfair advantage on the Leaderboard is strictly prohibited.
</p>
<ul class="list-disc list-inside space-y-2 text-slate-400 marker:text-primary">
<li>Exploiting bugs or glitches for XP gain.</li>
<li>Harassment of other players via holographic chat.</li>
<li>Impersonation of QuizQuest Administrators or AI moderators.</li>
</ul>
</div>
</article>
<!-- Section 2 -->
<article class="glass-panel p-6 md:p-8 rounded-xl border-l-4 border-l-slate-700 hover:border-l-primary transition-all duration-300">
<div class="flex items-start gap-4 mb-4">
<span class="flex-shrink-0 flex items-center justify-center size-8 rounded bg-surface-dark text-slate-400 font-mono text-sm font-bold border border-slate-600/30">02</span>
<h3 class="text-xl md:text-2xl font-bold text-white">Account Security & Digital Assets</h3>
</div>
<div class="pl-12 text-slate-300 leading-relaxed space-y-4">
<p>
You are responsible for safeguarding your login credentials. QuizQuest utilizes high-grade encryption, but we cannot protect you from social engineering attacks.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="p-4 rounded-lg bg-surface-dark/50 border border-slate-700/50">
<div class="flex items-center gap-2 mb-2 text-primary-light">
<span class="material-symbols-outlined">key</span>
<span class="font-bold text-sm uppercase">Access Keys</span>
</div>
<p class="text-xs text-slate-400">Do not share your private keys or passwords with any entity claiming to be support.</p>
</div>
<div class="p-4 rounded-lg bg-surface-dark/50 border border-slate-700/50">
<div class="flex items-center gap-2 mb-2 text-primary-light">
<span class="material-symbols-outlined">token</span>
<span class="font-bold text-sm uppercase">Virtual Tokens</span>
</div>
<p class="text-xs text-slate-400">QuizCoins hold no real-world monetary value and cannot be exchanged for fiat currency.</p>
</div>
</div>
</div>
</article>
<!-- Section 3 -->
<article class="glass-panel p-6 md:p-8 rounded-xl border-l-4 border-l-slate-700 hover:border-l-primary transition-all duration-300">
<div class="flex items-start gap-4 mb-4">
<span class="flex-shrink-0 flex items-center justify-center size-8 rounded bg-surface-dark text-slate-400 font-mono text-sm font-bold border border-slate-600/30">03</span>
<h3 class="text-xl md:text-2xl font-bold text-white">Data Usage & Privacy</h3>
</div>
<div class="pl-12 text-slate-300 leading-relaxed space-y-4">
<p>
We collect telemetry data to improve your gaming experience. This includes reaction times, quiz performance metrics, and device specifications.
</p>
<p class="text-sm p-3 rounded bg-primary/10 border border-primary/20 text-primary-light">
<span class="font-bold">Note:</span> We do not sell your personal data to third-party advertisers. Your performance data is anonymized before aggregate analysis.
</p>
</div>
</article>
<!-- Section 4 -->
<article class="glass-panel p-6 md:p-8 rounded-xl border-l-4 border-l-slate-700 hover:border-l-primary transition-all duration-300">
<div class="flex items-start gap-4 mb-4">
<span class="flex-shrink-0 flex items-center justify-center size-8 rounded bg-surface-dark text-slate-400 font-mono text-sm font-bold border border-slate-600/30">04</span>
<h3 class="text-xl md:text-2xl font-bold text-white">Dispute Resolution</h3>
</div>
<div class="pl-12 text-slate-300 leading-relaxed space-y-4">
<p>
Any disputes arising from these Terms shall be resolved through binding arbitration within the jurisdiction of the QuizQuest Headquarters.
</p>
</div>
</article>
</div>
</section>
</main>
<!-- Sticky Bottom Action Bar -->
<div class="fixed bottom-0 left-0 w-full z-40 px-4 pb-4 pointer-events-none">
<div class="max-w-[1440px] mx-auto flex justify-end">
<div class="glass-panel p-4 rounded-xl border-t border-primary/40 shadow-neon pointer-events-auto flex flex-col sm:flex-row items-center gap-4 sm:gap-8 bg-[#1a1122]">
<div class="flex items-center gap-3">
<div class="relative flex h-3 w-3">
<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-3 w-3 bg-primary"></span>
</div>
<span class="text-sm text-slate-300 font-medium">Please review all sections carefully.</span>
</div>
<div class="flex gap-3 w-full sm:w-auto">
<button class="flex-1 sm:flex-none px-6 py-2.5 rounded-lg border border-slate-600 text-slate-300 font-bold text-sm hover:bg-surface-dark hover:text-white transition-colors">
DECLINE
</button>
<button class="flex-1 sm:flex-none px-6 py-2.5 rounded-lg bg-primary text-white font-bold text-sm shadow-neon-sm hover:bg-primary-dark hover:shadow-neon transition-all flex items-center justify-center gap-2">
<span>ACKNOWLEDGE & CONTINUE</span>
<span class="material-symbols-outlined text-lg">arrow_forward</span>
</button>
</div>
</div>
</div>
</div>
</body></html>