<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Post-Quiz Analysis | QuizPortal</title>
<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"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#6D28D9","primary-glow": "#8b5cf6",
"gold": "#FFD700",
"success": "#10B981",
"error": "#EF4444",
"background-light": "#f6f6f8",
"background-dark": "#0f0c15",
"surface-dark": "#181420",
"surface-highlight": "#251f30",
"surface-card": "#201a2b",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "0.75rem",
"lg": "1.5rem",
"xl": "2rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}.glow-text {
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.glow-box-success {
box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}
.glow-box-error {
box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 antialiased overflow-hidden">
<div class="flex h-screen w-full overflow-hidden">
<aside class="hidden w-72 flex-col justify-between border-r border-surface-highlight bg-background-dark p-6 lg:flex">
<div class="flex flex-col gap-6">
<div class="flex items-center gap-3 px-2">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-white shadow-[0_0_15px_rgba(109,40,217,0.6)]">
<span class="material-symbols-outlined">sports_esports</span>
</div>
<div>
<h1 class="text-lg font-bold leading-tight text-white tracking-wide">QuizPortal</h1>
<p class="text-xs font-medium text-slate-400">Player Zone</p>
</div>
</div>
<nav class="flex flex-col gap-2">
<a class="flex items-center gap-3 rounded-full bg-surface-highlight px-4 py-3 text-white shadow-sm transition-colors hover:bg-surface-highlight/80" href="#">
<span class="material-symbols-outlined text-[20px] text-primary-glow">analytics</span>
<span class="text-sm font-semibold">Analysis</span>
</a>
<a class="flex items-center gap-3 rounded-full px-4 py-3 text-slate-400 transition-colors hover:bg-surface-highlight hover:text-white" href="#">
<span class="material-symbols-outlined text-[20px]">history</span>
<span class="text-sm font-medium">History</span>
</a>
<a class="flex items-center gap-3 rounded-full px-4 py-3 text-slate-400 transition-colors hover:bg-surface-highlight hover:text-white" href="#">
<span class="material-symbols-outlined text-[20px]">leaderboard</span>
<span class="text-sm font-medium">Leaderboard</span>
</a>
<a class="flex items-center gap-3 rounded-full px-4 py-3 text-slate-400 transition-colors hover:bg-surface-highlight hover:text-white" href="#">
<span class="material-symbols-outlined text-[20px]">military_tech</span>
<span class="text-sm font-medium">Achievements</span>
</a>
<a class="flex items-center gap-3 rounded-full px-4 py-3 text-slate-400 transition-colors hover:bg-surface-highlight hover:text-white" href="#">
<span class="material-symbols-outlined text-[20px]">account_circle</span>
<span class="text-sm font-medium">Profile</span>
</a>
</nav>
</div>
<div class="flex flex-col gap-2">
<a class="flex items-center gap-3 rounded-full px-4 py-3 text-slate-400 transition-colors hover:bg-surface-highlight hover:text-red-400" href="#">
<span class="material-symbols-outlined text-[20px]">logout</span>
<span class="text-sm font-medium">Log Out</span>
</a>
</div>
</aside>
<main class="flex flex-1 flex-col overflow-y-auto bg-background-dark relative">
<div class="pointer-events-none absolute top-0 left-0 w-full h-full overflow-hidden">
<div class="absolute top-[-10%] right-[-5%] w-[500px] h-[500px] bg-primary/10 rounded-full blur-[100px]"></div>
<div class="absolute bottom-[-10%] left-[-5%] w-[400px] h-[400px] bg-gold/5 rounded-full blur-[80px]"></div>
</div>
<header class="sticky top-0 z-20 flex w-full items-center justify-between border-b border-surface-highlight bg-background-dark/80 px-6 py-4 backdrop-blur-md lg:px-10">
<div class="flex items-center gap-4 lg:hidden">
<button class="text-white">
<span class="material-symbols-outlined">menu</span>
</button>
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-white">
<span class="material-symbols-outlined text-sm">sports_esports</span>
</div>
</div>
<div class="hidden lg:block">
<div class="flex items-center gap-2">
<button class="flex items-center justify-center h-8 w-8 rounded-full bg-surface-highlight text-slate-400 hover:text-white transition-colors">
<span class="material-symbols-outlined text-sm">arrow_back</span>
</button>
<h2 class="text-xl font-bold text-white">Post-Quiz Analysis</h2>
</div>
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-surface-highlight border border-surface-highlight">
<span class="material-symbols-outlined text-gold text-sm">bolt</span>
<span class="text-sm font-bold text-white">Lvl 12</span>
</div>
<div class="flex h-10 w-10 overflow-hidden rounded-full border-2 border-primary">
<img alt="Player Profile Picture" class="h-full w-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzViL4lc0jczPZTmPDaDclgDRrxY-CoEIhF3LrBitMVCMLnouJJA--yIsKtsNPGtyE4LuMlV4PivDdBDmhCWNkAPTwNpqZHpr1VrBXiZOIQLMV0tqcbN5rlhT8PNPhuitdvbjjJ__KSKmqFbL6C2lgx2_ML9AOeX7zoh0HyaInm8BK6ktedzykYbw63mLopcHpNBH3DhZY7GvRiCGp3eF8zx4jWMXr9ac6huaPlWFvpnlBfg6kuKr1_BJAeuC6YEIKGKuRym9DR1lN"/>
</div>
</div>
</header>
<div class="flex flex-col gap-8 p-6 lg:p-10 z-10">
<section class="grid grid-cols-1 gap-6 xl:grid-cols-3">
<div class="flex flex-col justify-center xl:col-span-2">
<div class="flex items-center gap-2 mb-2">
<span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-purple-500/20 text-purple-300 border border-purple-500/30">Science & Tech</span>
<span class="text-slate-500 text-xs">ā¢ Played just now</span>
</div>
<h1 class="text-3xl font-bold leading-tight text-white md:text-5xl glow-text">Stellar Performance! š</h1>
<p class="mt-2 text-slate-400 max-w-lg">You nailed the difficult sections on astrophysics. Here's a breakdown of how you did compared to the global average.</p>
<div class="mt-6 flex flex-wrap gap-3">
<button class="flex items-center gap-2 rounded-full bg-primary px-6 py-2.5 text-sm font-bold text-white transition-all hover:bg-primary/90 hover:shadow-[0_0_15px_rgba(109,40,217,0.5)]">
<span class="material-symbols-outlined text-[18px]">replay</span>
Play Again
</button>
<button class="flex items-center gap-2 rounded-full bg-surface-highlight border border-surface-highlight px-6 py-2.5 text-sm font-bold text-white transition-all hover:bg-surface-highlight/80 hover:border-slate-600">
<span class="material-symbols-outlined text-[18px]">share</span>
Share Result
</button>
</div>
</div>
<div class="relative overflow-hidden rounded-xl bg-surface-card p-6 xl:col-span-1 border border-surface-highlight">
<div class="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-gold/10 blur-3xl"></div>
<div class="relative z-10 flex flex-col h-full justify-between">
<div class="flex items-start justify-between">
<div>
<p class="text-xs font-semibold uppercase tracking-wider text-gold">Total Score</p>
<h3 class="text-4xl font-black text-white mt-1">8,450 <span class="text-lg font-medium text-slate-500">pts</span></h3>
</div>
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-gold/20 text-gold shadow-[0_0_15px_rgba(255,215,0,0.3)]">
<span class="material-symbols-outlined text-2xl">emoji_events</span>
</div>
</div>
<div class="mt-6 pt-6 border-t border-white/5 grid grid-cols-2 gap-4">
<div>
<p class="text-[10px] text-slate-400 uppercase tracking-wide">Accuracy</p>
<p class="text-lg font-bold text-white">92%</p>
</div>
<div>
<p class="text-[10px] text-slate-400 uppercase tracking-wide">Rank</p>
<p class="text-lg font-bold text-emerald-400">#45 <span class="text-xs font-normal text-slate-500">Top 1%</span></p>
</div>
</div>
</div>
</div>
</section>
<section class="grid grid-cols-1 gap-4 sm:grid-cols-4">
<div class="group flex flex-col justify-between rounded-xl bg-surface-card border border-surface-highlight p-4">
<div class="flex items-center gap-3 mb-2">
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors">timer</span>
<span class="text-xs font-medium text-slate-400 uppercase">Avg Speed</span>
</div>
<p class="text-2xl font-bold text-white">1.2s</p>
</div>
<div class="group flex flex-col justify-between rounded-xl bg-surface-card border border-surface-highlight p-4">
<div class="flex items-center gap-3 mb-2">
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors">local_fire_department</span>
<span class="text-xs font-medium text-slate-400 uppercase">Streak</span>
</div>
<p class="text-2xl font-bold text-white">14 <span class="text-sm font-normal text-slate-500">in a row</span></p>
</div>
<div class="group flex flex-col justify-between rounded-xl bg-surface-card border border-surface-highlight p-4">
<div class="flex items-center gap-3 mb-2">
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors">check_circle</span>
<span class="text-xs font-medium text-slate-400 uppercase">Correct</span>
</div>
<p class="text-2xl font-bold text-emerald-400">23<span class="text-slate-500">/25</span></p>
</div>
<div class="group flex flex-col justify-between rounded-xl bg-surface-card border border-surface-highlight p-4">
<div class="flex items-center gap-3 mb-2">
<span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors">psychology</span>
<span class="text-xs font-medium text-slate-400 uppercase">IQ Rating</span>
</div>
<p class="text-2xl font-bold text-purple-400">High</p>
</div>
</section>
<section class="flex flex-col gap-6">
<div class="flex items-center justify-between">
<h3 class="text-xl font-bold text-white flex items-center gap-2">
<span class="material-symbols-outlined text-primary">manage_search</span>
Question Breakdown
</h3>
<div class="flex gap-2">
<span class="flex items-center gap-1.5 text-xs font-medium text-emerald-400 bg-emerald-500/10 px-3 py-1 rounded-full border border-emerald-500/20">
<span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
Correct
</span>
<span class="flex items-center gap-1.5 text-xs font-medium text-red-400 bg-red-500/10 px-3 py-1 rounded-full border border-red-500/20">
<span class="h-1.5 w-1.5 rounded-full bg-red-400"></span>
Incorrect
</span>
</div>
</div>
<div class="grid grid-cols-1 gap-4">
<div class="rounded-xl bg-surface-card border-l-4 border-l-red-500 border-y border-r border-surface-highlight p-6 glow-box-error relative overflow-hidden">
<div class="flex flex-col gap-4">
<div class="flex justify-between items-start w-full">
<div class="flex gap-4">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-red-500/20 text-red-500 flex items-center justify-center font-bold text-sm">1</div>
<div>
<h4 class="text-lg font-medium text-white">Which planet in our solar system has the highest average surface temperature?</h4>
<div class="flex gap-3 mt-2">
<span class="text-xs text-slate-400 bg-surface-highlight px-2 py-1 rounded"> Astronomy</span>
<span class="text-xs text-red-400 font-semibold flex items-center gap-1">
<span class="material-symbols-outlined text-[14px]">close</span> Incorrect
</span>
</div>
</div>
</div>
<span class="text-sm font-bold text-red-400">-50 pts</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2">
<div class="p-3 rounded-lg bg-red-500/10 border border-red-500/30">
<p class="text-xs text-red-300 mb-1 uppercase tracking-wider">Your Answer</p>
<p class="text-white font-medium">Mercury</p>
</div>
<div class="p-3 rounded-lg bg-emerald-500/10 border border-emerald-500/30">
<p class="text-xs text-emerald-300 mb-1 uppercase tracking-wider">Correct Answer</p>
<p class="text-white font-medium">Venus</p>
</div>
</div>
<div class="bg-surface-highlight/50 rounded-lg p-4 border border-surface-highlight mt-2">
<div class="flex items-center gap-2 mb-2 text-primary-glow">
<span class="material-symbols-outlined text-[18px]">lightbulb</span>
<span class="text-sm font-bold uppercase">Why is this correct?</span>
</div>
<p class="text-sm text-slate-300 leading-relaxed">
Although Mercury is closer to the Sun, Venus has a thick atmosphere rich in carbon dioxide, which creates a runaway greenhouse effect, trapping heat and making it the hottest planet.
</p>
</div>
</div>
</div>
<div class="group rounded-xl bg-surface-card border-l-4 border-l-emerald-500 border-y border-r border-surface-highlight p-4 hover:bg-surface-highlight/40 transition-colors cursor-pointer glow-box-success">
<div class="flex justify-between items-center w-full">
<div class="flex gap-4 items-center">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-emerald-500/20 text-emerald-500 flex items-center justify-center font-bold text-sm">
<span class="material-symbols-outlined text-[18px]">check</span>
</div>
<div>
<h4 class="text-base font-medium text-white group-hover:text-primary-glow transition-colors">What is the powerhouse of the cell?</h4>
</div>
</div>
<div class="flex items-center gap-4">
<span class="text-sm font-bold text-emerald-400">+100 pts</span>
<span class="material-symbols-outlined text-slate-500">expand_more</span>
</div>
</div>
</div>
<div class="group rounded-xl bg-surface-card border-l-4 border-l-emerald-500 border-y border-r border-surface-highlight p-4 hover:bg-surface-highlight/40 transition-colors cursor-pointer glow-box-success">
<div class="flex justify-between items-center w-full">
<div class="flex gap-4 items-center">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-emerald-500/20 text-emerald-500 flex items-center justify-center font-bold text-sm">
<span class="material-symbols-outlined text-[18px]">check</span>
</div>
<div>
<h4 class="text-base font-medium text-white group-hover:text-primary-glow transition-colors">Who developed the theory of relativity?</h4>
</div>
</div>
<div class="flex items-center gap-4">
<span class="text-sm font-bold text-emerald-400">+150 pts</span>
<span class="material-symbols-outlined text-slate-500">expand_more</span>
</div>
</div>
</div>
<div class="group rounded-xl bg-surface-card border-l-4 border-l-emerald-500 border-y border-r border-surface-highlight p-4 hover:bg-surface-highlight/40 transition-colors cursor-pointer glow-box-success">
<div class="flex justify-between items-center w-full">
<div class="flex gap-4 items-center">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-emerald-500/20 text-emerald-500 flex items-center justify-center font-bold text-sm">
<span class="material-symbols-outlined text-[18px]">check</span>
</div>
<div>
<h4 class="text-base font-medium text-white group-hover:text-primary-glow transition-colors">What corresponds to the element symbol 'Au'?</h4>
</div>
</div>
<div class="flex items-center gap-4">
<span class="text-sm font-bold text-emerald-400">+100 pts</span>
<span class="material-symbols-outlined text-slate-500">expand_more</span>
</div>
</div>
</div>
<div class="group rounded-xl bg-surface-card border-l-4 border-l-red-500 border-y border-r border-surface-highlight p-4 hover:bg-surface-highlight/40 transition-colors cursor-pointer glow-box-error">
<div class="flex justify-between items-center w-full">
<div class="flex gap-4 items-center">
<div class="flex-shrink-0 w-8 h-8 rounded-full bg-red-500/20 text-red-500 flex items-center justify-center font-bold text-sm">
<span class="material-symbols-outlined text-[18px]">close</span>
</div>
<div>
<h4 class="text-base font-medium text-white group-hover:text-primary-glow transition-colors">In what year did the Titanic sink?</h4>
</div>
</div>
<div class="flex items-center gap-4">
<span class="text-sm font-bold text-red-400">-50 pts</span>
<span class="material-symbols-outlined text-slate-500">expand_more</span>
</div>
</div>
</div>
</div>
<div class="mt-4 flex items-center justify-center">
<button class="text-sm font-medium text-primary hover:text-primary-glow transition-colors">Load More Questions</button>
</div>
</section>
<section class="relative overflow-hidden rounded-xl bg-gradient-to-r from-primary to-purple-800 p-8 shadow-lg">
<div class="absolute inset-0 z-0">
<div class="absolute right-0 top-0 h-64 w-64 translate-x-10 translate-y-[-50%] rounded-full bg-white opacity-10 blur-3xl"></div>
<div class="absolute bottom-0 left-0 h-40 w-40 translate-x-[-20%] translate-y-[20%] rounded-full bg-black opacity-20 blur-2xl"></div>
</div>
<div class="relative z-10 flex flex-col items-start justify-between gap-6 md:flex-row md:items-center">
<div class="max-w-xl">
<div class="flex items-center gap-2 text-white/80">
<span class="material-symbols-outlined text-sm">auto_awesome</span>
<span class="text-xs font-bold uppercase tracking-widest">Recommended for you</span>
</div>
<h3 class="mt-2 text-2xl font-bold text-white">Master the Cosmos: Advanced Astronomy</h3>
<p class="mt-2 text-white/80">Based on your recent performance, this challenge will double your XP.</p>
</div>
<button class="flex items-center gap-2 whitespace-nowrap rounded-full bg-white px-6 py-3 text-sm font-bold text-primary shadow-lg transition-transform hover:scale-105">
Start Quiz
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
</button>
</div>
</section>
</div>
</main>
</div>
</body></html>