<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Quiz Analysis - 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"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" 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",
success: "#10B981",
error: "#EF4444",
},
fontFamily: {
display: ["Inter", "sans-serif"],
sans: ["Inter", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.75rem",
},
},
},
};
// Check for saved user preference, if any, on load of the website
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);
}
</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">
<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-primary dark:text-white font-medium transition border-b-2 border-primary" href="#">History</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="flex items-center gap-3 pl-4 border-l border-gray-200 dark:border-gray-800">
<div class="text-right hidden sm:block">
<p class="text-sm font-bold text-gray-900 dark:text-white">Alex Gamer</p>
<p class="text-xs text-primary font-medium">Lvl 12 Master</p>
</div>
<div class="w-10 h-10 rounded-full bg-gradient-to-tr from-purple-500 to-pink-500 p-0.5">
<div class="w-full h-full rounded-full bg-surface-dark flex items-center justify-center overflow-hidden">
<img alt="User" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCNzslZk3tROc9lrAA73zOxBEYSkzrKENkQpJpw8pgURe_TH8f0jdziix3En42BChJ_lFUEJ85Wwupv1xXJ84WElkEZ8Mr1FJczLNqb-0q97BaGj5HemUXlADFreWmEjJAmn5LL99WywsJA2On1NGzdwtsN-Sfj34xON5Su_AWF4maJXS3xGHakUOx1-fu6cr3aB4GN5NivOnpqiUflViyVAynVMVySqwuQE_0PwlqnpMrmYS3DEviYq49a1xYWYUhBrJPok3PV"/>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<main class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-10">
<div>
<div class="flex items-center gap-3 mb-2">
<a class="text-gray-400 hover:text-white transition flex items-center gap-1 text-sm" href="#">
<span class="material-symbols-outlined text-[18px]">arrow_back</span>
Back to Dashboard
</a>
</div>
<h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">Neon Cyber Hunt: Season Finale</h1>
<p class="text-gray-500 dark:text-gray-400 mt-2 flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">calendar_today</span> Completed on Oct 24, 2023 • 10:45 AM
</p>
</div>
<div class="flex gap-3">
<button class="px-5 py-2.5 rounded-xl bg-surface-light dark:bg-surface-dark-2 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 font-medium transition flex items-center gap-2">
<span class="material-symbols-outlined text-[20px]">share</span> Share
</button>
<button class="px-5 py-2.5 rounded-xl bg-primary hover:bg-purple-700 text-white font-medium transition shadow-lg shadow-purple-900/20 flex items-center gap-2">
<span class="material-symbols-outlined text-[20px]">replay</span> Play Again
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-10">
<div class="bg-surface-light dark:bg-surface-dark border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-sm relative overflow-hidden">
<div class="absolute top-0 right-0 p-4 opacity-10">
<span class="material-symbols-outlined text-6xl text-primary">emoji_events</span>
</div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Total Score</p>
<div class="flex items-baseline gap-2 mt-2">
<h3 class="text-4xl font-bold text-gray-900 dark:text-white">850</h3>
<span class="text-sm text-green-500 font-medium">+120 XP</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-800 h-1.5 mt-4 rounded-full overflow-hidden">
<div class="bg-primary h-full rounded-full" style="width: 85%"></div>
</div>
</div>
<div class="bg-surface-light dark:bg-surface-dark border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-sm relative overflow-hidden">
<div class="absolute top-0 right-0 p-4 opacity-10">
<span class="material-symbols-outlined text-6xl text-blue-500">ads_click</span>
</div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Accuracy</p>
<div class="flex items-baseline gap-2 mt-2">
<h3 class="text-4xl font-bold text-gray-900 dark:text-white">80%</h3>
<span class="text-sm text-gray-400 font-medium">8/10 Correct</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-800 h-1.5 mt-4 rounded-full overflow-hidden">
<div class="bg-blue-500 h-full rounded-full" style="width: 80%"></div>
</div>
</div>
<div class="bg-surface-light dark:bg-surface-dark border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-sm relative overflow-hidden">
<div class="absolute top-0 right-0 p-4 opacity-10">
<span class="material-symbols-outlined text-6xl text-yellow-500">timer</span>
</div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Time Taken</p>
<div class="flex items-baseline gap-2 mt-2">
<h3 class="text-4xl font-bold text-gray-900 dark:text-white">04:12</h3>
<span class="text-sm text-green-500 font-medium font-mono text-xs">Fastest 10%</span>
</div>
<div class="mt-4 text-xs text-gray-500">Avg. 25s per question</div>
</div>
<div class="bg-surface-light dark:bg-surface-dark border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-sm relative overflow-hidden">
<div class="absolute top-0 right-0 p-4 opacity-10">
<span class="material-symbols-outlined text-6xl text-green-500">leaderboard</span>
</div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Rank</p>
<div class="flex items-baseline gap-2 mt-2">
<h3 class="text-4xl font-bold text-gray-900 dark:text-white">#452</h3>
<span class="text-sm text-green-500 font-medium flex items-center"><span class="material-symbols-outlined text-[16px]">arrow_upward</span> 12</span>
</div>
<div class="mt-4 text-xs text-gray-500">Top 15% of players</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="lg:col-span-2 space-y-6">
<h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">list_alt</span> Question Breakdown
</h2>
<div class="bg-surface-light dark:bg-surface-dark border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-sm hover:border-green-500/50 transition-colors group">
<div class="flex justify-between items-start mb-4">
<span class="text-sm font-bold text-gray-500 dark:text-gray-400">Question 1</span>
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 border border-green-200 dark:border-green-800">
<span class="material-symbols-outlined text-[14px]">check_circle</span> Correct
</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">What is the primary function of a CPU in a computer system?</h3>
<div class="bg-gray-50 dark:bg-surface-dark-2 rounded-xl p-4 border border-gray-200 dark:border-gray-700/50 mb-4">
<div class="flex items-start gap-3">
<div class="mt-0.5 min-w-[20px] h-5 rounded-full bg-green-500 flex items-center justify-center text-white text-xs">
<i class="fas fa-check"></i>
</div>
<div>
<p class="text-sm text-gray-500 dark:text-gray-400 text-xs uppercase font-bold mb-1">Your Answer</p>
<p class="text-gray-800 dark:text-gray-200 font-medium">To process instructions and manage data flow.</p>
</div>
</div>
</div>
<div class="text-sm text-gray-500 dark:text-gray-400 pl-2 border-l-2 border-gray-200 dark:border-gray-700">
<span class="font-bold text-primary">Explanation:</span> The CPU (Central Processing Unit) is often called the brain of the computer because it executes instructions from programs and processes data.
</div>
</div>
<div class="bg-surface-light dark:bg-surface-dark border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-sm hover:border-red-500/50 transition-colors group">
<div class="flex justify-between items-start mb-4">
<span class="text-sm font-bold text-gray-500 dark:text-gray-400">Question 2</span>
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 border border-red-200 dark:border-red-800">
<span class="material-symbols-outlined text-[14px]">cancel</span> Incorrect
</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Which programming language is known as the 'mother of all languages'?</h3>
<div class="grid md:grid-cols-2 gap-4 mb-4">
<div class="bg-red-50 dark:bg-red-900/10 rounded-xl p-4 border border-red-100 dark:border-red-900/30">
<div class="flex items-start gap-3">
<div class="mt-0.5 min-w-[20px] h-5 rounded-full bg-red-500 flex items-center justify-center text-white text-xs">
<i class="fas fa-times"></i>
</div>
<div>
<p class="text-sm text-red-600/70 dark:text-red-400/70 text-xs uppercase font-bold mb-1">Your Answer</p>
<p class="text-red-800 dark:text-red-200 font-medium">Assembly</p>
</div>
</div>
</div>
<div class="bg-green-50 dark:bg-green-900/10 rounded-xl p-4 border border-green-100 dark:border-green-900/30">
<div class="flex items-start gap-3">
<div class="mt-0.5 min-w-[20px] h-5 rounded-full bg-green-500 flex items-center justify-center text-white text-xs">
<i class="fas fa-check"></i>
</div>
<div>
<p class="text-sm text-green-600/70 dark:text-green-400/70 text-xs uppercase font-bold mb-1">Correct Answer</p>
<p class="text-green-800 dark:text-green-200 font-medium">C</p>
</div>
</div>
</div>
</div>
<div class="text-sm text-gray-500 dark:text-gray-400 pl-2 border-l-2 border-gray-200 dark:border-gray-700">
<span class="font-bold text-primary">Explanation:</span> C is often referred to as the mother of all languages because many modern languages like C++, Java, and Python have borrowed syntax and concepts from it.
</div>
</div>
<div class="bg-surface-light dark:bg-surface-dark border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-sm hover:border-green-500/50 transition-colors group">
<div class="flex justify-between items-start mb-4">
<span class="text-sm font-bold text-gray-500 dark:text-gray-400">Question 3</span>
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 border border-green-200 dark:border-green-800">
<span class="material-symbols-outlined text-[14px]">check_circle</span> Correct
</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">What does HTTP stand for?</h3>
<div class="bg-gray-50 dark:bg-surface-dark-2 rounded-xl p-4 border border-gray-200 dark:border-gray-700/50 mb-4">
<div class="flex items-start gap-3">
<div class="mt-0.5 min-w-[20px] h-5 rounded-full bg-green-500 flex items-center justify-center text-white text-xs">
<i class="fas fa-check"></i>
</div>
<div>
<p class="text-sm text-gray-500 dark:text-gray-400 text-xs uppercase font-bold mb-1">Your Answer</p>
<p class="text-gray-800 dark:text-gray-200 font-medium">HyperText Transfer Protocol</p>
</div>
</div>
</div>
<div class="text-sm text-gray-500 dark:text-gray-400 pl-2 border-l-2 border-gray-200 dark:border-gray-700">
<span class="font-bold text-primary">Explanation:</span> HTTP is the foundation of data communication for the World Wide Web.
</div>
</div>
</div>
<div class="space-y-6">
<div class="bg-surface-light dark:bg-surface-dark border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-sm">
<h3 class="font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<span class="material-symbols-outlined text-accent">tips_and_updates</span> Performance Insight
</h3>
<div class="space-y-4">
<div class="p-4 rounded-xl bg-purple-50 dark:bg-purple-900/20 border border-purple-100 dark:border-purple-800/30">
<p class="text-sm text-gray-700 dark:text-gray-300">
<span class="font-bold text-primary">Strengths:</span> You have excellent knowledge in <span class="font-semibold text-gray-900 dark:text-white">Hardware Basics</span>. You answered 100% correctly in this category.
</p>
</div>
<div class="p-4 rounded-xl bg-orange-50 dark:bg-orange-900/20 border border-orange-100 dark:border-orange-800/30">
<p class="text-sm text-gray-700 dark:text-gray-300">
<span class="font-bold text-orange-600 dark:text-orange-400">Weakness:</span> Brush up on <span class="font-semibold text-gray-900 dark:text-white">Programming History</span>. 2 incorrect answers were from this topic.
</p>
</div>
</div>
</div>
<div class="bg-surface-light dark:bg-surface-dark border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-sm">
<div class="flex justify-between items-center mb-4">
<h3 class="font-bold text-gray-900 dark:text-white flex items-center gap-2">
<span class="material-symbols-outlined text-yellow-500">trophy</span> Top Scorers
</h3>
<a class="text-xs text-primary font-semibold hover:underline" href="#">View All</a>
</div>
<div class="space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-xs font-bold text-gray-600 dark:text-gray-300">
1
</div>
<div class="w-8 h-8 rounded-full bg-blue-500 overflow-hidden">
<img alt="User" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDKnUfFieU-KEIauEPW_h-pHhYY1JV_r-ZSTQ2LjbXXjbjX-sy6IR-kVICj6rbSgrvNOOAQ84Yi7QmH_m3W514QVZ8GFs39xfpcn2vS-SDJboAQTAjEGxb0A3phkaOdLyrx9gTlBgvbwNrKJhVo2hvj9DlC2r3j9Ls21H5QNPWL4pNRPRktnbfQ6OGb5SFrdgB_scajLA07khrYVVAj2U0smwTum3UqocWbN4lZyBNYA6ftLOqJIAwwLI7KjTIM9m5H3djm57Ci"/>
</div>
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">Sarah W.</span>
</div>
<span class="text-sm font-bold text-primary">1000 XP</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-xs font-bold text-gray-600 dark:text-gray-300">
2
</div>
<div class="w-8 h-8 rounded-full bg-green-500 overflow-hidden">
<img alt="User" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAUnLcXxE0O580A3T0cnVwHSzflNaiOdLGHy_evwzJg5cVjVs3VxVqWI0M8KF0VpYLdEgJntFrSpDHE0Q5Zp2J5bCPWUtVUx5LS9i8aoeYNiATtzUPElDnb7hTajx_Z39UBZxank5HyO4owOjh8xTMNUOKTdnsPKFFAuqThEKjWyVJ_2ZENigSVfXmbx_EXaPnhKLZw_S8-QITyujvNzQA-5B6QKCZPMyIRSkuyPjil_3owEvhF3ynjaF-HQq9rp1X1hR_F_Etf"/>
</div>
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">Mike T.</span>
</div>
<span class="text-sm font-bold text-primary">980 XP</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-xs font-bold text-gray-600 dark:text-gray-300">
3
</div>
<div class="w-8 h-8 rounded-full bg-red-500 overflow-hidden">
<img alt="User" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBrFzlEomD7Hw54_fOfaTCDTKTVajqTdVDcJaA45shULI1zl2s_7maa2DrP46oardBGXaIx2fGurR36wX9biwNqBujo297QmLxmzmCxjn8wZvVB9I54U-Sx5qgHj0zMXmEG8B0C8tl_YK6mJwTFv30CYCusIx8_CyrXT7aG7s-e5sZg21EJi-RD38x6FYJIPA0ovIuX5X1OayV2lDq9tSmIgs5EVKP52RawrLJTWbh0fSSfmWxSvf4zlUaUnsRVeEvmDrylSsVH"/>
</div>
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">Jessica L.</span>
</div>
<span class="text-sm font-bold text-primary">950 XP</span>
</div>
<div class="flex items-center justify-between pt-3 mt-3 border-t border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-surface-dark-2/50 -mx-2 px-2 py-2 rounded-lg">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-xs font-bold text-primary">
452
</div>
<div class="w-8 h-8 rounded-full bg-purple-500 overflow-hidden border-2 border-primary">
<img alt="User" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBC4AqQ88djtpp8xzznK_6Kl8dVEcdZ-e5HPg9a6U936PyxZf2g7pAnw7ok-INjKWrM3S8cHPgvbyt8DyGMC7BiR6N-qbhZUZi7qAcrqkIbqMMlYj3NGQdtoF5hAH3yYXl0iY0vjHTwN1k4ZbVAya8ux0Xmuwf1pO5sDi5cMxZRjtNWDxKjmWTlWRm_jZ5BTeTkI2a4BD58LOI7s0xa4vr9alnIFqZet-W_jAR_lVtjP9ZnGKN0mXJ-tpVIVSV2maeFNO68vvUl"/>
</div>
<span class="text-sm font-bold text-gray-900 dark:text-white">You</span>
</div>
<span class="text-sm font-bold text-gray-900 dark:text-white">850 XP</span>
</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>