naufalzakyramadhan/D1041231071_UAS-Tugas_WebGISProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update admin light/dark mode

Browse Source
This commit is contained in:
naukyy
2026-06-13 00:31:36 +07:00
parent 2c123f5af2
commit 1c96173d55
28 changed files with 2703 additions and 775 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webgis_app/panel_user/buat_laporan.php
+9 -5
View File
@@ -1,4 +1,4 @@
<?php
<?php
require_once __DIR__ . '/../core_config/database.php';
require_once __DIR__ . '/../core_config/middleware_auth.php';
requireRole('user');
@@ -107,10 +107,10 @@ function badgeStatus($status) {
</div>
<div class="form-group">
<label class="form-label">Pilih Lokasi di Peta *</label>
<div id="miniMapTambah" style="height:200px;border-radius:8px;border:1px solid #E5E7EB;margin-bottom:10px;z-index:1;"></div>
<div id="miniMapTambah" style="height:200px;border-radius:8px;border:1px solid var(--border-light);margin-bottom:10px;z-index:1;"></div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
<input type="number" name="lat" id="latTambah" class="form-control" placeholder="Latitude" step="any" required readonly style="background:#F9FAFB;">
<input type="number" name="lng" id="lngTambah" class="form-control" placeholder="Longitude" step="any" required readonly style="background:#F9FAFB;">
<input type="number" name="lat" id="latTambah" class="form-control" placeholder="Latitude" step="any" required readonly style="background:var(--bg-base); border-color:var(--border-light);">
<input type="number" name="lng" id="lngTambah" class="form-control" placeholder="Longitude" step="any" required readonly style="background:var(--bg-base); border-color:var(--border-light);">
</div>
</div>
</form>
@@ -134,7 +134,11 @@ window.openModal = function(id) {
setTimeout(() => {
if(!miniMap) {
miniMap = L.map('miniMapTambah').setView([-0.0583, 109.3448], 13);
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png').addTo(miniMap);
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
const tileUrl = isDark
? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png';
L.tileLayer(tileUrl).addTo(miniMap);
miniMap.on('click', function(e) {
const lat = e.latlng.lat;
const lng = e.latlng.lng;
webgis_app/panel_user/index.php
+4 -4
View File
@@ -1,4 +1,4 @@
<?php
<?php
require_once __DIR__ . '/../core_config/database.php';
require_once __DIR__ . '/../core_config/middleware_auth.php';
requireRole('user');
@@ -39,7 +39,7 @@ $activeNav = 'dashboard';
require_once __DIR__ . '/partials/header.php';
?>
<div class="card" style="background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: var(--radius-lg); padding: 24px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
<div class="card" style="background: var(--bg-surface); border: 1px solid var(--border-light); margin-bottom: 24px;">
<h2 style="font-size:1.4rem;font-weight:700;margin-bottom:6px;color:var(--text-primary);">👋 Selamat Datang, <?= htmlspecialchars(currentUser()['nama_lengkap'] ?: currentUser()['username']) ?>!</h2>
<p style="color:var(--text-secondary);font-size:0.9rem;max-width:600px;">
Anda masuk sebagai <strong>Pengguna</strong>. Anda dapat melihat seluruh data spasial, analisis, dan berpartisipasi dengan mengirim Laporan Warga atau memberikan ulasan fasilitas.
@@ -97,10 +97,10 @@ require_once __DIR__ . '/partials/header.php';
</div>
</div>
<div class="card" style="background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
<div class="card" style="background: var(--primary-glow); border: 1px solid var(--primary-light); margin-bottom: 24px;">
<div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;">
<div>
<h3 style="font-size:1.1rem; font-weight:700; margin-bottom:6px;">🗺️ Buka Peta Interaktif</h3>
<h3 style="font-size:1.1rem; font-weight:700; margin-bottom:6px; color:var(--text-primary);">🗺️ Buka Peta Interaktif</h3>
<p style="color:var(--text-secondary); font-size:0.88rem; max-width:500px;">
Lihat semua layer data spasial: SPBU, jalan, kavling, rumah ibadah, warga miskin, kawasan kumuh, dan analisis spasial.
</p>
webgis_app/panel_user/partials/footer.php
+26
View File
@@ -5,6 +5,32 @@
<div class="toast-container" id="toastContainer"></div>
<script>
// ── Theme toggle ──
(function() {
const html = document.documentElement;
const saved = localStorage.getItem('portal-theme') || 'dark';
setUserTheme(saved);
document.addEventListener('DOMContentLoaded', function() {
const btn = document.getElementById('userThemeToggle');
const icon = document.getElementById('userThemeIcon');
if (!btn) return;
btn.addEventListener('click', () => {
const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
setUserTheme(next);
localStorage.setItem('portal-theme', next);
});
function updateIcon() {
if (icon) icon.className = html.getAttribute('data-theme') === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
}
updateIcon();
});
function setUserTheme(t) {
html.setAttribute('data-theme', t);
const icon = document.getElementById('userThemeIcon');
if (icon) icon.className = t === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
}
})();
// ── Clock ──
function updateClock() {
const now = new Date();
webgis_app/panel_user/partials/header.php
+8 -2
View File
@@ -1,4 +1,4 @@
<?php
<?php
/**
* User Layout — sidebar + topbar (read-only mode, beda style dari admin)
* Variables expected from parent: $pageTitle, $activeNav
@@ -7,7 +7,7 @@ $user = currentUser();
$initial = strtoupper(substr($user['nama_lengkap'] ?: $user['username'], 0, 1));
?>
<!DOCTYPE html>
<html lang="id">
<html lang="id" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -80,6 +80,12 @@ $initial = strtoupper(substr($user['nama_lengkap'] ?: $user['username'], 0, 1));
<span class="badge badge-success" style="font-size:0.7rem;padding:5px 10px;">
<i class="fas fa-eye"></i> Mode Baca
</span>
<button class="btn btn-ghost btn-sm" id="userThemeToggle" title="Toggle tema" aria-label="Toggle dark/light mode" style="padding:8px 10px;">
<i class="fas fa-moon" id="userThemeIcon"></i>
</button>
<a href="<?= app_url('../portal.html') ?>" class="btn btn-ghost btn-sm" title="Kembali ke Portal WebGIS">
<i class="fas fa-home"></i> Portal
</a>
</div>
</div>
<div class="admin-content">