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
162 lines
6.5 KiB
HTML
162 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Landvex — Urban Intelligence Dashboard</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="logo">Landvex</div>
|
|
<nav class="nav">
|
|
<a href="#" class="nav-link active" data-view="overview">Dashboard</a>
|
|
<a href="#" class="nav-link" data-view="observations">Observations</a>
|
|
<a href="#" class="nav-link" data-view="analytics">Analytics</a>
|
|
<a href="#" class="nav-link" data-view="reports">Reports</a>
|
|
<a href="#" class="nav-link" data-view="settings">Settings</a>
|
|
</nav>
|
|
<div class="user">
|
|
<span>Municipality of Stockholm</span>
|
|
<div class="user-avatar">S</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main">
|
|
<!-- Overview View -->
|
|
<div id="view-overview" class="view active">
|
|
<!-- Stats Grid -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card" id="total-observations">
|
|
<div class="stat-label">Total Observations</div>
|
|
<div class="stat-value">1,247</div>
|
|
<div class="stat-change positive">↑ 12% this month</div>
|
|
</div>
|
|
<div class="stat-card" id="active-zoomers">
|
|
<div class="stat-label">Active Zoomers</div>
|
|
<div class="stat-value">89</div>
|
|
<div class="stat-change positive">↑ 8% this week</div>
|
|
</div>
|
|
<div class="stat-card" id="avg-rgi">
|
|
<div class="stat-label">Avg. RGI Score</div>
|
|
<div class="stat-value">4.2</div>
|
|
<div class="stat-change negative">↑ 0.3 from last month</div>
|
|
</div>
|
|
<div class="stat-card" id="pending-actions">
|
|
<div class="stat-label">Pending Actions</div>
|
|
<div class="stat-value">23</div>
|
|
<div class="stat-change positive">↓ 5 from yesterday</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Map Section -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">🗺️ Observation Map</h2>
|
|
<div class="section-actions">
|
|
<button class="btn btn-secondary">Filter</button>
|
|
<button class="btn btn-primary" id="export-btn">Export</button>
|
|
</div>
|
|
</div>
|
|
<div class="map-container" id="map-container">
|
|
<div class="map-placeholder">
|
|
<div class="map-icon">🗺️</div>
|
|
<p>Interactive map loading...</p>
|
|
<p>Showing 1,247 observations in Stockholm</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RGI Panel -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">📊 Reality Gap Index</h2>
|
|
<button class="btn btn-primary">View Details</button>
|
|
</div>
|
|
<div class="rgi-score">
|
|
<div class="rgi-value">4.2</div>
|
|
<div>
|
|
<div class="rgi-label">Medium-High Gap</div>
|
|
<div class="rgi-label">Stockholm Municipality</div>
|
|
</div>
|
|
</div>
|
|
<div class="rgi-chart" id="rgi-chart">
|
|
<!-- Chart rendered by JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Observations View -->
|
|
<div id="view-observations" class="view">
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">📸 Observations</h2>
|
|
<div class="section-actions">
|
|
<input type="text" class="search-box" placeholder="Search observations..." oninput="LandvexDashboard.searchObservations(this.value)">
|
|
<button class="btn btn-primary">+ New</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filters">
|
|
<button class="filter-btn active" data-filter="all">All</button>
|
|
<button class="filter-btn" data-filter="pending">Pending</button>
|
|
<button class="filter-btn" data-filter="approved">Approved</button>
|
|
<button class="filter-btn" data-filter="rejected">Rejected</button>
|
|
</div>
|
|
|
|
<table class="observations-table">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Location</th>
|
|
<th>Type</th>
|
|
<th>Condition</th>
|
|
<th>Zoomer</th>
|
|
<th>Status</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="observations-tbody">
|
|
<!-- Rendered by JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Analytics View -->
|
|
<div id="view-analytics" class="view">
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">📈 Analytics</h2>
|
|
</div>
|
|
<p>Analytics dashboard coming soon...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reports View -->
|
|
<div id="view-reports" class="view">
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">📄 Reports</h2>
|
|
</div>
|
|
<p>Reports dashboard coming soon...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings View -->
|
|
<div id="view-settings" class="view">
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">⚙️ Settings</h2>
|
|
</div>
|
|
<p>Settings dashboard coming soon...</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="dashboard.js"></script>
|
|
</body>
|
|
</html>
|