<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Quest Update - Coming Soon</title>
<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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#8c25f4",
"primary-dark": "#701bc4",
"background-light": "#f7f5f8",
"background-dark": "#191022",
"card-dark": "#231530",
"text-light": "#e2d9f3",
"text-muted": "#ab9cba",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"],
"sans": ["Space Grotesk", "sans-serif"]
},
borderRadius: {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"2xl": "1rem",
"full": "9999px"
},
backgroundImage: {
'grid-pattern': "url(\"data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%238c25f4' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E\")",
}
},
},
}
</script>
<style>
body {
font-family: "Space Grotesk", sans-serif;
}
.neon-glow {
text-shadow: 0 0 10px rgba(140, 37, 244, 0.5), 0 0 20px rgba(140, 37, 244, 0.3);
}
.box-glow {
box-shadow: 0 0 20px -5px rgba(140, 37, 244, 0.3);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen flex flex-col font-display selection:bg-primary selection:text-white">
<!-- Background Pattern Overlay -->
<div class="fixed inset-0 pointer-events-none z-0 bg-grid-pattern opacity-50"></div>
<!-- Gradient Overlay for depth -->
<div class="fixed inset-0 pointer-events-none z-0 bg-gradient-to-b from-transparent via-background-dark/50 to-background-dark"></div>
<div class="relative z-10 flex flex-col min-h-screen w-full">
<!-- Header -->
<header class="w-full border-b border-white/5 bg-background-dark/80 backdrop-blur-md px-6 py-4 flex items-center justify-between sticky top-0 z-50">
<div class="flex items-center gap-3">
<div class="size-8 rounded bg-gradient-to-br from-primary to-primary-dark flex items-center justify-center text-white shadow-lg shadow-primary/30">
<span class="material-symbols-outlined text-xl">bolt</span>
</div>
<h2 class="text-white text-xl font-bold tracking-tight">Quest Portal</h2>
</div>
<div class="flex items-center gap-4">
<a class="hidden sm:flex items-center gap-2 text-text-muted hover:text-white transition-colors text-sm font-medium" href="#">
<span class="material-symbols-outlined text-[20px]">help</span>
<span>Support</span>
</a>
<button class="flex cursor-pointer items-center justify-center overflow-hidden rounded-lg h-9 px-4 bg-white/10 hover:bg-white/20 text-white text-sm font-bold transition-all border border-white/5">
Login
</button>
</div>
</header>
<!-- Main Content -->
<main class="flex-grow flex flex-col items-center justify-center px-4 py-12 w-full max-w-7xl mx-auto">
<div class="w-full flex flex-col lg:flex-row items-center justify-between gap-12 lg:gap-20">
<!-- Left Column: Illustration -->
<div class="w-full lg:w-1/2 flex justify-center items-center relative order-2 lg:order-1">
<!-- Glow effect behind image -->
<div class="absolute inset-0 bg-primary/20 blur-[100px] rounded-full scale-75"></div>
<div class="relative w-full aspect-square max-w-[500px] rounded-2xl overflow-hidden border border-white/10 box-glow bg-card-dark flex items-center justify-center group">
<!-- Simulated 3D Robot / Construction Scene -->
<img alt="Abstract 3D neon robot mascot working on construction with glowing purple lights" class="w-full h-full object-cover opacity-90 transition-transform duration-700 group-hover:scale-105" data-alt="Futuristic 3D robot mascot working on maintenance" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDzuO4TTXdB9And67UkXux9bH96X1__RVG7HMcaF7yCyCehPaZCnuiWoLmUcrDok3UjePHOQ604eyQ5G4NhPJXnJX9VHJOFcudeMk_iIfEGegecDgOXOzIAeUSktrvNxa-BtSXQF4er5Kt5F7l-EiVe1pOERdZ7ktgGOpO6j-0HLL89mby8fdh7V6OvGWvu01GMGBhB7KG5oLg3ypFSB96onUfMUaIsZvHnlemJ8nXF4r4g0PiuAsI60HY6j6pwda6Iqlk0hwvDMu0"/>
<div class="absolute bottom-6 left-6 right-6 bg-background-dark/90 backdrop-blur-sm p-4 rounded-xl border border-white/10">
<div class="flex items-center gap-3 mb-2">
<div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
<span class="text-xs font-bold uppercase tracking-widest text-text-muted">System Status</span>
</div>
<div class="w-full bg-white/10 rounded-full h-2 overflow-hidden">
<div class="bg-primary h-full rounded-full w-[72%] shadow-[0_0_10px_rgba(140,37,244,0.6)]"></div>
</div>
<div class="flex justify-between mt-2 text-xs text-text-muted">
<span>Deploying Update v2.4</span>
<span class="text-white font-mono">72%</span>
</div>
</div>
</div>
</div>
<!-- Right Column: Content -->
<div class="w-full lg:w-1/2 flex flex-col items-center lg:items-start text-center lg:text-left gap-8 order-1 lg:order-2">
<div class="space-y-4">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-wider">
<span class="material-symbols-outlined text-sm animate-spin">settings</span>
Maintenance in progress
</div>
<h1 class="text-5xl sm:text-6xl md:text-7xl font-black text-white leading-[0.9] tracking-tight">
The Quest is <br/>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-white neon-glow">Upgrading</span>
</h1>
<p class="text-text-muted text-lg sm:text-xl max-w-lg mx-auto lg:mx-0 font-light">
We're crafting new challenges to test your skills. The portal is currently undergoing maintenance to bring you a better, faster, and more epic experience.
</p>
</div>
<!-- Countdown Timer -->
<div class="w-full">
<p class="text-sm text-text-muted font-medium mb-4 uppercase tracking-widest text-center lg:text-left">Estimated Completion</p>
<div class="grid grid-cols-4 gap-3 sm:gap-4 max-w-md mx-auto lg:mx-0">
<div class="bg-card-dark border border-white/10 rounded-xl p-3 flex flex-col items-center justify-center aspect-[4/5] sm:aspect-square box-glow">
<span class="text-2xl sm:text-4xl font-bold text-white">02</span>
<span class="text-[10px] sm:text-xs text-text-muted uppercase mt-1">Days</span>
</div>
<div class="bg-card-dark border border-white/10 rounded-xl p-3 flex flex-col items-center justify-center aspect-[4/5] sm:aspect-square box-glow">
<span class="text-2xl sm:text-4xl font-bold text-white">14</span>
<span class="text-[10px] sm:text-xs text-text-muted uppercase mt-1">Hours</span>
</div>
<div class="bg-card-dark border border-white/10 rounded-xl p-3 flex flex-col items-center justify-center aspect-[4/5] sm:aspect-square box-glow">
<span class="text-2xl sm:text-4xl font-bold text-white">35</span>
<span class="text-[10px] sm:text-xs text-text-muted uppercase mt-1">Mins</span>
</div>
<div class="bg-card-dark border border-white/10 rounded-xl p-3 flex flex-col items-center justify-center aspect-[4/5] sm:aspect-square box-glow bg-primary/5 border-primary/30">
<span class="text-2xl sm:text-4xl font-bold text-primary">10</span>
<span class="text-[10px] sm:text-xs text-primary/80 uppercase mt-1">Secs</span>
</div>
</div>
</div>
<!-- Notify Form -->
<div class="w-full max-w-md mx-auto lg:mx-0">
<label class="block text-sm font-medium text-white mb-2">Get notified when we're back</label>
<div class="flex shadow-lg shadow-primary/10 rounded-lg overflow-hidden group focus-within:ring-2 focus-within:ring-primary/50 transition-all">
<div class="bg-card-dark border-y border-l border-white/10 pl-4 pr-3 flex items-center text-text-muted group-focus-within:border-primary/50">
<span class="material-symbols-outlined text-[20px]">mail</span>
</div>
<input class="bg-card-dark border-y border-r-0 border-l-0 border-white/10 text-white placeholder:text-text-muted/50 py-3.5 w-full focus:ring-0 focus:outline-0 group-focus-within:border-primary/50 text-base" placeholder="Enter your email address" type="email"/>
<button class="bg-primary hover:bg-primary-dark text-white px-6 font-bold text-sm tracking-wide transition-colors flex items-center gap-2 whitespace-nowrap">
Notify Me
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
</button>
</div>
<p class="text-xs text-text-muted mt-3 flex items-center gap-1.5 justify-center lg:justify-start">
<span class="material-symbols-outlined text-[14px] text-green-500">check_circle</span>
We promise not to spam your inbox.
</p>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="w-full border-t border-white/5 bg-background-dark/50 px-6 py-8 mt-auto z-10">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex flex-col md:flex-row items-center gap-6">
<span class="text-text-muted text-sm">© 2024 Quest Portal.</span>
<div class="flex gap-6">
<a class="text-text-muted hover:text-white text-sm transition-colors" href="#">Support Center</a>
<a class="text-text-muted hover:text-white text-sm transition-colors" href="#">Status Page</a>
</div>
</div>
<div class="flex items-center gap-4">
<a class="size-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center text-text-muted hover:text-white transition-all border border-white/5" href="#">
<span class="sr-only">Discord</span>
<!-- Custom SVG for Discord as it's not in Material Symbols -->
<svg aria-hidden="true" class="size-5" fill="currentColor" viewbox="0 0 24 24">
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.419-2.1568 2.419zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.419-2.1568 2.419z"></path>
</svg>
</a>
<a class="size-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center text-text-muted hover:text-white transition-all border border-white/5" href="#">
<span class="sr-only">Twitter</span>
<!-- Custom SVG for X/Twitter -->
<svg aria-hidden="true" class="size-4" fill="currentColor" viewbox="0 0 24 24">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
</svg>
</a>
<a class="size-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center text-text-muted hover:text-white transition-all border border-white/5" href="#">
<span class="sr-only">Instagram</span>
<svg aria-hidden="true" class="size-5" fill="currentColor" viewbox="0 0 24 24">
<path clip-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.416 4.48c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" fill-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
</footer>
</div>
</body></html>