diff --git a/renderer/app.css b/renderer/app.css index ca61885..b9170a6 100644 --- a/renderer/app.css +++ b/renderer/app.css @@ -1,28 +1,29 @@ -/* Neon / terminal "hackertyper" theme. +/* Neon / terminal "hackertyper" theme — electric-blue variant. Dense, operator-oriented UI — no framework, hand-tuned CSS. Class names are load-bearing (HTML + renderer/app.js reference them); this file only restyles, it doesn't rename anything. */ :root { - /* Near-black base, faintly green-shifted like a phosphor display. */ - --bg: #03070a; - --bg-elev: #070d12; - --bg-elev-2: #0c151c; + /* Blue-black base, like a cold CRT. */ + --bg: #02050c; + --bg-elev: #060c16; + --bg-elev-2: #0b1422; - /* Phosphor-tinted text. */ - --fg: #d7f7ea; - --fg-dim: #6f9b8e; - --border: #123026; + /* Blue-white text. */ + --fg: #d6ecff; + --fg-dim: #6f90b5; + --border: #163457; - /* Neon accents. */ - --neon: #00ffa3; /* primary — terminal green/cyan */ - --neon-soft: #19f9d8; - --cyan: #38e1ff; + /* Neon accents — blue-forward. */ + --neon: #21c8ff; /* primary — electric blue/cyan */ + --neon-soft: #7ce0ff; + --cyan: #46e6ff; + --blue: #2a7bff; --magenta: #ff3df0; --accent: var(--neon); --accent-hover: var(--neon-soft); - --ok: #2bff88; + --ok: #2bff9e; /* health "ok" stays green — it's semantic */ --warn: #ffc44d; --danger: #ff3b6b; --danger-hover: #ff5d85; @@ -30,11 +31,11 @@ --mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; - /* Reusable glow shadows. */ - --glow-neon: 0 0 6px rgba(0, 255, 163, 0.55); - --glow-neon-strong: 0 0 10px rgba(0, 255, 163, 0.7), 0 0 22px rgba(0, 255, 163, 0.35); - --glow-danger: 0 0 8px rgba(255, 59, 107, 0.6); - --glow-cyan: 0 0 8px rgba(56, 225, 255, 0.55); + /* Reusable glow shadows — turned up. */ + --glow-neon: 0 0 8px rgba(33, 200, 255, 0.65); + --glow-neon-strong: 0 0 12px rgba(33, 200, 255, 0.85), 0 0 30px rgba(33, 200, 255, 0.5), 0 0 56px rgba(33, 200, 255, 0.22); + --glow-danger: 0 0 10px rgba(255, 59, 107, 0.7), 0 0 24px rgba(255, 59, 107, 0.35); + --glow-cyan: 0 0 10px rgba(70, 230, 255, 0.6); } * { box-sizing: border-box; } @@ -51,11 +52,12 @@ html, body { line-height: 1.45; } -/* Ambient phosphor vignette behind everything. */ +/* Ambient neon vignette behind everything. */ body { background: - radial-gradient(1200px 600px at 50% -10%, rgba(0, 255, 163, 0.08), transparent 60%), - radial-gradient(900px 500px at 100% 110%, rgba(56, 225, 255, 0.06), transparent 60%), + radial-gradient(1200px 600px at 50% -10%, rgba(33, 200, 255, 0.12), transparent 60%), + radial-gradient(900px 520px at 100% 110%, rgba(42, 123, 255, 0.1), transparent 60%), + radial-gradient(700px 400px at 0% 100%, rgba(70, 230, 255, 0.07), transparent 60%), var(--bg); } @@ -70,7 +72,7 @@ body::after { to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, - rgba(0, 0, 0, 0.18) 3px, + rgba(0, 0, 0, 0.16) 3px, rgba(0, 0, 0, 0) 4px ); mix-blend-mode: multiply; @@ -83,17 +85,17 @@ body::after { 99% { opacity: 0.42; } } -::selection { background: rgba(0, 255, 163, 0.28); color: #fff; text-shadow: none; } +::selection { background: rgba(33, 200, 255, 0.32); color: #fff; text-shadow: none; } /* Neon scrollbars (WebKit / Chromium — Electron). */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-elev); } ::-webkit-scrollbar-thumb { - background: #0f3a2c; + background: #14385c; border-radius: 6px; border: 1px solid var(--border); } -::-webkit-scrollbar-thumb:hover { background: #135a44; box-shadow: var(--glow-neon); } +::-webkit-scrollbar-thumb:hover { background: #1c5d92; box-shadow: var(--glow-neon); } code { font-family: var(--mono); @@ -116,9 +118,9 @@ code { align-items: center; gap: 16px; padding: 10px 16px; - background: linear-gradient(180deg, rgba(0, 255, 163, 0.05), transparent), var(--bg-elev); - border-bottom: 1px solid var(--border); - box-shadow: 0 1px 0 rgba(0, 255, 163, 0.15), 0 6px 18px -10px rgba(0, 255, 163, 0.3); + background: linear-gradient(180deg, rgba(33, 200, 255, 0.08), transparent), var(--bg-elev); + border-bottom: 1px solid var(--neon); + box-shadow: 0 1px 0 rgba(33, 200, 255, 0.3), 0 8px 24px -10px rgba(33, 200, 255, 0.5); } .topbar .brand { font-weight: 700; @@ -128,7 +130,7 @@ code { text-shadow: var(--glow-neon-strong); animation: brandflicker 4.5s infinite; } -.topbar .brand::before { content: "▌ "; color: var(--neon); opacity: 0.8; } +.topbar .brand::before { content: "▌ "; color: var(--neon); opacity: 0.85; } @keyframes brandflicker { 0%, 19%, 21%, 55%, 57%, 100% { opacity: 1; text-shadow: var(--glow-neon-strong); } 20% { opacity: 0.7; } @@ -148,9 +150,9 @@ code { display: flex; flex-direction: column; gap: 12px; - box-shadow: var(--glow-neon-strong), inset 0 0 30px rgba(0, 255, 163, 0.05); + box-shadow: var(--glow-neon-strong), inset 0 0 40px rgba(33, 200, 255, 0.07); } -.card h1 { margin: 0 0 4px; font-size: 18px; color: var(--neon); text-shadow: var(--glow-neon); letter-spacing: 1px; } +.card h1 { margin: 0 0 4px; font-size: 18px; color: var(--neon); text-shadow: var(--glow-neon-strong); letter-spacing: 1px; } .card p { margin: 0 0 8px; } label { @@ -177,10 +179,10 @@ select { outline: none; transition: border-color 0.12s ease, box-shadow 0.12s ease; } -input::placeholder { color: #3f5e54; } +input::placeholder { color: #43607f; } input:focus, select:focus { border-color: var(--neon); - box-shadow: var(--glow-neon), inset 0 0 8px rgba(0, 255, 163, 0.12); + box-shadow: var(--glow-neon), inset 0 0 10px rgba(33, 200, 255, 0.15); caret-color: var(--neon); } /* Glowing checkbox accent. */ @@ -202,18 +204,17 @@ button:hover:not(:disabled) { border-color: var(--neon); color: var(--neon); box button:disabled { opacity: 0.4; cursor: not-allowed; } button.primary { - background: rgba(0, 255, 163, 0.1); + background: rgba(33, 200, 255, 0.12); color: var(--neon); border-color: var(--neon); font-weight: 700; text-transform: uppercase; text-shadow: var(--glow-neon); - box-shadow: var(--glow-neon), inset 0 0 10px rgba(0, 255, 163, 0.12); + box-shadow: var(--glow-neon), inset 0 0 12px rgba(33, 200, 255, 0.15); } button.primary:hover:not(:disabled) { - background: rgba(0, 255, 163, 0.18); - color: #002a1c; - background-color: var(--neon); + background: var(--neon); + color: #00121f; box-shadow: var(--glow-neon-strong); text-shadow: none; } @@ -221,19 +222,19 @@ button.ghost { background: transparent; } button.ghost:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-cyan); } button.danger { - background: rgba(255, 59, 107, 0.12); + background: rgba(255, 59, 107, 0.14); color: var(--danger); border-color: var(--danger); font-weight: 700; text-transform: uppercase; text-shadow: var(--glow-danger); - box-shadow: var(--glow-danger), inset 0 0 10px rgba(255, 59, 107, 0.12); + box-shadow: var(--glow-danger), inset 0 0 12px rgba(255, 59, 107, 0.14); } button.danger:hover:not(:disabled) { background: var(--danger); color: #1a0008; border-color: var(--danger-hover); - box-shadow: 0 0 12px rgba(255, 59, 107, 0.8), 0 0 26px rgba(255, 59, 107, 0.4); + box-shadow: 0 0 14px rgba(255, 59, 107, 0.85), 0 0 30px rgba(255, 59, 107, 0.45); text-shadow: none; } @@ -241,7 +242,7 @@ button.danger:hover:not(:disabled) { width: 320px; padding: 16px; border-right: 1px solid var(--border); - background: linear-gradient(180deg, rgba(0, 255, 163, 0.03), transparent 240px), var(--bg-elev); + background: linear-gradient(180deg, rgba(33, 200, 255, 0.05), transparent 260px), var(--bg-elev); overflow-y: auto; display: flex; flex-direction: column; @@ -287,7 +288,7 @@ button.danger:hover:not(:disabled) { overflow: auto; border: 1px solid var(--border); border-radius: 4px; - box-shadow: inset 0 0 24px rgba(0, 255, 163, 0.04); + box-shadow: inset 0 0 30px rgba(33, 200, 255, 0.05); } .fleet-table { width: 100%; @@ -318,14 +319,14 @@ button.danger:hover:not(:disabled) { text-overflow: ellipsis; max-width: 320px; } -.fleet-table tbody tr:hover { background: rgba(0, 255, 163, 0.06); } +.fleet-table tbody tr:hover { background: rgba(33, 200, 255, 0.08); } .fleet-table tbody tr.selected { - background: rgba(0, 255, 163, 0.12); - box-shadow: inset 3px 0 0 var(--neon), inset 0 0 18px rgba(0, 255, 163, 0.12); + background: rgba(33, 200, 255, 0.14); + box-shadow: inset 3px 0 0 var(--neon), inset 0 0 22px rgba(33, 200, 255, 0.16); } -.status-ok { color: var(--ok); text-shadow: 0 0 6px rgba(43, 255, 136, 0.55); } -.status-warn { color: var(--warn); text-shadow: 0 0 6px rgba(255, 196, 77, 0.5); } +.status-ok { color: var(--ok); text-shadow: 0 0 7px rgba(43, 255, 158, 0.6); } +.status-warn { color: var(--warn); text-shadow: 0 0 7px rgba(255, 196, 77, 0.55); } .status-err { color: var(--danger); text-shadow: var(--glow-danger); } .status-info { color: var(--info); text-shadow: var(--glow-cyan); } .status-pending { color: var(--fg-dim); } @@ -363,3 +364,54 @@ button.danger:hover:not(:disabled) { color: var(--neon); text-shadow: var(--glow-neon); } + +/* -------- Themed confirmation modal (confirmTyped) -------- */ +.modal-overlay { + position: fixed; + inset: 0; + z-index: 10000; + display: flex; + align-items: center; + justify-content: center; + background: rgba(2, 5, 12, 0.74); + backdrop-filter: blur(2px); + animation: modalfade 0.12s ease; +} +@keyframes modalfade { from { opacity: 0; } to { opacity: 1; } } + +.modal { + width: 480px; + max-width: calc(100vw - 40px); + background: var(--bg-elev); + border: 1px solid var(--neon); + border-radius: 8px; + padding: 22px; + display: flex; + flex-direction: column; + gap: 14px; + box-shadow: var(--glow-neon-strong), inset 0 0 40px rgba(33, 200, 255, 0.06); +} +.modal.modal-danger { + border-color: var(--danger); + box-shadow: 0 0 14px rgba(255, 59, 107, 0.8), 0 0 34px rgba(255, 59, 107, 0.45), inset 0 0 40px rgba(255, 59, 107, 0.06); +} +.modal h3 { + margin: 0; + font-size: 15px; + letter-spacing: 1.5px; + text-transform: uppercase; + color: var(--neon); + text-shadow: var(--glow-neon-strong); +} +.modal.modal-danger h3 { color: var(--danger); text-shadow: var(--glow-danger); } +.modal-body { color: var(--fg); font-size: 13px; line-height: 1.55; } +.modal-type { + display: flex; + flex-direction: column; + gap: 6px; + text-transform: none; + letter-spacing: 0; + color: var(--fg-dim); +} +.modal-type-label { display: block; } +.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 2px; } diff --git a/renderer/app.js b/renderer/app.js index e400e06..a9bcf98 100644 --- a/renderer/app.js +++ b/renderer/app.js @@ -459,11 +459,15 @@ $('#btn-delete-selected').addEventListener('click', async () => { `You're about to DELETE ${ids.length} ONU(s) from MCMS ` + `(${downCount} currently down).\n\n` + `This removes the ONU-CFG document and service configuration. ` + - `Physical ONUs that come back online will re-register from scratch.\n\n` + - `Click OK to continue to the final confirmation.`; - if (!confirm(summary)) return; - const typed = prompt(`Type DELETE to confirm removal of ${ids.length} ONU(s):`); - if (typed !== 'DELETE') { + `Physical ONUs that come back online will re-register from scratch.`; + const confirmed = await confirmTyped({ + title: 'Delete ONUs from MCMS', + body: summary, + requireWord: 'DELETE', + confirmLabel: 'Delete', + danger: true, + }); + if (!confirmed) { $('#delete-status').textContent = 'Cancelled.'; return; } @@ -696,12 +700,13 @@ $('#btn-execute').addEventListener('click', async () => { ); } const fecWarning = warnings.length ? `\n\nWARNING:\n • ${warnings.join('\n • ')}` : ''; - if (!confirm( - `About to stage ${targetVersion} to the inactive bank on ${onuIds.length} ONU(s). ` + - `Proceed?${fecWarning}`, - )) { - return; - } + const proceed = await confirmTyped({ + title: 'Stage firmware upgrade', + body: `About to stage ${targetVersion} to the inactive bank on ${onuIds.length} ONU(s).${fecWarning}`, + confirmLabel: 'Execute upgrade', + danger: true, + }); + if (!proceed) return; $('#btn-execute').disabled = true; // Save the plan to CSV BEFORE writing anything to MCMS, so even if @@ -1284,6 +1289,56 @@ function escapeHtml(s) { .replace(/'/g, '''); } +// Themed confirmation modal. Replaces window.confirm + window.prompt — +// the latter is NOT supported in Electron (it returns null and shows +// nothing, which silently aborted the delete/flood-change flows). When +// `requireWord` is set, the operator must type it exactly to enable the +// confirm button (the "are you really sure" gate for destructive ops). +// Resolves true only on an explicit confirm; false on cancel/Escape. +function confirmTyped({ title, body, requireWord, confirmLabel = 'Confirm', danger = false } = {}) { + return new Promise((resolve) => { + const needWord = !!requireWord; + const overlay = document.createElement('div'); + overlay.className = 'modal-overlay'; + overlay.innerHTML = ` + `; + document.body.appendChild(overlay); + + const input = overlay.querySelector('.modal-input'); + const okBtn = overlay.querySelector('.modal-ok'); + const cancelBtn = overlay.querySelector('.modal-cancel'); + const matches = () => !needWord || (input && input.value === requireWord); + + const cleanup = (result) => { + document.removeEventListener('keydown', onKey, true); + overlay.remove(); + resolve(result); + }; + const onKey = (e) => { + if (e.key === 'Escape') { e.preventDefault(); cleanup(false); } + else if (e.key === 'Enter' && matches()) { e.preventDefault(); cleanup(true); } + }; + + if (input) input.addEventListener('input', () => { okBtn.disabled = !matches(); }); + okBtn.addEventListener('click', () => { if (matches()) cleanup(true); }); + cancelBtn.addEventListener('click', () => cleanup(false)); + overlay.addEventListener('mousedown', (e) => { if (e.target === overlay) cleanup(false); }); + document.addEventListener('keydown', onKey, true); + (input || okBtn).focus(); + }); +} + // -------- OLT inspector: bulk PON flooding mode change -------- $('#btn-to-olts').addEventListener('click', () => { @@ -1392,10 +1447,15 @@ $('#btn-olt-execute').addEventListener('click', async () => { `Apply "${fromMode} → ${targetMode}" to NNI services matching "${tagPattern}" ` + `on ${ids.length} OLT(s).\n\nThis GETs each OLT-CFG, mutates the matching ` + `NNI Networks entries, and PUTs the full document back. The operation is ` + - `irreversible from this app (no undo).\n\nClick OK to continue to the final confirmation.`; - if (!confirm(summary)) return; - const typed = prompt(`Type APPLY to confirm bulk mode change on ${ids.length} OLT(s):`); - if (typed !== 'APPLY') { + `irreversible from this app (no undo).`; + const confirmed = await confirmTyped({ + title: 'Apply PON flooding-mode change', + body: summary, + requireWord: 'APPLY', + confirmLabel: 'Execute change', + danger: true, + }); + if (!confirmed) { $('#olt-exec-status').textContent = 'Cancelled.'; return; }