<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Cookies Policy - QuizPortal</title>
<!-- Google Fonts -->
<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=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<!-- Material Symbols -->
<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"/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- Theme Config -->
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#8c25f4",
"background-light": "#f7f5f8",
"background-dark": "#191022",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"]
},
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
},
},
}
</script>
<style>
/* Custom scrollbar for a cleaner look */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #191022;
}
::-webkit-scrollbar-thumb {
background: #332a3d;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #8c25f4;
}
.toggle-checkbox:checked {
right: 0;
border-color: #8c25f4;
}
.toggle-checkbox:checked + .toggle-label {
background-color: #8c25f4;
}
/* Custom checkbox style override for tailwind forms plugin defaults if needed */
input[type="checkbox"]:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 antialiased min-h-screen flex flex-col overflow-x-hidden">
<!-- Navbar -->
<header class="sticky top-0 z-50 w-full border-b border-slate-200 dark:border-[#302839] bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md">
<div class="flex items-center justify-between px-6 py-4 max-w-7xl mx-auto">
<div class="flex items-center gap-3">
<div class="size-8 text-primary">
<span class="material-symbols-outlined text-4xl">stadia_controller</span>
</div>
<h2 class="text-xl font-bold leading-tight tracking-tight">QuizPortal</h2>
</div>
<nav class="hidden md:flex flex-1 justify-center gap-8">
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Home</a>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Quizzes</a>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Leaderboard</a>
</nav>
<div class="flex items-center gap-4">
<a class="hidden sm:block text-sm font-medium hover:text-primary transition-colors" href="#">Login</a>
<button class="flex items-center justify-center overflow-hidden rounded-lg h-9 px-5 bg-primary hover:bg-primary/90 transition-colors text-white text-sm font-bold shadow-lg shadow-primary/25">
<span class="truncate">Sign Up</span>
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="flex-grow w-full max-w-4xl mx-auto px-6 py-12 lg:py-16">
<!-- Header Section -->
<div class="mb-10 text-center">
<h1 class="text-4xl md:text-5xl font-black tracking-tight mb-4 bg-clip-text text-transparent bg-gradient-to-r from-white via-slate-200 to-slate-400">
Cookies Policy
</h1>
<p class="text-slate-500 dark:text-slate-400 text-lg">
Last updated: <span class="text-primary font-medium">October 24, 2023</span>
</p>
</div>
<!-- Preferences Card (Floating/Highlighted) -->
<div class="relative group mb-16">
<!-- Glow Effect -->
<div class="absolute -inset-1 bg-gradient-to-r from-primary to-purple-600 rounded-xl blur opacity-25 group-hover:opacity-40 transition duration-1000 group-hover:duration-200"></div>
<div class="relative bg-white dark:bg-[#231e29] rounded-xl p-6 md:p-8 border border-slate-200 dark:border-[#3a3146] shadow-xl">
<div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-6 mb-8 pb-6 border-b border-slate-100 dark:border-[#3a3146]">
<div>
<div class="flex items-center gap-2 mb-2">
<span class="material-symbols-outlined text-primary">cookie</span>
<h2 class="text-2xl font-bold">Manage Preferences</h2>
</div>
<p class="text-slate-500 dark:text-slate-400 max-w-lg">
Control how we use cookies to enhance your gaming experience. Your high scores and progress depend on some of these!
</p>
</div>
<button class="shrink-0 flex items-center gap-2 bg-primary hover:bg-purple-600 text-white px-6 py-3 rounded-lg font-bold transition-all shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-[20px]">save</span>
Save Preferences
</button>
</div>
<div class="space-y-6">
<!-- Essential -->
<div class="flex items-start md:items-center justify-between gap-4 p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-[#2a2431] transition-colors">
<div class="flex-1">
<div class="flex items-center gap-2">
<span class="font-bold text-lg">Essential Cookies</span>
<span class="text-xs bg-primary/20 text-primary px-2 py-0.5 rounded-full font-bold uppercase tracking-wider">Required</span>
</div>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Strictly necessary for game functionality, login sessions, and security.</p>
</div>
<div class="relative inline-block w-12 mr-2 align-middle select-none">
<input checked="" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-not-allowed border-primary/50 right-0" disabled="" type="checkbox"/>
<label class="toggle-label block overflow-hidden h-6 rounded-full bg-primary/50 cursor-not-allowed"></label>
</div>
</div>
<!-- Analytics -->
<div class="flex items-start md:items-center justify-between gap-4 p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-[#2a2431] transition-colors">
<div class="flex-1">
<span class="font-bold text-lg block">Analytics Cookies</span>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Help us improve quizzes by understanding which categories are most popular.</p>
</div>
<div class="relative inline-block w-12 mr-2 align-middle select-none transition duration-200 ease-in">
<input class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer border-slate-300 dark:border-slate-600 checked:right-0 checked:border-primary transition-all duration-200" id="analytics-toggle" name="toggle" type="checkbox"/>
<label class="toggle-label block overflow-hidden h-6 rounded-full bg-slate-300 dark:bg-slate-700 cursor-pointer checked:bg-primary transition-colors duration-200" for="analytics-toggle"></label>
</div>
</div>
<!-- Marketing -->
<div class="flex items-start md:items-center justify-between gap-4 p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-[#2a2431] transition-colors">
<div class="flex-1">
<span class="font-bold text-lg block">Marketing Cookies</span>
<p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Allow us to show relevant game ads and promotions tailored to your interests.</p>
</div>
<div class="relative inline-block w-12 mr-2 align-middle select-none transition duration-200 ease-in">
<input class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer border-slate-300 dark:border-slate-600 checked:right-0 checked:border-primary transition-all duration-200" id="marketing-toggle" name="toggle" type="checkbox"/>
<label class="toggle-label block overflow-hidden h-6 rounded-full bg-slate-300 dark:bg-slate-700 cursor-pointer checked:bg-primary transition-colors duration-200" for="marketing-toggle"></label>
</div>
</div>
</div>
</div>
</div>
<!-- Policy Text Content -->
<div class="prose prose-lg dark:prose-invert max-w-none space-y-12 text-slate-300">
<section>
<div class="flex items-center gap-3 mb-4 text-white">
<span class="flex items-center justify-center size-8 rounded-full bg-primary/20 text-primary">
<span class="material-symbols-outlined text-sm">info</span>
</span>
<h2 class="text-2xl font-bold m-0">What Are Cookies?</h2>
</div>
<p class="text-slate-400 leading-relaxed">
Cookies are small text files that are stored on your device when you visit our website. They act like a memory for the website, allowing us to recognize your device when you return. In the context of QuizPortal, cookies are the magic that keeps you logged in, remembers your position on the leaderboard, and ensures your quiz progress isn't lost if you accidentally refresh the page.
</p>
</section>
<section>
<div class="flex items-center gap-3 mb-4 text-white">
<span class="flex items-center justify-center size-8 rounded-full bg-primary/20 text-primary">
<span class="material-symbols-outlined text-sm">extension</span>
</span>
<h2 class="text-2xl font-bold m-0">How We Use Cookies</h2>
</div>
<p class="text-slate-400 leading-relaxed mb-6">
We use cookies for a variety of reasons detailed below. Unfortunately, in most cases, there are no industry standard options for disabling cookies without completely disabling the functionality and features they add to this site. It is recommended that you leave on all cookies if you are not sure whether you need them or not in case they are used to provide a service that you use.
</p>
<div class="grid md:grid-cols-2 gap-4">
<div class="p-4 rounded-lg bg-slate-100 dark:bg-[#231e29] border border-slate-200 dark:border-[#3a3146]">
<h3 class="text-lg font-bold text-white mb-2">Account Related</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">If you create an account with us, then we will use cookies for the management of the signup process and general administration.</p>
</div>
<div class="p-4 rounded-lg bg-slate-100 dark:bg-[#231e29] border border-slate-200 dark:border-[#3a3146]">
<h3 class="text-lg font-bold text-white mb-2">Login Related</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">We use cookies when you are logged in so that we can remember this fact. This prevents you from having to log in every single time you visit a new page.</p>
</div>
<div class="p-4 rounded-lg bg-slate-100 dark:bg-[#231e29] border border-slate-200 dark:border-[#3a3146]">
<h3 class="text-lg font-bold text-white mb-2">Forms Related</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">When you submit data through a form such as those found on contact pages or comment forms, cookies may be set to remember your user details.</p>
</div>
<div class="p-4 rounded-lg bg-slate-100 dark:bg-[#231e29] border border-slate-200 dark:border-[#3a3146]">
<h3 class="text-lg font-bold text-white mb-2">Game State</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Critical for ensuring your current quiz session is preserved if your connection drops briefly.</p>
</div>
</div>
</section>
<section>
<div class="flex items-center gap-3 mb-4 text-white">
<span class="flex items-center justify-center size-8 rounded-full bg-primary/20 text-primary">
<span class="material-symbols-outlined text-sm">public</span>
</span>
<h2 class="text-2xl font-bold m-0">Third Party Cookies</h2>
</div>
<p class="text-slate-400 leading-relaxed mb-4">
In some special cases, we also use cookies provided by trusted third parties. The following section details which third party cookies you might encounter through this site.
</p>
<ul class="list-disc pl-6 text-slate-400 space-y-2 marker:text-primary">
<li>This site uses Google Analytics which is one of the most widespread and trusted analytics solutions on the web for helping us to understand how you use the site and ways that we can improve your experience.</li>
<li>We also use social media buttons and/or plugins on this site that allow you to connect with your social network in various ways. For these to work, social media sites will set cookies through our site.</li>
</ul>
</section>
<section>
<div class="flex items-center gap-3 mb-4 text-white">
<span class="flex items-center justify-center size-8 rounded-full bg-primary/20 text-primary">
<span class="material-symbols-outlined text-sm">settings_suggest</span>
</span>
<h2 class="text-2xl font-bold m-0">Disabling Cookies</h2>
</div>
<p class="text-slate-400 leading-relaxed">
You can prevent the setting of cookies by adjusting the settings on your browser (see your browser Help for how to do this). Be aware that disabling cookies will affect the functionality of this and many other websites that you visit. Disabling cookies will usually result in also disabling certain functionality and features of this site. Therefore it is recommended that you do not disable cookies.
</p>
</section>
<div class="mt-12 pt-8 border-t border-slate-200 dark:border-[#3a3146]">
<h3 class="text-xl font-bold text-white mb-4">More Information</h3>
<p class="text-slate-400">
Hopefully that has clarified things for you. If there is something that you aren't sure whether you need or not, it's usually safer to leave cookies enabled in case it does interact with one of the features you use on our site. However, if you are still looking for more information, you can contact us through one of our preferred contact methods:
</p>
<div class="mt-4 flex flex-wrap gap-4">
<a class="text-primary hover:text-purple-400 font-medium flex items-center gap-1" href="#">
Email Support <span class="material-symbols-outlined text-sm">arrow_outward</span>
</a>
<a class="text-primary hover:text-purple-400 font-medium flex items-center gap-1" href="#">
Privacy Policy <span class="material-symbols-outlined text-sm">arrow_outward</span>
</a>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="border-t border-slate-200 dark:border-[#302839] bg-background-light dark:bg-[#141118] py-10 px-6">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex flex-col md:flex-row items-center gap-6">
<div class="flex items-center gap-2 text-slate-500 dark:text-slate-400">
<span class="material-symbols-outlined">copyright</span>
<span class="text-sm">2023 QuizPortal Inc.</span>
</div>
<div class="flex gap-6">
<a class="text-sm text-slate-500 dark:text-slate-400 hover:text-primary transition-colors" href="#">Privacy</a>
<a class="text-sm text-slate-500 dark:text-slate-400 hover:text-primary transition-colors" href="#">Terms</a>
<a class="text-sm text-slate-500 dark:text-slate-400 hover:text-primary transition-colors" href="#">Cookies</a>
</div>
</div>
<div class="flex items-center gap-4">
<a class="size-10 rounded-full bg-slate-200 dark:bg-[#302839] flex items-center justify-center text-slate-500 dark:text-slate-400 hover:bg-primary hover:text-white transition-all" href="#">
<!-- Icon placeholder for social -->
<svg aria-hidden="true" class="size-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="size-10 rounded-full bg-slate-200 dark:bg-[#302839] flex items-center justify-center text-slate-500 dark:text-slate-400 hover:bg-primary hover:text-white transition-all" href="#">
<svg aria-hidden="true" class="size-5" fill="currentColor" viewbox="0 0 24 24"><path clip-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" fill-rule="evenodd"></path></svg>
</a>
</div>
</div>
</footer>
</body></html>