<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>My 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&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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#6D28D9", // Vibrant Purple
accent: "#FBBF24", // Gold
"background-light": "#F3F4F6",
"background-dark": "#0F0E17",
"surface-light": "#FFFFFF",
"surface-dark": "#1E1B2E",
"surface-dark-2": "#262338",
"neon-purple": "#A855F7",
"neon-blue": "#3B82F6",
"neon-green": "#22C55E",
},
fontFamily: {
display: ["Inter", "sans-serif"],
sans: ["Inter", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.75rem",
},
boxShadow: {
'neon': '0 0 10px rgba(168, 85, 247, 0.4)',
'neon-blue': '0 0 10px rgba(59, 130, 246, 0.4)',
}
},
},
};
// Check for saved user preference
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
function toggleTheme() {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.theme = 'light';
} else {
document.documentElement.classList.add('dark');
localStorage.theme = 'dark';
}
}
</script>
<style>
.glass-card {
background: rgba(30, 27, 46, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.light .glass-card {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.custom-scrollbar::-webkit-scrollbar {
height: 6px;
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(109, 40, 217, 0.3);
border-radius: 20px;
}
.nav-active {
color: #A855F7;
position: relative;
}
.nav-active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background-color: #A855F7;
box-shadow: 0 0 8px #A855F7;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-gray-900 dark:text-white font-sans transition-colors duration-300 min-h-screen flex flex-col">
<nav class="fixed w-full z-50 bg-background-light/90 dark:bg-background-dark/90 backdrop-blur-sm border-b border-gray-200 dark:border-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-20 items-center">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white text-xl shadow-neon">
<i class="fas fa-gamepad"></i>
</div>
<span class="font-bold text-xl tracking-tight">QuizQuest</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-white font-medium transition" href="#">Dashboard</a>
<a class="text-primary dark:text-neon-purple font-medium transition nav-active" href="#">My Quizzes</a>
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-white font-medium transition" href="#">Leaderboard</a>
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-white font-medium transition" href="#">Wallet</a>
</div>
<div class="flex items-center gap-4">
<button class="p-2 rounded-lg text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800 transition" onclick="toggleTheme()">
<i class="fas fa-moon dark:hidden"></i>
<i class="fas fa-sun hidden dark:inline text-yellow-400"></i>
</button>
<div class="relative group">
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 p-[2px] cursor-pointer">
<div class="w-full h-full rounded-full bg-surface-dark flex items-center justify-center overflow-hidden">
<span class="material-symbols-outlined text-white text-xl">person</span>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<main class="flex-grow pt-24 pb-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
<div class="fixed top-0 right-0 -mr-20 -mt-20 w-96 h-96 bg-primary opacity-10 blur-[128px] rounded-full pointer-events-none"></div>
<div class="fixed bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 bg-blue-600 opacity-10 blur-[128px] rounded-full pointer-events-none"></div>
<div class="max-w-7xl mx-auto relative z-10">
<div class="flex flex-col md:flex-row justify-between items-end md:items-center mb-10 gap-6">
<div>
<h1 class="text-3xl md:text-4xl font-extrabold tracking-tight mb-2">My Quizzes</h1>
<p class="text-gray-500 dark:text-gray-400">Track your progress, join live events, and view your history.</p>
</div>
<div class="flex items-center gap-4 bg-white dark:bg-surface-dark-2 p-1.5 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
<button class="px-5 py-2 rounded-lg bg-primary text-white text-sm font-semibold shadow-md transition-all">Running</button>
<button class="px-5 py-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium transition-all">Upcoming</button>
<button class="px-5 py-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium transition-all">Completed</button>
</div>
</div>
<div class="mb-8 grid grid-cols-1 md:grid-cols-12 gap-4">
<div class="md:col-span-8 relative">
<span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
<i class="fas fa-search"></i>
</span>
<input class="w-full pl-11 pr-4 py-3 bg-white dark:bg-surface-dark border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all placeholder-gray-400 text-gray-900 dark:text-white" placeholder="Search for quizzes..." type="text"/>
</div>
<div class="md:col-span-4 relative">
<span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
<i class="fas fa-filter"></i>
</span>
<select class="w-full pl-11 pr-10 py-3 bg-white dark:bg-surface-dark border border-gray-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-primary outline-none transition-all appearance-none cursor-pointer text-gray-900 dark:text-white">
<option>All Categories</option>
<option>Tech & Gaming</option>
<option>Science</option>
<option>History</option>
<option>Pop Culture</option>
</select>
<span class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
<i class="fas fa-chevron-down text-xs"></i>
</span>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="glass-card rounded-2xl p-5 relative group hover:-translate-y-1 transition-all duration-300 hover:shadow-neon">
<div class="absolute top-4 right-4 z-10">
<span class="flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
</span>
</div>
<div class="h-40 rounded-xl bg-gradient-to-r from-purple-900 to-indigo-900 relative overflow-hidden mb-4">
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1550745165-9014eb94aca0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80')] bg-cover bg-center opacity-40 mix-blend-overlay"></div>
<div class="absolute bottom-3 left-3">
<span class="bg-black/50 backdrop-blur-md text-white text-xs px-2 py-1 rounded border border-white/10">Technology</span>
</div>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-primary transition-colors">Neon Cyber Hunt</h3>
<div class="flex justify-between items-center mb-4 text-sm">
<div class="text-gray-500 dark:text-gray-400">
<i class="fas fa-clock mr-1 text-neon-purple"></i> Ends in: <span class="font-mono text-gray-900 dark:text-white font-bold">00:45:20</span>
</div>
<div class="text-gray-500 dark:text-gray-400">
<i class="fas fa-users mr-1"></i> 2.4k
</div>
</div>
<div class="bg-surface-light dark:bg-surface-dark-2 rounded-lg p-3 mb-4 border border-gray-200 dark:border-gray-700/50 flex justify-between items-center">
<div>
<p class="text-xs text-gray-500 uppercase font-semibold">Prize Pool</p>
<p class="font-bold text-accent">₹50,000</p>
</div>
<div class="text-right">
<p class="text-xs text-gray-500 uppercase font-semibold">Entry</p>
<span class="text-green-500 text-xs font-bold bg-green-500/10 px-2 py-0.5 rounded">PAID</span>
</div>
</div>
<button class="w-full py-2.5 rounded-xl bg-gradient-to-r from-primary to-purple-600 text-white font-semibold hover:shadow-lg hover:shadow-purple-500/30 transition-all flex items-center justify-center gap-2">
<span class="material-symbols-outlined text-sm">play_arrow</span> Resume Quiz
</button>
</div>
<div class="glass-card rounded-2xl p-5 relative group hover:-translate-y-1 transition-all duration-300">
<div class="h-40 rounded-xl bg-gradient-to-r from-blue-900 to-cyan-900 relative overflow-hidden mb-4">
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1614726365723-498aa67c5f7b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80')] bg-cover bg-center opacity-40 mix-blend-overlay"></div>
<div class="absolute bottom-3 left-3">
<span class="bg-black/50 backdrop-blur-md text-white text-xs px-2 py-1 rounded border border-white/10">Science</span>
</div>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-neon-blue transition-colors">Cosmic Trivia Blast</h3>
<div class="flex justify-between items-center mb-4 text-sm">
<div class="text-gray-500 dark:text-gray-400">
<i class="fas fa-calendar mr-1 text-neon-blue"></i> Starts: <span class="font-mono text-gray-900 dark:text-white font-bold">Tomorrow, 6 PM</span>
</div>
</div>
<div class="bg-surface-light dark:bg-surface-dark-2 rounded-lg p-3 mb-4 border border-gray-200 dark:border-gray-700/50 flex justify-between items-center">
<div>
<p class="text-xs text-gray-500 uppercase font-semibold">Prize Pool</p>
<p class="font-bold text-accent">₹1 Lakh</p>
</div>
<div class="text-right">
<p class="text-xs text-gray-500 uppercase font-semibold">Entry</p>
<span class="text-gray-400 text-xs font-bold bg-gray-500/10 px-2 py-0.5 rounded">REGISTERED</span>
</div>
</div>
<button class="w-full py-2.5 rounded-xl bg-surface-dark-2 border border-primary/30 text-primary dark:text-white font-semibold hover:bg-primary hover:text-white transition-all flex items-center justify-center gap-2 group-hover:border-primary">
<span class="material-symbols-outlined text-sm">notifications_active</span> Remind Me
</button>
</div>
<div class="glass-card rounded-2xl p-5 relative group hover:-translate-y-1 transition-all duration-300">
<div class="h-40 rounded-xl bg-gradient-to-r from-yellow-900 to-orange-900 relative overflow-hidden mb-4">
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80')] bg-cover bg-center opacity-40 mix-blend-overlay"></div>
<div class="absolute bottom-3 left-3">
<span class="bg-black/50 backdrop-blur-md text-white text-xs px-2 py-1 rounded border border-white/10">Gaming</span>
</div>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-accent transition-colors">Retro Arcade Master</h3>
<div class="flex justify-between items-center mb-4 text-sm">
<div class="text-gray-500 dark:text-gray-400">
<i class="fas fa-calendar mr-1 text-accent"></i> Starts: <span class="font-mono text-gray-900 dark:text-white font-bold">Sun, 8 PM</span>
</div>
<div class="text-gray-500 dark:text-gray-400">
<i class="fas fa-users mr-1"></i> 500+
</div>
</div>
<div class="bg-surface-light dark:bg-surface-dark-2 rounded-lg p-3 mb-4 border border-gray-200 dark:border-gray-700/50 flex justify-between items-center">
<div>
<p class="text-xs text-gray-500 uppercase font-semibold">Prize Pool</p>
<p class="font-bold text-accent">₹25,000</p>
</div>
<div class="text-right">
<p class="text-xs text-gray-500 uppercase font-semibold">Fee</p>
<span class="text-white text-sm font-bold">₹49</span>
</div>
</div>
<button class="w-full py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white font-semibold hover:border-accent hover:text-accent transition-all flex items-center justify-center gap-2">
Register Now
</button>
</div>
<div class="glass-card rounded-2xl p-5 relative group hover:-translate-y-1 transition-all duration-300 hover:shadow-neon">
<div class="absolute top-4 right-4 z-10">
<span class="flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
</span>
</div>
<div class="h-40 rounded-xl bg-gradient-to-r from-emerald-900 to-green-900 relative overflow-hidden mb-4">
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1532094349884-543bc11b234d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80')] bg-cover bg-center opacity-40 mix-blend-overlay"></div>
<div class="absolute bottom-3 left-3">
<span class="bg-black/50 backdrop-blur-md text-white text-xs px-2 py-1 rounded border border-white/10">General Knowledge</span>
</div>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-neon-green transition-colors">Daily Brain Teaser</h3>
<div class="flex justify-between items-center mb-4 text-sm">
<div class="text-gray-500 dark:text-gray-400">
<i class="fas fa-clock mr-1 text-neon-green"></i> Ends in: <span class="font-mono text-gray-900 dark:text-white font-bold">02:15:00</span>
</div>
<div class="text-gray-500 dark:text-gray-400">
<i class="fas fa-users mr-1"></i> 8.1k
</div>
</div>
<div class="bg-surface-light dark:bg-surface-dark-2 rounded-lg p-3 mb-4 border border-gray-200 dark:border-gray-700/50 flex justify-between items-center">
<div>
<p class="text-xs text-gray-500 uppercase font-semibold">Prize Pool</p>
<p class="font-bold text-accent">₹10,000</p>
</div>
<div class="text-right">
<p class="text-xs text-gray-500 uppercase font-semibold">Entry</p>
<span class="text-green-500 text-xs font-bold bg-green-500/10 px-2 py-0.5 rounded">PAID</span>
</div>
</div>
<button class="w-full py-2.5 rounded-xl bg-gradient-to-r from-primary to-purple-600 text-white font-semibold hover:shadow-lg hover:shadow-purple-500/30 transition-all flex items-center justify-center gap-2">
<span class="material-symbols-outlined text-sm">play_arrow</span> Resume Quiz
</button>
</div>
<div class="glass-card rounded-2xl p-5 relative group hover:-translate-y-1 transition-all duration-300 opacity-75 hover:opacity-100">
<div class="h-40 rounded-xl bg-gray-800 relative overflow-hidden mb-4 grayscale group-hover:grayscale-0 transition-all duration-500">
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1505664194779-8beaceb93744?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80')] bg-cover bg-center opacity-30 mix-blend-overlay"></div>
<div class="absolute bottom-3 left-3">
<span class="bg-black/50 backdrop-blur-md text-white text-xs px-2 py-1 rounded border border-white/10">History</span>
</div>
<div class="absolute inset-0 flex items-center justify-center">
<span class="bg-black/60 backdrop-blur-sm text-white px-3 py-1 rounded-full text-sm font-bold border border-white/20">COMPLETED</span>
</div>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Ancient Civilizations</h3>
<div class="flex justify-between items-center mb-4 text-sm">
<div class="text-gray-500 dark:text-gray-400">
Ended: 2 days ago
</div>
<div class="text-gray-500 dark:text-gray-400">
Rank: #42
</div>
</div>
<div class="bg-surface-light dark:bg-surface-dark-2 rounded-lg p-3 mb-4 border border-gray-200 dark:border-gray-700/50 flex justify-between items-center">
<div>
<p class="text-xs text-gray-500 uppercase font-semibold">Your Score</p>
<p class="font-bold text-white">850/1000</p>
</div>
<div class="text-right">
<p class="text-xs text-gray-500 uppercase font-semibold">Winnings</p>
<span class="text-accent text-sm font-bold">₹500</span>
</div>
</div>
<button class="w-full py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-300 font-medium hover:bg-gray-100 dark:hover:bg-gray-800 transition-all flex items-center justify-center gap-2">
View Results
</button>
</div>
<div class="glass-card rounded-2xl p-5 relative group hover:-translate-y-1 transition-all duration-300 opacity-75 hover:opacity-100">
<div class="h-40 rounded-xl bg-gray-800 relative overflow-hidden mb-4 grayscale group-hover:grayscale-0 transition-all duration-500">
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80')] bg-cover bg-center opacity-30 mix-blend-overlay"></div>
<div class="absolute bottom-3 left-3">
<span class="bg-black/50 backdrop-blur-md text-white text-xs px-2 py-1 rounded border border-white/10">Sports</span>
</div>
<div class="absolute inset-0 flex items-center justify-center">
<span class="bg-black/60 backdrop-blur-sm text-white px-3 py-1 rounded-full text-sm font-bold border border-white/20">COMPLETED</span>
</div>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">E-Sports League</h3>
<div class="flex justify-between items-center mb-4 text-sm">
<div class="text-gray-500 dark:text-gray-400">
Ended: 5 days ago
</div>
<div class="text-gray-500 dark:text-gray-400">
Rank: #128
</div>
</div>
<div class="bg-surface-light dark:bg-surface-dark-2 rounded-lg p-3 mb-4 border border-gray-200 dark:border-gray-700/50 flex justify-between items-center">
<div>
<p class="text-xs text-gray-500 uppercase font-semibold">Your Score</p>
<p class="font-bold text-white">620/1000</p>
</div>
<div class="text-right">
<p class="text-xs text-gray-500 uppercase font-semibold">Winnings</p>
<span class="text-gray-500 text-sm font-bold">-</span>
</div>
</div>
<button class="w-full py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-300 font-medium hover:bg-gray-100 dark:hover:bg-gray-800 transition-all flex items-center justify-center gap-2">
View Results
</button>
</div>
</div>
<div class="mt-12 text-center">
<button class="px-8 py-3 rounded-full border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all font-medium">
Load More Quizzes
</button>
</div>
</div>
</main>
<footer class="bg-white dark:bg-[#050505] py-8 border-t border-gray-200 dark:border-gray-900 mt-auto">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-2 text-gray-400">
<i class="fas fa-gamepad"></i>
<span class="text-sm font-medium">QuizQuest © 2023</span>
</div>
<div class="flex gap-8 text-sm text-gray-500 dark:text-gray-400">
<a class="hover:text-primary transition" href="#">Privacy</a>
<a class="hover:text-primary transition" href="#">Terms</a>
<a class="hover:text-primary transition" href="#">Support</a>
</div>
</div>
</footer>
</body></html>