<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Live Quiz Play Session</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","accent": "#FACC15","background-dark": "#0B0A10",
"surface-dark": "#161420",
"surface-highlight": "#242033",
"correct": "#10B981",
"wrong": "#EF4444"
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
boxShadow: {
'neon': '0 0 20px rgba(139, 92, 246, 0.5)',
'neon-gold': '0 0 20px rgba(250, 204, 21, 0.4)',
'card-glow': '0 0 40px rgba(109, 40, 217, 0.2)'
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "1.5rem",
"xl": "2.5rem",
"full": "9999px"
},
animation: {
'pulse-glow': 'pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'float': 'float 3s ease-in-out infinite'
},
keyframes: {
'pulse-glow': {
'0%, 100%': { opacity: 1, boxShadow: '0 0 20px rgba(139, 92, 246, 0.5)' },
'50%': { opacity: .9, boxShadow: '0 0 30px rgba(139, 92, 246, 0.8)' },
},
'float': {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-5px)' },
}
}
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
background: #0B0A10;
}.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.bg-grid-pattern {
background-image: linear-gradient(to right, #242033 1px, transparent 1px),
linear-gradient(to bottom, #242033 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(circle at center, black, transparent 80%);
}
</style>
</head>
<body class="bg-background-dark text-slate-100 antialiased overflow-hidden h-screen w-full relative">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-primary/20 rounded-full blur-[120px] pointer-events-none z-0"></div>
<div class="flex h-screen w-full overflow-hidden relative z-10">
<aside class="hidden w-64 flex-col border-r border-surface-highlight bg-surface-dark/50 backdrop-blur-sm p-6 lg:flex z-20">
<div class="flex items-center gap-3 px-2 mb-8">
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-primary to-purple-800 text-white shadow-neon">
<span class="material-symbols-outlined">stadia_controller</span>
</div>
<h1 class="text-xl font-bold leading-tight text-white tracking-wide">QuizPortal</h1>
</div>
<div class="flex-1 flex flex-col justify-center">
<h3 class="text-xs font-bold uppercase text-slate-400 tracking-wider mb-4 px-2">Prize Ladder</h3>
<div class="flex flex-col-reverse gap-2">
<div class="group flex items-center justify-between p-3 rounded-lg border border-surface-highlight bg-surface-dark/30 hover:bg-surface-highlight/50 transition-all opacity-40">
<span class="text-sm font-bold text-slate-400">15</span>
<span class="text-sm font-bold text-accent">$1,000,000</span>
</div>
<div class="group flex items-center justify-between p-3 rounded-lg border border-surface-highlight bg-surface-dark/30 hover:bg-surface-highlight/50 transition-all opacity-60">
<span class="text-sm font-bold text-slate-400">10</span>
<span class="text-sm font-bold text-accent">$25,000</span>
</div>
<div class="group flex items-center justify-between p-3 rounded-lg border border-accent/50 bg-gradient-to-r from-accent/20 to-transparent shadow-neon-gold transition-all transform scale-105">
<span class="flex h-6 w-6 items-center justify-center rounded-full bg-accent text-black text-xs font-bold">9</span>
<span class="text-lg font-black text-white drop-shadow-md">$16,000</span>
</div>
<div class="group flex items-center justify-between p-3 rounded-lg border border-surface-highlight bg-surface-dark/30 hover:bg-surface-highlight/50 transition-all text-slate-300">
<span class="text-sm font-bold text-slate-500">8</span>
<span class="text-sm font-bold text-slate-300">$8,000</span>
</div>
<div class="group flex items-center justify-between p-3 rounded-lg border border-surface-highlight bg-surface-dark/30 hover:bg-surface-highlight/50 transition-all text-slate-300">
<span class="text-sm font-bold text-slate-500">7</span>
<span class="text-sm font-bold text-slate-300">$4,000</span>
</div>
<div class="group flex items-center justify-between p-3 rounded-lg border border-primary/50 bg-primary/10 transition-all text-primary-glow">
<span class="text-sm font-bold">Safe House</span>
<span class="material-symbols-outlined text-[16px]">lock</span>
</div>
</div>
</div>
<div class="mt-6 pt-6 border-t border-surface-highlight">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 overflow-hidden rounded-full border-2 border-accent">
<img alt="Player Avatar" class="h-full w-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzViL4lc0jczPZTmPDaDclgDRrxY-CoEIhF3LrBitMVCMLnouJJA--yIsKtsNPGtyE4LuMlV4PivDdBDmhCWNkAPTwNpqZHpr1VrBXiZOIQLMV0tqcbN5rlhT8PNPhuitdvbjjJ__KSKmqFbL6C2lgx2_ML9AOeX7zoh0HyaInm8BK6ktedzykYbw63mLopcHpNBH3DhZY7GvRiCGp3eF8zx4jWMXr9ac6huaPlWFvpnlBfg6kuKr1_BJAeuC6YEIKGKuRym9DR1lN"/>
</div>
<div>
<p class="text-sm font-bold text-white">Alex Gamer</p>
<p class="text-xs text-accent">Rank #452</p>
</div>
</div>
</div>
</aside>
<main class="flex flex-1 flex-col relative">
<header class="flex w-full items-center justify-between px-8 py-6">
<div class="flex items-center gap-4">
<div class="px-4 py-1.5 rounded-full bg-surface-highlight border border-white/10 text-xs font-medium text-slate-300 uppercase tracking-widest">
Round 9/15
</div>
<div class="px-4 py-1.5 rounded-full bg-red-500/20 border border-red-500/50 text-xs font-bold text-red-400 uppercase tracking-widest animate-pulse">
Live
</div>
</div>
<div class="absolute left-1/2 top-6 -translate-x-1/2 flex flex-col items-center">
<div class="relative flex items-center justify-center h-20 w-20">
<svg class="h-full w-full -rotate-90 transform" viewBox="0 0 100 100">
<circle class="text-surface-highlight" cx="50" cy="50" fill="transparent" r="40" stroke="currentColor" stroke-width="8"></circle>
<circle class="text-primary-glow transition-all duration-1000 ease-linear" cx="50" cy="50" fill="transparent" r="40" stroke="currentColor" stroke-dasharray="251.2" stroke-dashoffset="60" stroke-linecap="round" stroke-width="8"></circle>
</svg>
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-2xl font-black text-white">14</span>
</div>
</div>
</div>
<div class="flex items-center gap-4">
<div class="text-right">
<p class="text-xs text-slate-400 uppercase tracking-wider font-bold">Total Winnings</p>
<p class="text-xl font-black text-accent drop-shadow-sm">$8,000</p>
</div>
</div>
</header>
<div class="flex-1 flex flex-col items-center justify-center px-6 pb-8 max-w-5xl mx-auto w-full gap-8">
<div class="w-full relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-primary to-purple-600 rounded-2xl blur opacity-40 group-hover:opacity-60 transition duration-1000 group-hover:duration-200"></div>
<div class="relative w-full bg-surface-dark border border-surface-highlight rounded-2xl p-8 md:p-12 text-center shadow-2xl">
<h2 class="text-3xl md:text-4xl font-bold text-white leading-tight">
Which chemical element has the symbol 'K'?
</h2>
<div class="mt-4 flex justify-center gap-2">
<span class="px-3 py-1 bg-surface-highlight rounded text-xs text-slate-400 font-medium">Chemistry</span>
<span class="px-3 py-1 bg-surface-highlight rounded text-xs text-slate-400 font-medium">Science</span>
</div>
</div>
</div>
<div class="w-full grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
<button class="relative group overflow-hidden rounded-xl bg-surface-highlight hover:bg-surface-highlight/80 border border-white/5 p-6 flex items-center gap-4 transition-all duration-200 hover:scale-[1.02] hover:shadow-neon hover:border-primary">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-surface-dark border border-white/10 text-primary font-bold group-hover:bg-primary group-hover:text-white transition-colors">A</div>
<span class="text-lg md:text-xl font-semibold text-slate-200 group-hover:text-white">Krypton</span>
<div class="absolute right-4 opacity-0 group-hover:opacity-100 transition-opacity">
<span class="material-symbols-outlined text-primary-glow">check_circle</span>
</div>
</button>
<button class="relative group overflow-hidden rounded-xl bg-surface-highlight hover:bg-surface-highlight/80 border border-white/5 p-6 flex items-center gap-4 transition-all duration-200 hover:scale-[1.02] hover:shadow-neon-gold hover:border-accent">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-surface-dark border border-white/10 text-accent font-bold group-hover:bg-accent group-hover:text-black transition-colors">B</div>
<span class="text-lg md:text-xl font-semibold text-slate-200 group-hover:text-white">Potassium</span>
<div class="absolute inset-0 border-2 border-accent rounded-xl opacity-0 hover:opacity-100 pointer-events-none"></div>
</button>
<button class="relative group overflow-hidden rounded-xl bg-surface-highlight hover:bg-surface-highlight/80 border border-white/5 p-6 flex items-center gap-4 transition-all duration-200 hover:scale-[1.02] hover:shadow-neon hover:border-primary">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-surface-dark border border-white/10 text-primary font-bold group-hover:bg-primary group-hover:text-white transition-colors">C</div>
<span class="text-lg md:text-xl font-semibold text-slate-200 group-hover:text-white">Kelvin</span>
</button>
<button class="relative group overflow-hidden rounded-xl bg-surface-highlight hover:bg-surface-highlight/80 border border-white/5 p-6 flex items-center gap-4 transition-all duration-200 hover:scale-[1.02] hover:shadow-neon hover:border-primary">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-surface-dark border border-white/10 text-primary font-bold group-hover:bg-primary group-hover:text-white transition-colors">D</div>
<span class="text-lg md:text-xl font-semibold text-slate-200 group-hover:text-white">Karat</span>
</button>
</div>
<div class="flex gap-4 mt-4">
<button class="group flex flex-col items-center gap-2 p-2 opacity-50 hover:opacity-100 transition-opacity" disabled="">
<div class="h-12 w-12 rounded-full border border-surface-highlight bg-surface-highlight flex items-center justify-center text-slate-500">
<span class="text-xs font-bold">50:50</span>
</div>
<span class="text-[10px] uppercase font-bold tracking-widest text-slate-500">Used</span>
</button>
<button class="group flex flex-col items-center gap-2 p-2 hover:scale-110 transition-transform cursor-pointer">
<div class="h-12 w-12 rounded-full border border-cyan-500/50 bg-cyan-900/20 flex items-center justify-center text-cyan-400 shadow-[0_0_10px_rgba(34,211,238,0.3)] animate-pulse">
<span class="material-symbols-outlined text-[20px]">ac_unit</span>
</div>
<span class="text-[10px] uppercase font-bold tracking-widest text-cyan-400">Freeze</span>
</button>
<button class="group flex flex-col items-center gap-2 p-2 hover:scale-110 transition-transform cursor-pointer">
<div class="h-12 w-12 rounded-full border border-primary/50 bg-primary/20 flex items-center justify-center text-primary-glow shadow-[0_0_10px_rgba(139,92,246,0.3)]">
<span class="material-symbols-outlined text-[20px]">poll</span>
</div>
<span class="text-[10px] uppercase font-bold tracking-widest text-primary-glow">Poll</span>
</button>
</div>
</div>
</main>
<aside class="hidden w-72 flex-col border-l border-surface-highlight bg-surface-dark/50 backdrop-blur-sm p-0 xl:flex z-20">
<div class="p-6 border-b border-surface-highlight bg-surface-dark/80">
<div class="flex items-center gap-2 mb-1">
<span class="material-symbols-outlined text-accent animate-bounce">bolt</span>
<h3 class="font-bold text-white uppercase tracking-wider">Fastest Fingers</h3>
</div>
<p class="text-xs text-slate-400">Top players this round</p>
</div>
<div class="flex-1 overflow-y-auto scrollbar-hide p-4 flex flex-col gap-2">
<div class="flex items-center gap-3 p-2 rounded-lg bg-gradient-to-r from-surface-highlight to-transparent border-l-2 border-accent">
<div class="flex-shrink-0 font-bold text-accent w-4">1</div>
<div class="h-8 w-8 overflow-hidden rounded-full border border-accent/30">
<img alt="User" class="h-full w-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB6RuLCmWb95hgO5Is3hiMS0_FVI_JLOq3mJAUXYg7uKBbIPBTmaoF9WxMBSqqQt1cHoRoJZvrY_BVIZIMURAhdyK3rtci_Be7NXoI67-fYV-BXCAZbz8OChqnwnixiAWA6hhV9SaY_wiFaU-hEmkJ5Vrk7ve6y2qCC-ldXdD66bX0P0EMbeTgrg1rHVDexU_orguvgpPp2saemcwl9E3GDtoVAskruFuVhKbnSbqsG1soXQW6rubBXx5qEJx9b1NXaOJA9AvrF3voZ"/>
</div>
<div class="flex-1">
<p class="text-sm font-bold text-white leading-none">MikeChen</p>
<p class="text-[10px] text-green-400 mt-1">0.82s</p>
</div>
<span class="text-xs font-bold text-slate-500">200XP</span>
</div>
<div class="flex items-center gap-3 p-2 rounded-lg bg-surface-highlight/30 hover:bg-surface-highlight/50 transition-colors">
<div class="flex-shrink-0 font-bold text-slate-400 w-4">2</div>
<div class="h-8 w-8 overflow-hidden rounded-full border border-white/10">
<img alt="User" class="h-full w-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAspyNd1K0WlTL9T2hBBlxZ_V1PLtG9Bl1gn7jESEVPOzg5iAZZR9_tBf2nY89WyNBbYoqNnr7wgL97jmY0CwSmQxIRyitYqI13_YqsHvv3-cVzAXJbZTpJ7YG9VH5jtMJDh0kzmqdbqJDJvACnpl2qDhQiNwaaeuyCuf6GAJjQB109IkdWrh3c_XcfSrD4XHb5FWGPFhWqIV2TCJxFd1g_8KsisFsTd4S55IyvuQWMSPv42uFB7B3eH8BvDB71HoZYLy23kFifLdWl"/>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-slate-200 leading-none">Sarah_J</p>
<p class="text-[10px] text-green-400 mt-1">1.04s</p>
</div>
<span class="text-xs font-bold text-slate-600">180XP</span>
</div>
<div class="flex items-center gap-3 p-2 rounded-lg bg-surface-highlight/30 hover:bg-surface-highlight/50 transition-colors">
<div class="flex-shrink-0 font-bold text-slate-400 w-4">3</div>
<div class="h-8 w-8 overflow-hidden rounded-full border border-white/10">
<img alt="User" class="h-full w-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB4BvJeSkFEj5nLJuhlyXRzb7wTEAaLOnCtRiqE94WD36FRVEKBCDFLyVWOIPVSt3Ev85PNh-Y8jNk-6RgPQjLsE4QFzz0744_biTKt5smk1tSDtuhHxj9OJJqeEaJAn_Pxv5de_ipngAatw1o89PbZqS3p-raYQi4mzkZp1ubYCALYdTl1MrZ5o7wHUuujeOzm_dSnAGJ6zNJV-YUoox2G7THWRLAEsN49znJscTyiWCbUAJLt0KpeneJvqebNPT57eYO55h38JhJX"/>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-slate-200 leading-none">JessW</p>
<p class="text-[10px] text-green-400 mt-1">1.15s</p>
</div>
<span class="text-xs font-bold text-slate-600">160XP</span>
</div>
<div class="my-2 border-t border-surface-highlight border-dashed"></div>
<div class="flex items-center gap-3 p-2 rounded-lg bg-primary/10 border border-primary/30">
<div class="flex-shrink-0 font-bold text-primary-glow w-4">12</div>
<div class="h-8 w-8 overflow-hidden rounded-full border border-primary">
<img alt="User" class="h-full w-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzViL4lc0jczPZTmPDaDclgDRrxY-CoEIhF3LrBitMVCMLnouJJA--yIsKtsNPGtyE4LuMlV4PivDdBDmhCWNkAPTwNpqZHpr1VrBXiZOIQLMV0tqcbN5rlhT8PNPhuitdvbjjJ__KSKmqFbL6C2lgx2_ML9AOeX7zoh0HyaInm8BK6ktedzykYbw63mLopcHpNBH3DhZY7GvRiCGp3eF8zx4jWMXr9ac6huaPlWFvpnlBfg6kuKr1_BJAeuC6YEIKGKuRym9DR1lN"/>
</div>
<div class="flex-1">
<p class="text-sm font-bold text-white leading-none">You</p>
<p class="text-[10px] text-slate-400 mt-1">--</p>
</div>
<span class="text-xs font-bold text-slate-600">Pending</span>
</div>
<div class="flex items-center gap-3 p-2 rounded-lg bg-surface-highlight/10 hover:bg-surface-highlight/20 transition-colors opacity-60">
<div class="flex-shrink-0 font-bold text-slate-600 w-4">13</div>
<div class="h-8 w-8 overflow-hidden rounded-full border border-white/5">
<img alt="User" class="h-full w-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAGICbDtuAOyPXGcTlkrOYqYvjPcy4J2GVnFdpILTxS49ufE8g3c5FzYTNUfDbebG7yC2vohf7lkCq_6aw60O1qQV1VJYkJtU2qiXmTqekUZFq5NmtiIohRJ0Ach1bWouse2aPLTwwvX7DtavBnfkw9FfkuWJraxX7XsUIAydE7gQoCM6dsZQNcXzeK6flzwZv2cuIJBBhuybtnpAC2rs2QNWeUBqyO_9nkfDddtjSLhnRy3giJ80TL8dXr7rhdZu24gi4ZRPJqSPzo"/>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-slate-400 leading-none">KevinH</p>
</div>
</div>
</div>
<div class="p-4 bg-surface-highlight/20 border-t border-surface-highlight">
<div class="flex items-center gap-2 text-xs text-slate-400 mb-2">
<span class="h-2 w-2 rounded-full bg-green-500 animate-pulse"></span>
1,240 Players Online
</div>
<div class="h-20 overflow-hidden relative">
<div class="absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-surface-dark to-transparent z-10"></div>
<div class="flex flex-col gap-1.5">
<p class="text-xs text-slate-500"><strong class="text-primary-glow">User88:</strong> Let's go!</p>
<p class="text-xs text-slate-500"><strong class="text-accent">Winner_One:</strong> Hard question...</p>
<p class="text-xs text-slate-500"><strong class="text-blue-400">QuizMaster:</strong> 5 seconds left!</p>
</div>
</div>
</div>
</aside>
</div>
</body></html>