From 5d3cc007dea6889c45fe6df36bdb1b112c85bdb5 Mon Sep 17 00:00:00 2001
From: L4zyL4mb <paansihkamoe@gmail.com>
Date: Sat, 13 Jun 2026 11:55:17 +0700
Subject: [PATCH] Revisi index.html

---
 index.html | 184 +++++++++++++++++++++++------------------------------
 1 file changed, 81 insertions(+), 103 deletions(-)

diff --git a/index.html b/index.html
index 6b08172..dfe48bd 100644
--- a/index.html
+++ b/index.html
@@ -5,16 +5,12 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Portal WebGIS Pontianak — SIG Hub</title>
   
-  <!-- Modern Typography (Plus Jakarta Sans) -->
   <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:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
-  
-  <!-- Font Awesome CDN for micro-icons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
   <style>
-    /* Design Tokens (Light/Bright Mode) */
     :root {
       --bg-light: hsl(210, 40%, 98%);
       --bg-card: hsla(0, 0%, 100%, 0.8);
@@ -22,26 +18,23 @@
       --text-main: hsl(222, 47%, 12%);
       --text-muted: hsl(215, 15%, 35%);
       --text-dim: hsl(215, 15%, 55%);
-      
-      /* Glowing colors for individual projects (adjusted for light theme readability) */
+
       --color-road-primary: hsl(199, 89%, 42%);
       --color-road-bg: hsla(199, 89%, 42%, 0.08);
-      
+
       --color-spbu-primary: hsl(30, 95%, 45%);
       --color-spbu-bg: hsla(30, 95%, 45%, 0.08);
-      
+
       --color-poverty-primary: hsl(142, 65%, 32%);
       --color-poverty-bg: hsla(142, 65%, 32%, 0.08);
-      
+
+      --color-choropleth-primary: hsl(354, 70%, 40%);
+      --color-choropleth-bg: hsla(354, 70%, 40%, 0.08);
+
       --font-family: 'Plus Jakarta Sans', sans-serif;
     }
 
-    /* Base Styling */
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
     body {
       font-family: var(--font-family);
@@ -56,13 +49,10 @@
       position: relative;
     }
 
-    /* Ambient Background Glows */
     .bg-ambient {
       position: fixed;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
+      top: 0; left: 0;
+      width: 100vw; height: 100vh;
       z-index: -1;
       overflow: hidden;
       pointer-events: none;
@@ -77,39 +67,39 @@
     }
 
     .blob-1 {
-      width: 40vw;
-      height: 40vw;
+      width: 40vw; height: 40vw;
       background: radial-gradient(circle, var(--color-road-primary) 0%, transparent 80%);
-      top: -10%;
-      right: 10%;
+      top: -10%; right: 10%;
       animation-delay: 0s;
     }
 
     .blob-2 {
-      width: 35vw;
-      height: 35vw;
+      width: 35vw; height: 35vw;
       background: radial-gradient(circle, var(--color-poverty-primary) 0%, transparent 80%);
-      bottom: -10%;
-      left: 10%;
+      bottom: -10%; left: 10%;
       animation-delay: -5s;
     }
 
     .blob-3 {
-      width: 30vw;
-      height: 30vw;
+      width: 30vw; height: 30vw;
       background: radial-gradient(circle, var(--color-spbu-primary) 0%, transparent 80%);
-      top: 40%;
-      left: 45%;
+      top: 40%; left: 45%;
       animation-delay: -10s;
     }
 
+    .blob-4 {
+      width: 28vw; height: 28vw;
+      background: radial-gradient(circle, var(--color-choropleth-primary) 0%, transparent 80%);
+      top: 20%; left: 5%;
+      animation-delay: -15s;
+    }
+
     @keyframes float {
-      0% { transform: translate(0, 0) scale(1) rotate(0deg); }
-      50% { transform: translate(6%, 4%) scale(1.05) rotate(180deg); }
+      0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
+      50%  { transform: translate(6%, 4%) scale(1.05) rotate(180deg); }
       100% { transform: translate(-4%, -6%) scale(0.95) rotate(360deg); }
     }
 
-    /* Grid Overlay Pattern */
     .grid-overlay {
       position: fixed;
       inset: 0;
@@ -121,7 +111,6 @@
       pointer-events: none;
     }
 
