67 lines
2.6 KiB
HTML
67 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Offline - DLH DKI Jakarta</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-in {
|
|
animation: fadeIn 0.5s ease-out forwards;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-background text-foreground flex min-h-screen flex-col items-center justify-center p-6 bg-slate-50">
|
|
|
|
<div class="max-w-md w-full space-y-8 text-center animate-in">
|
|
<div class="relative flex justify-center">
|
|
<div class="absolute inset-0 m-auto h-24 w-24 animate-ping rounded-full bg-slate-200 opacity-20"></div>
|
|
|
|
<div class="relative rounded-full bg-white p-6 shadow-sm border border-slate-200">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="text-slate-400">
|
|
<path
|
|
d="M1 1l22 22M16.72 11.06A10.94 10.94 0 0 1 19 12.55M5 12.55a10.94 10.94 0 0 1 5.17-2.39M10.71 5.05A16 16 0 0 1 22.58 9M1.42 9a15.91 15.91 0 0 1 4.7-2.88M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<h1 class="text-3xl font-bold tracking-tight text-slate-900">Koneksi Terputus</h1>
|
|
<p class="text-muted-foreground text-slate-500">
|
|
Sepertinya perangkatmu sedang tidak terhubung ke internet. Silakan cek koneksi Wi-Fi atau data seluler
|
|
kamu.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="pt-4">
|
|
<button onclick="window.location.reload()"
|
|
class="inline-flex h-10 items-center justify-center rounded-md bg-slate-900 px-8 text-sm font-medium text-slate-50 hover:bg-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 transition-colors shadow-lg">
|
|
Coba Lagi
|
|
</button>
|
|
</div>
|
|
|
|
<div class="pt-12 flex flex-col items-center gap-2 opacity-60">
|
|
<div class="h-1 w-12 bg-slate-300 rounded-full"></div>
|
|
<p class="text-xs font-semibold tracking-widest uppercase text-slate-400">DLH DKI Jakarta</p>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html> |