From 092f11bd9f2568f84fab039ea7e1b3217caa60e4 Mon Sep 17 00:00:00 2001 From: Gian_Aryanta_Putra_Lingga Date: Sat, 6 Jun 2026 12:14:35 +0000 Subject: [PATCH] Upload files to "/" --- App.css | 184 +++++++++++++++++ App.jsx | 574 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ hero.png | Bin 0 -> 13057 bytes index.css | 332 +++++++++++++++++++++++++++++++ main.jsx | 13 ++ 5 files changed, 1103 insertions(+) create mode 100644 App.css create mode 100644 App.jsx create mode 100644 hero.png create mode 100644 index.css create mode 100644 main.jsx diff --git a/App.css b/App.css new file mode 100644 index 0000000..f90339d --- /dev/null +++ b/App.css @@ -0,0 +1,184 @@ +.counter { + font-size: 16px; + padding: 5px 10px; + border-radius: 5px; + color: var(--accent); + background: var(--accent-bg); + border: 2px solid transparent; + transition: border-color 0.3s; + margin-bottom: 24px; + + &:hover { + border-color: var(--accent-border); + } + &:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; + } +} + +.hero { + position: relative; + + .base, + .framework, + .vite { + inset-inline: 0; + margin: 0 auto; + } + + .base { + width: 170px; + position: relative; + z-index: 0; + } + + .framework, + .vite { + position: absolute; + } + + .framework { + z-index: 1; + top: 34px; + height: 28px; + transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) + scale(1.4); + } + + .vite { + z-index: 0; + top: 107px; + height: 26px; + width: auto; + transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) + scale(0.8); + } +} + +#center { + display: flex; + flex-direction: column; + gap: 25px; + place-content: center; + place-items: center; + flex-grow: 1; + + @media (max-width: 1024px) { + padding: 32px 20px 24px; + gap: 18px; + } +} + +#next-steps { + display: flex; + border-top: 1px solid var(--border); + text-align: left; + + & > div { + flex: 1 1 0; + padding: 32px; + @media (max-width: 1024px) { + padding: 24px 20px; + } + } + + .icon { + margin-bottom: 16px; + width: 22px; + height: 22px; + } + + @media (max-width: 1024px) { + flex-direction: column; + text-align: center; + } +} + +#docs { + border-right: 1px solid var(--border); + + @media (max-width: 1024px) { + border-right: none; + border-bottom: 1px solid var(--border); + } +} + +#next-steps ul { + list-style: none; + padding: 0; + display: flex; + gap: 8px; + margin: 32px 0 0; + + .logo { + height: 18px; + } + + a { + color: var(--text-h); + font-size: 16px; + border-radius: 6px; + background: var(--social-bg); + display: flex; + padding: 6px 12px; + align-items: center; + gap: 8px; + text-decoration: none; + transition: box-shadow 0.3s; + + &:hover { + box-shadow: var(--shadow); + } + .button-icon { + height: 18px; + width: 18px; + } + } + + @media (max-width: 1024px) { + margin-top: 20px; + flex-wrap: wrap; + justify-content: center; + + li { + flex: 1 1 calc(50% - 8px); + } + + a { + width: 100%; + justify-content: center; + box-sizing: border-box; + } + } +} + +#spacer { + height: 88px; + border-top: 1px solid var(--border); + @media (max-width: 1024px) { + height: 48px; + } +} + +.ticks { + position: relative; + width: 100%; + + &::before, + &::after { + content: ''; + position: absolute; + top: -4.5px; + border: 5px solid transparent; + } + + &::before { + left: 0; + border-left-color: var(--border); + } + &::after { + right: 0; + border-right-color: var(--border); + } +} diff --git a/App.jsx b/App.jsx new file mode 100644 index 0000000..63a518f --- /dev/null +++ b/App.jsx @@ -0,0 +1,574 @@ +import React, { useState, useEffect } from 'react'; +import { MapContainer, TileLayer, Marker, Popup, Circle, Polyline, Polygon, useMapEvents, LayersControl, LayerGroup, useMap } from 'react-leaflet'; +import L from 'leaflet'; +import 'leaflet/dist/leaflet.css'; +import markerIconPng from "leaflet/dist/images/marker-icon.png"; +import markerShadowPng from "leaflet/dist/images/marker-shadow.png"; + +// Pengaturan Default Marker Objek +const DefaultIcon = L.icon({ + iconUrl: markerIconPng, + shadowUrl: markerShadowPng, + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], +}); +L.Marker.prototype.options.icon = DefaultIcon; + +// Pengaturan Marker Kustom Penduduk Miskin +const MiskinIcon = L.divIcon({ + className: 'custom-miskin-marker', + html: `
`, + iconSize: [12, 12], + iconAnchor: [6, 6] +}); + +// Pengaturan Marker Kustom Rumah Ibadah +const IbadahIcon = L.icon({ + iconUrl: markerIconPng, + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], +}); + +// Fungsi Parser Geometri GeoJSON dari PostGIS +const parsePoint = (geom) => [geom.coordinates[1], geom.coordinates[0]]; +const parseLineString = (geom) => geom.coordinates.map(coord => [coord[1], coord[0]]); +const parsePolygon = (geom) => geom.coordinates.map(ring => ring.map(coord => [coord[1], coord[0]])); + +// Fungsi Decoder Polyline OSRM Manual (Pastikan ini ada agar tidak undefined) +const decodeOSRMPoints = (str, precision) => { + var index = 0, lat = 0, lng = 0, coordinates = [], shift = 0, result = 0, byte = null, lat_change, lng_change, factor = Math.pow(10, precision || 5); + while (index < str.length) { + byte = null; shift = 0; result = 0; + do { byte = str.charCodeAt(index++) - 63; result |= (byte & 0x1f) << shift; shift += 5; } while (byte >= 0x20); + lat_change = ((result & 1) ? ~(result >> 1) : (result >> 1)); lat += lat_change; + byte = null; shift = 0; result = 0; + do { byte = str.charCodeAt(index++) - 63; result |= (byte & 0x1f) << shift; shift += 5; } while (byte >= 0x20); + lng_change = ((result & 1) ? ~(result >> 1) : (result >> 1)); lng += lng_change; + coordinates.push([lat / factor, lng / factor]); + } + return coordinates; +}; + +// Listener Klik Peta Universal +function MapClickHandler({ activeMode, onMapClick }) { + useMapEvents({ + click(e) { + if (activeMode) { + onMapClick(e.latlng.lat, e.latlng.lng); + } + }, + }); + return null; +} + +// ❇️ MENAMBAHKAN DEKLARASI MAP VIEW UPDATER AGAR TIDAK ERROR REFERENCE +function MapViewUpdater({ center }) { + const map = useMap(); + useEffect(() => { + if (center) { + map.setView(center, map.getZoom()); + } + }, [center, map]); + return null; +} + +// Sub-Komponen Form Penduduk Miskin (Fokus hanya pada Input Formulir) +function PendudukMiskinForm({ selectedLat, selectedLng, onSaveSuccess, onClose }) { + const [kepalaKeluarga, setKepalaKeluarga] = useState(''); + const [jumlahAnggota, setJumlahAnggota] = useState(1); + const [statusBantuan, setStatusBantuan] = useState(0); + const [jenisBantuan, setJenisBantuan] = useState([]); + + const opsiBantuan = [ + 'BPJS_Kesehatan', 'PKH', 'PIP/KIP', 'Bansos_Tunai', 'BPNT/Sembako', 'Santunan Anak Yatim-Piatu' + ]; + + const handleCheckboxChange = (bantuan) => { + if (jenisBantuan.includes(bantuan)) { + setJenisBantuan(jenisBantuan.filter((item) => item !== bantuan)); + } else { + setJenisBantuan([...jenisBantuan, bantuan]); + } + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + const payload = { + kepala_keluarga: kepalaKeluarga, + jumlah_anggota: parseInt(jumlahAnggota), + status_bantuan: parseInt(statusBantuan), + jenis_bantuan: jenisBantuan, + lat: selectedLat, + lng: selectedLng + }; + + try { + const response = await fetch('http://localhost:5000/api/miskin/create', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(payload) + }); + const result = await response.json(); + if (result.status === 'success') { + alert(`Data Berhasil Disimpan!\nID Ibadah Terdekat: ${result.closest_hub}`); + onSaveSuccess(); + onClose(); + } else { + alert(`Gagal menyimpan data: ${result.message}`); + } + } catch (error) { + console.error('Error fetching data:', error); + alert('Terjadi kesalahan jaringan saat menyimpan data.'); + } + }; + + return ( +
+
+ + setKepalaKeluarga(e.target.value)} /> +
+
+ + setJumlahAnggota(e.target.value)} /> +
+
+ + +
+ + {parseInt(statusBantuan) === 1 && ( +
+ +
+ {opsiBantuan.map((bantuan) => ( +
+ handleCheckboxChange(bantuan)} + style={{ marginRight: '8px' }} + /> + +
+ ))} +
+
+ )} + +

+ Koordinat Terpilih: {selectedLat?.toFixed(5)}, {selectedLng?.toFixed(5)} +

+ +
+ ); +} + +// Komponen Legenda Spasial +function MapLegend() { + const map = useMap(); + useEffect(() => { + const legend = L.control({ position: 'bottomright' }); + legend.onAdd = () => { + const div = L.DomUtil.create('div', 'info legend'); + div.style.background = 'white'; div.style.padding = '12px'; div.style.borderRadius = '8px'; + div.style.boxShadow = '0 2px 6px rgba(0,0,0,0.3)'; div.style.fontSize = '13px'; div.style.lineHeight = '20px'; div.style.color = '#333'; + div.innerHTML = ` +

