feat(ui): Volltextsuche und horizontale Swipebar für Warengruppen integriert

public/index.html

@@ -6,7 +6,7 @@
   <title>GETRÄNKEKARTE</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
   <style>
     :root {
       --bg: #090b10;
@@ -62,12 +62,12 @@
       z-index: 1;
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: 20px;
     }
 
     header {
       text-align: center;
-      padding: 20px 0 10px;
+      padding: 20px 0 6px;
     }
 
     .badge {
@@ -104,6 +104,101 @@
       line-height: 1.5;
     }
 
+    /* Volltextsuche */
+    .search-wrapper {
+      position: relative;
+      width: 100%;
+    }
+
+    .search-input {
+      width: 100%;
+      padding: 14px 42px 14px 44px;
+      background: rgba(22, 27, 34, 0.85);
+      border: 1px solid var(--card-border);
+      border-radius: 14px;
+      color: #fff;
+      font-size: 14px;
+      outline: none;
+      backdrop-filter: blur(16px);
+      transition: border-color 0.2s, box-shadow 0.2s;
+      font-family: inherit;
+    }
+
+    .search-input:focus {
+      border-color: var(--primary);
+      box-shadow: 0 0 16px rgba(245, 158, 11, 0.2);
+    }
+
+    .search-icon {
+      position: absolute;
+      left: 16px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 16px;
+      color: var(--text-muted);
+      pointer-events: none;
+    }
+
+    .clear-search {
+      position: absolute;
+      right: 14px;
+      top: 50%;
+      transform: translateY(-50%);
+      background: none;
+      border: none;
+      color: var(--text-muted);
+      font-size: 16px;
+      cursor: pointer;
+      display: none;
+    }
+
+    /* Swipebar Kategorien */
+    .category-swipe-wrapper {
+      position: relative;
+      margin: 0 -16px;
+      padding: 0 16px;
+    }
+
+    .category-swipe {
+      display: flex;
+      gap: 8px;
+      overflow-x: auto;
+      padding-bottom: 4px;
+      scrollbar-width: none; /* Firefox */
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .category-swipe::-webkit-scrollbar {
+      display: none; /* Chrome, Safari */
+    }
+
+    .category-pill {
+      flex: 0 0 auto;
+      padding: 8px 16px;
+      border-radius: 999px;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text-muted);
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid var(--card-border);
+      cursor: pointer;
+      white-space: nowrap;
+      transition: all 0.2s ease;
+      user-select: none;
+    }
+
+    .category-pill:hover {
+      color: #fff;
+      border-color: rgba(255, 255, 255, 0.2);
+    }
+
+    .category-pill.active {
+      background: var(--primary);
+      color: #090b10;
+      border-color: var(--primary);
+      box-shadow: 0 0 12px var(--primary-glow);
+    }
+
     .section-title {
       font-family: 'Space Grotesk', sans-serif;
       font-size: 14px;
@@ -114,7 +209,7 @@
       display: flex;
       align-items: center;
       gap: 8px;
-      margin-bottom: 12px;
+      margin: 16px 0 12px;
     }
 
     .section-title::after {
@@ -175,9 +270,16 @@
       line-height: 1.45;
     }
 
