Widok - koncept wyświetlania menu.

public/assets/css/stolik3_api.css

@@ -1,5 +1,6 @@
 :root {
-      --primary: #e2b07e; /* Ciepłe złoto/miedź */
+  --primary: #e2b07e;
+  /* Ciepłe złoto/miedź */
   --bg: #0f0f11;
   --surface: #1c1c1f;
   --surface-light: #2c2c2e;
@@ -10,7 +11,10 @@
   --radius: 20px;
 }
 
-    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
+* {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+}
 
 body {
   margin: 0;
@@ -52,7 +56,11 @@
   color: var(--primary);
 }
 
-    .loader-msg { color: var(--text-muted); font-size: 14px; min-height: 20px; }
+.loader-msg {
+  color: var(--text-muted);
+  font-size: 14px;
+  min-height: 20px;
+}
 
 /* --- MAIN LAYOUT --- */
 .container {
@@ -156,10 +164,18 @@
   border-left: 4px solid var(--surface-light);
 }
 
-    .item-card.ready { border-left-color: var(--success); }
+.item-card.ready {
-    .item-card.archived { opacity: 0.82; }
+  border-left-color: var(--success);
+}
+
+.item-card.archived {
+  opacity: 0.82;
+}
+
+.history-section {
+  margin-top: 26px;
+}
 
-    .history-section { margin-top: 26px; }
 .history-note {
   font-size: 12px;
   color: var(--text-muted);
@@ -167,9 +183,20 @@
   line-height: 1.45;
 }
 
-    .item-info { display: flex; flex-direction: column; }
+.item-info {
-    .item-name { font-weight: 600; font-size: 16px; }
+  display: flex;
-    .item-meta { font-size: 12px; color: var(--text-muted); }
+  flex-direction: column;
+}
+
+.item-name {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.item-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+}
 
 .item-qty {
   background: var(--surface-light);
@@ -185,12 +212,25 @@
   padding: 40px 20px;
 }
 
-    .empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
+.empty-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
 
 /* --- ANIMATIONS --- */
-    @keyframes spin { to { transform: rotate(360deg); } }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 
-    .hidden { opacity: 0; visibility: hidden; pointer-events: none; display: none; }
+.hidden {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  display: none;
+}
 
 .meta-footer {
   font-size: 11px;
@@ -351,8 +391,15 @@
 }
 
 @keyframes fadeInStep {
-      from { opacity: 0; transform: translateX(10px); }
+  from {
-      to { opacity: 1; transform: translateX(0); }
+    opacity: 0;
+    transform: translateX(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 .option-grid {
@@ -478,6 +525,7 @@
   transform: translateX(-50%) translateY(0);
   opacity: 1;
 }
+
 /* --- KITCHEN ANIMATION --- */
 .kitchen-anim {
   position: relative;
@@ -487,12 +535,14 @@
   align-items: center;
   justify-content: center;
 }
+
 .pan-emoji {
   font-size: 30px;
   z-index: 2;
   animation: panToss 1.5s infinite ease-in-out;
   transform-origin: 70% 70%;
 }
+
 .fire-emoji {
   position: absolute;
   bottom: -5px;
@@ -501,14 +551,33 @@
   z-index: 1;
   animation: fireFlicker 0.4s infinite alternate;
 }
+
 @keyframes panToss {
-      0%, 100% { transform: rotate(0deg) translateY(0); }
+
-      50% { transform: rotate(-20deg) translateY(-8px); }
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
   }
+
+  50% {
+    transform: rotate(-20deg) translateY(-8px);
+  }
+}
+
 @keyframes fireFlicker {
-      0% { transform: scale(1) rotate(-3deg); opacity: 0.8; filter: drop-shadow(0 0 5px var(--accent)); }
+  0% {
-      100% { transform: scale(1.1) rotate(3deg); opacity: 1; filter: drop-shadow(0 0 10px var(--accent)); }
+    transform: scale(1) rotate(-3deg);
+    opacity: 0.8;
+    filter: drop-shadow(0 0 5px var(--accent));
   }
+
+  100% {
+    transform: scale(1.1) rotate(3deg);
+    opacity: 1;
+    filter: drop-shadow(0 0 10px var(--accent));
+  }
+}
+
 /* Wariant 2: Uciekająca Kura */
 .anim-run {
   position: relative;
@@ -518,23 +587,37 @@
   display: flex;
   align-items: center;
 }
+
 .anim-run .chicken {
   position: absolute;
   font-size: 24px;
   animation: runLeft 3s infinite linear;
 }
+
 .anim-run .chef {
   position: absolute;
   font-size: 28px;
   animation: runLeftChef 3s infinite linear;
 }
+
 @keyframes runLeft {
-  0% { transform: translateX(100px); }
+  0% {
-  100% { transform: translateX(-40px); }
+    transform: translateX(100px);
   }
+
+  100% {
+    transform: translateX(-40px);
+  }
+}
+
 @keyframes runLeftChef {
-  0% { transform: translateX(140px); }
+  0% {
-  100% { transform: translateX(0px); }
+    transform: translateX(140px);
+  }
+
+  100% {
+    transform: translateX(0px);
+  }
 }
 
 /* Wariant 3: Kura w garnku */
@@ -546,10 +629,12 @@
   align-items: flex-end;
   justify-content: center;
 }
+
 .anim-pot .pot-emoji {
   font-size: 32px;
   z-index: 2;
 }
+
 .anim-pot .chicken-head {
   position: absolute;
   font-size: 24px;
@@ -557,9 +642,21 @@
   z-index: 1;
   animation: peekaboo 4s infinite ease-in-out;
 }
+
 @keyframes peekaboo {
-  0%, 100%, 80% { transform: translateY(15px); opacity: 0; }
+
-  30%, 50% { transform: translateY(0px); opacity: 1; }
+  0%,
+  100%,
+  80% {
+    transform: translateY(15px);
+    opacity: 0;
+  }
+
+  30%,
+  50% {
+    transform: translateY(0px);
+    opacity: 1;
+  }
 }
 
 /* Wariant 4: Latająca pizza */
@@ -571,10 +668,12 @@
   align-items: center;
   justify-content: center;
 }