-    /* Header Panel */
     header {
       width: 100%;
       max-width: 1300px;
@@ -140,8 +129,7 @@
     }
 
     .logo-icon {
-      width: 42px;
-      height: 42px;
+      width: 42px; height: 42px;
       border-radius: 12px;
       background: linear-gradient(135deg, hsl(200, 100%, 45%), hsl(260, 100%, 55%));
       display: flex;
@@ -183,12 +171,11 @@
       font-weight: 600;
       color: var(--text-muted);
       backdrop-filter: blur(10px);
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
+      box-shadow: 0 2px 10px rgba(0,0,0,0.02);
     }
 
     .status-dot {
-      width: 8px;
-      height: 8px;
+      width: 8px; height: 8px;
       border-radius: 50%;
       background-color: hsl(142, 72%, 45%);
       position: relative;
@@ -205,11 +192,10 @@
     }
 
     @keyframes pulse {
-      0% { transform: scale(1); opacity: 1; }
+      0%   { transform: scale(1); opacity: 1; }
       100% { transform: scale(2.2); opacity: 0; }
     }
 
-    /* Main Container */
     main {
       flex: 1;
       width: 100%;
@@ -222,7 +208,6 @@
       z-index: 5;
     }
 
-    /* Hero Section */
     .hero {
       text-align: center;
       margin-bottom: 4rem;
@@ -260,15 +245,13 @@
       line-height: 1.6;
     }
 
-    /* Project Cards Grid */
     .grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
       gap: 2rem;
       margin-bottom: 2rem;
     }
 
-    /* Card Item */
     .card {
       background-color: var(--bg-card);
       border: 1px solid var(--border-color);
@@ -282,21 +265,18 @@
       position: relative;
       overflow: hidden;
       backdrop-filter: blur(12px);
-      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
+      box-shadow: 0 4px 20px rgba(0,0,0,0.02);
       transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
     }
 
-    /* Hover effect */
     .card:hover {
       transform: translateY(-8px);
       background-color: #ffffff;
       border-color: var(--card-hover-border);
-      box-shadow: 
-        0 20px 40px -15px rgba(0, 0, 0, 0.06),
-        0 0 20px -2px var(--card-glow);
+      box-shadow: 0 20px 40px -15px rgba(0,0,0,0.06),
+                  0 0 20px -2px var(--card-glow);
     }
 
-    /* Colors and values specific to each card */
     .card-road {
       --card-theme-color: var(--color-road-primary);
       --card-theme-bg: var(--color-road-bg);
@@ -318,13 +298,18 @@
       --card-glow: hsla(142, 65%, 32%, 0.1);
     }
 
-    /* Card Top Decoration */
+    .card-choropleth {
+      --card-theme-color: var(--color-choropleth-primary);
+      --card-theme-bg: var(--color-choropleth-bg);
+      --card-hover-border: hsla(354, 70%, 40%, 0.3);
+      --card-glow: hsla(354, 70%, 40%, 0.1);
+    }
+
     .card-icon-container {
-      width: 54px;
-      height: 54px;
+      width: 54px; height: 54px;
       border-radius: 16px;
       background-color: var(--card-theme-bg);
-      border: 1px solid rgba(0, 0, 0, 0.02);
+      border: 1px solid rgba(0,0,0,0.02);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -338,9 +323,7 @@
       transform: scale(1.1) rotate(5deg);
     }
 
-    .card-body {
-      margin-bottom: 2.25rem;
-    }
+    .card-body { margin-bottom: 2.25rem; }
 
     .card-title {
       font-size: 1.35rem;
@@ -351,9 +334,7 @@
       transition: color 0.3s ease;
     }
 
-    .card:hover .card-title {
-      color: var(--card-theme-color);
-    }
+    .card:hover .card-title { color: var(--card-theme-color); }
 
     .card-desc {
       font-size: 0.88rem;
@@ -362,7 +343,6 @@
       margin-bottom: 1.5rem;
     }
 
-    /* Badges / Tech tags */
     .tech-tags {
       display: flex;
       flex-wrap: wrap;
@@ -374,12 +354,11 @@
       font-weight: 600;
       color: var(--text-muted);
       background-color: hsla(0, 0%, 0%, 0.03);
-      border: 1px solid rgba(0, 0, 0, 0.04);
+      border: 1px solid rgba(0,0,0,0.04);
       padding: 4px 10px;
       border-radius: 6px;
     }
 
-    /* Card Action Link styles */
     .card-action {
       display: flex;
       align-items: center;
@@ -396,16 +375,13 @@
       transition: color 0.3s ease;
     }
 
-    .card:hover .action-text {
-      color: var(--text-main);
-    }
+    .card:hover .action-text { color: var(--text-main); }
 
     .action-arrow {
-      width: 36px;
-      height: 36px;
+      width: 36px; height: 36px;
       border-radius: 50%;
       background-color: hsla(0, 0%, 0%, 0.03);
-      border: 1px solid rgba(0, 0, 0, 0.04);
+      border: 1px solid rgba(0,0,0,0.04);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -421,7 +397,6 @@
       transform: translateX(4px);
     }
 
-    /* Footer */
     footer {
       width: 100%;
       max-width: 1300px;
@@ -443,11 +418,8 @@
       transition: color 0.2s;
     }
 
