Raditya_Indra_Putranto/WebGIS_Jalan-JalanRusak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: apply LocalGuide design system (red-orange primary, teal secondary)

Browse Source 
- Replace indigo primary with red-orange (#EA580C) + teal secondary (#0D9488)
- Navbar: active tab pill red-orange, hover warm orange
- Map: floating info bar slim pill, EXIF button red-orange, legend title bold red-orange
- Draw toolbar: warm orange hover overrides
- Modal: teal focus rings, pill buttons, btn-danger outline style
- Dashboard: stats grid 3 columns with left-border accents per type
- Table: pill filter chips, teal search focus, warm row hover (#FFF7ED)
- Minimap header: red-orange color

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
GuavaPopper
2026-06-11 20:55:22 +07:00
parent f0109e5512
commit dfac50507b
2 changed files with 114 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+11 -11
View File
@@ -36,13 +36,13 @@
<div id="map"></div>
<!-- Floating Info Bar -->
<div class="floating-info" style="display:flex; justify-content:space-between; align-items:center;">
<div class="floating-info">
<div>
<i class="fa-solid fa-circle-info"></i> Gunakan Toolbar di kiri peta untuk menggambar (Jalan/Parsil/Titik).
</div>
<div style="margin-left:20px; pointer-events:auto;">
<button class="btn btn-danger" style="padding:8px 15px; font-size:13px; border-radius:30px; box-shadow:0 4px 6px rgba(239,68,68,0.3);" onclick="document.getElementById('auto-upload-exif').click()">
<i class="fa-solid fa-camera"></i> Lapor Lacak Otomatis via Foto EXIF
<div style="pointer-events:auto;">
<button class="btn-exif" onclick="document.getElementById('auto-upload-exif').click()">
<i class="fa-solid fa-camera"></i> Lapor via Foto EXIF
</button>
<input type="file" id="auto-upload-exif" style="display:none;" accept="image/jpeg, image/png, image/jpg">
</div>
@@ -100,7 +100,7 @@
<small class="text-muted" id="metric-helper">Terisi otomatis dari gambar peta.</small>
</div>
<div class="form-actions" style="display:flex; gap:10px;">
<div class="form-actions">
<button type="submit" class="btn btn-primary" style="flex:1"><i class="fa-solid fa-save"></i> Simpan</button>
<button type="button" class="btn btn-danger" id="btn-delete" style="display:none; flex:1" onclick="deleteFromModal()"><i class="fa-solid fa-trash"></i> Hapus</button>
</div>
@@ -121,30 +121,30 @@
<!-- Stats Row -->
<div class="stats-row">
<div class="stat-card">
<div class="stat-card stat-card--jalan">
<div class="stat-info">
<h3>Total Jalan</h3>
<h2 id="stat-jalan">0</h2>
</div>
<div class="stat-icon" style="color: #3b82f6; background: #eff6ff;">
<div class="stat-icon" style="color: var(--primary); background: var(--primary-light);">
<i class="fa-solid fa-road"></i>
</div>
</div>
<div class="stat-card">
<div class="stat-card stat-card--parsil">
<div class="stat-info">
<h3>Total Parsil Tanah</h3>
<h2 id="stat-parsil">0</h2>
</div>
<div class="stat-icon" style="color: #22c55e; background: #f0fdf4;">
<div class="stat-icon" style="color: var(--secondary); background: var(--secondary-light);">
<i class="fa-solid fa-map"></i>
</div>
</div>
<div class="stat-card">
<div class="stat-card stat-card--titik">
<div class="stat-info">
<h3>Total Jalan Rusak</h3>
<h2 id="stat-titik">0</h2>
</div>
<div class="stat-icon" style="color: #ef4444; background: #fef2f2;">
<div class="stat-icon" style="color: var(--tertiary); background: #FEF9C3;">
<i class="fa-solid fa-triangle-exclamation"></i>
</div>
</div>