noooviiieee
704 lines
31 KiB
PHP
704 lines
31 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Lapor Warga — WebGIS Pemetaan Sosial</title>
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
|
|
<style>
|
|
:root {
|
|
--blue: #30a8e0;
|
|
--blue-d: #1b8ec7;
|
|
--blue-lt: #ddf0fb;
|
|
--navy: #0b2545;
|
|
--green: #1fad63;
|
|
--green-d: #168a4f;
|
|
--green-lt: #d7f5e7;
|
|
--red: #e05050;
|
|
--orange: #f59e0b;
|
|
--glass: rgba(255,255,255,0.94);
|
|
--shadow: 0 8px 32px rgba(11,37,69,0.18);
|
|
--shadow-sm: 0 2px 12px rgba(11,37,69,0.12);
|
|
--r: 14px;
|
|
--r2: 10px;
|
|
--r3: 8px;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html, body { min-height: 100%; font-family: 'Plus Jakarta Sans', sans-serif; background: #f0f4f8; color: var(--navy); }
|
|
|
|
/* LAYOUT */
|
|
.page-wrap {
|
|
min-height: 100vh;
|
|
display: grid;
|
|
grid-template-columns: 1fr 420px;
|
|
grid-template-rows: auto 1fr;
|
|
}
|
|
|
|
/* HEADER */
|
|
.page-header {
|
|
grid-column: 1 / -1;
|
|
background: var(--glass);
|
|
backdrop-filter: blur(14px);
|
|
border-bottom: 1px solid rgba(11,37,69,0.09);
|
|
padding: 14px 24px;
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
box-shadow: var(--shadow-sm);
|
|
position: sticky; top: 0; z-index: 100;
|
|
}
|
|
.header-brand { display: flex; align-items: center; gap: 10px; }
|
|
.hb-icon {
|
|
width: 36px; height: 36px;
|
|
background: linear-gradient(135deg, var(--green), var(--blue));
|
|
border-radius: 10px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 17px; box-shadow: 0 3px 10px rgba(31,173,99,0.3);
|
|
}
|
|
.hb-text .title { font-size: 14px; font-weight: 800; color: var(--navy); line-height: 1.2; }
|
|
.hb-text .subtitle{ font-size: 10px; color: rgba(11,37,69,0.42); font-weight: 500; }
|
|
.header-badge {
|
|
background: var(--orange); color: white;
|
|
font-size: 10px; font-weight: 700;
|
|
padding: 4px 11px; border-radius: 20px;
|
|
}
|
|
.back-link {
|
|
display: flex; align-items: center; gap: 6px;
|
|
font-size: 12px; font-weight: 600;
|
|
color: rgba(11,37,69,0.45);
|
|
text-decoration: none;
|
|
padding: 6px 12px; border-radius: var(--r3);
|
|
border: 1.5px solid rgba(11,37,69,0.1);
|
|
background: rgba(11,37,69,0.03);
|
|
transition: all 0.15s;
|
|
}
|
|
.back-link:hover { background: rgba(11,37,69,0.07); color: var(--navy); }
|
|
|
|
/* PETA */
|
|
.map-panel { position: relative; background: #e8eff5; }
|
|
#map-lapor { width: 100%; height: 100%; min-height: 500px; cursor: crosshair; }
|
|
|
|
.map-instruction {
|
|
position: absolute; bottom: 20px; left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 500;
|
|
background: rgba(11,37,69,0.82); color: rgba(255,255,255,0.9);
|
|
font-size: 12px; font-weight: 500;
|
|
padding: 8px 18px; border-radius: 20px;
|
|
backdrop-filter: blur(8px); pointer-events: none; white-space: nowrap;
|
|
transition: all 0.3s;
|
|
}
|
|
.map-instruction.picked { background: rgba(31,173,99,0.88); }
|
|
|
|
.coord-pill {
|
|
position: absolute; top: 12px; left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 500;
|
|
background: var(--glass); backdrop-filter: blur(12px);
|
|
border-radius: 20px; padding: 6px 14px;
|
|
font-size: 11px; font-weight: 600; color: var(--navy);
|
|
box-shadow: var(--shadow-sm);
|
|
display: none; align-items: center; gap: 6px;
|
|
}
|
|
.coord-pill.show { display: flex; }
|
|
|
|
/* FORM PANEL */
|
|
.form-panel {
|
|
background: white;
|
|
border-left: 1px solid rgba(11,37,69,0.08);
|
|
display: flex; flex-direction: column;
|
|
overflow-y: auto;
|
|
max-height: calc(100vh - 64px);
|
|
position: sticky; top: 64px;
|
|
}
|
|
.form-panel::-webkit-scrollbar { width: 4px; }
|
|
.form-panel::-webkit-scrollbar-thumb { background: rgba(11,37,69,0.14); border-radius: 4px; }
|
|
|
|
/* HERO FORM */
|
|
.form-hero {
|
|
background: linear-gradient(135deg, #0b2545 0%, #1a3f6f 100%);
|
|
padding: 22px 22px 18px;
|
|
position: relative; overflow: hidden;
|
|
}
|
|
.form-hero::before {
|
|
content: ''; position: absolute;
|
|
top: -20px; right: -20px; width: 100px; height: 100px;
|
|
background: rgba(48,168,224,0.15); border-radius: 50%;
|
|
}
|
|
.form-hero::after {
|
|
content: ''; position: absolute;
|
|
bottom: -30px; left: 30px; width: 80px; height: 80px;
|
|
background: rgba(31,173,99,0.1); border-radius: 50%;
|
|
}
|
|
.fh-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 5px; }
|
|
.fh-title { font-size: 20px; font-weight: 800; color: white; line-height: 1.2; margin-bottom: 6px; }
|
|
.fh-desc { font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.6; }
|
|
|
|
/* STEPS */
|
|
.steps-bar {
|
|
display: flex; padding: 14px 22px;
|
|
border-bottom: 1px solid rgba(11,37,69,0.08);
|
|
background: rgba(11,37,69,0.02);
|
|
}
|
|
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
|
|
.step:not(:last-child)::after {
|
|
content: ''; position: absolute;
|
|
top: 12px; left: 60%; width: 80%; height: 2px;
|
|
background: rgba(11,37,69,0.1); z-index: 0;
|
|
}
|
|
.step.done:not(:last-child)::after { background: var(--green); }
|
|
.step-num {
|
|
width: 24px; height: 24px; border-radius: 50%;
|
|
background: rgba(11,37,69,0.08); border: 2px solid rgba(11,37,69,0.12);
|
|
font-size: 11px; font-weight: 700; color: rgba(11,37,69,0.35);
|
|
display: flex; align-items: center; justify-content: center;
|
|
position: relative; z-index: 1; transition: all 0.25s;
|
|
}
|
|
.step.active .step-num { background: var(--blue-lt); border-color: var(--blue); color: var(--blue-d); }
|
|
.step.done .step-num { background: var(--green-lt); border-color: var(--green); color: var(--green-d); }
|
|
.step-lbl { font-size: 9px; font-weight: 600; color: rgba(11,37,69,0.35); text-align: center; }
|
|
.step.active .step-lbl { color: var(--blue-d); }
|
|
.step.done .step-lbl { color: var(--green-d); }
|
|
|
|
/* FORM BODY */
|
|
.form-body { padding: 18px 22px; flex: 1; }
|
|
.form-section { margin-bottom: 18px; }
|
|
.section-title {
|
|
font-size: 11px; font-weight: 700;
|
|
color: rgba(11,37,69,0.45);
|
|
text-transform: uppercase; letter-spacing: 0.08em;
|
|
margin-bottom: 10px;
|
|
display: flex; align-items: center; gap: 6px;
|
|
}
|
|
.section-title::after { content: ''; flex: 1; height: 1px; background: rgba(11,37,69,0.08); }
|
|
|
|
.ff { margin-bottom: 11px; }
|
|
.ff label {
|
|
display: block; font-size: 10px; font-weight: 700;
|
|
color: rgba(11,37,69,0.42); text-transform: uppercase;
|
|
letter-spacing: 0.07em; margin-bottom: 4px;
|
|
}
|
|
.ff label .req { color: var(--red); margin-left: 2px; }
|
|
.ff input, .ff select, .ff textarea {
|
|
width: 100%; padding: 9px 11px; font-size: 13px; font-family: inherit;
|
|
border: 1.5px solid rgba(11,37,69,0.12); border-radius: var(--r3);
|
|
color: var(--navy); background: rgba(11,37,69,0.02);
|
|
transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
|
|
appearance: none; -webkit-appearance: none;
|
|
}
|
|
.ff select {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230b2545' stroke-opacity='0.35' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat; background-position: right 11px center; padding-right: 32px; cursor: pointer;
|
|
}
|
|
.ff textarea { resize: vertical; min-height: 72px; line-height: 1.55; }
|
|
.ff input:focus, .ff select:focus, .ff textarea:focus {
|
|
outline: none; border-color: var(--blue);
|
|
box-shadow: 0 0 0 3px rgba(48,168,224,0.11); background: white;
|
|
}
|
|
.ff input::placeholder, .ff textarea::placeholder { color: rgba(11,37,69,0.26); }
|
|
.ff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
|
|
|
/* LOKASI BOX */
|
|
.loc-box {
|
|
background: rgba(11,37,69,0.03);
|
|
border: 1.5px dashed rgba(11,37,69,0.15);
|
|
border-radius: var(--r2); padding: 12px 14px;
|
|
display: flex; align-items: center; gap: 10px;
|
|
margin-bottom: 11px; transition: all 0.2s; cursor: pointer;
|
|
}
|
|
.loc-box.filled { background: var(--green-lt); border-color: var(--green); border-style: solid; }
|
|
.loc-box-icon {
|
|
width: 36px; height: 36px; border-radius: 9px;
|
|
background: rgba(11,37,69,0.06);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 16px; flex-shrink: 0; transition: background 0.2s;
|
|
}
|
|
.loc-box.filled .loc-box-icon { background: rgba(31,173,99,0.15); }
|
|
.loc-box-text .lbt-title { font-size: 12px; font-weight: 700; color: rgba(11,37,69,0.5); }
|
|
.loc-box.filled .loc-box-text .lbt-title { color: var(--green-d); }
|
|
.loc-box-text .lbt-val { font-size: 11px; color: rgba(11,37,69,0.38); margin-top: 2px; font-family: monospace; }
|
|
.loc-box.filled .loc-box-text .lbt-val { color: var(--green-d); font-weight: 600; }
|
|
|
|
/* INFO BOX */
|
|
.info-box {
|
|
background: rgba(245,158,11,0.08);
|
|
border: 1px solid rgba(245,158,11,0.25);
|
|
border-radius: var(--r2); padding: 10px 12px;
|
|
font-size: 11px; color: rgba(11,37,69,0.6);
|
|
line-height: 1.6; margin-bottom: 14px;
|
|
display: flex; gap: 8px;
|
|
}
|
|
.info-box .ib-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
|
|
|
|
/* FORM FOOTER */
|
|
.form-footer {
|
|
padding: 14px 22px 20px;
|
|
border-top: 1px solid rgba(11,37,69,0.08);
|
|
background: rgba(11,37,69,0.01);
|
|
}
|
|
.btn-submit {
|
|
width: 100%; padding: 13px; border: none; border-radius: var(--r2);
|
|
background: linear-gradient(135deg, var(--green), var(--blue));
|
|
color: white; font-family: inherit; font-size: 14px; font-weight: 700;
|
|
cursor: pointer; transition: all 0.2s;
|
|
display: flex; align-items: center; justify-content: center; gap: 7px;
|
|
box-shadow: 0 4px 15px rgba(31,173,99,0.3);
|
|
}
|
|
.btn-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(31,173,99,0.4); }
|
|
.btn-submit:active { transform: scale(0.98); }
|
|
.btn-submit:disabled {
|
|
background: rgba(11,37,69,0.12); color: rgba(11,37,69,0.35);
|
|
cursor: not-allowed; box-shadow: none; transform: none;
|
|
}
|
|
.submit-note { text-align: center; font-size: 10px; color: rgba(11,37,69,0.3); margin-top: 8px; }
|
|
|
|
/* SUCCESS OVERLAY */
|
|
#success-overlay {
|
|
display: none; position: fixed; inset: 0; z-index: 9000;
|
|
background: rgba(11,37,69,0.5); backdrop-filter: blur(6px);
|
|
align-items: center; justify-content: center;
|
|
}
|
|
#success-overlay.show { display: flex; }
|
|
.success-card {
|
|
background: white; border-radius: 20px; padding: 36px 32px;
|
|
max-width: 360px; width: calc(100vw - 32px);
|
|
text-align: center; box-shadow: 0 30px 80px rgba(11,37,69,0.3);
|
|
animation: scaleIn 0.35s cubic-bezier(0.34,1.5,0.64,1);
|
|
}
|
|
@keyframes scaleIn { from { opacity:0; transform:scale(0.75); } to { opacity:1; transform:scale(1); } }
|
|
.sc-circle {
|
|
width: 72px; height: 72px; background: var(--green-lt); border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 32px; margin: 0 auto 16px;
|
|
}
|
|
.sc-title { font-size: 20px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
|
|
.sc-desc { font-size: 13px; color: rgba(11,37,69,0.5); line-height: 1.6; margin-bottom: 20px; }
|
|
.sc-id { background: var(--green-lt); border-radius: var(--r2); padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--green-d); margin-bottom: 20px; }
|
|
.btn-lapor-lagi {
|
|
width: 100%; padding: 11px; border: none; border-radius: var(--r2);
|
|
background: var(--green); color: white; font-family: inherit;
|
|
font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s;
|
|
}
|
|
.btn-lapor-lagi:hover { background: var(--green-d); }
|
|
|
|
/* TOAST — identik dengan index.php */
|
|
#toast {
|
|
position: fixed; bottom: 24px; left: 50%;
|
|
transform: translateX(-50%) translateY(8px);
|
|
z-index: 9999;
|
|
background: var(--navy); color: white;
|
|
font-size: 12px; font-weight: 600;
|
|
padding: 8px 20px; border-radius: 18px;
|
|
box-shadow: 0 6px 22px rgba(11,37,69,0.28);
|
|
opacity: 0; transition: all 0.28s ease; pointer-events: none;
|
|
font-family: 'Plus Jakarta Sans', sans-serif; white-space: nowrap;
|
|
}
|
|
#toast.show { opacity:1; transform: translateX(-50%) translateY(0); }
|
|
#toast.ok { background: var(--green); }
|
|
#toast.err { background: var(--red); }
|
|
|
|
/* RESPONSIVE MOBILE */
|
|
@media (max-width: 768px) {
|
|
.page-wrap { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
|
|
.map-panel { grid-row: 2; height: 280px; }
|
|
.form-panel { grid-row: 3; max-height: none; position: static; overflow-y: visible; }
|
|
#map-lapor { min-height: 280px; }
|
|
.ff-row { grid-template-columns: 1fr; }
|
|
.back-link span { display: none; }
|
|
}
|
|
</style>
|
|
|
|
<div style="
|
|
margin-top:16px; padding-top:14px;
|
|
border-top:1px dashed rgba(11,37,69,0.1);
|
|
text-align:center">
|
|
<div style="font-size:10px;font-weight:700;color:rgba(11,37,69,0.35);
|
|
text-transform:uppercase;letter-spacing:0.07em;margin-bottom:8px">
|
|
Bagikan halaman ini
|
|
</div>
|
|
<div id="self-qr" style="width:100px;height:100px;border-radius:8px;border:1.5px solid rgba(11,37,69,0.08);overflow:hidden"></div>
|
|
<div style="font-size:10px;color:rgba(11,37,69,0.3);margin-top:6px">
|
|
Scan untuk membuka di HP lain
|
|
</div>
|
|
</div>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="page-wrap">
|
|
|
|
<!-- HEADER -->
|
|
<header class="page-header">
|
|
<div class="header-brand">
|
|
<div class="hb-icon">🗺️</div>
|
|
<div class="hb-text">
|
|
<div class="title">WebGIS Pemetaan Sosial</div>
|
|
<div class="subtitle">Kota Pontianak — Berbasis Komunitas Rumah Ibadah</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:10px">
|
|
<div class="header-badge">📢 Laporan Publik</div>
|
|
<a href="index.php" class="back-link">← <span>Kembali ke Peta</span></a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- PANEL KIRI: PETA -->
|
|
<div class="map-panel">
|
|
<div id="map-lapor"></div>
|
|
<div class="coord-pill" id="coordPill">
|
|
📍 <span id="coordText">—</span>
|
|
</div>
|
|
<div class="map-instruction" id="mapHint">
|
|
Klik titik lokasi tempat tinggal di peta
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PANEL KANAN: FORM -->
|
|
<div class="form-panel">
|
|
|
|
<!-- Hero -->
|
|
<div class="form-hero">
|
|
<div class="fh-label">Formulir Laporan Warga</div>
|
|
<div class="fh-title">Laporkan Keluarga<br>Tidak Mampu</div>
|
|
<div class="fh-desc">Data Anda akan diverifikasi oleh pengurus rumah ibadah setempat sebelum masuk ke peta resmi.</div>
|
|
</div>
|
|
|
|
<!-- Steps -->
|
|
<div class="steps-bar">
|
|
<div class="step done" id="step1"><div class="step-num">1</div><div class="step-lbl">Mulai</div></div>
|
|
<div class="step active" id="step2"><div class="step-num">2</div><div class="step-lbl">Lokasi</div></div>
|
|
<div class="step" id="step3"><div class="step-num">3</div><div class="step-lbl">Data Diri</div></div>
|
|
<div class="step" id="step4"><div class="step-num">4</div><div class="step-lbl">Kirim</div></div>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="form-body">
|
|
|
|
<div class="info-box">
|
|
<span class="ib-icon">💡</span>
|
|
<span>Klik di peta sebelah kiri untuk menentukan lokasi, lalu isi data di bawah ini.</span>
|
|
</div>
|
|
|
|
<!-- LOKASI -->
|
|
<div class="section-title">📍 Lokasi Tempat Tinggal</div>
|
|
<div class="loc-box" id="locBox" onclick="focusMap()">
|
|
<div class="loc-box-icon">📍</div>
|
|
<div class="loc-box-text">
|
|
<div class="lbt-title" id="locTitle">Belum dipilih — klik peta</div>
|
|
<div class="lbt-val" id="locVal">Klik di peta untuk menentukan koordinat</div>
|
|
</div>
|
|
</div>
|
|
<div class="ff">
|
|
<label>Alamat Lengkap <span class="req">*</span></label>
|
|
<textarea id="f_alamat" placeholder="Contoh: Jl. Ahmad Yani No. 12, Kel. Sungai Bangkong, Kec. Pontianak Kota"></textarea>
|
|
</div>
|
|
|
|
<!-- DATA PRIBADI -->
|
|
<div class="section-title">👤 Data Kepala Keluarga</div>
|
|
<div class="ff">
|
|
<label>Nama Kepala Keluarga <span class="req">*</span></label>
|
|
<input type="text" id="f_kk" placeholder="Nama lengkap sesuai KTP" />
|
|
</div>
|
|
<div class="ff-row">
|
|
<div class="ff">
|
|
<label>Jumlah Anggota (Jiwa) <span class="req">*</span></label>
|
|
<input type="number" id="f_jml" placeholder="Contoh: 4" min="1" max="30" />
|
|
</div>
|
|
<div class="ff">
|
|
<label>Tanggal Lahir KK</label>
|
|
<input type="date" id="f_tgl_lahir" />
|
|
</div>
|
|
</div>
|
|
<div class="ff-row">
|
|
<div class="ff">
|
|
<label>Pendidikan Terakhir</label>
|
|
<select id="f_pendidikan">
|
|
<option value="">— Pilih —</option>
|
|
<option value="Tidak Sekolah">Tidak Sekolah</option>
|
|
<option value="SD">SD</option>
|
|
<option value="SMP">SMP</option>
|
|
<option value="SMA">SMA</option>
|
|
<option value="D3">D3</option>
|
|
<option value="S1">S1</option>
|
|
<option value="S2">S2</option>
|
|
<option value="S3">S3</option>
|
|
</select>
|
|
</div>
|
|
<div class="ff">
|
|
<label>Pekerjaan</label>
|
|
<input type="text" id="f_pekerjaan" placeholder="Contoh: Buruh harian" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KESEHATAN -->
|
|
<div class="section-title">🏥 Kesehatan & Jaminan Sosial</div>
|
|
<div class="ff">
|
|
<label>Riwayat Penyakit / Disabilitas</label>
|
|
<textarea id="f_penyakit" placeholder="Contoh: Diabetes, hipertensi — atau tulis 'Tidak ada'" style="min-height:56px"></textarea>
|
|
</div>
|
|
<div class="ff">
|
|
<label>Kepemilikan Jaminan Sosial</label>
|
|
<select id="f_jaminan">
|
|
<option value="">— Pilih —</option>
|
|
<option value="BPJS Kesehatan">BPJS Kesehatan</option>
|
|
<option value="KIS">KIS (Kartu Indonesia Sehat)</option>
|
|
<option value="BPJS Ketenagakerjaan">BPJS Ketenagakerjaan</option>
|
|
<option value="Tidak Ada">Tidak Ada</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- PELAPOR -->
|
|
<div class="section-title">📝 Identitas Pelapor</div>
|
|
<div class="ff">
|
|
<label>Nama Pelapor <span class="req">*</span></label>
|
|
<input type="text" id="f_pelapor" placeholder="Nama Anda (pengurus / relawan / warga)" />
|
|
</div>
|
|
<div class="ff-row">
|
|
<div class="ff">
|
|
<label>No. HP Pelapor</label>
|
|
<input type="tel" id="f_hp" placeholder="08xx-xxxx-xxxx" />
|
|
</div>
|
|
<div class="ff">
|
|
<label>Hubungan dengan KK</label>
|
|
<select id="f_hubungan">
|
|
<option value="">— Pilih —</option>
|
|
<option value="Diri sendiri">Diri sendiri</option>
|
|
<option value="Tetangga">Tetangga</option>
|
|
<option value="Pengurus RT/RW">Pengurus RT/RW</option>
|
|
<option value="Relawan">Relawan</option>
|
|
<option value="Pengurus Rumah Ibadah">Pengurus Rumah Ibadah</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="ff">
|
|
<label>Keterangan Tambahan</label>
|
|
<textarea id="f_keterangan" placeholder="Ceritakan kondisi keluarga secara singkat (opsional)"></textarea>
|
|
</div>
|
|
|
|
</div><!-- /form-body -->
|
|
|
|
<!-- Footer -->
|
|
<div class="form-footer">
|
|
<button class="btn-submit" id="btnSubmit" onclick="submitLaporan()" disabled>
|
|
📤 Kirim Laporan untuk Diverifikasi
|
|
</button>
|
|
<div class="submit-note">
|
|
⚠️ Laporan akan masuk sebagai <strong>menunggu verifikasi</strong> — belum tampil di peta sebelum disetujui operator
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /form-panel -->
|
|
</div><!-- /page-wrap -->
|
|
|
|
<!-- SUCCESS OVERLAY -->
|
|
<div id="success-overlay">
|
|
<div class="success-card">
|
|
<div class="sc-circle">✅</div>
|
|
<div class="sc-title">Laporan Terkirim!</div>
|
|
<div class="sc-desc">Terima kasih. Laporan Anda sudah diterima dan akan segera diverifikasi oleh pengurus rumah ibadah setempat.</div>
|
|
<div class="sc-id" id="sc-ref">ID Laporan: #—</div>
|
|
<button class="btn-lapor-lagi" onclick="resetForm()">📋 Laporkan Warga Lain</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toast"></div>
|
|
|
|
<script>
|
|
// =============================================
|
|
// VARIABEL GLOBAL
|
|
// =============================================
|
|
let pickedLL = null;
|
|
let tempMarker = null;
|
|
|
|
// =============================================
|
|
// INISIALISASI PETA
|
|
// =============================================
|
|
const mapLapor = L.map('map-lapor', { zoomControl: true })
|
|
.setView([-0.0548, 109.3494], 14);
|
|
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19, attribution: '© OpenStreetMap'
|
|
}).addTo(mapLapor);
|
|
|
|
const mkRed = new L.Icon({
|
|
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
|
|
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
|
|
iconSize:[25,41], iconAnchor:[12,41], popupAnchor:[1,-34], shadowSize:[41,41]
|
|
});
|
|
|
|
// Klik peta → simpan koordinat + tampilkan marker
|
|
mapLapor.on('click', function(e) {
|
|
pickedLL = e.latlng;
|
|
|
|
if (tempMarker) mapLapor.removeLayer(tempMarker);
|
|
tempMarker = L.marker([e.latlng.lat, e.latlng.lng], { icon: mkRed })
|
|
.addTo(mapLapor)
|
|
.bindPopup('<div style="font-family:Plus Jakarta Sans,sans-serif;font-size:12px;font-weight:600;color:#0b2545">📍 Lokasi dipilih</div>')
|
|
.openPopup();
|
|
|
|
const latStr = e.latlng.lat.toFixed(6);
|
|
const lngStr = e.latlng.lng.toFixed(6);
|
|
|
|
// Update UI koordinat
|
|
document.getElementById('coordPill').classList.add('show');
|
|
document.getElementById('coordText').textContent = latStr + ', ' + lngStr;
|
|
document.getElementById('locBox').classList.add('filled');
|
|
document.getElementById('locTitle').textContent = '✅ Lokasi ditentukan';
|
|
document.getElementById('locVal').textContent = latStr + ', ' + lngStr;
|
|
document.getElementById('mapHint').textContent = '✅ Lokasi dipilih — klik lagi untuk mengubah';
|
|
document.getElementById('mapHint').classList.add('picked');
|
|
|
|
checkSubmitReady();
|
|
});
|
|
|
|
// =============================================
|
|
// STEP INDICATOR
|
|
// =============================================
|
|
function updateSteps(cur) {
|
|
for (let i = 1; i <= 4; i++) {
|
|
const el = document.getElementById('step' + i);
|
|
el.className = 'step';
|
|
if (i < cur) el.classList.add('done');
|
|
else if (i === cur) el.classList.add('active');
|
|
}
|
|
}
|
|
|
|
// =============================================
|
|
// VALIDASI — enable/disable tombol submit
|
|
// =============================================
|
|
function checkSubmitReady() {
|
|
const ok = pickedLL
|
|
&& document.getElementById('f_kk').value.trim()
|
|
&& document.getElementById('f_jml').value
|
|
&& parseInt(document.getElementById('f_jml').value) > 0
|
|
&& document.getElementById('f_alamat').value.trim()
|
|
&& document.getElementById('f_pelapor').value.trim();
|
|
|
|
document.getElementById('btnSubmit').disabled = !ok;
|
|
|
|
if (ok) updateSteps(4);
|
|
else if (pickedLL) updateSteps(3);
|
|
else updateSteps(2);
|
|
}
|
|
|
|
// Pasang listener ke semua field wajib
|
|
['f_kk','f_jml','f_alamat','f_pelapor'].forEach(id => {
|
|
document.getElementById(id).addEventListener('input', checkSubmitReady);
|
|
});
|
|
|
|
// =============================================
|
|
// FOKUS KE PETA (klik locBox di mobile)
|
|
// =============================================
|
|
function focusMap() {
|
|
document.getElementById('map-lapor').scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
toast('🖱️ Klik di peta untuk menentukan lokasi', '');
|
|
}
|
|
|
|
// =============================================
|
|
// SUBMIT LAPORAN → api_laporan.php
|
|
// =============================================
|
|
function submitLaporan() {
|
|
if (!pickedLL) { toast('⚠️ Pilih lokasi di peta terlebih dahulu', 'err'); return; }
|
|
|
|
const kk = document.getElementById('f_kk').value.trim();
|
|
const jml = document.getElementById('f_jml').value;
|
|
const alamat = document.getElementById('f_alamat').value.trim();
|
|
const pelapor = document.getElementById('f_pelapor').value.trim();
|
|
|
|
if (!kk || !jml || !alamat || !pelapor) {
|
|
toast('⚠️ Lengkapi semua field wajib (*)', 'err');
|
|
return;
|
|
}
|
|
|
|
const btn = document.getElementById('btnSubmit');
|
|
btn.disabled = true;
|
|
btn.textContent = '⏳ Mengirim...';
|
|
|
|
const fd = new FormData();
|
|
fd.append('lat', pickedLL.lat);
|
|
fd.append('lng', pickedLL.lng);
|
|
fd.append('nama_kk', kk);
|
|
fd.append('jumlah_anggota', jml);
|
|
fd.append('alamat', alamat);
|
|
fd.append('tanggal_lahir', document.getElementById('f_tgl_lahir').value || '');
|
|
fd.append('pendidikan_terakhir', document.getElementById('f_pendidikan').value || '');
|
|
fd.append('pekerjaan', document.getElementById('f_pekerjaan').value.trim() || '');
|
|
fd.append('riwayat_penyakit', document.getElementById('f_penyakit').value.trim() || '');
|
|
fd.append('kepemilikan_jaminan', document.getElementById('f_jaminan').value || '');
|
|
fd.append('nama_pelapor', pelapor);
|
|
fd.append('hp_pelapor', document.getElementById('f_hp').value.trim() || '');
|
|
fd.append('hubungan_pelapor', document.getElementById('f_hubungan').value || '');
|
|
fd.append('keterangan', document.getElementById('f_keterangan').value.trim() || '');
|
|
|
|
fetch('api_laporan.php', { method: 'POST', body: fd })
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
if (res.status === 'ok') {
|
|
document.getElementById('sc-ref').textContent = 'ID Laporan: #' + res.id;
|
|
document.getElementById('success-overlay').classList.add('show');
|
|
} else {
|
|
toast('❌ Gagal: ' + (res.pesan || 'Coba lagi'), 'err');
|
|
btn.disabled = false;
|
|
btn.innerHTML = '📤 Kirim Laporan untuk Diverifikasi';
|
|
}
|
|
})
|
|
.catch(() => {
|
|
toast('❌ Koneksi gagal. Periksa jaringan Anda.', 'err');
|
|
btn.disabled = false;
|
|
btn.innerHTML = '📤 Kirim Laporan untuk Diverifikasi';
|
|
});
|
|
}
|
|
|
|
// =============================================
|
|
// RESET — Laporan lagi
|
|
// =============================================
|
|
function resetForm() {
|
|
document.getElementById('success-overlay').classList.remove('show');
|
|
['f_kk','f_jml','f_alamat','f_tgl_lahir','f_pendidikan','f_pekerjaan',
|
|
'f_penyakit','f_jaminan','f_pelapor','f_hp','f_hubungan','f_keterangan']
|
|
.forEach(id => { const el = document.getElementById(id); if (el) el.value = ''; });
|
|
|
|
pickedLL = null;
|
|
if (tempMarker) { mapLapor.removeLayer(tempMarker); tempMarker = null; }
|
|
document.getElementById('coordPill').classList.remove('show');
|
|
document.getElementById('coordText').textContent = '—';
|
|
document.getElementById('locBox').classList.remove('filled');
|
|
document.getElementById('locTitle').textContent = 'Belum dipilih — klik peta';
|
|
document.getElementById('locVal').textContent = 'Klik di peta untuk menentukan koordinat';
|
|
document.getElementById('mapHint').textContent = 'Klik titik lokasi tempat tinggal di peta';
|
|
document.getElementById('mapHint').classList.remove('picked');
|
|
document.getElementById('btnSubmit').disabled = true;
|
|
document.getElementById('btnSubmit').innerHTML = '📤 Kirim Laporan untuk Diverifikasi';
|
|
updateSteps(2);
|
|
}
|
|
|
|
// =============================================
|
|
// TOAST — identik dengan index.php
|
|
// =============================================
|
|
function toast(msg, type) {
|
|
const t = document.getElementById('toast');
|
|
t.textContent = msg;
|
|
t.className = 'show' + (type ? ' ' + type : '');
|
|
setTimeout(() => t.className = '', 3000);
|
|
}
|
|
|
|
// QR Code untuk halaman lapor.php itu sendiri
|
|
window.addEventListener('load', function() {
|
|
const selfUrl = window.location.href;
|
|
new QRCode(document.getElementById('self-qr'), {
|
|
text: selfUrl,
|
|
width: 100,
|
|
height: 100,
|
|
colorDark: '#0b2545',
|
|
colorLight: '#ffffff',
|
|
correctLevel: QRCode.CorrectLevel.M
|
|
});
|
|
});
|
|
// Init
|
|
updateSteps(2);
|
|
</script>
|
|
</body>
|
|
</html> |