TigerStable
145 lines
5.7 KiB
HTML
145 lines
5.7 KiB
HTML
<!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> |