<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lagi Beres-Beres Bentar! 🛠️</title>
<!-- Tailwind CSS untuk styling -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap" rel="stylesheet">
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<style>
body {
font-family: 'Poppins', sans-serif;
/* Background gradient yang asyik dan kekinian */
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
height: 100vh;
margin: 0;
overflow: hidden;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Efek kaca (Glassmorphism) */
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
/* Animasi Kopi / Wrench */
.bounce-slow {
animation: bounceSlow 3s infinite ease-in-out;
}
@keyframes bounceSlow {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
/* Animasi titik-titik loading */
.loading-dots::after {
content: '.';
animation: dots 2s steps(4, end) infinite;
}
@keyframes dots {
0%, 20% { content: '.'; }
40% { content: '..'; }
60% { content: '...'; }
80%, 100% { content: ''; }
}
</style>
</head>
<body class="flex items-center justify-center text-white px-4">
<!-- Container Utama -->
<div class="glass-card rounded-3xl p-8 md:p-12 max-w-2xl w-full text-center relative overflow-hidden">
<!-- Elemen Dekorasi Background -->
<div class="absolute -top-10 -right-10 w-32 h-32 bg-white opacity-10 rounded-full blur-2xl"></div>
<div class="absolute -bottom-10 -left-10 w-40 h-40 bg-pink-500 opacity-20 rounded-full blur-2xl"></div>
<!-- Ikon Utama -->
<div class="flex justify-center mb-6">
<div class="bg-white/20 p-5 rounded-full bounce-slow shadow-lg border border-white/30">
<!-- Ganti ikon di sini (misal pakai kopi biar santai) -->
<i data-lucide="coffee" class="w-16 h-16 text-white"></i>
</div>
</div>
<!-- Teks Utama -->
<h1 class="text-4xl md:text-5xl font-extrabold mb-4 tracking-tight drop-shadow-md">
Santuy, Lagi<br><span class="text-yellow-300">Ganti Oli</span> Nih! 🚀
</h1>
<!-- Deskripsi Asyik -->
<p class="text-lg md:text-xl font-medium mb-8 text-white/90 leading-relaxed">
Sabar ya bosku! Servernya lagi kita pijet-pijet dikit biar makin sat-set dan anti lelet.
Mending kamu bikin kopi dulu, ngemil gorengan, bentar lagi kita ngudara lagi kok<span class="loading-dots"></span>
</p>
<!-- Progress Bar Bohongan (Biar kelihatan ada progress) -->
<div class="w-full bg-white/20 rounded-full h-3 mb-8 overflow-hidden border border-white/30">
<div class="bg-gradient-to-r from-yellow-300 to-green-400 h-3 rounded-full relative" style="width: 75%">
<!-- Animasi kilap di dalam progress bar -->
<div class="absolute top-0 left-0 bottom-0 right-0 bg-white/30 w-full animate-pulse"></div>
</div>
</div>
<!-- Dekorasi Pengganti Sosmed -->
<div class="border-t border-white/20 pt-6 mt-6 flex flex-col items-center">
<p class="text-sm text-white/80 mb-4 font-light italic">"Orang sabar disayang server."</p>
<!-- Badge Status dengan animasi pulse -->
<div class="relative flex items-center justify-center gap-3 px-6 py-2.5 bg-white/10 rounded-full border border-white/20 shadow-sm backdrop-blur-sm">
<div class="relative flex h-3 w-3">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-300 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-green-400"></span>
</div>
<span class="text-sm font-semibold tracking-wide text-white/90">Status: Sedang Dirapihkan ✨</span>
</div>
</div>
</div>
<!-- Script untuk render ikon -->
<script>
lucide.createIcons();
</script>
</body>
</html>