From dc79763dab5b9baee976630f7dfb900bff290e28 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Sat, 7 Mar 2026 11:15:24 +0700
Subject: [PATCH] fix: cameras side by side, panels next to them, zoom out 3D
 view

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

diff --git a/src/web/templates/index.html b/src/web/templates/index.html
index c03473a..e15c7a2 100644
--- a/src/web/templates/index.html
+++ b/src/web/templates/index.html
@@ -285,13 +285,13 @@
         <div class="viewport-3d" id="court-3d"></div>
         <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="sidebar-panel">
                 <button class="btn-calibrate" id="btnCalibrate" onclick="doCalibrate()">Calibrate Court</button>
                 <div class="calibrate-status" id="calStatus">
                     <span id="calStatusText">Not calibrated</span>
                 </div>
             </div>
-            <div class="cam-thumb"><img id="court-cam0" alt="Camera 0"></div>
         </div>
     </div>
 </div>
@@ -302,6 +302,7 @@
         <div class="viewport-3d" id="trajectory-3d"></div>
         <div class="bottom-bar">
             <div class="cam-thumb"><img id="traj-cam1" alt="Camera 1"></div>
+            <div class="cam-thumb"><img id="traj-cam0" alt="Camera 0"></div>
             <div class="var-panel-bottom">
                 <div class="var-indicator">
                     <div class="var-dot" id="varDot"></div>
@@ -315,7 +316,6 @@
                 <img class="var-snapshot" id="varSnapshot" style="display:none">
                 <div class="var-snapshot empty" id="varSnapshotEmpty">No snapshot</div>
             </div>
-            <div class="cam-thumb"><img id="traj-cam0" alt="Camera 0"></div>
         </div>
     </div>
 </div>
@@ -469,7 +469,7 @@ function initCourtScene() {
     courtScene.background = new THREE.Color(0x0a0a1a);
 
     courtCamera = new THREE.PerspectiveCamera(50, w / h, 0.1, 100);
-    courtCamera.position.set(7.7, 3.05, 1);
+    courtCamera.position.set(6.7, -6, 10);
     courtCamera.lookAt(6.7, 3.05, 0);
 
     courtRenderer = new THREE.WebGLRenderer({ antialias: true });
@@ -542,7 +542,7 @@ function initTrajectoryScene() {
     trajScene.background = new THREE.Color(0x0a0a1a);
 
     trajCamera = new THREE.PerspectiveCamera(50, w / h, 0.1, 100);
-    trajCamera.position.set(7.7, 3.05, 1);
+    trajCamera.position.set(6.7, -6, 10);
     trajCamera.lookAt(6.7, 3.05, 0);
 
     trajRenderer = new THREE.WebGLRenderer({ antialias: true });