feat: community gallery UI (auth modals, stack cards, star/use, share), search, presets, dependency/port warnings

index.html

@@ -17,7 +17,11 @@
     <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>
     </nav>
+    <div class="auth-bar" id="auth-bar">
+      <button class="auth-btn" id="auth-btn">Sign In</button>
+    </div>
   </header>
 
   <main class="container">
@@ -131,6 +135,51 @@
     <p>StackPilot — No server required. Everything runs in your browser.</p>
   </footer>
 
+  <!-- Community Gallery -->
+  <section class="step gallery-section" id="step-gallery" style="display:none;">
+    <h2>🌐 Community Stacks</h2>
+    <div class="gallery-controls">
+      <input type="text" id="gallery-search" class="gallery-search" placeholder="Search community stacks..." />
+      <select id="gallery-sort" class="gallery-sort">
+        <option value="stars">⭐ Most Starred</option>
+        <option value="downloads">📦 Most Downloaded</option>
+        <option value="recent">🕐 Most Recent</option>
+      </select>
+      <button class="analyse-btn" id="share-stack-btn" style="margin:0;padding:0.5rem 1.2rem;font-size:0.85rem;">+ Share My Stack</button>
+    </div>
+    <div id="gallery-grid" class="gallery-grid"></div>
+  </section>
+
+  <!-- Auth Modal -->
+  <div class="modal-overlay hidden" id="auth-modal">
+    <div class="modal">
+      <button class="modal-close" id="modal-close">&times;</button>
+      <h2 id="auth-modal-title">Sign In</h2>
+      <form id="auth-form" class="auth-form">
+        <input type="text" id="auth-username" placeholder="Username" class="auth-input" style="display:none;" />
+        <input type="email" id="auth-email" placeholder="Email" class="auth-input" />
+        <input type="password" id="auth-password" placeholder="Password" class="auth-input" />
+        <button type="submit" class="analyse-btn" style="width:100%;margin:0;">Sign In</button>
+        <p class="auth-toggle">Don't have an account? <a href="#" id="auth-switch">Sign Up</a></p>
+        <p class="auth-error hidden" id="auth-error"></p>
+      </form>
+    </div>
+  </div>
+
+  <!-- Share Stack Modal -->
+  <div class="modal-overlay hidden" id="share-modal">
+    <div class="modal">
+      <button class="modal-close" id="share-modal-close">&times;</button>
+      <h2>Share Your Stack</h2>
+      <form id="share-form" class="auth-form">
+        <input type="text" id="share-name" placeholder="Stack name (e.g. My Media Setup)" class="auth-input" required />
+        <textarea id="share-desc" placeholder="Description (optional)" class="auth-input" style="min-height:80px;resize:vertical;"></textarea>
+        <input type="text" id="share-tags" placeholder="Tags (comma-separated, e.g. media, arr, beginner)" class="auth-input" />
+        <button type="submit" class="analyse-btn" style="width:100%;margin:0;">🚀 Share Stack</button>
+      </form>
+    </div>
+  </div>
+
   <!-- Compose Analyser Modal/Section -->
   <section class="step" id="step-analyser" style="display:none;">
     <h2>🔍 Analyse Existing Docker Compose</h2>