<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>User Profile & Stats - QuizQuest</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&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 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",
},
fontFamily: {
display: ["Inter", "sans-serif"],
sans: ["Inter", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.75rem",
},
},
},
};
// 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>
.gradient-text {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(to right, #FBBF24, #F59E0B);
}
.profile-gradient {
background: linear-gradient(135deg, rgba(109, 40, 217, 0.1) 0%, rgba(15, 14, 23, 0) 100%);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-gray-900 dark:text-white font-sans transition-colors duration-300">
<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">
<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-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-white font-medium transition" href="#">My Quests</a>
<a class="text-primary dark:text-white font-bold transition" href="#">Profile</a>
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-white font-medium transition" href="#">Leaderboard</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="hidden md:flex items-center gap-2">
<span class="text-sm font-semibold text-gray-700 dark:text-gray-200">Alex</span>
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center text-white text-xs font-bold">A</div>
</div>
</div>
</div>
</div>
</nav>
<main class="pt-28 pb-20 min-h-screen">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-end mb-8 gap-4">
<div>
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Profile Settings</h1>
<p class="text-gray-500 dark:text-gray-400 mt-1">Manage your account, view stats, and customize your persona.</p>
</div>
<div class="flex gap-3">
<button class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition font-medium text-sm">
Cancel
</button>
<button class="px-4 py-2 rounded-lg bg-primary hover:bg-purple-700 text-white shadow-lg shadow-purple-900/20 transition font-medium text-sm">
Save Changes
</button>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
<div class="lg:col-span-4 space-y-6">
<div class="bg-surface-light dark:bg-surface-dark rounded-2xl p-6 shadow-sm border border-gray-200 dark:border-gray-800 relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-24 bg-gradient-to-r from-primary to-purple-800 opacity-90"></div>
<div class="relative flex flex-col items-center mt-8">
<div class="relative group">
<div class="w-32 h-32 rounded-full border-4 border-white dark:border-surface-dark bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden shadow-xl">
<img alt="Profile" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDPtBp8BXX1b1LqZsrOtlZRCY4wxArDGp4WvNIpyO8WjDoP5avWQ43gi86DWQmj4rj4zgfZycciVDqHiOrSqtZJ4bHEQh0lk9Fa2aCPVowlIs8671D_0lXiD22dsFXGpBBtAd_dIsQRWLiMyoyOLt4pZkQgGQkQprMja_hiw5aJWGvY1fWX6HLO3UErPi_SyZwrOzSvvOqmA8AZ2t8uL-71vDfCyGtYDBq1jo8ZZiPlvtl1_3zwVzBEsSnEYO3JtD8cmJ_4bAgo"/>
</div>
<button class="absolute bottom-1 right-1 bg-primary text-white p-2 rounded-full shadow-lg hover:bg-purple-600 transition group-hover:scale-110">
<i class="fas fa-camera text-xs"></i>
</button>
</div>
<h2 class="mt-4 text-xl font-bold text-gray-900 dark:text-white">Alex Gamer</h2>
<p class="text-sm text-gray-500 dark:text-gray-400">@alex_the_conqueror</p>
<div class="mt-4 flex items-center gap-2">
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 text-xs font-bold rounded-full border border-yellow-200 dark:border-yellow-800">
Lvl 42 Master
</span>
<span class="px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs font-bold rounded-full border border-green-200 dark:border-green-800">
Online
</span>
</div>
</div>
<div class="mt-8 border-t border-gray-100 dark:border-gray-800 pt-6">
<div class="grid grid-cols-3 gap-2 text-center">
<div>
<div class="text-lg font-bold text-gray-900 dark:text-white">1,240</div>
<div class="text-xs text-gray-500 uppercase tracking-wide mt-1">Points</div>
</div>
<div class="border-l border-r border-gray-100 dark:border-gray-800">
<div class="text-lg font-bold text-gray-900 dark:text-white">#452</div>
<div class="text-xs text-gray-500 uppercase tracking-wide mt-1">Rank</div>
</div>
<div>
<div class="text-lg font-bold text-gray-900 dark:text-white">85</div>
<div class="text-xs text-gray-500 uppercase tracking-wide mt-1">Wins</div>
</div>
</div>
</div>
</div>
<div class="bg-surface-light dark:bg-surface-dark rounded-2xl p-6 shadow-sm border border-gray-200 dark:border-gray-800">
<div class="flex justify-between items-center mb-4">
<h3 class="font-bold text-gray-900 dark:text-white">Badges</h3>
<a class="text-xs text-primary hover:underline" href="#">View All</a>
</div>
<div class="grid grid-cols-4 gap-3">
<div class="aspect-square rounded-xl bg-gray-100 dark:bg-surface-dark-2 flex items-center justify-center text-2xl" title="First Win">
🏆
</div>
<div class="aspect-square rounded-xl bg-gray-100 dark:bg-surface-dark-2 flex items-center justify-center text-2xl" title="Sharpshooter">
🎯
</div>
<div class="aspect-square rounded-xl bg-gray-100 dark:bg-surface-dark-2 flex items-center justify-center text-2xl" title="Speedster">
⚡
</div>
<div class="aspect-square rounded-xl bg-gray-100 dark:bg-surface-dark-2 flex items-center justify-center text-gray-300 dark:text-gray-600 border-2 border-dashed border-gray-300 dark:border-gray-700">
<i class="fas fa-lock text-sm"></i>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-2xl p-6 shadow-lg text-white relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-primary opacity-20 blur-2xl rounded-full -mr-10 -mt-10"></div>
<div class="relative z-10">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-bold text-lg">Pro Pass</h3>
<p class="text-gray-400 text-xs">Active until Dec 20, 2023</p>
</div>
<i class="fas fa-crown text-yellow-400 text-xl"></i>
</div>
<div class="w-full bg-gray-700 rounded-full h-2 mb-2">
<div class="bg-gradient-to-r from-primary to-purple-400 h-2 rounded-full" style="width: 75%"></div>
</div>
<p class="text-xs text-gray-400 mb-4">25 days remaining</p>
<button class="w-full py-2 bg-white/10 hover:bg-white/20 rounded-lg text-sm font-semibold transition border border-white/10">Manage Subscription</button>
</div>
</div>
</div>
<div class="lg:col-span-8 space-y-8">
<div class="bg-surface-light dark:bg-surface-dark rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400">
<i class="fas fa-user"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Personal Information</h3>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Display Name</label>
<input class="w-full rounded-lg bg-gray-50 dark:bg-surface-dark-2 border-gray-300 dark:border-gray-700 text-gray-900 dark:text-white focus:ring-primary focus:border-primary transition p-2.5" type="text" value="Alex Gamer"/>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
<input class="w-full rounded-lg bg-gray-50 dark:bg-surface-dark-2 border-gray-300 dark:border-gray-700 text-gray-900 dark:text-white focus:ring-primary focus:border-primary transition p-2.5" type="email" value="alex@quizquest.com"/>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Phone Number</label>
<input class="w-full rounded-lg bg-gray-50 dark:bg-surface-dark-2 border-gray-300 dark:border-gray-700 text-gray-900 dark:text-white focus:ring-primary focus:border-primary transition p-2.5" type="tel" value="+1 (555) 000-0000"/>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Country</label>
<select class="w-full rounded-lg bg-gray-50 dark:bg-surface-dark-2 border-gray-300 dark:border-gray-700 text-gray-900 dark:text-white focus:ring-primary focus:border-primary transition p-2.5">
<option>United States</option>
<option>India</option>
<option>United Kingdom</option>
<option>Canada</option>
</select>
</div>
<div class="md:col-span-2">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Bio</label>
<textarea class="w-full rounded-lg bg-gray-50 dark:bg-surface-dark-2 border-gray-300 dark:border-gray-700 text-gray-900 dark:text-white focus:ring-primary focus:border-primary transition p-2.5" rows="3">Quiz enthusiast and weekend warrior. Always aiming for the top spot!</textarea>
</div>
</div>
</div>
<div class="bg-surface-light dark:bg-surface-dark rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-primary dark:text-purple-400">
<i class="fas fa-chart-pie"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Performance Stats</h3>
</div>
<select class="text-xs bg-gray-100 dark:bg-surface-dark-2 border-none rounded-md px-3 py-1 text-gray-600 dark:text-gray-300">
<option>Last 30 Days</option>
<option>All Time</option>
</select>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="p-4 rounded-xl bg-gray-50 dark:bg-surface-dark-2 border border-gray-100 dark:border-gray-700/50">
<div class="flex items-center gap-2 mb-2">
<span class="w-2 h-2 rounded-full bg-green-500"></span>
<span class="text-xs text-gray-500 font-medium uppercase">Win Rate</span>
</div>
<div class="text-3xl font-bold text-gray-900 dark:text-white">68%</div>
<div class="text-xs text-green-500 mt-1 flex items-center gap-1">
<i class="fas fa-arrow-up"></i> 12% vs last month
</div>
</div>
<div class="p-4 rounded-xl bg-gray-50 dark:bg-surface-dark-2 border border-gray-100 dark:border-gray-700/50">
<div class="flex items-center gap-2 mb-2">
<span class="w-2 h-2 rounded-full bg-blue-500"></span>
<span class="text-xs text-gray-500 font-medium uppercase">Total Earnings</span>
</div>
<div class="text-3xl font-bold text-gray-900 dark:text-white">₹4,250</div>
<div class="text-xs text-gray-400 mt-1">
Lifetime total
</div>
</div>
<div class="p-4 rounded-xl bg-gray-50 dark:bg-surface-dark-2 border border-gray-100 dark:border-gray-700/50">
<div class="flex items-center gap-2 mb-2">
<span class="w-2 h-2 rounded-full bg-yellow-500"></span>
<span class="text-xs text-gray-500 font-medium uppercase">Quizzes Played</span>
</div>
<div class="text-3xl font-bold text-gray-900 dark:text-white">142</div>
<div class="text-xs text-gray-400 mt-1">
Avg. 3 per day
</div>
</div>
</div>
<div>
<h4 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-4">Recent Quizzes</h4>
<div class="space-y-4">
<div class="flex items-center justify-between p-4 rounded-xl bg-gray-50 dark:bg-surface-dark-2 hover:bg-gray-100 dark:hover:bg-gray-800 transition cursor-pointer">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-lg bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center text-indigo-600 dark:text-indigo-400 text-lg">
<i class="fas fa-flask"></i>
</div>
<div>
<div class="font-bold text-gray-900 dark:text-white">Science & Tech Trivia</div>
<div class="text-xs text-gray-500">2 hours ago • <span class="text-green-500">Won</span></div>
</div>
</div>
<div class="text-right">
<div class="font-bold text-primary">+ ₹150</div>
<div class="text-xs text-gray-500">Score: 9/10</div>
</div>
</div>
<div class="flex items-center justify-between p-4 rounded-xl bg-gray-50 dark:bg-surface-dark-2 hover:bg-gray-100 dark:hover:bg-gray-800 transition cursor-pointer">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-lg bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center text-orange-600 dark:text-orange-400 text-lg">
<i class="fas fa-film"></i>
</div>
<div>
<div class="font-bold text-gray-900 dark:text-white">Movie Buff Challenge</div>
<div class="text-xs text-gray-500">Yesterday • <span class="text-red-500">Lost</span></div>
</div>
</div>
<div class="text-right">
<div class="font-bold text-gray-400">₹0</div>
<div class="text-xs text-gray-500">Score: 4/10</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-surface-light dark:bg-surface-dark rounded-2xl p-8 shadow-sm border border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center text-red-600 dark:text-red-400">
<i class="fas fa-shield-alt"></i>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Security</h3>
</div>
<div class="space-y-4">
<div class="flex items-center justify-between py-2">
<div>
<div class="font-medium text-gray-900 dark:text-white">Password</div>
<div class="text-sm text-gray-500">Last changed 3 months ago</div>
</div>
<button class="text-primary hover:text-purple-400 text-sm font-medium">Update</button>
</div>
<div class="border-t border-gray-100 dark:border-gray-800"></div>
<div class="flex items-center justify-between py-2">
<div>
<div class="font-medium text-gray-900 dark:text-white">Two-Factor Authentication</div>
<div class="text-sm text-gray-500">Add an extra layer of security</div>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only peer" type="checkbox" value=""/>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-white dark:bg-[#050505] py-12 border-t border-gray-200 dark:border-gray-900">
<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>