+
 .anim-pizza .chef-pizza {
   font-size: 28px;
   z-index: 1;
 }
+
 .anim-pizza .pizza-emoji {
   position: absolute;
   font-size: 20px;
@@ -583,9 +682,17 @@
   z-index: 2;
   animation: spinPizza 2s infinite ease-in-out;
 }
+
 @keyframes spinPizza {
-  0%, 100% { transform: translateY(0) rotate(0deg); }
+
-  50% { transform: translateY(-15px) rotate(360deg); }
+  0%,
+  100% {
+    transform: translateY(0) rotate(0deg);
+  }
+
+  50% {
+    transform: translateY(-15px) rotate(360deg);
+  }
 }
 
 /* Wariant 5: Nerwowa świnka */
@@ -597,10 +704,12 @@
   align-items: center;
   justify-content: center;
 }
+
 .anim-pig .pig-emoji {
   font-size: 28px;
   animation: nervous 0.2s infinite;
 }
+
 .anim-pig .sweat-emoji {
   position: absolute;
   font-size: 16px;
@@ -608,24 +717,50 @@
   right: 15px;
   animation: sweatDrop 1s infinite;
 }
+
 .anim-pig .knife-emoji {
   position: absolute;
   font-size: 20px;
   right: -10px;
   animation: knifeStab 2s infinite ease-in-out;
 }
+
 @keyframes nervous {
-  0%, 100% { transform: translateX(0); }
+
-  50% { transform: translateX(2px); }
+  0%,
+  100% {
+    transform: translateX(0);
   }
+
+  50% {
+    transform: translateX(2px);
+  }
+}
+
 @keyframes sweatDrop {
-  0% { transform: translateY(0); opacity: 1; }
+  0% {
-  100% { transform: translateY(10px); opacity: 0; }
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateY(10px);
+    opacity: 0;
   }
 }
+
 @keyframes knifeStab {
-  0%, 100% { transform: translateX(10px); opacity: 0; }
+
-  50% { transform: translateX(0px); opacity: 1; }
+  0%,
+  100% {
+    transform: translateX(10px);
+    opacity: 0;
+  }
+
+  50% {
+    transform: translateX(0px);
+    opacity: 1;
+  }
 }
 
 /* --- BOTTOM NAVIGATION BAR --- */
