fananazril/WebGIS-Poverty-MAP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6bc85343b912bdc5612ccbfeb90636530dc0f63f
WebGIS-Poverty-MAP/index.html
T

204 lines
7.6 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>⛽ Input SPBU & Rumah Ibadah — WebGIS Kalbar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css"/>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- HEADER -->
<header>
<div class="logo">⛽</div>
<div style="flex:1;">
<h1>Input Manual SPBU & Rumah Ibadah</h1>
<p>Mode 2 — OpenStreetMap · Geolocation · Reverse Geocoding</p>
</div>
<a href="landing.php" title="Kembali ke pilih mode" style="
display:inline-flex;align-items:center;gap:7px;
background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
color:#8890b0;text-decoration:none;font-size:12px;font-weight:600;
padding:6px 14px;border-radius:20px;transition:all 0.2s;
white-space:nowrap;
" onmouseover="this.style.color='#e8ecf4';this.style.background='rgba(255,255,255,0.1)'" onmouseout="this.style.color='#8890b0';this.style.background='rgba(255,255,255,0.06)'">
← Pilih Mode
</a>
</header>
<div class="main">
<!-- SIDEBAR -->
<div class="sidebar">
<div class="section">
<div class="section-title">
<span class="dot" style="background:var(--yellow)"></span>Lokasi Anda
</div>
<button class="btn btn-loc" id="btn-locate">📍 Deteksi Lokasi Laptop</button>
<div id="my-location-info" style="display:none; margin-top:10px;">
<div class="item-card" style="cursor:default;">
<div class="item-icon">💻</div>
<div class="item-info">
<div class="item-name">Lokasi Saya</div>
<div class="item-addr" id="my-addr">Memuat alamat...</div>
<div class="item-coord" id="my-coord"></div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="section-title">
<span class="dot" style="background:var(--accent)"></span>Statistik
</div>
<div class="stats-row">
<div class="stat-box blue">
<div class="stat-num" id="stat-ibadah">0</div>
<div class="stat-label">Ibadah</div>
</div>
<div class="stat-box yellow">
<div class="stat-num" id="stat-in">0</div>
<div class="stat-label">SPBU</div>
</div>
<div class="stat-box red" style="display:none;">
<div class="stat-num" id="stat-out">0</div>
<div class="stat-label">Di Luar</div>
</div>
</div>
</div>
<div class="section">
<div class="section-title">
<span class="dot"></span>Rumah Ibadah
<span class="count-badge" id="count-ibadah">0</span>
</div>
<div class="item-list" id="ibadah-list">
<div class="empty-state">Belum ada rumah ibadah</div>
</div>
</div>
<div class="section">
<div class="section-title">
<span class="dot" style="background:var(--green)"></span>SPBU & Pangkalan BBM
<span class="count-badge" id="count-miskin">0</span>
</div>
<div class="item-list" id="miskin-list">
<div class="empty-state">Belum ada data SPBU</div>
</div>
</div>
<div class="section">
<button class="btn btn-danger" id="btn-reset">🗑️ Hapus Semua Data</button>
</div>
</div>
<!-- MAP CONTAINER -->
<div class="map-container">
<div id="map"></div>
<!-- TOGGLE TOOLBAR -->
<div class="toolbar" id="toolbar">
<div class="toolbar-label">Tambah:</div>
<div class="toggle-group">
<button class="toggle-btn" id="toggle-ibadah" onclick="setMode('ibadah')">🏛️ Ibadah</button>
<button class="toggle-btn" id="toggle-miskin" onclick="setMode('miskin')">⛽ SPBU</button>
</div>
<button class="toolbar-loc-btn" id="btn-locate-map" title="Deteksi Lokasi">📍</button>
</div>
<div id="loc-bar">
<span class="loc-icon">📍</span>
<div class="loc-text">
<strong id="loc-bar-addr">Mendapatkan alamat...</strong>
<span id="loc-bar-coord"></span>
</div>
</div>
</div>
</div>
<div id="toast"></div>
<!-- ═══════════════════════════════════════════════════════════ -->
<!-- FORM OVERLAY: TAMBAH / EDIT IBADAH & MISKIN -->
<!-- ═══════════════════════════════════════════════════════════ -->
<div id="form-overlay" class="form-overlay hidden">
<div class="form-card">
<div class="form-header" id="form-header">
<span id="form-title">Tambah Titik</span>
<button class="form-close" onclick="closeFormOverlay()">✕</button>
</div>
<div class="form-body">
<!-- ── IBADAH FIELDS ── -->
<div id="form-ibadah-fields">
<label>Nama Rumah Ibadah</label>
<input type="text" id="f-ibadah-name" placeholder="cth: Masjid Al-Ikhlas">
<label>Jenis</label>
<select id="f-ibadah-type">
<option value="🕌">🕌 Masjid</option>
<option value="⛪">⛪ Gereja</option>
<option value="🛕">🛕 Pura / Vihara</option>
<option value="⛩️">⛩️ Klenteng</option>
<option value="🙏">🙏 Lainnya</option>
</select>
<label>Radius Layanan</label>
<div class="range-label">
<span style="font-size:11px;color:var(--text2)">100m</span>
<span class="range-val" id="f-radius-val">500 m</span>
<span style="font-size:11px;color:var(--text2)">5km</span>
</div>
<input type="range" id="f-radius-slider" min="100" max="5000" step="100" value="500">
<div class="form-coord" id="f-ibadah-coord"></div>
<div class="form-addr-preview" id="f-ibadah-addr">
<span class="addr-loading">🔄 Memuat alamat...</span>
</div>
</div>
<!-- ── SPBU FIELDS ── -->
<div id="form-miskin-fields" style="display:none">
<label>Nama SPBU / Pangkalan BBM</label>
<input type="text" id="f-miskin-name" placeholder="cth: SPBU 64.751.01 Jl. Veteran">
<label>Jenis</label>
<select id="f-spbu-type">
<option value="⛽">⛽ SPBU Pertamina</option>
<option value="🛢️">🛢️ Pangkalan BBM</option>
<option value="🏪">🏪 Agen LPG</option>
<option value="🔋">🔋 SPKLU (Listrik)</option>
<option value="⚡">⚡ Lainnya</option>
</select>
<label>Radius Layanan</label>
<div class="range-label">
<span style="font-size:11px;color:var(--text2)">100m</span>
<span class="range-val" id="f-radius-val-spbu">1 km</span>
<span style="font-size:11px;color:var(--text2)">10km</span>
</div>
<input type="range" id="f-radius-slider-spbu" min="100" max="10000" step="100" value="1000">
<div class="form-coord" id="f-miskin-coord"></div>
<div class="form-addr-preview" id="f-miskin-addr">
<span class="addr-loading">🔄 Memuat alamat...</span>
</div>
</div>
</div>
<div class="form-footer">
<button class="btn btn-ghost" onclick="closeFormOverlay()">Batal</button>
<button class="btn btn-primary" id="btn-form-save">💾 Simpan</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink