fix: swap cam0/cam1 order and horizontal camera layout on all tabs

Cameras now display as a horizontal panorama (cam1 left, cam0 right)
on Detection, Court, and Trajectory tabs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/web/templates/index.html

@@ -94,50 +94,34 @@
         }
         .viewport-3d canvas { width: 100% !important; height: 100% !important; }
 
-        /* Split layout: 3D left ~80%, sidebar right ~20% with cam previews */
+        /* Bottom layout: 3D + sidebar panel */
-        .split-layout {
+        .court-bottom, .traj-bottom {
             display: flex;
-            height: calc(100vh - 100px);
+            height: calc(100vh - 100px - 30vw);
             overflow: hidden;
         }
-        .split-main {
+        .court-main, .traj-main {
             flex: 1;
             position: relative;
             min-width: 0;
         }
-        .split-main .viewport-3d {
+        .court-main .viewport-3d,
+        .traj-main .viewport-3d {
             width: 100%;
             height: 100%;
             border-top: none;
         }
-        .split-sidebar {
-            width: 220px;
-            flex-shrink: 0;
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-            padding: 6px;
-            background: #0d0d20;
-            border-left: 1px solid #222;
-            overflow-y: auto;
-        }
-        .split-sidebar img {
-            width: 100%;
-            border-radius: 4px;
-            border: 1px solid #222;
-            display: block;
-        }
 
         /* Sidebar panel (calibration, etc.) */
         .sidebar-panel {
+            width: 220px;
+            flex-shrink: 0;
             display: flex;
             flex-direction: column;
             gap: 8px;
             padding: 10px;
             background: #111128;
-            border-radius: 6px;
+            border-left: 1px solid #222;
-            border: 1px solid #222;
-            margin-top: 4px;
         }
         .btn-calibrate {
             width: 100%;
@@ -163,14 +147,14 @@
 
         /* VAR panel (sidebar version) */
         .var-panel-sidebar {
+            width: 220px;
+            flex-shrink: 0;
             display: flex;
             flex-direction: column;
             gap: 8px;
             padding: 10px;
             background: #111128;
-            border-radius: 6px;
+            border-left: 1px solid #222;
-            border: 1px solid #222;
-            margin-top: 4px;
         }
         .var-indicator {
             display: flex;
@@ -282,23 +266,28 @@
 <div class="tab-content active" id="tab-detection">
     <div class="cameras">
         <div class="cam-box">
-            <img id="det-cam0" alt="Camera 0">
+            <img id="det-cam1" alt="Camera 1">
         </div>
         <div class="cam-box">
-            <img id="det-cam1" alt="Camera 1">
+            <img id="det-cam0" alt="Camera 0">
         </div>
     </div>
 </div>
 
-<!-- Tab 2: Court — 3D left, sidebar right with cams + calibration -->
+<!-- Tab 2: Court — cameras on top, 3D below -->
 <div class="tab-content" id="tab-court">
-    <div class="split-layout">
+    <div class="cameras">
-        <div class="split-main">
+        <div class="cam-box">
+            <img id="court-cam1" alt="Camera 1">
+        </div>
+        <div class="cam-box">
+            <img id="court-cam0" alt="Camera 0">
+        </div>
+    </div>
+    <div class="court-bottom">
+        <div class="court-main">
             <div class="viewport-3d" id="court-3d"></div>
         </div>
-        <div class="split-sidebar">
-            <img id="court-cam0" alt="Camera 0">
-            <img id="court-cam1" alt="Camera 1">
         <div class="sidebar-panel">
             <button class="btn-calibrate" id="btnCalibrate" onclick="doCalibrate()">Calibrate Court</button>
             <div class="calibrate-status" id="calStatus">
@@ -307,18 +296,21 @@
         </div>
     </div>
 </div>
-</div>
 
-<!-- Tab 3: Trajectory — 3D left, cam previews + VAR panel right -->
+<!-- Tab 3: Trajectory — cameras on top, 3D below -->
 <div class="tab-content" id="tab-trajectory">
-    <div class="split-layout">
+    <div class="cameras">
-        <div class="split-main">
+        <div class="cam-box">
+            <img id="traj-cam1" alt="Camera 1">
+        </div>
+        <div class="cam-box">
+            <img id="traj-cam0" alt="Camera 0">
+        </div>
+    </div>
+    <div class="traj-bottom">
+        <div class="traj-main">
             <div class="viewport-3d" id="trajectory-3d"></div>
         </div>
-        <div class="split-sidebar">
-            <img id="traj-cam0" alt="Camera 0">
-            <img id="traj-cam1" alt="Camera 1">
-            <!-- VAR panel in sidebar -->
         <div class="var-panel-sidebar">
             <div class="var-indicator">
                 <div class="var-dot" id="varDot"></div>
@@ -334,7 +326,6 @@
         </div>
     </div>
 </div>
-</div>
 
 <div class="info-panel" id="infoPanel" style="display:none">
     <div class="info-item"><span class="label">Speed:</span><span class="value" id="ball-speed">--</span></div>