@@ -683,12 +818,18 @@
 .nav-item.action-call {
   color: #3b82f6;
 }
-.nav-item.action-call .nav-icon { filter: grayscale(0) opacity(1); }
+
+.nav-item.action-call .nav-icon {
+  filter: grayscale(0) opacity(1);
+}
 
 .nav-item.action-bill {
   color: #10b981;
 }
-.nav-item.action-bill .nav-icon { filter: grayscale(0) opacity(1); }
+
+.nav-item.action-bill .nav-icon {
+  filter: grayscale(0) opacity(1);
+}
 
 .nav-item:active .nav-icon {
   transform: scale(0.9);
@@ -703,3 +844,162 @@
 .view-section.active {
   display: block;
 }
+
+/* --- MENU STYLES --- */
+.menu-search-container {
+  padding: 10px 0;
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: var(--bg);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  margin-bottom: 10px;
+}
+
+#menuSearchInput {
+  width: 100%;
+  background: var(--surface);
+  border: 1px solid var(--surface-light);
+  color: var(--text-main);
+  padding: 12px 16px;
+  border-radius: 12px;
+  font-family: inherit;
+  font-size: 15px;
+  transition: all 0.2s;
+}
+
+#menuSearchInput:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(226, 176, 126, 0.2);
+}
+
+.menu-categories-nav {
+  padding: 0 0 16px;
+  overflow-x: auto;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.menu-categories-nav::-webkit-scrollbar {
+  display: none;
+}
+
+.menu-categories-nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  gap: 12px;
+}
+
+.menu-categories-nav li a {
+  display: inline-block;
+  padding: 8px 16px;
+  background: var(--surface-light);
+  color: var(--text-muted);
+  text-decoration: none;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 600;
+  transition: all 0.2s;
+  border: 1px solid transparent;
+}
+
+.menu-categories-nav li a.active,
+.menu-categories-nav li a:active {
+  background: rgba(226, 176, 126, 0.15);
+  color: var(--primary);
+  border-color: rgba(226, 176, 126, 0.3);
+}
+
+.restaurant-menu-scroll {
+  padding: 16px 0;
+}
+
+.rm-category {
+  margin-bottom: 30px;
+}
+
+.restaurant-menu-category {
+  font-family: 'Playfair Display', serif;
+  font-size: 22px;
+  color: var(--primary);
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(226, 176, 126, 0.2);
+}
+
+.rmc-positions {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.rmc-position {
+  display: flex;
+  gap: 16px;
+  background: var(--surface);
+  border-radius: 16px;
+  padding: 12px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.03);
+  transition: transform 0.2s;
+  cursor: pointer;
+}
+
+.rmc-position:active {
+  transform: scale(0.98);
+}
+
+.rmc-image {
+  width: 90px;
+  height: 90px;
+  border-radius: 12px;
+  object-fit: cover;
+  background: var(--surface-light);
+  flex-shrink: 0;
+}
+
+.rmc-title {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.rmc-title h4 {
+  margin: 0 0 6px 0;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--text-main);
+}
+
+.rmc-title h4 span {
+  display: block;
+  font-weight: 400;
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+
+.rmc-other {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  min-width: 60px;
+}
+
+.rmc-other span {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--primary);
+}
+
+.rmc-other span::after {
+  content: " zł";
+  font-size: 12px;
+  font-weight: 400;
+}

public/assets/js/stolik3_api.js

