Bernt
bae705aa97
- Add NFC ePassport roadmap (ICAO 9303, eIDAS) - Add TensorFlow.js edge face detection (BlazeFace) - Add structured audit logger (GDPR-compliant) - Risk scoring support Part of KYC Apple Native UX v1.1.0
204 lines
7.7 KiB
HTML
204 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="sv">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>QUIXZOOM Observation Review</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, system-ui, sans-serif; background: #0a0e27; color: #fff; }
|
|
|
|
.header { background: #1a1f3a; padding: 20px; border-bottom: 1px solid #2a3050; }
|
|
.header h1 { font-size: 20px; margin-bottom: 8px; }
|
|
.header p { color: #8b92b4; font-size: 14px; }
|
|
|
|
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; padding: 20px; }
|
|
.stat-card { background: #1a1f3a; border-radius: 8px; padding: 15px; }
|
|
.stat-value { font-size: 24px; font-weight: 600; color: #4ade80; }
|
|
.stat-label { font-size: 12px; color: #8b92b4; margin-top: 4px; }
|
|
|
|
.filters { padding: 0 20px 20px; display: flex; gap: 10px; flex-wrap: wrap; }
|
|
.filter-btn { background: #2a3050; border: none; color: #fff; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; }
|
|
.filter-btn.active { background: #4ade80; color: #0a0e27; }
|
|
.filter-btn:hover { background: #3a4060; }
|
|
|
|
.observations { padding: 0 20px 20px; }
|
|
.obs-card { background: #1a1f3a; border-radius: 8px; padding: 15px; margin-bottom: 10px; display: flex; gap: 15px; align-items: start; }
|
|
.obs-image { width: 120px; height: 90px; background: #2a3050; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #5a6090; font-size: 12px; }
|
|
.obs-content { flex: 1; }
|
|
.obs-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
|
.obs-type { font-size: 16px; font-weight: 600; }
|
|
.obs-confidence { font-size: 12px; padding: 4px 8px; border-radius: 4px; }
|
|
.confidence-high { background: #4ade8020; color: #4ade80; }
|
|
.confidence-medium { background: #fbbf2420; color: #fbbf24; }
|
|
.confidence-low { background: #f8717120; color: #f87171; }
|
|
.obs-meta { font-size: 13px; color: #8b92b4; line-height: 1.6; }
|
|
.obs-actions { display: flex; gap: 8px; margin-top: 10px; }
|
|
.action-btn { padding: 6px 12px; border-radius: 4px; border: none; cursor: pointer; font-size: 13px; }
|
|
.btn-verify { background: #4ade80; color: #0a0e27; }
|
|
.btn-reject { background: #f87171; color: #fff; }
|
|
.btn-skip { background: #2a3050; color: #fff; }
|
|
|
|
.map { height: 200px; background: #1a1f3a; border-radius: 8px; margin: 20px; display: flex; align-items: center; justify-content: center; color: #5a6090; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>Observation Review</h1>
|
|
<p>Granska och verifiera observationer från Bangkok</p>
|
|
</div>
|
|
|
|
<div class="stats">
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="total-obs">0</div>
|
|
<div class="stat-label">Totalt</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="verified-obs">0</div>
|
|
<div class="stat-label">Verifierade</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="pending-obs">0</div>
|
|
<div class="stat-label">Väntar</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value" id="rejected-obs">0</div>
|
|
<div class="stat-label">Avvisade</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filters">
|
|
<button class="filter-btn active" onclick="filter('all')">Alla</button>
|
|
<button class="filter-btn" onclick="filter('street_lamp')">Gatlyktor</button>
|
|
<button class="filter-btn" onclick="filter('traffic_sign')">Skyltar</button>
|
|
<button class="filter-btn" onclick="filter('tree')">Träd</button>
|
|
<button class="filter-btn" onclick="filter('high_confidence')">Hög confidence</button>
|
|
<button class="filter-btn" onclick="filter('low_confidence')">Låg confidence</button>
|
|
</div>
|
|
|
|
<div class="map">
|
|
[Karta kommer här - Leaflet/Mapbox]
|
|
</div>
|
|
|
|
<div class="observations" id="observations">
|
|
<!-- Observationer laddas dynamiskt -->
|
|
</div>
|
|
|
|
<script>
|
|
let observations = [];
|
|
let currentFilter = 'all';
|
|
|
|
async function loadObservations() {
|
|
// I verkligheten: hämta från API
|
|
// För demo: generera mock-data
|
|
observations = generateMockObservations(50);
|
|
renderObservations();
|
|
updateStats();
|
|
}
|
|
|
|
function generateMockObservations(count) {
|
|
const types = ['street_lamp', 'traffic_sign', 'tree', 'utility_box', 'manhole'];
|
|
const obs = [];
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
const type = types[Math.floor(Math.random() * types.length)];
|
|
const confidence = 0.5 + Math.random() * 0.5;
|
|
|
|
obs.push({
|
|
id: `obs_${i}`,
|
|
type: type,
|
|
typeLabel: {
|
|
street_lamp: 'Gatlykta',
|
|
traffic_sign: 'Trafikskylt',
|
|
tree: 'Träd',
|
|
utility_box: 'Elskåp',
|
|
manhole: 'Brunn',
|
|
}[type],
|
|
lat: 13.7563 + (Math.random() - 0.5) * 0.01,
|
|
lng: 100.5018 + (Math.random() - 0.5) * 0.01,
|
|
confidence: confidence,
|
|
confidenceLabel: confidence > 0.8 ? 'high' : confidence > 0.6 ? 'medium' : 'low',
|
|
timestamp: new Date(Date.now() - Math.random() * 86400000).toISOString(),
|
|
status: Math.random() > 0.7 ? 'verified' : Math.random() > 0.5 ? 'pending' : 'rejected',
|
|
source: 'video',
|
|
attributes: {},
|
|
});
|
|
}
|
|
|
|
return obs;
|
|
}
|
|
|
|
function renderObservations() {
|
|
const container = document.getElementById('observations');
|
|
container.innerHTML = '';
|
|
|
|
const filtered = filterObservations();
|
|
|
|
filtered.forEach(obs => {
|
|
const card = document.createElement('div');
|
|
card.className = 'obs-card';
|
|
card.innerHTML = `
|
|
<div class="obs-image">[Frame]</div>
|
|
<div class="obs-content">
|
|
<div class="obs-header">
|
|
<span class="obs-type">${obs.typeLabel}</span>
|
|
<span class="obs-confidence confidence-${obs.confidenceLabel}">${(obs.confidence * 100).toFixed(0)}%</span>
|
|
</div>
|
|
<div class="obs-meta">
|
|
ID: ${obs.id}<br>
|
|
Position: ${obs.lat.toFixed(4)}, ${obs.lng.toFixed(4)}<br>
|
|
Tid: ${new Date(obs.timestamp).toLocaleString('sv-SE')}<br>
|
|
Källa: ${obs.source}
|
|
</div>
|
|
<div class="obs-actions">
|
|
<button class="action-btn btn-verify" onclick="verify('${obs.id}')">Verifiera</button>
|
|
<button class="action-btn btn-reject" onclick="reject('${obs.id}')">Avvisa</button>
|
|
<button class="action-btn btn-skip" onclick="skip('${obs.id}')">Hoppa över</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
container.appendChild(card);
|
|
});
|
|
}
|
|
|
|
function filterObservations() {
|
|
if (currentFilter === 'all') return observations;
|
|
if (currentFilter === 'high_confidence') return observations.filter(o => o.confidence > 0.8);
|
|
if (currentFilter === 'low_confidence') return observations.filter(o => o.confidence < 0.6);
|
|
return observations.filter(o => o.type === currentFilter);
|
|
}
|
|
|
|
function filter(type) {
|
|
currentFilter = type;
|
|
document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
|
|
event.target.classList.add('active');
|
|
renderObservations();
|
|
}
|
|
|
|
function updateStats() {
|
|
document.getElementById('total-obs').textContent = observations.length;
|
|
document.getElementById('verified-obs').textContent = observations.filter(o => o.status === 'verified').length;
|
|
document.getElementById('pending-obs').textContent = observations.filter(o => o.status === 'pending').length;
|
|
document.getElementById('rejected-obs').textContent = observations.filter(o => o.status === 'rejected').length;
|
|
}
|
|
|
|
function verify(id) {
|
|
const obs = observations.find(o => o.id === id);
|
|
if (obs) { obs.status = 'verified'; updateStats(); renderObservations(); }
|
|
}
|
|
|
|
function reject(id) {
|
|
const obs = observations.find(o => o.id === id);
|
|
if (obs) { obs.status = 'rejected'; updateStats(); renderObservations(); }
|
|
}
|
|
|
|
function skip(id) {
|
|
renderObservations();
|
|
}
|
|
|
|
// Ladda vid start
|
|
loadObservations();
|
|
</script>
|
|
</body>
|
|
</html>
|