c0057b5e82
- Add simple.html: mobile-first card-based UI without 3D scene - Room cards show occupancy count, person names, and status color - Activity feed displays chronological events from timeline - Alert banner for fall detection, anomaly alerts, system warnings - Quick actions: arm/disarm security, re-baseline, silence alerts - Sleep summary card showing last night's sleep data - Simple/expert mode toggle button in all views - Mobile-responsive layout with touch-friendly interface - Per-user default mode stored in localStorage Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
122 lines
6.3 KiB
HTML
122 lines
6.3 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 - Simple Mode</title>
|
|
<link rel="stylesheet" href="css/tokens.css">
|
|
<link rel="stylesheet" href="css/layout.css">
|
|
<link rel="stylesheet" href="css/simple.css">
|
|
</head>
|
|
<body class="simple-mode">
|
|
|
|
<!-- ── Connection Status ── -->
|
|
<div id="connection-status" class="simple-status">
|
|
<span class="simple-status__dot simple-status__dot--connecting"></span>
|
|
<span class="simple-status__text">Connecting...</span>
|
|
</div>
|
|
|
|
<!-- ── Alert Banner ── -->
|
|
<div id="alert-banner" class="simple-alerts simple-alerts--warning hidden">
|
|
<div class="simple-alerts__content">
|
|
<strong id="alert-title">Alert</strong>
|
|
<span id="alert-message">Alert message here</span>
|
|
</div>
|
|
<button id="alert-dismiss" class="simple-alerts__dismiss">Dismiss</button>
|
|
</div>
|
|
|
|
<!-- ── Header ── -->
|
|
<header class="simple-header">
|
|
<div class="simple-header__logo">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
|
<polyline points="9 22 9 12 15 12 15 22"></polyline>
|
|
</svg>
|
|
<span>Spaxel</span>
|
|
</div>
|
|
<button id="mode-toggle" class="simple-header__toggle" title="Switch to Expert Mode">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
|
|
</svg>
|
|
Expert
|
|
</button>
|
|
</header>
|
|
|
|
<!-- ── Main Content ── -->
|
|
<main class="simple-main">
|
|
|
|
<!-- ── Quick Actions ── -->
|
|
<section class="quick-actions-section">
|
|
<h2 class="section-title">Quick Actions</h2>
|
|
<div class="quick-actions-grid">
|
|
<button id="action-security" class="simple-action-btn">
|
|
<svg class="simple-action-btn__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
|
</svg>
|
|
<span id="security-label">Arm Security</span>
|
|
</button>
|
|
<button id="action-rebaseline" class="simple-action-btn">
|
|
<svg class="simple-action-btn__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
|
|
<polyline points="9 11 12 14 22 4"></polyline>
|
|
</svg>
|
|
<span>Re-baseline</span>
|
|
</button>
|
|
<button id="action-silence" class="simple-action-btn">
|
|
<svg class="simple-action-btn__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
|
|
<path d="M19.07 4.93L17.66 6.34C18.5 7.18 19 8.26 19 9.5c0 2.48-2.02 4.5-4.5 4.5S10 11.98 10 9.5c0-.61.16-1.19.45-1.71L7.65 12.59C8.47 14.61 10.36 16 12.5 16c3.59 0 6.5-2.91 6.5-6.5 0-1.63-.61-3.12-1.61-4.28l2.02-2.02c1.44 1.66 2.32 3.83 2.32 6.23 0 4.97-4.03 9-9 9-2.65 0-5.05-1.15-6.71-2.97l1.89-1.88z"></path>
|
|
</svg>
|
|
<span>Silence Alerts</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── Sleep Summary Card ── -->
|
|
<section id="sleep-card" class="sleep-summary-card hidden">
|
|
<div class="sleep-summary-header">
|
|
<div class="sleep-summary-title">
|
|
<svg class="sleep-summary-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
|
</svg>
|
|
<span>Morning Briefing</span>
|
|
</div>
|
|
<span id="sleep-date" class="sleep-summary-date"></span>
|
|
</div>
|
|
<div id="sleep-content" class="sleep-summary-content"></div>
|
|
</section>
|
|
|
|
<!-- ── Room Cards ── -->
|
|
<section class="room-cards-section">
|
|
<h2 class="section-title">Rooms</h2>
|
|
<div id="zones-grid" class="zones-grid">
|
|
<p class="simple-zone-card simple-zone-card--loading">Loading rooms...</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── Activity Feed ── -->
|
|
<section class="activity-section">
|
|
<h2 class="section-title">Activity</h2>
|
|
<div id="activity-feed" class="activity-feed">
|
|
<p class="simple-feed__empty">Loading activity...</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── System Status ── -->
|
|
<footer class="simple-footer">
|
|
<span id="system-status" class="system-status">Loading...</span>
|
|
</footer>
|
|
|
|
</main>
|
|
|
|
<!-- Toast Container -->
|
|
<div class="toast-container"></div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="js/simple-mode.js"></script>
|
|
</body>
|
|
</html>
|