diff --git a/static/index.html b/static/index.html index 8d76f3a..d07ccf8 100644 --- a/static/index.html +++ b/static/index.html @@ -162,6 +162,14 @@ if ('serviceWorker' in navigator) { } .filter-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; } + /* Toggle switch */ + .switch { position: relative; display: inline-block; width: 32px; height: 18px; flex-shrink: 0; } + .switch input { opacity: 0; width: 0; height: 0; } + .slider { position: absolute; cursor: pointer; inset: 0; background: var(--card2); border: 1px solid var(--border); border-radius: 18px; transition: .2s; } + .slider::before { content: ''; position: absolute; height: 12px; width: 12px; left: 2px; bottom: 2px; background: var(--text3); border-radius: 50%; transition: .2s; } + .switch input:checked + .slider { background: var(--accent); border-color: var(--accent); } + .switch input:checked + .slider::before { transform: translateX(14px); background: #fff; } + .asset-card { background: var(--card2); border-radius: var(--radius-sm); padding: 12px; margin-top: 10px; border-left: 3px solid var(--green); @@ -399,6 +407,13 @@ if ('serviceWorker' in navigator) {
0
Total
0
📍 Have GPS
0
⚠️ No GPS
+
+ + 📍 GPS only +
@@ -908,6 +923,12 @@ function renderGallery() { if (currentFilter === 'gps') filtered = allPhotos.filter(p => p.hasGps); else if (currentFilter === 'nogps') filtered = allPhotos.filter(p => !p.hasGps); + // Apply GPS-only toggle (overrides chips for hide-no-gps use case) + const gpsToggle = document.getElementById('gpsToggle'); + if (gpsToggle && gpsToggle.checked) { + filtered = filtered.filter(p => p.hasGps); + } + // Sync filter chip visual state with currentFilter updateFilterChips();