From 9971b0c4d14e0e91c2f8c155bfa0e715e25374d8 Mon Sep 17 00:00:00 2001 From: Brain Date: Sun, 21 Sep 2025 01:55:10 -0400 Subject: [PATCH 1/8] Update style.css --- css/style.css | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/css/style.css b/css/style.css index bc1a22b..d4a5ff8 100644 --- a/css/style.css +++ b/css/style.css @@ -278,10 +278,6 @@ width: 100px; } - .slider-container.vertical > label { - margin-top: 15px; - } - .mixer { background: var(--deck-bg); border-radius: 15px; @@ -334,7 +330,7 @@ width: 80%; flex: 1; background: #222; - border-radius: 2px; + border-radius: 5px; position: relative; overflow: hidden; border: 1px solid rgba(0,0,0,0.5); @@ -347,8 +343,16 @@ left: 0; width: 100%; height: var(--vu-level, 0%); - background: linear-gradient(to top, #00ff00 0%, #00ff00 60%, #ffff00 60%, #ffff00 85%, #ff0000 85%, #ff0000 100%); - transition: height 0.05s linear; + background-color: green; + transition: height 0.05s ease-out, background-color 0.05s; + } + + .vu-bar-stereo[data-level="yellow"]::after { + background-color: yellow; + } + + .vu-bar-stereo[data-level="red"]::after { + background-color: red; } .vu-label { From f7c7adde1d3fcf763396be5f068c54610d01a9e1 Mon Sep 17 00:00:00 2001 From: Brain Date: Sun, 21 Sep 2025 01:55:30 -0400 Subject: [PATCH 2/8] Update main.js --- js/main.js | 31 +++++++++++++++++++------------ 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/js/main.js b/js/main.js index 5e48dbd..3545426 100644 --- a/js/main.js +++ b/js/main.js @@ -367,12 +367,8 @@ class Deck { const barL = document.getElementById(`vuBar${this.id}L`); const barR = document.getElementById(`vuBar${this.id}R`); - if (barL) { - barL.style.setProperty('--vu-level', `${Math.min(peakL * 1.5 * 100, 100)}%`); - } - if (barR) { - barR.style.setProperty('--vu-level', `${Math.min(peakR * 1.5 * 100, 100)}%`); - } + updateBar(barL, peakL); + updateBar(barR, peakR); } play(startTimeOverride) { @@ -587,6 +583,21 @@ class Deck { } }); + function updateBar(barElement, level) { + if (!barElement) return; + + const heightPercent = Math.min(level * 100, 100); + barElement.style.setProperty('--vu-level', `${heightPercent}%`); + + if (level > 0.9) { // Red threshold (changed from 0.8 to 0.9 for better visual) + barElement.dataset.level = 'red'; + } else if (level > 0.4) { // Yellow threshold (changed from 0.3 to 0.4) + barElement.dataset.level = 'yellow'; + } else { + barElement.dataset.level = 'green'; + } + } + function setupSpectrum() { spectrumAnalyser = audioContext.createAnalyser(); spectrumAnalyser.fftSize = 256; @@ -648,12 +659,8 @@ class Deck { const barL = document.getElementById('vuBarMasterL'); const barR = document.getElementById('vuBarMasterR'); - if (barL) { - barL.style.setProperty('--vu-level', `${Math.min(peakL * 1.5 * 100, 100)}%`); - } - if (barR) { - barR.style.setProperty('--vu-level', `${Math.min(peakR * 1.5 * 100, 100)}%`); - } + updateBar(barL, peakL); + updateBar(barR, peakR); } function startUpdateLoop() { From fbfdcb3f4b4e88634f6122a478d0a357e9836807 Mon Sep 17 00:00:00 2001 From: Brain Date: Sun, 21 Sep 2025 09:18:33 -0400 Subject: [PATCH 3/8] Update index.html --- index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 3bd1a3a..721a12f 100644 --- a/index.html +++ b/index.html @@ -47,11 +47,11 @@

🎧 DJ Toolkit Pro

-
+
L
-
+
R
@@ -103,11 +103,11 @@

🎧 DJ Toolkit Pro

-
+
L
-
+
R
@@ -163,11 +163,11 @@

🎧 DJ Toolkit Pro

-
+
L
-
+
R
From 42516614f70eb1b1b8d39588b50fda4965e6ea28 Mon Sep 17 00:00:00 2001 From: Brain Date: Sun, 21 Sep 2025 09:19:13 -0400 Subject: [PATCH 4/8] Update main.js --- js/main.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/js/main.js b/js/main.js index 3545426..1534e2c 100644 --- a/js/main.js +++ b/js/main.js @@ -583,18 +583,17 @@ class Deck { } }); - function updateBar(barElement, level) { - if (!barElement) return; - + function updateBar(bar, level) { + if (!bar) return; const heightPercent = Math.min(level * 100, 100); - barElement.style.setProperty('--vu-level', `${heightPercent}%`); + bar.style.height = `${heightPercent}%`; - if (level > 0.9) { // Red threshold (changed from 0.8 to 0.9 for better visual) - barElement.dataset.level = 'red'; - } else if (level > 0.4) { // Yellow threshold (changed from 0.3 to 0.4) - barElement.dataset.level = 'yellow'; + if (level > 0.9) { + bar.className = 'vu-bar red'; + } else if (level > 0.4) { + bar.className = 'vu-bar yellow'; } else { - barElement.dataset.level = 'green'; + bar.className = 'vu-bar'; } } From 62402d3f35fcb6a16c53736c9fe1f510dc1004a4 Mon Sep 17 00:00:00 2001 From: Brain Date: Sun, 21 Sep 2025 09:19:34 -0400 Subject: [PATCH 5/8] Update style.css --- css/style.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index d4a5ff8..30276e6 100644 --- a/css/style.css +++ b/css/style.css @@ -336,22 +336,21 @@ border: 1px solid rgba(0,0,0,0.5); } - .vu-bar-stereo::after { - content: ''; + .vu-bar { position: absolute; bottom: 0; left: 0; width: 100%; - height: var(--vu-level, 0%); + height: 0%; background-color: green; transition: height 0.05s ease-out, background-color 0.05s; } - .vu-bar-stereo[data-level="yellow"]::after { + .vu-bar.yellow { background-color: yellow; } - .vu-bar-stereo[data-level="red"]::after { + .vu-bar.red { background-color: red; } From b992c8bb12103099175778ed19d43be814426679 Mon Sep 17 00:00:00 2001 From: Brain Date: Sun, 21 Sep 2025 09:26:51 -0400 Subject: [PATCH 6/8] Update index.html --- index.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 721a12f..b59b71a 100644 --- a/index.html +++ b/index.html @@ -119,13 +119,15 @@

🎧 DJ Toolkit Pro

-
-
+
+ + +
From 46d71ba34d9a2c87027e1f3d8ad03a59ef878ab1 Mon Sep 17 00:00:00 2001 From: Brain Date: Sun, 21 Sep 2025 09:35:37 -0400 Subject: [PATCH 7/8] Update index.html --- index.html | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index b59b71a..721a12f 100644 --- a/index.html +++ b/index.html @@ -119,15 +119,13 @@

🎧 DJ Toolkit Pro

+
+
-
- - -
From ac71f4b3749fd13ec281529b1196bd95466c937b Mon Sep 17 00:00:00 2001 From: Brain Date: Sun, 21 Sep 2025 09:39:16 -0400 Subject: [PATCH 8/8] Update style.css --- css/style.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/css/style.css b/css/style.css index 30276e6..3feb778 100644 --- a/css/style.css +++ b/css/style.css @@ -277,6 +277,9 @@ transform: rotate(270deg); width: 100px; } + .slider-container.vertical > label { + margin-top: 15px; + } .mixer { background: var(--deck-bg);