Sistem Pemetaan Penduduk Miskin Kota Pontianak. Aplikasi ini dirancang untuk memetakan penyebaran penduduk miskin serta mempermudah analisis spasial sebaran bantuan sosial di sekitar rumah ibadah secara dinamis.
-
+
Pengembang:
diff --git a/WebGISPovertyMap/script.js b/WebGISPovertyMap/script.js
index 15ca0d8..e6be56a 100644
--- a/WebGISPovertyMap/script.js
+++ b/WebGISPovertyMap/script.js
@@ -930,16 +930,33 @@ function closeDashboard() {
// ==========================================
function updateConnectionStatus() {
var statusEl = document.getElementById('connection-status');
- if (!statusEl) return;
+ var mobileStatusEl = document.getElementById('mobile-connection-status');
+ var mobileStatusText = document.getElementById('mobile-connection-text');
if (navigator.onLine) {
- statusEl.classList.remove('offline');
- statusEl.classList.add('online');
- statusEl.setAttribute('title', 'Koneksi Stabil');
+ if (statusEl) {
+ statusEl.classList.remove('offline');
+ statusEl.classList.add('online');
+ statusEl.setAttribute('title', 'Koneksi Stabil');
+ }
+ if (mobileStatusEl) {
+ mobileStatusEl.style.color = '#10b981';
+ }
+ if (mobileStatusText) {
+ mobileStatusText.textContent = 'Online';
+ }
} else {
- statusEl.classList.remove('online');
- statusEl.classList.add('offline');
- statusEl.setAttribute('title', 'Koneksi Terputus - Peta mungkin tidak dimuat sempurna');
+ if (statusEl) {
+ statusEl.classList.remove('online');
+ statusEl.classList.add('offline');
+ statusEl.setAttribute('title', 'Koneksi Terputus - Peta mungkin tidak dimuat sempurna');
+ }
+ if (mobileStatusEl) {
+ mobileStatusEl.style.color = '#ef4444';
+ }
+ if (mobileStatusText) {
+ mobileStatusText.textContent = 'Offline';
+ }
}
}
@@ -955,15 +972,22 @@ updateConnectionStatus();
// 17. MODAL TENTANG APLIKASI
// ==========================================
var aboutBtn = document.getElementById('about-btn');
+var mobileAboutBtn = document.getElementById('mobile-about-btn');
var aboutModal = document.getElementById('about-modal');
var aboutCloseBtn = document.getElementById('about-close-btn');
var aboutOkBtn = document.getElementById('about-ok-btn');
-if (aboutBtn && aboutModal) {
- aboutBtn.addEventListener('click', function (e) {
- e.preventDefault();
- aboutModal.classList.add('active');
- });
+var openAboutModal = function (e) {
+ e.preventDefault();
+ aboutModal.classList.add('active');
+ // Tutup menu mobile jika sedang terbuka
+ var menu = document.getElementById('mobile-menu-dropdown');
+ if (menu) menu.classList.remove('active');
+};
+
+if (aboutModal) {
+ if (aboutBtn) aboutBtn.addEventListener('click', openAboutModal);
+ if (mobileAboutBtn) mobileAboutBtn.addEventListener('click', openAboutModal);
var closeModal = function () {
aboutModal.classList.remove('active');
diff --git a/WebGISPovertyMap/style.css b/WebGISPovertyMap/style.css
index 417c075..68a3230 100644
--- a/WebGISPovertyMap/style.css
+++ b/WebGISPovertyMap/style.css
@@ -468,6 +468,14 @@ body {
flex-shrink: 0;
}
+.hamburger-menu-btn {
+ display: none;
+}
+
+.mobile-menu-dropdown {
+ display: none;
+}
+
.tool-btn {
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.1);
@@ -1758,9 +1766,128 @@ body {
gap: 4px;
}
- .tool-btn {
- width: 30px;
- height: 30px;
+ .header-tools-divider,
+ .user-profile-menu,
+ .auth-btn,
+ #connection-status,
+ #about-btn {
+ display: none !important;
+ }
+
+ .hamburger-menu-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: rgba(255, 255, 255, 0.07);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ border-radius: 8px;
+ width: 34px;
+ height: 34px;
+ color: #94a3b8;
+ cursor: pointer;
+ transition: all 0.15s;
+ }
+
+ .hamburger-menu-btn:hover {
+ background: rgba(255, 255, 255, 0.12);
+ color: #e2e8f0;
+ }
+
+ .hamburger-menu-btn svg {
+ width: 18px;
+ height: 18px;
+ }
+
+ .mobile-menu-dropdown {
+ position: absolute;
+ top: calc(100% + 8px);
+ right: 10px;
+ width: 200px;
+ background: rgba(15, 23, 42, 0.96);
+ backdrop-filter: blur(16px);
+ -webkit-backdrop-filter: blur(16px);
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ border-radius: var(--radius-md);
+ box-shadow: var(--shadow-lg);
+ padding: 8px;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ z-index: 1250;
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(-8px) scale(0.95);
+ transform-origin: top right;
+ transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+ }
+
+ .mobile-menu-dropdown.active {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0) scale(1);
+ display: flex;
+ }
+
+ .mobile-menu-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 10px 12px;
+ font-size: 13px;
+ font-weight: 600;
+ color: #cbd5e1;
+ text-decoration: none;
+ border-radius: 6px;
+ transition: all 0.15s ease;
+ cursor: pointer;
+ }
+
+ .mobile-menu-item:hover {
+ background: rgba(255, 255, 255, 0.05);
+ color: #f1f5f9;
+ }
+
+ .mobile-menu-item svg {
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+ }
+
+ .mobile-menu-divider {
+ height: 1px;
+ background: rgba(255, 255, 255, 0.06);
+ margin: 4px 6px;
+ }
+
+ .mobile-menu-user {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 8px 12px;
+ }
+
+ .mobile-avatar {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ border: 1.5px solid var(--primary);
+ object-fit: cover;
+ }
+
+ .mobile-username {
+ font-size: 13px;
+ font-weight: 700;
+ color: #f8fafc;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 130px;
+ }
+
+ .mobile-role {
+ font-size: 10.5px;
+ color: #64748b;
+ margin-top: 1px;
}
/* Sidebar Full-width (100%) */
; ?>)
+