RafaelGerhardPanjaitan/UAS_SIG
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Start

Browse Source
This commit is contained in:
TigerStable
2026-06-10 17:57:32 +07:00
commit 515c830342
19 changed files with 1912 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webgis/index.html
+145
View File
@@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>WebGIS – Sistem Distribusi Bansos Berbasis Rumah Ibadah</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="app">
<!-- ═══ TOPBAR ═══ -->
<header class="topbar">
<div class="brand">
<div class="brand-mark">
<svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
</div>
<div class="brand-name">WebGIS Distribusi Bansos<span>Berbasis Rumah Ibadah — Radius 300m</span></div>
</div>
<div class="topbar-div"></div>
<nav class="nav-pills" id="nav-pills">
<button class="nav-pill active" data-layer="spbu">
<span class="pill-dot" style="background:#34d47e"></span>SPBU
<span class="pill-badge" id="badge-spbu">0</span>
</button>
<button class="nav-pill" data-layer="jalan">
<span class="pill-dot" style="background:#f0a030"></span>Jalan
<span class="pill-badge" id="badge-jalan">0</span>
</button>
<button class="nav-pill" data-layer="parsil">
<span class="pill-dot" style="background:#9b7bfa"></span>Parsil
<span class="pill-badge" id="badge-parsil">0</span>
</button>
<button class="nav-pill" data-layer="warga">
<span class="pill-dot" style="background:#f05c5c"></span>Warga & Bansos
<span class="pill-badge" id="badge-warga">0</span>
</button>
<button class="nav-pill" data-layer="rumahIbadah">
<span class="pill-dot" style="background:#2ec4b6"></span>Rumah Ibadah
<span class="pill-badge" id="badge-rumahIbadah">0</span>
</button>
</nav>
<div class="topbar-spacer"></div>
<button class="dash-btn" onclick="Dashboard.toggle()">
<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
Dashboard Analitik
</button>
<div class="topbar-div"></div>
<div class="topbar-stat"><span class="stat-dot"></span><span id="total-count">0 fitur</span></div>
</header>
<!-- ═══ MAIN ═══ -->
<div class="main">
<!-- Sidebar -->
<aside class="sidebar">
<div class="sidebar-head">
<div>
<div class="sidebar-title" id="sb-title">Data SPBU</div>
<div class="sidebar-sub" id="sb-sub">Stasiun Bahan Bakar Umum</div>
</div>
<button class="btn-add" id="btn-add">
<svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>Tambah
</button>
</div>
<div class="sidebar-body" id="sb-list"></div>
</aside>
<!-- Map -->
<div class="map-area">
<div id="map"></div>
<!-- Draw indicator -->
<div class="draw-bar hidden" id="draw-bar">
<span class="draw-pulse"></span>
<span id="draw-text">Mode gambar aktif</span>
<button class="btn-cancel-draw" id="btn-cancel">Batal</button>
</div>
<!-- Legend -->
<div class="map-legend" id="legend">
<div class="legend-title">Legenda</div>
<div id="legend-items"></div>
</div>
</div>
</div>
</div>
<!-- ═══ MODAL ═══ -->
<div class="modal-ov hidden" id="modal-ov">
<div class="modal">
<div class="modal-head">
<div class="modal-head-left">
<div class="modal-icon" id="modal-icon">📍</div>
<div>
<div class="modal-title" id="modal-title">Form Data</div>
<div class="modal-sub" id="modal-sub"></div>
</div>
</div>
<button class="modal-close" id="modal-close">✕</button>
</div>
<div class="modal-body" id="modal-body"></div>
<div class="modal-foot">
<button class="btn btn-ghost" id="modal-cancel">Batal</button>
<button class="btn btn-primary" id="modal-save">Simpan Data</button>
</div>
</div>
</div>
<!-- ═══ DASHBOARD ═══ -->
<div class="dash-panel hidden" id="dash-panel">
<div class="dash-inner">
<div class="dash-head">
<div>
<div class="dash-head-title">Dashboard Analitik Kemiskinan</div>
<div class="dash-head-sub">Ringkasan & analisis data geospasial untuk pengambilan kebijakan</div>
</div>
<button class="modal-close" onclick="Dashboard.toggle()">✕</button>
</div>
<div class="dash-body" id="dash-body"></div>
</div>
</div>
<!-- ═══ TOASTS ═══ -->
<div class="toasts" id="toasts"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-draw@1.0.4/dist/leaflet.draw.js"></script>
<script src="js/utils/helpers.js"></script>
<script src="js/utils/store.js"></script>
<script src="js/utils/toast.js"></script>
<script src="js/config/config.js"></script>
<script src="js/components/forms.js"></script>
<script src="js/components/popup.js"></script>
<script src="js/components/card.js"></script>
<script src="js/components/legend.js"></script>
<script src="js/modules/draw.js"></script>
<script src="js/modules/modal.js"></script>
<script src="js/modules/sidebar.js"></script>
<script src="js/modules/dashboard.js"></script>
<script src="js/modules/map.js"></script>
<script src="js/app.js"></script>
</body>
</html>