From 63fd35802e04a369dc7f2f435a943639a44f3248 Mon Sep 17 00:00:00 2001 From: Stan Grams Date: Sun, 1 Mar 2026 18:06:17 +0100 Subject: [PATCH] [feat](trx-frontend): add Neon Disco colour scheme MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Deep purple-black backgrounds, neon magenta (#ff10e0) as primary accent and neon green (#39ff14) as secondary. Waterfall sweeps hue 300→120 (magenta→green). Light variant uses muted (#cc00a8 / #1f8800) counterparts on a lavender-tinted white background. - style.css: dark + light CSS variable blocks for neon-disco - app.js: CANVAS_PALETTE entry; "neon-disco" added to valid styles - index.html: Neon Disco option in the style picker Co-Authored-By: Claude Sonnet 4.6 Signed-off-by: Stan Grams --- .../trx-frontend-http/assets/web/app.js | 20 ++++++- .../trx-frontend-http/assets/web/index.html | 1 + .../trx-frontend-http/assets/web/style.css | 58 +++++++++++++++++++ 3 files changed, 78 insertions(+), 1 deletion(-) diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js index 41fd01c..2af7c4a 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js +++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js @@ -490,6 +490,24 @@ const CANVAS_PALETTE = { waterfallHue: [220, 180], waterfallSat: 100, waterfallLight: [90, 42], waterfallAlpha: [0.35, 0.82], }, }, + "neon-disco": { + dark: { + bg: "#090010", + spectrumLine: "#ff10e0", spectrumFill: "rgba(255,16,224,0.12)", + spectrumGrid: "rgba(255,16,224,0.10)", spectrumLabel: "rgba(240,200,255,0.55)", + waveformLine: "rgba(57,255,20,0.92)", waveformPeak: "rgba(255,16,224,0.88)", + waveformGrid: "rgba(255,16,224,0.10)", waveformLabel: "rgba(240,200,255,0.65)", + waterfallHue: [300, 120], waterfallSat: 100, waterfallLight: [8, 55], waterfallAlpha: [0.30, 0.92], + }, + light: { + bg: "#f0d8ff", + spectrumLine: "#cc00a8", spectrumFill: "rgba(204,0,168,0.12)", + spectrumGrid: "rgba(100,0,150,0.10)", spectrumLabel: "rgba(50,0,80,0.55)", + waveformLine: "rgba(31,136,0,0.95)", waveformPeak: "rgba(180,0,120,0.9)", + waveformGrid: "rgba(50,0,80,0.10)", waveformLabel: "rgba(50,0,80,0.65)", + waterfallHue: [300, 120], waterfallSat: 90, waterfallLight: [90, 45], waterfallAlpha: [0.35, 0.80], + }, + }, }; function currentStyle() { @@ -504,7 +522,7 @@ function canvasPalette() { function setStyle(style) { const remapped = style === "nord" ? "arctic" : style === "monokai" ? "lime" : style; - const valid = ["original", "arctic", "lime", "contrast"]; + const valid = ["original", "arctic", "lime", "contrast", "neon-disco"]; const next = valid.includes(remapped) ? remapped : "original"; if (next === "original") { document.documentElement.removeAttribute("data-style"); diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html index 974659e..8a1ed63 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html +++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html @@ -44,6 +44,7 @@ + diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css index 816bce0..0eae7c0 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css +++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css @@ -1827,3 +1827,61 @@ button:focus-visible, input:focus-visible, select:focus-visible { --wavelength-fg: #444444; --spectrum-bg: #f4f4f4; } + +/* ── Neon Disco style ─────────────────────────────────────────────────── */ +[data-style="neon-disco"] { + --bg: #0d0015; + --card-bg: #180026; + --input-bg: #100018; + --border: #3d0060; + --border-light: #7700bb; + --text: #f5e0ff; + --text-muted: #b070d8; + --text-heading: #fce8ff; + --btn-bg: #2a0042; + --btn-border: #9900dd; + --accent-green: #ff10e0; + --accent-yellow: #39ff14; + --accent-red: #ff1460; + --jog-hi: #360058; + --jog-lo: #280042; + --jog-shadow: rgba(0,0,0,0.65); + --jog-inset: rgba(255,16,224,0.08); + --audio-level-bg: #180026; + --audio-level-border: #7700bb; + --audio-level-fill-start: #ff10e0; + --audio-level-fill-end: #39ff14; + --filter-bg: #2a0042; + --filter-fg: #f5e0ff; + --filter-border: #9900dd; + --wavelength-fg: #9055b8; + --spectrum-bg: #090010; +} +[data-style="neon-disco"][data-theme="light"] { + --bg: #faeeff; + --card-bg: #fff4ff; + --input-bg: #f2e0ff; + --border: #dda8f5; + --border-light: #cc80e8; + --text: #1a0030; + --text-muted: #7a30a0; + --text-heading: #1a0030; + --btn-bg: #f0d8ff; + --btn-border: #bb80dd; + --accent-green: #cc00a8; + --accent-yellow: #1f8800; + --accent-red: #cc0044; + --jog-hi: #f0d8ff; + --jog-lo: #e2c8f5; + --jog-shadow: rgba(60,0,100,0.18); + --jog-inset: rgba(255,255,255,0.72); + --audio-level-bg: #f0d8ff; + --audio-level-border: #cc80e8; + --audio-level-fill-start: #cc00a8; + --audio-level-fill-end: #1f8800; + --filter-bg: #f0d8ff; + --filter-fg: #1a0030; + --filter-border: #bb80dd; + --wavelength-fg: #7030a0; + --spectrum-bg: #f0d8ff; +}