dd2fdd789c
Continued CSS tokenization pass across ambient, fleet, live, simple, integrations pages and their component stylesheets. Replaces hardcoded `white`, `#1a1a2e`, and raw rgba values with semantic tokens from tokens.css. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
151 lines
8 KiB
HTML
151 lines
8 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">
|
|
<style>
|
|
#wizard-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay-strong);display:flex;align-items:center;justify-content:center;z-index:1000}
|
|
#wizard-card{background:var(--bg-card);border-radius:var(--radius-modal);padding:28px 32px 20px;max-width:560px;width:92%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl)}
|
|
#wizard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-5)}
|
|
#wizard-header h1{font-size:var(--text-lg);font-weight:var(--fw-heading);color:var(--text-primary)}
|
|
.wizard-close{background:none;border:none;color:var(--text-muted);font-size:24px;cursor:pointer;padding:0 4px;line-height:1}
|
|
.wizard-close:hover{color:var(--text-primary)}
|
|
#wizard-steps{display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-6);gap:0}
|
|
.wizard-step-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:var(--fw-heading);background:var(--bg-active);color:var(--slate-7);transition:all .3s;flex-shrink:0}
|
|
.wizard-step-dot.active{background:var(--color-primary);color:var(--text-on-accent);box-shadow:0 0 12px var(--blue-border)}
|
|
.wizard-step-dot.completed{background:var(--ok);color:var(--text-on-accent)}
|
|
.wizard-step-line{width:20px;height:2px;background:var(--bg-active);flex-shrink:0}
|
|
.wizard-step-line.completed{background:var(--ok)}
|
|
#wizard-content{min-height:180px}
|
|
.wizard-step-content{text-align:center}
|
|
.wizard-step-content h2{font-size:18px;margin-bottom:var(--space-2);color:var(--text-primary)}
|
|
.wizard-step-content p{color:var(--text-secondary);font-size:var(--text-sm);line-height:var(--lh-body);margin-bottom:var(--space-3)}
|
|
.wizard-muted{color:var(--text-muted)!important;font-size:13px!important}
|
|
.wizard-center-msg{padding:var(--space-6) 0;text-align:center}
|
|
.wizard-center-msg p{color:var(--text-muted);margin-top:var(--space-3)}
|
|
.wizard-error{color:var(--alert);font-size:13px;padding:10px;background:var(--alert-bg);border-radius:var(--radius-control);text-align:left;margin-top:var(--space-2)}
|
|
.wizard-success{color:var(--ok);font-size:var(--text-sm);font-weight:500}
|
|
.wizard-icon-large{font-size:48px;margin-bottom:var(--space-3)}
|
|
.wizard-list{text-align:left;color:var(--text-secondary);font-size:13px;line-height:1.8;margin:var(--space-3) 0;padding-left:20px}
|
|
.spinner{display:inline-block;width:32px;height:32px;border:3px solid var(--blue-border);border-top-color:var(--color-primary);border-radius:50%;animation:wizard-spin .8s linear infinite}
|
|
@keyframes wizard-spin{to{transform:rotate(360deg)}}
|
|
.wizard-progress{margin:var(--space-4) 0}
|
|
.progress-bar{width:100%;height:8px;background:var(--bg-active);border-radius:4px;overflow:hidden}
|
|
.progress-fill{height:100%;background:linear-gradient(90deg,var(--blue-9),var(--blue-10));border-radius:4px;transition:width .3s;width:0%}
|
|
.wizard-progress p{font-size:var(--text-xs);color:var(--text-muted);margin-top:6px;text-align:center}
|
|
.wizard-btn{padding:10px 24px;border-radius:var(--radius-control);font-size:var(--text-sm);font-weight:500;cursor:pointer;border:none;transition:background .2s,opacity .2s}
|
|
.wizard-btn:disabled{opacity:.5;cursor:not-allowed}
|
|
.wizard-btn-primary{background:var(--color-primary);color:var(--slate-1)}
|
|
.wizard-btn-primary:hover:not(:disabled){background:var(--color-primary-hover)}
|
|
.wizard-btn-secondary{background:var(--bg-hover);color:var(--text-secondary);border:1px solid var(--border-strong)}
|
|
.wizard-btn-secondary:hover:not(:disabled){background:var(--bg-active)}
|
|
#wizard-nav{display:flex;justify-content:space-between;margin-top:var(--space-5);gap:var(--space-3)}
|
|
</style>
|
|
<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>
|