-    .loading-spinner {
+    .highlight {
+      background: rgba(245, 158, 11, 0.3);
+      color: #fff;
+      padding: 0 2px;
+      border-radius: 3px;
+    }
+
+    .loading-spinner, .no-results {
       text-align: center;
-      padding: 40px;
+      padding: 40px 20px;
       color: var(--text-muted);
       font-size: 14px;
     }
@@ -209,6 +311,21 @@
       <p>Frisch zubereitete Drinks, Spezialitäten & Erfrischungen</p>
     </header>
 
+    <!-- Volltextsuche -->
+    <div class="search-wrapper">
+      <span class="search-icon">🔍</span>
+      <input type="text" id="search-input" class="search-input" placeholder="Getränk oder Zutat suchen..." autocomplete="off" />
+      <button id="clear-search" class="clear-search">✕</button>
+    </div>
+
+    <!-- Swipebar Warengruppen -->
+    <div class="category-swipe-wrapper">
+      <div id="category-swipe" class="category-swipe">
+        <button class="category-pill active" data-id="all">Alle Artikel</button>
+      </div>
+    </div>
+
+    <!-- Getränkeliste -->
     <div id="menu-container">
       <div class="loading-spinner">Getränkekarte wird geladen...</div>
     </div>
@@ -221,48 +338,130 @@
   </div>
 
   <script>
+    let allCategories = [];
+    let activeCategoryId = 'all';
+    let searchQuery = '';
+
     async function loadMenu() {
       const container = document.getElementById('menu-container');
       try {
         const res = await fetch('/api/menu');
         const data = await res.json();
+        allCategories = data.categories || [];
 
-        if (!data.categories || data.categories.length === 0) {
-          container.innerHTML = `
-            <div class="card" style="text-align:center; padding: 30px;">
-              <p style="color:var(--text-muted); margin-bottom: 12px;">Noch keine Getränke hinterlegt.</p>
-              <a href="/admin" style="color:var(--primary); font-weight:bold; font-size:14px; text-decoration:none;">Zum Admin-Bereich & Sync starten &rarr;</a>
-            </div>
-          `;
-          return;
-        }
-
-        let html = '';
-        for (const cat of data.categories) {
-          html += `
-            <section>
-              <div class="section-title">${cat.name}</div>
-              <div class="menu-grid">
-                ${cat.items.map(item => `
-                  <div class="card">
-                    <div class="card-top">
-                      <div class="card-name">${escapeHtml(item.text1)}</div>
-                      <div class="card-price">${parseFloat(item.preis1).toFixed(2).replace('.', ',')} €</div>
-                    </div>
-                    ${item.text2 ? `<div class="card-ingredients">${escapeHtml(item.text2)}</div>` : ''}
-                  </div>
-                `).join('')}
-              </div>
-            </section>
-          `;
-        }
-
-        container.innerHTML = html;
+        renderCategoryPills();
+        renderMenu();
       } catch (err) {
         container.innerHTML = '<div class="card" style="color:#ef4444; text-align:center;">Fehler beim Laden der Speisekarte.</div>';
       }
     }
 
+    function renderCategoryPills() {
+      const swipeEl = document.getElementById('category-swipe');
+      let pillsHtml = `<button class="category-pill ${activeCategoryId === 'all' ? 'active' : ''}" data-id="all">Alle Artikel</button>`;
+
+      for (const cat of allCategories) {
+        pillsHtml += `<button class="category-pill ${activeCategoryId === cat.id ? 'active' : ''}" data-id="${cat.id}">${escapeHtml(cat.name)}</button>`;
+      }
+
+      swipeEl.innerHTML = pillsHtml;
+
+      swipeEl.querySelectorAll('.category-pill').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+          swipeEl.querySelectorAll('.category-pill').forEach(b => b.classList.remove('active'));
+          btn.classList.add('active');
+          activeCategoryId = btn.dataset.id;
+          btn.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+          renderMenu();
+        });
+      });
+    }
+
+    function renderMenu() {
+      const container = document.getElementById('menu-container');
+      const query = searchQuery.trim().toLowerCase();
+
+      let filteredCategories = allCategories.map(cat => {
+        // Kategorie Filter
+        if (activeCategoryId !== 'all' && cat.id !== activeCategoryId) {
+          return null;
+        }
+
+        // Suche Filter
+        const matchingItems = cat.items.filter(item => {
+          if (!query) return true;
+          const t1 = (item.text1 || '').toLowerCase();
+          const t2 = (item.text2 || '').toLowerCase();
+          return t1.includes(query) || t2.includes(query);
+        });
+
+        if (matchingItems.length === 0) return null;
+
+        return {
+          ...cat,
+          items: matchingItems
+        };
+      }).filter(Boolean);
+
+      if (filteredCategories.length === 0) {
+        container.innerHTML = `
+          <div class="card no-results">
+            <p style="font-size: 16px; margin-bottom: 6px;">Keine Treffer gefunden</p>
+            <p style="font-size: 13px; color: var(--text-muted);">Versuche einen anderen Suchbegriff oder eine andere Kategorie.</p>
+          </div>
+        `;
+        return;
+      }
+
+      let html = '';
+      for (const cat of filteredCategories) {
+        html += `
+          <section>
+            <div class="section-title">${escapeHtml(cat.name)} (${cat.items.length})</div>
+            <div class="menu-grid">
+              ${cat.items.map(item => `
+                <div class="card">
+                  <div class="card-top">
+                    <div class="card-name">${highlightText(item.text1, query)}</div>
+                    <div class="card-price">${parseFloat(item.preis1).toFixed(2).replace('.', ',')} €</div>
+                  </div>
+                  ${item.text2 ? `<div class="card-ingredients">${highlightText(item.text2, query)}</div>` : ''}
+                </div>
+              `).join('')}
+            </div>
+          </section>
+        `;
+      }
+
+      container.innerHTML = html;
+    }
+
+    // Suchfeld Listener
+    const searchInput = document.getElementById('search-input');
+    const clearBtn = document.getElementById('clear-search');
+
+    searchInput.addEventListener('input', (e) => {
+      searchQuery = e.target.value;
+      clearBtn.style.display = searchQuery.length > 0 ? 'block' : 'none';
+      renderMenu();
+    });
+
+    clearBtn.addEventListener('click', () => {
+      searchInput.value = '';
+      searchQuery = '';
+      clearBtn.style.display = 'none';
+      searchInput.focus();
+      renderMenu();
+    });
+
+    function highlightText(text, query) {
+      if (!text) return '';
+      const safe = escapeHtml(text);
+      if (!query) return safe;
+      const regex = new RegExp(`(${escapeRegex(query)})`, 'gi');
+      return safe.replace(regex, '<span class="highlight">$1</span>');
+    }
+
     function escapeHtml(str) {
       if (!str) return '';
       return str.replace(/[&<>'"]/g, tag => ({
@@ -274,6 +473,10 @@
       }[tag] || tag));
     }
 
+    function escapeRegex(string) {
+      return string.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&');
+    }
+
     loadMenu();
   </script>