Court tab: 3D scene primary, cameras small at bottom
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -94,6 +94,24 @@
|
||||
}
|
||||
.viewport-3d canvas { width: 100% !important; height: 100% !important; }
|
||||
|
||||
/* Court tab: 3D scene takes most space, cameras are small below */
|
||||
.court-viewport-main {
|
||||
height: calc(100vh - 240px);
|
||||
min-height: 400px;
|
||||
border-top: none;
|
||||
}
|
||||
.cameras-small {
|
||||
padding: 4px 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
.cam-box-small {
|
||||
max-width: 320px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.cam-box-small img {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Calibrate button */
|
||||
.calibrate-bar {
|
||||
display: flex;
|
||||
@@ -254,7 +272,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 2: Court -->
|
||||
<!-- Tab 2: Court — 3D scene is primary, cameras are secondary -->
|
||||
<div class="tab-content" id="tab-court">
|
||||
<div class="calibrate-bar">
|
||||
<button class="btn-calibrate" id="btnCalibrate" onclick="doCalibrate()">Calibrate Court</button>
|
||||
@@ -263,17 +281,17 @@
|
||||
CAM 1: <span id="calStatus1">not calibrated</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cameras">
|
||||
<div class="cam-box">
|
||||
<div class="cam-label">CAM 0 - Court Lines</div>
|
||||
<div class="viewport-3d court-viewport-main" id="court-3d"></div>
|
||||
<div class="cameras cameras-small">
|
||||
<div class="cam-box cam-box-small">
|
||||
<div class="cam-label">CAM 0</div>
|
||||
<img id="court-cam0" alt="Camera 0">
|
||||
</div>
|
||||
<div class="cam-box">
|
||||
<div class="cam-label">CAM 1 - Court Lines</div>
|
||||
<div class="cam-box cam-box-small">
|
||||
<div class="cam-label">CAM 1</div>
|
||||
<img id="court-cam1" alt="Camera 1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="viewport-3d" id="court-3d"></div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 3: Trajectory -->
|
||||
|
||||
Reference in New Issue
Block a user