dsrptlab/pickle_vision
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fixed 80px bottom bar, compact cards same height as cam thumbs

Browse Source 
- Bottom bar fixed height, all items aligned
- Cam card and VAR card compact vertical, fit within bar
- Trajectory same layout as court
- VAR snapshot removed from bottom bar (too large)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ruslan Bakiev
2026-03-07 12:49:51 +07:00
parent 08e280d617
commit 59203a7838
1 changed files with 41 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/web/templates/index.html
View File

@@ -107,19 +107,22 @@
} }
.bottom-bar { .bottom-bar {
display: flex; display: flex;
align-items: center; align-items: stretch;
justify-content: center; justify-content: center;
gap: 8px; gap: 6px;
padding: 6px 8px; padding: 4px 8px;
background: #0d0d20; background: #0d0d20;
border-top: 1px solid #222; border-top: 1px solid #222;
height: 80px;
flex-shrink: 0;
} }
.cam-thumb { .cam-thumb {
width: 200px; height: 100%;
flex-shrink: 0; flex-shrink: 0;
} }
.cam-thumb img { .cam-thumb img {
width: 100%; height: 100%;
width: auto;
border-radius: 4px; border-radius: 4px;
border: 1px solid #222; border: 1px solid #222;
display: block; display: block;
@@ -128,33 +131,35 @@
/* Sidebar panel (unused, kept for compat) */ /* Sidebar panel (unused, kept for compat) */
.sidebar-panel { display: none; } .sidebar-panel { display: none; }
.btn-calibrate { .btn-calibrate {
width: 100%; padding: 3px 8px;
padding: 8px 12px;
background: #4ecca3; background: #4ecca3;
color: #000; color: #000;
border: none; border: none;
border-radius: 6px; border-radius: 4px;
font-size: 13px; font-size: 9px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.2s;
} }
.btn-calibrate:hover { background: #3dbb92; } .btn-calibrate:hover { background: #3dbb92; }
.btn-calibrate:disabled { background: #333; color: #666; cursor: not-allowed; } .btn-calibrate:disabled { background: #333; color: #666; cursor: not-allowed; }
.calibrate-status { .calibrate-status {
font-size: 11px; font-size: 8px;
color: #666; color: #666;
line-height: 1.6;
} }
.calibrate-status .ok { color: #4ecca3; } .calibrate-status .ok { color: #4ecca3; }
.calibrate-status .fail { color: #ff4444; } .calibrate-status .fail { color: #ff4444; }
/* VAR panel (bottom bar version) */ /* VAR panel card */
.var-panel-bottom { .var-panel-bottom {
display: flex; display: flex;
align-items: center; flex-direction: column;
gap: 10px; justify-content: center;
padding: 4px 12px; gap: 2px;
padding: 4px 8px;
background: #111128;
border: 1px solid #2a2a4a;
border-radius: 4px;
font-size: 9px;
} }
.var-indicator { .var-indicator {
display: flex; display: flex;
@@ -208,31 +213,31 @@
height: 60px; height: 60px;
} }
/* Camera params card (vertical) */ /* Camera params card */
.cam-card { .cam-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px; justify-content: center;
padding: 6px 10px; gap: 1px;
padding: 4px 8px;
background: #111128; background: #111128;
border: 1px solid #2a2a4a; border: 1px solid #2a2a4a;
border-radius: 6px; border-radius: 4px;
font-size: 11px; font-size: 9px;
color: #888; color: #888;
min-width: 120px;
} }
.cc-title { .cc-title {
font-size: 10px; font-size: 8px;
font-weight: 700; font-weight: 700;
color: #666; color: #555;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
margin-bottom: 2px;
} }
.cc-item { .cc-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 8px; gap: 6px;
line-height: 1.2;
} }
.cc-item b { .cc-item b {
color: #4ecca3; color: #4ecca3;
@@ -240,7 +245,7 @@
} }
.cc-divider { .cc-divider {
border-top: 1px solid #2a2a4a; border-top: 1px solid #2a2a4a;
margin: 3px 0; margin: 1px 0;
} }
/* Event banner */ /* Event banner */
@@ -346,13 +351,9 @@
<div class="var-dot" id="varDot"></div> <div class="var-dot" id="varDot"></div>
<div class="var-label" id="varLabel">VAR</div> <div class="var-label" id="varLabel">VAR</div>
</div> </div>
<div class="var-info" id="varInfo"> <div class="var-line" id="varLine" style="color:#ccc;font-size:9px">No events</div>
<div class="var-line" id="varLine">No events</div> <div class="var-timer" id="varTimer" style="color:#ff6666;font-size:10px;font-weight:700"></div>
<div class="var-timer" id="varTimer"></div> <div class="var-dist" id="varDist" style="color:#888;font-size:9px"></div>
<div class="var-dist" id="varDist"></div>
</div>
<img class="var-snapshot" id="varSnapshot" style="display:none">
<div class="var-snapshot empty" id="varSnapshotEmpty">No snapshot</div>
</div> </div>
</div> </div>
</div> </div>
@@ -923,9 +924,12 @@ setInterval(function() {
// Show snapshot // Show snapshot
if (data.snapshot_b64) { if (data.snapshot_b64) {
var img = document.getElementById('varSnapshot'); var img = document.getElementById('varSnapshot');
img.src = 'data:image/jpeg;base64,' + data.snapshot_b64; if (img) {
img.style.display = 'block'; img.src = 'data:image/jpeg;base64,' + data.snapshot_b64;
document.getElementById('varSnapshotEmpty').style.display = 'none'; img.style.display = 'block';
}
var empty = document.getElementById('varSnapshotEmpty');
if (empty) empty.style.display = 'none';
} }
}) })
.catch(function() {}); .catch(function() {});