<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizMaster - Profile & Achievements</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&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://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#5b13ec",
"background-light": "#f6f6f8",
"background-dark": "#161022",
"surface-dark": "#201a2d",
"surface-light": "#2e2839",
"neon-accent": "#a673ff"
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {"DEFAULT": "1rem", "lg": "1.5rem", "xl": "2rem", "2xl": "3rem", "full": "9999px"},
boxShadow: {
'neon': '0 0 15px rgba(91, 19, 236, 0.5)',
'neon-strong': '0 0 25px rgba(91, 19, 236, 0.6)',
'card': '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.15)',
}
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}
/* Custom scrollbar for webkit */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #161022;
}
::-webkit-scrollbar-thumb {
background: #2e2839;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #5b13ec;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 antialiased overflow-x-hidden">
<div class="relative flex min-h-screen w-full flex-col">
<!-- Header -->
<header class="sticky top-0 z-50 flex items-center justify-between whitespace-nowrap border-b border-solid border-white/5 bg-background-dark/95 backdrop-blur-md px-4 sm:px-10 py-3">
<div class="flex items-center gap-8">
<div class="flex items-center gap-4 text-white">
<div class="size-8 text-primary">
<span class="material-symbols-outlined !text-[32px]">stadia_controller</span>
</div>
<h2 class="text-white text-lg font-bold leading-tight tracking-[-0.015em]">QuizMaster</h2>
</div>
<div class="hidden lg:flex items-center gap-9">
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Dashboard</a>
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Quizzes</a>
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Leaderboard</a>
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Shop</a>
</div>
</div>
<div class="flex flex-1 justify-end gap-4 sm:gap-8">
<label class="hidden sm:flex flex-col min-w-40 !h-10 max-w-64">
<div class="flex w-full flex-1 items-stretch rounded-full h-full bg-surface-dark border border-white/5 focus-within:border-primary transition-colors">
<div class="text-slate-400 flex items-center justify-center pl-4">
<span class="material-symbols-outlined">search</span>
</div>
<input class="flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-full bg-transparent text-white focus:outline-0 focus:ring-0 border-none placeholder:text-slate-500 px-4 text-sm font-normal leading-normal" placeholder="Search players..."/>
</div>
</label>
<div class="flex items-center gap-3">
<button class="hidden sm:flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-5 bg-primary hover:bg-primary/90 transition-all text-white text-sm font-bold leading-normal shadow-neon">
<span class="truncate">My Profile</span>
</button>
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10 border-2 border-primary cursor-pointer shadow-neon" data-alt="Small user profile avatar" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDteNywy8VQOXKhJxm779xvasZ3zAOAkQmIPQdzJd52kKkFRB1NsGnEI_U3Ibk8CEdXzrB-BWhQJaIi-psEhlcovRYjZ8xqcsuZAEM49TJBCdqzsNm7tE5qdm1FXrAVSdd_ucl_w9JUNAEjDpMkVa4WpSLCmcsCgh0Dc5Z-wlhXqPWwM4V7xzKCstD8vrjiDNsqzACs7MfV4XYjDOKfFxVCx7Q5VxHEZHHAGkj0zm8qMrHOKhM6Ei7Fwev2L77K1iiIXzXodUJDh6WV");'></div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="flex-grow px-4 sm:px-10 py-8 flex justify-center">
<div class="max-w-7xl w-full grid grid-cols-1 lg:grid-cols-12 gap-8">
<!-- Left Column: Identity (4 cols) -->
<div class="lg:col-span-4 flex flex-col gap-6">
<!-- Profile Card -->
<div class="bg-surface-dark rounded-xl p-8 flex flex-col items-center relative overflow-hidden shadow-card border border-white/5">
<!-- Background Glow -->
<div class="absolute top-0 inset-x-0 h-32 bg-gradient-to-b from-primary/20 to-transparent pointer-events-none"></div>
<!-- 3D Avatar Area -->
<div class="relative w-48 h-48 mb-6 group cursor-pointer">
<div class="absolute inset-0 bg-primary/30 rounded-full blur-2xl group-hover:bg-primary/50 transition-all duration-500"></div>
<div class="relative w-full h-full rounded-full bg-surface-light border-4 border-surface-dark flex items-center justify-center overflow-hidden shadow-neon-strong">
<!-- Placeholder for 3D Avatar -->
<img class="w-full h-full object-cover transform hover:scale-110 transition-transform duration-500" data-alt="3D rendered avatar of a cool cyberpunk character" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAIQ8uwot2FNq8jY16yBRayTazEXlO17Edg2Regz-Krl19uYdP0k-7HihSq7GmfyDWOAaCD5kwaLbkeo2WZTQKjAZMNUQiTISrCTV57AW4sZ_56oIIr04Lw8CpVkQSV61Q5VqK1_Cns0AbFS1DB04IO_xKuagMYCO2tLoCT8xfeQbFmFhy68A-dWER_Vy4N3quqCX6dCj7j49YyptkGi2mhaaU7g8jds3-LfEod9J5ij1T0pktVgMXl4av8FAnkMCeDy6h_cSoZdXLw"/>
</div>
<div class="absolute bottom-2 right-4 bg-primary text-white text-xs font-bold px-2 py-1 rounded-full border-2 border-surface-dark shadow-sm flex items-center gap-1">
<span class="material-symbols-outlined !text-sm">edit</span>
</div>
</div>
<!-- User Info -->
<div class="text-center w-full z-10">
<h1 class="text-3xl font-bold text-white mb-1">Alex 'The Brain' Chen</h1>
<div class="flex items-center justify-center gap-2 mb-6">
<span class="material-symbols-outlined text-yellow-400 fill-1">military_tech</span>
<p class="text-neon-accent font-medium tracking-wide text-sm uppercase">Level 42 Grandmaster</p>
</div>
<!-- Level Progress -->
<div class="w-full bg-surface-light rounded-full h-4 mb-2 overflow-hidden border border-white/5 relative">
<div class="bg-gradient-to-r from-primary to-neon-accent h-full rounded-full shadow-[0_0_10px_rgba(91,19,236,0.8)]" style="width: 90%;"></div>
</div>
<div class="flex justify-between text-xs text-slate-400 font-medium">
<span>45,000 XP</span>
<span>50,000 XP</span>
</div>
<p class="text-slate-500 text-xs mt-2">5,000 XP to next level</p>
</div>
</div>
<!-- Quick Actions -->
<div class="bg-surface-dark rounded-xl p-6 shadow-card border border-white/5">
<h3 class="text-white font-bold mb-4 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">bolt</span>
Quick Actions
</h3>
<div class="grid grid-cols-2 gap-3">
<button class="flex flex-col items-center gap-2 p-4 rounded-lg bg-surface-light hover:bg-primary/20 hover:border-primary/50 border border-transparent transition-all group">
<span class="material-symbols-outlined text-slate-300 group-hover:text-primary transition-colors">group_add</span>
<span class="text-xs font-medium text-slate-300 group-hover:text-white">Invite Friends</span>
</button>
<button class="flex flex-col items-center gap-2 p-4 rounded-lg bg-surface-light hover:bg-primary/20 hover:border-primary/50 border border-transparent transition-all group">
<span class="material-symbols-outlined text-slate-300 group-hover:text-primary transition-colors">share</span>
<span class="text-xs font-medium text-slate-300 group-hover:text-white">Share Profile</span>
</button>
</div>
</div>
</div>
<!-- Right Column: Content (8 cols) -->
<div class="lg:col-span-8 flex flex-col gap-8">
<!-- Stats Row -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- Stat Card 1 -->
<div class="bg-surface-dark p-6 rounded-xl border border-white/5 relative overflow-hidden group hover:border-primary/30 transition-all">
<div class="absolute -right-6 -top-6 w-24 h-24 bg-primary/10 rounded-full blur-2xl group-hover:bg-primary/20 transition-all"></div>
<div class="flex flex-col gap-1 relative z-10">
<p class="text-slate-400 text-sm font-medium">Total Quizzes</p>
<p class="text-white text-3xl font-bold font-display">1,240</p>
<div class="flex items-center gap-1 text-[#0bda6f] text-xs font-bold mt-2">
<span class="material-symbols-outlined !text-sm">trending_up</span>
<span>+12% this week</span>
</div>
</div>
</div>
<!-- Stat Card 2 -->
<div class="bg-surface-dark p-6 rounded-xl border border-white/5 relative overflow-hidden group hover:border-primary/30 transition-all">
<div class="absolute -right-6 -top-6 w-24 h-24 bg-primary/10 rounded-full blur-2xl group-hover:bg-primary/20 transition-all"></div>
<div class="flex flex-col gap-1 relative z-10">
<p class="text-slate-400 text-sm font-medium">Win Ratio</p>
<p class="text-white text-3xl font-bold font-display">88%</p>
<div class="flex items-center gap-1 text-[#0bda6f] text-xs font-bold mt-2">
<span class="material-symbols-outlined !text-sm">trending_up</span>
<span>Top 5% of players</span>
</div>
</div>
</div>
<!-- Stat Card 3 -->
<div class="bg-surface-dark p-6 rounded-xl border border-white/5 relative overflow-hidden group hover:border-primary/30 transition-all">
<div class="absolute -right-6 -top-6 w-24 h-24 bg-primary/10 rounded-full blur-2xl group-hover:bg-primary/20 transition-all"></div>
<div class="flex flex-col gap-1 relative z-10">
<p class="text-slate-400 text-sm font-medium">Total Earned</p>
<p class="text-white text-3xl font-bold font-display">45k XP</p>
<div class="flex items-center gap-1 text-[#0bda6f] text-xs font-bold mt-2">
<span class="material-symbols-outlined !text-sm">arrow_upward</span>
<span>Next rank soon</span>
</div>
</div>
</div>
</div>
<!-- Badge Wall -->
<section>
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-bold text-white flex items-center gap-2">
<span class="material-symbols-outlined text-yellow-400">emoji_events</span>
Badge Wall
</h3>
<a class="text-sm text-primary hover:text-white transition-colors font-medium" href="#">View All</a>
</div>
<div class="bg-surface-dark rounded-xl p-6 border border-white/5 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
<!-- Badge Item 1 -->
<div class="aspect-square bg-surface-light rounded-lg flex flex-col items-center justify-center gap-2 p-3 group cursor-pointer hover:bg-primary/10 transition-colors border border-transparent hover:border-primary/30 relative">
<div class="size-12 rounded-full bg-gradient-to-br from-orange-400 to-red-600 flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-white !text-2xl">local_fire_department</span>
</div>
<div class="text-center">
<p class="text-white text-sm font-bold leading-tight">Streak King</p>
<p class="text-slate-500 text-[10px] mt-1">30 Day Streak</p>
</div>
<!-- Tooltip placeholder -->
<div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
<span class="material-symbols-outlined text-white/50 !text-sm">info</span>
</div>
</div>
<!-- Badge Item 2 -->
<div class="aspect-square bg-surface-light rounded-lg flex flex-col items-center justify-center gap-2 p-3 group cursor-pointer hover:bg-primary/10 transition-colors border border-transparent hover:border-primary/30">
<div class="size-12 rounded-full bg-gradient-to-br from-yellow-300 to-yellow-600 flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-white !text-2xl">flash_on</span>
</div>
<div class="text-center">
<p class="text-white text-sm font-bold leading-tight">Fastest Finger</p>
<p class="text-slate-500 text-[10px] mt-1">Answer < 2s</p>
</div>
</div>
<!-- Badge Item 3 -->
<div class="aspect-square bg-surface-light rounded-lg flex flex-col items-center justify-center gap-2 p-3 group cursor-pointer hover:bg-primary/10 transition-colors border border-transparent hover:border-primary/30">
<div class="size-12 rounded-full bg-gradient-to-br from-purple-400 to-indigo-600 flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-white !text-2xl">dark_mode</span>
</div>
<div class="text-center">
<p class="text-white text-sm font-bold leading-tight">Night Owl</p>
<p class="text-slate-500 text-[10px] mt-1">Play at 3 AM</p>
</div>
</div>
<!-- Badge Item 4 -->
<div class="aspect-square bg-surface-light rounded-lg flex flex-col items-center justify-center gap-2 p-3 group cursor-pointer hover:bg-primary/10 transition-colors border border-transparent hover:border-primary/30">
<div class="size-12 rounded-full bg-gradient-to-br from-blue-400 to-cyan-600 flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-white !text-2xl">diamond</span>
</div>
<div class="text-center">
<p class="text-white text-sm font-bold leading-tight">Collector</p>
<p class="text-slate-500 text-[10px] mt-1">Own 50 items</p>
</div>
</div>
<!-- Locked Badge Item -->
<div class="aspect-square bg-surface-light rounded-lg flex flex-col items-center justify-center gap-2 p-3 opacity-50 border border-transparent border-dashed border-slate-600">
<div class="size-12 rounded-full bg-surface-dark flex items-center justify-center border border-slate-600">
<span class="material-symbols-outlined text-slate-500 !text-2xl">lock</span>
</div>
<div class="text-center">
<p class="text-slate-400 text-sm font-bold leading-tight">???</p>
<p class="text-slate-600 text-[10px] mt-1">Locked</p>
</div>
</div>
<!-- Locked Badge Item -->
<div class="aspect-square bg-surface-light rounded-lg flex flex-col items-center justify-center gap-2 p-3 opacity-50 border border-transparent border-dashed border-slate-600">
<div class="size-12 rounded-full bg-surface-dark flex items-center justify-center border border-slate-600">
<span class="material-symbols-outlined text-slate-500 !text-2xl">lock</span>
</div>
<div class="text-center">
<p class="text-slate-400 text-sm font-bold leading-tight">???</p>
<p class="text-slate-600 text-[10px] mt-1">Locked</p>
</div>
</div>
</div>
</section>
<!-- Settings Tabs -->
<section class="bg-surface-dark rounded-xl p-6 border border-white/5">
<div class="border-b border-white/10 mb-6">
<nav aria-label="Tabs" class="-mb-px flex space-x-8">
<a class="border-primary text-primary whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm flex items-center gap-2" href="#">
<span class="material-symbols-outlined !text-lg">person</span>
Personal Info
</a>
<a class="border-transparent text-slate-400 hover:text-white hover:border-slate-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm flex items-center gap-2 transition-colors" href="#">
<span class="material-symbols-outlined !text-lg">security</span>
Security
</a>
<a class="border-transparent text-slate-400 hover:text-white hover:border-slate-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm flex items-center gap-2 transition-colors" href="#">
<span class="material-symbols-outlined !text-lg">notifications</span>
Notifications
</a>
</nav>
</div>
<!-- Form Content -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="col-span-1">
<label class="block text-sm font-medium text-slate-300 mb-2" for="username">Username</label>
<div class="relative rounded-md shadow-sm">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<span class="material-symbols-outlined text-slate-500 !text-lg">alternate_email</span>
</div>
<input class="block w-full rounded-full bg-surface-light border-0 py-3 pl-10 text-white shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-slate-500 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="username" name="username" type="text" value="AlexTheBrain"/>
</div>
</div>
<div class="col-span-1">
<label class="block text-sm font-medium text-slate-300 mb-2" for="email">Email Address</label>
<div class="relative rounded-md shadow-sm">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<span class="material-symbols-outlined text-slate-500 !text-lg">mail</span>
</div>
<input class="block w-full rounded-full bg-surface-light border-0 py-3 pl-10 text-white shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-slate-500 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="email" name="email" type="email" value="alex.chen@example.com"/>
</div>
</div>
<div class="col-span-1 md:col-span-2">
<label class="block text-sm font-medium text-slate-300 mb-2" for="bio">Bio</label>
<div class="relative rounded-md shadow-sm">
<textarea class="block w-full rounded-2xl bg-surface-light border-0 py-3 px-4 text-white shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-slate-500 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6" id="bio" name="bio" rows="3">Quiz enthusiast. History buff. Science nerd. Catch me on the leaderboards!</textarea>
</div>
</div>
</div>
<div class="mt-8 flex items-center justify-end gap-x-6">
<button class="text-sm font-semibold leading-6 text-slate-300 hover:text-white transition-colors" type="button">Cancel</button>
<button class="rounded-full bg-primary px-8 py-3 text-sm font-bold text-white shadow-neon hover:bg-primary/90 hover:shadow-neon-strong focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary transition-all" type="submit">Save Changes</button>
</div>
</section>
</div>
</div>
</main>
</div>
</body></html>