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 { :root {
--primary: #4f46e5; --primary: #EA580C;
--primary-hover: #4338ca; --primary-hover: #C2410C;
--bg-light: #f3f4f6; --primary-light: #FED7AA;
--secondary: #0D9488;
--secondary-light: #CCFBF1;
--tertiary: #EAB308;
--bg-light: #F8FAFC;
--bg-white: #ffffff; --bg-white: #ffffff;
--text-main: #1f2937; --text-main: #1E293B;
--text-muted: #6b7280; --text-muted: #64748B;
--border: #e5e7eb; --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-nasional: #ef4444;
--jalan-provinsi: #f97316; /* Orange */ --jalan-provinsi: #f97316;
--jalan-kabupaten: #eab308; /* Yellow */ --jalan-kabupaten: #eab308;
--parsil-shm: #22c55e; --parsil-shm: #22c55e;
--parsil-hgb: #3b82f6; --parsil-hgb: #3b82f6;
--parsil-hgu: #a855f7; --parsil-hgu: #a855f7;
@@ -61,11 +69,11 @@ body {
.nav-btn { .nav-btn {
border: none; border: none;
background: transparent; background: transparent;
padding: 10px 20px; padding: 8px 18px;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: var(--text-muted); color: var(--text-muted);
border-radius: 8px; border-radius: var(--radius-pill);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
display: flex; display: flex;
@@ -74,13 +82,13 @@ body {
} }
.nav-btn:hover { .nav-btn:hover {
background: var(--bg-light); background: var(--primary-light);
color: var(--text-main); color: var(--primary);
} }
.nav-btn.active { .nav-btn.active {
background: #eef2ff; background: var(--primary);
color: var(--primary); color: white;
} }
/* VIEW CONTROLLER */ /* VIEW CONTROLLER */
@@ -110,21 +118,39 @@ main {
bottom: 20px; bottom: 20px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.97);
padding: 12px 24px; padding: 10px 20px;
border-radius: 50px; border-radius: var(--radius-pill);
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); box-shadow: var(--shadow-md);
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
z-index: 999; z-index: 999;
pointer-events: none; pointer-events: none;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 12px;
color: var(--text-main); color: var(--text-main);
white-space: nowrap;
} }
.floating-info i { color: var(--primary); } .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 { .floating-legend {
position: absolute; position: absolute;
bottom: 80px; bottom: 80px;
@@ -137,7 +163,7 @@ main {
font-size: 12px; font-size: 12px;
min-width: 180px; 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 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; } .legend-grid span { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
@@ -156,7 +182,7 @@ main {
.stats-row { .stats-row {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 20px; gap: 20px;
margin-bottom: 30px; margin-bottom: 30px;
} }
@@ -171,6 +197,9 @@ main {
align-items: center; align-items: center;
border: 1px solid var(--border); 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 h3 { font-size: 14px; color: var(--text-muted); font-weight: 500; margin-bottom: 5px; }
.stat-info h2 { font-size: 32px; color: var(--text-main); } .stat-info h2 { font-size: 32px; color: var(--text-main); }
@@ -206,21 +235,29 @@ main {
} }
.tab-btn { .tab-btn {
padding: 8px 16px; padding: 7px 14px;
border: 1px solid var(--border); border: 1.5px solid var(--border);
background: var(--bg-white); background: white;
border-radius: 8px; border-radius: var(--radius-pill);
font-size: 14px; font-size: 13px;
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
color: var(--text-muted); color: var(--text-muted);
transition: all 0.2s; transition: all 0.2s;
display: flex;
align-items: center;
gap: 6px;
}
.tab-btn:hover {
border-color: var(--primary);
color: var(--primary);
} }
.tab-btn.active { .tab-btn.active {
background: #eef2ff; background: var(--primary);
color: var(--primary); color: white;
border-color: #c7d2fe; border-color: var(--primary);
} }
.search-box { .search-box {
@@ -243,7 +280,10 @@ main {
outline: none; outline: none;
transition: border-color 0.2s; 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 { .table-wrapper {
overflow-x: auto; overflow-x: auto;
@@ -272,7 +312,7 @@ td {
cursor: pointer; cursor: pointer;
} }
tr:hover td { background-color: #f9fafb; } tr:hover td { background-color: #FFF7ED; }
.status-badge { .status-badge {
padding: 4px 10px; padding: 4px 10px;
@@ -314,6 +354,7 @@ tr:hover td { background-color: #f9fafb; }
font-weight: 600; font-weight: 600;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
background: #f9fafb; background: #f9fafb;
color: var(--primary);
} }
#minimap { #minimap {
@@ -390,8 +431,8 @@ tr:hover td { background-color: #f9fafb; }
.form-group input:focus, .form-group select:focus { .form-group input:focus, .form-group select:focus {
outline: none; outline: none;
border-color: var(--primary); border-color: var(--secondary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); box-shadow: 0 0 0 3px var(--secondary-light);
} }
.form-group input[readonly] { .form-group input[readonly] {
@@ -408,6 +449,8 @@ tr:hover td { background-color: #f9fafb; }
.form-actions { .form-actions {
margin-top: 25px; margin-top: 25px;
display: flex;
gap: 10px;
} }
.btn-primary { .btn-primary {
@@ -416,21 +459,40 @@ tr:hover td { background-color: #f9fafb; }
color: white; color: white;
border: none; border: none;
padding: 12px; padding: 12px;
border-radius: 8px; border-radius: var(--radius-pill);
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
transition: background 0.2s;
} }
.btn-primary:hover { background: var(--primary-hover); } .btn-primary:hover { background: var(--primary-hover); }
.btn-danger { .btn-danger {
background: #ef4444; background: transparent;
color: white; color: #ef4444;
border: none; border: 1.5px solid #ef4444;
padding: 12px; padding: 12px;
border-radius: 8px; border-radius: var(--radius-pill);
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
font-size: 14px; 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> <div id="map"></div>
<!-- Floating Info Bar --> <!-- Floating Info Bar -->
<div class="floating-info" style="display:flex; justify-content:space-between; align-items:center;"> <div class="floating-info">
<div> <div>
<i class="fa-solid fa-circle-info"></i> Gunakan Toolbar di kiri peta untuk menggambar (Jalan/Parsil/Titik). <i class="fa-solid fa-circle-info"></i> Gunakan Toolbar di kiri peta untuk menggambar (Jalan/Parsil/Titik).
</div> </div>
<div style="margin-left:20px; pointer-events:auto;"> <div style="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()"> <button class="btn-exif" onclick="document.getElementById('auto-upload-exif').click()">
<i class="fa-solid fa-camera"></i> Lapor Lacak Otomatis via Foto EXIF <i class="fa-solid fa-camera"></i> Lapor via Foto EXIF
</button> </button>
<input type="file" id="auto-upload-exif" style="display:none;" accept="image/jpeg, image/png, image/jpg"> <input type="file" id="auto-upload-exif" style="display:none;" accept="image/jpeg, image/png, image/jpg">
</div> </div>
@@ -100,7 +100,7 @@
<small class="text-muted" id="metric-helper">Terisi otomatis dari gambar peta.</small> <small class="text-muted" id="metric-helper">Terisi otomatis dari gambar peta.</small>
</div> </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="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> <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> </div>
@@ -121,30 +121,30 @@
<!-- Stats Row --> <!-- Stats Row -->
<div class="stats-row"> <div class="stats-row">
<div class="stat-card"> <div class="stat-card stat-card--jalan">
<div class="stat-info"> <div class="stat-info">
<h3>Total Jalan</h3> <h3>Total Jalan</h3>
<h2 id="stat-jalan">0</h2> <h2 id="stat-jalan">0</h2>
</div> </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> <i class="fa-solid fa-road"></i>
</div> </div>
</div> </div>
<div class="stat-card"> <div class="stat-card stat-card--parsil">
<div class="stat-info"> <div class="stat-info">
<h3>Total Parsil Tanah</h3> <h3>Total Parsil Tanah</h3>
<h2 id="stat-parsil">0</h2> <h2 id="stat-parsil">0</h2>
</div> </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> <i class="fa-solid fa-map"></i>
</div> </div>
</div> </div>
<div class="stat-card"> <div class="stat-card stat-card--titik">
<div class="stat-info"> <div class="stat-info">
<h3>Total Jalan Rusak</h3> <h3>Total Jalan Rusak</h3>
<h2 id="stat-titik">0</h2> <h2 id="stat-titik">0</h2>
</div> </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> <i class="fa-solid fa-triangle-exclamation"></i>
</div> </div>
</div> </div>