updT

01/index.html

@@ -1564,6 +1564,23 @@
 
     .pi-close:hover { background: rgba(255,255,255,.32); }
 
+    .pi-close-alt {
+      width: 26px;
+      height: 26px;
+      border: none;
+      border-radius: 7px;
+      background: #f1f5f9;
+      color: var(--muted);
+      cursor: pointer;
+      display: grid;
+      place-items: center;
+      font-size: 12px;
+      transition: background .15s;
+      flex-shrink: 0;
+      margin-left: auto;
+    }
+    .pi-close-alt:hover { background: #e2e8f0; color: var(--red); }
+
     .pi-body {
       padding: 10px 14px 6px;
       display: flex;
@@ -4294,7 +4311,7 @@
       const icon = createModernMarker(color, 'fas fa-gas-pump', d.nama);
       const m = L.marker([d.lat, d.lng], { icon, draggable: true });
       m.bindPopup(`<div class="pi">
-    <h4><i class="fas fa-gas-pump" style="color:${color}"></i>${d.nama}</h4>
+    <h4><i class="fas fa-gas-pump" style="color:${color}"></i>${d.nama}<button class="pi-close-alt" onclick="map.closePopup()"><i class="fas fa-times"></i></button></h4>
     <div class="pi-body">
       <div class="pi-row"><span class="pi-k">No. SPBU</span><span class="pi-v">${d.no}</span></div>
       <div class="pi-row"><span class="pi-k">Status</span><span class="pi-v" style="color:${color}">${d.status === 'Ya' ? '&#10004; Buka 24 Jam' : '&#10006; Tidak Buka 24 Jam'}</span></div>
@@ -4443,7 +4460,7 @@
       })
         .bindPopup(`
 <div class="pi">
-<h4><i class="fas fa-road" style="color:${c}"></i>${d.nama}</h4>
+<h4><i class="fas fa-road" style="color:${c}"></i>${d.nama}<button class="pi-close-alt" onclick="map.closePopup()"><i class="fas fa-times"></i></button></h4>
 
 <div class="pi-body">
   <div class="pi-row">
@@ -4693,7 +4710,7 @@
       })
         .bindPopup(`
 <div class="pi">
-<h4><i class="fas fa-draw-polygon" style="color:${c}"></i>${d.nama}</h4>
+<h4><i class="fas fa-draw-polygon" style="color:${c}"></i>${d.nama}<button class="pi-close-alt" onclick="map.closePopup()"><i class="fas fa-times"></i></button></h4>
 
 <div class="pi-body">
   <div class="pi-row">