From 22c24c0296d44a02a40a45373da8300895482e83 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Sat, 7 Mar 2026 12:43:38 +0700
Subject: [PATCH] fix: vertical cam params card, URL-based tabs, all english

- Cam card vertical with Base Setup title and sensor info
- Calibrate button inside the card
- Tabs linked to URL hash (#detection, #court, #trajectory)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/web/templates/index.html | 82 +++++++++++++++++++++++-------------
 1 file changed, 52 insertions(+), 30 deletions(-)

diff --git a/src/web/templates/index.html b/src/web/templates/index.html
index 885ebcb..5b4c175 100644
--- a/src/web/templates/index.html
+++ b/src/web/templates/index.html
@@ -125,13 +125,8 @@
             display: block;
         }
 
-        /* Sidebar panel (calibration, etc.) */
-        .sidebar-panel {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 4px 12px;
-        }
+        /* Sidebar panel (unused, kept for compat) */
+        .sidebar-panel { display: none; }
         .btn-calibrate {
             width: 100%;
             padding: 8px 12px;
@@ -213,22 +208,40 @@
             height: 60px;
         }
 
-        /* Camera params card */
+        /* Camera params card (vertical) */
         .cam-card {
             display: flex;
-            gap: 10px;
-            align-items: center;
-            padding: 4px 10px;
+            flex-direction: column;
+            gap: 2px;
+            padding: 6px 10px;
             background: #111128;
             border: 1px solid #2a2a4a;
             border-radius: 6px;
             font-size: 11px;
             color: #888;
+            min-width: 120px;
+        }
+        .cc-title {
+            font-size: 10px;
+            font-weight: 700;
+            color: #666;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 2px;
+        }
+        .cc-item {
+            display: flex;
+            justify-content: space-between;
+            gap: 8px;
         }
         .cc-item b {
             color: #4ecca3;
             font-weight: 600;
         }
+        .cc-divider {
+            border-top: 1px solid #2a2a4a;
+            margin: 3px 0;
+        }
 
         /* Event banner */
         .event-banner {
@@ -304,13 +317,14 @@
             <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-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">
+                <div class="cc-title">Base Setup</div>
+                <div class="cc-item">Distance <b id="paramPosY">1.0</b>m</div>
+                <div class="cc-item">Height <b id="paramPosZ">1.0</b>m</div>
+                <div class="cc-item">Stereo <b id="paramStereo">6</b>cm</div>
+                <div class="cc-item">Rotation <b id="paramAngle">15</b>°</div>
+                <div class="cc-item">HFOV <b id="paramHfov">128</b>°</div>
+                <div class="cc-item">Sensor <b>IMX219</b></div>
+                <div class="cc-divider"></div>
                 <button class="btn-calibrate" id="btnCalibrate" onclick="doCalibrate()">Calibrate</button>
                 <div class="calibrate-status" id="calStatus">
                     <span id="calStatusText">Not calibrated</span>
@@ -354,21 +368,29 @@
 <script>
 // ===================== Tab switching =====================
 var activeTab = 'detection';
-document.querySelectorAll('.tab').forEach(function(tab) {
-    tab.addEventListener('click', function() {
-        var target = this.dataset.tab;
-        activeTab = target;
-        document.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
-        document.querySelectorAll('.tab-content').forEach(function(c) { c.classList.remove('active'); });
-        this.classList.add('active');
-        document.getElementById('tab-' + target).classList.add('active');
 
-        document.getElementById('infoPanel').style.display = (target === 'trajectory') ? 'flex' : 'none';
-        if (target === 'court' && !courtSceneInitialized) initCourtScene();
-        if (target === 'trajectory' && !trajSceneInitialized) initTrajectoryScene();
-    });
+function switchTab(target) {
+    activeTab = target;
+    document.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
+    document.querySelectorAll('.tab-content').forEach(function(c) { c.classList.remove('active'); });
+    document.querySelector('.tab[data-tab="' + target + '"]').classList.add('active');
+    document.getElementById('tab-' + target).classList.add('active');
+    document.getElementById('infoPanel').style.display = (target === 'trajectory') ? 'flex' : 'none';
+    if (target === 'court' && !courtSceneInitialized) initCourtScene();
+    if (target === 'trajectory' && !trajSceneInitialized) initTrajectoryScene();
+    history.replaceState(null, '', '#' + target);
+}
+
+document.querySelectorAll('.tab').forEach(function(tab) {
+    tab.addEventListener('click', function() { switchTab(this.dataset.tab); });
 });
 
+// Init from URL hash
+var hash = location.hash.replace('#', '');
+if (['detection', 'court', 'trajectory'].indexOf(hash) !== -1) {
+    switchTab(hash);
+}
+
 // ===================== Calibration =====================
 function doCalibrate() {
     var btn = document.getElementById('btnCalibrate');