-    footer a:hover {
-      color: var(--text-main);
-    }
+    footer a:hover { color: var(--text-main); }
 
-    /* Responsive Design */
     @media (max-width: 768px) {
       header {
         flex-direction: column;
@@ -455,23 +427,17 @@
         text-align: center;
         padding: 1.5rem 1rem;
       }
-      
+
       .status-panel {
         width: 100%;
         justify-content: center;
       }
 
-      main {
-        padding: 1.5rem 1rem;
-      }
+      main { padding: 1.5rem 1rem; }
 
-      .hero h2 {
-        font-size: 2rem;
-      }
+      .hero h2 { font-size: 2rem; }
 
-      .grid {
-        grid-template-columns: 1fr;
-      }
+      .grid { grid-template-columns: 1fr; }
 
       footer {
         flex-direction: column;
@@ -483,15 +449,14 @@
 </head>
 <body>
 
-  <!-- Background decorations -->
   <div class="bg-ambient">
     <div class="blob blob-1"></div>
     <div class="blob blob-2"></div>
     <div class="blob blob-3"></div>
+    <div class="blob blob-4"></div>
   </div>
   <div class="grid-overlay"></div>
 
-  <!-- Header -->
   <header>
     <div class="logo-container">
       <div class="logo-icon">
@@ -502,7 +467,6 @@
         <p>Sistem Informasi Geografis Terintegrasi</p>
       </div>
     </div>
-    
     <div class="status-panel">
       <div class="status-badge">
         <div class="status-dot"></div>
@@ -511,7 +475,6 @@
     </div>
   </header>
 
-  <!-- Main Content -->
   <main>
     <div class="hero">
       <span class="hero-tag">Geographic Information System</span>
@@ -519,9 +482,8 @@
       <p>Akses cepat ke berbagai modul pemetaan interaktif Kota Pontianak. Dibuat menggunakan teknologi web modern dan visualisasi data spasial secara real-time.</p>
     </div>
 
-    <!-- Grid of Projects -->
     <div class="grid">
-      
+
       <!-- Card 1: SIG Jalan & Parsil Tanah -->
       <a href="http://e8kkc4gs80cc8gsg8cs8s8ks.203.24.51.230.sslip.io" class="card card-road">
         <div>
@@ -541,9 +503,7 @@
         </div>
         <div class="card-action">
           <span class="action-text">Buka Aplikasi</span>
-          <div class="action-arrow">
-            <i class="fa-solid fa-arrow-right"></i>
-          </div>
+          <div class="action-arrow"><i class="fa-solid fa-arrow-right"></i></div>
         </div>
       </a>
 
@@ -566,9 +526,7 @@
         </div>
         <div class="card-action">
           <span class="action-text">Buka Aplikasi</span>
-          <div class="action-arrow">
-            <i class="fa-solid fa-arrow-right"></i>
-          </div>
+          <div class="action-arrow"><i class="fa-solid fa-arrow-right"></i></div>
         </div>
       </a>
 
@@ -591,16 +549,36 @@
         </div>
         <div class="card-action">
           <span class="action-text">Buka Aplikasi</span>
-          <div class="action-arrow">
-            <i class="fa-solid fa-arrow-right"></i>
+          <div class="action-arrow"><i class="fa-solid fa-arrow-right"></i></div>
+        </div>
+      </a>
+
+      <!-- Card 4: Choropleth Kepadatan Penduduk -->
+      <a href="http://guxzrn2nagog3wwwqjdlca9w.203.24.51.230.sslip.io" class="card card-choropleth">
+        <div>
+          <div class="card-icon-container">
+            <i class="fa-solid fa-chart-area"></i>
           </div>
+          <div class="card-body">
+            <h3 class="card-title">Choropleth Kepadatan Penduduk</h3>
+            <p class="card-desc">Visualisasi choropleth persebaran dan kepadatan penduduk Kota Pontianak per kecamatan, dilengkapi data jumlah penduduk dan peta interaktif berbasis Leaflet.</p>
+            <div class="tech-tags">
+              <span class="tag">Leaflet.js</span>
+              <span class="tag">Choropleth</span>
+              <span class="tag">GeoJSON</span>
+              <span class="tag">HTML/CSS</span>
+            </div>
+          </div>
+        </div>
+        <div class="card-action">
+          <span class="action-text">Buka Aplikasi</span>
+          <div class="action-arrow"><i class="fa-solid fa-arrow-right"></i></div>
         </div>
       </a>
 
     </div>
   </main>
 
-  <!-- Footer -->
   <footer>
     <div>
       &copy; 2026 <strong>SIG Pontianak Hub</strong>. Semua Hak Cipta Dilindungi.
@@ -608,4 +586,4 @@
   </footer>
 
 </body>
-</html>
+</html>
\ No newline at end of file