feat: menambah popup informasi pada ikon tentang aplikasi
This commit is contained in:
@@ -144,7 +144,7 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
|
||||
</svg>
|
||||
<div class="status-dot"></div>
|
||||
</div>
|
||||
<div class="tool-btn" title="Tentang Aplikasi">
|
||||
<div class="tool-btn" id="about-btn" title="Tentang Aplikasi">
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
@@ -385,6 +385,46 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Modal Tentang Aplikasi -->
|
||||
<div id="about-modal" class="modal-overlay">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>Tentang Aplikasi</h3>
|
||||
<button class="modal-close-btn" id="about-close-btn" title="Tutup">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-logo">
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" width="48" height="48">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="app-title">WebGIS Poverty Map</h4>
|
||||
<p class="app-desc">Sistem Pemetaan Penduduk Miskin Kota Pontianak. Aplikasi ini dirancang untuk memetakan penyebaran penduduk miskin serta mempermudah analisis spasial sebaran bantuan sosial di sekitar fasilitas umum atau rumah ibadah secara dinamis.</p>
|
||||
|
||||
<div class="modal-divider"></div>
|
||||
|
||||
<div class="credits-section">
|
||||
<div class="credit-row">
|
||||
<span class="credit-label">Pengembang:</span>
|
||||
<span class="credit-value">Aleksander William</span>
|
||||
</div>
|
||||
<div class="credit-row">
|
||||
<span class="credit-label">NIM:</span>
|
||||
<span class="credit-value">D1041231003</span>
|
||||
</div>
|
||||
<div class="credit-row">
|
||||
<span class="credit-label">Versi Aplikasi:</span>
|
||||
<span class="credit-value">v1.1.0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-save" id="about-ok-btn">Selesai</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
@@ -940,4 +940,33 @@ window.addEventListener('offline', updateConnectionStatus);
|
||||
|
||||
// Jalankan saat pertama kali dimuat
|
||||
document.addEventListener('DOMContentLoaded', updateConnectionStatus);
|
||||
updateConnectionStatus();
|
||||
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();
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user