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
assets/css/style.css
+102 -40
View File
@@ -1,15 +1,23 @@
:root {
--primary: #4f46e5;
--primary-hover: #4338ca;
--bg-light: #f3f4f6;
--primary: #EA580C;
--primary-hover: #C2410C;
--primary-light: #FED7AA;
--secondary: #0D9488;
--secondary-light: #CCFBF1;
--tertiary: #EAB308;
--bg-light: #F8FAFC;
--bg-white: #ffffff;
--text-main: #1f2937;
--text-muted: #6b7280;
--border: #e5e7eb;
--text-main: #1E293B;
--text-muted: #64748B;
--border: #E2E8F0;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.10);
--radius: 8px;
--radius-pill: 9999px;
--jalan-nasional: #ef4444; /* Red */
--jalan-provinsi: #f97316; /* Orange */
--jalan-kabupaten: #eab308; /* Yellow */
--jalan-nasional: #ef4444;
--jalan-provinsi: #f97316;
--jalan-kabupaten: #eab308;
--parsil-shm: #22c55e;
--parsil-hgb: #3b82f6;
--parsil-hgu: #a855f7;
@@ -61,11 +69,11 @@ body {
.nav-btn {
border: none;
background: transparent;
padding: 10px 20px;
padding: 8px 18px;
font-size: 14px;
font-weight: 600;
color: var(--text-muted);
border-radius: 8px;
border-radius: var(--radius-pill);
cursor: pointer;
transition: all 0.2s;
display: flex;
@@ -74,13 +82,13 @@ body {
}
.nav-btn:hover {
background: var(--bg-light);
color: var(--text-main);
background: var(--primary-light);
color: var(--primary);
}
.nav-btn.active {
background: #eef2ff;
color: var(--primary);
background: var(--primary);
color: white;
}
/* VIEW CONTROLLER */
@@ -110,21 +118,39 @@ main {
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.95);
padding: 12px 24px;
border-radius: 50px;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
background: rgba(255, 255, 255, 0.97);
padding: 10px 20px;
border-radius: var(--radius-pill);
box-shadow: var(--shadow-md);
font-size: 13px;
font-weight: 500;
z-index: 999;
pointer-events: none;
display: flex;
align-items: center;
gap: 8px;
gap: 12px;
color: var(--text-main);
white-space: nowrap;
}
.floating-info i { color: var(--primary); }
.btn-exif {
background: var(--primary);
color: white;
border: none;
padding: 7px 14px;
font-size: 12px;
border-radius: var(--radius-pill);
cursor: pointer;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3);
transition: background 0.2s;
}
.btn-exif:hover { background: var(--primary-hover); }
.floating-legend {
position: absolute;
bottom: 80px;
@@ -137,7 +163,7 @@ main {
font-size: 12px;
min-width: 180px;
}
.floating-legend h4 { margin-bottom: 10px; color: var(--text-main); font-size: 13px;}
.floating-legend h4 { margin-bottom: 10px; color: var(--primary); font-size: 13px; font-weight: 700; }
.legend-grid div { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--text-muted);}
.legend-grid span { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
@@ -156,7 +182,7 @@ main {
.stats-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 30px;
}
@@ -171,6 +197,9 @@ main {
align-items: center;
border: 1px solid var(--border);
}
.stat-card--jalan { border-left: 4px solid var(--primary); }
.stat-card--parsil { border-left: 4px solid var(--secondary); }
.stat-card--titik { border-left: 4px solid var(--tertiary); }
.stat-info h3 { font-size: 14px; color: var(--text-muted); font-weight: 500; margin-bottom: 5px; }
.stat-info h2 { font-size: 32px; color: var(--text-main); }
@@ -206,21 +235,29 @@ main {
}
.tab-btn {
padding: 8px 16px;
border: 1px solid var(--border);
background: var(--bg-white);
border-radius: 8px;
font-size: 14px;
padding: 7px 14px;
border: 1.5px solid var(--border);
background: white;
border-radius: var(--radius-pill);
font-size: 13px;
cursor: pointer;
font-weight: 500;
color: var(--text-muted);
transition: all 0.2s;
display: flex;
align-items: center;
gap: 6px;
}
.tab-btn:hover {
border-color: var(--primary);
color: var(--primary);
}
.tab-btn.active {
background: #eef2ff;
color: var(--primary);
border-color: #c7d2fe;
background: var(--primary);
color: white;
border-color: var(--primary);
}
.search-box {
@@ -243,7 +280,10 @@ main {
outline: none;
transition: border-color 0.2s;
}
.search-box input:focus { border-color: var(--primary); }
.search-box input:focus {
border-color: var(--secondary);
box-shadow: 0 0 0 3px var(--secondary-light);
}
.table-wrapper {
overflow-x: auto;
@@ -272,7 +312,7 @@ td {
cursor: pointer;
}
tr:hover td { background-color: #f9fafb; }
tr:hover td { background-color: #FFF7ED; }
.status-badge {
padding: 4px 10px;
@@ -314,6 +354,7 @@ tr:hover td { background-color: #f9fafb; }
font-weight: 600;
border-bottom: 1px solid var(--border);
background: #f9fafb;
color: var(--primary);
}
#minimap {
@@ -390,8 +431,8 @@ tr:hover td { background-color: #f9fafb; }
.form-group input:focus, .form-group select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
border-color: var(--secondary);
box-shadow: 0 0 0 3px var(--secondary-light);
}
.form-group input[readonly] {
@@ -408,6 +449,8 @@ tr:hover td { background-color: #f9fafb; }
.form-actions {
margin-top: 25px;
display: flex;
gap: 10px;
}
.btn-primary {
@@ -416,21 +459,40 @@ tr:hover td { background-color: #f9fafb; }
color: white;
border: none;
padding: 12px;
border-radius: 8px;
border-radius: var(--radius-pill);
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: background 0.2s;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-danger {
background: #ef4444;
color: white;
border: none;
background: transparent;
color: #ef4444;
border: 1.5px solid #ef4444;
padding: 12px;
border-radius: 8px;
border-radius: var(--radius-pill);
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: all 0.2s;
}
.btn-danger:hover { background: #fef2f2; }
/* Leaflet Draw Toolbar — LocalGuide overrides */
.leaflet-draw-toolbar a:hover,
.leaflet-draw-edit-toolbar a:hover {
background-color: var(--primary-light) !important;
border-color: var(--primary) !important;
}
.leaflet-bar a:hover {
color: var(--primary);
border-color: var(--primary);
}
.leaflet-draw-section .leaflet-draw-toolbar {
border-radius: var(--radius);
overflow: hidden;
}
.btn-danger:hover { background: #dc2626; }
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>