<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Legal & Responsible Gaming - QuizQuest</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@500;700;900&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>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#7C3AED", // Violet-600
"primary-hover": "#6D28D9", // Violet-700
"accent-yellow": "#FACC15", // Yellow-400
"background-light": "#F3F4F6", // Gray-100
"background-dark": "#0F0720", // Very dark purple/black
"card-dark": "#1A1033", // Dark purple card bg
"card-light": "#FFFFFF",
"text-light": "#1F2937", // Gray-800
"text-dark": "#F3F4F6", // Gray-100
"glass-dark": "rgba(255, 255, 255, 0.05)",
},
fontFamily: {
sans: ["Inter", "sans-serif"],
display: ["Outfit", "sans-serif"],
},
},
},
};
</script>
<style>
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #111;
}
::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
html {
scroll-behavior: smooth;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark font-sans transition-colors duration-300 antialiased selection:bg-primary selection:text-white">
<nav class="fixed top-0 w-full z-50 backdrop-blur-md bg-white/70 dark:bg-background-dark/90 border-b border-gray-200 dark:border-white/5">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex-shrink-0 flex items-center gap-2 cursor-pointer">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-2xl">sports_esports</span>
</div>
<span class="font-display font-bold text-xl tracking-tight">QuizQuest</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a class="hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Home</a>
<a class="hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Prizes</a>
<a class="text-primary font-bold px-3 py-2 rounded-md text-sm" href="#">Legal</a>
</div>
</div>
<div class="hidden md:flex items-center gap-4">
<button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-white/10 transition-colors" onclick="document.documentElement.classList.toggle('dark')">
<span class="material-symbols-outlined dark:hidden">dark_mode</span>
<span class="material-symbols-outlined hidden dark:block">light_mode</span>
</button>
<a class="bg-primary hover:bg-primary-hover text-white px-6 py-2.5 rounded-full text-sm font-semibold transition-all transform hover:scale-105 shadow-lg shadow-primary/30" href="#">
Back to Game
</a>
</div>
<div class="-mr-2 flex md:hidden">
<button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" type="button">
<span class="material-symbols-outlined">menu</span>
</button>
</div>
</div>
</div>
</nav>
<div class="pt-32 pb-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<header class="mb-16 text-center max-w-3xl mx-auto">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary mb-6">
<span class="material-symbols-outlined text-sm">gavel</span>
<span class="text-xs font-bold tracking-wider uppercase">Legal Center</span>
</div>
<h1 class="font-display text-4xl sm:text-5xl font-bold mb-6">Terms, Privacy & <br/><span class="text-primary">Responsible Gaming</span></h1>
<p class="text-gray-600 dark:text-gray-400 text-lg">
We believe in fair play, transparency, and the safety of our players. Please read our policies carefully to understand your rights and responsibilities.
</p>
</header>
<div class="flex flex-col lg:flex-row gap-12 relative">
<aside class="hidden lg:block w-64 flex-shrink-0">
<div class="sticky top-32 space-y-1">
<nav class="flex flex-col space-y-2">
<a class="flex items-center gap-3 px-4 py-3 rounded-lg bg-primary/10 text-primary font-semibold transition-colors border-l-4 border-primary" href="#privacy">
<span class="material-symbols-outlined">lock</span>
Privacy Policy
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 hover:text-gray-900 dark:hover:text-white transition-colors border-l-4 border-transparent" href="#terms">
<span class="material-symbols-outlined">description</span>
Terms of Service
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 hover:text-gray-900 dark:hover:text-white transition-colors border-l-4 border-transparent" href="#refunds">
<span class="material-symbols-outlined">currency_exchange</span>
Refunds
</a>
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-white/5 hover:text-gray-900 dark:hover:text-white transition-colors border-l-4 border-transparent" href="#responsible">
<span class="material-symbols-outlined">verified_user</span>
Responsible Gaming
</a>
</nav>
<div class="pt-8">
<div class="p-4 rounded-xl bg-gradient-to-br from-card-dark to-[#120824] border border-white/10">
<h4 class="text-sm font-bold text-white mb-2">Need Help?</h4>
<p class="text-xs text-gray-400 mb-4">Our support team is available 24/7 to assist you with any queries.</p>
<button class="w-full py-2 px-4 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-xs font-semibold text-white transition-colors">
Contact Support
</button>
</div>
</div>
</div>
</aside>
<main class="flex-1 min-w-0">
<section class="mb-16 scroll-mt-32" id="privacy">
<div class="pb-6 border-b border-gray-200 dark:border-white/10 mb-8">
<h2 class="text-3xl font-display font-bold mb-2">Privacy Policy</h2>
<p class="text-sm text-gray-500 dark:text-gray-400">Last updated: October 24, 2023</p>
</div>
<div class="prose dark:prose-invert max-w-none text-gray-600 dark:text-gray-300">
<p class="mb-6">
At QuizQuest, we value your privacy and are committed to protecting your personal data. This policy outlines how we collect, use, and safeguard your information when you use our platform.
</p>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mt-8 mb-4">Data Collection</h3>
<p class="mb-4">
We collect information you provide directly to us, such as when you create an account, update your profile, participate in a quiz, or communicate with us. This may include:
</p>
<ul class="list-disc pl-6 space-y-2 mb-6 marker:text-primary">
<li>Contact information (Name, Email, Phone number)</li>
<li>Profile data (Username, Avatar preferences)</li>
<li>Financial data (Transaction history for entry fees and withdrawals)</li>
<li>Usage data (Quiz performance, login times, device information)</li>
</ul>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mt-8 mb-4">How We Use Your Data</h3>
<p class="mb-4">
Your data is primarily used to provide and improve our services. Specifically, we use it to:
</p>
<div class="grid sm:grid-cols-2 gap-4 mb-6">
<div class="bg-white dark:bg-card-dark p-4 rounded-xl border border-gray-200 dark:border-white/5">
<h4 class="font-bold text-primary mb-2">Game Operations</h4>
<p class="text-sm">Managing your account, processing payments, and calculating leaderboard rankings.</p>
</div>
<div class="bg-white dark:bg-card-dark p-4 rounded-xl border border-gray-200 dark:border-white/5">
<h4 class="font-bold text-primary mb-2">Security</h4>
<p class="text-sm">Detecting fraud, preventing cheating during live quizzes, and ensuring fair play.</p>
</div>
</div>
</div>
</section>
<section class="mb-16 scroll-mt-32" id="terms">
<div class="pb-6 border-b border-gray-200 dark:border-white/10 mb-8">
<h2 class="text-3xl font-display font-bold mb-2">Terms of Service</h2>
<p class="text-sm text-gray-500 dark:text-gray-400">Please read carefully before playing.</p>
</div>
<div class="prose dark:prose-invert max-w-none text-gray-600 dark:text-gray-300">
<p class="mb-6">
By accessing or using QuizQuest, you agree to be bound by these Terms of Service and all applicable laws and regulations. If you do not agree with any of these terms, you are prohibited from using or accessing this site.
</p>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mt-8 mb-4">Eligibility</h3>
<p class="mb-4">
You must be at least 18 years old to participate in paid quizzes on QuizQuest. Users from certain restricted jurisdictions where skill-gaming is prohibited by law are not eligible to participate in paid contests.
</p>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mt-8 mb-4">User Conduct</h3>
<p class="mb-4">
You agree not to use any automated scripts, bots, or third-party software to gain an unfair advantage. Any attempt to manipulate the quiz outcome will result in immediate account suspension and forfeiture of any winnings.
</p>
</div>
</section>
<section class="mb-16 scroll-mt-32" id="refunds">
<div class="pb-6 border-b border-gray-200 dark:border-white/10 mb-8">
<h2 class="text-3xl font-display font-bold mb-2">Refund Policy</h2>
</div>
<div class="prose dark:prose-invert max-w-none text-gray-600 dark:text-gray-300">
<div class="bg-blue-50 dark:bg-blue-900/10 border-l-4 border-blue-500 p-4 mb-6 rounded-r-lg">
<p class="text-sm text-blue-800 dark:text-blue-200 font-medium">
Note: Entry fees for live quizzes are generally non-refundable once the quiz has started.
</p>
</div>
<p class="mb-4">
<strong>Technical Issues:</strong> If a technical error on our end prevents you from participating in a quiz for which you have paid, we will refund the entry fee to your original payment method or wallet balance within 5-7 business days.
</p>
<p class="mb-4">
<strong>Cancellations:</strong> If QuizQuest cancels a scheduled quiz, all participants will receive a full refund of their entry fee automatically.
</p>
</div>
</section>
<section class="mb-16 scroll-mt-32" id="responsible">
<div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-primary/20 via-[#120824] to-card-dark border border-primary/30 shadow-2xl">
<div class="absolute top-0 right-0 p-8 opacity-20 pointer-events-none">
<span class="material-symbols-outlined text-[120px] text-primary">health_and_safety</span>
</div>
<div class="p-8 sm:p-10 relative z-10">
<div class="flex items-center gap-3 mb-6">
<div class="p-2 bg-accent-yellow rounded-lg text-black">
<span class="material-symbols-outlined block">shield</span>
</div>
<h2 class="text-3xl font-display font-bold text-white">Responsible Gaming Policy</h2>
</div>
<p class="text-lg text-gray-300 mb-8 leading-relaxed max-w-2xl">
QuizQuest is designed for entertainment. We are committed to preventing gaming-related issues and ensuring our platform remains a fun, safe environment.
</p>
<div class="grid sm:grid-cols-2 gap-6 mb-8">
<div class="bg-black/30 backdrop-blur-sm p-5 rounded-xl border border-white/10">
<h4 class="text-white font-bold mb-2 flex items-center gap-2">
<span class="material-symbols-outlined text-accent-yellow">timer</span>
Play Limits
</h4>
<p class="text-sm text-gray-400">Set daily limits on your deposit amount and time spent on the platform to maintain a healthy balance.</p>
</div>
<div class="bg-black/30 backdrop-blur-sm p-5 rounded-xl border border-white/10">
<h4 class="text-white font-bold mb-2 flex items-center gap-2">
<span class="material-symbols-outlined text-accent-yellow">block</span>
Self-Exclusion
</h4>
<p class="text-sm text-gray-400">Take a break whenever you need. Use our self-exclusion tools to temporarily disable your account.</p>
</div>
</div>
<div class="bg-white/5 rounded-xl p-6 border border-white/10">
<h4 class="text-white font-bold mb-3">Recognize the Signs</h4>
<ul class="space-y-2 text-sm text-gray-400">
<li class="flex items-start gap-2">
<span class="material-symbols-outlined text-red-400 text-sm mt-0.5">warning</span>
Spending more money than you can afford to lose.
</li>
<li class="flex items-start gap-2">
<span class="material-symbols-outlined text-red-400 text-sm mt-0.5">warning</span>
Chasing losses to win back money.
</li>
<li class="flex items-start gap-2">
<span class="material-symbols-outlined text-red-400 text-sm mt-0.5">warning</span>
Neglecting work, study, or family for gaming.
</li>
</ul>
</div>
<div class="mt-8 pt-6 border-t border-white/10 flex flex-col sm:flex-row items-center justify-between gap-4">
<p class="text-sm text-gray-400">If you need help, please contact external support organizations.</p>
<a class="inline-flex items-center gap-2 text-accent-yellow hover:text-white font-semibold text-sm transition-colors" href="#">
Get Professional Help
<span class="material-symbols-outlined text-sm">open_in_new</span>
</a>
</div>
</div>
</div>
</section>
</main>
</div>
</div>
<footer class="bg-white dark:bg-[#080412] border-t border-gray-200 dark:border-white/5 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div class="col-span-1 md:col-span-2">
<div class="flex items-center gap-2 mb-4">
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white">
<span class="material-symbols-outlined text-lg">sports_esports</span>
</div>
<span class="font-display font-bold text-lg tracking-tight dark:text-white">QuizQuest</span>
</div>
<p class="text-gray-500 dark:text-gray-400 text-sm max-w-sm mb-6">
The ultimate destination for trivia lovers. Test your knowledge, compete with friends, and win amazing rewards.
</p>
<div class="flex gap-4">
<a class="w-8 h-8 rounded-full bg-gray-100 dark:bg-white/5 flex items-center justify-center text-gray-500 hover:bg-primary hover:text-white transition-all" href="#">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg>
</a>
<a class="w-8 h-8 rounded-full bg-gray-100 dark:bg-white/5 flex items-center justify-center text-gray-500 hover:bg-primary hover:text-white transition-all" href="#">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.072 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.85-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path></svg>
</a>
</div>
</div>
<div>
<h4 class="font-bold text-gray-900 dark:text-white mb-4">Support</h4>
<ul class="space-y-2 text-sm text-gray-500 dark:text-gray-400">
<li><a class="hover:text-primary transition-colors" href="#">Help Center</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Safety Center</a></li>
<li><a class="hover:text-primary transition-colors" href="#">Community Guidelines</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-gray-900 dark:text-white mb-4">Legal</h4>
<ul class="space-y-2 text-sm text-gray-500 dark:text-gray-400">
<li><a class="hover:text-primary transition-colors" href="#privacy">Privacy Policy</a></li>
<li><a class="hover:text-primary transition-colors" href="#terms">Terms of Service</a></li>
<li><a class="hover:text-primary transition-colors" href="#refunds">Refund Policy</a></li>
<li><a class="hover:text-primary transition-colors" href="#responsible">Responsible Gaming</a></li>
</ul>
</div>
</div>
<div class="pt-8 border-t border-gray-100 dark:border-white/5 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-sm text-gray-400">© 2023 QuizQuest. All rights reserved.</p>
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-green-500"></span>
<span class="text-xs text-gray-400 font-medium">System Operational</span>
</div>
</div>
</div>
</footer>
</body></html>