271 lines
6.5 KiB
HTML
271 lines
6.5 KiB
HTML
<!doctype html>
|
|
<html lang="da">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Vehicle stream demo</title>
|
|
|
|
<link rel="stylesheet" href="vendor/leaflet/leaflet.css">
|
|
<script src="vendor/leaflet/leaflet.js"></script>
|
|
|
|
<style>
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
font-family: system-ui, sans-serif;
|
|
}
|
|
|
|
body {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
background: #f3f4f6;
|
|
}
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
padding: 12px 14px;
|
|
background: rgba(255,255,255,0.96);
|
|
border-bottom: 1px solid #d1d5db;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.toolbar button {
|
|
padding: 7px 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toolbar .status {
|
|
margin-left: 6px;
|
|
white-space: pre-line;
|
|
font-size: 13px;
|
|
color: #374151;
|
|
}
|
|
|
|
.layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 320px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.map-panel {
|
|
position: relative;
|
|
min-width: 0;
|
|
border-right: 1px solid #d1d5db;
|
|
background: #e5e7eb;
|
|
}
|
|
|
|
.map-title {
|
|
position: absolute;
|
|
top: 12px;
|
|
left: 12px;
|
|
z-index: 1000;
|
|
background: rgba(255,255,255,0.94);
|
|
border: 1px solid rgba(0,0,0,0.08);
|
|
border-radius: 10px;
|
|
padding: 8px 10px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
font-size: 12px;
|
|
line-height: 1.35;
|
|
color: #111827;
|
|
}
|
|
|
|
.map-title strong {
|
|
display: block;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.map {
|
|
height: 100%;
|
|
}
|
|
|
|
.offmap-indicators {
|
|
position: absolute;
|
|
right: 14px;
|
|
bottom: 14px;
|
|
z-index: 1000;
|
|
display: grid;
|
|
gap: 8px;
|
|
max-width: 240px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.offmap-indicator {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 10px;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 9px 11px;
|
|
border-radius: 12px;
|
|
background: rgba(18, 18, 18, 0.86);
|
|
color: #fff;
|
|
border: 1px solid rgba(255,255,255,0.12);
|
|
box-shadow: 0 6px 18px rgba(0,0,0,0.22);
|
|
font: 12px/1.3 system-ui, sans-serif;
|
|
pointer-events: auto;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
transition: transform 120ms ease, box-shadow 120ms ease, outline-color 120ms ease;
|
|
}
|
|
|
|
.offmap-indicator:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 8px 22px rgba(0,0,0,0.28);
|
|
}
|
|
|
|
.offmap-indicator.active {
|
|
outline: 3px solid rgba(255,255,255,0.98);
|
|
outline-offset: 2px;
|
|
transform: translateY(-1px) scale(1.02);
|
|
}
|
|
|
|
.offmap-indicator.covers {
|
|
background: rgba(0, 72, 36, 0.9);
|
|
border-color: rgba(76, 175, 80, 0.55);
|
|
}
|
|
|
|
.offmap-arrow {
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 999px;
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
}
|
|
|
|
.sidebar {
|
|
background: rgba(255,255,255,0.97);
|
|
padding: 14px;
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 12px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.panel {
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
background: #fff;
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.panel strong {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
color: #111827;
|
|
}
|
|
|
|
.alerts {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.alert-item {
|
|
padding: 8px 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid #e0b100;
|
|
background: rgba(255,248,204,0.96);
|
|
color: #5f4b00;
|
|
font-size: 12px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.runtime-warning {
|
|
border: 1px solid #c2410c;
|
|
background: rgba(255, 237, 213, 0.96);
|
|
color: #7c2d12;
|
|
}
|
|
|
|
.runtime-warning[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.debug-panel {
|
|
border-color: #1d4ed8;
|
|
background: rgba(219, 234, 254, 0.98);
|
|
color: #1e3a8a;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: 11px;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.tile-warning {
|
|
border-color: #b91c1c;
|
|
background: rgba(254, 226, 226, 0.98);
|
|
color: #7f1d1d;
|
|
}
|
|
|
|
.car {
|
|
width: 24px;
|
|
height: 24px;
|
|
transform-origin: 12px 12px;
|
|
filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
|
|
}
|
|
|
|
.car svg {
|
|
display: block;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="toolbar">
|
|
<button id="playBtn">Play</button>
|
|
<button id="pauseBtn">Pause</button>
|
|
<button id="resetBtn">Reset</button>
|
|
<div class="status" id="status"></div>
|
|
</div>
|
|
|
|
<div class="layout">
|
|
<section class="map-panel">
|
|
<div class="map-title">
|
|
<strong>Tilnærmet position</strong>
|
|
Viser bevidst usikker og pædagogisk forskudt tracking.
|
|
</div>
|
|
<div id="mapApprox" class="map"></div>
|
|
<div class="offmap-indicators" id="offmapIndicatorsApprox"></div>
|
|
</section>
|
|
|
|
<section class="map-panel">
|
|
<div class="map-title">
|
|
<strong>Præcis position</strong>
|
|
Viser den reelle position for samme køretøjer og tidslinje.
|
|
</div>
|
|
<div id="mapTrue" class="map"></div>
|
|
<div class="offmap-indicators" id="offmapIndicatorsTrue"></div>
|
|
</section>
|
|
|
|
<aside class="sidebar">
|
|
<div class="panel" id="selectedVehicleInfo">Klik på et køretøj eller en hjørneindikator for detaljer.</div>
|
|
<div class="panel runtime-warning" id="runtimeWarning" hidden>
|
|
Du kører appen via <code>file://</code>. Brug en lokal webserver i stedet, fx <code>python3 -m http.server 4173</code>, og åbn <code>http://127.0.0.1:4173/kort7.html</code>.
|
|
</div>
|
|
<div class="panel runtime-warning tile-warning" id="tileWarning" hidden>
|
|
Korttiles kunne ikke hentes. Demoen viser derfor grå flader. Tjek netværksadgang eller om browseren blokerer tile-requests.
|
|
</div>
|
|
<div class="panel debug-panel" id="debugPanel"></div>
|
|
<div class="panel">
|
|
<strong>Mulige off-map køretøjer, tilnærmet kort</strong>
|
|
<div class="alerts" id="presenceAlertsApprox"></div>
|
|
</div>
|
|
<div class="panel">
|
|
<strong>Mulige off-map køretøjer, præcist kort</strong>
|
|
<div class="alerts" id="presenceAlertsTrue"></div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<script src="data.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|