naturallaw777
2013df55bd
Apply the approved "The Hub" redesign to the web admin while keeping every existing mechanic intact (polling, service-detail modals, Matrix and system password management, NWC wallet manager, update/rebuild/backup/security/ reboot flows, feature manager, onboarding, role handling). Layout (templates/index.html): - Old header bar + IP bar replaced by a sidebar + topbar app shell. Sidebar carries the brand (The Hub / Sovran_SystemsOS version), category navigation with live counts, the System actions (Update System, Tech Support, Manual Backup, Security, node-only Upgrade), Feature Manager / Preferences, and the role badge. - Topbar carries the page title, a service search box, the LAN | WAN network chip (external IP always visible, one line), Reboot and Sign Out. - New widgets row: Systems Operational summary (opens the new Systems Operational modal) and Bitcoin Core sync progress with block/ETA. - New Systems Operational modal: service counts, router port-forwarding steps (80/443 to this machine's LAN IP), the live domain diagnostics checklist, and which services use those ports. New static/js/dashboard.js (namespaced IIFE, no new globals) renders the nav, search filtering, widgets, and the Systems Operational modal; it is driven by the existing /api/services payloads via a window.dashboardServicesUpdated() hook called from buildTiles/updateTiles. Visual design (static/css/*): - New token set (softer dark surfaces, lifted contrast, Sovran green reserved for status and actions) with legacy variable names aliased so every secondary sheet re-skins automatically. - Tiles, dialogs, buttons, inputs, toggles, tables, forms, overlays and the login page restyled to the GNOME/libadwaita-flavored surfaces: 20px cards, 26px dialogs, pill buttons, libadwaita switches, mono value pills with Copy buttons, consistent modal anatomy. - Inline SVG symbol set for chrome/nav icons (monochrome, currentColor); service icons still load from /static/icons/*.svg as before. - Sidebar system buttons now use vector glyphs instead of emoji. Behavioral details: - Service detail modal header gains a status pill next to the version chip; credentials render with pre-wrap for multiline values. - First-login security banner now renders as a card inside the content area instead of a full-width strip above the app. - Search + category filtering hide/show sections and tiles without touching the polling or update logic. Onboarding and login pages rebranded to "The Hub" with aligned palette.
176 lines
8.2 KiB
HTML
176 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Sovran_SystemsOS — First-Boot Setup</title>
|
||
<link rel="stylesheet" href="/static/css/base.css" />
|
||
<link rel="stylesheet" href="/static/css/buttons.css" />
|
||
<link rel="stylesheet" href="/static/css/header.css" />
|
||
<link rel="stylesheet" href="/static/css/layout.css" />
|
||
<link rel="stylesheet" href="/static/css/tiles.css" />
|
||
<link rel="stylesheet" href="/static/css/modals.css" />
|
||
<link rel="stylesheet" href="/static/css/features.css" />
|
||
<link rel="stylesheet" href="/static/css/onboarding.css" />
|
||
<link rel="stylesheet" href="/static/css/support.css" />
|
||
<link rel="stylesheet" href="/static/css/domain-setup.css" />
|
||
</head>
|
||
<body class="onboarding-body">
|
||
|
||
<!-- Onboarding wizard container -->
|
||
<div class="onboarding-shell">
|
||
|
||
<!-- Progress bar -->
|
||
<div class="onboarding-progress-bar" id="onboarding-progress-bar">
|
||
<div class="onboarding-progress-fill" id="onboarding-progress-fill"></div>
|
||
</div>
|
||
|
||
<!-- Step indicators -->
|
||
<div class="onboarding-steps-nav" id="onboarding-steps-nav">
|
||
<span class="onboarding-step-dot" data-step="1">1</span>
|
||
<span class="onboarding-step-connector"></span>
|
||
<span class="onboarding-step-dot" data-step="2">2</span>
|
||
<span class="onboarding-step-connector"></span>
|
||
<span class="onboarding-step-dot" data-step="3">3</span>
|
||
<span class="onboarding-step-connector"></span>
|
||
<span class="onboarding-step-dot" data-step="4">4</span>
|
||
</div>
|
||
|
||
<!-- Step panels -->
|
||
<div class="onboarding-panel-wrap">
|
||
|
||
<!-- ── Migration Password Gate (pre-step) ── -->
|
||
<div class="onboarding-panel" id="step-migration" style="display:none">
|
||
<div class="onboarding-hero">
|
||
<div class="onboarding-logo">🔐</div>
|
||
<h1 class="onboarding-title">Your system has been migrated to Sovran_SystemsOS</h1>
|
||
<p class="onboarding-subtitle">Important password update required</p>
|
||
</div>
|
||
<div class="onboarding-card">
|
||
<p class="onboarding-body-text" style="text-align:center; margin-bottom:4px;">
|
||
Your new login password is:
|
||
</p>
|
||
<div id="migration-password-value" style="font-family:monospace; font-size:1.35rem; font-weight:700; color:var(--text-primary); background:rgba(62, 207, 142, 0.10); border:1.5px solid rgba(62, 207, 142, 0.35); border-radius:8px; padding:14px 24px; letter-spacing:0.04em; text-align:center; word-break:break-all; margin-bottom:8px;">
|
||
|
||
</div>
|
||
<div style="padding:10px 14px; background-color:rgba(233, 182, 74, 0.1); border:1px solid rgba(233, 182, 74, 0.35); border-radius:8px; font-size:0.92rem; color:var(--yellow); line-height:1.55;">
|
||
⚠ Write this password down! You will need it to log in next time. This is also your Sovran Hub login password.
|
||
</div>
|
||
<div id="migration-password-status" class="onboarding-save-status" style="margin-top:8px;"></div>
|
||
</div>
|
||
<div class="onboarding-footer">
|
||
<div></div>
|
||
<button class="btn btn-primary" id="migration-password-continue">
|
||
I've written it down — Continue →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── Step 1: Welcome ── -->
|
||
<div class="onboarding-panel" id="step-1">
|
||
<div class="onboarding-hero">
|
||
<div class="onboarding-logo">
|
||
<img src="/static/logo-light.svg" alt="Sovran Systems" class="onboarding-logo-img" />
|
||
</div>
|
||
<h1 class="onboarding-title">Welcome to Sovran_SystemsOS!</h1>
|
||
<p class="onboarding-subtitle">Be Digitally Sovereign</p>
|
||
</div>
|
||
<div class="onboarding-card">
|
||
<p class="onboarding-body-text">
|
||
Your system is installed and ready to configure. This wizard will guide
|
||
you through the final setup steps so everything works perfectly.
|
||
</p>
|
||
<div class="onboarding-role-row" id="onboarding-role-row">
|
||
<span class="onboarding-role-label">Your Role:</span>
|
||
<span class="onboarding-role-badge" id="onboarding-role-badge">Loading…</span>
|
||
</div>
|
||
<p class="onboarding-body-text onboarding-body-text--dim">
|
||
This setup only takes a few minutes. You can always revisit these
|
||
settings from the main Hub dashboard.
|
||
</p>
|
||
</div>
|
||
<div class="onboarding-footer">
|
||
<div></div>
|
||
<button class="btn btn-primary onboarding-btn-next" id="step-1-next">
|
||
Let's Go →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── Step 2: Timezone & Locale ── -->
|
||
<div class="onboarding-panel" id="step-2" style="display:none">
|
||
<div class="onboarding-step-header">
|
||
<span class="onboarding-step-icon">🌍</span>
|
||
<h2 class="onboarding-step-title">Timezone & Locale</h2>
|
||
<p class="onboarding-step-desc">
|
||
Select your timezone and preferred language so your system clock, logs,
|
||
and services display the correct time and format.
|
||
</p>
|
||
</div>
|
||
<div class="onboarding-card" id="step-2-body">
|
||
<p class="onboarding-loading">Loading timezone data…</p>
|
||
</div>
|
||
<div id="step-2-status" class="onboarding-save-status"></div>
|
||
<div class="onboarding-footer">
|
||
<button class="btn btn-close-modal onboarding-btn-back" data-prev="1">← Back</button>
|
||
<button class="btn btn-primary onboarding-btn-next" id="step-2-next">
|
||
Save & Continue →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── Step 3: Domain Configuration ── -->
|
||
<div class="onboarding-panel" id="step-3" style="display:none">
|
||
<div class="onboarding-step-header">
|
||
<span class="onboarding-step-icon">🌐</span>
|
||
<h2 class="onboarding-step-title">Connect Your Services</h2>
|
||
<p class="onboarding-step-desc">
|
||
Sovran_SystemsOS walks you through getting your domain from <strong><a href="https://njal.la" target="_blank" style="color: var(--accent-color);">Njal.la</a></strong> and connecting your services.
|
||
To make your services available outside your home, you’ll complete one router task: forward ports <strong>80</strong> and <strong>443</strong> to this computer.
|
||
</p>
|
||
</div>
|
||
<div class="onboarding-card" id="step-3-body">
|
||
<p class="onboarding-loading">Loading service information…</p>
|
||
</div>
|
||
<div id="step-3-status" class="onboarding-save-status"></div>
|
||
<div class="onboarding-footer">
|
||
<button class="btn btn-close-modal onboarding-btn-back" data-prev="2">← Back</button>
|
||
<button class="btn btn-primary onboarding-btn-next" id="step-3-next">
|
||
Save & Continue →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── Step 4: Complete ── -->
|
||
<div class="onboarding-panel" id="step-4" style="display:none">
|
||
<div class="onboarding-hero">
|
||
<div class="onboarding-logo">✅</div>
|
||
<h1 class="onboarding-title">Your Sovran_SystemsOS is Ready!</h1>
|
||
<p class="onboarding-subtitle">Setup complete</p>
|
||
</div>
|
||
<div class="onboarding-card">
|
||
<p class="onboarding-body-text">
|
||
All configuration steps are done. Head to the main Hub dashboard to
|
||
monitor your services, manage credentials, and make changes at any time.
|
||
</p>
|
||
<ul class="onboarding-checklist" id="onboarding-checklist">
|
||
<li>✅ Timezone & locale configured</li>
|
||
<li>✅ Domain configuration saved</li>
|
||
</ul>
|
||
</div>
|
||
<div class="onboarding-footer">
|
||
<button class="btn btn-close-modal onboarding-btn-back" data-prev="3">← Back</button>
|
||
<button class="btn btn-primary" id="step-4-finish">
|
||
Go to Dashboard →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /panel-wrap -->
|
||
</div><!-- /shell -->
|
||
|
||
<script src="/static/js/domain-prereqs.js?v={{ asset_version }}"></script>
|
||
<script src="/static/onboarding.js?v={{ onboarding_js_hash }}"></script>
|
||
</body>
|
||
</html>
|