7162d4523e
Per plan.md §8e information architecture: - index.html (109 lines) is now a home page with status headline, 3 cards (People & Zones, Devices & Fleet Health, Recent Events), optional extras row, and mobile bottom nav - live.html serves the full 3D viewer at /live route - home-cards.js connects to /ws/dashboard for snapshot + incremental updates - tokens.css provides the Radix dark design system - layout.css provides the CSS Grid app shell with responsive breakpoints - home.css provides card grid, status banner, responsive mobile layout Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
109 lines
4.3 KiB
HTML
109 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, 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>
|