diff --git a/public/customize.js b/public/customize.js index 0ec15262..aac15874 100644 --- a/public/customize.js +++ b/public/customize.js @@ -19,7 +19,7 @@ statusGreen: '#22c55e', statusYellow: '#eab308', statusRed: '#ef4444', accentHover: '#6db3ff', navBg2: '#1a1a2e', textMuted: '#5b6370', border: '#e2e5ea', surface1: '#ffffff', surface2: '#ffffff', cardBg: '#ffffff', contentBg: '#f4f5f7', - inputBg: '#ffffff', rowStripe: '#f9fafb', rowHover: '#eef2ff', selectedBg: '#dbeafe', + detailBg: '#ffffff', inputBg: '#ffffff', rowStripe: '#f9fafb', rowHover: '#eef2ff', selectedBg: '#dbeafe', font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', mono: '"SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace', }, @@ -28,7 +28,7 @@ statusGreen: '#22c55e', statusYellow: '#eab308', statusRed: '#ef4444', accentHover: '#6db3ff', navBg2: '#1a1a2e', textMuted: '#a8b8cc', border: '#334155', surface1: '#1a1a2e', surface2: '#232340', cardBg: '#1a1a2e', contentBg: '#0f0f23', - inputBg: '#1e1e34', rowStripe: '#1e1e34', rowHover: '#2d2d50', selectedBg: '#1e3a5f', + detailBg: '#232340', inputBg: '#1e1e34', rowStripe: '#1e1e34', rowHover: '#2d2d50', selectedBg: '#1e3a5f', font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', mono: '"SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace', }, @@ -85,6 +85,7 @@ surface2: '--surface-2', cardBg: '--card-bg', contentBg: '--content-bg', + detailBg: '--detail-bg', inputBg: '--input-bg', rowStripe: '--row-stripe', rowHover: '--row-hover', @@ -94,7 +95,8 @@ }; const BASIC_KEYS = ['accent', 'navBg', 'background', 'text', 'statusGreen', 'statusYellow', 'statusRed']; - const ADVANCED_KEYS = ['accentHover', 'navBg2', 'textMuted', 'border', 'surface1', 'surface2', 'cardBg', 'contentBg', 'inputBg', 'rowStripe', 'rowHover', 'selectedBg', 'font', 'mono']; + const ADVANCED_KEYS = ['accentHover', 'navBg2', 'textMuted', 'border', 'surface1', 'surface2', 'cardBg', 'contentBg', 'detailBg', 'inputBg', 'rowStripe', 'rowHover', 'selectedBg']; + const FONT_KEYS = ['font', 'mono']; const THEME_LABELS = { accent: 'Brand Color', @@ -112,6 +114,7 @@ surface2: 'Panels', cardBg: 'Card Fill', contentBg: 'Content Area', + detailBg: 'Detail Panels', inputBg: 'Inputs', rowStripe: 'Table Stripe', rowHover: 'Row Hover', @@ -136,6 +139,7 @@ surface2: 'Nested surfaces, secondary panels', cardBg: 'Detail panels, modals', contentBg: 'Content area behind cards', + detailBg: 'Modal, packet detail, side panels', inputBg: 'Text inputs, dropdowns', rowStripe: 'Alternating table rows', rowHover: 'Table row hover', @@ -259,7 +263,6 @@ _autoSaveTimer = null; try { var data = buildExport(); - console.log('[customize] autoSave:', Object.keys(data), data.nodeColors, data.typeColors); localStorage.setItem('meshcore-user-theme', JSON.stringify(data)); } catch (e) { console.error('[customize] autoSave error:', e); } }, 500); @@ -425,6 +428,12 @@ advancedRows += renderColorRow(akey, current[akey] || defs[akey] || '#000000', defs[akey] || '#000000', 'theme'); } + var fontRows = ''; + for (var f = 0; f < FONT_KEYS.length; f++) { + var fkey = FONT_KEYS[f]; + fontRows += renderColorRow(fkey, current[fkey] || defs[fkey] || '', defs[fkey] || '', 'theme'); + } + return '
' + '

