150 lines
6.9 KiB
HTML
150 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Intaleq | Map Intelligence Dashboard</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
<body class="dark-theme">
|
|
<div class="app-container">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<div class="logo-container">
|
|
<div class="logo-icon"><i class="fas fa-brain-circuit"></i></div>
|
|
<div class="logo-text">Intaleq<span>Map AI</span></div>
|
|
</div>
|
|
<nav class="main-nav">
|
|
<a href="#" class="nav-item active"><i class="fas fa-chart-line"></i> Summary</a>
|
|
<a href="#" class="nav-item"><i class="fas fa-road"></i> Candidates</a>
|
|
<a href="#" class="nav-item"><i class="fas fa-barrier-solid"></i> Closures</a>
|
|
<a href="/api/docs" target="_blank" class="nav-item"><i class="fas fa-book"></i> API Docs</a>
|
|
</nav>
|
|
<div class="sidebar-footer">
|
|
<div class="status-indicator">
|
|
<span class="dot pulse"></span>
|
|
<span>Live Traffic Engine</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<header class="top-bar">
|
|
<div class="search-container">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" placeholder="Search segments or drivers...">
|
|
</div>
|
|
<div class="action-buttons">
|
|
<button id="run-analysis-btn" class="btn btn-primary">
|
|
<i class="fas fa-play"></i> Run Intelligence
|
|
</button>
|
|
<div class="user-profile">
|
|
<img src="https://ui-avatars.com/api/?name=Admin&background=6366f1&color=fff" alt="Admin">
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="dashboard-scroll">
|
|
<!-- Stats Overview -->
|
|
<section class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-icon purple"><i class="fas fa-satellite-dish"></i></div>
|
|
<div class="stat-info">
|
|
<span class="stat-label">Telemetry Points</span>
|
|
<h2 id="stat-telemetry">0</h2>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon blue"><i class="fas fa-route"></i></div>
|
|
<div class="stat-info">
|
|
<span class="stat-label">Analyzed Segments</span>
|
|
<h2 id="stat-roads">0</h2>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon orange"><i class="fas fa-sparkles"></i></div>
|
|
<div class="stat-info">
|
|
<span class="stat-label">Pending Roads</span>
|
|
<h2 id="stat-pending">0</h2>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon red"><i class="fas fa-road-barrier"></i></div>
|
|
<div class="stat-info">
|
|
<span class="stat-label">Active Closures</span>
|
|
<h2 id="stat-closed">0</h2>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="content-grid">
|
|
<!-- Road Candidates Table -->
|
|
<section class="card candidate-section">
|
|
<div class="card-header">
|
|
<h3><i class="fas fa-map-location-dot"></i> Discovered Road Candidates</h3>
|
|
<button class="btn btn-ghost" onclick="fetchCandidates()">Refresh</button>
|
|
</div>
|
|
<div class="table-container">
|
|
<table id="candidates-table">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Drivers</th>
|
|
<th>Points</th>
|
|
<th>L (m)</th>
|
|
<th>Confidence</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="empty-state">
|
|
<td colspan="6">Loading discoveries...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Road Closures -->
|
|
<section class="card closure-section">
|
|
<div class="card-header">
|
|
<h3><i class="fas fa-road-lock"></i> Road Closures</h3>
|
|
<div class="card-actions">
|
|
<button class="btn btn-ghost" onclick="fetchClosures()">Refresh</button>
|
|
<button id="discover-closures-btn" class="btn btn-secondary-sm">Check Now</button>
|
|
</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table id="closures-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Segment ID</th>
|
|
<th>Historical Vol</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="empty-state">
|
|
<td colspan="3">No closures detected</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Notification Container -->
|
|
<div id="toast-container"></div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|