<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Live Arena</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></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/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#7C3AED", // Violet-600
"primary-hover": "#6D28D9", // Violet-700
"accent-yellow": "#FACC15", // Yellow-400
"background-dark": "#0F0720", // Very dark purple/black
"card-dark": "#1A1033", // Dark purple card bg
"card-darker": "#120824",
"text-light": "#F3F4F6", // Gray-100
"glass-dark": "rgba(255, 255, 255, 0.05)",
},
fontFamily: {
sans: ["Inter", "sans-serif"],
display: ["Outfit", "sans-serif"],
},
animation: {
'pulse-fast': 'pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'spin-slow': 'spin 12s linear infinite',
'float': 'float 6s ease-in-out infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
}
},
backgroundImage: {
'hero-gradient': 'radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.2) 0%, rgba(15, 7, 32, 0) 60%)',
'card-gradient': 'linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%)',
}
},
},
};
</script>
<style type="text/tailwindcss">
:root {
--primary-color: #7C3AED;
}
.quiz-option:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
}
.timer-ring circle {
transition: stroke-dashoffset 1s linear;
}
.leaderboard-item:hover {
background: rgba(255, 255, 255, 0.05);
}
</style>
</head>
<body class="bg-background-dark text-text-light font-sans h-screen overflow-hidden flex flex-col">
<div class="fixed inset-0 pointer-events-none z-0">
<div class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/20 rounded-full blur-[100px] animate-float"></div>
<div class="absolute bottom-[-10%] right-[-10%] w-[30%] h-[30%] bg-blue-600/20 rounded-full blur-[80px] animate-float" style="animation-delay: 2s;"></div>
<div class="absolute top-[20%] right-[10%] w-32 h-32 border border-white/5 rounded-full animate-spin-slow"></div>
<div class="absolute bottom-[20%] left-[10%] w-48 h-48 border border-white/5 rotate-45 animate-pulse"></div>
</div>
<header class="relative z-50 h-16 border-b border-white/10 bg-background-dark/80 backdrop-blur-md flex items-center justify-between px-6 lg:px-8">
<div class="flex items-center gap-3">
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center shadow-lg shadow-primary/40">
<span class="material-symbols-outlined text-white text-lg">sports_esports</span>
</div>
<h1 class="font-display font-bold text-lg tracking-tight text-white">Tech Titans Championship</h1>
<span class="px-2 py-0.5 rounded text-[10px] font-bold bg-red-500/20 text-red-400 border border-red-500/30 ml-2 animate-pulse">LIVE</span>
</div>
<div class="flex items-center gap-4">
<div class="hidden md:flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/5 border border-white/10">
<span class="w-2 h-2 rounded-full bg-green-500"></span>
<span class="text-xs text-gray-400 font-medium">Stable Connection</span>
</div>
<button class="flex items-center gap-2 px-4 py-2 rounded-full bg-red-500/10 hover:bg-red-500/20 text-red-500 text-sm font-semibold transition-colors border border-red-500/20">
<span class="material-symbols-outlined text-lg">logout</span>
Quit
</button>
</div>
</header>
<main class="relative z-10 flex-1 grid grid-cols-12 gap-0 lg:gap-6 p-4 lg:p-6 overflow-hidden max-w-[1600px] mx-auto w-full">
<aside class="hidden lg:flex col-span-3 flex-col bg-card-darker/50 border border-white/5 rounded-2xl overflow-hidden backdrop-blur-sm h-full">
<div class="p-4 border-b border-white/5 bg-white/5">
<h3 class="font-display font-bold text-white flex items-center gap-2">
<span class="material-symbols-outlined text-accent-yellow">leaderboard</span>
Live Leaderboard
</h3>
</div>
<div class="flex-1 overflow-y-auto p-2 space-y-1 custom-scrollbar">
<div class="leaderboard-item flex items-center justify-between p-3 rounded-xl border border-transparent transition-all">
<div class="flex items-center gap-3">
<span class="text-accent-yellow font-bold font-mono text-lg w-6">01</span>
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-yellow-400 to-orange-600 p-[1px]">
<img alt="User" class="w-full h-full rounded-full" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAs-Ex04i8ah5uo7dV87qNKTNllFt7JRx1bizavIxhKM67umvYg20M_rrDtri03FiXEAsLATEPKMlJZ2gKUSmwEfH4wbuFtcxX2m0GyFxM4FVDMv-i7rKnvJ0IzUGwvSTbiNxtmwcAIdlvBVZGuVs0EfmjKO45WFXShGuiMWaw0gk-jEFGfm987FAMmEQEmfOA1g-0yiK_J3F2oRvIMnO0NhTA9jH0jpl2I0F00_Hkx7ZOdpoUWrE1f6GxR6jLLgtwiNN-Qvm89CRU"/>
</div>
<span class="font-medium text-sm">AlexKnights</span>
</div>
<span class="font-mono text-accent-yellow font-bold">4,250</span>
</div>
<div class="leaderboard-item flex items-center justify-between p-3 rounded-xl border border-transparent transition-all">
<div class="flex items-center gap-3">
<span class="text-gray-300 font-bold font-mono text-lg w-6">02</span>
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-300 to-gray-500 p-[1px]">
<img alt="User" class="w-full h-full rounded-full" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAKT5l07R_GPpOCsy6PAG7pm-JI-ytCWJYR8yCAvrgRAf_T-0ghGlzdRw1QxnIY4xq7KbeY5oSOs4bc2faXj6AaToA7XyNyQU2UBU2XKtuPd8Pz-HZ_Il9_ukWXkchn3lK3LUXQJGyB6rPNRjtW9Mln38hTa_ulKKmqarLwP9qQJ3OlYZxOUbfG3xO6vLnx89NuJ94-EHpryob1VURj9YaCkr47kRN8bfrSuuwdx5qQFZRs2PV5SCthSHsonbLy3udkOkGTogo2jEE"/>
</div>
<span class="font-medium text-sm">Sarah_J</span>
</div>
<span class="font-mono text-white font-bold">4,100</span>
</div>
<div class="leaderboard-item flex items-center justify-between p-3 rounded-xl border border-transparent transition-all">
<div class="flex items-center gap-3">
<span class="text-orange-400 font-bold font-mono text-lg w-6">03</span>
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-orange-400 to-orange-700 p-[1px]">
<img alt="User" class="w-full h-full rounded-full" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCKJZFxUs9k5U-YLxZ8UMo7PsuKDIQPQ5Yrm8vlxfs7dBVPFDwh3JfFXRegl2hIHxb6Rlyp9omLy2ShyJNL-VD_AjwufAhDHEqnftmTTGYSQQtWJIxPUNrnC-lgcDDx7eOyPeLZAo3zRREQZ-WAzppRXhy78aTgdromaoGrj2PHvKzuLZrU1UITm_PcQkdWv2WWQZbrF6-QLUFJ6wPEK9R195BcBjx-62ifbZvG2Pc5Vt1u1K3lpfRMfRMSlkkqS76FlUry5B9UjNM"/>
</div>
<span class="font-medium text-sm">MikeRo</span>
</div>
<span class="font-mono text-white font-bold">3,980</span>
</div>
<div class="leaderboard-item flex items-center justify-between p-3 rounded-xl border border-transparent transition-all opacity-60">
<div class="flex items-center gap-3">
<span class="text-gray-500 font-bold font-mono text-lg w-6">04</span>
<div class="w-8 h-8 rounded-full bg-white/10">
<img alt="User" class="w-full h-full rounded-full" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCOEz-H-FiC9R57yh0jG3H7BRe2d6Z--NtwKc5bPQODwWj6Cfzhm1V0Tqjx4qMEbE8JpD9o3t0kjsU4ceVoswapnSQ6CwrJyZBi1Wf_gvt4MUB5cFOKtKcoCxbh8YGMCpE7s1iGO1g8rdBenJ8Iv1hhKzjT8tYEjtfHbKovpSXKAwbm_GrZhAr2YlZTv8mK9uAzkkJ-M8Hs2tegcZgqNy3ocm89vTwByWHSxpFOVhKTz7XB9SzZbQqHsR2z8ddp5VjePiDQRppO5hk"/>
</div>
<span class="font-medium text-sm">ProGamer99</span>
</div>
<span class="font-mono text-gray-400 font-bold">3,850</span>
</div>
<div class="leaderboard-item flex items-center justify-between p-3 rounded-xl border border-transparent transition-all opacity-60">
<div class="flex items-center gap-3">
<span class="text-gray-500 font-bold font-mono text-lg w-6">05</span>
<div class="w-8 h-8 rounded-full bg-white/10">
<img alt="User" class="w-full h-full rounded-full" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAB0BfWasABy1L-iMl2IzawUxXRfhk53yHAOf4-Pd7D5OsTJ56YdSuNzZmxeO-dRHr0Q9B9gERAYGPtPeivWgKa7pBi7MEWeblUfL0t3rCp2BRJv9ARHiPzmo0bpS8dyTPONzczf44OAlvD2aN1mxiJ1bTDJzJoLAZJcmiwKlfKv2MJ09O1Rb7Oo9puTHS853JzmPtYvcYt8ok4jJ6G8F9S94nk-7zNO10OAvVP3J55TETn-QdXi8CSaZ2THCfgkGagNju4qi-xuzM"/>
</div>
<span class="font-medium text-sm">LizzyWiz</span>
</div>
<span class="font-mono text-gray-400 font-bold">3,720</span>
</div>
</div>
<div class="mt-auto p-4 bg-primary/10 border-t border-primary/20 backdrop-blur-md">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<span class="text-white font-bold font-mono text-lg w-6">12</span>
<div class="w-10 h-10 rounded-full border-2 border-primary">
<img alt="User" class="w-full h-full rounded-full" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBIP6WduEQdkgbOlaMM_IDAanvTlqEQJSBe7wK7WDtWNojp2Ac6bHJdO55xjwyUYo2uQMMLhiqBd_S0biN5zC-1aVYklPXeYrvRxI6y1U4oHxO5WECDZjULCptSoWW8reNFleyIyRgdV5fWi6T1oHQOH-JmtMuPReIhc2Yz3tXZwRrzBnA8o0hFEjWzz4zNNGitQ8JjDVc1yFT_ca2fUIBfVeZ-HsmBrRLr2cCUcMQ-Nb_1BoVKv44l_T0T3ihwHiO-NoEAiXIvdWA"/>
</div>
<div class="flex flex-col">
<span class="font-bold text-sm text-white">You</span>
<span class="text-xs text-primary-300">Keep pushing!</span>
</div>
</div>
<span class="font-mono text-primary-300 font-bold text-lg">2,450</span>
</div>
</div>
</aside>
<section class="col-span-12 lg:col-span-7 flex flex-col justify-center h-full relative">
<div class="lg:absolute lg:-top-12 lg:left-1/2 lg:-translate-x-1/2 flex justify-center mb-6 lg:mb-0 z-20">
<div class="relative w-24 h-24 lg:w-28 lg:h-28 flex items-center justify-center bg-background-dark rounded-full border-4 border-card-darker shadow-2xl shadow-primary/20">
<svg class="absolute top-0 left-0 w-full h-full transform -rotate-90 timer-ring" viewBox="0 0 100 100">
<circle cx="50" cy="50" fill="none" r="45" stroke="#333" stroke-width="6"></circle>
<circle class="text-primary" cx="50" cy="50" fill="none" r="45" stroke="#7C3AED" stroke-dasharray="283" stroke-dashoffset="70" stroke-linecap="round" stroke-width="6"></circle>
</svg>
<div class="text-center">
<span class="block text-3xl font-bold font-mono text-white leading-none">15</span>
<span class="text-[10px] text-gray-400 uppercase tracking-widest font-bold">Sec</span>
</div>
</div>
</div>
<div class="bg-card-dark border border-white/10 rounded-3xl p-6 lg:p-10 shadow-2xl relative overflow-hidden group">
<div class="absolute -inset-1 bg-gradient-to-r from-primary via-purple-500 to-blue-500 rounded-3xl blur opacity-20 group-hover:opacity-30 transition duration-1000"></div>
<div class="relative z-10 flex flex-col h-full">
<div class="mb-8 lg:mb-12 text-center mt-4 lg:mt-8">
<span class="inline-block px-3 py-1 bg-white/5 rounded-full text-xs font-medium text-gray-400 mb-4 border border-white/5">Science & Technology</span>
<h2 class="font-display text-2xl md:text-3xl lg:text-4xl font-bold leading-snug text-white">
What is the primary function of the Large Hadron Collider (LHC) located at CERN?
</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 w-full">
<button class="quiz-option group relative overflow-hidden bg-white/5 hover:bg-white/10 border border-white/10 hover:border-primary/50 rounded-xl p-4 lg:p-6 text-left transition-all duration-300">
<div class="absolute inset-0 bg-primary/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
<div class="relative flex items-center gap-4">
<div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center font-bold text-gray-400 group-hover:bg-primary group-hover:text-white transition-colors">A</div>
<span class="text-base lg:text-lg font-medium text-gray-200 group-hover:text-white">To generate electricity</span>
</div>
</button>
<button class="quiz-option group relative overflow-hidden bg-white/5 hover:bg-white/10 border border-white/10 hover:border-primary/50 rounded-xl p-4 lg:p-6 text-left transition-all duration-300">
<div class="absolute inset-0 bg-primary/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
<div class="relative flex items-center gap-4">
<div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center font-bold text-gray-400 group-hover:bg-primary group-hover:text-white transition-colors">B</div>
<span class="text-base lg:text-lg font-medium text-gray-200 group-hover:text-white">To study particle physics</span>
</div>
</button>
<button class="quiz-option group relative overflow-hidden bg-white/5 hover:bg-white/10 border border-white/10 hover:border-primary/50 rounded-xl p-4 lg:p-6 text-left transition-all duration-300">
<div class="absolute inset-0 bg-primary/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
<div class="relative flex items-center gap-4">
<div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center font-bold text-gray-400 group-hover:bg-primary group-hover:text-white transition-colors">C</div>
<span class="text-base lg:text-lg font-medium text-gray-200 group-hover:text-white">To explore deep space</span>
</div>
</button>
<button class="quiz-option group relative overflow-hidden bg-white/5 hover:bg-white/10 border border-white/10 hover:border-primary/50 rounded-xl p-4 lg:p-6 text-left transition-all duration-300">
<div class="absolute inset-0 bg-primary/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
<div class="relative flex items-center gap-4">
<div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center font-bold text-gray-400 group-hover:bg-primary group-hover:text-white transition-colors">D</div>
<span class="text-base lg:text-lg font-medium text-gray-200 group-hover:text-white">To create black holes</span>
</div>
</button>
</div>
</div>
</div>
</section>
<aside class="hidden lg:flex col-span-2 flex-col justify-center pl-6 gap-6">
<div class="bg-card-darker/80 border border-white/10 rounded-2xl p-6 backdrop-blur-md relative overflow-hidden">
<div class="absolute top-0 right-0 w-20 h-20 bg-primary/20 rounded-full blur-2xl -mr-10 -mt-10"></div>
<h4 class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-2">Question</h4>
<div class="flex items-baseline gap-1">
<span class="text-4xl font-display font-bold text-white">08</span>
<span class="text-xl text-gray-500 font-medium">/ 20</span>
</div>
<div class="w-full h-1.5 bg-gray-800 rounded-full mt-4 overflow-hidden">
<div class="h-full bg-gradient-to-r from-primary to-purple-400 w-[40%] rounded-full shadow-[0_0_10px_rgba(124,58,237,0.5)]"></div>
</div>
</div>
<div class="bg-gradient-to-br from-yellow-500/10 to-transparent border border-yellow-500/20 rounded-2xl p-6 backdrop-blur-md relative overflow-hidden group">
<div class="absolute inset-0 bg-yellow-500/5 group-hover:bg-yellow-500/10 transition-colors"></div>
<div class="relative z-10 text-center">
<div class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-yellow-500/20 text-yellow-400 mb-2">
<span class="material-symbols-outlined">bolt</span>
</div>
<h4 class="text-xs font-bold text-yellow-200 uppercase tracking-widest mb-1">Streak Bonus</h4>
<div class="text-4xl font-display font-black text-transparent bg-clip-text bg-gradient-to-b from-yellow-300 to-yellow-600 drop-shadow-sm">
1.5x
</div>
<p class="text-[10px] text-yellow-200/60 mt-2">Answer correctly to maintain!</p>
</div>
</div>
<div class="bg-card-darker/80 border border-white/10 rounded-2xl p-6 backdrop-blur-md text-center">
<h4 class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-2">Score</h4>
<div class="text-2xl font-mono font-bold text-white">2,450</div>
<div class="flex items-center justify-center gap-1 mt-1 text-green-400 text-xs font-bold">
<span class="material-symbols-outlined text-sm">arrow_upward</span>
+150
</div>
</div>
</aside>
<div class="lg:hidden fixed bottom-0 left-0 w-full bg-card-darker/90 border-t border-white/10 backdrop-blur-xl p-4 flex justify-between items-center z-50">
<div class="flex flex-col">
<span class="text-[10px] text-gray-400 uppercase">Rank</span>
<span class="font-bold text-white">#12</span>
</div>
<div class="flex flex-col items-center">
<span class="text-[10px] text-gray-400 uppercase">Streak</span>
<span class="font-bold text-yellow-400">1.5x</span>
</div>
<div class="flex flex-col items-end">
<span class="text-[10px] text-gray-400 uppercase">Score</span>
<span class="font-bold text-white">2,450</span>
</div>
</div>
</main>
</body></html>