@@ -665,19 +665,79 @@ window.switchTab = function (tabName) {
   document.getElementById('navStatus').classList.remove('active');
   document.getElementById('navMenu').classList.remove('active');
 
+  const header = document.getElementById('mainHeader');
+  const greetingBanner = document.getElementById('greetingBanner');
+
   // 2. Nadaj .active wybranym elementom
   if (tabName === 'status') {
     const view = document.getElementById('statusView');
     view.classList.remove('hidden');
     view.classList.add('active');
     document.getElementById('navStatus').classList.add('active');
+    if (header) header.style.display = '';
+    // Show greeting banner only if it was rendered initially or has content
+    if (greetingBanner && greetingBanner.innerHTML.trim() !== '') greetingBanner.style.display = '';
   }
   else if (tabName === 'menu') {
     const view = document.getElementById('menuView');
     view.classList.remove('hidden');
     view.classList.add('active');
     document.getElementById('navMenu').classList.add('active');
+    if (header) header.style.display = 'none';
+    if (greetingBanner) greetingBanner.style.display = 'none';
   }
+  window.scrollTo(0, 0);
+};
+
+// --- MENU LOGIC ---
+window.filterMenu = function() {
+  const query = document.getElementById('menuSearchInput').value.toLowerCase();
+  const categories = document.querySelectorAll('.rm-category');
+  
+  categories.forEach(category => {
+    let hasVisibleItems = false;
+    const items = category.querySelectorAll('.rmc-position');
+    
+    items.forEach(item => {
+      const title = item.querySelector('.rmc-title h4').textContent.toLowerCase();
+      if (title.includes(query)) {
+        item.style.display = '';
+        hasVisibleItems = true;
+      } else {
+        item.style.display = 'none';
+      }
+    });
+    
+    if (hasVisibleItems) {
+      category.style.display = '';
+    } else {
+      category.style.display = 'none';
+    }
+  });
+};
+
+window.showCategory = function(categoryId) {
+  document.querySelectorAll('.menu-categories-nav a').forEach(a => a.classList.remove('active'));
+  
+  const clickedLink = document.querySelector(`.menu-categories-nav a[data-category-badge="${categoryId}"]`);
+  if (clickedLink) {
+    clickedLink.classList.add('active');
+    clickedLink.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+  }
+  
+  const categories = document.querySelectorAll('.rm-category');
+  categories.forEach(cat => {
+    if (categoryId === 0) {
+      cat.style.display = '';
+    } else {
+      const catId = parseInt(cat.getAttribute('data-cat-id'), 10);
+      if (catId === categoryId) {
+        cat.style.display = '';
+      } else {
+        cat.style.display = 'none';
+      }
+    }
+  });
 };
 
 window.selectPayment = function (method) {

public/stolik3_api.html

@@ -24,7 +24,7 @@
   </div>
 
   <div class="container">
-    <header>
+    <header id="mainHeader">
       <h1 class="logo-text">Karczma Biesiada</h1>
       <div id="tableLabel" class="table-badge">Wybierz stolik</div>
     </header>
@@ -80,13 +80,91 @@
       </div> <!-- Koniec statusView -->
 
       <div id="menuView" class="view-section hidden">
-        <section class="items-container" style="margin-top: 10px;">
+        <div class="menu-search-container">
-          <h3>Menu Restauracji</h3>
+          <input type="text" id="menuSearchInput" placeholder="Szukaj dania..." oninput="filterMenu()" />
-          <div class="empty-state">
+        </div>
-            <div class="empty-icon">📖</div>
+
-            <p style="color: var(--text-muted)">Nasza wspaniała karta dań pojawi się tutaj niebawem.</p>
+        <div class="restaurant-menu-container">
+          <nav class="menu-categories-nav">
+            <ul>
+                <li><a href="#" class="active" data-category-badge="0" onclick="showCategory(0)">Wszystko</a></li>
+                <li><a href="#" onclick="showCategory(1)" data-category-badge="1">Przystawki</a></li>
+                <li><a href="#" onclick="showCategory(2)" data-category-badge="2">Zupy</a></li>
+                <li><a href="#" onclick="showCategory(3)" data-category-badge="3">Dania główne</a></li>
+                <li><a href="#" onclick="showCategory(4)" data-category-badge="4">Dania swojskie</a></li>
+                <li><a href="#" onclick="showCategory(5)" data-category-badge="5">Ryby</a></li>
+                <li><a href="#" onclick="showCategory(7)" data-category-badge="7">Sałatki</a></li>
+                <li><a href="#" onclick="showCategory(6)" data-category-badge="6">Makarony</a></li>
+                <li><a href="#" onclick="showCategory(9)" data-category-badge="9">Dla dzieci</a></li>
+                <li><a href="#" onclick="showCategory(8)" data-category-badge="8">Dodatki</a></li>
+                <li><a href="#" onclick="showCategory(10)" data-category-badge="10">Desery</a></li>
+                <li><a href="#" onclick="showCategory(11)" data-category-badge="11">Napoje</a></li>
+            </ul>
+          </nav>
+
+          <div class="restaurant-menu-scroll">
+            <div class="rm-category" data-cat-id="1">
+              <div class="restaurant-menu-category">Na dobry początek</div>
+              <div class="rmc-positions">
+                <div class="rmc-position" data-position="331" data-category-id="1">
+                  <img class="rmc-image" src="https://www.karczmabiesiada.eu/cache/images/files/potrawy/400_320_crop/losos-na-placku.webp" alt="" loading="lazy">
+                  <div class="rmc-title">
+                    <h4>Wędzony łosoś na chrupkim placku ziemniaczanym<span>ze śmietaną i sosem a'la duńskim</span></h4>
+                  </div>
+                  <div class="rmc-other"><span>31,00</span></div>
+                </div>
+                <div class="rmc-position" data-position="11" data-category-id="1">
+                  <img class="rmc-image" src="https://www.karczmabiesiada.eu/cache/images/files/menu/400_320_crop/smalczyk.webp" alt="" loading="lazy">
+                  <div class="rmc-title">
+                    <h4>Skiśnięte ogórki i smolec swojej roboty z pieczywem<span></span></h4>
+                  </div>
+                  <div class="rmc-other"><span>28,00</span></div>
+                </div>
+                <div class="rmc-position" data-position="12" data-category-id="1">
+                  <img class="rmc-image" src="https://www.karczmabiesiada.eu/cache/images/files/potrawy/400_320_crop/przystawki-Tatar-siekany.webp" alt="" loading="lazy">
+                  <div class="rmc-title">
+                    <h4>Tatar siekany z wołowiny z piklami i pieczywem<span></span></h4>
+                  </div>
+                  <div class="rmc-other"><span>62,00</span></div>
+                </div>
+              </div>
+            </div>
+
+            <div class="rm-category" data-cat-id="2">
+              <div class="restaurant-menu-category">Polywki</div>
+              <div class="rmc-positions">
+                <div class="rmc-position" data-position="18" data-category-id="2">
+                  <img class="rmc-image" src="https://www.karczmabiesiada.eu/cache/images/files/wielkanocne-2020/400_320_crop/Karczma-biesiada-stalowa-wola-dania-na-wielkanoc.webp" alt="" loading="lazy">
+                  <div class="rmc-title">
+                    <h4>Żurek na wędzonce z jajkiem w chlebie<span></span></h4>
+                  </div>
+                  <div class="rmc-other"><span>31,00</span></div>
+                </div>
+                <div class="rmc-position" data-position="22" data-category-id="2">
+                  <img class="rmc-image" src="https://www.karczmabiesiada.eu/cache/images/files/potrawy/400_320_crop/rosol-z-makaronem.webp" alt="" loading="lazy">
+                  <div class="rmc-title">
+                    <h4>Rosół wiejski z trzech rodzajów mięs z makaronem<span></span></h4>
+                  </div>
+                  <div class="rmc-other"><span>19,00</span></div>
+                </div>
+              </div>
+            </div>
+
+            <div class="rm-category" data-cat-id="3">
+              <div class="restaurant-menu-category">Co przez gospodarza lubiane</div>
+              <div class="rmc-positions">
+                <div class="rmc-position" data-position="363" data-category-id="3">
+                  <img class="rmc-image" src="https://www.karczmabiesiada.eu/cache/images/files/aktualnosci/nowe-smaki-lato-2024/400_320_crop/pyszne-jedzenie-karczma-biesiada-6.webp" alt="" loading="lazy">
+                  <div class="rmc-title">
+                    <h4>Schab po zbóju z ogórkiem kiszonym podany z białym sosem i ziemniakami opiekanymi<span></span></h4>
+                  </div>
+                  <div class="rmc-other"><span>53,00</span></div>
+                </div>
+              </div>
+            </div>
+
+          </div>
         </div>
-        </section>
       </div> <!-- Koniec menuView -->
 
     </main>