Webcam: Zaehler-Box im "LIVE COUNT"-Design (farbige Icons + Total)
Reines Restyling der bestehenden verschiebbaren HTML-Box: dunkles Panel, LIVE-COUNT-Header, farbige Fahrzeug-Icons (SVG) + farbige Zahlen, TOTAL- Zeile. Gleiche /api/counts-Daten, gleiche IDs, gleiches Drag/Polling. Keine Aenderung an der Video-Pipeline -> kein Performance-Einfluss. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -69,22 +69,40 @@
|
|||||||
.offline-overlay .sub { font-size: 14px; opacity: 0.8; }
|
.offline-overlay .sub { font-size: 14px; opacity: 0.8; }
|
||||||
.counter-box {
|
.counter-box {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 14px;
|
||||||
left: 10px;
|
left: 14px;
|
||||||
background: rgba(0, 0, 0, 0.78);
|
background: rgba(18, 20, 26, 0.82);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 14px 16px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 8px 14px 10px;
|
font-family: system-ui, -apple-system, sans-serif;
|
||||||
border-radius: 6px;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.5;
|
|
||||||
cursor: move;
|
cursor: move;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
min-width: 150px;
|
min-width: 215px;
|
||||||
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
|
||||||
|
backdrop-filter: blur(2px);
|
||||||
}
|
}
|
||||||
.counter-box .cb-total { font-size: 18px; font-weight: bold; margin-bottom: 2px; }
|
.cb-header {
|
||||||
.counter-box .cb-grip { opacity: 0.5; font-size: 11px; margin-top: 4px; }
|
display: flex; align-items: center; gap: 8px;
|
||||||
|
font-size: 12px; letter-spacing: 1.5px; color: #cfd3dc;
|
||||||
|
padding-bottom: 10px; margin-bottom: 4px;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
.cb-dot { width: 9px; height: 9px; border-radius: 50%; background: #3b82f6; box-shadow: 0 0 6px #3b82f6; }
|
||||||
|
.cb-row { display: flex; align-items: center; gap: 12px; padding: 6px 2px; }
|
||||||
|
.cb-icon { width: 24px; height: 24px; flex: 0 0 24px; color: var(--accent, #fff); }
|
||||||
|
.cb-label { flex: 1; font-size: 14px; letter-spacing: 0.5px; color: #e7e9ee; }
|
||||||
|
.cb-val { font-size: 18px; font-weight: 700; color: var(--accent, #fff); font-variant-numeric: tabular-nums; }
|
||||||
|
.cb-car { --accent: #22c55e; }
|
||||||
|
.cb-truck { --accent: #3b82f6; }
|
||||||
|
.cb-bus { --accent: #a855f7; }
|
||||||
|
.cb-moto { --accent: #ef4444; }
|
||||||
|
.cb-divider { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 6px 0; }
|
||||||
|
.cb-total-row { padding-top: 4px; }
|
||||||
|
.cb-total-label { flex: 1; font-size: 13px; letter-spacing: 1.5px; color: #9aa0a6; }
|
||||||
|
.cb-total-val { font-size: 24px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
|
||||||
.video-container {
|
.video-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 1020px;
|
width: 1020px;
|
||||||
@@ -162,12 +180,27 @@
|
|||||||
<img id="videoFeed" src="{{ url_for('webcam_feed') }}" />
|
<img id="videoFeed" src="{{ url_for('webcam_feed') }}" />
|
||||||
<canvas id="lineCanvas"></canvas>
|
<canvas id="lineCanvas"></canvas>
|
||||||
<div id="counterBox" class="counter-box" title="Zum Verschieben ziehen">
|
<div id="counterBox" class="counter-box" title="Zum Verschieben ziehen">
|
||||||
<div class="cb-total">Gesamt: <span id="cTotal">0</span></div>
|
<div class="cb-header"><span class="cb-dot"></span>LIVE COUNT</div>
|
||||||
<div>Autos: <span id="cCar">0</span></div>
|
<div class="cb-row cb-car">
|
||||||
<div>LKW: <span id="cTruck">0</span></div>
|
<svg class="cb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"/><circle cx="7" cy="17" r="2"/><path d="M9 17h6"/><circle cx="17" cy="17" r="2"/></svg>
|
||||||
<div>Busse: <span id="cBus">0</span></div>
|
<span class="cb-label">CARS</span><span class="cb-val" id="cCar">0</span>
|
||||||
<div>Motorräder: <span id="cMoto">0</span></div>
|
</div>
|
||||||
<div class="cb-grip">⠿ ziehen</div>
|
<div class="cb-row cb-truck">
|
||||||
|
<svg class="cb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/></svg>
|
||||||
|
<span class="cb-label">TRUCKS</span><span class="cb-val" id="cTruck">0</span>
|
||||||
|
</div>
|
||||||
|
<div class="cb-row cb-bus">
|
||||||
|
<svg class="cb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6v6"/><path d="M15 6v6"/><path d="M2 12h19.6"/><path d="M18 18h3s.5-1.7.8-2.8c.1-.4.2-.8.2-1.2 0-.4-.1-.8-.2-1.2l-1.4-5C20.1 6.8 19.1 6 18 6H4a2 2 0 0 0-2 2v10h3"/><circle cx="7" cy="18" r="2"/><path d="M9 18h5"/><circle cx="16" cy="18" r="2"/></svg>
|
||||||
|
<span class="cb-label">BUSES</span><span class="cb-val" id="cBus">0</span>
|
||||||
|
</div>
|
||||||
|
<div class="cb-row cb-moto">
|
||||||
|
<svg class="cb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18.5" cy="17.5" r="3.5"/><circle cx="5.5" cy="17.5" r="3.5"/><circle cx="15" cy="5" r="1"/><path d="M12 17.5V14l-3-3 4-3 2 3h2"/></svg>
|
||||||
|
<span class="cb-label">MOTORCYCLES</span><span class="cb-val" id="cMoto">0</span>
|
||||||
|
</div>
|
||||||
|
<div class="cb-divider"></div>
|
||||||
|
<div class="cb-row cb-total-row">
|
||||||
|
<span class="cb-total-label">TOTAL</span><span class="cb-total-val" id="cTotal">0</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="offlineOverlay" class="offline-overlay">
|
<div id="offlineOverlay" class="offline-overlay">
|
||||||
<div class="icon" id="ovIcon">📷</div>
|
<div class="icon" id="ovIcon">📷</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user