audio/tcdweb
2
0
Fork 0
mirror of https://codeberg.org/armin/tcdweb.git synced 2026-09-01 13:30:58 +02:00
Code Issues Projects Releases Packages Wiki Activity

Add color legend to live spectrum section

Browse source 
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.
This commit is contained in:
Armin 2026-07-06 18:10:26 +02:00
commit 2d91d847d4
2 changed files with 33 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

6
index.html
View file

@ -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>