From c6d8b34f5601a251fe1a31443cae7a734809e1d6 Mon Sep 17 00:00:00 2001 From: Aleksander William Date: Tue, 9 Jun 2026 23:37:47 +0700 Subject: [PATCH] feat: menambah popup informasi pada ikon tentang aplikasi --- WebGISPovertyMap/index.php | 42 +++++++++- WebGISPovertyMap/script.js | 31 +++++++- WebGISPovertyMap/style.css | 157 +++++++++++++++++++++++++++++++++++++ 3 files changed, 228 insertions(+), 2 deletions(-) diff --git a/WebGISPovertyMap/index.php b/WebGISPovertyMap/index.php index 34d543e..a8dc6f8 100644 --- a/WebGISPovertyMap/index.php +++ b/WebGISPovertyMap/index.php @@ -144,7 +144,7 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
-
+
@@ -385,6 +385,46 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin'; }); + + + diff --git a/WebGISPovertyMap/script.js b/WebGISPovertyMap/script.js index a34a469..9beb7d5 100644 --- a/WebGISPovertyMap/script.js +++ b/WebGISPovertyMap/script.js @@ -940,4 +940,33 @@ window.addEventListener('offline', updateConnectionStatus); // Jalankan saat pertama kali dimuat document.addEventListener('DOMContentLoaded', updateConnectionStatus); -updateConnectionStatus(); \ No newline at end of file +updateConnectionStatus(); + +// ========================================== +// 17. MODAL TENTANG APLIKASI +// ========================================== +var aboutBtn = document.getElementById('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 closeModal = function () { + aboutModal.classList.remove('active'); + }; + + if (aboutCloseBtn) aboutCloseBtn.addEventListener('click', closeModal); + if (aboutOkBtn) aboutOkBtn.addEventListener('click', closeModal); + + // Tutup modal jika klik area luar modal-content + aboutModal.addEventListener('click', function (e) { + if (e.target === aboutModal) { + closeModal(); + } + }); +} \ No newline at end of file diff --git a/WebGISPovertyMap/style.css b/WebGISPovertyMap/style.css index 12b7891..9d8b018 100644 --- a/WebGISPovertyMap/style.css +++ b/WebGISPovertyMap/style.css @@ -2449,4 +2449,161 @@ body { .leaflet-bottom.leaflet-right .leaflet-control-layers-list { padding: 4px !important; +} + +/* ============================ + MODAL TENTANG APLIKASI + ============================ */ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(15, 23, 42, 0.6); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + z-index: 2000; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + pointer-events: none; + transition: opacity 0.3s ease; +} + +.modal-overlay.active { + opacity: 1; + pointer-events: auto; +} + +.modal-content { + background: #1e293b; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: var(--radius-lg); + width: 90%; + max-width: 460px; + box-shadow: var(--shadow-lg), 0 20px 25px -5px rgba(0, 0, 0, 0.5); + overflow: hidden; + transform: scale(0.95); + transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +.modal-overlay.active .modal-content { + transform: scale(1); +} + +.modal-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px 20px; + border-bottom: 1px solid rgba(255, 255, 255, 0.06); +} + +.modal-header h3 { + margin: 0; + font-size: 16px; + font-weight: 700; + color: #f1f5f9; +} + +.modal-close-btn { + background: transparent; + border: none; + color: #94a3b8; + font-size: 24px; + cursor: pointer; + line-height: 1; + padding: 0; + transition: color 0.15s; +} + +.modal-close-btn:hover { + color: #f1f5f9; +} + +.modal-body { + padding: 24px 20px; + text-align: center; +} + +.modal-logo { + width: 64px; + height: 64px; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(96, 165, 250, 0.15)); + border: 1px solid rgba(96, 165, 250, 0.25); + border-radius: 16px; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 16px; + color: #60a5fa; +} + +.modal-logo svg { + width: 32px; + height: 32px; +} + +.app-title { + margin: 0 0 8px 0; + font-size: 18px; + font-weight: 700; + color: #ffffff; + letter-spacing: -0.3px; +} + +.app-desc { + font-size: 13px; + color: #94a3b8; + line-height: 1.6; + margin: 0 0 20px 0; + text-align: justify; +} + +.modal-divider { + height: 1px; + background: rgba(255, 255, 255, 0.06); + margin: 20px 0; +} + +.credits-section { + background: rgba(15, 23, 42, 0.4); + border-radius: var(--radius-md); + padding: 14px 16px; + border: 1px solid rgba(255, 255, 255, 0.04); +} + +.credit-row { + display: flex; + justify-content: space-between; + font-size: 12.5px; + margin-bottom: 8px; +} + +.credit-row:last-child { + margin-bottom: 0; +} + +.credit-label { + color: #64748b; + font-weight: 500; +} + +.credit-value { + color: #e2e8f0; + font-weight: 600; +} + +.modal-footer { + display: flex; + justify-content: flex-end; + padding: 14px 20px; + background: rgba(15, 23, 42, 0.3); + border-top: 1px solid rgba(255, 255, 255, 0.06); +} + +.modal-footer .btn { + min-width: 90px; } \ No newline at end of file