Дораблены прогресс бары

web/css/style.css

@@ -149,3 +149,50 @@ h1 {
         max-height: 55vh;
     }
 }
+
+/* ===== PROGRESS BARS ===== */
+
+.progress-row {
+    margin-bottom: 16px;
+}
+
+.progress-label {
+    font-size: 16px;
+    margin-bottom: 6px;
+    color: #ffffff;
+    opacity: 0.9;
+}
+
+.progress {
+    width: 100%;
+    height: 34px;
+    padding: 6px;
+    border: 3px solid #8a8a8a;
+    background: #222;
+    box-shadow:
+        inset 0 0 6px rgba(255,255,255,0.15),
+        0 0 4px rgba(0,0,0,0.8);
+}
+
+.fill {
+    height: 100%;
+    width: 0%;
+    background: #e6852d;
+    box-shadow:
+        inset 0 0 4px rgba(255,255,255,0.2),
+        0 0 6px rgba(230,133,45,0.5);
+    transition: width 0.25s linear;
+}
+
+/* mobile */
+
+@media (max-width: 500px) {
+    .progress {
+        height: 30px;
+        padding: 5px;
+    }
+
+    .progress-label {
+        font-size: 15px;
+    }
+}

web/dashboard.html

@@ -25,6 +25,33 @@
         <div id="bits"></div>
     </div>
 
+
+ 	<div class="card wide">
+	    <h3>CHANNEL LEVELS</h3>
+
+	    <div class="progress-row">
+	        <div class="progress-label">Канал 1</div>
+	        <div class="progress">
+	            <div class="fill" id="bar1"></div>
+	        </div>
+	    </div>
+
+	    <div class="progress-row">
+	        <div class="progress-label">Звук</div>
+	        <div class="progress">
+	            <div class="fill" id="bar2"></div>
+	        </div>
+	    </div>
+
+	    <div class="progress-row">
+	        <div class="progress-label">Высота</div>
+	        <div class="progress">
+	            <div class="fill" id="bar3"></div>
+	        </div>
+		</div>
+    </div>
+
+
     <div class="card wide">
         <h3>LIVE STREAM (last 32)</h3>
         <div id="history"></div>

web/js/app.js

@@ -14,6 +14,11 @@ function renderBits(byte) {
     }
 }
 
+function setBar(id, value) {
+    value = Math.max(0, Math.min(100, value));
+    document.getElementById(id).style.width = value + "%";
+}
+
 async function update() {
     try {
         const r1 = await fetch("/api/health");
@@ -39,6 +44,10 @@ async function update() {
 
         renderBits(latest);
 
+        setBar("bar1", (latest & 15) * 6.6);
+	setBar("bar2", ((latest * 3) % 16) * 6.6);
+	setBar("bar3", ((latest * 5) % 16) * 6.6);
+
         const arr = Array.isArray(hist.bytes) ? hist.bytes : [];
 
         document.getElementById("history").innerHTML =