<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - User Dashboard</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/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
"accent-blue": "#3B82F6", // Blue-500
"accent-pink": "#EC4899", // Pink-500
"background-light": "#F3F4F6", // Gray-100
"background-dark": "#0B0518", // Very dark purple/black
"card-dark": "#150A2E", // Dark purple card bg
"card-hover": "#1E0F3F",
"sidebar-dark": "#080412",
"glass-dark": "rgba(255, 255, 255, 0.05)",
},
fontFamily: {
sans: ["Inter", "sans-serif"],
display: ["Outfit", "sans-serif"],
},
backgroundImage: {
'hero-gradient': 'radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.2) 0%, rgba(15, 7, 32, 0) 60%)',
'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: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: #0B0518;
}
::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.glass-panel {
background: rgba(21, 10, 46, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.glass-panel:hover {
background: rgba(30, 15, 63, 0.8);
border-color: rgba(124, 58, 237, 0.3);
}
</style>
</head>
<body class="bg-background-dark text-white font-sans antialiased h-screen overflow-hidden flex">
<aside class="w-64 h-full bg-sidebar-dark border-r border-white/5 flex flex-col hidden md:flex">
<div class="h-20 flex items-center px-6 border-b border-white/5">
<div class="flex items-center gap-2 cursor-pointer">
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white shadow-[0_0_15px_rgba(124,58,237,0.5)]">
<span class="material-icons-outlined text-xl">sports_esports</span>
</div>
<span class="font-display font-bold text-lg tracking-tight">QuizQuest</span>
</div>
</div>
<nav class="flex-1 overflow-y-auto py-6 px-3 space-y-1">
<a class="flex items-center gap-3 px-3 py-3 rounded-xl bg-primary/10 text-primary font-medium border border-primary/20" href="#">
<span class="material-icons-outlined">dashboard</span>
Dashboard
</a>
<a class="flex items-center gap-3 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-colors" href="#">
<span class="material-icons-outlined">emoji_events</span>
Tournaments
</a>
<a class="flex items-center gap-3 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-colors" href="#">
<span class="material-icons-outlined">leaderboard</span>
Leaderboard
</a>
<a class="flex items-center gap-3 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-colors" href="#">
<span class="material-icons-outlined">inventory_2</span>
My Rewards
</a>
<a class="flex items-center gap-3 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-colors" href="#">
<span class="material-icons-outlined">group_add</span>
Affiliate Program
</a>
<a class="flex items-center gap-3 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-colors" href="#">
<span class="material-icons-outlined">settings</span>
Settings
</a>
</nav>
<div class="p-4 border-t border-white/5">
<div class="glass-panel p-4 rounded-xl flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-gradient-to-tr from-purple-500 to-blue-500 p-0.5">
<img alt="User" class="w-full h-full rounded-full object-cover border-2 border-[#150A2E]" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBuUh0x0hYabCTRdjOCk4fWthyrS7Mxi5AJKW9bKcKI0Lvs5HJy3i2nMqsGaCw8gClmowZ_Lx53pQ3GIpRWFmb39yRCgZX9rtjHp8UY5ce2oLSf5R0tDi_CCL1Ks2AH9WilR_bB1cJM5eCAXU2xdA_kjW4ZDBDJ_2OsKsHVI6Xdli75jMgvGbTKoRs5-H6APXt8-gAACFEzyhK68NtR5QtpwWgTHjQrhMig1gYOyb3gCob0l4sqYXySTq8KRtwVyo2XBcehQYl59Bs"/>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-bold text-white truncate">Alex Gamer</p>
<p class="text-xs text-gray-400 truncate">Pro Player</p>
</div>
<button class="text-gray-400 hover:text-white">
<span class="material-icons-outlined">logout</span>
</button>
</div>
</div>
</aside>
<main class="flex-1 h-full overflow-y-auto bg-background-dark relative">
<div class="absolute top-0 left-0 w-full h-[500px] bg-hero-gradient pointer-events-none"></div>
<header class="sticky top-0 z-30 backdrop-blur-md bg-background-dark/80 border-b border-white/5 px-6 h-20 flex items-center justify-between">
<div class="md:hidden flex items-center gap-2">
<button class="text-gray-400">
<span class="material-icons-outlined">menu</span>
</button>
<span class="font-display font-bold text-lg">QuizQuest</span>
</div>
<div class="hidden md:flex items-center relative w-64">
<span class="material-icons-outlined absolute left-3 text-gray-500">search</span>
<input class="w-full bg-[#150A2E] border border-white/10 rounded-full py-2 pl-10 pr-4 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-primary/50 focus:ring-1 focus:ring-primary/50" placeholder="Search quizzes..." type="text"/>
</div>
<div class="flex items-center gap-4 sm:gap-6">
<div class="flex items-center gap-3 bg-[#150A2E] border border-white/10 px-4 py-1.5 rounded-full">
<div class="w-6 h-6 rounded-full bg-accent-yellow/20 flex items-center justify-center">
<span class="material-icons-outlined text-accent-yellow text-sm">monetization_on</span>
</div>
<div class="flex flex-col">
<span class="text-[10px] text-gray-400 uppercase font-bold tracking-wider">Reward Points</span>
<span class="text-sm font-bold font-mono">2,450</span>
</div>
</div>
<div class="hidden sm:flex items-center gap-3 bg-[#150A2E] border border-white/10 px-4 py-1.5 rounded-full">
<div class="w-6 h-6 rounded-full bg-green-500/20 flex items-center justify-center">
<span class="material-icons-outlined text-green-400 text-sm">account_balance_wallet</span>
</div>
<div class="flex flex-col">
<span class="text-[10px] text-gray-400 uppercase font-bold tracking-wider">Earnings</span>
<span class="text-sm font-bold font-mono">₹850.00</span>
</div>
</div>
<button class="relative p-2 text-gray-400 hover:text-white transition-colors">
<span class="material-icons-outlined">notifications</span>
<span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border border-background-dark"></span>
</button>
</div>
</header>
<div class="p-6 max-w-7xl mx-auto relative z-10 space-y-8">
<div class="flex flex-col md:flex-row items-end justify-between gap-6 mb-8">
<div>
<h1 class="font-display text-3xl md:text-4xl font-bold mb-2">
Welcome back, <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-pink">Alex!</span> 👋
</h1>
<p class="text-gray-400 text-sm mb-4">You're on fire today! Keep the streak alive.</p>
<div class="flex items-center gap-3 max-w-md">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-purple-500/20">
<span class="material-icons-outlined text-white">military_tech</span>
</div>
<div class="flex-1">
<div class="flex justify-between text-xs font-bold mb-1">
<span class="text-white">Level 14: Warrior</span>
<span class="text-primary">85%</span>
</div>
<div class="w-full bg-white/10 rounded-full h-2">
<div class="bg-gradient-to-r from-primary to-accent-pink h-2 rounded-full" style="width: 85%"></div>
</div>
</div>
</div>
</div>
<div class="glass-panel p-4 rounded-2xl flex items-center gap-4 min-w-[200px] border-l-4 border-l-orange-500">
<div class="w-12 h-12 rounded-full bg-orange-500/10 flex items-center justify-center relative">
<span class="material-icons-outlined text-orange-500 text-2xl animate-pulse">local_fire_department</span>
<div class="absolute inset-0 bg-orange-500/20 rounded-full blur-lg"></div>
</div>
<div>
<div class="text-2xl font-bold font-display text-white">12 Days</div>
<div class="text-xs text-gray-400 uppercase tracking-wide">Daily Streak</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2 space-y-6">
<div class="space-y-4">
<div class="flex items-center justify-between">
<h2 class="text-xl font-bold font-display">Active Tournaments</h2>
<a class="text-sm text-primary hover:text-primary-hover font-medium" href="#">View All</a>
</div>
<div class="grid md:grid-cols-2 gap-4">
<div class="group relative overflow-hidden rounded-2xl bg-card-dark border border-white/5 hover:border-primary/50 transition-all duration-300 hover:shadow-[0_0_30px_rgba(124,58,237,0.15)]">
<div class="absolute top-0 right-0 p-3 z-10">
<span class="px-2 py-1 rounded bg-red-500/20 text-red-400 text-[10px] font-bold border border-red-500/20 uppercase">Live Now</span>
</div>
<div class="h-32 bg-gray-800 relative">
<img alt="Quiz Bg" class="w-full h-full object-cover opacity-60 group-hover:scale-105 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDiV6_w1MGw9xWgcGm48MadBeuy7kMQh3VWv6e4PMurMS9GHPfCwli35K-udS1TWQ57y87R1XoCQZz8zBFA0r9QW4NZJcjCfWy6puOJgQY5FsLB-z6ZFDhLv9494bD-cWROFrVAc2eQ9RdD0u__yMiSJX1fQFllNscHEtb1vcXJRejZkQBhvOiRQFQe3M1cMGsm40WkemaTlrDQYCmEYIty5YajeXV5JAYGSzqUYaKsE3bR80SG8ReTuC4ZCTtlngGnlgwNpBaNaA8"/>
<div class="absolute inset-0 bg-gradient-to-t from-card-dark to-transparent"></div>
<div class="absolute bottom-3 left-4">
<h3 class="font-bold text-lg text-white">Neon Cyber League</h3>
<p class="text-xs text-gray-400">Tech & Future Trivia</p>
</div>
</div>
<div class="p-4 space-y-3">
<div class="flex justify-between items-center text-sm">
<div class="flex items-center gap-1.5 text-gray-400">
<span class="material-icons-outlined text-base">groups</span>
<span>1.2k Players</span>
</div>
<div class="flex items-center gap-1.5 text-accent-yellow">
<span class="material-icons-outlined text-base">emoji_events</span>
<span>₹50,000 Pool</span>
</div>
</div>
<div class="w-full h-[1px] bg-white/5"></div>
<div class="flex items-center justify-between">
<div class="text-xs text-gray-500">Entry: <span class="text-white font-bold">₹99</span></div>
<button class="bg-primary hover:bg-primary-hover text-white px-4 py-1.5 rounded-lg text-xs font-bold transition-colors">Join Now</button>
</div>
</div>
</div>
<div class="group relative overflow-hidden rounded-2xl bg-card-dark border border-white/5 hover:border-blue-500/50 transition-all duration-300 hover:shadow-[0_0_30px_rgba(59,130,246,0.15)]">
<div class="absolute top-0 right-0 p-3 z-10">
<span class="px-2 py-1 rounded bg-blue-500/20 text-blue-400 text-[10px] font-bold border border-blue-500/20 uppercase">Starting Soon</span>
</div>
<div class="h-32 bg-gray-800 relative">
<img alt="Quiz Bg" class="w-full h-full object-cover opacity-60 group-hover:scale-105 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD53-xUN8DlhSbZoRCSNUxeUFLV-PYgkX8MUfvfpLs5NxYqlYt1VrVT_IznJejANIg3sDk-HaTW-v1ByPat6bqrd2Vno4p7m6A3B_5m92Z2sZr9U16bPrUVCo0b6fO6MYtHjzH-nAJzPNa3s4Vgd0wqi9UXuT7ylnghkfh_PVcd5fK-Xw1uDZCPIN74ZxP1rUKu-IzHozJjdpYvbdVMIJ40a9UkbKli_gM44QD3rU1zNq1FoBwGIyorVE0U0QFZB4LwiNts4gCtHT0"/>
<div class="absolute inset-0 bg-gradient-to-t from-card-dark to-transparent"></div>
<div class="absolute bottom-3 left-4">
<h3 class="font-bold text-lg text-white">Retro Arcade Clash</h3>
<p class="text-xs text-gray-400">Gaming History</p>
</div>
</div>
<div class="p-4 space-y-3">
<div class="flex justify-between items-center text-sm">
<div class="flex items-center gap-1.5 text-gray-400">
<span class="material-icons-outlined text-base">groups</span>
<span>850 Players</span>
</div>
<div class="flex items-center gap-1.5 text-accent-yellow">
<span class="material-icons-outlined text-base">emoji_events</span>
<span>₹25,000 Pool</span>
</div>
</div>
<div class="w-full h-[1px] bg-white/5"></div>
<div class="flex items-center justify-between">
<div class="text-xs text-gray-500">Entry: <span class="text-white font-bold">₹49</span></div>
<button class="bg-white/10 hover:bg-white/20 text-white px-4 py-1.5 rounded-lg text-xs font-bold transition-colors border border-white/10">Remind Me</button>
</div>
</div>
</div>
</div>
</div>
<div class="relative overflow-hidden rounded-2xl p-6 md:p-8 flex items-center justify-between">
<div class="absolute inset-0 bg-gradient-to-r from-indigo-900 to-purple-900 z-0"></div>
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-20 z-0"></div>
<div class="relative z-10 max-w-lg">
<div class="flex items-center gap-2 mb-2">
<span class="w-2 h-2 rounded-full bg-accent-yellow animate-pulse"></span>
<span class="text-accent-yellow font-bold text-xs uppercase tracking-wider">Instant Match</span>
</div>
<h3 class="text-2xl font-bold text-white mb-2">Feeling Lucky? Quick Play!</h3>
<p class="text-indigo-200 text-sm mb-6">Jump into a random 1v1 battle and double your stake in 5 minutes.</p>
<button class="bg-white text-indigo-900 hover:bg-gray-100 px-6 py-2.5 rounded-full font-bold text-sm shadow-lg shadow-white/10 transition-transform hover:scale-105 flex items-center gap-2">
<span class="material-icons-outlined">play_arrow</span>
Play Now
</button>
</div>
<div class="hidden md:block relative z-10">
<span class="material-icons-outlined text-9xl text-white/10 rotate-12">bolt</span>
</div>
</div>
</div>
<div class="space-y-6">
<div class="glass-panel p-5 rounded-2xl">
<div class="flex items-center justify-between mb-4">
<h3 class="font-bold text-lg">Recent Achievements</h3>
<span class="material-icons-outlined text-gray-500 text-sm">more_horiz</span>
</div>
<div class="space-y-4">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center shadow-lg shadow-orange-500/20 text-black">
<span class="material-icons-outlined text-2xl">emoji_events</span>
</div>
<div>
<h4 class="font-bold text-sm">Speed Demon</h4>
<p class="text-xs text-gray-400">Answered 10 in a row < 5s</p>
</div>
</div>
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center shadow-lg shadow-blue-500/20 text-white">
<span class="material-icons-outlined text-2xl">psychology</span>
</div>
<div>
<h4 class="font-bold text-sm">Quiz Master</h4>
<p class="text-xs text-gray-400">Won 5 tournaments</p>
</div>
</div>
<div class="flex items-center gap-4 opacity-50">
<div class="w-12 h-12 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center text-gray-500">
<span class="material-icons-outlined text-2xl">lock</span>
</div>
<div>
<h4 class="font-bold text-sm text-gray-400">Social Butterfly</h4>
<p class="text-xs text-gray-500">Refer 10 friends</p>
</div>
</div>
</div>
</div>
<div class="glass-panel p-5 rounded-2xl bg-gradient-to-b from-[#150A2E] to-[#120824]">
<h3 class="font-bold text-lg mb-2">Invite & Earn</h3>
<p class="text-xs text-gray-400 mb-4">Get <span class="text-white font-bold">500 Reward Points</span> for every friend who joins.</p>
<div class="bg-black/30 rounded-lg p-3 flex items-center justify-between border border-white/5 mb-3">
<span class="text-xs font-mono text-gray-300 truncate mr-2">quizquest.com/r/alexgamer</span>
<button class="text-primary hover:text-white transition-colors">
<span class="material-icons-outlined text-sm">content_copy</span>
</button>
</div>
<button class="w-full py-2.5 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-sm font-bold text-white transition-colors flex items-center justify-center gap-2">
<span class="material-icons-outlined text-sm">share</span>
Share Link
</button>
</div>
<div class="glass-panel p-5 rounded-2xl">
<h3 class="font-bold text-lg mb-4">Top Players</h3>
<div class="space-y-3">
<div class="flex items-center justify-between text-sm">
<div class="flex items-center gap-3">
<span class="text-accent-yellow font-bold">1</span>
<div class="w-8 h-8 rounded-full bg-gray-700"></div>
<span class="font-medium">CyberNinja</span>
</div>
<span class="text-primary font-bold">9850 pts</span>
</div>
<div class="flex items-center justify-between text-sm">
<div class="flex items-center gap-3">
<span class="text-gray-400 font-bold">2</span>
<div class="w-8 h-8 rounded-full bg-gray-700"></div>
<span class="font-medium">QuizWhiz</span>
</div>
<span class="text-gray-400 font-bold">8420 pts</span>
</div>
<div class="flex items-center justify-between text-sm">
<div class="flex items-center gap-3">
<span class="text-orange-700 font-bold">3</span>
<div class="w-8 h-8 rounded-full bg-gray-700"></div>
<span class="font-medium">TriviaKing</span>
</div>
<span class="text-gray-400 font-bold">7800 pts</span>
</div>
</div>
</div>
</div>
</div>
<footer class="text-center text-xs text-gray-500 py-6">
© 2023 QuizQuest. All rights reserved.
</footer>
</div>
</main>
</body></html>