diff --git a/src/web/templates/index.html b/src/web/templates/index.html
index 5b6b309..885ebcb 100644
--- a/src/web/templates/index.html
+++ b/src/web/templates/index.html
@@ -213,32 +213,21 @@
             height: 60px;
         }
 
-        /* Camera params panel */
-        .cam-params {
+        /* Camera params card */
+        .cam-card {
             display: flex;
-            gap: 8px;
+            gap: 10px;
             align-items: center;
-            padding: 4px 8px;
-        }
-        .param-row {
-            display: flex;
-            flex-direction: column;
-            gap: 2px;
-        }
-        .param-row label {
-            font-size: 10px;
+            padding: 4px 10px;
+            background: #111128;
+            border: 1px solid #2a2a4a;
+            border-radius: 6px;
+            font-size: 11px;
             color: #888;
-            white-space: nowrap;
         }
-        .param-row input {
-            width: 60px;
-            padding: 3px 5px;
-            background: #1a1a2e;
-            border: 1px solid #333;
-            border-radius: 4px;
+        .cc-item b {
             color: #4ecca3;
-            font-size: 12px;
-            text-align: center;
+            font-weight: 600;
         }
 
         /* Event banner */
@@ -314,27 +303,12 @@
         <div class="bottom-bar">
             <div class="cam-thumb"><img id="court-cam1" alt="Camera 1"></div>
             <div class="cam-thumb"><img id="court-cam0" alt="Camera 0"></div>
-            <div class="cam-params">
-                <div class="param-row">
-                    <label>Pos Y (м от корта)</label>
-                    <input type="number" id="paramPosY" value="1" step="0.1" min="0.1" max="5" onchange="updateCamParams()">
-                </div>
-                <div class="param-row">
-                    <label>Pos Z (высота м)</label>
-                    <input type="number" id="paramPosZ" value="1" step="0.1" min="0.1" max="5" onchange="updateCamParams()">
-                </div>
-                <div class="param-row">
-                    <label>Stereo (см)</label>
-                    <input type="number" id="paramStereo" value="6" step="1" min="1" max="30" onchange="updateCamParams()">
-                </div>
-                <div class="param-row">
-                    <label>Разворот (°)</label>
-                    <input type="number" id="paramAngle" value="15" step="1" min="0" max="45" onchange="updateCamParams()">
-                </div>
-                <div class="param-row">
-                    <label>HFOV (°)</label>
-                    <input type="number" id="paramHfov" value="128" step="1" min="30" max="180" onchange="updateCamParams()">
-                </div>
+            <div class="cam-card">
+                <span class="cc-item">Dist <b id="paramPosY">1.0</b>m</span>
+                <span class="cc-item">H <b id="paramPosZ">1.0</b>m</span>
+                <span class="cc-item">Stereo <b id="paramStereo">6</b>cm</span>
+                <span class="cc-item">Rot <b id="paramAngle">15</b>°</span>
+                <span class="cc-item">HFOV <b id="paramHfov">128</b>°</span>
             </div>
             <div class="sidebar-panel">
                 <button class="btn-calibrate" id="btnCalibrate" onclick="doCalibrate()">Calibrate</button>
@@ -954,16 +928,20 @@ setInterval(function() {
 // ===================== Camera params live update =====================
 function getCamParams() {
     return {
-        posY: parseFloat(document.getElementById('paramPosY').value) || 1,
-        posZ: parseFloat(document.getElementById('paramPosZ').value) || 1,
-        stereo: parseFloat(document.getElementById('paramStereo').value) || 6,
-        angle: parseFloat(document.getElementById('paramAngle').value) || 15,
-        hfov: parseFloat(document.getElementById('paramHfov').value) || 128
+        posY: parseFloat(document.getElementById('paramPosY').textContent) || 1,
+        posZ: parseFloat(document.getElementById('paramPosZ').textContent) || 1,
+        stereo: parseFloat(document.getElementById('paramStereo').textContent) || 6,
+        angle: parseFloat(document.getElementById('paramAngle').textContent) || 15,
+        hfov: parseFloat(document.getElementById('paramHfov').textContent) || 128
     };
 }
 
-function updateCamParams() {
-    var p = getCamParams();
+function setCamParams(p) {
+    document.getElementById('paramPosY').textContent = p.posY;
+    document.getElementById('paramPosZ').textContent = p.posZ;
+    document.getElementById('paramStereo').textContent = p.stereo;
+    document.getElementById('paramAngle').textContent = p.angle;
+    document.getElementById('paramHfov').textContent = p.hfov;
     if (courtSceneInitialized) addStereocameras(courtScene, p);
     if (trajSceneInitialized) addStereocameras(trajScene, p);
 }