<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>My Quizzes & History - 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/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-blue": "#3B82F6", // Blue-500 for electric accents
"accent-yellow": "#FACC15", // Yellow-400
"background-dark": "#0B0518", // Deep dark background
"card-dark": "#150A2E", // Dark purple card bg
"card-lighter": "#1E123B", // Slightly lighter card bg
"text-light": "#E5E7EB", // Gray-200
"text-dim": "#9CA3AF", // Gray-400
"neon-purple": "#A855F7",
"neon-blue": "#06B6D4",
},
fontFamily: {
sans: ["Inter", "sans-serif"],
display: ["Outfit", "sans-serif"],
},
backgroundImage: {
'dashboard-gradient': 'radial-gradient(circle at 10% 20%, rgba(124, 58, 237, 0.15) 0%, rgba(11, 5, 24, 0) 50%)',
'card-gradient': 'linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%)',
'glass-gradient': 'linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01))',
}
},
},
};
</script>
<style>
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0B0518;
}
::-webkit-scrollbar-thumb {
background: #2D1B4E;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #4C2E85;
}
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #A855F7, #3B82F6);
}
</style>
</head>
<body class="bg-background-dark text-text-light font-sans min-h-screen selection:bg-primary selection:text-white">
<nav class="sticky top-0 w-full z-50 backdrop-blur-xl bg-background-dark/80 border-b 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 items-center gap-2 cursor-pointer">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white shadow-[0_0_15px_rgba(124,58,237,0.5)]">
<span class="material-symbols-outlined text-2xl">sports_esports</span>
</div>
<span class="font-display font-bold text-xl tracking-tight text-white">QuizQuest</span>
</div>
<div class="hidden md:flex items-center space-x-1">
<a class="text-text-dim hover:text-white hover:bg-white/5 transition-all px-4 py-2 rounded-lg text-sm font-medium" href="#">Dashboard</a>
<a class="text-white bg-white/10 transition-all px-4 py-2 rounded-lg text-sm font-medium border border-white/5" href="#">My Quizzes</a>
<a class="text-text-dim hover:text-white hover:bg-white/5 transition-all px-4 py-2 rounded-lg text-sm font-medium" href="#">Leaderboard</a>
<a class="text-text-dim hover:text-white hover:bg-white/5 transition-all px-4 py-2 rounded-lg text-sm font-medium" href="#">Wallet</a>
</div>
<div class="flex items-center gap-4">
<div class="hidden sm:flex items-center gap-2 bg-card-dark border border-white/10 rounded-full pl-1 pr-3 py-1">
<div class="w-7 h-7 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full flex items-center justify-center text-[10px] font-bold text-black shadow-lg">XP</div>
<span class="text-sm font-bold text-accent-yellow">2,450</span>
</div>
<button class="relative p-2 rounded-full hover:bg-white/10 transition-colors text-text-dim hover:text-white">
<span class="material-symbols-outlined">notifications</span>
<span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
</button>
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-accent-blue p-[2px]">
<img alt="User Profile" class="w-full h-full rounded-full border-2 border-background-dark object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCEfnDd9kRiFBr4ejNwZdcXPKp8qBjlZk6o6HbY_oNsJqyvpdRIIwrl5uf7oT0QR2EEeEh_1ULzK7Godh5LJpR1I8AsOXOl1OT6MfS2m3IXQT3igz4ePe6YcDQqDdP_ZDIocXVVBFkgrRQU4QbbhcZLqHWVhzAo9xREaBuMfBHbgXAvuotI3RiDhGIOJKEdAkLtl_WQGqPb3I8BNTXo-9KL_rWlX68sMK8We56XdmahdbF8EPTKq-KUuYEhr3yaIuoefn0Rwpjnf54"/>
</div>
</div>
</div>
</div>
</nav>
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative">
<div class="absolute top-0 left-0 w-full h-[500px] bg-dashboard-gradient pointer-events-none -z-10"></div>
<div class="absolute top-40 right-20 w-64 h-64 bg-primary/10 rounded-full blur-[100px] pointer-events-none -z-10"></div>
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-10">
<div>
<h1 class="font-display text-3xl md:text-4xl font-bold text-white mb-2">My History</h1>
<p class="text-text-dim">Track your progress and revisit your past glories.</p>
</div>
<div class="flex p-1 bg-card-lighter border border-white/5 rounded-xl self-start">
<button class="px-5 py-2 rounded-lg bg-primary text-white text-sm font-medium shadow-lg shadow-primary/25 transition-all">Attempted</button>
<button class="px-5 py-2 rounded-lg text-text-dim hover:text-white hover:bg-white/5 text-sm font-medium transition-all">Bookmarked</button>
<button class="px-5 py-2 rounded-lg text-text-dim hover:text-white hover:bg-white/5 text-sm font-medium transition-all">Completed</button>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-10">
<div class="bg-card-dark border border-white/5 rounded-2xl p-5 flex items-center gap-4 relative overflow-hidden group">
<div class="absolute right-0 top-0 w-24 h-24 bg-primary/5 rounded-full blur-2xl group-hover:bg-primary/10 transition-all"></div>
<div class="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center text-primary">
<span class="material-symbols-outlined">history</span>
</div>
<div>
<p class="text-xs text-text-dim uppercase tracking-wider font-semibold">Total Quizzes</p>
<h3 class="text-2xl font-bold text-white">42</h3>
</div>
</div>
<div class="bg-card-dark border border-white/5 rounded-2xl p-5 flex items-center gap-4 relative overflow-hidden group">
<div class="absolute right-0 top-0 w-24 h-24 bg-green-500/5 rounded-full blur-2xl group-hover:bg-green-500/10 transition-all"></div>
<div class="w-12 h-12 rounded-xl bg-green-500/20 flex items-center justify-center text-green-400">
<span class="material-symbols-outlined">emoji_events</span>
</div>
<div>
<p class="text-xs text-text-dim uppercase tracking-wider font-semibold">Win Rate</p>
<h3 class="text-2xl font-bold text-white">68%</h3>
</div>
</div>
<div class="bg-card-dark border border-white/5 rounded-2xl p-5 flex items-center gap-4 relative overflow-hidden group">
<div class="absolute right-0 top-0 w-24 h-24 bg-accent-blue/5 rounded-full blur-2xl group-hover:bg-accent-blue/10 transition-all"></div>
<div class="w-12 h-12 rounded-xl bg-accent-blue/20 flex items-center justify-center text-accent-blue">
<span class="material-symbols-outlined">bolt</span>
</div>
<div>
<p class="text-xs text-text-dim uppercase tracking-wider font-semibold">Avg. Speed</p>
<h3 class="text-2xl font-bold text-white">12s</h3>
</div>
</div>
</div>
<div class="mb-16">
<h2 class="text-lg font-bold text-white mb-6 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">schedule</span>
Recent Activity
</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="group relative bg-card-dark hover:bg-card-lighter border border-white/5 hover:border-primary/30 rounded-2xl overflow-hidden transition-all duration-300 shadow-xl hover:shadow-2xl hover:shadow-primary/10">
<div class="h-40 relative">
<img alt="Tech Quiz" class="w-full h-full object-cover opacity-60 group-hover:opacity-80 transition-opacity" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC46pk6pel_W7x4QIsfw64pxSdmbqBcvALNbI2ndBVHClgWb_YCLchJlL9YoVP0m7qeiL5jcky6m1_aUH0GlrKkVANIArxos8ezKDWUaKVGYKVKvFugiD00KwrS2ZPDJPmpNh10Ridu2KDGtKHjevSjg5JYsKAxV6fj3EW0jvnelgzIP6BJZUViFXrcoNe9TClqbVAkcbnsOFJejfAZT0Qa9PF6Jj4AGHhLwCSeYywpFzcnHqbCwt2ppx54EaoN6PvK7eBd7aHzBnE"/>
<div class="absolute inset-0 bg-gradient-to-t from-card-dark to-transparent"></div>
<div class="absolute top-3 right-3 bg-black/60 backdrop-blur-md px-2 py-1 rounded-lg text-xs font-medium text-white border border-white/10">
Yesterday
</div>
<div class="absolute bottom-3 left-3">
<span class="bg-primary/20 text-primary border border-primary/20 text-xs font-bold px-2 py-1 rounded-md">Tech Trivia</span>
</div>
</div>
<div class="p-5">
<h3 class="text-xl font-bold text-white mb-3 group-hover:text-primary transition-colors">Cyberpunk Revolution</h3>
<div class="grid grid-cols-3 gap-2 mb-4">
<div class="bg-white/5 rounded-lg p-2 text-center">
<div class="text-[10px] text-text-dim uppercase">Score</div>
<div class="text-white font-bold">850</div>
</div>
<div class="bg-white/5 rounded-lg p-2 text-center">
<div class="text-[10px] text-text-dim uppercase">Rank</div>
<div class="text-accent-yellow font-bold">#12</div>
</div>
<div class="bg-white/5 rounded-lg p-2 text-center">
<div class="text-[10px] text-text-dim uppercase">XP</div>
<div class="text-accent-blue font-bold">+120</div>
</div>
</div>
<div class="flex items-center justify-between border-t border-white/5 pt-4">
<div class="flex items-center gap-1 text-xs text-green-400">
<span class="material-symbols-outlined text-sm">check_circle</span>
Completed
</div>
<button class="text-sm font-medium text-white hover:text-primary flex items-center gap-1 transition-colors">
View Details <span class="material-symbols-outlined text-base">arrow_forward</span>
</button>
</div>
</div>
</div>
<div class="group relative bg-card-dark hover:bg-card-lighter border border-white/5 hover:border-pink-500/30 rounded-2xl overflow-hidden transition-all duration-300 shadow-xl hover:shadow-2xl hover:shadow-pink-500/10">
<div class="h-40 relative">
<img alt="Music Quiz" class="w-full h-full object-cover opacity-60 group-hover:opacity-80 transition-opacity" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDwvGr2a8gwgz_8s_pxbUILuNWod5Ed9uU-ETHzVCVNjBOQ10pSf-GsybBAYqewL3bxHzlgdVevWVpRb1oRRsjf0F4UDrqvQ-6sLxhiLU4uJ_3ZCKA31Rommv44ZQT3XD3VePXGipedwFQnE_AC-l_q-rjV4Prp-cx-fQDjBSCyYqW41Ke9WYZ8s79ilMhnnT1ZCQc4ox4OBtz-civwfxz6pmkbDxPT6hupbAJWAjsvHHMzUTYNzgGojWnFauLrV47DruZuBE2WM44"/>
<div class="absolute inset-0 bg-gradient-to-t from-card-dark to-transparent"></div>
<div class="absolute top-3 right-3 bg-black/60 backdrop-blur-md px-2 py-1 rounded-lg text-xs font-medium text-white border border-white/10">
2 days ago
</div>
<div class="absolute bottom-3 left-3">
<span class="bg-pink-500/20 text-pink-400 border border-pink-500/20 text-xs font-bold px-2 py-1 rounded-md">Music</span>
</div>
</div>
<div class="p-5">
<h3 class="text-xl font-bold text-white mb-3 group-hover:text-pink-400 transition-colors">80s Synth Wave</h3>
<div class="grid grid-cols-3 gap-2 mb-4">
<div class="bg-white/5 rounded-lg p-2 text-center">
<div class="text-[10px] text-text-dim uppercase">Score</div>
<div class="text-white font-bold">1,200</div>
</div>
<div class="bg-white/5 rounded-lg p-2 text-center">
<div class="text-[10px] text-text-dim uppercase">Rank</div>
<div class="text-accent-yellow font-bold">#3</div>
</div>
<div class="bg-white/5 rounded-lg p-2 text-center">
<div class="text-[10px] text-text-dim uppercase">XP</div>
<div class="text-accent-blue font-bold">+350</div>
</div>
</div>
<div class="flex items-center justify-between border-t border-white/5 pt-4">
<div class="flex items-center gap-1 text-xs text-green-400">
<span class="material-symbols-outlined text-sm">check_circle</span>
Completed
</div>
<button class="text-sm font-medium text-white hover:text-pink-400 flex items-center gap-1 transition-colors">
View Details <span class="material-symbols-outlined text-base">arrow_forward</span>
</button>
</div>
</div>
</div>
<div class="group relative bg-card-dark hover:bg-card-lighter border border-white/5 hover:border-yellow-500/30 rounded-2xl overflow-hidden transition-all duration-300 shadow-xl hover:shadow-2xl hover:shadow-yellow-500/10">
<div class="h-40 relative">
<img alt="History Quiz" class="w-full h-full object-cover opacity-60 group-hover:opacity-80 transition-opacity" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDVhAnvTrUKVzOZg0oi4CIs1zz_dD-dCjPH1JHYF-8bWZdQe7jVAE1EzykZHmmTvTW6V5Jb4liOJZT15ib2Ylb_BUSjgNKHCzrQhb5npW6xh6TytqPd3ef9kots4t8RRCc_AWrmfeBSX1ACl8L8jdfc0rEnz_Iwa29PwfMQoUpWmblhGaZVT-CO6Q-IiCnJq-o7o1YxYXu35fHJ6yqiP22Da1veF8xeTOPo-XB8Vz25CPgGpFbtN2G68Nsylqq4BT_hJpWFR7LJfEg"/>
<div class="absolute inset-0 bg-gradient-to-t from-card-dark to-transparent"></div>
<div class="absolute top-3 right-3 bg-black/60 backdrop-blur-md px-2 py-1 rounded-lg text-xs font-medium text-white border border-white/10">
Last Week
</div>
<div class="absolute bottom-3 left-3">
<span class="bg-yellow-500/20 text-yellow-400 border border-yellow-500/20 text-xs font-bold px-2 py-1 rounded-md">History</span>
</div>
</div>
<div class="p-5">
<h3 class="text-xl font-bold text-white mb-3 group-hover:text-yellow-400 transition-colors">Ancient Empires</h3>
<div class="w-full bg-white/10 rounded-full h-2 mb-4">
<div class="bg-yellow-500 h-2 rounded-full" style="width: 45%"></div>
</div>
<div class="flex items-center justify-between border-t border-white/5 pt-4">
<div class="flex items-center gap-1 text-xs text-yellow-500">
<span class="material-symbols-outlined text-sm">pause_circle</span>
In Progress (45%)
</div>
<button class="px-4 py-1.5 rounded-full bg-white text-black text-sm font-bold hover:bg-yellow-400 transition-colors">
Resume
</button>
</div>
</div>
</div>
</div>
</div>
<div class="mb-20">
<div class="flex items-center justify-between mb-6">
<h2 class="text-lg font-bold text-white flex items-center gap-2">
<span class="material-symbols-outlined text-accent-blue">recommend</span>
Recommended for You
</h2>
<div class="flex gap-2">
<button class="w-8 h-8 rounded-full border border-white/10 flex items-center justify-center hover:bg-white/10 text-white transition-colors">
<span class="material-symbols-outlined text-sm">arrow_back</span>
</button>
<button class="w-8 h-8 rounded-full border border-white/10 flex items-center justify-center hover:bg-white/10 text-white transition-colors">
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
</div>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="p-4 bg-card-dark border border-white/5 hover:border-accent-blue/50 rounded-xl transition-all group cursor-pointer">
<div class="flex items-start justify-between mb-3">
<div class="w-10 h-10 rounded-lg bg-blue-500/20 flex items-center justify-center text-accent-blue">
<span class="material-symbols-outlined">science</span>
</div>
<span class="text-xs bg-white/5 text-text-dim px-2 py-1 rounded">Hard</span>
</div>
<h4 class="font-bold text-white mb-1 group-hover:text-accent-blue transition-colors">Quantum Physics 101</h4>
<p class="text-xs text-text-dim mb-3">Based on your Science score</p>
<div class="flex items-center justify-between">
<span class="text-xs font-bold text-accent-yellow">500 XP</span>
<span class="material-symbols-outlined text-gray-500 group-hover:text-white transition-colors text-lg">play_circle</span>
</div>
</div>
<div class="p-4 bg-card-dark border border-white/5 hover:border-purple-500/50 rounded-xl transition-all group cursor-pointer">
<div class="flex items-start justify-between mb-3">
<div class="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center text-purple-400">
<span class="material-symbols-outlined">movie</span>
</div>
<span class="text-xs bg-white/5 text-text-dim px-2 py-1 rounded">Medium</span>
</div>
<h4 class="font-bold text-white mb-1 group-hover:text-purple-400 transition-colors">Oscar Winners 2023</h4>
<p class="text-xs text-text-dim mb-3">Trending now</p>
<div class="flex items-center justify-between">
<span class="text-xs font-bold text-accent-yellow">300 XP</span>
<span class="material-symbols-outlined text-gray-500 group-hover:text-white transition-colors text-lg">play_circle</span>
</div>
</div>
<div class="p-4 bg-card-dark border border-white/5 hover:border-green-500/50 rounded-xl transition-all group cursor-pointer">
<div class="flex items-start justify-between mb-3">
<div class="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center text-green-400">
<span class="material-symbols-outlined">public</span>
</div>
<span class="text-xs bg-white/5 text-text-dim px-2 py-1 rounded">Easy</span>
</div>
<h4 class="font-bold text-white mb-1 group-hover:text-green-400 transition-colors">World Capitals</h4>
<p class="text-xs text-text-dim mb-3">Quick play</p>
<div class="flex items-center justify-between">
<span class="text-xs font-bold text-accent-yellow">150 XP</span>
<span class="material-symbols-outlined text-gray-500 group-hover:text-white transition-colors text-lg">play_circle</span>
</div>
</div>
<div class="p-4 bg-card-dark border border-white/5 hover:border-orange-500/50 rounded-xl transition-all group cursor-pointer">
<div class="flex items-start justify-between mb-3">
<div class="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center text-orange-400">
<span class="material-symbols-outlined">sports_basketball</span>
</div>
<span class="text-xs bg-white/5 text-text-dim px-2 py-1 rounded">Expert</span>
</div>
<h4 class="font-bold text-white mb-1 group-hover:text-orange-400 transition-colors">NBA Legends</h4>
<p class="text-xs text-text-dim mb-3">Challenge yourself</p>
<div class="flex items-center justify-between">
<span class="text-xs font-bold text-accent-yellow">1000 XP</span>
<span class="material-symbols-outlined text-gray-500 group-hover:text-white transition-colors text-lg">play_circle</span>
</div>
</div>
</div>
</div>
<div class="relative rounded-3xl overflow-hidden mb-12 border border-white/10 group">
<div class="absolute inset-0 bg-gradient-to-r from-primary/80 to-accent-blue/80 opacity-90"></div>
<div class="absolute -right-20 -top-20 w-80 h-80 bg-white/20 rounded-full blur-3xl group-hover:bg-white/30 transition-all duration-700"></div>
<div class="relative z-10 p-8 sm:p-10 flex flex-col md:flex-row items-center justify-between gap-8">
<div class="flex items-center gap-6">
<div class="hidden sm:flex w-20 h-20 bg-white rounded-2xl items-center justify-center shadow-2xl rotate-3 group-hover:rotate-6 transition-transform">
<span class="material-symbols-outlined text-4xl text-primary">redeem</span>
</div>
<div>
<h3 class="text-2xl sm:text-3xl font-bold text-white mb-2">Turn your XP into Rewards!</h3>
<p class="text-white/80 max-w-md">You have <span class="font-bold text-white">2,450 XP</span> available. Redeem them for exclusive avatars, power-ups, or cash prizes.</p>
</div>
</div>
<button class="whitespace-nowrap bg-white text-primary hover:bg-gray-100 font-bold px-8 py-4 rounded-full shadow-lg transition-all transform hover:scale-105 flex items-center gap-2">
Redeem Now
<span class="material-symbols-outlined">arrow_forward</span>
</button>
</div>
</div>
</main>
<footer class="bg-[#080412] border-t border-white/5 py-8 mt-auto">
<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-text-dim">
<span class="material-symbols-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-text-dim hover:text-white transition-colors" href="#">Privacy</a>
<a class="text-sm text-text-dim hover:text-white transition-colors" href="#">Terms</a>
<a class="text-sm text-text-dim hover:text-white transition-colors" href="#">Support</a>
</div>
</div>
</footer>
</body></html>