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 cf27e16..de044f7 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
@@ -544,6 +544,24 @@ const CANVAS_PALETTE = {
waterfallHue: [18, 48], waterfallSat: 90, waterfallLight: [92, 42], waterfallAlpha: [0.34, 0.84],
},
},
+ blood: {
+ dark: {
+ bg: "#140406",
+ spectrumLine: "#d81d3f", spectrumFill: "rgba(216,29,63,0.14)",
+ spectrumGrid: "rgba(255,90,110,0.08)", spectrumLabel: "rgba(255,208,214,0.54)",
+ waveformLine: "rgba(224,64,94,0.94)", waveformPeak: "rgba(255,128,128,0.90)",
+ waveformGrid: "rgba(255,84,110,0.10)", waveformLabel: "rgba(255,220,224,0.66)",
+ waterfallHue: [350, 6], waterfallSat: 90, waterfallLight: [8, 52], waterfallAlpha: [0.26, 0.88],
+ },
+ light: {
+ bg: "#fff0f1",
+ spectrumLine: "#a60f2f", spectrumFill: "rgba(166,15,47,0.14)",
+ spectrumGrid: "rgba(120,24,44,0.09)", spectrumLabel: "rgba(86,18,32,0.56)",
+ waveformLine: "rgba(160,18,52,0.95)", waveformPeak: "rgba(212,74,95,0.90)",
+ waveformGrid: "rgba(120,24,44,0.10)", waveformLabel: "rgba(86,18,32,0.68)",
+ waterfallHue: [350, 10], waterfallSat: 76, waterfallLight: [92, 40], waterfallAlpha: [0.34, 0.84],
+ },
+ },
};
function currentStyle() {
@@ -558,7 +576,7 @@ function canvasPalette() {
function setStyle(style) {
const remapped = style === "nord" ? "arctic" : style === "monokai" ? "lime" : style;
- const valid = ["original", "arctic", "lime", "contrast", "neon-disco", "golden-rain", "fire"];
+ const valid = ["original", "arctic", "lime", "contrast", "neon-disco", "golden-rain", "fire", "blood"];
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 a52cf06..1cedc0d 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
@@ -46,7 +46,8 @@
-
+
+
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 d6829f1..042d300 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
@@ -2307,7 +2307,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
--spectrum-bg: #f5ecd9;
}
-/* ── Fire style ───────────────────────────────────────────────────────── */
+/* ── Amber style ──────────────────────────────────────────────────────── */
[data-style="fire"] {
--bg: #120706;
--card-bg: #1b0c0a;
@@ -2364,3 +2364,61 @@ button:focus-visible, input:focus-visible, select:focus-visible {
--wavelength-fg: #9a5a3a;
--spectrum-bg: #fff0e4;
}
+
+/* ── Blood style ──────────────────────────────────────────────────────── */
+[data-style="blood"] {
+ --bg: #140406;
+ --card-bg: #1c080b;
+ --input-bg: #190709;
+ --border: #4e1520;
+ --border-light: #7d2434;
+ --text: #ffe3e5;
+ --text-muted: #ca8b93;
+ --text-heading: #fff2f3;
+ --btn-bg: #2a0d12;
+ --btn-border: #8f3142;
+ --accent-green: #c8475d;
+ --accent-yellow: #f06d6d;
+ --accent-red: #b80f2d;
+ --jog-hi: #351016;
+ --jog-lo: #230b0f;
+ --jog-shadow: rgba(0,0,0,0.64);
+ --jog-inset: rgba(255,146,160,0.07);
+ --audio-level-bg: #210a0e;
+ --audio-level-border: #7d2434;
+ --audio-level-fill-start: #b80f2d;
+ --audio-level-fill-end: #f06d6d;
+ --filter-bg: #2b0e14;
+ --filter-fg: #ffe3e5;
+ --filter-border: #8f3142;
+ --wavelength-fg: #d0939c;
+ --spectrum-bg: #150508;
+}
+[data-style="blood"][data-theme="light"] {
+ --bg: #fff0f1;
+ --card-bg: #fff6f7;
+ --input-bg: #ffe4e7;
+ --border: #efc2c8;
+ --border-light: #d6919c;
+ --text: #481018;
+ --text-muted: #8f4754;
+ --text-heading: #340a12;
+ --btn-bg: #ffd8dd;
+ --btn-border: #cb6e7e;
+ --accent-green: #bb324c;
+ --accent-yellow: #d94b5f;
+ --accent-red: #a80b28;
+ --jog-hi: #ffd8dd;
+ --jog-lo: #ffc9d0;
+ --jog-shadow: rgba(100,25,39,0.18);
+ --jog-inset: rgba(255,255,255,0.74);
+ --audio-level-bg: #ffe1e5;
+ --audio-level-border: #d6919c;
+ --audio-level-fill-start: #a80b28;
+ --audio-level-fill-end: #d94b5f;
+ --filter-bg: #ffd8dd;
+ --filter-fg: #481018;
+ --filter-border: #cb6e7e;
+ --wavelength-fg: #9e5562;
+ --spectrum-bg: #ffecef;
+}