From 2d91d847d49a3b4b32c414a115671f0fa8ab1a04 Mon Sep 17 00:00:00 2001
From: Armin <armin@cherry>
Date: Mon, 6 Jul 2026 18:10:26 +0200
Subject: [PATCH] Add color legend to live spectrum section

Add a 4-item legend below the realtime FFT chart explaining the line
colors: FFT Spectrum (cyan), Peak Hold (white), Max Peaks (orange),
Cutoff (red). Also add corresponding CSS classes for the legend
layout and swatches, including a dashed variant for the
spectrum-section legend.
---
 index.html |  6 ++++++
 style.css  | 27 +++++++++++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/index.html b/index.html
index 2929eed..98ca757 100644
--- a/index.html
+++ b/index.html
@@ -56,6 +56,12 @@
         <canvas id="liveSpectrum"></canvas>
         <canvas id="liveSpectrumOverlay" style="position:absolute;top:0;left:0;pointer-events:none"></canvas>
       </div>
+      <div class="legend">
+        <span class="legend-item"><span class="legend-swatch" style="background:#00bcd4"></span>FFT Spectrum</span>
+        <span class="legend-item"><span class="legend-swatch" style="background:rgba(255,255,255,0.85)"></span>Peak Hold</span>
+        <span class="legend-item"><span class="legend-swatch" style="background:rgba(255,183,77,0.5)"></span>Max Peaks</span>
+        <span class="legend-item"><span class="legend-swatch" style="background:#ff5252"></span>Cutoff</span>
+      </div>
       <div class="metrics-grid" style="margin-top:10px">
         <div class="metric-card">
           <div class="metric-label">Live Peak</div>
diff --git a/style.css b/style.css
index ff32dca..c78654f 100644
--- a/style.css
+++ b/style.css
@@ -190,6 +190,33 @@ section h2 {
 }
 #spectrumChart { height: 360px; }
 
+.legend {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 10px;
+}
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--fg2);
+  font-family: var(--font);
+}
+.legend-swatch {
+  display: inline-block;
+  width: 12px;
+  height: 3px;
+  border-radius: 1px;
+}
+.legend-swatch-dashed {
+  width: 12px;
+  height: 0;
+  border-top: 2px dashed;
+}
+
 .player-controls {
   display: flex;
   align-items: center;