6bf1e0394a
Implements the full explainability overlay for understanding why a blob was detected: - ExplainabilitySnapshot generation with per-link contribution tracking and zone decay - Fresnel zone ellipsoid geometry computation and 3D wireframe rendering - WebSocket request_explain / blob_explain flow for on-demand snapshots - Right-click, long-press, click, and hover tooltip activation paths - X-ray overlay dims non-contributing elements, highlights contributing links - Sidebar panel with confidence gauge, links table, sparklines, BLE match card - Escape key and backdrop click to exit, restoring scene state Also includes: simple mode removal, CSS cleanup, fleet page enhancements, sidebar timeline fixes. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
109 lines
4.2 KiB
HTML
109 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<title>Spaxel</title>
|
|
<link rel="stylesheet" href="css/tokens.css">
|
|
<link rel="stylesheet" href="css/layout.css">
|
|
<link rel="stylesheet" href="css/home.css">
|
|
</head>
|
|
<body class="home-body has-mobile-nav">
|
|
<div class="app-shell app-shell--full">
|
|
|
|
<!-- ── Top nav (grid header) ── -->
|
|
<nav class="app-header home-nav">
|
|
<a href="/" class="app-header__logo">⛶ Spaxel</a>
|
|
<div class="app-header__links">
|
|
<a href="/" class="app-header__link app-header__link--active">Home</a>
|
|
<a href="/live" class="app-header__link">Live View</a>
|
|
<a href="/fleet" class="app-header__link">Fleet</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- ── Main content ── -->
|
|
<main class="app-main">
|
|
|
|
<!-- ── Row 1: Status headline ── -->
|
|
<section class="home-status" aria-live="polite">
|
|
<div class="home-status__banner home-status__banner--ok" id="status-banner">
|
|
<span class="home-status__dot home-status__dot--disconnected" id="ws-dot"></span>
|
|
Connecting…
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── Row 2: Three cards ── -->
|
|
<section class="home-cards">
|
|
<!-- People & Zones -->
|
|
<a href="/live#zones" class="home-card" id="card-people">
|
|
<div class="home-card__header">
|
|
<span class="home-card__title">People & Zones</span>
|
|
<span class="home-card__icon">👤</span>
|
|
</div>
|
|
<div class="home-card__count" id="people-count">—</div>
|
|
<div class="home-card__detail" id="people-detail">Waiting for data…</div>
|
|
</a>
|
|
|
|
<!-- Devices & Fleet Health -->
|
|
<a href="/fleet" class="home-card" id="card-devices">
|
|
<div class="home-card__header">
|
|
<span class="home-card__title">Devices & Fleet Health</span>
|
|
<span class="home-card__icon">📡</span>
|
|
</div>
|
|
<div class="home-card__count" id="devices-count">—</div>
|
|
<div class="home-card__detail" id="devices-detail">Waiting for data…</div>
|
|
<div class="home-card__meta" id="devices-meta"></div>
|
|
</a>
|
|
|
|
<!-- Recent Events -->
|
|
<a href="/live#timeline" class="home-card" id="card-events">
|
|
<div class="home-card__header">
|
|
<span class="home-card__title">Recent Events</span>
|
|
<span class="home-card__icon">🕐</span>
|
|
</div>
|
|
<div class="home-card__detail" id="events-detail">Waiting for data…</div>
|
|
</a>
|
|
</section>
|
|
|
|
<!-- ── Row 3: Optional extras ── -->
|
|
<section class="home-extras">
|
|
<div class="home-extras__item" id="briefing-card"></div>
|
|
<div class="home-extras__item" id="anomaly-banner"></div>
|
|
<div class="home-extras__item" id="security-toggle"></div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
</div><!-- /.app-shell -->
|
|
|
|
<!-- ── Mobile bottom nav ── -->
|
|
<nav class="app-mobile-nav" aria-label="Main navigation">
|
|
<ul class="app-mobile-nav__list">
|
|
<li class="app-mobile-nav__item">
|
|
<a href="/" class="app-mobile-nav__link app-mobile-nav__link--active">
|
|
<span>🏠</span> Home
|
|
</a>
|
|
</li>
|
|
<li class="app-mobile-nav__item">
|
|
<a href="/live" class="app-mobile-nav__link">
|
|
<span>⛶</span> Live
|
|
</a>
|
|
</li>
|
|
<li class="app-mobile-nav__item">
|
|
<a href="/fleet" class="app-mobile-nav__link">
|
|
<span>📡</span> Fleet
|
|
</a>
|
|
</li>
|
|
<li class="app-mobile-nav__item">
|
|
<a href="/setup" class="app-mobile-nav__link">
|
|
<span>⚙</span> Setup
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<script src="js/home-cards.js"></script>
|
|
</body>
|
|
</html>
|