jedarden/spaxel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(simple): add node onboarding wizard to simple view

Browse source 
Add "+ Add Node" button to bottom nav and load onboard.js with wizard
CSS. Also fix broken init that still referenced removed SpaxelAuth.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
jedarden 2026-04-13 21:38:41 -04:00
parent 7dd223728f
commit ac1812aadf
1 changed files with 49 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
dashboard/simple.html
View file

@ -6,6 +6,44 @@
<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">
@ -45,6 +83,10 @@
<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">&#x2795;</span>
<span class="action-label">Add Node</span>
</button>
<button class="quick-action-btn" data-action="settings" data-tab="settings">
<span class="action-icon">&#x2699;</span>
<span class="action-label">Settings</span>
@ -84,36 +126,18 @@
<script src="js/simple.js"></script>
<!-- Notifications -->
<script src="js/notifications.js"></script>
<!-- Node Onboarding Wizard -->
<script src="js/onboard.js"></script>
<script>
// Initialize simple mode when DOM is ready and auth is complete
(function() {
'use strict';
document.addEventListener('DOMContentLoaded', function() {
// Check authentication first
if (window.SpaxelAuth) {
SpaxelAuth.checkStatus().then(function(isAuthenticated) {
if (isAuthenticated) {
// Initialize simple mode
if (window.SpaxelSimpleMode) {
window.SpaxelSimpleMode.init();
}
// Initialize simple mode detection
if (window.SpaxelSimpleModeDetection) {
window.SpaxelSimpleModeDetection.init();
}
} else {
// Redirect to main dashboard for authentication
window.location.href = '/';
}
}).catch(function() {
// On auth error, redirect to main dashboard
window.location.href = '/';
});
} else {
// Auth module not loaded, redirect
window.location.href = '/';
if (window.SpaxelSimpleMode) {
window.SpaxelSimpleMode.init();
}
if (window.SpaxelSimpleModeDetection) {
window.SpaxelSimpleModeDetection.init();
}
});
})();