Merge pull request #11 from BrainAV/temp

Temp

Author: jasonbra1n

css/style.css

@@ -277,7 +277,6 @@
             transform: rotate(270deg);
             width: 100px;
         }
-
         .slider-container.vertical > label {
             margin-top: 15px;
         }
@@ -334,21 +333,28 @@
             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);
         }
 
-        .vu-bar-stereo::after {
-            content: '';
+        .vu-bar {
             position: absolute;
             bottom: 0;
             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;
+            height: 0%;
+            background-color: green;
+            transition: height 0.05s ease-out, background-color 0.05s;
+        }
+
+        .vu-bar.yellow {
+            background-color: yellow;
+        }
+
+        .vu-bar.red {
+            background-color: red;
         }
 
         .vu-label {

index.html

@@ -47,11 +47,11 @@ <h1>🎧 DJ Toolkit Pro</h1>
                     </div>
                     <div class="vu-meter-stereo" id="vuMeterA">
                         <div class="vu-channel">
-                            <div class="vu-bar-stereo" id="vuBarAL"></div>
+                            <div class="vu-bar-stereo"><div id="vuBarAL" class="vu-bar"></div></div>
                             <div class="vu-label">L</div>
                         </div>
                         <div class="vu-channel">
-                            <div class="vu-bar-stereo" id="vuBarAR"></div>
+                            <div class="vu-bar-stereo"><div id="vuBarAR" class="vu-bar"></div></div>
                             <div class="vu-label">R</div>
                         </div>
                     </div>
@@ -103,11 +103,11 @@ <h1>🎧 DJ Toolkit Pro</h1>
 
                 <div class="vu-meter-stereo" id="vuMeterMaster">
                     <div class="vu-channel">
-                        <div class="vu-bar-stereo" id="vuBarMasterL"></div>
+                        <div class="vu-bar-stereo"><div id="vuBarMasterL" class="vu-bar"></div></div>
                         <div class="vu-label">L</div>
                     </div>
                     <div class="vu-channel">
-                        <div class="vu-bar-stereo" id="vuBarMasterR"></div>
+                        <div class="vu-bar-stereo"><div id="vuBarMasterR" class="vu-bar"></div></div>
                         <div class="vu-label">R</div>
                     </div>
                 </div>
@@ -163,11 +163,11 @@ <h1>🎧 DJ Toolkit Pro</h1>
                     </div>
                     <div class="vu-meter-stereo" id="vuMeterB">
                         <div class="vu-channel">
-                            <div class="vu-bar-stereo" id="vuBarBL"></div>
+                            <div class="vu-bar-stereo"><div id="vuBarBL" class="vu-bar"></div></div>
                             <div class="vu-label">L</div>
                         </div>
                         <div class="vu-channel">
-                            <div class="vu-bar-stereo" id="vuBarBR"></div>
+                            <div class="vu-bar-stereo"><div id="vuBarBR" class="vu-bar"></div></div>
                             <div class="vu-label">R</div>
                         </div>
                     </div>

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,20 @@ class Deck {
             }
         });
 
+        function updateBar(bar, level) {
+            if (!bar) return;
+            const heightPercent = Math.min(level * 100, 100);
+            bar.style.height = `${heightPercent}%`;
+
+            if (level > 0.9) {
+                bar.className = 'vu-bar red';
+            } else if (level > 0.4) {
+                bar.className = 'vu-bar yellow';
+            } else {
+                bar.className = 'vu-bar';
+            }
+        }
+
         function setupSpectrum() {
             spectrumAnalyser = audioContext.createAnalyser();
             spectrumAnalyser.fftSize = 256;
@@ -648,12 +658,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() {