148 lines
6.8 KiB
HTML
148 lines
6.8 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">
|
|
<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">
|
|
|
|
<!-- ── 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: Domain Configuration ── -->
|
|
<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">Domain Configuration</h2>
|
|
<p class="onboarding-step-desc">
|
|
Sovran_SystemsOS uses <strong><a href="https://njal.la" target="_blank" style="color: var(--accent-color);">Njal.la</a></strong> for domains and Dynamic DNS.
|
|
First, create an account at <strong>Njal.la</strong> and purchase a new domain, or create a subdomain from a domain you already own. Tip: Subdomains are free to create — you only need to purchase one domain, and you can add as many subdomains as you need at no extra cost.
|
|
Then, in the Njal.la web interface, create a <strong>Dynamic</strong> record pointing to this machine's external IP address (shown below).
|
|
Finally, paste the DDNS curl command from your Njal.la dashboard for each service below.
|
|
</p>
|
|
</div>
|
|
<div class="onboarding-card onboarding-card--scroll" id="step-2-body">
|
|
<p class="onboarding-loading">Loading service information…</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: Port Forwarding ── -->
|
|
<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">Port Forwarding Check</h2>
|
|
<p class="onboarding-step-desc">
|
|
Forward these ports on your router to this machine. Each port only needs to be opened once — they are shared across all your services.
|
|
<strong>Ports 80 and 443 must be open for SSL certificates to work.</strong>
|
|
</p>
|
|
</div>
|
|
<div class="onboarding-card onboarding-card--ports" id="step-3-body">
|
|
<p class="onboarding-loading">Checking ports…</p>
|
|
</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">
|
|
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>✅ Domain configuration saved</li>
|
|
<li>✅ Port forwarding reviewed</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/onboarding.js?v={{ onboarding_js_hash }}"></script>
|
|
</body>
|
|
</html> |