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

64
static/css/modes/wefax.css
View File

@@ -41,15 +41,15 @@
width: 8px;
height: 8px;
border-radius: 50%;
background: #444;
background: var(--text-muted);
flex-shrink: 0;
}
.wefax-strip-dot.scanning { background: #ffaa00; animation: wefax-pulse 1.5s ease-in-out infinite; }
.wefax-strip-dot.phasing { background: #ffcc44; animation: wefax-pulse 0.8s ease-in-out infinite; }
.wefax-strip-dot.receiving { background: #00cc66; animation: wefax-pulse 1s ease-in-out infinite; }
.wefax-strip-dot.complete { background: #00cc66; }
.wefax-strip-dot.error { background: #f44; }
.wefax-strip-dot.scanning { background: var(--accent-orange); animation: wefax-pulse 1.5s ease-in-out infinite; }
.wefax-strip-dot.phasing { background: var(--accent-yellow); animation: wefax-pulse 0.8s ease-in-out infinite; }
.wefax-strip-dot.receiving { background: var(--accent-green); animation: wefax-pulse 1s ease-in-out infinite; }
.wefax-strip-dot.complete { background: var(--accent-green); }
.wefax-strip-dot.error { background: var(--accent-red); }
@keyframes wefax-pulse {
0%, 100% { opacity: 1; }
@@ -81,17 +81,17 @@
transition: all 0.15s ease;
}
.wefax-strip-btn.start { color: #ffaa00; border-color: #ffaa0044; }
.wefax-strip-btn.start:hover { background: #ffaa0015; border-color: #ffaa00; }
.wefax-strip-btn.start { color: var(--accent-orange); border-color: #ffaa0044; }
.wefax-strip-btn.start:hover { background: #ffaa0015; border-color: var(--accent-orange); }
.wefax-strip-btn.start.wefax-strip-btn-error {
border-color: #ffaa00;
color: #ffaa00;
border-color: var(--accent-orange);
color: var(--accent-orange);
box-shadow: 0 0 8px rgba(255, 170, 0, 0.3);
animation: wefax-pulse 0.6s ease-in-out 3;
}
.wefax-strip-btn.stop { color: #f44; border-color: #f4444444; }
.wefax-strip-btn.stop:hover { background: #f4441a; border-color: #f44; }
.wefax-strip-btn.stop { color: var(--accent-red); border-color: #f4444444; }
.wefax-strip-btn.stop:hover { background: #f4441a; border-color: var(--accent-red); }
.wefax-strip-divider {
width: 1px;
@@ -114,7 +114,7 @@
font-variant-numeric: tabular-nums;
}
.wefax-strip-value.accent-amber { color: #ffaa00; }
.wefax-strip-value.accent-amber { color: var(--accent-orange); }
.wefax-strip-label {
font-family: var(--font-mono, monospace);
@@ -141,11 +141,11 @@
width: 14px;
height: 14px;
cursor: pointer;
accent-color: #ffaa00;
accent-color: var(--accent-orange);
}
.wefax-schedule-toggle input:checked + span {
color: #ffaa00;
color: var(--accent-orange);
}
/* --- Visuals Container --- */
@@ -185,7 +185,7 @@
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: #ffaa00;
color: var(--accent-orange);
}
.wefax-schedule-list {
@@ -209,7 +209,7 @@
.wefax-schedule-entry.active {
background: #ffaa0010;
border-left: 3px solid #ffaa00;
border-left: 3px solid var(--accent-orange);
}
.wefax-schedule-entry.upcoming {
@@ -221,7 +221,7 @@
}
.wefax-schedule-time {
color: #ffaa00;
color: var(--accent-orange);
min-width: 45px;
font-variant-numeric: tabular-nums;
}
@@ -241,7 +241,7 @@
.wefax-schedule-badge.live {
background: #ffaa0030;
color: #ffaa00;
color: var(--accent-orange);
font-weight: 600;
}
@@ -279,7 +279,7 @@
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: #ffaa00;
color: var(--accent-orange);
}
.wefax-live-content {
@@ -298,7 +298,7 @@
.wefax-idle-state svg {
width: 48px;
height: 48px;
color: #ffaa0033;
color: rgba(214, 168, 94, 0.2);
margin-bottom: 12px;
}
@@ -341,7 +341,7 @@
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: #ffaa00;
color: var(--accent-orange);
}
.wefax-gallery-controls {
@@ -370,8 +370,8 @@
}
.wefax-gallery-clear-btn:hover {
border-color: #f44;
color: #f44;
border-color: var(--accent-red);
color: var(--accent-red);
}
.wefax-gallery-grid {
@@ -442,7 +442,7 @@
border-radius: 3px;
border: none;
background: rgba(0, 0, 0, 0.7);
color: #ccc;
color: var(--text-secondary);
font-size: 14px;
cursor: pointer;
display: flex;
@@ -451,8 +451,8 @@
text-decoration: none;
}
.wefax-gallery-action:hover { color: #fff; }
.wefax-gallery-action.delete:hover { color: #f44; }
.wefax-gallery-action:hover { color: var(--text-primary); }
.wefax-gallery-action.delete:hover { color: var(--accent-red); }
/* --- Countdown Bar + Timeline --- */
.wefax-countdown-bar {
@@ -490,12 +490,12 @@
}
.wefax-countdown-box.imminent {
border-color: #ffaa00;
border-color: var(--accent-orange);
box-shadow: 0 0 8px rgba(255, 170, 0, 0.2);
}
.wefax-countdown-box.active {
border-color: #ffaa00;
border-color: var(--accent-orange);
box-shadow: 0 0 8px rgba(255, 170, 0, 0.3);
animation: wefax-glow 1.5s ease-in-out infinite;
}
@@ -530,7 +530,7 @@
.wefax-countdown-content {
font-size: 12px;
font-weight: 600;
color: #ffaa00;
color: var(--accent-orange);
font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
}
@@ -576,7 +576,7 @@
.wefax-timeline-broadcast.active {
background: rgba(255, 170, 0, 0.85);
border: 1px solid #ffaa00;
border: 1px solid var(--accent-orange);
}
.wefax-timeline-cursor {
@@ -584,7 +584,7 @@
top: 2px;
width: 2px;
height: 20px;
background: #ff4444;
background: var(--accent-red);
border-radius: 1px;
z-index: 2;
}