cw
92 lines
5.4 KiB
PHP
92 lines
5.4 KiB
PHP
<!-- HERO -->
|
|
<div class="public-hero">
|
|
<div style="font-size:3.5rem;margin-bottom:12px">🗺</div>
|
|
<h1>SINERGI</h1>
|
|
<p>Sistem Informasi Geografis Penanganan Kemiskinan Berbasis Kolaborasi Rumah Ibadah, Masyarakat, dan Pemerintah Kota Pontianak</p>
|
|
<div style="margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap">
|
|
<a href="<?= APP_URL ?>/lapor" style="background:var(--clr-accent);color:var(--clr-primary-d);padding:12px 28px;border-radius:8px;font-weight:700;font-size:1rem;text-decoration:none">📝 Lapor Warga Membutuhkan</a>
|
|
<a href="<?= APP_URL ?>/cek-laporan" style="background:rgba(255,255,255,0.12);color:#fff;padding:12px 28px;border-radius:8px;font-weight:600;font-size:1rem;text-decoration:none;border:1px solid rgba(255,255,255,0.2)">🔍 Cek Status Laporan</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- STATS -->
|
|
<div class="public-container" style="margin-top:-40px">
|
|
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:40px">
|
|
<?php $sItems = [
|
|
['👥', number_format($stats['total_warga']??0), 'Warga Terdata'],
|
|
['⛪', number_format($stats['total_ri']??0), 'Rumah Ibadah'],
|
|
['📋', number_format($stats['total_laporan']??0), 'Total Laporan'],
|
|
['📦', number_format($stats['total_bantuan']??0), 'Bantuan Disalurkan'],
|
|
]; foreach($sItems as [$icon,$val,$label]): ?>
|
|
<div style="background:#fff;border-radius:12px;padding:20px;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,0.08);border:1px solid var(--clr-border)">
|
|
<div style="font-size:2rem"><?= $icon ?></div>
|
|
<div style="font-size:1.6rem;font-weight:800;color:var(--clr-primary);margin-top:4px"><?= $val ?></div>
|
|
<div style="font-size:0.78rem;color:var(--clr-text-muted)"><?= $label ?></div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<div style="background:var(--clr-primary);border-radius:12px;padding:20px;text-align:center;box-shadow:0 4px 16px rgba(0,0,0,0.15)">
|
|
<div style="font-size:2rem">🏛</div>
|
|
<div style="font-size:0.9rem;font-weight:700;color:#fff;margin-top:8px">Kota Pontianak</div>
|
|
<div style="font-size:0.72rem;color:rgba(255,255,255,0.6)">6 Kecamatan</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PETA PUBLIK -->
|
|
<div class="public-container" style="margin-bottom:48px">
|
|
<h2 style="font-size:1.4rem;font-weight:800;color:var(--clr-text);margin-bottom:8px">Peta Persebaran Kemiskinan</h2>
|
|
<p style="color:var(--clr-text-muted);margin-bottom:16px;font-size:0.9rem">Data real-time persebaran warga miskin dan rumah ibadah di Kota Pontianak</p>
|
|
<div style="border-radius:16px;overflow:hidden;border:1px solid var(--clr-border);box-shadow:0 8px 32px rgba(0,0,0,0.1);position:relative">
|
|
<div id="public-map" style="height:460px"></div>
|
|
<div class="map-legend">
|
|
<h4>Keterangan</h4>
|
|
<div class="map-legend-item"><div class="map-legend-dot legend-dot-ekstrem"></div> Miskin Ekstrem</div>
|
|
<div class="map-legend-item"><div class="map-legend-dot legend-dot-miskin"></div> Miskin</div>
|
|
<div class="map-legend-item"><div class="map-legend-dot legend-dot-rentan"></div> Rentan Miskin</div>
|
|
<div class="map-legend-item"><div class="map-legend-dot legend-dot-ri"></div> Rumah Ibadah</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CARA MELAPOR -->
|
|
<div style="background:#f8fafc;padding:60px 0">
|
|
<div class="public-container">
|
|
<h2 style="text-align:center;font-size:1.4rem;font-weight:800;margin-bottom:8px">Cara Melapor</h2>
|
|
<p style="text-align:center;color:var(--clr-text-muted);margin-bottom:36px">Mudah dan cepat, tanpa perlu daftar atau login</p>
|
|
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:24px">
|
|
<?php $steps = [
|
|
['1','📝','Isi Formulir','Isi nama warga, alamat, dan kondisi yang dialami'],
|
|
['2','📷','Upload Foto','Unggah foto kondisi tempat tinggal (opsional)'],
|
|
['3','📍','Tandai Lokasi','Pilih lokasi tepat pada peta interaktif'],
|
|
['4','✅','Kirim Laporan','Simpan kode laporan untuk memantau status'],
|
|
]; foreach($steps as [$num,$icon,$title,$desc]): ?>
|
|
<div style="text-align:center;padding:24px 16px">
|
|
<div style="width:52px;height:52px;border-radius:50%;background:var(--clr-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin:0 auto 12px">
|
|
<?= $icon ?>
|
|
</div>
|
|
<div style="font-size:0.72rem;font-weight:700;color:var(--clr-accent);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:4px">Langkah <?= $num ?></div>
|
|
<div style="font-weight:700;margin-bottom:6px"><?= $title ?></div>
|
|
<div style="font-size:0.82rem;color:var(--clr-text-muted)"><?= $desc ?></div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<div style="text-align:center;margin-top:28px">
|
|
<a href="<?= APP_URL ?>/lapor" style="background:var(--clr-primary);color:#fff;padding:13px 32px;border-radius:8px;font-weight:700;font-size:1rem;text-decoration:none;display:inline-block">📝 Mulai Melapor Sekarang</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
const map = GISMap.init('public-map', <?= MAP_DEFAULT_LAT ?>, <?= MAP_DEFAULT_LNG ?>, 12);
|
|
const [wArgaData, riData] = await Promise.all([
|
|
App.fetchJSON('<?= APP_URL ?>/api/warga-peta'),
|
|
App.fetchJSON('<?= APP_URL ?>/api/rumah-ibadah')
|
|
]);
|
|
if(wArgaData) GISMap.addWargaLayer(wArgaData);
|
|
if(riData) GISMap.addRILayer(riData);
|
|
// Auto zoom ke seluruh Kota Pontianak setelah marker dimuat
|
|
GISMap.autoFitBounds();
|
|
});
|
|
</script>
|