18b7d7d1d0
Move inline <style> blocks from simple.html and integrations.html into external CSS files (wizard.css, integrations.css), replacing all hard-coded pixel values with design tokens from tokens.css. Remove inline style attributes in favor of CSS classes. All 5 dashboard pages now share one design system via Radix dark tokens (§8e). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
114 lines
4.2 KiB
HTML
114 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, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|
<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">
|
|
<link rel="stylesheet" href="css/notifications.css">
|
|
<link rel="stylesheet" href="css/wizard.css">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="theme-color" content="#18191b">
|
|
</head>
|
|
<body class="simple-mode has-mobile-nav">
|
|
<div class="app-shell app-shell--full">
|
|
<!-- Header (grid header area) -->
|
|
<header id="simple-mode-header" class="simple-mode-header app-header">
|
|
<h1>🏠 Spaxel</h1>
|
|
<div class="mode-toggle">
|
|
<button class="mode-toggle-btn active" data-mode="simple">Simple</button>
|
|
<button class="mode-toggle-btn" data-mode="expert">Expert</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main content (grid main area) -->
|
|
<main id="simple-mode-content" class="simple-mode-content app-main">
|
|
<!-- Loading State -->
|
|
<div class="simple-loading">
|
|
<div class="simple-loading-spinner"></div>
|
|
<div class="simple-loading-text">Loading your home...</div>
|
|
</div>
|
|
</main>
|
|
</div><!-- /.app-shell -->
|
|
|
|
<!-- Mobile bottom nav (outside grid, fixed at bottom) -->
|
|
<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">
|
|
<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>
|
|
|
|
<!-- Room Detail Modal -->
|
|
<div id="simple-room-modal" class="simple-room-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<span class="modal-title">Room Details</span>
|
|
<button class="modal-close">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<!-- Content populated dynamically -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alert Detail Modal -->
|
|
<div id="simple-alert-modal" class="simple-room-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<span class="modal-title">Alert Details</span>
|
|
<button class="modal-close">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<!-- Content populated dynamically -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- esp-web-tools for firmware flashing (Web Serial) -->
|
|
<script type="module" src="https://espressif.github.io/esp-web-tools/dist/web/install-button.js"></script>
|
|
<!-- Simple Mode Detection -->
|
|
<script src="js/simplemode.js"></script>
|
|
<!-- Simple Mode -->
|
|
<script src="js/simple.js"></script>
|
|
<!-- Notifications -->
|
|
<script src="js/notifications.js"></script>
|
|
<!-- Node Onboarding Wizard -->
|
|
<script src="js/onboard.js"></script>
|
|
|
|
<script>
|
|
(function() {
|
|
'use strict';
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (window.SpaxelSimpleMode) {
|
|
window.SpaxelSimpleMode.init();
|
|
}
|
|
if (window.SpaxelSimpleModeDetection) {
|
|
window.SpaxelSimpleModeDetection.init();
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|