feat: refresh UI and add sidebar navigation

2026-06-10 18:16:46 +07:00
parent c4157cec8d
commit d85d066f6c
14 changed files with 1636 additions and 603 deletions
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
 <html lang="id" data-theme="light">
+
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>WebGIS Miskin & Ibadah</title>
+    <title>WebGIS Pemetaan Kemiskinan</title>

    <!-- Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
@@ -16,19 +17,31 @@
    <!-- Plus Jakarta Sans Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
-    
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
+        rel="stylesheet">
+
    <style>
        * {
            font-family: 'Plus Jakarta Sans', sans-serif;
        }
+
        body {
            font-weight: 500;
        }
-        h1, h2, h3, h4, h5, h6, .btn, .card-title, .stat-value {
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        .btn,
+        .card-title,
+        .stat-value {
            font-weight: 700 !important;
            letter-spacing: -0.02em;
        }
+
        #bgMap {
            position: fixed;
            top: 0;
@@ -39,11 +52,13 @@
            opacity: 0.5;
            filter: saturate(1.2) brightness(0.7);
        }
+
        .hero {
            position: relative;
            z-index: 10;
            background: transparent !important;
        }
+
        /* Glass effect for content */
        .hero-content {
            background: rgba(255, 255, 255, 0.7);
@@ -53,14 +68,16 @@
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
+
        [data-theme="dark"] .hero-content {
            background: rgba(15, 23, 42, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
    </style>
 </head>
+
 <body class="min-h-screen bg-base-200 flex flex-col items-center justify-center overflow-hidden">
-    
+
    <!-- Background Map -->
    <div id="bgMap"></div>

@@ -68,9 +85,9 @@
        <div class="hero-content text-center flex-col gap-2">
            <!-- Logo -->
            <div class="text-7xl mb-2">🏘️</div>
-            <h1 class="text-4xl font-bold tracking-tight text-primary">WebGIS Miskin & Ibadah</h1>
+            <h1 class="text-4xl font-bold tracking-tight text-primary">WebGIS Pemetaan Kemiskinan</h1>
            <p class="max-w-md text-base-content/60 mt-2 mb-6 leading-relaxed">
-                Sistem Informasi Geografis untuk pemetaan rumah ibadah dan 
+                Sistem Informasi Geografis untuk pemetaan rumah ibadah dan
                analisis sebaran keluarga kurang mampu.
            </p>

@@ -99,7 +116,7 @@
        let val = 0;
        const bar = document.getElementById('redirectProgress');
        const tick = setInterval(() => {
-            val += 100 / 50; 
+            val += 100 / 50;
            bar.value = val;
            if (val >= 100) clearInterval(tick);
        }, 100);
@@ -133,7 +150,7 @@
            fetch('api/get_miskin.php').then(r => r.json())
        ]).then(([ibadah, miskin]) => {
            const markers = [];
-            
+
            ibadah.forEach(item => {
                L.circleMarker([+item.latitude, +item.longitude], {
                    radius: 7, fillColor: "#22c55e", color: "#fff", weight: 2, opacity: 1, fillOpacity: 0.8
@@ -151,14 +168,15 @@
            if (markers.length) {
                map.fitBounds(markers, { padding: [50, 50] });
            }
-            
+
            // Subtle animation: slow pan
            let lat = map.getCenter().lat;
            setInterval(() => {
                lat += 0.000005;
                map.panTo([lat, map.getCenter().lng], { animate: true, duration: 1 });
            }, 1000);
-        }).catch(() => {});
+        }).catch(() => { });
    </script>
 </body>
-</html>
+
+</html>