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(109, 191, 139, 0.10); border:1.5px solid rgba(109, 191, 139, 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(229, 165, 10, 0.1); border:1px solid rgba(229, 165, 10, 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>
|