<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Quest Completed - QuizQuest Results</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@500;700;900&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#7C3AED", // Violet-600
"primary-hover": "#6D28D9", // Violet-700
"accent-yellow": "#FACC15", // Yellow-400
"accent-green": "#10B981", // Emerald-500
"accent-red": "#EF4444", // Red-500
"background-light": "#F3F4F6", // Gray-100
"background-dark": "#0F0720", // Very dark purple/black
"card-dark": "#1A1033", // Dark purple card bg
"card-light": "#FFFFFF",
"text-light": "#1F2937", // Gray-800
"text-dark": "#F3F4F6", // Gray-100
"glass-dark": "rgba(255, 255, 255, 0.05)",
},
fontFamily: {
sans: ["Inter", "sans-serif"],
display: ["Outfit", "sans-serif"],
},
backgroundImage: {
'hero-gradient': 'radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.15) 0%, rgba(15, 7, 32, 0) 50%)',
'card-gradient': 'linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%)',
'glow': 'conic-gradient(from 180deg at 50% 50%, #2a8af6 0deg, #a853ba 180deg, #e92a67 360deg)',
}
},
},
};
</script>
<style type="text/tailwindcss">
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #111;
}
::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #FACC15, #f59e0b);
}
details > summary {
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}
.confetti-piece {
position: absolute;
width: 10px;
height: 10px;
background: #FACC15;
top: 0;
opacity: 0;
}@keyframes celebration-pulse {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.7); }
70% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(124, 58, 237, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}
.animate-celebration {
animation: celebration-pulse 2s infinite;
}
</style>
</head>
<body class="bg-background-dark text-text-dark font-sans transition-colors duration-300 antialiased selection:bg-primary selection:text-white min-h-screen flex flex-col">
<nav class="fixed top-0 w-full z-50 backdrop-blur-md bg-background-dark/80 border-b border-white/10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex-shrink-0 flex items-center gap-2 cursor-pointer">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white">
<span class="material-icons-outlined text-2xl">sports_esports</span>
</div>
<span class="font-display font-bold text-xl tracking-tight text-white">QuizQuest</span>
</div>
<div class="flex items-center gap-4">
<div class="hidden sm:flex items-center gap-2 px-3 py-1 bg-white/5 rounded-full border border-white/10">
<div class="w-6 h-6 rounded-full bg-gradient-to-br from-indigo-500 to-purple-500"></div>
<span class="text-sm font-medium">CyberNinja_99</span>
<span class="text-xs text-accent-yellow ml-1">Lvl 12</span>
</div>
<a class="bg-white/10 hover:bg-white/20 text-white px-4 py-2 rounded-full text-sm font-semibold transition-all" href="#">
Dashboard
</a>
</div>
</div>
</div>
</nav>
<main class="flex-grow pt-28 pb-20 relative overflow-hidden">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[600px] bg-hero-gradient pointer-events-none"></div>
<div class="absolute top-20 left-10 w-32 h-32 bg-purple-600/20 rounded-full blur-3xl animate-pulse"></div>
<div class="absolute top-40 right-10 w-48 h-48 bg-blue-600/10 rounded-full blur-3xl"></div>
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center mb-12">
<div class="inline-flex items-center justify-center mb-6 relative">
<div class="absolute inset-0 bg-primary blur-2xl opacity-40 rounded-full"></div>
<div class="relative w-32 h-32 md:w-40 md:h-40 bg-gradient-to-b from-yellow-400 to-yellow-600 rounded-full p-1 shadow-2xl shadow-yellow-500/20 animate-celebration flex items-center justify-center">
<div class="w-full h-full bg-background-dark rounded-full flex flex-col items-center justify-center border-4 border-yellow-500">
<span class="text-xs font-bold text-yellow-500 uppercase tracking-wider mb-1">Rank</span>
<span class="text-5xl md:text-6xl font-display font-black text-white leading-none">#12</span>
</div>
<div class="absolute -top-4 -right-4 w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-lg transform rotate-12">
<span class="material-icons-outlined text-yellow-500 text-2xl">emoji_events</span>
</div>
</div>
</div>
<h1 class="font-display text-4xl md:text-5xl font-bold text-white mb-2 tracking-tight">
Quest Completed!
</h1>
<p class="text-gray-400 text-lg">
You earned <span class="text-accent-yellow font-bold text-xl">2,450 XP</span> in this session.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-12">
<div class="bg-card-dark border border-white/5 rounded-2xl p-6 relative overflow-hidden group hover:border-primary/30 transition-colors">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-icons-outlined text-6xl text-accent-green">check_circle</span>
</div>
<p class="text-sm text-gray-400 font-medium uppercase tracking-wide mb-1">Accuracy</p>
<div class="flex items-baseline gap-2">
<span class="text-3xl font-display font-bold text-white">85%</span>
<span class="text-xs text-accent-green font-medium flex items-center">
<span class="material-icons-outlined text-sm mr-0.5">trending_up</span> +5%
</span>
</div>
<div class="w-full bg-gray-800 h-1.5 mt-4 rounded-full overflow-hidden">
<div class="bg-accent-green h-full rounded-full" style="width: 85%"></div>
</div>
</div>
<div class="bg-card-dark border border-white/5 rounded-2xl p-6 relative overflow-hidden group hover:border-primary/30 transition-colors">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-icons-outlined text-6xl text-blue-500">timer</span>
</div>
<p class="text-sm text-gray-400 font-medium uppercase tracking-wide mb-1">Avg. Speed</p>
<div class="flex items-baseline gap-2">
<span class="text-3xl font-display font-bold text-white">12s</span>
<span class="text-xs text-gray-500 font-medium">per question</span>
</div>
<div class="flex gap-1 mt-4">
<span class="h-1.5 w-full bg-blue-500 rounded-full opacity-100"></span>
<span class="h-1.5 w-full bg-blue-500 rounded-full opacity-100"></span>
<span class="h-1.5 w-full bg-blue-500 rounded-full opacity-100"></span>
<span class="h-1.5 w-full bg-blue-500 rounded-full opacity-30"></span>
</div>
</div>
<div class="bg-card-dark border border-white/5 rounded-2xl p-6 relative overflow-hidden group hover:border-primary/30 transition-colors">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-icons-outlined text-6xl text-orange-500">local_fire_department</span>
</div>
<p class="text-sm text-gray-400 font-medium uppercase tracking-wide mb-1">Best Streak</p>
<div class="flex items-baseline gap-2">
<span class="text-3xl font-display font-bold text-white">8</span>
<span class="text-xs text-orange-500 font-medium">Combo Bonus x2</span>
</div>
<div class="mt-4 flex items-center gap-1">
<span class="material-icons-outlined text-orange-500 text-sm">bolt</span>
<span class="text-xs text-gray-400">Combo meter maxed out!</span>
</div>
</div>
</div>
<div class="mb-12">
<h3 class="font-display text-2xl font-bold text-white mb-6 flex items-center gap-2">
<span class="material-icons-outlined text-primary">analytics</span>
Question Breakdown
</h3>
<div class="space-y-4">
<details class="group bg-card-dark border border-white/5 rounded-xl overflow-hidden open:border-primary/50 transition-all">
<summary class="flex items-center justify-between p-5 cursor-pointer hover:bg-white/5 transition-colors select-none">
<div class="flex items-center gap-4">
<div class="w-8 h-8 rounded-full bg-accent-green/20 flex items-center justify-center text-accent-green border border-accent-green/20">
<span class="material-icons-outlined text-lg">check</span>
</div>
<div>
<h4 class="font-medium text-white text-base md:text-lg">What is the main ingredient in Guacamole?</h4>
</div>
</div>
<span class="material-icons-outlined text-gray-500 group-open:rotate-180 transition-transform">expand_more</span>
</summary>
<div class="px-5 pb-5 pt-0 pl-[4.5rem]">
<div class="bg-white/5 rounded-lg p-4 text-sm text-gray-300">
<div class="flex flex-col sm:flex-row gap-4 mb-3">
<div class="flex-1">
<span class="text-xs text-gray-500 uppercase block mb-1">Your Answer</span>
<span class="text-accent-green font-bold">Avocado</span>
</div>
<div class="flex-1">
<span class="text-xs text-gray-500 uppercase block mb-1">Correct Answer</span>
<span class="text-white font-medium">Avocado</span>
</div>
</div>
<p class="text-gray-400 border-t border-white/10 pt-3 mt-3">
<span class="text-primary font-bold text-xs uppercase mr-2">Fact:</span>
Guacamole is an avocado-based dip, spread, or salad first developed in Mexico.
</p>
</div>
</div>
</details>
<details class="group bg-card-dark border border-white/5 rounded-xl overflow-hidden open:border-accent-red/50 transition-all">
<summary class="flex items-center justify-between p-5 cursor-pointer hover:bg-white/5 transition-colors select-none">
<div class="flex items-center gap-4">
<div class="w-8 h-8 rounded-full bg-accent-red/20 flex items-center justify-center text-accent-red border border-accent-red/20">
<span class="material-icons-outlined text-lg">close</span>
</div>
<div>
<h4 class="font-medium text-white text-base md:text-lg">Who painted the Mona Lisa?</h4>
</div>
</div>
<span class="material-icons-outlined text-gray-500 group-open:rotate-180 transition-transform">expand_more</span>
</summary>
<div class="px-5 pb-5 pt-0 pl-[4.5rem]">
<div class="bg-white/5 rounded-lg p-4 text-sm text-gray-300">
<div class="flex flex-col sm:flex-row gap-4 mb-3">
<div class="flex-1">
<span class="text-xs text-gray-500 uppercase block mb-1">Your Answer</span>
<span class="text-accent-red font-bold line-through">Michelangelo</span>
</div>
<div class="flex-1">
<span class="text-xs text-gray-500 uppercase block mb-1">Correct Answer</span>
<span class="text-accent-green font-bold">Leonardo da Vinci</span>
</div>
</div>
<p class="text-gray-400 border-t border-white/10 pt-3 mt-3">
<span class="text-primary font-bold text-xs uppercase mr-2">Fact:</span>
The Mona Lisa is a half-length portrait painting by Italian artist Leonardo da Vinci.
</p>
</div>
</div>
</details>
<details class="group bg-card-dark border border-white/5 rounded-xl overflow-hidden open:border-primary/50 transition-all">
<summary class="flex items-center justify-between p-5 cursor-pointer hover:bg-white/5 transition-colors select-none">
<div class="flex items-center gap-4">
<div class="w-8 h-8 rounded-full bg-accent-green/20 flex items-center justify-center text-accent-green border border-accent-green/20">
<span class="material-icons-outlined text-lg">check</span>
</div>
<div>
<h4 class="font-medium text-white text-base md:text-lg">Which planet is known as the Red Planet?</h4>
</div>
</div>
<span class="material-icons-outlined text-gray-500 group-open:rotate-180 transition-transform">expand_more</span>
</summary>
<div class="px-5 pb-5 pt-0 pl-[4.5rem]">
<div class="bg-white/5 rounded-lg p-4 text-sm text-gray-300">
<div class="flex flex-col sm:flex-row gap-4 mb-3">
<div class="flex-1">
<span class="text-xs text-gray-500 uppercase block mb-1">Your Answer</span>
<span class="text-accent-green font-bold">Mars</span>
</div>
<div class="flex-1">
<span class="text-xs text-gray-500 uppercase block mb-1">Correct Answer</span>
<span class="text-white font-medium">Mars</span>
</div>
</div>
<p class="text-gray-400 border-t border-white/10 pt-3 mt-3">
<span class="text-primary font-bold text-xs uppercase mr-2">Fact:</span>
Mars appears red because of iron oxide (rust) in its soil.
</p>
</div>
</div>
</details>
</div>
</div>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<button class="w-full sm:w-auto px-8 py-4 rounded-full border border-white/10 bg-white/5 hover:bg-white/10 text-white font-bold flex items-center justify-center gap-2 transition-all">
<span class="material-icons-outlined">share</span>
Share Result
</button>
<button class="w-full sm:w-auto px-8 py-4 rounded-full bg-primary hover:bg-primary-hover text-white font-bold shadow-lg shadow-primary/40 hover:scale-105 transition-all flex items-center justify-center gap-2">
<span class="material-icons-outlined">play_arrow</span>
Play Next Quiz
</button>
</div>
</div>
</main>
<footer class="bg-[#080412] border-t border-white/5 py-8 mt-auto">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2 text-gray-400">
<span class="material-icons-outlined">sports_esports</span>
<span class="text-sm font-medium">QuizQuest © 2023</span>
</div>
<div class="flex items-center gap-8">
<a class="text-sm text-gray-500 hover:text-white transition-colors" href="#">Privacy</a>
<a class="text-sm text-gray-500 hover:text-white transition-colors" href="#">Terms</a>
<a class="text-sm text-gray-500 hover:text-white transition-colors" href="#">Support</a>
</div>
</div>
</footer>
</body></html>