Admin/stackpilot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: onboarding wizard, PWA support, Oracle Cloud free tier deploy, mode nav update

Browse Source
This commit is contained in:
Paul Bailey
2026-08-03 23:56:42 +01:00
parent 0c0daf947e
commit ffc9ccd77e
8 changed files with 303 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
index.html
View File

@@ -9,6 +9,9 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/src/style.css" />
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#6366f1" />
<link rel="apple-touch-icon" href="/icon-192.png" />
</head>
<body>
<header class="header">
@@ -16,8 +19,9 @@
<p class="subtitle">Build your self-hosted Docker stack in minutes</p>
<nav class="mode-nav">
<button class="mode-btn active" data-mode="builder">Stack Builder</button>
<button class="mode-btn" data-mode="analyser">Compose Analyser</button>
<button class="mode-btn" data-mode="gallery">Community Stacks</button>
<button class="mode-btn" data-mode="wizard">Wizard</button>
<button class="mode-btn" data-mode="analyser">Analyser</button>
<button class="mode-btn" data-mode="gallery">Community</button>
</nav>
<div class="auth-bar" id="auth-bar">
<button class="auth-btn" id="auth-btn">Sign In</button>
@@ -125,6 +129,7 @@
<button class="tab active" data-tab="compose">docker-compose.yml</button>
<button class="tab" data-tab="env">.env</button>
<button class="tab" data-tab="setup">setup.sh</button>
<button class="tab" data-tab="oracle">☁️ Oracle Cloud</button>
</div>
<pre class="preview-code"><code id="preview-content">Select apps above to see preview...</code></pre>
</div>
@@ -181,6 +186,36 @@
</div>
</div>
<!-- Onboarding Wizard -->
<section class="step wizard-section" id="step-wizard" style="display:none;">
<h2>🧙 Stack Wizard</h2>
<p class="wizard-desc">Tell us what you want to do, and we'll pick the right apps for you.</p>
<div class="wizard-goals" id="wizard-goals">
<label class="wizard-goal"><input type="checkbox" value="movies" /><span>🎬 Watch movies & TV shows</span></label>
<label class="wizard-goal"><input type="checkbox" value="music" /><span>🎵 Stream my music collection</span></label>
<label class="wizard-goal"><input type="checkbox" value="books" /><span>📚 Read ebooks & comics</span></label>
<label class="wizard-goal"><input type="checkbox" value="photos" /><span>📷 Manage & share photos</span></label>
<label class="wizard-goal"><input type="checkbox" value="downloads" /><span>⬇️ Automate downloads</span></label>
<label class="wizard-goal"><input type="checkbox" value="ai" /><span>🤖 Run AI models locally</span></label>
<label class="wizard-goal"><input type="checkbox" value="gaming" /><span>🎮 Host game servers</span></label>
<label class="wizard-goal"><input type="checkbox" value="smart-home" /><span>🏠 Smart home automation</span></label>
<label class="wizard-goal"><input type="checkbox" value="development" /><span>💻 Self-hosted dev tools (Git, CI/CD)</span></label>
<label class="wizard-goal"><input type="checkbox" value="cloud-storage" /><span>☁️ Cloud storage & file sync</span></label>
<label class="wizard-goal"><input type="checkbox" value="privacy" /><span>🕵️ Privacy tools (VPN, ad blocking, private search)</span></label>
<label class="wizard-goal"><input type="checkbox" value="monitoring" /><span>📊 Monitor my server & services</span></label>
<label class="wizard-goal"><input type="checkbox" value="remote-access" /><span>🌐 Access from outside my network</span></label>
<label class="wizard-goal"><input type="checkbox" value="team-chat" /><span>💬 Team communication</span></label>
<label class="wizard-goal"><input type="checkbox" value="notes" /><span>📝 Notes & knowledge base</span></label>
<label class="wizard-goal"><input type="checkbox" value="finance" /><span>💰 Personal finance tracking</span></label>
</div>
<button class="analyse-btn" id="wizard-build-btn">🚀 Build My Stack</button>
<div id="wizard-result" class="wizard-result hidden">
<h3>Your recommended stack:</h3>
<div id="wizard-apps" class="wizard-apps"></div>
<button class="analyse-btn" id="wizard-use-btn" style="margin-top:1rem;">Use This Stack →</button>
</div>
</section>
<!-- Compose Analyser Modal/Section -->
<section class="step" id="step-analyser" style="display:none;">
<h2>🔍 Analyse Existing Docker Compose</h2>
@@ -208,5 +243,6 @@
</section>
<script type="module" src="/src/main.js"></script>
<script>if('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js');</script>
</body>
</html>