<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Notification Center</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",
},
},
},
};
// Force dark mode for dashboard consistency based on context
document.documentElement.classList.add('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';
}
}
// Simple Tab Switching Logic
function switchTab(tabName) {
// Hide all tab contents
const contents = document.querySelectorAll('.tab-content');
contents.forEach(content => content.classList.add('hidden'));
// Show selected tab content
document.getElementById(tabName + '-content').classList.remove('hidden');
// Reset tab styles
const tabs = document.querySelectorAll('.tab-btn');
tabs.forEach(tab => {
tab.classList.remove('text-white', 'border-b-2', 'border-primary');
tab.classList.add('text-gray-400', 'hover:text-gray-200');
});
// Set active tab style
const activeTab = document.getElementById(tabName + '-tab');
activeTab.classList.remove('text-gray-400', 'hover:text-gray-200');
activeTab.classList.add('text-white', 'border-b-2', 'border-primary');
}
</script>
<style>
.neon-glow-unread {
box-shadow: -2px 0 12px rgba(109, 40, 217, 0.4);
border-left: 3px solid #6D28D9;
}
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: rgba(30, 27, 46, 0.5);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #4B5563;
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #6D28D9;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-gray-900 dark:text-white font-sans transition-colors duration-300 min-h-screen flex flex-col">
<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 hidden sm:block">QuizQuest</span>
</div>
<div class="flex items-center space-x-6">
<a class="text-gray-500 hover:text-primary transition" href="#">
<i class="fas fa-home text-lg"></i>
</a>
<a class="text-gray-500 hover:text-primary transition" href="#">
<i class="fas fa-trophy text-lg"></i>
</a>
<div class="relative">
<a class="text-white transition" href="#">
<i class="fas fa-bell text-lg"></i>
<span class="absolute -top-1 -right-1 w-2.5 h-2.5 bg-red-500 rounded-full border-2 border-background-dark"></span>
</a>
</div>
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 border border-white/20"></div>
</div>
</div>
</div>
</nav>
<main class="flex-grow pt-28 pb-12 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto w-full">
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
<div>
<h1 class="text-3xl font-bold mb-1">Notification Center</h1>
<p class="text-gray-400 text-sm">Stay updated with your quests, rewards, and system alerts.</p>
</div>
<div class="flex gap-3">
<button class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-white transition flex items-center gap-2">
<i class="fas fa-check-double"></i> Mark all as read
</button>
<button class="px-4 py-2 text-sm font-medium text-red-400 hover:text-red-300 bg-red-500/10 hover:bg-red-500/20 rounded-lg transition">
Clear All
</button>
</div>
</div>
<div class="bg-surface-dark border border-gray-800 rounded-2xl shadow-xl overflow-hidden min-h-[600px] flex flex-col">
<div class="flex border-b border-gray-800 px-6 pt-2 overflow-x-auto">
<button class="tab-btn pb-4 px-4 text-sm font-medium text-white border-b-2 border-primary whitespace-nowrap transition-colors" id="all-tab" onclick="switchTab('all')">
All Alerts <span class="ml-2 bg-primary text-xs px-2 py-0.5 rounded-full text-white">5</span>
</button>
<button class="tab-btn pb-4 px-4 text-sm font-medium text-gray-400 hover:text-gray-200 whitespace-nowrap transition-colors" id="system-tab" onclick="switchTab('system')">
System
</button>
<button class="tab-btn pb-4 px-4 text-sm font-medium text-gray-400 hover:text-gray-200 whitespace-nowrap transition-colors" id="quizzes-tab" onclick="switchTab('quizzes')">
Quizzes <span class="ml-2 bg-gray-700 text-xs px-2 py-0.5 rounded-full text-gray-300">2</span>
</button>
<button class="tab-btn pb-4 px-4 text-sm font-medium text-gray-400 hover:text-gray-200 whitespace-nowrap transition-colors" id="rewards-tab" onclick="switchTab('rewards')">
Rewards <span class="ml-2 bg-gray-700 text-xs px-2 py-0.5 rounded-full text-gray-300">1</span>
</button>
</div>
<div class="flex-grow bg-surface-dark-2/50 relative">
<div class="tab-content absolute inset-0 overflow-y-auto custom-scrollbar p-4 space-y-3" id="all-content">
<div class="px-2 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">Today</div>
<div class="group relative bg-surface-dark hover:bg-surface-dark-2 border border-gray-800 rounded-xl p-4 transition-all duration-200 neon-glow-unread cursor-pointer">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-purple-500/20 text-purple-400 flex items-center justify-center flex-shrink-0 mt-1">
<i class="fas fa-gamepad"></i>
</div>
<div class="flex-grow">
<div class="flex justify-between items-start">
<h4 class="text-white font-semibold text-sm">New Quest Available: Cyber Hunt</h4>
<span class="text-xs text-primary font-medium">2m ago</span>
</div>
<p class="text-gray-400 text-sm mt-1 pr-8">The weekly Cyber Hunt challenge is now live! Compete for the top spot and win 500 XP.</p>
<div class="mt-3">
<button class="text-xs bg-primary hover:bg-purple-600 text-white px-3 py-1.5 rounded-md transition font-medium">Join Now</button>
</div>
</div>
<div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="text-gray-500 hover:text-white p-1"><i class="fas fa-times"></i></button>
</div>
</div>
</div>
<div class="group relative bg-surface-dark hover:bg-surface-dark-2 border border-gray-800 rounded-xl p-4 transition-all duration-200 neon-glow-unread cursor-pointer">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-yellow-500/20 text-yellow-400 flex items-center justify-center flex-shrink-0 mt-1">
<i class="fas fa-gift"></i>
</div>
<div class="flex-grow">
<div class="flex justify-between items-start">
<h4 class="text-white font-semibold text-sm">Reward Unlocked: Speedster Badge</h4>
<span class="text-xs text-primary font-medium">1h ago</span>
</div>
<p class="text-gray-400 text-sm mt-1 pr-8">Congratulations! You've answered 10 questions in under 5 seconds each.</p>
</div>
<div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="text-gray-500 hover:text-white p-1"><i class="fas fa-times"></i></button>
</div>
</div>
</div>
<div class="px-2 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider mt-6">Yesterday</div>
<div class="group relative bg-surface-dark hover:bg-surface-dark-2 border border-gray-800/50 rounded-xl p-4 transition-all duration-200 cursor-pointer opacity-80 hover:opacity-100">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-blue-500/20 text-blue-400 flex items-center justify-center flex-shrink-0 mt-1">
<i class="fas fa-shield-alt"></i>
</div>
<div class="flex-grow">
<div class="flex justify-between items-start">
<h4 class="text-gray-200 font-medium text-sm">Account Security Update</h4>
<span class="text-xs text-gray-500">Yesterday</span>
</div>
<p class="text-gray-500 text-sm mt-1 pr-8">We've updated our privacy policy. Please review the changes in your settings.</p>
</div>
<div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="text-gray-500 hover:text-white p-1"><i class="fas fa-times"></i></button>
</div>
</div>
</div>
<div class="group relative bg-surface-dark hover:bg-surface-dark-2 border border-gray-800/50 rounded-xl p-4 transition-all duration-200 cursor-pointer opacity-80 hover:opacity-100">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-purple-500/20 text-purple-400 flex items-center justify-center flex-shrink-0 mt-1">
<i class="fas fa-trophy"></i>
</div>
<div class="flex-grow">
<div class="flex justify-between items-start">
<h4 class="text-gray-200 font-medium text-sm">Tournament Results: Cosmic Trivia</h4>
<span class="text-xs text-gray-500">Yesterday</span>
</div>
<p class="text-gray-500 text-sm mt-1 pr-8">You ranked #452 out of 12,000 participants. Great effort!</p>
<div class="mt-3">
<button class="text-xs border border-gray-600 hover:border-gray-400 text-gray-300 hover:text-white px-3 py-1.5 rounded-md transition">View Leaderboard</button>
</div>
</div>
<div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="text-gray-500 hover:text-white p-1"><i class="fas fa-times"></i></button>
</div>
</div>
</div>
<div class="group relative bg-surface-dark hover:bg-surface-dark-2 border border-gray-800/50 rounded-xl p-4 transition-all duration-200 cursor-pointer opacity-80 hover:opacity-100">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-red-500/20 text-red-400 flex items-center justify-center flex-shrink-0 mt-1">
<i class="fas fa-wallet"></i>
</div>
<div class="flex-grow">
<div class="flex justify-between items-start">
<h4 class="text-gray-200 font-medium text-sm">Payment Successful</h4>
<span class="text-xs text-gray-500">Yesterday</span>
</div>
<p class="text-gray-500 text-sm mt-1 pr-8">Your payment of ₹99 for Standard Entry Pass was successful. Transaction ID: #TXN8829</p>
</div>
<div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="text-gray-500 hover:text-white p-1"><i class="fas fa-times"></i></button>
</div>
</div>
</div>
</div>
<div class="tab-content hidden absolute inset-0 overflow-y-auto custom-scrollbar p-4 space-y-3" id="system-content">
<div class="px-2 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">Yesterday</div>
<div class="group relative bg-surface-dark hover:bg-surface-dark-2 border border-gray-800/50 rounded-xl p-4 transition-all duration-200 cursor-pointer opacity-80 hover:opacity-100">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-blue-500/20 text-blue-400 flex items-center justify-center flex-shrink-0 mt-1">
<i class="fas fa-shield-alt"></i>
</div>
<div class="flex-grow">
<div class="flex justify-between items-start">
<h4 class="text-gray-200 font-medium text-sm">Account Security Update</h4>
<span class="text-xs text-gray-500">Yesterday</span>
</div>
<p class="text-gray-500 text-sm mt-1 pr-8">We've updated our privacy policy. Please review the changes in your settings.</p>
</div>
</div>
</div>
<div class="group relative bg-surface-dark hover:bg-surface-dark-2 border border-gray-800/50 rounded-xl p-4 transition-all duration-200 cursor-pointer opacity-80 hover:opacity-100">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-red-500/20 text-red-400 flex items-center justify-center flex-shrink-0 mt-1">
<i class="fas fa-wallet"></i>
</div>
<div class="flex-grow">
<div class="flex justify-between items-start">
<h4 class="text-gray-200 font-medium text-sm">Payment Successful</h4>
<span class="text-xs text-gray-500">Yesterday</span>
</div>
<p class="text-gray-500 text-sm mt-1 pr-8">Your payment of ₹99 for Standard Entry Pass was successful. Transaction ID: #TXN8829</p>
</div>
</div>
</div>
</div>
<div class="tab-content hidden absolute inset-0 overflow-y-auto custom-scrollbar p-4 space-y-3" id="quizzes-content">
<div class="px-2 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">Today</div>
<div class="group relative bg-surface-dark hover:bg-surface-dark-2 border border-gray-800 rounded-xl p-4 transition-all duration-200 neon-glow-unread cursor-pointer">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-purple-500/20 text-purple-400 flex items-center justify-center flex-shrink-0 mt-1">
<i class="fas fa-gamepad"></i>
</div>
<div class="flex-grow">
<div class="flex justify-between items-start">
<h4 class="text-white font-semibold text-sm">New Quest Available: Cyber Hunt</h4>
<span class="text-xs text-primary font-medium">2m ago</span>
</div>
<p class="text-gray-400 text-sm mt-1 pr-8">The weekly Cyber Hunt challenge is now live! Compete for the top spot and win 500 XP.</p>
<div class="mt-3">
<button class="text-xs bg-primary hover:bg-purple-600 text-white px-3 py-1.5 rounded-md transition font-medium">Join Now</button>
</div>
</div>
</div>
</div>
<div class="px-2 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider mt-4">Yesterday</div>
<div class="group relative bg-surface-dark hover:bg-surface-dark-2 border border-gray-800/50 rounded-xl p-4 transition-all duration-200 cursor-pointer opacity-80 hover:opacity-100">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-purple-500/20 text-purple-400 flex items-center justify-center flex-shrink-0 mt-1">
<i class="fas fa-trophy"></i>
</div>
<div class="flex-grow">
<div class="flex justify-between items-start">
<h4 class="text-gray-200 font-medium text-sm">Tournament Results: Cosmic Trivia</h4>
<span class="text-xs text-gray-500">Yesterday</span>
</div>
<p class="text-gray-500 text-sm mt-1 pr-8">You ranked #452 out of 12,000 participants. Great effort!</p>
<div class="mt-3">
<button class="text-xs border border-gray-600 hover:border-gray-400 text-gray-300 hover:text-white px-3 py-1.5 rounded-md transition">View Leaderboard</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-content hidden absolute inset-0 overflow-y-auto custom-scrollbar p-4 space-y-3" id="rewards-content">
<div class="px-2 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">Today</div>
<div class="group relative bg-surface-dark hover:bg-surface-dark-2 border border-gray-800 rounded-xl p-4 transition-all duration-200 neon-glow-unread cursor-pointer">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-full bg-yellow-500/20 text-yellow-400 flex items-center justify-center flex-shrink-0 mt-1">
<i class="fas fa-gift"></i>
</div>
<div class="flex-grow">
<div class="flex justify-between items-start">
<h4 class="text-white font-semibold text-sm">Reward Unlocked: Speedster Badge</h4>
<span class="text-xs text-primary font-medium">1h ago</span>
</div>
<p class="text-gray-400 text-sm mt-1 pr-8">Congratulations! You've answered 10 questions in under 5 seconds each.</p>
</div>
</div>
</div>
</div>
</div>
<div class="border-t border-gray-800 bg-surface-dark p-4 flex justify-center">
<button class="text-sm text-gray-400 hover:text-primary transition flex items-center gap-2">
<i class="fas fa-history"></i> View older notifications
</button>
</div>
</div>
</main>
<footer class="bg-white dark:bg-[#050505] py-12 border-t border-gray-200 dark:border-gray-900 mt-auto">
<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>