<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Live Game</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
fontFamily: {
sans: ['Space Grotesk', 'sans-serif'],
display: ['Space Grotesk', 'sans-serif'],
},
colors: {
primary: "#6D28D9", // A vibrant purple similar to the reference
secondary: "#FACC15", // Gold/Yellow for highlights
"background-light": "#F3F4F6",
"background-dark": "#0B0A16", // Deep dark purple/black background
"surface-dark": "#161525", // Slightly lighter for cards
"surface-light": "#FFFFFF",
"glow-purple": "#8B5CF6",
},
borderRadius: {
DEFAULT: "0.75rem",
'xl': '1rem',
'2xl': '1.5rem',
},
boxShadow: {
'glow': '0 0 20px rgba(139, 92, 246, 0.5)',
'glow-gold': '0 0 15px rgba(250, 204, 21, 0.4)',
}
},
},
};
</script>
<style>@keyframes pulse-ring {
0% { transform: scale(0.8); opacity: 0.5; }
100% { transform: scale(1.3); opacity: 0; }
}
.timer-ring::before {
content: '';
position: absolute;
left: -5px; top: -5px; right: -5px; bottom: -5px;
border-radius: 50%;
border: 2px solid #FACC15;
animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.answer-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px -5px rgba(109, 40, 217, 0.5);
}
.bg-mesh {
background-color: #0B0A16;
background-image:
radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%),
radial-gradient(at 50% 0%, hsla(265,83%,38%,0.15) 0, transparent 50%),
radial-gradient(at 100% 0%, hsla(339,49%,30%,0.1) 0, transparent 50%);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-gray-900 dark:text-white font-sans min-h-screen flex flex-col transition-colors duration-300">
<div class="fixed inset-0 bg-mesh -z-10 dark:block hidden"></div>
<div class="fixed inset-0 bg-gradient-to-br from-indigo-50 to-white -z-10 block dark:hidden"></div>
<header class="w-full px-6 py-4 border-b border-gray-200 dark:border-white/10 flex justify-between items-center backdrop-blur-md sticky top-0 z-50">
<div class="flex items-center gap-2">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white shadow-lg">
<span class="material-icons-round">sports_esports</span>
</div>
<span class="text-xl font-bold tracking-tight">QuizQuest</span>
</div>
<div class="flex items-center gap-6">
<div class="hidden md:flex items-center gap-2 px-4 py-2 bg-surface-light dark:bg-white/5 rounded-full border border-gray-200 dark:border-white/10">
<span class="material-icons-round text-secondary text-sm">emoji_events</span>
<span class="text-sm font-medium">Rank #452</span>
</div>
<div class="flex items-center gap-2 px-4 py-2 bg-surface-light dark:bg-white/5 rounded-full border border-gray-200 dark:border-white/10">
<span class="material-icons-round text-green-400 text-sm">payments</span>
<span class="text-sm font-medium">Pot: ₹5 Lakhs</span>
</div>
<div class="w-10 h-10 rounded-full bg-gradient-to-tr from-purple-500 to-pink-500 p-[2px]">
<img alt="User Avatar" class="rounded-full w-full h-full object-cover border-2 border-background-dark" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCtdVkZSzupvxyZPWOgXCUPkanSLVfAoSXNeUzrXaEBF7QBC0jHU7NH5P-db4tSqLuXgGxWxdkvYj7LqJFkM5pcPqbdAYI6-S7IyawVqbJAM4ZkDMJj_gsWmPGAh4I3Wg8iHuO1mdyVZO-ONDrvxu0Wr3he14d6Ja8MgcBOMuAljjB1hfhxaQaZRuYijmfKd9w2suqw1YSTtX-JkWhnBKxVxRh8JAIEVdaVX_Db8rRUOVsQ2WYyENQy7f__PFqz3--v_WRPcpmQyZi0"/>
</div>
</div>
</header>
<main class="flex-grow flex flex-col lg:flex-row w-full max-w-7xl mx-auto p-4 lg:p-8 gap-6 lg:gap-8">
<aside class="hidden lg:flex flex-col w-64 gap-6 shrink-0">
<div class="bg-white dark:bg-surface-dark rounded-2xl p-5 border border-gray-200 dark:border-white/5 shadow-lg flex flex-col gap-4">
<h3 class="text-sm font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">Fastest Fingers</h3>
<div class="space-y-3">
<div class="flex items-center justify-between group cursor-pointer">
<div class="flex items-center gap-3">
<span class="text-xs font-bold text-secondary">#1</span>
<div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400 text-xs font-bold">JD</div>
<span class="text-sm font-medium">J. Doe</span>
</div>
<span class="text-xs text-green-400 font-mono">0.4s</span>
</div>
<div class="flex items-center justify-between group cursor-pointer opacity-80">
<div class="flex items-center gap-3">
<span class="text-xs font-bold text-gray-400">#2</span>
<div class="w-8 h-8 rounded-full bg-pink-500/20 flex items-center justify-center text-pink-400 text-xs font-bold">AK</div>
<span class="text-sm font-medium">A. Kumar</span>
</div>
<span class="text-xs text-green-400 font-mono">0.6s</span>
</div>
<div class="flex items-center justify-between group cursor-pointer opacity-60">
<div class="flex items-center gap-3">
<span class="text-xs font-bold text-gray-400">#3</span>
<div class="w-8 h-8 rounded-full bg-orange-500/20 flex items-center justify-center text-orange-400 text-xs font-bold">SR</div>
<span class="text-sm font-medium">S. Rao</span>
</div>
<span class="text-xs text-green-400 font-mono">0.9s</span>
</div>
<div class="flex items-center justify-between group cursor-pointer bg-white/5 p-2 rounded-lg -mx-2 border border-secondary/30">
<div class="flex items-center gap-3">
<span class="text-xs font-bold text-secondary">#452</span>
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white text-xs font-bold">ME</div>
<span class="text-sm font-medium">You</span>
</div>
<span class="text-xs text-gray-400 font-mono">--</span>
</div>
</div>
</div>
<div class="bg-gradient-to-b from-primary/20 to-transparent rounded-2xl p-5 border border-primary/20 text-center">
<span class="text-xs uppercase tracking-widest text-primary font-bold block mb-2">Streak</span>
<div class="text-4xl font-bold text-white mb-1">🔥 5</div>
<p class="text-xs text-gray-400">Correct Answers</p>
</div>
</aside>
<section class="flex-grow flex flex-col justify-center items-center relative">
<div class="relative mb-8 w-24 h-24 flex items-center justify-center">
<svg class="w-full h-full -rotate-90" viewBox="0 0 100 100">
<circle class="text-gray-200 dark:text-white/10" cx="50" cy="50" fill="none" r="45" stroke="currentColor" stroke-width="8"></circle>
<circle class="text-secondary drop-shadow-[0_0_10px_rgba(250,204,21,0.6)]" cx="50" cy="50" fill="none" r="45" stroke="currentColor" stroke-dasharray="283" stroke-dashoffset="40" stroke-linecap="round" stroke-width="8"></circle>
</svg>
<div class="absolute inset-0 flex items-center justify-center timer-ring rounded-full">
<span class="text-2xl font-bold text-white">08</span>
</div>
</div>
<div class="w-full max-w-2xl bg-white dark:bg-surface-dark rounded-3xl p-8 shadow-2xl border border-gray-100 dark:border-white/10 relative overflow-hidden z-10">
<div class="absolute -top-20 -right-20 w-64 h-64 bg-primary/20 rounded-full blur-3xl pointer-events-none"></div>
<div class="flex justify-between items-center mb-6">
<span class="px-3 py-1 bg-primary/10 text-primary text-xs font-bold rounded-full uppercase tracking-wider">Question 7/15</span>
<span class="text-gray-400 text-sm flex items-center gap-1"><span class="material-icons-round text-sm">category</span> Technology</span>
</div>
<h1 class="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white leading-tight mb-8 text-center">
Which company recently released the "Vision Pro" spatial computer?
</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<button class="answer-btn group relative overflow-hidden bg-gray-50 dark:bg-white/5 hover:bg-white dark:hover:bg-primary border-2 border-transparent hover:border-primary dark:hover:border-white/20 p-5 rounded-xl text-left transition-all duration-200">
<div class="flex items-center gap-4 relative z-10">
<div class="w-8 h-8 rounded-full bg-gray-200 dark:bg-white/10 group-hover:bg-primary group-hover:text-white flex items-center justify-center font-bold text-gray-500 dark:text-gray-300 transition-colors">A</div>
<span class="text-lg font-medium text-gray-800 dark:text-gray-200 group-hover:text-primary dark:group-hover:text-white">Microsoft</span>
</div>
</button>
<button class="answer-btn group relative overflow-hidden bg-gray-50 dark:bg-white/5 hover:bg-white dark:hover:bg-primary border-2 border-transparent hover:border-primary dark:hover:border-white/20 p-5 rounded-xl text-left transition-all duration-200">
<div class="flex items-center gap-4 relative z-10">
<div class="w-8 h-8 rounded-full bg-gray-200 dark:bg-white/10 group-hover:bg-primary group-hover:text-white flex items-center justify-center font-bold text-gray-500 dark:text-gray-300 transition-colors">B</div>
<span class="text-lg font-medium text-gray-800 dark:text-gray-200 group-hover:text-primary dark:group-hover:text-white">Meta</span>
</div>
</button>
<button class="answer-btn group relative overflow-hidden bg-gray-50 dark:bg-white/5 hover:bg-white dark:hover:bg-primary border-2 border-transparent hover:border-primary dark:hover:border-white/20 p-5 rounded-xl text-left transition-all duration-200">
<div class="flex items-center gap-4 relative z-10">
<div class="w-8 h-8 rounded-full bg-gray-200 dark:bg-white/10 group-hover:bg-primary group-hover:text-white flex items-center justify-center font-bold text-gray-500 dark:text-gray-300 transition-colors">C</div>
<span class="text-lg font-medium text-gray-800 dark:text-gray-200 group-hover:text-primary dark:group-hover:text-white">Apple</span>
</div>
</button>
<button class="answer-btn group relative overflow-hidden bg-gray-50 dark:bg-white/5 hover:bg-white dark:hover:bg-primary border-2 border-transparent hover:border-primary dark:hover:border-white/20 p-5 rounded-xl text-left transition-all duration-200">
<div class="flex items-center gap-4 relative z-10">
<div class="w-8 h-8 rounded-full bg-gray-200 dark:bg-white/10 group-hover:bg-primary group-hover:text-white flex items-center justify-center font-bold text-gray-500 dark:text-gray-300 transition-colors">D</div>
<span class="text-lg font-medium text-gray-800 dark:text-gray-200 group-hover:text-primary dark:group-hover:text-white">Google</span>
</div>
</button>
</div>
<div class="mt-8 flex justify-center gap-4">
<button class="flex flex-col items-center gap-1 group opacity-50 hover:opacity-100 transition-opacity" title="50/50">
<div class="w-12 h-12 rounded-full border border-gray-300 dark:border-white/20 flex items-center justify-center group-hover:bg-white/10 group-hover:border-secondary transition-colors">
<span class="text-xs font-bold text-gray-500 dark:text-gray-300">50:50</span>
</div>
<span class="text-[10px] uppercase text-gray-500 font-bold">Halve</span>
</button>
<button class="flex flex-col items-center gap-1 group hover:scale-105 transition-transform" title="Freeze Time">
<div class="w-12 h-12 rounded-full border border-secondary bg-secondary/10 flex items-center justify-center shadow-glow-gold">
<span class="material-icons-round text-secondary text-lg">ac_unit</span>
</div>
<span class="text-[10px] uppercase text-secondary font-bold">Freeze</span>
</button>
<button class="flex flex-col items-center gap-1 group opacity-100 hover:scale-105 transition-transform" title="Poll Audience">
<div class="w-12 h-12 rounded-full border border-gray-300 dark:border-white/20 flex items-center justify-center group-hover:bg-white/10 group-hover:border-blue-400 transition-colors">
<span class="material-icons-round text-gray-500 dark:text-gray-300 text-lg group-hover:text-blue-400">poll</span>
</div>
<span class="text-[10px] uppercase text-gray-500 font-bold">Poll</span>
</button>
</div>
</div>
<div class="lg:hidden mt-8 w-full max-w-2xl grid grid-cols-2 gap-4">
<div class="bg-surface-dark rounded-xl p-4 border border-white/5 flex items-center justify-between">
<span class="text-sm text-gray-400">Current Prize</span>
<span class="text-lg font-bold text-secondary">₹1,000</span>
</div>
<div class="bg-surface-dark rounded-xl p-4 border border-white/5 flex items-center justify-between">
<span class="text-sm text-gray-400">Next Safe</span>
<span class="text-lg font-bold text-white">Q10</span>
</div>
</div>
</section>
<aside class="hidden lg:flex flex-col w-64 shrink-0">
<div class="bg-white dark:bg-surface-dark rounded-2xl p-5 border border-gray-200 dark:border-white/5 shadow-lg h-full max-h-[600px] flex flex-col">
<h3 class="text-sm font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-4 text-center">Prize Ladder</h3>
<div class="flex-grow flex flex-col-reverse justify-end gap-1 overflow-y-auto pr-2 custom-scrollbar">
<div class="flex items-center justify-between px-3 py-2 rounded text-gray-400 text-sm">
<span>1.</span>
<span>₹100</span>
</div>
<div class="flex items-center justify-between px-3 py-2 rounded text-gray-400 text-sm">
<span>2.</span>
<span>₹200</span>
</div>
<div class="flex items-center justify-between px-3 py-2 rounded text-gray-400 text-sm">
<span>3.</span>
<span>₹300</span>
</div>
<div class="flex items-center justify-between px-3 py-2 rounded text-gray-400 text-sm">
<span>4.</span>
<span>₹500</span>
</div>
<div class="flex items-center justify-between px-3 py-2 rounded bg-white/5 border border-white/10 text-white font-bold text-sm">
<span>5.</span>
<span class="text-white">₹1,000</span>
</div>
<div class="flex items-center justify-between px-3 py-2 rounded text-gray-400 text-sm">
<span>6.</span>
<span>₹2,000</span>
</div>
<div class="flex items-center justify-between px-3 py-2 rounded bg-primary text-white font-bold text-sm shadow-lg transform scale-105 my-1 relative overflow-hidden">
<div class="absolute inset-0 bg-white/20 animate-pulse"></div>
<span class="relative z-10">7.</span>
<span class="relative z-10">₹4,000</span>
</div>
<div class="flex items-center justify-between px-3 py-2 rounded text-gray-300 text-sm opacity-60">
<span>8.</span>
<span>₹8,000</span>
</div>
<div class="flex items-center justify-between px-3 py-2 rounded text-gray-300 text-sm opacity-60">
<span>9.</span>
<span>₹16,000</span>
</div>
<div class="flex items-center justify-between px-3 py-2 rounded bg-white/5 border border-secondary/30 text-secondary font-bold text-sm opacity-60">
<span>10.</span>
<span>₹32,000</span>
</div>
<div class="flex items-center justify-between px-3 py-2 rounded text-gray-300 text-sm opacity-50">
<span>11.</span>
<span>₹64,000</span>
</div>
<div class="flex items-center justify-between px-3 py-2 rounded text-gray-300 text-sm opacity-50">
<span>12.</span>
<span>₹1,25,000</span>
</div>
<div class="flex items-center justify-between px-3 py-2 rounded text-gray-300 text-sm opacity-40">
<span>13.</span>
<span>₹2,50,000</span>
</div>
<div class="flex items-center justify-between px-3 py-2 rounded text-gray-300 text-sm opacity-40">
<span>14.</span>
<span>₹5,00,000</span>
</div>
<div class="flex items-center justify-between px-3 py-2 rounded bg-gradient-to-r from-yellow-600 to-yellow-400 text-white font-bold text-sm opacity-40">
<span>15.</span>
<span>₹1 Crore</span>
</div>
</div>
</div>
</aside>
</main>
<footer class="w-full py-4 border-t border-gray-200 dark:border-white/10 text-center text-xs text-gray-500 dark:text-gray-400 bg-white/50 dark:bg-black/20 backdrop-blur-sm">
<p>Live Quest ID: #882910 • Stable Connection <span class="w-2 h-2 inline-block bg-green-500 rounded-full ml-1 animate-pulse"></span></p>
</footer>
</body></html>