' + modeLabel + '

' + '

Toggle โ˜€๏ธ/๐ŸŒ™ in nav to edit the other mode.

' + @@ -432,6 +441,9 @@ '
Advanced (' + ADVANCED_KEYS.length + ' options)' + advancedRows + '
' + + '
Fonts' + + fontRows + + '
' + '' + '
'; } diff --git a/public/home.css b/public/home.css index f9747c5b..d5c8eccd 100644 --- a/public/home.css +++ b/public/home.css @@ -25,12 +25,6 @@ .chooser-btn span:last-child { font-size: .8rem; color: var(--text-muted); } .home-level-toggle { margin-top: 16px; } -:root { - --status-green: #22c55e; - --status-yellow: #eab308; - --status-red: #ef4444; -} - /* Hero */ .home-hero { text-align: center; diff --git a/public/home.js b/public/home.js index af0cca61..06e05be1 100644 --- a/public/home.js +++ b/public/home.js @@ -264,7 +264,7 @@ // SNR quality label const snrVal = stats.avgSnr; const snrLabel = snrVal != null ? (snrVal > 10 ? 'Excellent' : snrVal > 0 ? 'Good' : snrVal > -5 ? 'Marginal' : 'Poor') : null; - const snrColor = snrVal != null ? (snrVal > 10 ? '#22c55e' : snrVal > 0 ? '#3b82f6' : snrVal > -5 ? '#f59e0b' : '#ef4444') : '#6b7280'; + const snrColor = snrVal != null ? (snrVal > 10 ? 'var(--status-green)' : snrVal > 0 ? 'var(--accent)' : snrVal > -5 ? 'var(--status-yellow)' : 'var(--status-red)') : '#6b7280'; // Build sparkline from recent packets (packet timestamps โ†’ hourly buckets) const sparkHtml = buildSparkline(h.recentPackets || []); diff --git a/public/index.html b/public/index.html index 40ee032b..eda614eb 100644 --- a/public/index.html +++ b/public/index.html @@ -22,9 +22,9 @@ - - - + + + @@ -81,26 +81,26 @@
- + - - - + + + - - + + - + - - + + diff --git a/public/live.css b/public/live.css index 987eff92..9db0257d 100644 --- a/public/live.css +++ b/public/live.css @@ -80,11 +80,11 @@ .live-stat-pill span { font-weight: 700; font-variant-numeric: tabular-nums; - color: #60a5fa; + color: var(--accent); } -.live-stat-pill.anim-pill span { color: #f59e0b; } -.live-stat-pill.rate-pill span { color: #22c55e; } +.live-stat-pill.anim-pill span { color: var(--status-yellow); } +.live-stat-pill.rate-pill span { color: var(--status-green); } .live-sound-btn { background: color-mix(in srgb, var(--text) 8%, transparent); @@ -375,7 +375,7 @@ padding: 6px; border-radius: 6px; background: rgba(59,130,246,0.15); - color: #60a5fa; + color: var(--accent); text-decoration: none; font-size: .75rem; font-weight: 600; @@ -486,7 +486,7 @@ .vcr-live-btn { background: rgba(239, 68, 68, 0.2); - color: #f87171; + color: var(--status-red); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.05em; @@ -501,15 +501,15 @@ border-radius: 4px; margin-left: auto; } -.vcr-mode-live { color: #22c55e; } -.vcr-mode-paused { color: #fbbf24; background: rgba(251,191,36,0.1); } -.vcr-mode-replay { color: #60a5fa; background: rgba(96,165,250,0.1); } +.vcr-mode-live { color: var(--status-green); } +.vcr-mode-paused { color: var(--status-yellow); background: rgba(251,191,36,0.1); } +.vcr-mode-replay { color: var(--accent); background: rgba(96,165,250,0.1); } .vcr-live-dot { display: inline-block; width: 6px; height: 6px; - background: #22c55e; + background: var(--status-green); border-radius: 50%; margin-right: 4px; animation: vcr-pulse 1.5s ease-in-out infinite; @@ -551,7 +551,7 @@ } .vcr-lcd-pkts { font-size: 0.6rem; - color: #fbbf24; + color: var(--status-yellow); text-shadow: 0 0 4px rgba(251, 191, 36, 0.5); font-weight: 700; min-height: 0.7rem; @@ -559,7 +559,7 @@ .vcr-missed { font-size: 0.7rem; font-weight: 700; - color: #fbbf24; + color: var(--status-yellow); background: rgba(251,191,36,0.15); padding: 2px 6px; border-radius: 4px; @@ -587,7 +587,7 @@ } .vcr-scope-btn.active { background: rgba(59,130,246,0.2); - color: #60a5fa; + color: var(--accent); border-color: rgba(59,130,246,0.3); } @@ -613,7 +613,7 @@ top: 0; width: 2px; height: 100%; - background: #f87171; + background: var(--status-red); border-radius: 1px; pointer-events: none; box-shadow: 0 0 4px rgba(248,113,113,0.5); @@ -631,7 +631,7 @@ .vcr-prompt-btn { background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.25); - color: #60a5fa; + color: var(--accent); font-size: 0.75rem; font-weight: 600; padding: 4px 12px; diff --git a/public/live.js b/public/live.js index 294b6575..66b98f10 100644 --- a/public/live.js +++ b/public/live.js @@ -1210,7 +1210,7 @@ const isThis = h.pubkey === n.public_key || (h.prefix && n.public_key.toLowerCase().startsWith(h.prefix.toLowerCase())); const name = escapeHtml(h.name || h.prefix); if (isThis) return `${name}`; - return h.pubkey ? `${name}` : name; + return h.pubkey ? `${name}` : name; }).join(' โ†’ '); return `
${chain} (${p.count}ร—)
`; }).join(''); diff --git a/public/map.js b/public/map.js index 02e86989..54abe70f 100644 --- a/public/map.js +++ b/public/map.js @@ -238,7 +238,7 @@ const closeBtn = L.control({ position: 'topright' }); closeBtn.onAdd = function () { const div = L.DomUtil.create('div', 'leaflet-bar'); - div.innerHTML = 'โœ•'; + div.innerHTML = 'โœ•'; L.DomEvent.on(div, 'click', function (e) { L.DomEvent.preventDefault(e); routeLayer.clearLayers(); @@ -317,7 +317,7 @@ positions.forEach((p, i) => { const isOrigin = i === 0 && p.isOrigin; const isLast = i === positions.length - 1 && positions.length > 1; - const color = isOrigin ? '#06b6d4' : isLast ? '#ef4444' : i === 0 ? '#22c55e' : '#f59e0b'; + const color = isOrigin ? '#06b6d4' : isLast ? (getComputedStyle(document.documentElement).getPropertyValue('--status-red').trim() || '#ef4444') : i === 0 ? (getComputedStyle(document.documentElement).getPropertyValue('--status-green').trim() || '#22c55e') : '#f59e0b'; const radius = isOrigin ? 14 : 10; const label = isOrigin ? 'Sender' : isLast ? 'Last Hop' : `Hop ${isOrigin ? i : i}`; @@ -575,12 +575,12 @@ if (m.offset > 10) { const line = L.polyline([m.latLng, pos], { - color: '#ef4444', weight: 2, dashArray: '6,4', opacity: 0.85 + color: getComputedStyle(document.documentElement).getPropertyValue('--status-red').trim() || '#ef4444', weight: 2, dashArray: '6,4', opacity: 0.85 }); markerLayer.addLayer(line); // Small dot at true GPS position const dot = L.circleMarker(m.latLng, { - radius: 3, fillColor: '#ef4444', fillOpacity: 0.9, stroke: true, color: '#fff', weight: 1 + radius: 3, fillColor: getComputedStyle(document.documentElement).getPropertyValue('--status-red').trim() || '#ef4444', fillOpacity: 0.9, stroke: true, color: '#fff', weight: 1 }); markerLayer.addLayer(dot); } diff --git a/public/nodes.js b/public/nodes.js index b5662680..0e20d034 100644 --- a/public/nodes.js +++ b/public/nodes.js @@ -327,10 +327,10 @@ const el = document.getElementById('nodeCounts'); if (!el) return; el.innerHTML = [ - { k: 'repeaters', l: 'Repeaters', c: '#3b82f6' }, - { k: 'rooms', l: 'Rooms', c: '#6b7280' }, - { k: 'companions', l: 'Companions', c: '#22c55e' }, - { k: 'sensors', l: 'Sensors', c: '#f59e0b' }, + { k: 'repeaters', l: 'Repeaters', c: ROLE_COLORS.repeater }, + { k: 'rooms', l: 'Rooms', c: ROLE_COLORS.room || '#6b7280' }, + { k: 'companions', l: 'Companions', c: ROLE_COLORS.companion }, + { k: 'sensors', l: 'Sensors', c: ROLE_COLORS.sensor }, ].map(r => `${counts[r.k] || 0} ${r.l}`).join(''); } diff --git a/public/packets.js b/public/packets.js index 69e02c0b..a69b6c63 100644 --- a/public/packets.js +++ b/public/packets.js @@ -1184,7 +1184,7 @@ const hopLabel = decoded.path_len != null ? `${decoded.path_len} hops` : ''; const snrLabel = snr != null ? `SNR ${snr} dB` : ''; const meta = [chLabel, hopLabel, snrLabel].filter(Boolean).join(' ยท '); - messageHtml = `
+ messageHtml = `
${escapeHtml(decoded.text)}
${meta ? `
${meta}
` : ''}
`; @@ -1724,7 +1724,7 @@ if (newHops.length) await resolveHops(newHops); const container = document.createElement('div'); container.style.cssText = 'max-width:800px;margin:0 auto;padding:20px'; - container.innerHTML = `
โ† Back to packets
`; + container.innerHTML = `
โ† Back to packets
`; const detail = document.createElement('div'); container.appendChild(detail); await renderDetail(detail, data); diff --git a/public/perf.js b/public/perf.js index 41b223dd..79606750 100644 --- a/public/perf.js +++ b/public/perf.js @@ -34,8 +34,8 @@ // System health (memory, event loop, WS) if (health) { const m = health.memory, el = health.eventLoop; - const elColor = el.p95Ms > 500 ? '#ef4444' : el.p95Ms > 100 ? '#f59e0b' : '#22c55e'; - const memColor = m.heapUsed > m.heapTotal * 0.85 ? '#ef4444' : m.heapUsed > m.heapTotal * 0.7 ? '#f59e0b' : '#22c55e'; + const elColor = el.p95Ms > 500 ? 'var(--status-red)' : el.p95Ms > 100 ? 'var(--status-yellow)' : 'var(--status-green)'; + const memColor = m.heapUsed > m.heapTotal * 0.85 ? 'var(--status-red)' : m.heapUsed > m.heapTotal * 0.7 ? 'var(--status-yellow)' : 'var(--status-green)'; html += `

System Health

${m.heapUsed}MB
Heap Used / ${m.heapTotal}MB
${m.rss}MB
RSS
@@ -54,7 +54,7 @@
${c.size}
Server Entries
${c.hits}
Server Hits
${c.misses}
Server Misses
-
${c.hitRate}%
Server Hit Rate
+
${c.hitRate}%
Server Hit Rate
${c.staleHits || 0}
Stale Hits (SWR)
${c.recomputes || 0}
Recomputes
${clientCache}
Client Entries
@@ -63,7 +63,7 @@ html += `
${client.cacheHits || 0}
Client Hits
${client.cacheMisses || 0}
Client Misses
-
${client.cacheHitRate || 0}%
Client Hit Rate
+
${client.cacheHitRate || 0}%
Client Hit Rate
`; } } diff --git a/public/style.css b/public/style.css index bed88d30..ba8e9f99 100644 --- a/public/style.css +++ b/public/style.css @@ -4,6 +4,9 @@ --nav-bg: #0f0f23; --nav-bg2: #1a1a2e; --accent: #4a9eff; + --status-green: #22c55e; + --status-yellow: #eab308; + --status-red: #ef4444; --accent-hover: #6db3ff; --text: #1a1a2e; --text-muted: #5b6370; @@ -30,6 +33,9 @@ When changing dark theme variables, update BOTH blocks below. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { + --status-green: #22c55e; + --status-yellow: #eab308; + --status-red: #ef4444; --surface-0: #0f0f23; --surface-1: #1a1a2e; --surface-2: #232340; @@ -50,6 +56,9 @@ } /* โš ๏ธ DARK THEME VARIABLES โ€” KEEP IN SYNC with @media block above */ [data-theme="dark"] { + --status-green: #22c55e; + --status-yellow: #eab308; + --status-red: #ef4444; --surface-0: #0f0f23; --surface-1: #1a1a2e; --surface-2: #232340; @@ -666,9 +675,9 @@ button.ch-item.selected { background: var(--selected-bg); } } .tl-delta { font-size: 11px; color: var(--text-muted); text-align: right; } .tl-snr { font-size: 12px; font-weight: 600; text-align: right; } -.tl-snr.good { color: #16a34a; } -.tl-snr.ok { color: #ca8a04; } -.tl-snr.bad { color: #dc2626; } +.tl-snr.good { color: var(--status-green); } +.tl-snr.ok { color: var(--status-yellow); } +.tl-snr.bad { color: var(--status-red); } .tl-rssi { font-size: 12px; color: var(--text-muted); text-align: right; } /* === Scrollbar === */ @@ -682,15 +691,15 @@ button.ch-item.selected { background: var(--selected-bg); } .obs-summary { display: flex; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; } .obs-stat { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-muted); } .health-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; } -.health-dot.health-green { background: #22c55e; box-shadow: 0 0 6px #22c55e80; } -.health-dot.health-yellow { background: #eab308; box-shadow: 0 0 6px #eab30880; } -.health-dot.health-red { background: #ef4444; box-shadow: 0 0 6px #ef444480; } +.health-dot.health-green { background: var(--status-green); box-shadow: 0 0 6px #22c55e80; } +.health-dot.health-yellow { background: var(--status-yellow); box-shadow: 0 0 6px #eab30880; } +.health-dot.health-red { background: var(--status-red); box-shadow: 0 0 6px #ef444480; } .obs-table td:first-child { white-space: nowrap; } .obs-table td:nth-child(6) { max-width: none; overflow: visible; } .col-observer { min-width: 70px; max-width: none; } .spark-bar { position: relative; min-width: 60px; max-width: 100px; flex: 1; height: 18px; background: var(--border); border-radius: 4px; overflow: hidden; display: inline-block; vertical-align: middle; } @media (max-width: 640px) { .spark-bar { max-width: 60px; } } -.spark-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #60a5fa); border-radius: 4px; transition: width 0.3s; } +.spark-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hover, #60a5fa)); border-radius: 4px; transition: width 0.3s; } .spark-label { position: absolute; right: 4px; top: 0; line-height: 18px; font-size: 11px; color: var(--text); font-weight: 500; } /* === Dark mode input overrides === */ @@ -900,7 +909,7 @@ button.ch-item.selected { background: var(--selected-bg); } transition: color .15s, transform .15s; } .fav-star:hover { transform: scale(1.2); } -.fav-star.on { color: #f5a623; } +.fav-star.on { color: var(--status-yellow); } /* BYOP Decode Modal */ .byop-modal { max-width: 560px; } @@ -914,7 +923,7 @@ button.ch-item.selected { background: var(--selected-bg); } color: var(--text); } .byop-input:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; } -.byop-err { color: #ef4444; font-size: .85rem; } +.byop-err { color: var(--status-red); font-size: .85rem; } .byop-decoded { margin-top: 8px; } .byop-section { margin-bottom: 14px; } .byop-section-title { @@ -1048,9 +1057,9 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); } .hash-cell.hash-active:hover { outline: 2px solid var(--accent); outline-offset: -2px; } .hash-cell.hash-selected { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: 0 0 6px var(--accent); } .hash-bar-value { min-width: 120px; text-align: right; font-size: 13px; font-weight: 600; } -.badge-hash-1 { background: #ef444420; color: #ef4444; } -.badge-hash-2 { background: #22c55e20; color: #22c55e; } -.badge-hash-3 { background: #3b82f620; color: #3b82f6; } +.badge-hash-1 { background: #ef444420; color: var(--status-red); } +.badge-hash-2 { background: #22c55e20; color: var(--status-green); } +.badge-hash-3 { background: #3b82f620; color: var(--accent); } .timeline-legend { display: flex; gap: 16px; justify-content: center; margin-top: 8px; font-size: 12px; } .legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; } .timeline-chart svg { display: block; } @@ -1157,12 +1166,12 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); } /* Clickable hop links */ .hop-link { - color: var(--primary, #3b82f6); + color: var(--accent, #3b82f6); text-decoration: none; cursor: pointer; transition: color 0.15s; } -.hop-link:hover { color: var(--accent, #60a5fa); text-decoration: underline; } +.hop-link:hover { color: var(--accent-hover, #60a5fa); text-decoration: underline; } /* Detail map link */ .detail-map-link { @@ -1183,7 +1192,7 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); } padding: 5px 12px; background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(59, 130, 246, 0.25); - color: var(--primary, #3b82f6); + color: var(--accent, #3b82f6); border-radius: 6px; font-size: 0.78rem; font-weight: 600; @@ -1359,7 +1368,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); } height: 36px; border-radius: 6px; border: 1px solid var(--border, #333); - background: var(--bg-card, #1e1e1e); + background: var(--card-bg, #1e1e1e); color: var(--text, #fff); font-size: 18px; cursor: pointer; @@ -1604,7 +1613,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); } display: flex; align-items: center; gap: 4px; - color: var(--text-secondary, #6b7280); + color: var(--text-muted, #6b7280); font-size: 11px; white-space: nowrap; } @@ -1625,8 +1634,8 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); } /* Audio voice selector */ .audio-voice-select { - background: var(--bg-secondary, #1f2937); - color: var(--text-primary, #e5e7eb); + background: var(--input-bg, #1f2937); + color: var(--text, #e5e7eb); border: 1px solid var(--border, #374151); border-radius: 4px; padding: 2px 4px; diff --git a/public/traces.js b/public/traces.js index 1614d9b2..eec05fe6 100644 --- a/public/traces.js +++ b/public/traces.js @@ -239,8 +239,8 @@ for (const [node, pos] of nodePos) { const isEndpoint = node === 'Origin' || node === 'Dest'; const r = isEndpoint ? 18 : 14; - const fill = isEndpoint ? 'var(--primary, #3b82f6)' : 'var(--surface-2, #374151)'; - const stroke = isEndpoint ? 'var(--primary, #3b82f6)' : 'var(--border, #4b5563)'; + const fill = isEndpoint ? 'var(--accent, #3b82f6)' : 'var(--surface-2, #374151)'; + const stroke = isEndpoint ? 'var(--accent, #3b82f6)' : 'var(--border, #4b5563)'; const label = isEndpoint ? node : node; nodesSvg += ``; nodesSvg += `${escapeHtml(label)}`;