Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-04-24 14:50:00 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat: UI/UX overhaul — CSS cleanup, accessibility, error handling, inline style extraction

Browse Source 
Phase 0 — CSS-only fixes:
- Fix --font-mono to use real monospace stack (JetBrains Mono, Fira Code, etc.)
- Replace hardcoded hex colors with CSS variables across 16+ files
- Merge global-nav.css (507 lines) into layout.css, delete original
- Reduce !important in responsive.css from 71 to 8 via .app-shell specificity
- Standardize breakpoints to 480/768/1024/1280px

Phase 1 — Loading states & SSE connection feedback:
- Add centralized SSEManager (sse-manager.js) with exponential backoff
- Add SSE status indicator dot in nav bar
- Add withLoadingButton() + .btn-loading CSS spinner
- Add mode section crossfade transitions

Phase 2 — Accessibility:
- Add aria-labels to icon-only buttons across mode partials
- Add for/id associations to 42 form labels in 5 mode partials
- Add aria-live on toast stack, enableListKeyNav() utility

Phase 3 — Destructive action guards & list overflow:
- Add confirmAction() styled modal, replace all 25 native confirm() calls
- Add toast cap at 5 simultaneous toasts
- Add list overflow indicator CSS

Phase 4 — Inline style extraction:
- Refactor switchMode() in app.js and index.html to use classList.toggle()
- Add CSS toggle rules for all switchMode-controlled elements
- Remove inline style="display:none" from 7+ HTML elements
- Add utility classes (.hidden, .d-flex, .d-grid, etc.)

Phase 5 — Mobile UX polish:
- pre/code overflow handling already in place
- Touch target sizing via --touch-min variable

Phase 6 — Error handling consistency:
- Add reportActionableError() to user-facing catch blocks in 5 mode JS files
- 28 error toast additions alongside existing console.error calls

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-03-12 13:04:36 +00:00
parent 05412fbfc3
commit e687862043
56 changed files with 2660 additions and 2238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
static/css/modes/weather-satellite.css
View File

@@ -32,12 +32,12 @@
}
.wxsat-strip-dot.capturing {
background: #00ff88;
background: var(--neon-green);
animation: wxsat-pulse 1.5s ease-in-out infinite;
}
.wxsat-strip-dot.decoding {
background: #00d4ff;
background: var(--accent-cyan);
animation: wxsat-pulse 0.8s ease-in-out infinite;
}
@@ -70,8 +70,8 @@
}
.wxsat-strip-btn.stop {
border-color: #ff4444;
color: #ff4444;
border-color: var(--accent-red);
color: var(--accent-red);
}
.wxsat-strip-btn.stop:hover {
@@ -124,7 +124,7 @@
width: 14px;
height: 14px;
cursor: pointer;
accent-color: #00ff88;
accent-color: var(--neon-green);
}
.wxsat-schedule-toggle input:checked + .wxsat-toggle-label {
@@ -207,12 +207,12 @@
}
.wxsat-countdown-box.imminent {
border-color: #ffbb00;
border-color: var(--accent-yellow);
box-shadow: 0 0 8px rgba(255, 187, 0, 0.2);
}
.wxsat-countdown-box.active {
border-color: #00ff88;
border-color: var(--neon-green);
box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
animation: wxsat-glow 1.5s ease-in-out infinite;
}
@@ -293,14 +293,14 @@
.wxsat-timeline-pass.apt { background: rgba(0, 212, 255, 0.6); }
.wxsat-timeline-pass.lrpt { background: rgba(0, 255, 136, 0.6); }
.wxsat-timeline-pass.scheduled { border: 1px solid #ffbb00; }
.wxsat-timeline-pass.scheduled { border: 1px solid var(--accent-yellow); }
.wxsat-timeline-cursor {
position: absolute;
top: 2px;
width: 2px;
height: 20px;
background: #ff4444;
background: var(--accent-red);
border-radius: 1px;
z-index: 2;
}
@@ -375,7 +375,7 @@
.wxsat-pass-card.active,
.wxsat-pass-card.selected {
border-color: #00ff88;
border-color: var(--neon-green);
background: rgba(0, 255, 136, 0.05);
}
@@ -385,7 +385,7 @@
padding: 1px 4px;
border-radius: 2px;
background: rgba(255, 187, 0, 0.15);
color: #ffbb00;
color: var(--accent-yellow);
margin-left: 6px;
font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
text-transform: uppercase;
@@ -414,12 +414,12 @@
.wxsat-pass-mode.apt {
background: rgba(0, 212, 255, 0.15);
color: #00d4ff;
color: var(--accent-cyan);
}
.wxsat-pass-mode.lrpt {
background: rgba(0, 255, 136, 0.15);
color: #00ff88;
color: var(--neon-green);
}
.wxsat-pass-details {
@@ -450,17 +450,17 @@
.wxsat-pass-quality.excellent {
background: rgba(0, 255, 136, 0.15);
color: #00ff88;
color: var(--neon-green);
}
.wxsat-pass-quality.good {
background: rgba(0, 212, 255, 0.15);
color: #00d4ff;
color: var(--accent-cyan);
}
.wxsat-pass-quality.fair {
background: rgba(255, 187, 0, 0.15);
color: #ffbb00;
color: var(--accent-yellow);
}
/* ===== Center Panel (Polar + Map) ===== */
@@ -900,7 +900,7 @@
.wxsat-modal-btn.delete:hover {
background: rgba(255, 68, 68, 0.9);
border-color: #ff4444;
border-color: var(--accent-red);
color: var(--text-inverse);
}
@@ -920,12 +920,12 @@
}
.wxsat-gallery-clear-btn:hover {
color: #ff4444;
color: var(--accent-red);
background: rgba(255, 68, 68, 0.1);
}
/* ===== Responsive ===== */
@media (max-width: 1100px) {
@media (max-width: 1023px) {
.wxsat-content {
flex-direction: column;
}
@@ -1041,8 +1041,8 @@
}
.wxsat-phase-step.active {
color: #00ff88;
border-color: #00ff88;
color: var(--neon-green);
border-color: var(--neon-green);
background: rgba(0, 255, 136, 0.1);
box-shadow: 0 0 8px rgba(0, 255, 136, 0.2);
}
@@ -1055,8 +1055,8 @@
}
.wxsat-phase-step.error {
color: #ff4444;
border-color: #ff4444;
color: var(--accent-red);
border-color: var(--accent-red);
background: rgba(255, 68, 68, 0.1);
box-shadow: 0 0 8px rgba(255, 68, 68, 0.2);
}
@@ -1115,8 +1115,8 @@
}
.wxsat-console-entry.wxsat-log-signal {
border-left-color: #00ff88;
color: #00ff88;
border-left-color: var(--neon-green);
color: var(--neon-green);
}
.wxsat-console-entry.wxsat-log-progress {
@@ -1125,18 +1125,18 @@
}
.wxsat-console-entry.wxsat-log-save {
border-left-color: #ffbb00;
color: #ffbb00;
border-left-color: var(--accent-yellow);
color: var(--accent-yellow);
}
.wxsat-console-entry.wxsat-log-error {
border-left-color: #ff4444;
color: #ff4444;
border-left-color: var(--accent-red);
color: var(--accent-red);
}
.wxsat-console-entry.wxsat-log-warning {
border-left-color: #ff8800;
color: #ff8800;
border-left-color: var(--neon-orange);
color: var(--neon-orange);
}
.wxsat-console-entry.wxsat-log-debug {