<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>404 - Mission Failed | Quiz Portal</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></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/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": "#2b6cee",
"background-light": "#f6f6f8",
"background-dark": "#101622",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Space Grotesk', sans-serif;
}
.starfield-bg {
background: radial-gradient(circle at center, #1a1f2e 0%, #101622 100%);
position: relative;
overflow: hidden;
}
.starfield-bg::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image:
radial-gradient(1px 1px at 20px 30px, #fff, rgba(0,0,0,0)),
radial-gradient(1px 1px at 40px 70px, #fff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 50px 160px, #2b6cee, rgba(0,0,0,0)),
radial-gradient(1px 1px at 90px 40px, #fff, rgba(0,0,0,0)),
radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
radial-gradient(1px 1px at 160px 120px, #2b6cee, rgba(0,0,0,0));
background-repeat: repeat;
background-size: 200px 200px;
opacity: 0.3;
}
.glitch-text {
text-shadow: 2px 0 #ff00c1, -2px 0 #00fff9;
}
.glass-panel {
background: rgba(43, 108, 238, 0.05);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 font-display transition-colors duration-300">
<div class="relative flex h-screen w-full flex-col starfield-bg overflow-hidden">
<!-- Top Navigation Bar -->
<header class="z-20 flex items-center justify-between whitespace-nowrap border-b border-solid border-white/10 px-10 py-4 glass-panel mx-10 mt-6 rounded-full">
<div class="flex items-center gap-4">
<div class="text-primary size-8 flex items-center justify-center">
<span class="material-symbols-outlined text-3xl">rocket_launch</span>
</div>
<h2 class="text-slate-100 text-xl font-bold leading-tight tracking-tight">Quiz Portal</h2>
</div>
<div class="flex flex-1 justify-end gap-8 items-center">
<nav class="hidden md:flex items-center gap-9">
<a class="text-slate-300 hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Quizzes</a>
<a class="text-slate-300 hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Leaderboard</a>
<a class="text-slate-300 hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">Missions</a>
</nav>
<div class="h-6 w-px bg-white/10 mx-2"></div>
<button class="flex min-w-[100px] cursor-pointer items-center justify-center rounded-full h-10 px-5 bg-primary/20 border border-primary/50 text-primary text-sm font-bold hover:bg-primary hover:text-white transition-all">
<span>Sign In</span>
</button>
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10 border-2 border-primary/30" data-alt="User profile avatar placeholder" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBBwcibnA_hsve2Ysia7BPohP1gCsCxV2AcYxCJYJ_zFhZYMqVvPdCZXwIWIvgKDdhCpFr-Ho4wHU5SFktvi0-gpVB4XsCE8rUVwSFc4zCIqAj0ngo2eBh4voU_Gz1x_Uv9PdMO49rhaSuAUmO6xRZKi5Z9shOm0qaYLTKK38I9oxcZEaJrENhYQ_A6eb3toseLeKPr4uR6NgfsI6hzwNRGmTXjmkwBE7uf69moNUdJ8uQKJTfU_dFIvnZVLNYHEi3SZnWa_Wr6fJRG");'></div>
</div>
</header>
<!-- Main Content Area -->
<main class="relative flex-1 flex flex-col items-center justify-center px-4 z-10">
<!-- Error Visual Container -->
<div class="relative w-full max-w-4xl flex flex-col items-center">
<!-- 3D Illustration Substitute -->
<div class="relative mb-8 group">
<div class="absolute -inset-1 bg-primary blur-3xl opacity-20 group-hover:opacity-40 transition-opacity"></div>
<div class="relative bg-center bg-no-repeat aspect-square bg-contain rounded-xl w-64 md:w-80" data-alt="Confused 3D astronaut floating in deep space" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBcEPRzNoQqbx-dEgqXVFiGbGDAM_1KCm57rgxjF0t28TCPrFSA8VEXHuPmDeIUTzQ87ZHJ85_dWlWBkb80zQXknI7mAN5kSE7AT0ttxVUaAsUp5WhbRfmXqFuRnsQYWMl8h0RIQgwITvDzZlzeq9yUdnUdbR1JX_6g244set4VP4sESzLW6pltfE2z3LIs8mkJEYr2RPfXmUu-A9PSNcALzKoPCkQXhSdDV46rpCbDnJw8enrN6MakccZP2P77C-COgcX_lfHbL2Qv");'>
</div>
<!-- Warning Overlay -->
<div class="absolute top-0 right-0 bg-red-500/20 border border-red-500/50 backdrop-blur-md p-2 rounded-lg flex items-center gap-2 transform translate-x-4 -translate-y-4">
<span class="material-symbols-outlined text-red-500 animate-pulse text-sm">warning</span>
<span class="text-red-500 text-[10px] font-bold tracking-widest uppercase">Signal Lost</span>
</div>
</div>
<!-- Text Content -->
<div class="text-center space-y-4 max-w-2xl">
<h1 class="glitch-text text-6xl md:text-8xl font-black text-white tracking-tighter mb-2">404</h1>
<h2 class="text-white text-2xl md:text-3xl font-bold uppercase tracking-widest">Error: Mission Failed</h2>
<p class="text-slate-400 text-lg font-medium leading-relaxed">
The coordinates you've requested are outside the known universe.
The signal is dead and the fuel pods are empty. You've drifted too far.
</p>
</div>
<!-- Gamified Stats Row -->
<div class="flex flex-wrap justify-center gap-4 mt-10 w-full">
<div class="flex min-w-[140px] flex-col gap-1 rounded-xl p-4 glass-panel border-white/5">
<p class="text-slate-400 text-xs font-bold uppercase tracking-widest">Oxygen</p>
<div class="flex items-end gap-2">
<p class="text-white text-2xl font-bold leading-tight">04%</p>
<span class="material-symbols-outlined text-red-500 text-sm mb-1">trending_down</span>
</div>
<div class="w-full bg-white/10 h-1 rounded-full mt-2 overflow-hidden">
<div class="bg-red-500 h-full w-[4%]"></div>
</div>
</div>
<div class="flex min-w-[140px] flex-col gap-1 rounded-xl p-4 glass-panel border-white/5">
<p class="text-slate-400 text-xs font-bold uppercase tracking-widest">Fuel Level</p>
<div class="flex items-end gap-2">
<p class="text-white text-2xl font-bold leading-tight">Critical</p>
</div>
<div class="w-full bg-white/10 h-1 rounded-full mt-2 overflow-hidden">
<div class="bg-primary h-full w-[0%]"></div>
</div>
</div>
<div class="flex min-w-[140px] flex-col gap-1 rounded-xl p-4 glass-panel border-white/5">
<p class="text-slate-400 text-xs font-bold uppercase tracking-widest">Coordinates</p>
<p class="text-white text-2xl font-bold leading-tight">Unknown</p>
<p class="text-slate-500 text-[10px] font-mono">X: NULL | Y: NULL</p>
</div>
</div>
<!-- Action Buttons -->
<div class="flex flex-col sm:flex-row gap-4 mt-12 w-full max-w-md">
<button class="flex-1 flex cursor-pointer items-center justify-center rounded-full h-14 px-8 bg-primary text-white text-lg font-bold shadow-[0_0_20px_rgba(43,108,238,0.4)] hover:scale-105 hover:shadow-[0_0_30px_rgba(43,108,238,0.6)] transition-all active:scale-95 group">
<span class="material-symbols-outlined mr-2 group-hover:-translate-x-1 transition-transform">charging_station</span>
<span>Back to Base</span>
</button>
<button class="flex-1 flex cursor-pointer items-center justify-center rounded-full h-14 px-8 bg-white/5 border border-white/10 text-white text-lg font-bold hover:bg-white/10 transition-all active:scale-95">
<span class="material-symbols-outlined mr-2">report</span>
<span>Report Logs</span>
</button>
</div>
</div>
</main>
<!-- Footer Area -->
<footer class="z-20 flex flex-col gap-6 px-10 py-8 text-center glass-panel border-t border-white/5 rounded-t-xl mx-10">
<div class="flex flex-wrap items-center justify-center gap-6 md:justify-between w-full max-w-6xl mx-auto">
<div class="flex gap-8 order-2 md:order-1">
<a class="text-slate-500 hover:text-slate-300 text-sm font-medium transition-colors" href="#">Privacy Protocol</a>
<a class="text-slate-500 hover:text-slate-300 text-sm font-medium transition-colors" href="#">System Terms</a>
<a class="text-slate-500 hover:text-slate-300 text-sm font-medium transition-colors" href="#">Support Uplink</a>
</div>
<div class="flex items-center gap-4 order-1 md:order-2">
<a class="w-10 h-10 flex items-center justify-center rounded-full bg-white/5 text-slate-400 hover:bg-primary/20 hover:text-primary transition-all" href="#">
<span class="material-symbols-outlined text-xl">chat</span>
</a>
<a class="w-10 h-10 flex items-center justify-center rounded-full bg-white/5 text-slate-400 hover:bg-primary/20 hover:text-primary transition-all" href="#">
<span class="material-symbols-outlined text-xl">share</span>
</a>
<a class="w-10 h-10 flex items-center justify-center rounded-full bg-white/5 text-slate-400 hover:bg-primary/20 hover:text-primary transition-all" href="#">
<span class="material-symbols-outlined text-xl">terminal</span>
</a>
</div>
</div>
<div class="w-full border-t border-white/5 pt-6 max-w-6xl mx-auto flex justify-between items-center text-slate-500 text-xs">
<p>© 2024 Galactic Quiz Portal. All systems nominal but unreachable.</p>
<div class="flex items-center gap-2">
<span class="size-2 bg-green-500 rounded-full"></span>
<span class="uppercase tracking-widest font-bold">Base Online</span>
</div>
</div>
</footer>
<!-- Decorative Scanlines Overlay -->
<div class="pointer-events-none fixed inset-0 z-50 opacity-[0.03]" style="background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 4px, 3px 100%;">
</div>
</div>
</body></html>