<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>System Upgrade | Quiz Portal</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<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"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#5b13ec",
"background-light": "#f6f6f8",
"background-dark": "#0a0812",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}
.bg-grid-pattern {
background-image: radial-gradient(circle at 2px 2px, rgba(91, 19, 236, 0.15) 1px, transparent 0);
background-size: 40px 40px;
}
.glow-effect {
box-shadow: 0 0 25px rgba(91, 19, 236, 0.4);
}
.scanline {
width: 100%;
height: 2px;
background: linear-gradient(to right, transparent, rgba(91, 19, 236, 0.5), transparent);
position: absolute;
top: 0;
z-index: 10;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen flex flex-col relative overflow-hidden">
<!-- Background Elements -->
<div class="absolute inset-0 bg-grid-pattern pointer-events-none opacity-50"></div>
<div class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/20 blur-[120px] rounded-full pointer-events-none"></div>
<div class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-primary/10 blur-[120px] rounded-full pointer-events-none"></div>
<!-- Navigation -->
<header class="relative z-20 flex items-center justify-between px-8 py-6 max-w-7xl mx-auto w-full border-b border-primary/10 bg-background-dark/50 backdrop-blur-md">
<div class="flex items-center gap-3">
<div class="p-2 bg-primary rounded-lg text-white">
<span class="material-symbols-outlined text-2xl">bolt</span>
</div>
<h2 class="text-xl font-bold tracking-tight text-slate-100">Quiz Portal</h2>
</div>
<div class="hidden md:flex items-center gap-8">
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-medium" href="#">Home</a>
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-medium" href="#">Leaderboard</a>
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-medium" href="#">Challenges</a>
</div>
<div class="flex items-center gap-4">
<button class="size-10 flex items-center justify-center rounded-full bg-slate-800/50 text-slate-300 hover:bg-primary/20 hover:text-primary transition-all">
<span class="material-symbols-outlined text-xl">notifications</span>
</button>
<div class="h-10 w-10 rounded-full border-2 border-primary overflow-hidden">
<img class="w-full h-full object-cover" data-alt="User avatar profile picture" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAmoVx0oieL6SzTqydUT1DHiWMn5GXwxN8lCeuJPGgdp2U3dstGnnnCZI_AshzSgeo9WHWFEOXnixfTe1f6nvdtDviJ4MStPKbLa4tPNH6mAgL92huIrp8pHQctrMBuxvQkrPBPSlJiDXf-PELFKoZH4wmr5RPCqu_4jHkycAPsJQTqKILCr-WScvRQ5vQNtdDXxOZE93frJ1XZPYZbeY2X8yUXjfmqTOBd077OJdfrAkflqbh3qtgJ9LFBAEYjzfX5Ja053EYKu_Lb"/>
</div>
</div>
</header>
<!-- Main Content -->
<main class="relative z-10 flex-grow flex flex-col items-center justify-center px-4 py-12 text-center max-w-4xl mx-auto">
<!-- Status Badge -->
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary mb-8 font-semibold text-sm">
<span class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-primary"></span>
</span>
SYSTEM CALIBRATION IN PROGRESS
</div>
<!-- Hero Section -->
<div class="relative w-full max-w-lg aspect-square mb-8 group">
<div class="absolute inset-0 bg-primary/20 blur-3xl rounded-full opacity-30 group-hover:opacity-50 transition-opacity"></div>
<!-- Illustration Placeholder -->
<div class="relative z-10 w-full h-full flex items-center justify-center border-2 border-primary/20 rounded-xl bg-slate-900/40 backdrop-blur-xl overflow-hidden glow-effect">
<div class="absolute inset-0 flex flex-col items-center justify-center p-8">
<img class="w-64 h-64 object-contain" data-alt="Futuristic mascot robot repairing a high-tech terminal console" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAC59Gw6SCo2RmGygsxr84weFJ5NJ9iYmULlNSogrBS9AZKaqwGczx4SynFSmPoflkGTRqGJnLLrS_TFwYrNBAL9ljk00Jlabek2OJL0k8Ei9P6ft7RQQ-hMDtqxRaO2WjxprpC1f-jV_FjETWU8w3cO-R6nMgZk_P4g5g_A-rqT8fEupQumXn8LRePimoYq7pJwUho5SE7lQ0nEIovK8M4jCiqfblhHAqyfNIDK0p_KCzv6wDiFLdkRdcDBGe2XW5tdadKmr-2F9i_"/>
<div class="mt-4 flex flex-col items-center gap-2">
<div class="w-48 h-2 bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-primary w-2/3 shadow-[0_0_10px_#5b13ec]"></div>
</div>
<span class="text-xs text-primary font-mono tracking-widest uppercase">Optimizing Core Logic... 67%</span>
</div>
</div>
</div>
</div>
<h1 class="text-4xl md:text-6xl font-bold tracking-tight text-slate-100 mb-6 uppercase">
System Upgrade <span class="text-primary">In Progress</span>
</h1>
<p class="text-lg text-slate-400 max-w-xl mb-12">
Our engineers are recalibrating the core engines to provide you with a smoother, faster experience. We'll be back online in the blink of a neon eye.
</p>
<!-- Countdown Section -->
<div class="w-full bg-slate-900/50 border border-slate-800 p-8 rounded-xl backdrop-blur-sm mb-12">
<h2 class="text-sm font-bold tracking-[0.2em] text-slate-500 uppercase mb-6">Estimated Time to Re-entry</h2>
<div class="flex items-center justify-center gap-4 md:gap-8">
<div class="flex flex-col">
<span class="text-4xl md:text-6xl font-black text-primary font-mono">00</span>
<span class="text-[10px] text-slate-500 font-bold uppercase mt-2">Hours</span>
</div>
<div class="text-4xl md:text-6xl font-black text-slate-700 font-mono">:</div>
<div class="flex flex-col">
<span class="text-4xl md:text-6xl font-black text-primary font-mono">14</span>
<span class="text-[10px] text-slate-500 font-bold uppercase mt-2">Minutes</span>
</div>
<div class="text-4xl md:text-6xl font-black text-slate-700 font-mono">:</div>
<div class="flex flex-col">
<span class="text-4xl md:text-6xl font-black text-primary font-mono">52</span>
<span class="text-[10px] text-slate-500 font-bold uppercase mt-2">Seconds</span>
</div>
</div>
</div>
<!-- Social CTA -->
<div class="flex flex-col md:flex-row items-center gap-6">
<a class="flex items-center gap-3 px-8 py-4 bg-primary text-white font-bold rounded-full hover:brightness-110 transition-all shadow-lg shadow-primary/30" href="https://twitter.com" target="_blank">
<span class="material-symbols-outlined">share</span>
Live Updates on X
</a>
<a class="flex items-center gap-3 px-8 py-4 bg-slate-800 text-slate-100 font-bold rounded-full border border-slate-700 hover:bg-slate-700 transition-all" href="#">
<span class="material-symbols-outlined">forum</span>
Join Community
</a>
</div>
</main>
<!-- Footer -->
<footer class="relative z-20 w-full mt-auto py-8 border-t border-slate-800/50 bg-background-dark/80 backdrop-blur-md">
<div class="max-w-7xl mx-auto px-8 flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-4 text-sm text-slate-500">
<span>© 2024 Quiz Portal. All systems go.</span>
</div>
<div class="flex items-center gap-8">
<a class="text-sm text-slate-400 hover:text-primary transition-colors" href="#">Privacy</a>
<a class="text-sm text-slate-400 hover:text-primary transition-colors" href="#">Support</a>
<a class="text-sm text-slate-400 hover:text-primary transition-colors" href="#">Terms</a>
</div>
<div class="flex items-center gap-4 text-xs font-bold text-emerald-500 uppercase tracking-widest px-3 py-1 bg-emerald-500/10 rounded-full border border-emerald-500/20">
<span class="material-symbols-outlined text-sm">check_circle</span>
Status: Operational
</div>
</div>
</footer>
</body></html>