<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Quiz Result Celebration - QuizQuest</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&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"/>
<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",
},
animation: {
'bounce-slow': 'bounce 3s infinite',
'confetti': 'confetti 5s ease-in-out infinite',
'pulse-glow': 'pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'float': 'float 6s ease-in-out infinite',
},
keyframes: {
'pulse-glow': {
'0%, 100%': { opacity: 1, boxShadow: '0 0 20px rgba(109, 40, 217, 0.5)' },
'50%': { opacity: .8, boxShadow: '0 0 40px rgba(109, 40, 217, 0.8)' },
},
float: {
'0%': { transform: 'translateY(0px)' },
'50%': { transform: 'translateY(-20px)' },
'100%': { transform: 'translateY(0px)' },
}
}
},
},
};
// Force dark mode for this specific celebration screen as requested
document.documentElement.classList.add('dark');
</script>
<style>
.gradient-text {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(to right, #FBBF24, #F59E0B);
}.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.particle {
position: absolute;
border-radius: 50%;
background: rgba(251, 191, 36, 0.6);
animation: rise 10s infinite ease-in;
}
.particle:nth-child(1) { width: 4px; height: 4px; left: 10%; animation-duration: 8s; animation-delay: 0s; }
.particle:nth-child(2) { width: 6px; height: 6px; left: 20%; animation-duration: 12s; animation-delay: 2s; background: rgba(109, 40, 217, 0.6); }
.particle:nth-child(3) { width: 3px; height: 3px; left: 30%; animation-duration: 7s; animation-delay: 4s; }
.particle:nth-child(4) { width: 8px; height: 8px; left: 40%; animation-duration: 15s; animation-delay: 1s; background: rgba(59, 130, 246, 0.6); }
.particle:nth-child(5) { width: 5px; height: 5px; left: 50%; animation-duration: 9s; animation-delay: 3s; }
.particle:nth-child(6) { width: 4px; height: 4px; left: 60%; animation-duration: 11s; animation-delay: 5s; background: rgba(236, 72, 153, 0.6); }
.particle:nth-child(7) { width: 7px; height: 7px; left: 70%; animation-duration: 13s; animation-delay: 2s; }
.particle:nth-child(8) { width: 3px; height: 3px; left: 80%; animation-duration: 6s; animation-delay: 6s; background: rgba(16, 185, 129, 0.6); }
.particle:nth-child(9) { width: 6px; height: 6px; left: 90%; animation-duration: 10s; animation-delay: 1s; }
@keyframes rise {
0% { transform: translateY(100vh) scale(0); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}
.glass-card {
background: rgba(30, 27, 46, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body class="bg-background-dark text-white font-sans min-h-screen overflow-hidden flex flex-col relative">
<div class="particles">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
<div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 bg-primary opacity-20 blur-[128px] rounded-full pointer-events-none"></div>
<div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 bg-blue-600 opacity-20 blur-[128px] rounded-full pointer-events-none"></div>
<nav class="w-full z-50 bg-transparent border-b border-gray-800/50 backdrop-blur-sm relative">
<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="flex items-center gap-4">
<div class="hidden sm:flex items-center gap-2 bg-surface-dark-2 rounded-full px-4 py-1.5 border border-gray-700">
<span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
<span class="text-sm font-medium text-gray-300">Live Results</span>
</div>
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 p-[2px]">
<img alt="User" class="w-full h-full rounded-full border-2 border-surface-dark" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAa9jjqsXT911qfZWJ8pdz0sFHaZ_PQRx-cysKYz2bqwLXoEHjYv6JeU55fEy17DaQ2iPcHFLQnTSjB0e4co85F_tNFSGycmmsiexaopq9c3wp10vmG-k2VotDpKNKAxUG_p4xNYoP77pcjEE3P23p2f2VFWlTEJ3DOP6z2oxTkzdWcf1Z6hDwDTRYzMYX8lVE8cFnMryrX8_Zqy_N6L0dJxCPQXKS0ESYmMuDH5eFaoFZ_lTEzATmP_HwWbImFjYJ5CBtw63_k"/>
</div>
</div>
</div>
</div>
</nav>
<main class="flex-grow flex items-center justify-center p-4 relative z-10">
<div class="w-full max-w-4xl mx-auto">
<div class="text-center mb-8 relative">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-32 bg-primary/20 blur-3xl rounded-full -z-10"></div>
<span class="material-symbols-outlined text-6xl text-yellow-400 mb-2 animate-bounce-slow drop-shadow-[0_0_15px_rgba(251,191,36,0.6)]">
emoji_events
</span>
<h1 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-2">
<span class="gradient-text">Victory!</span>
</h1>
<p class="text-xl text-gray-300 font-medium">You crushed the <span class="text-primary font-bold">Tech Titans</span> quiz!</p>
</div>
<div class="glass-card rounded-3xl p-8 md:p-12 shadow-2xl relative overflow-hidden mb-8">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary to-transparent opacity-50"></div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 text-center relative z-10">
<div class="space-y-2 group">
<p class="text-gray-400 uppercase text-xs font-bold tracking-widest mb-2">Your Rank</p>
<div class="relative inline-block">
<div class="text-5xl md:text-6xl font-black text-white group-hover:scale-110 transition-transform duration-300">
#42
</div>
<div class="absolute -top-4 -right-6 bg-green-500/20 text-green-400 text-xs px-2 py-0.5 rounded border border-green-500/30 flex items-center gap-1">
<span class="material-symbols-outlined text-[12px]">arrow_upward</span> Top 5%
</div>
</div>
<p class="text-sm text-gray-500">Out of 2,450 players</p>
</div>
<div class="space-y-2 relative">
<div class="hidden md:block absolute top-1/2 -left-6 w-[1px] h-16 bg-gray-700 -translate-y-1/2"></div>
<div class="hidden md:block absolute top-1/2 -right-6 w-[1px] h-16 bg-gray-700 -translate-y-1/2"></div>
<p class="text-gray-400 uppercase text-xs font-bold tracking-widest mb-2">Total Score</p>
<div class="text-5xl md:text-6xl font-black text-primary drop-shadow-[0_0_10px_rgba(109,40,217,0.5)]">
9,850
</div>
<div class="flex items-center justify-center gap-2 text-sm text-gray-400">
<span class="material-symbols-outlined text-green-400 text-base">check_circle</span> 18/20 Correct
</div>
</div>
<div class="space-y-2 group">
<p class="text-gray-400 uppercase text-xs font-bold tracking-widest mb-2">XP Earned</p>
<div class="flex items-center justify-center gap-1 group-hover:scale-110 transition-transform duration-300">
<span class="text-yellow-400 text-3xl">+</span>
<div class="text-5xl md:text-6xl font-black text-white">
450
</div>
<span class="text-xl text-yellow-500 font-bold self-end mb-2">XP</span>
</div>
<div class="w-full bg-gray-700 h-1.5 rounded-full mt-3 overflow-hidden">
<div class="bg-gradient-to-r from-yellow-400 to-orange-500 h-full w-[75%] shadow-[0_0_10px_rgba(245,158,11,0.5)]"></div>
</div>
<p class="text-xs text-gray-500 mt-1">Level 12 Progress</p>
</div>
</div>
<div class="mt-10 pt-8 border-t border-gray-700/50 flex flex-col md:flex-row items-center justify-center gap-4">
<div class="flex -space-x-3">
<img alt="" class="w-10 h-10 rounded-full border-2 border-surface-dark" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCOdIBThSkb1bwM3P99w4GuKQgJYXbnaDKQd4nGb7uUq6onp64s-688zhUM2ShID7gylw4wt7GDnBRaDbShL0J71fI4sjM1QGRLINW6LKAW1ALnXkNNmbSlfN7aoTa7LjPglSVDUlBltlUy5SGcgcvA1YmH81bgYy-Q-w11v9DBo6T42VfrQ83nwB82kRzx0T9w7N7hV224eJ64TEFJvlSgvLS83bWCit7GfDI8FlsGGhKM9QG4g18xfhWYR2CjMS3foHlwICvb"/>
<img alt="" class="w-10 h-10 rounded-full border-2 border-surface-dark" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDS5MgJFAlgGk_fBiNFHc0FYBzNIeYX9Gs6hI-Qb33pap2IgHSpwumcO7_zlEBrbkKYDCLSbmCEj-Pc2IrAeGufg_UER-LW1UICRmpk8hSt9y0mkwToC9dICUvyokyAwsoqptkXhN8rJuA3Ll9D9DWBFvbO5wzce60lV6LqAtBpJq2rauCBJ-r5eEhNeBvGaMdonIlZ2Y485Iu9fXeV4faqo0FK_Ck-Ax-6s1_JVdr4l4nHXoOfU_gx4q6-wui8FIt8MTklTVoQ"/>
<img alt="" class="w-10 h-10 rounded-full border-2 border-surface-dark" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCimfenb67GVmBomOpf-KeFPLcz98MRrC3Jz_h2uDrTejq2aqyFFy0NkWYf9CcIrfcW7Tco26mq49D_cZ8bew00WHLdc4BM3lpmpgorHw9jOhNbZZwZiVuJtcpyM2U-TXC51-Xgf7fKwQ7ZZzIMeFztODzxVc0BHnuHUt0nhYAfBYpequYPuVe7SPznof9rwCrGTSXX_dwEf7c2e0QGaDx68mWKknU6hrY89xx6kl9KCrEtZB6k1EkRKYiJAM_r9g9KCiQ_1_Dl"/>
<div class="w-10 h-10 rounded-full border-2 border-surface-dark bg-gray-700 text-xs flex items-center justify-center text-white font-bold">+2k</div>
</div>
<p class="text-sm text-gray-400">Players just finished this quiz.</p>
</div>
</div>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 w-full">
<button class="w-full sm:w-auto bg-surface-dark-2 hover:bg-surface-dark border border-gray-700 text-white px-8 py-4 rounded-xl font-bold text-lg transition flex items-center justify-center gap-3 group">
<span class="material-symbols-outlined text-gray-400 group-hover:text-white transition">analytics</span>
View Analysis
</button>
<button class="w-full sm:w-auto bg-primary hover:bg-purple-700 text-white px-10 py-4 rounded-xl font-bold text-lg shadow-lg shadow-purple-900/40 transition hover:-translate-y-1 hover:shadow-purple-900/60 flex items-center justify-center gap-3 animate-pulse-glow">
<span class="material-symbols-outlined">share</span>
Share to Socials
</button>
<button class="w-full sm:w-auto bg-surface-dark-2 hover:bg-surface-dark border border-gray-700 text-white px-8 py-4 rounded-xl font-bold text-lg transition flex items-center justify-center gap-3 group">
Next Quiz
<span class="material-symbols-outlined text-gray-400 group-hover:translate-x-1 transition">arrow_forward</span>
</button>
</div>
</div>
</main>
<footer class="py-6 text-center text-gray-600 text-sm relative z-10">
<p>QuizQuest © 2023. Keep playing, keep winning.</p>
</footer>
</body></html>