Legenda Peta

+
Tempat Ibadah:
Radius Pelayanan (300m+)
+
Kesejahteraan:
Penduduk Miskin
+
Jaringan Jalan:
Jln Nasional
Jln Provinsi
Jln Kabupaten
+
Batas Sektoral:
Wilayah / Area Sektor
`; + return div; + }; + legend.addTo(map); + return () => { legend.remove(); }; + }, [map]); + return null; +} + +const getIbadahEmoji = (jenis) => { + if (!jenis) return 'πŸ“'; // Jaga-jaga jika nilainya null/undefined + switch(jenis.toLowerCase()) { + case 'masjid': return 'πŸ•Œ'; + case 'gereja': return 'β›ͺ'; + case 'vihara': return 'πŸ›•'; + case 'klenteng': return '⛩️'; + case 'pura': return 'πŸ•'; + default: return 'πŸ“'; + } +}; + +// Pengaturan Style Warna Garis Jalan Berdasarkan Klasifikasi Database +const getJalanStyle = (status) => { + switch(status) { + case 'Jln Nasional': return { color: '#0000ff', weight: 5 }; + case 'Jln Provinsi': return { color: '#008000', weight: 4 }; + default: return { color: '#ffff00', weight: 3 }; + } +}; + +function App() { + const pontianakCenter = [-0.0263, 109.3425]; + + const [dataJalan, setDataJalan] = useState([]); + const [dataArea, setDataArea] = useState([]); + const [dataIbadah, setDataIbadah] = useState([]); + const [dataMiskin, setDataMiskin] = useState([]); + const [isRoutingLoading, setIsRoutingLoading] = useState(false); + const [routingCoords, setRoutingCoords] = useState([]); + + const [activeInsertionMode, setActiveInsertionMode] = useState(null); + const [drawCoords, setDrawCoords] = useState([]); + const [showModal, setShowModal] = useState(false); + + const [formJalan, setFormJalan] = useState({ nama: '', status: 'Jln Kabupaten' }); + const [formArea, setFormArea] = useState({ nama: '' }); + const [formIbadah, setFormIbadah] = useState({ nama: '', jenis: 'masjid', kontak: '', radius: 300 }); + + const loadAllData = () => { + fetch('http://localhost:5000/api/jalan').then(res => res.json()).then(data => setDataJalan(data)); + fetch('http://localhost:5000/api/area').then(res => res.json()).then(data => setDataArea(data)); + fetch('http://localhost:5000/api/ibadah').then(res => res.json()).then(data => setDataIbadah(data)); + fetch('http://localhost:5000/api/miskin').then(res => res.json()).then(data => setDataMiskin(data)); + }; + + useEffect(() => { loadAllData(); }, []); + + // Fungsi Routing Network Terpusat (Dikendalikan oleh Komponen App Utama) + const handleFetchRoute = async (miskinLat, miskinLng, idIbadahTerdekat) => { + setIsRoutingLoading(true); + const ibadahTerdekat = dataIbadah.find(i => i.id === idIbadahTerdekat); + + if (!ibadahTerdekat || !ibadahTerdekat.geom) { + alert("Maaf, data rincian koordinat Rumah Ibadah terdekat tidak ditemukan."); + setIsRoutingLoading(false); + return; + } + + const [ibadahLng, ibadahLat] = ibadahTerdekat.geom.coordinates; + + try { + const url = `https://router.project-osrm.org/route/v1/driving/${ibadahLng},${ibadahLat};${miskinLng},${miskinLat}?overview=full&geometries=polyline`; + const response = await fetch(url); + const data = await response.json(); + + if (data.code === 'Ok' && data.routes.length > 0) { + const encodedRoute = data.routes[0].geometry; + const decodedCoords = decodeOSRMPoints(encodedRoute); + setRoutingCoords(decodedCoords); + } else { + alert("Gagal memetakan rute jalan resmi."); + } + } catch (error) { + console.error(error); + alert("Koneksi rute OSRM terputus."); + } finally { + setIsRoutingLoading(false); + } + }; + + const handleToolbarToggle = (mode) => { + setActiveInsertionMode(activeInsertionMode === mode ? null : mode); + setDrawCoords([]); + }; + + const handleMapClick = (lat, lng) => { + if (activeInsertionMode === 'ibadah' || activeInsertionMode === 'miskin') { + setDrawCoords([[lat, lng]]); + setShowModal(true); + } else if (activeInsertionMode === 'jalan' || activeInsertionMode === 'area') { + setDrawCoords([...drawCoords, [lat, lng]]); + } + }; + + const closeModal = () => { + setShowModal(false); + setDrawCoords([]); + setActiveInsertionMode(null); + setFormJalan({ nama: '', status: 'Jln Kabupaten' }); + setFormArea({ nama: '' }); + setFormIbadah({ nama: '', jenis: 'masjid', kontak: '', radius: 300 }); + }; + + const submitJalanForm = (e) => { + e.preventDefault(); + fetch('http://localhost:5000/api/jalan/create', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ ...formJalan, coords: drawCoords }) + }) + .then(res => res.json()) + .then((result) => { + if (result.status === 'success') { + alert("Jalan Berhasil Disimpan!"); loadAllData(); closeModal(); + } else { alert("Gagal menyimpan jalan: " + result.message); } + }).catch(err => alert("Terjadi kesalahan jaringan.")); + }; + + const submitAreaForm = (e) => { + e.preventDefault(); + fetch('http://localhost:5000/api/area/create', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ ...formArea, coords: drawCoords }) + }) + .then(res => res.json()) + .then((result) => { + if (result.status === 'success') { + alert("Area Berhasil Disimpan!"); loadAllData(); closeModal(); + } else { alert("Gagal menyimpan area: " + result.message); } + }).catch(err => alert("Terjadi kesalahan jaringan.")); + }; + + const submitIbadahForm = (e) => { + e.preventDefault(); + fetch('http://localhost:5000/api/ibadah/create', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ ...formIbadah, lat: drawCoords[0][0], lng: drawCoords[0][1] }) + }) + .then(res => res.json()) + .then((result) => { + if (result.status === 'success') { + alert("Rumah Ibadah Berhasil Disimpan!"); loadAllData(); closeModal(); + } else { alert("Gagal menyimpan rumah ibadah: " + result.message); } + }).catch(err => alert("Terjadi kesalahan jaringan.")); + }; + + return ( +
+ + {/* Action Toolbar */} +
+ + + + + + {(activeInsertionMode === 'jalan' || activeInsertionMode === 'area') && drawCoords.length > 1 && ( + + )} +
+ + {/* MAP CONTAINER UTAMA */} + + + + + + + + + + + + + + {/* 1. LAYER GROUP UNTUK JALAN */} + + + {dataJalan.map(j => { + if (!j.geom) return null; + const pathOptions = getJalanStyle(j.status_jalan); + return ( + + Nama Jalan: {j.nama_jalan || 'Tanpa Nama'}
Status: {j.status_jalan} + + ); + })} + + + + {/* 2. LAYER GROUP UNTUK AREA BANJIR */} + + + {dataArea.map(a => { + if (!a.geom) return null; + return ( + + Area Wilayah Sektor: {a.nama_area || 'Sektor'} + + ); + })} + + + + {/* 3. LAYER GROUP UNTUK RUMAH IBADAH (DENGAN RADIUS DINAMIS) */} + + + {dataIbadah.map(i => { + if (!i.geom) return null; + const [ibadahLat, ibadahLng] = parsePoint(i.geom); + return ( + + + {/* πŸ”΅ PERBAIKAN: Menggunakan i.radius sesuai properti dari database */} + + + {/* Marker Rumah Ibadah */} + + + {getIbadahEmoji(i.jenis_ibadah || 'lainnya')} {i.nama_ibadah}
+ Jenis: {(i.jenis_ibadah?.toUpperCase()) || 'LAINNYA'}
+ Kontak: {i.kontak || '-'}
+ {/* Sesuai dengan properti i.radius */} + Radius Aksi: {i.radius || 0} meter + + + + + ); + })} + + + + {/* 4. LOOPING DATA PENDUDUK MISKIN YANG BENAR (Di dalam Peta) */} + + + {dataMiskin.map(m => { + if (!m.geom) return null; + const [miskinLat, miskinLng] = parsePoint(m.geom); + return ( + + +
+

πŸ‘€ Kepala Keluarga: {m.kepala_keluarga}

+

πŸ‘₯ Jumlah Anggota: {m.jumlah_anggota} Jiwa

+

πŸ“¦ Bantuan: {m.jenis_bantuan && m.jenis_bantuan.length > 0 ? m.jenis_bantuan.join(', ') : 'Belum menerima'}

+

πŸ•Œ Hub Terdekat ID: {m.id_ibadah_terdekat || 'Kosong'}

+
+ +
+ + + ); + })} + + + + + {/* RENDERING JALUR RUTE NYATA */} + {routingCoords.length > 0 && ( + + )} + + {/* CONTROLLER EVENT MAP */} + + + + + + + {/* Modal Input Overlay */} + {showModal && ( +
+
+
+

Tambah Data {activeInsertionMode?.toUpperCase()}

+ +
+ + {activeInsertionMode === 'jalan' && ( +
+
+ setFormJalan({...formJalan, nama: e.target.value})} /> +
+
+ +
+ +
+ )} + + {activeInsertionMode === 'area' && ( +
+
+ setFormArea({...formArea, nama: e.target.value})} /> +
+ +
+ )} + + {activeInsertionMode === 'ibadah' && ( +
+
+ + setFormIbadah({...formIbadah, nama: e.target.value})} /> +
+
+ + +
+
+ + setFormIbadah({...formIbadah, kontak: e.target.value})} /> +
+
+ + setFormIbadah({...formIbadah, radius: parseInt(e.target.value)})} /> +
+ +
+ )} + + {activeInsertionMode === 'miskin' && drawCoords.length > 0 && ( + { loadAllData(); closeModal(); }} + /> + )} +
+
+ )} +
+ ); +} + +export default App; \ No newline at end of file diff --git a/hero.png b/hero.png new file mode 100644 index 0000000000000000000000000000000000000000..02251f4b956c55af2d76fd0788124d7eee2b45eb GIT binary patch literal 13057 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 P00000NkvXXu0mjft=yBf literal 0 HcmV?d00001 diff --git a/index.css b/index.css new file mode 100644 index 0000000..c264126 --- /dev/null +++ b/index.css @@ -0,0 +1,332 @@ +:root { + --text: #6b6375; + --text-h: #08060d; + --bg: #fff; + --border: #e5e4e7; + --code-bg: #f4f3ec; + --accent: #aa3bff; + --accent-bg: rgba(170, 59, 255, 0.1); + --accent-border: rgba(170, 59, 255, 0.5); + --social-bg: rgba(244, 243, 236, 0.5); + --shadow: + rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; + + --sans: system-ui, 'Segoe UI', Roboto, sans-serif; + --heading: system-ui, 'Segoe UI', Roboto, sans-serif; + --mono: ui-monospace, Consolas, monospace; + + font: 18px/145% var(--sans); + letter-spacing: 0.18px; + color-scheme: light dark; + color: var(--text); + background: var(--bg); + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + @media (max-width: 1024px) { + font-size: 16px; + } +} + +@media (prefers-color-scheme: dark) { + :root { + --text: #9ca3af; + --text-h: #f3f4f6; + --bg: #16171d; + --border: #2e303a; + --code-bg: #1f2028; + --accent: #c084fc; + --accent-bg: rgba(192, 132, 252, 0.15); + --accent-border: rgba(192, 132, 252, 0.5); + --social-bg: rgba(47, 48, 58, 0.5); + --shadow: + rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px; + } + + #social .button-icon { + filter: invert(1) brightness(2); + } +} + +body { + margin: 0; + padding: 0; +} + +#root { + width: 100vw; + height: 100vh; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + box-sizing: border-box; +} + +h1, +h2 { + font-family: var(--heading); + font-weight: 500; + color: var(--text-h); +} + +h1 { + font-size: 56px; + letter-spacing: -1.68px; + margin: 32px 0; + @media (max-width: 1024px) { + font-size: 36px; + margin: 20px 0; + } +} +h2 { + font-size: 24px; + line-height: 118%; + letter-spacing: -0.24px; + margin: 0 0 8px; + @media (max-width: 1024px) { + font-size: 20px; + } +} +p { + margin: 0; +} + +code, +.counter { + font-family: var(--mono); + display: inline-flex; + border-radius: 4px; + color: var(--text-h); +} + +code { + font-size: 15px; + line-height: 135%; + padding: 4px 8px; + background: var(--code-bg); +} + +/* Custom Floating Map Legend styling */ +.map-legend { + position: absolute; + bottom: 30px; + right: 20px; + background: white; + padding: 12px 16px; + border-radius: 4px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); + font-family: system-ui, -apple-system, sans-serif; + font-size: 14px; + color: #333; + z-index: 1000; /* Keeps it layered above the Leaflet tiles canvas */ + min-width: 150px; +} + +.legend-section { + display: flex; + flex-direction: column; + gap: 8px; +} + +.legend-item { + display: flex; + align-items: center; + gap: 12px; +} + +.legend-label { + font-weight: 500; +} + +.legend-divider { + border: 0; + border-top: 1px solid #ccc; + margin: 10px 0; +} + +/* Icon Representation Geometries */ +.legend-icon { + font-size: 16px; + display: inline-flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; +} + +.circle-orange { + width: 12px; + height: 12px; + background-color: #ff9f00; + border-radius: 50%; + margin-left: 2px; +} + +/* Line Assets styling */ +.legend-line { + width: 20px; + height: 4px; + border-radius: 2px; + display: inline-block; +} + +.line-blue { background-color: #0000ff; } +.line-green { background-color: #008000; } +.line-yellow { background-color: #ffff00; } + +/* Polygon Box Assets styling */ +.legend-box { + width: 18px; + height: 14px; + display: inline-block; + border-radius: 2px; +} + +.box-purple { + background-color: rgba(128, 0, 128, 0.4); + border: 2px solid purple; +} + +/* Floating Pill-shaped Menu Bar styling */ +.map-action-bar { + position: absolute; + top: 12px; + left: 60px; /* Shifts it right over so it clears the map zoom panel */ + background: white; + padding: 6px 14px; + border-radius: 30px; /* Soft round pill border design edge */ + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); + font-family: system-ui, -apple-system, sans-serif; + z-index: 1000; /* Pushes element visibility above standard base map layer */ + display: flex; + align-items: center; + gap: 16px; +} + +.action-btn { + background: transparent; + border: none; + font-size: 14px; + font-weight: 600; + color: #1a1a1a; + cursor: pointer; + padding: 6px 10px; + border-radius: 20px; + transition: all 0.2s ease; +} + +/* Hover style template to test structural responsiveness */ +.action-btn:hover { + background-color: #f3f4f6; + color: #000; +} + +.action-btn.active { + background-color: #e0e7ff; + color: #4f46e5; + border: 1px solid #c7d2fe; +} + +.font-medium { + font-weight: 600; +} + +/* Specific formatting adjustments for the Location marker */ +.location-btn { + color: #0026e6; + display: flex; + align-items: center; + gap: 4px; +} + +.location-btn:hover { + background-color: rgba(0, 38, 230, 0.08); +} + +.pin-emoji { + font-size: 14px; +} + +/* Insertion Toolbar Highlight Styling */ +.action-btn.btn-insert.inserting { + background-color: #f59e0b !important; + color: white !important; + border-color: #d97706 !important; + font-weight: bold; +} + +/* Modal Overlay Framework wrapper */ +.custom-modal-overlay { + position: absolute; + top: 0; left: 0; right: 0; bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + display: flex; justify-content: center; align-items: center; + z-index: 9999; /* Higher than Leaflet overlays */ +} + +.custom-modal-container { + background: white; + padding: 24px; + border-radius: 12px; + width: 450px; + max-height: 85vh; + overflow-y: auto; + box-shadow: 0 10px 25px rgba(0,0,0,0.2); + font-family: 'Segoe UI', Roboto, sans-serif; +} + +.modal-header { + display: flex; justify-content: space-between; align-items: center; + margin-bottom: 12px; +} +.modal-header h2 { margin: 0; font-size: 1.4rem; color: #1f2937; } +.close-x-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: #9ca3af; } +.close-x-btn:hover { color: #111827; } + +.coord-badge { + background-color: #f3f4f6; color: #4b5563; + padding: 8px 12px; border-radius: 6px; + font-size: 0.85rem; font-family: monospace; margin-bottom: 16px; +} + +.form-group { margin-bottom: 14px; display: flex; flex-direction: column; } +.form-group label { font-size: 0.85rem; font-weight: 600; margin-bottom: 5px; color: #4b5563; } +.form-group input, .form-group select { + padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.9rem; +} +.form-group input:focus, .form-group select:focus { + outline: none; border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1); +} + +/* Checkbox alignment metrics */ +.checkbox-grid { + display: grid; grid-template-columns: 1fr; gap: 6px; + background: #f9fafb; padding: 10px; border-radius: 6px; border: 1px solid #e5e7eb; +} +.check-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; cursor: pointer; } + +.submit-btn { + width: 100%; padding: 10px; border: none; border-radius: 6px; + font-weight: 600; font-size: 1rem; cursor: pointer; transition: background 0.2s; color: white; +} +.submit-btn.save-ibadah { background-color: #2563eb; } +.submit-btn.save-ibadah:hover { background-color: #1d4ed8; } +.submit-btn.save-miskin { background-color: #dc2626; } +.submit-btn.save-miskin:hover { background-color: #b91c1c; } + +.finish-draw-btn { + background-color: #10b981; + color: white; + border: 1px solid #059669; + padding: 8px 14px; + border-radius: 6px; + font-weight: bold; + cursor: pointer; + animation: pulse 2s infinite; +} +.finish-draw-btn:hover { + background-color: #059669; +} \ No newline at end of file diff --git a/main.jsx b/main.jsx new file mode 100644 index 0000000..ce6ae98 --- /dev/null +++ b/main.jsx @@ -0,0 +1,13 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App.jsx' +import './index.css' + +// Add this line right here! +import 'leaflet/dist/leaflet.css' + +ReactDOM.createRoot(document.getElementById('root')).render( + + + , +) \ No newline at end of file