<!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: Mission Alerts</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk: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"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#a413ec",
"secondary": "#FFD700",
"accent-green": "#39FF14",
"background-light": "#f7f6f8",
"background-dark": "#0a0a0a",
"surface-dark": "#1c1022",
"surface-card": "#26162e",
"border-dark": "#332839",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"]
},
borderRadius: {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"2xl": "1rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Space Grotesk', sans-serif;
}
.neon-glow-primary {
box-shadow: 0 0 15px rgba(164, 19, 236, 0.4);
}
.neon-glow-primary:hover {
box-shadow: 0 0 25px rgba(164, 19, 236, 0.6);
}
.neon-glow-secondary {
box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}
.glass-panel {
backdrop-filter: blur(12px);
background: rgba(28, 16, 34, 0.85);
border: 1px solid rgba(164, 19, 236, 0.1);
}
.glass-card {
backdrop-filter: blur(8px);
background: linear-gradient(145deg, rgba(38, 22, 46, 0.6) 0%, rgba(28, 16, 34, 0.4) 100%);
border: 1px solid rgba(51, 40, 57, 0.6);
}
.glass-card:hover {
background: linear-gradient(145deg, rgba(50, 28, 60, 0.7) 0%, rgba(35, 20, 42, 0.5) 100%);
border-color: rgba(164, 19, 236, 0.3);
}
.scroll-custom::-webkit-scrollbar {
width: 8px;
}
.scroll-custom::-webkit-scrollbar-track {
background: #1c1022;
}
.scroll-custom::-webkit-scrollbar-thumb {
background: #332839;
border-radius: 4px;
}
.scroll-custom::-webkit-scrollbar-thumb:hover {
background: #a413ec;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen">
<div class="relative flex h-screen w-full flex-col overflow-hidden">
<header class="flex-none flex items-center justify-between whitespace-nowrap border-b border-solid border-border-dark px-6 lg:px-10 py-4 glass-panel z-50">
<div class="flex items-center gap-8">
<div class="flex items-center gap-3 text-primary cursor-pointer hover:opacity-80 transition-opacity">
<div class="size-8">
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M39.475 21.6262C40.358 21.4363 40.6863 21.5589 40.7581 21.5934C40.7876 21.655 40.8547 21.857 40.8082 22.3336C40.7408 23.0255 40.4502 24.0046 39.8572 25.2301C38.6799 27.6631 36.5085 30.6631 33.5858 33.5858C30.6631 36.5085 27.6632 38.6799 25.2301 39.8572C24.0046 40.4502 23.0255 40.7407 22.3336 40.8082C21.8571 40.8547 21.6551 40.7875 21.5934 40.7581C21.5589 40.6863 21.4363 40.358 21.6262 39.475C21.8562 38.4054 22.4689 36.9657 23.5038 35.2817C24.7575 33.2417 26.5497 30.9744 28.7621 28.762C30.9744 26.5497 33.2417 24.7574 35.2817 23.5037C36.9657 22.4689 38.4054 21.8562 39.475 21.6262ZM4.41189 29.2403L18.7597 43.5881C19.8813 44.7097 21.4027 44.9179 22.7217 44.7893C24.0585 44.659 25.5148 44.1631 26.9723 43.4579C29.9052 42.0387 33.2618 39.5667 36.4142 36.4142C39.5667 33.2618 42.0387 29.9052 43.4579 26.9723C44.1631 25.5148 44.659 24.0585 44.7893 22.7217C44.9179 21.4027 44.7097 19.8813 43.5881 18.7597L29.2403 4.41187C27.8527 3.02428 25.8765 3.02573 24.2861 3.36776C22.6081 3.72863 20.7334 4.58419 18.8396 5.74801C16.4978 7.18716 13.9881 9.18353 11.5858 11.5858C9.18354 13.988 7.18717 16.4978 5.74802 18.8396C4.58421 20.7334 3.72865 22.6081 3.36778 24.2861C3.02574 25.8765 3.02429 27.8527 4.41189 29.2403Z" fill="currentColor" fill-rule="evenodd"></path>
</svg>
</div>
<h2 class="text-slate-100 text-xl font-bold leading-tight tracking-tight">QuizQuest</h2>
</div>
<nav class="hidden md:flex items-center gap-8">
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-bold uppercase tracking-wider" href="#">Dashboard</a>
<a class="text-primary hover:text-primary transition-colors text-sm font-bold uppercase tracking-wider border-b-2 border-primary pb-0.5" href="#">Missions</a>
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-bold uppercase tracking-wider" href="#">Leaderboard</a>
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-bold uppercase tracking-wider" href="#">Shop</a>
</nav>
</div>
<div class="flex flex-1 justify-end gap-6 items-center">
<div class="hidden lg:flex items-center gap-3 bg-surface-dark px-4 py-2 rounded-full border border-border-dark">
<span class="text-secondary font-bold text-sm">3,450 XP</span>
<div class="h-4 w-[1px] bg-slate-700"></div>
<span class="text-accent-green font-bold text-sm">LVL 12</span>
</div>
<div class="relative cursor-pointer">
<span class="material-symbols-outlined text-slate-300 hover:text-white transition-colors">notifications</span>
<span class="absolute top-0 right-0 size-2.5 bg-primary rounded-full border-2 border-background-dark animate-pulse"></span>
</div>
<div class="size-10 rounded-full border-2 border-primary overflow-hidden cursor-pointer hover:scale-105 transition-transform">
<img class="w-full h-full object-cover" data-alt="User profile avatar with neon purple border" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCpGqq6rSUuUL1mNwvakxxZM-Qq8evGRaW_yyBUfoHO-Kcz779tFX15o-IZhA7QKLKSZ6cArlH2x0Vrpya3iZhS8_7uaH73QeXuue4tTBw8AKDKuBB5e1gcoBXuqAlX1AAoKjmYixsTKji5vAE6xnU_XMw2oqlB33w0RZ3NFjNl5lp2nyPJc-eqzrRwpPEK-qzR6CE3p4xCfo7yP3uoEOyOUUDbZyLIG8lAmmKWci72p2QPJGScoWA616f00p707coG0dCyYumOu4VZ"/>
</div>
</div>
</header>
<main class="flex-1 overflow-hidden flex flex-row">
<aside class="hidden lg:flex flex-col w-72 bg-surface-dark/30 border-r border-border-dark backdrop-blur-sm p-6 gap-6">
<div class="space-y-4">
<h3 class="text-xs font-bold text-slate-500 uppercase tracking-widest pl-3">Notification Center</h3>
<nav class="flex flex-col gap-2">
<a class="flex items-center gap-3 px-3 py-2.5 bg-primary/10 text-primary border-l-2 border-primary rounded-r-lg font-medium transition-all" href="#">
<span class="material-symbols-outlined text-[20px]">inbox</span>
All Alerts
<span class="ml-auto text-xs font-bold bg-primary text-white px-2 py-0.5 rounded-full">5</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 text-slate-400 hover:text-slate-200 hover:bg-white/5 rounded-lg transition-all" href="#">
<span class="material-symbols-outlined text-[20px]">military_tech</span>
Achievements
</a>
<a class="flex items-center gap-3 px-3 py-2.5 text-slate-400 hover:text-slate-200 hover:bg-white/5 rounded-lg transition-all" href="#">
<span class="material-symbols-outlined text-[20px]">campaign</span>
Announcements
</a>
<a class="flex items-center gap-3 px-3 py-2.5 text-slate-400 hover:text-slate-200 hover:bg-white/5 rounded-lg transition-all" href="#">
<span class="material-symbols-outlined text-[20px]">group</span>
Friend Activity
</a>
</nav>
</div>
<div class="mt-auto">
<div class="p-4 rounded-xl bg-gradient-to-br from-primary/20 to-purple-900/10 border border-primary/20">
<div class="flex items-start justify-between mb-2">
<span class="material-symbols-outlined text-secondary">workspace_premium</span>
<span class="text-xs font-bold text-secondary bg-secondary/10 px-2 py-0.5 rounded">PRO</span>
</div>
<h4 class="font-bold text-white text-sm mb-1">Upgrade to Elite</h4>
<p class="text-xs text-slate-400 mb-3">Get instant notification for rare drops and double XP events.</p>
<button class="w-full py-1.5 text-xs font-bold text-primary bg-background-dark rounded border border-primary/30 hover:bg-primary hover:text-white transition-all">View Plans</button>
</div>
</div>
</aside>
<div class="flex-1 flex flex-col h-full bg-background-dark/80 relative">
<div class="absolute top-0 left-0 w-full h-96 bg-primary/5 blur-[100px] pointer-events-none"></div>
<div class="absolute bottom-0 right-0 w-96 h-96 bg-secondary/5 blur-[120px] pointer-events-none"></div>
<div class="flex-none p-8 pb-4 flex items-end justify-between z-10">
<div>
<div class="flex items-center gap-3 mb-2">
<h1 class="text-3xl font-black text-slate-100 tracking-tight">Mission Alerts</h1>
<span class="inline-flex items-center justify-center size-6 rounded-full bg-red-500 text-white text-xs font-bold animate-bounce">5</span>
</div>
<p class="text-slate-400 text-sm">Stay updated on your quests, rewards, and system events.</p>
</div>
<div class="flex gap-3">
<button class="flex items-center gap-2 px-4 py-2 bg-surface-dark border border-border-dark text-slate-300 rounded-lg text-sm font-bold hover:bg-white/5 hover:text-white transition-colors">
<span class="material-symbols-outlined text-lg">settings</span>
Settings
</button>
<button class="flex items-center gap-2 px-4 py-2 text-slate-400 hover:text-red-400 transition-colors text-sm font-bold">
<span class="material-symbols-outlined text-lg">delete_sweep</span>
Clear All
</button>
</div>
</div>
<div class="flex-1 overflow-y-auto p-8 pt-2 space-y-4 scroll-custom z-10">
<div class="mb-2 flex items-center gap-4">
<div class="h-px bg-border-dark flex-1"></div>
<span class="text-xs font-bold text-primary uppercase tracking-widest">New</span>
<div class="h-px bg-border-dark flex-1"></div>
</div>
<div class="glass-card p-5 rounded-xl flex items-start gap-5 group cursor-pointer transition-all relative overflow-hidden">
<div class="absolute left-0 top-0 bottom-0 w-1 bg-secondary"></div>
<div class="relative size-12 flex-none rounded-lg bg-secondary/10 border border-secondary/30 flex items-center justify-center text-secondary shadow-[0_0_15px_rgba(255,215,0,0.15)] group-hover:shadow-[0_0_20px_rgba(255,215,0,0.3)] transition-shadow">
<span class="material-symbols-outlined text-3xl">emoji_events</span>
</div>
<div class="flex-1 min-w-0">
<div class="flex justify-between items-start mb-1">
<h3 class="text-slate-100 font-bold text-lg truncate pr-4">Rank Up: Gold Elite Achieved!</h3>
<span class="text-xs font-mono text-slate-500 whitespace-nowrap">2m ago</span>
</div>
<p class="text-slate-400 text-sm leading-relaxed mb-3">Congratulations, Commander! You've surpassed 15,000 XP and unlocked the "Gold Elite" badge. New exclusive missions are now available.</p>
<div class="flex gap-3">
<button class="px-4 py-1.5 bg-secondary text-black text-xs font-bold rounded neon-glow-secondary hover:brightness-110 transition-all">CLAIM REWARDS</button>
<button class="px-4 py-1.5 text-slate-400 hover:text-white text-xs font-bold transition-colors">SHARE</button>
</div>
</div>
<div class="flex-none self-center opacity-0 group-hover:opacity-100 transition-opacity">
<div class="size-8 rounded-full hover:bg-white/10 flex items-center justify-center text-slate-400">
<span class="material-symbols-outlined text-lg">close</span>
</div>
</div>
</div>
<div class="glass-card p-5 rounded-xl flex items-start gap-5 group cursor-pointer transition-all relative overflow-hidden">
<div class="absolute left-0 top-0 bottom-0 w-1 bg-primary"></div>
<div class="relative size-12 flex-none rounded-lg bg-primary/10 border border-primary/30 flex items-center justify-center text-primary shadow-[0_0_15px_rgba(164,19,236,0.2)] group-hover:shadow-[0_0_25px_rgba(164,19,236,0.4)] transition-shadow">
<span class="material-symbols-outlined text-3xl">bolt</span>
</div>
<div class="flex-1 min-w-0">
<div class="flex justify-between items-start mb-1">
<h3 class="text-slate-100 font-bold text-lg truncate pr-4">Flash Event: Cyber Security Sprint</h3>
<span class="text-xs font-mono text-slate-500 whitespace-nowrap">15m ago</span>
</div>
<p class="text-slate-400 text-sm leading-relaxed mb-3">A limited-time quiz has dropped! Complete 10 questions in under 2 minutes to earn the "Netrunner" skin.</p>
<button class="px-4 py-1.5 bg-primary text-white text-xs font-bold rounded neon-glow-primary hover:brightness-110 transition-all">START MISSION</button>
</div>
<div class="flex-none self-center opacity-0 group-hover:opacity-100 transition-opacity">
<div class="size-8 rounded-full hover:bg-white/10 flex items-center justify-center text-slate-400">
<span class="material-symbols-outlined text-lg">close</span>
</div>
</div>
</div>
<div class="my-6 flex items-center gap-4">
<div class="h-px bg-border-dark flex-1"></div>
<span class="text-xs font-bold text-slate-500 uppercase tracking-widest">Earlier</span>
<div class="h-px bg-border-dark flex-1"></div>
</div>
<div class="glass-card p-5 rounded-xl flex items-start gap-5 group cursor-pointer transition-all relative overflow-hidden opacity-80 hover:opacity-100">
<div class="relative size-12 flex-none rounded-lg bg-surface-dark border border-slate-600 flex items-center justify-center text-slate-400">
<span class="material-symbols-outlined text-3xl">dns</span>
</div>
<div class="flex-1 min-w-0">
<div class="flex justify-between items-start mb-1">
<h3 class="text-slate-200 font-bold text-base truncate pr-4">System Maintenance Complete</h3>
<span class="text-xs font-mono text-slate-500 whitespace-nowrap">5h ago</span>
</div>
<p class="text-slate-500 text-sm leading-relaxed">The scheduled downtime for server optimization is now complete. Leaderboards have been synced.</p>
</div>
<div class="flex-none self-center opacity-0 group-hover:opacity-100 transition-opacity">
<div class="size-8 rounded-full hover:bg-white/10 flex items-center justify-center text-slate-400">
<span class="material-symbols-outlined text-lg">close</span>
</div>
</div>
</div>
<div class="glass-card p-5 rounded-xl flex items-start gap-5 group cursor-pointer transition-all relative overflow-hidden opacity-80 hover:opacity-100">
<div class="relative size-12 flex-none rounded-lg bg-red-500/10 border border-red-500/30 flex items-center justify-center text-red-500">
<span class="material-symbols-outlined text-3xl">trending_down</span>
</div>
<div class="flex-1 min-w-0">
<div class="flex justify-between items-start mb-1">
<h3 class="text-slate-200 font-bold text-base truncate pr-4">Leaderboard Alert</h3>
<span class="text-xs font-mono text-slate-500 whitespace-nowrap">1d ago</span>
</div>
<p class="text-slate-500 text-sm leading-relaxed mb-2">User <span class="text-slate-300 font-bold">@NeonRider</span> has surpassed your score in the "Space History" category.</p>
<button class="text-red-400 hover:text-red-300 text-xs font-bold flex items-center gap-1 transition-colors">
RECLAIM RANK <span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
</div>
<div class="flex-none self-center opacity-0 group-hover:opacity-100 transition-opacity">
<div class="size-8 rounded-full hover:bg-white/10 flex items-center justify-center text-slate-400">
<span class="material-symbols-outlined text-lg">close</span>
</div>
</div>
</div>
<div class="glass-card p-5 rounded-xl flex items-start gap-5 group cursor-pointer transition-all relative overflow-hidden opacity-80 hover:opacity-100">
<div class="relative size-12 flex-none rounded-lg bg-accent-green/10 border border-accent-green/30 flex items-center justify-center text-accent-green">
<span class="material-symbols-outlined text-3xl">person_add</span>
</div>
<div class="flex-1 min-w-0">
<div class="flex justify-between items-start mb-1">
<h3 class="text-slate-200 font-bold text-base truncate pr-4">Alliance Request</h3>
<span class="text-xs font-mono text-slate-500 whitespace-nowrap">2d ago</span>
</div>
<p class="text-slate-500 text-sm leading-relaxed mb-3"><span class="text-slate-300 font-bold">@QuantumQueen</span> wants to add you to their alliance.</p>
<div class="flex gap-3">
<button class="px-3 py-1 bg-accent-green/20 text-accent-green border border-accent-green/40 text-xs font-bold rounded hover:bg-accent-green/30 transition-all">ACCEPT</button>
<button class="px-3 py-1 bg-transparent text-slate-500 border border-slate-700 text-xs font-bold rounded hover:bg-white/5 hover:text-slate-300 transition-all">DECLINE</button>
</div>
</div>
<div class="flex-none self-center opacity-0 group-hover:opacity-100 transition-opacity">
<div class="size-8 rounded-full hover:bg-white/10 flex items-center justify-center text-slate-400">
<span class="material-symbols-outlined text-lg">close</span>
</div>
</div>
</div>
<div class="py-8 text-center">
<button class="text-slate-500 text-sm font-medium hover:text-primary transition-colors flex items-center justify-center gap-2 mx-auto">
Load Older Notifications
<span class="material-symbols-outlined text-lg">expand_more</span>
</button>
</div>
</div>
</div>
</main>
</div>
</body></html>