feat: search, presets, dependency warnings, port conflicts, URL state, drag-drop analyser, diff view, auth + community gallery API (PostgreSQL), professional UI overhaul

This commit is contained in:
2026-08-03 23:39:15 +01:00
parent 341700ddac
commit 9a98985d3e
7 changed files with 837 additions and 88 deletions

View File

@@ -61,6 +61,20 @@
<!-- Step 2: App Selection -->
<section class="step" id="step-apps">
<h2>2. Select Apps</h2>
<div class="search-bar">
<input type="text" id="app-search" placeholder="🔍 Search 186 apps..." />
</div>
<div class="presets-bar">
<span class="presets-label">Quick stacks:</span>
<button class="preset-btn" data-preset="media">🎬 Media Server</button>
<button class="preset-btn" data-preset="arr">📡 Full Arr Suite</button>
<button class="preset-btn" data-preset="ai">🤖 AI Lab</button>
<button class="preset-btn" data-preset="dev">💻 Dev Stack</button>
<button class="preset-btn" data-preset="homelab">🏠 Homelab Essentials</button>
<button class="preset-btn" data-preset="gaming">🎮 Game Servers</button>
</div>
<div id="dependency-warnings" class="dependency-warnings"></div>
<div id="port-conflicts" class="port-conflicts"></div>
<div id="app-grid"></div>
</section>
@@ -120,16 +134,27 @@
<!-- Compose Analyser Modal/Section -->
<section class="step" id="step-analyser" style="display:none;">
<h2>🔍 Analyse Existing Docker Compose</h2>
<p class="analyser-desc">Paste your existing docker-compose.yml below to get security, performance, and best-practice recommendations.</p>
<textarea id="analyser-input" class="analyser-textarea" placeholder="Paste your docker-compose.yml here..."></textarea>
<p class="analyser-desc">Paste or drop your docker-compose.yml below to get security, performance, and best-practice recommendations.</p>
<div class="drop-zone" id="drop-zone">
<textarea id="analyser-input" class="analyser-textarea" placeholder="Paste your docker-compose.yml here, or drag & drop a file..."></textarea>
<div class="drop-overlay" id="drop-overlay">📁 Drop docker-compose.yml here</div>
</div>
<button class="analyse-btn" id="analyse-btn">Analyse</button>
<div id="analyser-results" class="analyser-results"></div>
<button class="analyse-btn fixed-btn hidden" id="show-fixed-btn">✨ Show Fixed Compose</button>
<div class="view-toggle hidden" id="view-toggle">
<button class="view-btn active" data-view="fixed">Fixed</button>
<button class="view-btn" data-view="diff">Diff</button>
</div>
<div id="fixed-preview" class="fixed-preview hidden">
<h3>Improved docker-compose.yml</h3>
<pre class="preview-code"><code id="fixed-content"></code></pre>
<button class="download-btn" id="download-fixed-btn" style="margin-top:1rem;">📦 Download Fixed Compose</button>
</div>
<div id="diff-preview" class="fixed-preview hidden">
<h3>Changes (Before → After)</h3>
<pre class="preview-code diff-code"><code id="diff-content"></code></pre>
</div>
</section>
<script type="module" src="/src/main.js"></script>