From 023e283d3f1422b748b0df67874bb538d0c2fd4b Mon Sep 17 00:00:00 2001
From: sirmrak <sirmrak@gmail.com>
Date: Thu, 21 May 2026 15:52:04 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20Web=20Client=20=E2=80=94=20RMS=20meter?=
 =?UTF-8?q?=20=D0=B2=D0=B8=D0=B7=D1=83=D0=B0=D0=BB=D0=B8=D0=B7=D0=B0=D1=86?=
 =?UTF-8?q?=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Добавлено:
- RMS bar с градиентом (зелёный → жёлтый → красный)
- Цифровое значение RMS (0.00 - 1.00)
- CSS стили для .rms-bar и .rms-fill
- Размещение под audio canvas

Визуализация:
[████████░░] 0.42
---
 web-client/client.html | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/web-client/client.html b/web-client/client.html
index 86cb553..66c4875 100644
--- a/web-client/client.html
+++ b/web-client/client.html
@@ -234,6 +234,22 @@
       accent-color: #0ff;
     }
 
+    /* RMS Meter */
+    .rms-bar {
+      height: 20px;
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 4px;
+      overflow: hidden;
+      position: relative;
+    }
+
+    .rms-fill {
+      height: 100%;
+      background: linear-gradient(90deg, #00ff88 0%, #ffc107 70%, #ff4757 100%);
+      transition: width 0.1s ease;
+      border-radius: 4px;
+    }
+
     @media (max-width: 1000px) {
       .dashboard { grid-template-columns: 1fr; gap: 1.5rem; }
       .glass-panel { padding: 1.5rem; }
@@ -287,6 +303,18 @@
       <div class="viz-wrapper">
         <canvas id="audioCanvas" width="400" height="60" style="width:100%; height: 70px"></canvas>
       </div>
+      
+      <!-- RMS Level Meter -->
+      <div style="margin-top: 15px;">
+        <div class="flex-between" style="margin-bottom: 5px;">
+          <span style="color: #aaa; font-size: 12px;">📊 RMS LEVEL</span>
+          <span id="rmsValue" style="color:#0ff; font-family: monospace; font-size: 14px;">0.00</span>
+        </div>
+        <div class="rms-bar">
+          <div class="rms-fill" id="rmsFill" style="width: 0%;"></div>
+        </div>
+      </div>
+      
       <div class="flex-between" style="width:100%; margin-top: 8px;">
         <span>🔊 VOLUME</span>
         <span id="volumeValue" style="color:#0ff">0.80</span>