<!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 - Rules of the Realm</title>
<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@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>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#7f13ec",
"primary-glow": "#9d4dff",
"background-dark": "#0f0817",
"surface-dark": "#1a1122",
"surface-card": "#261933",
"border-color": "#362348",
"accent-purple": "#b26bf3",
"text-main": "#f7f6f8",
"text-muted": "#ad92c9",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "1.5rem",
"xl": "2rem",
"2xl": "3rem",
"full": "9999px"
},
backgroundImage: {
'grid-pattern': "linear-gradient(to right, #2a1b3d 1px, transparent 1px), linear-gradient(to bottom, #2a1b3d 1px, transparent 1px)",
}
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
background-color: #0f0817;
color: #f7f6f8;
}
.neon-glow {
box-shadow: 0 0 10px rgba(127, 19, 236, 0.3), 0 0 20px rgba(127, 19, 236, 0.1);
}
.text-glow {
text-shadow: 0 0 10px rgba(157, 77, 255, 0.5);
}
.grid-bg {
background-size: 40px 40px;
mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}
</style>
</head>
<body class="bg-background-dark min-h-screen flex flex-col overflow-x-hidden selection:bg-primary selection:text-white">
<!-- Navbar -->
<header class="sticky top-0 z-50 flex items-center justify-between whitespace-nowrap border-b border-solid border-border-color bg-surface-dark/90 backdrop-blur-md px-6 py-4 lg:px-10">
<div class="flex items-center gap-4 text-text-main">
<div class="size-8 text-primary">
<svg class="h-full w-full" 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-text-main text-xl font-bold leading-tight tracking-tight">QuizQuest</h2>
</div>
<div class="hidden lg:flex flex-1 justify-end gap-8">
<div class="flex items-center gap-9">
<a class="text-text-muted hover:text-text-main transition-colors text-sm font-medium leading-normal" href="#">Home</a>
<a class="text-text-muted hover:text-text-main transition-colors text-sm font-medium leading-normal" href="#">Quizzes</a>
<a class="text-text-muted hover:text-text-main transition-colors text-sm font-medium leading-normal" href="#">Leaderboard</a>
<a class="text-text-muted hover:text-text-main transition-colors text-sm font-medium leading-normal" href="#">Shop</a>
</div>
<div class="flex gap-3">
<button class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-6 bg-surface-card hover:bg-border-color border border-border-color text-text-main text-sm font-bold transition-all">
<span>Log In</span>
</button>
<button class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-6 bg-primary hover:bg-primary-glow text-white text-sm font-bold shadow-lg shadow-primary/20 transition-all">
<span>Sign Up</span>
</button>
</div>
</div>
<!-- Mobile Menu Icon -->
<button class="lg:hidden text-text-main">
<span class="material-symbols-outlined">menu</span>
</button>
</header>
<main class="flex-grow flex flex-col relative">
<!-- Background Decor -->
<div class="absolute inset-0 z-0 bg-grid-pattern grid-bg opacity-30 pointer-events-none"></div>
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-4xl h-96 bg-primary/20 blur-[120px] rounded-full pointer-events-none z-0"></div>
<!-- Hero Section -->
<section class="relative z-10 pt-12 pb-8 px-4 sm:px-6 lg:px-8 text-center max-w-7xl mx-auto w-full">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-surface-card border border-border-color mb-6 animate-pulse">
<span class="w-2 h-2 rounded-full bg-green-400"></span>
<span class="text-xs font-semibold text-text-muted uppercase tracking-wider">System Online</span>
</div>
<h1 class="text-5xl md:text-7xl font-black tracking-tight text-white mb-4 text-glow">
Rules of the Realm
</h1>
<p class="text-lg text-text-muted max-w-2xl mx-auto mb-10">
Before you embark on your journey through the QuizQuest multiverse, you must sync with the core directives. Read the scrolls to proceed.
</p>
<!-- Search Bar -->
<div class="max-w-xl mx-auto relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-primary to-accent-purple rounded-2xl blur opacity-25 group-hover:opacity-50 transition duration-200"></div>
<div class="relative flex items-center bg-surface-card border border-border-color rounded-2xl p-1 shadow-2xl">
<span class="material-symbols-outlined text-text-muted ml-3">search</span>
<input class="w-full bg-transparent border-none text-text-main placeholder-text-muted focus:ring-0 px-4 py-3" placeholder="Search the archives (e.g. 'Bans', 'Gold', 'Refunds')" type="text"/>
<button class="bg-primary hover:bg-primary-glow text-white px-6 py-2 rounded-xl font-bold transition-colors">
Scan
</button>
</div>
</div>
</section>
<!-- Main Layout -->
<div class="relative z-10 flex flex-col lg:flex-row gap-8 max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 pb-20">
<!-- Sidebar / Navigation Rail -->
<aside class="w-full lg:w-72 flex-shrink-0 space-y-8">
<!-- XP / Progress -->
<div class="bg-surface-card border border-border-color rounded-2xl p-6 neon-glow">
<div class="flex justify-between items-end mb-2">
<span class="text-sm font-bold text-text-main uppercase tracking-wider">Sync Status</span>
<span class="text-xs font-mono text-accent-purple">25% COMPLETE</span>
</div>
<div class="h-3 w-full bg-surface-dark rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-primary to-accent-purple w-1/4 rounded-full"></div>
</div>
<p class="text-xs text-text-muted mt-3">Read all scrolls to unlock full access.</p>
</div>
<!-- Tab Switcher (Vertical on Desktop) -->
<nav class="flex flex-col gap-2">
<button class="group flex items-center gap-4 p-4 rounded-2xl bg-surface-card border border-primary/50 text-white shadow-lg shadow-primary/10 transition-all hover:translate-x-1">
<div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors">
<span class="material-symbols-outlined">gavel</span>
</div>
<div class="text-left">
<div class="font-bold text-sm">Code of Conduct</div>
<div class="text-xs text-text-muted">Terms of Service</div>
</div>
<span class="material-symbols-outlined ml-auto text-primary">chevron_right</span>
</button>
<button class="group flex items-center gap-4 p-4 rounded-2xl hover:bg-surface-card border border-transparent hover:border-border-color text-text-muted hover:text-text-main transition-all hover:translate-x-1">
<div class="w-10 h-10 rounded-full bg-surface-dark flex items-center justify-center text-text-muted group-hover:text-white transition-colors">
<span class="material-symbols-outlined">lock</span>
</div>
<div class="text-left">
<div class="font-bold text-sm">Secret Scrolls</div>
<div class="text-xs opacity-60">Privacy Policy</div>
</div>
</button>
<button class="group flex items-center gap-4 p-4 rounded-2xl hover:bg-surface-card border border-transparent hover:border-border-color text-text-muted hover:text-text-main transition-all hover:translate-x-1">
<div class="w-10 h-10 rounded-full bg-surface-dark flex items-center justify-center text-text-muted group-hover:text-white transition-colors">
<span class="material-symbols-outlined">currency_exchange</span>
</div>
<div class="text-left">
<div class="font-bold text-sm">Treasure Returns</div>
<div class="text-xs opacity-60">Refund Policy</div>
</div>
</button>
</nav>
<!-- Help Box -->
<div class="hidden lg:block bg-gradient-to-br from-surface-card to-surface-dark border border-border-color rounded-2xl p-6 text-center">
<div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-surface-dark text-accent-purple mb-4 border border-border-color">
<span class="material-symbols-outlined">support_agent</span>
</div>
<h3 class="text-white font-bold mb-2">Need a Guide?</h3>
<p class="text-sm text-text-muted mb-4">Our support wizards are ready to assist you.</p>
<button class="text-xs font-bold text-primary hover:text-white uppercase tracking-wider">Contact Support</button>
</div>
</aside>
<!-- Main Content Area -->
<section class="flex-1 space-y-8">
<!-- Section Header -->
<div class="flex items-center justify-between border-b border-border-color pb-6">
<div>
<h2 class="text-3xl font-black text-white flex items-center gap-3">
<span class="material-symbols-outlined text-primary text-4xl">gavel</span>
The Code of Conduct
</h2>
<p class="text-text-muted mt-2">Last updated: Stardate 2023.10.15</p>
</div>
<div class="hidden sm:flex gap-2">
<button class="p-2 rounded-full hover:bg-surface-card text-text-muted transition-colors" title="Print">
<span class="material-symbols-outlined">print</span>
</button>
<button class="p-2 rounded-full hover:bg-surface-card text-text-muted transition-colors" title="Download PDF">
<span class="material-symbols-outlined">download</span>
</button>
</div>
</div>
<!-- Policy Cards Grid -->
<div class="grid gap-6">
<!-- Card 1 -->
<div class="group relative bg-surface-card border border-border-color rounded-2xl p-6 md:p-8 hover:border-primary/50 transition-all duration-300">
<div class="absolute top-6 right-6 text-text-muted/20 group-hover:text-primary/20 transition-colors">
<span class="material-symbols-outlined text-6xl">account_circle</span>
</div>
<div class="flex items-start gap-4 mb-4">
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<span class="font-mono font-bold">01</span>
</div>
<h3 class="text-xl font-bold text-white pt-1">Your Avatar & Identity</h3>
</div>
<div class="prose prose-invert prose-sm max-w-none text-text-muted leading-relaxed">
<p>
By creating an account ("Avatar") on QuizQuest, you agree to maintain the security of your login credentials. You are the sole guardian of your account; any activity that occurs under your handle is your responsibility.
</p>
<ul class="list-disc pl-5 mt-2 space-y-1 marker:text-primary">
<li>Users must be at least 13 cycles (years) of age.</li>
<li>One entity per Avatar. Multi-accounting to exploit leaderboards results in immediate banishment to the Void.</li>
<li>Impersonation of Admins or other Players is strictly prohibited.</li>
</ul>
</div>
</div>
<!-- Card 2 -->
<div class="group relative bg-surface-card border border-border-color rounded-2xl p-6 md:p-8 hover:border-primary/50 transition-all duration-300">
<div class="absolute top-6 right-6 text-text-muted/20 group-hover:text-primary/20 transition-colors">
<span class="material-symbols-outlined text-6xl">stadia_controller</span>
</div>
<div class="flex items-start gap-4 mb-4">
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<span class="font-mono font-bold">02</span>
</div>
<h3 class="text-xl font-bold text-white pt-1">Gameplay & Fair Play</h3>
</div>
<div class="prose prose-invert prose-sm max-w-none text-text-muted leading-relaxed">
<p>
We honor the spirit of competition. Cheating, using bots, or exploiting glitches ("bugs") to gain unfair advantages undermines the integrity of the Realm.
</p>
<p class="mt-2">
<strong class="text-white">Prohibited Actions:</strong>
Using automated scripts to answer quizzes, sharing answers during live tournaments, or harassing other players in the chat logs. Violations result in XP forfeiture and temporary suspension.
</p>
</div>
</div>
<!-- Card 3 -->
<div class="group relative bg-surface-card border border-border-color rounded-2xl p-6 md:p-8 hover:border-primary/50 transition-all duration-300">
<div class="absolute top-6 right-6 text-text-muted/20 group-hover:text-primary/20 transition-colors">
<span class="material-symbols-outlined text-6xl">diamond</span>
</div>
<div class="flex items-start gap-4 mb-4">
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<span class="font-mono font-bold">03</span>
</div>
<h3 class="text-xl font-bold text-white pt-1">Virtual Currencies</h3>
</div>
<div class="prose prose-invert prose-sm max-w-none text-text-muted leading-relaxed">
<p>
"Coins", "Gems", and other in-game items have no real-world monetary value and cannot be exchanged for fiat currency unless explicitly stated in a specific tournament's rules.
</p>
<p class="mt-2">
QuizQuest retains the right to modify the economy balance at any time. Purchases of virtual currency are final and non-refundable, except as required by law.
</p>
</div>
</div>
<!-- Warning Box -->
<div class="bg-red-500/10 border border-red-500/20 rounded-2xl p-6 flex gap-4 items-start">
<span class="material-symbols-outlined text-red-400 mt-1">warning</span>
<div>
<h4 class="text-red-400 font-bold text-sm uppercase tracking-wide mb-1">Critical Termination Protocol</h4>
<p class="text-sm text-red-200/70">
We reserve the right to terminate access to the Realm for any user who violates these terms repeatedly or commits a severe infraction, without prior notice or refund.
</p>
</div>
</div>
</div>
<!-- Bottom Action Bar -->
<div class="sticky bottom-6 z-40">
<div class="absolute inset-0 bg-surface-card/80 backdrop-blur-xl rounded-full -m-2 z-0 shadow-2xl"></div>
<div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-4 p-4 rounded-full border border-primary/30">
<label class="flex items-center gap-3 cursor-pointer pl-4">
<div class="relative flex items-center">
<input class="peer sr-only" type="checkbox"/>
<div class="w-12 h-7 bg-surface-dark border border-border-color peer-checked:bg-primary/50 peer-checked:border-primary rounded-full transition-all after:content-[''] after:absolute after:top-1 after:left-1 after:bg-text-muted after:border-border-color after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5 peer-checked:after:bg-white peer-checked:after:border-white"></div>
</div>
<span class="text-sm font-medium text-white">I have read and accept the <span class="text-primary underline decoration-primary/50">Code of Conduct</span></span>
</label>
<button class="w-full md:w-auto bg-primary hover:bg-primary-glow text-white text-base font-bold py-3 px-8 rounded-full shadow-lg shadow-primary/40 transition-all transform active:scale-95 flex items-center justify-center gap-2">
<span>Accept & Enter Realm</span>
<span class="material-symbols-outlined text-lg">rocket_launch</span>
</button>
</div>
</div>
</section>
</div>
</main>
<!-- Footer -->
<footer class="border-t border-border-color bg-surface-card py-10 px-4">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-2 text-text-muted">
<span class="material-symbols-outlined text-primary">stadia_controller</span>
<span class="text-sm">© 2023 QuizQuest Inc. All rights reserved.</span>
</div>
<div class="flex gap-6">
<a class="text-text-muted hover:text-white transition-colors text-sm" href="#">Status</a>
<a class="text-text-muted hover:text-white transition-colors text-sm" href="#">Privacy</a>
<a class="text-text-muted hover:text-white transition-colors text-sm" href="#">Terms</a>
<a class="text-text-muted hover:text-white transition-colors text-sm" href="#">Contact</a>
</div>
<div class="flex gap-4">
<a class="text-text-muted hover:text-primary transition-colors" href="#">
<span class="sr-only">Twitter</span>
<svg class="h-5 w-5" fill="currentColor" viewbox="0 0 24 24"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path></svg>
</a>
<a class="text-text-muted hover:text-primary transition-colors" href="#">
<span class="sr-only">Discord</span>
<svg class="h-5 w-5" fill="currentColor" viewbox="0 0 24 24"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037 14.168 14.168 0 00-.63 1.298 18.337 18.337 0 00-5.451 0 13.91 13.91 0 00-.635-1.298.073.073 0 00-.08-.037 19.736 19.736 0 00-4.88 1.515.061.061 0 00-.03.075c-1.037 1.543-1.932 2.99-1.748 4.414-.006.233-.006.465.003.696a14.77 14.77 0 005.187 4.298.072.072 0 00.08-.013l.666-.807a.066.066 0 00-.03-.098 10.37 10.37 0 01-1.54-.73.064.064 0 01-.004-.105c.105-.078.209-.16.31-.244a.057.057 0 01.064-.006 13.064 13.064 0 009.68 0 .057.057 0 01.064.006c.101.085.204.167.31.244a.064.064 0 01-.005.105 10.283 10.283 0 01-1.539.729.066.066 0 00-.031.098l.669.809a.072.072 0 00.079.012 14.809 14.809 0 005.197-4.303.061.061 0 00-.028-.075zM8.557 12.358c-1.02 0-1.854-.93-1.854-2.062 0-1.134.821-2.062 1.854-2.062 1.045 0 1.868.93 1.854 2.062 0 1.133-.809 2.062-1.854 2.062zm6.886 0c-1.02 0-1.854-.93-1.854-2.062 0-1.134.821-2.062 1.854-2.062 1.044 0 1.868.93 1.854 2.062 0 1.133-.809 2.062-1.854 2.062z"></path></svg>
</a>
</div>
</div>
</footer>
</body></html>