299ae24916
The onboard wizard requires the esp-web-install-button custom element from esp-web-tools. It was loaded in index.html but missing from simple.html, causing "Firmware flashing component failed to load." Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
148 lines
7.7 KiB
HTML
148 lines
7.7 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/simple.css">
|
|
<link rel="stylesheet" href="css/notifications.css">
|
|
<style>
|
|
#wizard-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:1000}
|
|
#wizard-card{background:#1e1e3a;border-radius:12px;padding:28px 32px 20px;max-width:560px;width:92%;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,.5)}
|
|
#wizard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
|
|
#wizard-header h1{font-size:20px;font-weight:600;color:#eee}
|
|
.wizard-close{background:none;border:none;color:#888;font-size:24px;cursor:pointer;padding:0 4px;line-height:1}
|
|
.wizard-close:hover{color:#eee}
|
|
#wizard-steps{display:flex;align-items:center;justify-content:center;margin-bottom:24px;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:600;background:#333;color:#666;transition:all .3s;flex-shrink:0}
|
|
.wizard-step-dot.active{background:#4fc3f7;color:#fff;box-shadow:0 0 12px rgba(79,195,247,.5)}
|
|
.wizard-step-dot.completed{background:#4caf50;color:#fff}
|
|
.wizard-step-line{width:20px;height:2px;background:#333;flex-shrink:0}
|
|
.wizard-step-line.completed{background:#4caf50}
|
|
#wizard-content{min-height:180px}
|
|
.wizard-step-content{text-align:center}
|
|
.wizard-step-content h2{font-size:18px;margin-bottom:8px;color:#eee}
|
|
.wizard-step-content p{color:#bbb;font-size:14px;line-height:1.5;margin-bottom:12px}
|
|
.wizard-muted{color:#777!important;font-size:13px!important}
|
|
.wizard-center-msg{padding:24px 0;text-align:center}
|
|
.wizard-center-msg p{color:#888;margin-top:12px}
|
|
.wizard-error{color:#ef5350;font-size:13px;padding:10px;background:rgba(239,83,80,.1);border-radius:4px;text-align:left;margin-top:8px}
|
|
.wizard-success{color:#66bb6a;font-size:14px;font-weight:500}
|
|
.wizard-icon-large{font-size:48px;margin-bottom:12px}
|
|
.wizard-list{text-align:left;color:#bbb;font-size:13px;line-height:1.8;margin:12px 0;padding-left:20px}
|
|
.spinner{display:inline-block;width:32px;height:32px;border:3px solid rgba(79,195,247,.2);border-top-color:#4fc3f7;border-radius:50%;animation:wizard-spin .8s linear infinite}
|
|
@keyframes wizard-spin{to{transform:rotate(360deg)}}
|
|
.wizard-progress{margin:16px 0}
|
|
.progress-bar{width:100%;height:8px;background:#333;border-radius:4px;overflow:hidden}
|
|
.progress-fill{height:100%;background:linear-gradient(90deg,#4fc3f7,#29b6f6);border-radius:4px;transition:width .3s;width:0%}
|
|
.wizard-progress p{font-size:12px;color:#888;margin-top:6px;text-align:center}
|
|
.wizard-btn{padding:10px 24px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;border:none;transition:background .2s,opacity .2s}
|
|
.wizard-btn:disabled{opacity:.5;cursor:not-allowed}
|
|
.wizard-btn-primary{background:#4fc3f7;color:#1a1a2e}
|
|
.wizard-btn-primary:hover:not(:disabled){background:#29b6f6}
|
|
.wizard-btn-secondary{background:rgba(255,255,255,.1);color:#ccc;border:1px solid rgba(255,255,255,.2)}
|
|
.wizard-btn-secondary:hover:not(:disabled){background:rgba(255,255,255,.15)}
|
|
#wizard-nav{display:flex;justify-content:space-between;margin-top:20px;gap:12px}
|
|
</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="#f5f5f7">
|
|
</head>
|
|
<body class="simple-mode">
|
|
<!-- Simple Mode Header -->
|
|
<header id="simple-mode-header" class="simple-mode-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>
|
|
|
|
<!-- Simple Mode Content -->
|
|
<main id="simple-mode-content" class="simple-mode-content">
|
|
<!-- Loading State -->
|
|
<div class="simple-loading">
|
|
<div class="simple-loading-spinner"></div>
|
|
<div class="simple-loading-text">Loading your home...</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Quick Actions Bottom Navigation -->
|
|
<nav id="simple-quick-actions" class="simple-quick-actions">
|
|
<div class="actions-container">
|
|
<button class="quick-action-btn active" data-action="home" data-tab="home">
|
|
<span class="action-icon">🏠</span>
|
|
<span class="action-label">Home</span>
|
|
</button>
|
|
<button class="quick-action-btn" data-action="activity" data-tab="activity">
|
|
<span class="action-icon">⏰</span>
|
|
<span class="action-label">Activity</span>
|
|
</button>
|
|
<button class="quick-action-btn" data-action="alerts" data-tab="alerts">
|
|
<span class="action-icon">🔔</span>
|
|
<span class="action-label">Alerts</span>
|
|
<span class="action-badge hidden" id="alert-badge">0</span>
|
|
</button>
|
|
<button class="quick-action-btn" data-action="add-node" onclick="window.SpaxelOnboard && window.SpaxelOnboard.start()">
|
|
<span class="action-icon">➕</span>
|
|
<span class="action-label">Add Node</span>
|
|
</button>
|
|
<button class="quick-action-btn" data-action="settings" data-tab="settings">
|
|
<span class="action-icon">⚙</span>
|
|
<span class="action-label">Settings</span>
|
|
</button>
|
|
</div>
|
|
</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>
|