<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Public Quizzes - QuizQuest</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;800&family=Outfit:wght@500;700;900&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" 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)",
"neon-blue": "#00F0FF",
"neon-pink": "#FF00AA",
},
fontFamily: {
sans: ["Inter", "sans-serif"],
display: ["Outfit", "sans-serif"],
},
backgroundImage: {
'hero-gradient': 'radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.15) 0%, rgba(15, 7, 32, 0) 50%)',
'card-gradient': 'linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%)',
'glow': 'conic-gradient(from 180deg at 50% 50%, #2a8af6 0deg, #a853ba 180deg, #e92a67 360deg)',
}
},
},
};
</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;
}
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</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/80 border-b border-gray-200 dark:border-white/10">
<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">
<span class="material-icons-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="text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Public Quizzes</a>
<a class="hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Leaderboard</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-icons-outlined dark:hidden">dark_mode</span>
<span class="material-icons-outlined hidden dark:block">light_mode</span>
</button>
<a class="text-sm font-medium hover:text-primary transition-colors" href="#">Login</a>
<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="#">
Join Now
</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-icons-outlined">menu</span>
</button>
</div>
</div>
</div>
</nav>
<section class="relative pt-32 pb-20 min-h-screen">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[500px] bg-hero-gradient pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
<div>
<h1 class="font-display text-4xl md:text-5xl font-bold mb-2">Public <span class="text-primary">Quizzes</span></h1>
<p class="text-gray-400">Join live battles and win massive rewards.</p>
</div>
<div class="flex flex-col sm:flex-row gap-4 w-full md:w-auto">
<div class="relative group">
<span class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<span class="material-icons-outlined text-gray-500 group-focus-within:text-primary transition-colors">search</span>
</span>
<input class="bg-card-dark border border-white/10 text-white text-sm rounded-xl focus:ring-primary focus:border-primary block w-full pl-10 p-3 shadow-lg" placeholder="Search quizzes..." type="text"/>
</div>
<div class="flex gap-2 overflow-x-auto pb-2 sm:pb-0 no-scrollbar">
<button class="px-4 py-2 rounded-xl bg-primary text-white text-sm font-medium whitespace-nowrap shadow-lg shadow-primary/20">All</button>
<button class="px-4 py-2 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 text-gray-300 text-sm font-medium transition-colors whitespace-nowrap">Tech</button>
<button class="px-4 py-2 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 text-gray-300 text-sm font-medium transition-colors whitespace-nowrap">Gaming</button>
<button class="px-4 py-2 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 text-gray-300 text-sm font-medium transition-colors whitespace-nowrap">History</button>
<button class="px-4 py-2 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 text-gray-300 text-sm font-medium transition-colors whitespace-nowrap">Pop Culture</button>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
<div class="relative group">
<div class="absolute -inset-0.5 bg-gradient-to-r from-neon-pink to-primary rounded-2xl blur opacity-30 group-hover:opacity-75 transition duration-500"></div>
<div class="relative h-full bg-card-dark rounded-2xl p-6 border border-white/10 flex flex-col justify-between">
<div class="flex justify-between items-start mb-6">
<div class="flex items-center gap-3">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center text-white shadow-lg">
<span class="material-icons-outlined">memory</span>
</div>
<div>
<h3 class="font-display font-bold text-xl text-white">Tech Titans</h3>
<p class="text-xs text-gray-400 uppercase tracking-wider">Technology</p>
</div>
</div>
<span class="px-2 py-1 bg-green-500/20 text-green-400 border border-green-500/20 text-xs font-bold rounded-md flex items-center gap-1">
<span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span> LIVE
</span>
</div>
<div class="space-y-4 mb-6">
<div class="flex justify-between items-center text-sm">
<span class="text-gray-400">Reward Pool</span>
<span class="font-bold text-accent-yellow text-lg">₹50,000</span>
</div>
<div class="w-full bg-white/5 rounded-full h-1.5">
<div class="bg-gradient-to-r from-primary to-neon-pink h-1.5 rounded-full" style="width: 85%"></div>
</div>
<div class="flex justify-between items-center text-xs text-gray-400">
<span>854/1000 Participants</span>
<span>Filling Fast!</span>
</div>
</div>
<div class="flex items-center justify-between mt-auto pt-4 border-t border-white/5">
<div class="flex flex-col">
<span class="text-xs text-gray-500 uppercase">Entry Fee</span>
<span class="font-bold text-white">₹99</span>
</div>
<button class="px-5 py-2 bg-white text-black font-bold rounded-lg hover:bg-gray-200 transition-colors text-sm">
View Details
</button>
</div>
</div>
</div>
<div class="relative group">
<div class="absolute -inset-0.5 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-2xl blur opacity-0 group-hover:opacity-50 transition duration-500"></div>
<div class="relative h-full bg-card-dark rounded-2xl p-6 border border-white/10 flex flex-col justify-between hover:border-white/20 transition-colors">
<div class="flex justify-between items-start mb-6">
<div class="flex items-center gap-3">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-600 to-cyan-500 flex items-center justify-center text-white shadow-lg">
<span class="material-icons-outlined">sports_esports</span>
</div>
<div>
<h3 class="font-display font-bold text-xl text-white">FPS Legends</h3>
<p class="text-xs text-gray-400 uppercase tracking-wider">Gaming</p>
</div>
</div>
<span class="px-2 py-1 bg-white/5 text-gray-400 border border-white/10 text-xs font-bold rounded-md">
Starts in 10m
</span>
</div>
<div class="space-y-4 mb-6">
<div class="flex justify-between items-center text-sm">
<span class="text-gray-400">Reward Pool</span>
<span class="font-bold text-white text-lg">₹25,000</span>
</div>
<div class="w-full bg-white/5 rounded-full h-1.5">
<div class="bg-blue-500 h-1.5 rounded-full" style="width: 45%"></div>
</div>
<div class="flex justify-between items-center text-xs text-gray-400">
<span>230/500 Participants</span>
<span>Open</span>
</div>
</div>
<div class="flex items-center justify-between mt-auto pt-4 border-t border-white/5">
<div class="flex flex-col">
<span class="text-xs text-gray-500 uppercase">Entry Fee</span>
<span class="font-bold text-white">₹49</span>
</div>
<button class="px-5 py-2 bg-white/5 hover:bg-white/10 border border-white/10 text-white font-bold rounded-lg transition-colors text-sm">
View Details
</button>
</div>
</div>
</div>
<div class="relative group">
<div class="absolute -inset-0.5 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-2xl blur opacity-0 group-hover:opacity-50 transition duration-500"></div>
<div class="relative h-full bg-card-dark rounded-2xl p-6 border border-white/10 flex flex-col justify-between hover:border-white/20 transition-colors">
<div class="flex justify-between items-start mb-6">
<div class="flex items-center gap-3">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-yellow-500 to-orange-600 flex items-center justify-center text-white shadow-lg">
<span class="material-icons-outlined">movie</span>
</div>
<div>
<h3 class="font-display font-bold text-xl text-white">Cinema 2023</h3>
<p class="text-xs text-gray-400 uppercase tracking-wider">Pop Culture</p>
</div>
</div>
<span class="px-2 py-1 bg-white/5 text-gray-400 border border-white/10 text-xs font-bold rounded-md">
Starts in 45m
</span>
</div>
<div class="space-y-4 mb-6">
<div class="flex justify-between items-center text-sm">
<span class="text-gray-400">Reward Pool</span>
<span class="font-bold text-white text-lg">₹10,000</span>
</div>
<div class="w-full bg-white/5 rounded-full h-1.5">
<div class="bg-yellow-500 h-1.5 rounded-full" style="width: 12%"></div>
</div>
<div class="flex justify-between items-center text-xs text-gray-400">
<span>60/500 Participants</span>
<span>Open</span>
</div>
</div>
<div class="flex items-center justify-between mt-auto pt-4 border-t border-white/5">
<div class="flex flex-col">
<span class="text-xs text-gray-500 uppercase">Entry Fee</span>
<span class="font-bold text-white">₹29</span>
</div>
<button class="px-5 py-2 bg-white/5 hover:bg-white/10 border border-white/10 text-white font-bold rounded-lg transition-colors text-sm">
View Details
</button>
</div>
</div>
</div>
<div class="relative group">
<div class="absolute -inset-0.5 bg-gradient-to-r from-emerald-500 to-teal-400 rounded-2xl blur opacity-0 group-hover:opacity-50 transition duration-500"></div>
<div class="relative h-full bg-card-dark rounded-2xl p-6 border border-white/10 flex flex-col justify-between hover:border-white/20 transition-colors">
<div class="flex justify-between items-start mb-6">
<div class="flex items-center gap-3">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-600 to-teal-500 flex items-center justify-center text-white shadow-lg">
<span class="material-icons-outlined">history_edu</span>
</div>
<div>
<h3 class="font-display font-bold text-xl text-white">Ancient Civs</h3>
<p class="text-xs text-gray-400 uppercase tracking-wider">History</p>
</div>
</div>
<span class="px-2 py-1 bg-green-500/20 text-green-400 border border-green-500/20 text-xs font-bold rounded-md flex items-center gap-1">
<span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span> LIVE
</span>
</div>
<div class="space-y-4 mb-6">
<div class="flex justify-between items-center text-sm">
<span class="text-gray-400">Reward Pool</span>
<span class="font-bold text-white text-lg">₹5,000</span>
</div>
<div class="w-full bg-white/5 rounded-full h-1.5">
<div class="bg-emerald-500 h-1.5 rounded-full" style="width: 65%"></div>
</div>
<div class="flex justify-between items-center text-xs text-gray-400">
<span>130/200 Participants</span>
<span>Filling Fast!</span>
</div>
</div>
<div class="flex items-center justify-between mt-auto pt-4 border-t border-white/5">
<div class="flex flex-col">
<span class="text-xs text-gray-500 uppercase">Entry Fee</span>
<span class="font-bold text-white">₹19</span>
</div>
<button class="px-5 py-2 bg-white/5 hover:bg-white/10 border border-white/10 text-white font-bold rounded-lg transition-colors text-sm">
View Details
</button>
</div>
</div>
</div>
<div class="relative group">
<div class="absolute -inset-0.5 bg-gradient-to-r from-red-500 to-pink-500 rounded-2xl blur opacity-0 group-hover:opacity-50 transition duration-500"></div>
<div class="relative h-full bg-card-dark rounded-2xl p-6 border border-white/10 flex flex-col justify-between hover:border-white/20 transition-colors">
<div class="flex justify-between items-start mb-6">
<div class="flex items-center gap-3">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-red-600 to-pink-500 flex items-center justify-center text-white shadow-lg">
<span class="material-icons-outlined">psychology</span>
</div>
<div>
<h3 class="font-display font-bold text-xl text-white">GK Masters</h3>
<p class="text-xs text-gray-400 uppercase tracking-wider">General</p>
</div>
</div>
<span class="px-2 py-1 bg-white/5 text-gray-400 border border-white/10 text-xs font-bold rounded-md">
Starts in 2h
</span>
</div>
<div class="space-y-4 mb-6">
<div class="flex justify-between items-center text-sm">
<span class="text-gray-400">Reward Pool</span>
<span class="font-bold text-white text-lg">₹15,000</span>
</div>
<div class="w-full bg-white/5 rounded-full h-1.5">
<div class="bg-red-500 h-1.5 rounded-full" style="width: 30%"></div>
</div>
<div class="flex justify-between items-center text-xs text-gray-400">
<span>90/300 Participants</span>
<span>Open</span>
</div>
</div>
<div class="flex items-center justify-between mt-auto pt-4 border-t border-white/5">
<div class="flex flex-col">
<span class="text-xs text-gray-500 uppercase">Entry Fee</span>
<span class="font-bold text-white">₹39</span>
</div>
<button class="px-5 py-2 bg-white/5 hover:bg-white/10 border border-white/10 text-white font-bold rounded-lg transition-colors text-sm">
View Details
</button>
</div>
</div>
</div>
<div class="relative group">
<div class="absolute -inset-0.5 bg-gradient-to-r from-indigo-500 to-violet-500 rounded-2xl blur opacity-0 group-hover:opacity-50 transition duration-500"></div>
<div class="relative h-full bg-card-dark rounded-2xl p-6 border border-white/10 flex flex-col justify-between hover:border-white/20 transition-colors">
<div class="flex justify-between items-start mb-6">
<div class="flex items-center gap-3">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-600 to-violet-500 flex items-center justify-center text-white shadow-lg">
<span class="material-icons-outlined">science</span>
</div>
<div>
<h3 class="font-display font-bold text-xl text-white">Science Whiz</h3>
<p class="text-xs text-gray-400 uppercase tracking-wider">Science</p>
</div>
</div>
<span class="px-2 py-1 bg-white/5 text-gray-400 border border-white/10 text-xs font-bold rounded-md">
Starts in 3h
</span>
</div>
<div class="space-y-4 mb-6">
<div class="flex justify-between items-center text-sm">
<span class="text-gray-400">Reward Pool</span>
<span class="font-bold text-white text-lg">₹8,000</span>
</div>
<div class="w-full bg-white/5 rounded-full h-1.5">
<div class="bg-indigo-500 h-1.5 rounded-full" style="width: 20%"></div>
</div>
<div class="flex justify-between items-center text-xs text-gray-400">
<span>40/200 Participants</span>
<span>Open</span>
</div>
</div>
<div class="flex items-center justify-between mt-auto pt-4 border-t border-white/5">
<div class="flex flex-col">
<span class="text-xs text-gray-500 uppercase">Entry Fee</span>
<span class="font-bold text-white">₹25</span>
</div>
<button class="px-5 py-2 bg-white/5 hover:bg-white/10 border border-white/10 text-white font-bold rounded-lg transition-colors text-sm">
View Details
</button>
</div>
</div>
</div>
</div>
<div class="mb-16">
<h2 class="font-display text-2xl font-bold mb-6 flex items-center gap-2">
<span class="material-icons-outlined text-primary">schedule</span>
Upcoming Big Events
</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gradient-to-r from-[#1A1033] to-[#120824] border border-white/10 rounded-2xl p-6 flex flex-col sm:flex-row items-center gap-6 relative overflow-hidden group">
<div class="absolute top-0 right-0 w-32 h-32 bg-primary/20 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
<div class="w-20 h-20 rounded-2xl bg-white/5 flex items-center justify-center flex-shrink-0 border border-white/5">
<div class="text-center">
<div class="text-2xl font-bold text-white">24</div>
<div class="text-xs text-gray-400 uppercase">Oct</div>
</div>
</div>
<div class="flex-grow text-center sm:text-left">
<h3 class="text-xl font-bold text-white mb-1">Mega Quiz Championship</h3>
<p class="text-gray-400 text-sm mb-3">The biggest quiz event of the year with huge cash prizes.</p>
<div class="flex flex-wrap justify-center sm:justify-start gap-4 text-xs font-mono text-primary">
<div class="bg-primary/10 px-3 py-1 rounded-md border border-primary/20">
<span class="font-bold">02</span> Days
</div>
<div class="bg-primary/10 px-3 py-1 rounded-md border border-primary/20">
<span class="font-bold">14</span> Hours
</div>
<div class="bg-primary/10 px-3 py-1 rounded-md border border-primary/20">
<span class="font-bold">45</span> Mins
</div>
</div>
</div>
<div class="flex-shrink-0">
<button class="px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 text-white font-bold rounded-xl transition-colors">
Remind Me
</button>
</div>
</div>
<div class="bg-gradient-to-r from-[#1A1033] to-[#120824] border border-white/10 rounded-2xl p-6 flex flex-col sm:flex-row items-center gap-6 relative overflow-hidden group">
<div class="absolute top-0 right-0 w-32 h-32 bg-accent-yellow/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
<div class="w-20 h-20 rounded-2xl bg-white/5 flex items-center justify-center flex-shrink-0 border border-white/5">
<div class="text-center">
<div class="text-2xl font-bold text-white">26</div>
<div class="text-xs text-gray-400 uppercase">Oct</div>
</div>
</div>
<div class="flex-grow text-center sm:text-left">
<h3 class="text-xl font-bold text-white mb-1">Halloween Spooktacular</h3>
<p class="text-gray-400 text-sm mb-3">Horror movies, urban legends, and spooky trivia.</p>
<div class="flex flex-wrap justify-center sm:justify-start gap-4 text-xs font-mono text-accent-yellow">
<div class="bg-yellow-500/10 px-3 py-1 rounded-md border border-yellow-500/20">
<span class="font-bold">04</span> Days
</div>
<div class="bg-yellow-500/10 px-3 py-1 rounded-md border border-yellow-500/20">
<span class="font-bold">08</span> Hours
</div>
<div class="bg-yellow-500/10 px-3 py-1 rounded-md border border-yellow-500/20">
<span class="font-bold">12</span> Mins
</div>
</div>
</div>
<div class="flex-shrink-0">
<button class="px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 text-white font-bold rounded-xl transition-colors">
Remind Me
</button>
</div>
</div>
</div>
</div>
<div class="relative rounded-3xl overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-primary to-purple-800 opacity-90"></div>
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center mix-blend-overlay opacity-30"></div>
<div class="relative z-10 px-6 py-12 md:px-12 md:py-16 flex flex-col md:flex-row items-center justify-between gap-8 text-center md:text-left">
<div>
<h2 class="font-display text-3xl md:text-4xl font-bold text-white mb-4">Ready to Dominate the Arena?</h2>
<p class="text-purple-100 max-w-xl text-lg">Create an account to track your progress, earn badges, and withdraw your winnings instantly.</p>
</div>
<div class="flex-shrink-0">
<a class="inline-flex items-center gap-2 bg-white text-primary font-bold px-8 py-4 rounded-full shadow-2xl hover:bg-gray-100 transition-transform hover:scale-105" href="#">
<span class="material-icons-outlined">login</span>
Login to Play
</a>
</div>
</div>
</div>
</div>
</section>
<footer class="bg-white dark:bg-[#080412] border-t border-gray-200 dark:border-white/5 py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
<span class="material-icons-outlined">sports_esports</span>
<span class="text-sm font-medium">QuizQuest © 2023</span>
</div>
<div class="flex items-center gap-8">
<a class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" href="#">Privacy</a>
<a class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" href="#">Terms</a>
<a class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" href="#">Support</a>
</div>
</div>
</footer>
</body></html>