Wykrywanie i blokada po lokalizacji

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,49 @@
   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;
+}
+
+#geoScreen {
+  position: fixed;
+  inset: 0;
+  z-index: 150;
+  background: var(--bg);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  text-align: center;
+  transition: opacity 0.5s ease, visibility 0.5s;
+}
+
+.geo-icon {
+  font-size: 80px;
+  margin-bottom: 16px;
+  animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-15px); }
+}
+
+.geo-text h2 {
+  font-family: 'Playfair Display', serif;
+  margin: 0 0 12px;
+  color: var(--primary);
+}
+
+.geo-msg {
+  color: var(--text-muted);
+  font-size: 15px;
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
 
 /* --- MAIN LAYOUT --- */
 .container {
@@ -156,10 +202,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 +221,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 +250,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 +429,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 +563,7 @@
   transform: translateX(-50%) translateY(0);
   opacity: 1;
 }
+
 /* --- KITCHEN ANIMATION --- */
 .kitchen-anim {
   position: relative;
@@ -487,12 +573,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 +589,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 +625,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 +667,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 +680,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 +706,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 +720,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 +742,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 +755,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 +856,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 +882,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

@@ -23,6 +23,98 @@ window.selectedAnimationHtml = null;
 
 let tableParam = ""; // Puste, zostanie uzupełnione przez backend
 
+// USER PROFILE LOGIC
+const userProfileKey = "karczma_user_profile";
+const USER_PROFILE_EXPIRE_MS = 180 * 24 * 60 * 60 * 1000; // ~6 months
+
+function initUserProfile() {
+  try {
+    const raw = localStorage.getItem(userProfileKey);
+    let profile = null;
+    if (raw) {
+      profile = JSON.parse(raw);
+    }
+
+    const now = Date.now();
+
+    // Check if profile exists and is valid
+    if (profile) {
+      if (profile.declined) {
+        // User declined in the past, don't ask again.
+        return;
+      }
+
+      // If expired, maybe we want to ask again or we could just keep it if they didn't decline.
+      // The user said: "trzymamy przez wiele miesięcy (odnawiamy datę przy każdej wizycie)"
+      if (now - profile.lastVisit > USER_PROFILE_EXPIRE_MS) {
+        // Profile expired. Ask again.
+        showNameDialog();
+      } else {
+        // Profile valid, renew date and show greeting
+        profile.lastVisit = now;
+        localStorage.setItem(userProfileKey, JSON.stringify(profile));
+        showGreeting(profile.name, profile.firstVisit || profile.lastVisit);
+      }
+    } else {
+      // No profile, ask for name
+      showNameDialog();
+    }
+  } catch (err) {
+    // If error parsing, ask again
+    showNameDialog();
+  }
+}
+
+function showNameDialog() {
+  const modal = document.getElementById("nameModal");
+  if (modal) {
+    modal.classList.add("active");
+    document.body.style.overflow = 'hidden';
+  }
+}
+
+function hideNameDialog() {
+  const modal = document.getElementById("nameModal");
+  if (modal) {
+    modal.classList.remove("active");
+    document.body.style.overflow = '';
+  }
+}
+
+window.saveUserName = function () {
+  const input = document.getElementById("userNameInput").value.trim();
+  if (input) {
+    const now = Date.now();
+    const profile = { name: input, firstVisit: now, lastVisit: now, declined: false };
+    localStorage.setItem(userProfileKey, JSON.stringify(profile));
+    hideNameDialog();
+    showGreeting(profile.name, profile.firstVisit);
+  }
+};
+
+window.declineUserName = function () {
+  const profile = { name: null, firstVisit: Date.now(), lastVisit: Date.now(), declined: true };
+  localStorage.setItem(userProfileKey, JSON.stringify(profile));
+  hideNameDialog();
+};
+
+function showGreeting(name, firstVisitTime) {
+  const banner = document.getElementById("greetingBanner");
+  if (banner && name) {
+    const isToday = new Date(firstVisitTime).toDateString() === new Date().toDateString();
+
+    if (isToday) {
+      banner.innerHTML = `Cześć ${name}, życzymy pysznego posiłku!`;
+    } else {
+      banner.innerHTML = `Witaj ${name}, super że do nas wracasz!`;
+    }
+    banner.style.display = "block";
+  }
+}
+
+// Call init is now delayed until geolocation succeeds
+// initUserProfile();
+
 // UI Elements
 const loadingScreen = document.getElementById("loadingScreen");
 const loaderMsg = document.getElementById("loaderMsg");
@@ -63,6 +155,10 @@ window.selectedAnimationHtml = null;
   setTimeout(() => {
     loadingScreen.classList.add("hidden");
     clearInterval(msgInterval);
+    const bottomNav = document.getElementById("bottomNav");
+    if (bottomNav) {
+      bottomNav.style.display = "";
+    }
   }, remaining);
 }
 
@@ -98,12 +194,15 @@ window.selectedAnimationHtml = null;
 }
 
 function showEmptyState() {
+  const title = document.getElementById("ordersTitle");
+  if (title) title.classList.add("hidden");
+
   emptyState.classList.remove("hidden");
   itemsList.innerHTML = "";
   prepStatus.textContent = "Brak aktywnych zamówień";
   statusIcon.textContent = "🍃";
   progressBar.style.width = "0%";
-      statusMeta.textContent = "Zapraszamy do złożenia zamówienia u kelnera.";
+  statusMeta.textContent = "Zapraszamy do sprawdzenia naszego menu.";
   // Historia może istnieć nawet gdy brak bieżących pozycji
   renderGlobalHistory();
 }
@@ -223,6 +322,14 @@ window.selectedAnimationHtml = null;
   });
 }
 
+window.clearGlobalHistory = function (e) {
+  if (e) e.preventDefault();
+  if (confirm("Czy na pewno chcesz usunąć historię swoich poprzednich zamówień?")) {
+    localStorage.removeItem(historyKey);
+    renderGlobalHistory();
+  }
+};
+
 function mergeWithPersistedItems(articles) {
   const current = new Map();
 
@@ -273,6 +380,9 @@ window.selectedAnimationHtml = null;
 }
 
 function renderItems(items) {
+  const title = document.getElementById("ordersTitle");
+  if (title) title.classList.remove("hidden");
+
   emptyState.classList.add("hidden");
   itemsList.innerHTML = "";
 
@@ -399,8 +509,8 @@ window.selectedAnimationHtml = null;
   }
 }
 
-    fetchOrders();
+// fetchOrders();
-    setInterval(fetchOrders, 10000);
+// setInterval(fetchOrders, 10000);
 
 // --- CALL WAITER LOGIC ---
 let billState = { payment: '', doc: '', nip: '', company: null };
@@ -555,19 +665,79 @@ window.selectedAnimationHtml = null;
   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) {
@@ -605,17 +775,23 @@ window.selectedAnimationHtml = null;
     billState.nip = nip;
     billState.company = {
       name: "Przykładowa Firma Sp. z o.o.",
-          address: "ul. Gastronomiczna 12/4, 00-120 Warszawa",
+      street: "ul. Gastronomiczna 12/4",
+      zip: "00-120",
+      city: "Warszawa",
       nip: nip
     };
 
     document.getElementById("cmpName").value = billState.company.name;
-        document.getElementById("cmpAddress").value = billState.company.address;
+    document.getElementById("cmpStreet").value = billState.company.street;
+    document.getElementById("cmpZip").value = billState.company.zip;
+    document.getElementById("cmpCity").value = billState.company.city;
     document.getElementById("cmpNip").value = "NIP: " + billState.company.nip;
 
     // reset do readonly
     document.getElementById("cmpName").readOnly = true;
-        document.getElementById("cmpAddress").readOnly = true;
+    document.getElementById("cmpStreet").readOnly = true;
+    document.getElementById("cmpZip").readOnly = true;
+    document.getElementById("cmpCity").readOnly = true;
     document.getElementById("btnEditCompany").textContent = "Popraw ręcznie";
 
     goToStep("stepVerify");
@@ -624,24 +800,32 @@ window.selectedAnimationHtml = null;
 
 window.editCompanyData = function () {
   const n = document.getElementById("cmpName");
-      const a = document.getElementById("cmpAddress");
+  const s = document.getElementById("cmpStreet");
+  const z = document.getElementById("cmpZip");
+  const c = document.getElementById("cmpCity");
   const btn = document.getElementById("btnEditCompany");
 
   if (n.readOnly) {
     n.readOnly = false;
-        a.readOnly = false;
+    s.readOnly = false;
+    z.readOnly = false;
+    c.readOnly = false;
     n.focus();
     btn.textContent = "Zakończ edycję";
   } else {
     n.readOnly = true;
-        a.readOnly = true;
+    s.readOnly = true;
+    z.readOnly = true;
+    c.readOnly = true;
     btn.textContent = "Popraw ręcznie";
   }
 };
 
 window.confirmInvoice = function () {
   billState.company.name = document.getElementById("cmpName").value;
-      billState.company.address = document.getElementById("cmpAddress").value;
+  billState.company.street = document.getElementById("cmpStreet").value;
+  billState.company.zip = document.getElementById("cmpZip").value;
+  billState.company.city = document.getElementById("cmpCity").value;
 
   closeBillDialog();
   sendApiSimulated("CallWaiter_Bill", {
@@ -655,9 +839,98 @@ window.selectedAnimationHtml = null;
   showToast("Dziękujemy! Prośba o fakturę została wysłana.");
 };
 
+// --- GEOLOCATION LOGIC ---
+const RESTAURANT_LAT = 50.5624963;
+const RESTAURANT_LNG = 22.0608059;
+const MAX_DISTANCE_METERS = 200;
+
+function haversineDistance(lat1, lon1, lat2, lon2) {
+  const R = 6371e3;
+  const p1 = lat1 * Math.PI / 180;
+  const p2 = lat2 * Math.PI / 180;
+  const dp = (lat2 - lat1) * Math.PI / 180;
+  const dl = (lon2 - lon1) * Math.PI / 180;
+
+  const a = Math.sin(dp / 2) * Math.sin(dp / 2) +
+    Math.cos(p1) * Math.cos(p2) *
+    Math.sin(dl / 2) * Math.sin(dl / 2);
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  return R * c;
+}
+
+function startApp() {
+  document.getElementById("geoScreen").classList.add("hidden");
+  document.getElementById("loadingScreen").classList.remove("hidden");
+
+  initUserProfile();
+  fetchOrders();
+  if (!window.ordersInterval) {
+    window.ordersInterval = setInterval(fetchOrders, 10000);
+  }
+
   // Fallback: If no data after 25s, show empty state anyway
   setTimeout(() => {
-      if (!loadingScreen.classList.contains("hidden")) {
+    if (!document.getElementById("loadingScreen").classList.contains("hidden")) {
       updateUI([]);
     }
   }, 25000);
+}
+
+window.initGeolocation = function () {
+  const geoScreen = document.getElementById("geoScreen");
+  const loadingScreen = document.getElementById("loadingScreen");
+  const geoMsg = document.getElementById("geoMsg");
+
+  if (window.location.protocol === 'http:' && (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')) {
+    console.warn("Bypassing geolocation on local HTTP environment.");
+    startApp();
+    return;
+  }
+
+  loadingScreen.classList.add("hidden");
+  geoScreen.classList.remove("hidden");
+
+  if (!navigator.geolocation) {
+    geoMsg.innerHTML = "Twoja przeglądarka nie wspiera geolokalizacji. Aplikacja wymaga nowszej przeglądarki.";
+    return;
+  }
+
+  geoMsg.innerHTML = "Pobieranie lokalizacji...";
+
+  navigator.geolocation.getCurrentPosition(
+    (position) => {
+      const dist = haversineDistance(
+        RESTAURANT_LAT, RESTAURANT_LNG,
+        position.coords.latitude, position.coords.longitude
+      );
+
+      const accuracy = position.coords.accuracy;
+      console.log(`[GEO] Lat: ${position.coords.latitude}, Lng: ${position.coords.longitude}, Dist: ${dist}m, Accuracy: ${accuracy}m`);
+
+      if (dist <= MAX_DISTANCE_METERS) {
+        startApp();
+        setTimeout(() => showToast(`Lokalizacja zweryfikowana (Dystans: ${Math.round(dist)}m, Dokładność: ${Math.round(accuracy)}m)`), 2000);
+      } else {
+        geoMsg.innerHTML = `Wydaje się, że jesteś poza restauracją (ok. ${Math.round(dist)}m od nas).<br>Nasza aplikacja działa tylko na miejscu.<br><br>
+        <small style="color: #888;">Debug: Twoja odległość: ${Math.round(dist)}m, Dokładność sygnału: ${Math.round(accuracy)}m</small><br><br>
+        Jeśli to błąd GPS lub słaby sygnał, spróbuj ponownie za chwilę.`;
+      }
+    },
+    (error) => {
+      if (error.code === error.PERMISSION_DENIED) {
+        geoMsg.innerHTML = `<b style="color: #ff6b6b;">Nie mamy Twojej zgody na lokalizację.</b><br><br>
+        Przeglądarka zapamiętała Twoją odmowę i nie możemy ponownie wyświetlić okienka z zapytaniem. Aby odblokować dostęp:<br><br>
+        1. Kliknij ikonkę <b>kłódki / ustawień</b> 🔒  obok adresu strony na samej górze przeglądarki.<br>
+        2. Znajdź <b>Uprawnienia</b> (Lokalizacja) i zmień z "Zablokuj" na "Zezwalaj".<br>
+        3. Odśwież stronę.`;
+      } else {
+        geoMsg.innerHTML = "Nie udało się pobrać lokalizacji. Sprawdź zasięg lub włącz GPS i spróbuj ponownie.";
+      }
+    },
+    { enableHighAccuracy: true, timeout: 15000, maximumAge: 0 }
+  );
+};
+
+setTimeout(() => {
+  initGeolocation();
+}, 600);

public/stolik3_api.html

@@ -1,14 +1,18 @@
 <!doctype html>
 <html lang="pl">
+
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Karczma Biesiada – Twoje Zamówienie</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@300;400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap"
+    rel="stylesheet">
   <link rel="stylesheet" href="assets/css/stolik3_api.css">
 </head>
+
 <body>
 
   <div id="loadingScreen">
@@ -19,11 +23,25 @@
     </div>
   </div>
 
+  <div id="geoScreen" class="hidden">
+    <div class="geo-icon">📍</div>
+    <div class="geo-text">
+      <h2>Prywatność i Lokalizacja</h2>
+      <div class="geo-msg" id="geoMsg">
+        Aby zapewnić bezpieczeństwo Twojego zamówienia, musimy upewnić się, że znajdujesz się na terenie restauracji.<br><br>Prosimy o udzielenie zgody na dostęp do lokalizacji w przeglądarce.
+      </div>
+      <button class="btn btn-primary" style="margin-top: 24px; max-width: 250px; margin-left: auto; margin-right: auto;" onclick="initGeolocation()">Udziel zgody / Sprawdź</button>
+    </div>
+  </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>
+    <div id="greetingBanner"
+      style="display:none; text-align:center; padding: 10px; font-weight:600; color:var(--primary); font-family:'Playfair Display', serif; font-size:18px;">
+    </div>
 
     <main id="mainContent">
       <div id="statusView" class="view-section active">
@@ -46,40 +64,132 @@
           </div>
         </section>
 
-      <section class="items-container">
+        <section class="items-container" id="ordersContainer">
-        <h3>Twoje zamówione dania</h3>
+          <h3 id="ordersTitle">Twoje zamówione dania</h3>
           <div id="emptyState" class="empty-state hidden">
-          <div class="empty-icon">🍽️</div>
+            <div class="empty-icon">📖</div>
-          <p style="color: var(--text-muted)">Aktualnie nie przygotowujemy niczego dla tego stolika.</p>
+            <p style="color: var(--text-muted)">Jeśli właśnie złożyłeś zamówienie, daj nam chwilkę na jego
-          <p style="font-size: 14px">Jeśli właśnie złożyłeś zamówienie, daj nam chwilkę na jego przetworzenie.</p>
+              przetworzenie.</p>
+            <button class="btn btn-primary" style="margin-top: 15px; padding: 12px 20px; font-size: 15px;"
+              onclick="switchTab('menu')">Przeglądaj menu</button>
           </div>
           <div id="itemsList"></div>
         </section>
 
         <section id="historySection" class="items-container history-section hidden">
           <h3>Twoje poprzednie zamówienia</h3>
-        <p class="history-note">To są pozycje z innych wizyt, które były widoczne na tym telefonie po zeskanowaniu kodów QR. Jeśli kiedyś byłeś w restauracji bez skanowania kodu, tych pozycji tu nie będzie 🙂</p>
+          <p class="history-note">To są pozycje z innych wizyt, które były widoczne na tym telefonie po zeskanowaniu
+            kodów QR. Jeśli kiedyś byłeś w restauracji bez skanowania kodu, tych pozycji tu nie będzie 🙂</p>
           <div id="historyList"></div>
+          <div style="text-align: center; margin-top: 15px;">
+            <a href="#" onclick="clearGlobalHistory(event)"
+              style="font-size: 12px; color: var(--text-muted); text-decoration: underline;">Usuń historię</a>
+          </div>
         </section>
 
         <div id="metaFooter" class="meta-footer"></div>
       </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>
+
+    <footer style="text-align: center; padding: 10px 0 20px; margin-top: 5px;">
+      <a href="https://magico.pl" target="_blank"
+        style="font-size: 12px; color: var(--text-muted); text-decoration: none;">
+        &copy; Magico Software
+      </a>
+    </footer>
   </div>
 
   <!-- Bottom Navigation Bar -->
-  <nav class="bottom-nav">
+  <nav class="bottom-nav" id="bottomNav" style="display: none;">
     <div class="nav-item active" onclick="switchTab('status')" id="navStatus">
       <span class="nav-icon">🍽️</span>
       <span class="nav-label">Zamówienie</span>
@@ -102,17 +212,40 @@
   <div class="modal-overlay" id="waiterModal">
     <div class="modal-content" style="text-align: center;">
       <div style="font-size: 48px; margin-bottom: 15px;">🛎️</div>
-      <h3 style="margin-top: 0; color: var(--text-main); font-family: 'Playfair Display', serif; font-size: 24px;">Przywołać obsługę?</h3>
+      <h3 style="margin-top: 0; color: var(--text-main); font-family: 'Playfair Display', serif; font-size: 24px;">
+        Przywołać obsługę?</h3>
       <p style="color: var(--text-muted); font-size: 15px; margin-bottom: 25px; line-height: 1.5;">
-        Kelner otrzyma natychmiastowe powiadomienie na swoim panelu i podejdzie do Twojego stolika najszybciej jak to możliwe.
+        Kelner otrzyma natychmiastowe powiadomienie na swoim panelu i podejdzie do Twojego stolika najszybciej jak to
+        możliwe.
       </p>
       <div style="display: flex; gap: 12px; flex-direction: column;">
-        <button class="btn btn-primary" onclick="confirmCallWaiter()" style="padding: 14px; font-size: 16px;">Tak, poproś kelnera</button>
+        <button class="btn btn-primary" onclick="confirmCallWaiter()" style="padding: 14px; font-size: 16px;">Tak,
+          poproś kelnera</button>
         <button class="btn btn-secondary" onclick="closeWaiterDialog()" style="padding: 14px;">Anuluj</button>
       </div>
     </div>
   </div>
 
+  <!-- NAME DIALOG -->
+  <div class="modal-overlay" id="nameModal">
+    <div class="modal-content" style="text-align: center;">
+      <div style="font-size: 48px; margin-bottom: 15px;">👋</div>
+      <h3 style="margin-top: 0; color: var(--text-main); font-family: 'Playfair Display', serif; font-size: 24px;">Podaj
+        swoje imię</h3>
+      <p style="color: var(--text-muted); font-size: 15px; margin-bottom: 20px; line-height: 1.5;">
+        Dzięki temu będziemy mogli powitać Cię osobiście podczas Twojej wizyty!
+      </p>
+      <div class="input-group" style="margin-bottom: 25px; text-align: left;">
+        <input type="text" id="userNameInput" class="input-field" placeholder="Twoje imię..." autocomplete="off" />
+      </div>
+      <div style="display: flex; gap: 12px; flex-direction: column;">
+        <button class="btn btn-primary" onclick="saveUserName()" style="padding: 14px; font-size: 16px;">Idę
+          dalej</button>
+        <button class="btn btn-secondary" onclick="declineUserName()" style="padding: 14px;">Nie chcę podawać</button>
+      </div>
+    </div>
+  </div>
+
   <!-- BILL DIALOG -->
   <div class="modal-overlay" id="billModal">
     <div class="modal-content">
@@ -127,29 +260,34 @@
           ⏳ Pobieranie rachunków...
         </div>
         <div id="billListContainer" class="hidden">
-          <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Mamy kilka otwartych rachunków na tym stoliku. Który chcesz opłacić?</p>
+          <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Mamy kilka otwartych
+            rachunków na tym stoliku. Który chcesz opłacić?</p>
           <div id="billListItems" style="display:flex; flex-direction:column; gap:10px;"></div>
         </div>
       </div>
 
       <!-- Step 0.5: Bill Review -->
       <div class="step" id="stepBillReview">
-        <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Podsumowanie rachunku:</p>
+        <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Podsumowanie rachunku:
-        <div id="billReviewContent" style="background: var(--surface-light); padding: 15px; border-radius: 12px; max-height: 40vh; overflow-y: auto; margin-bottom: 15px;">
+        </p>
+        <div id="billReviewContent"
+          style="background: var(--surface-light); padding: 15px; border-radius: 12px; max-height: 40vh; overflow-y: auto; margin-bottom: 15px;">
         </div>
         <div style="display:flex; justify-content:space-between; font-weight:700; font-size:18px; margin-bottom: 20px;">
           <span>Do zapłaty:</span>
           <span id="billTotalAmount" style="color:var(--primary);">0.00 PLN</span>
         </div>
         <div style="display:flex; gap:12px;">
-          <button class="btn btn-secondary" style="flex:1;" onclick="goBackToBillList()" id="btnBackToBills">Wróć</button>
+          <button class="btn btn-secondary" style="flex:1;" onclick="goBackToBillList()"
-          <button class="btn btn-primary" style="flex:2;" onclick="goToStep('stepPayment')">Dalej</button>
+            id="btnBackToBills">Wróć</button>
+          <button class="btn btn-primary" style="flex:2;" onclick="goToStep('stepPayment')">Poproś rachunek</button>
         </div>
       </div>
 
       <!-- Step 1: Payment Method -->
       <div class="step" id="stepPayment">
-        <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Wybierz preferowaną formę płatności:</p>
+        <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Wybierz preferowaną formę
+          płatności:</p>
         <div class="option-grid">
           <div class="option-card" onclick="selectPayment('karta')">
             <span class="option-icon">💳</span>
@@ -160,12 +298,14 @@
             <span class="option-label">Gotówka</span>
           </div>
         </div>
-        <button class="btn btn-secondary" onclick="goToStep('stepBillReview')" style="margin-top: 15px;">Wróć do podsumowania</button>
+        <button class="btn btn-secondary" onclick="goToStep('stepBillReview')" style="margin-top: 15px;">Wróć do
+          podsumowania</button>
       </div>
 
       <!-- Step 2: Document Type -->
       <div class="step" id="stepDocument">
-        <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Jakiego dokumentu potrzebujesz?</p>
+        <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Jakiego dokumentu
+          potrzebujesz?</p>
         <div class="option-grid">
           <div class="option-card" onclick="selectDocument('paragon')">
             <span class="option-icon">🧾</span>
@@ -181,10 +321,11 @@
 
       <!-- Step 3: NIP Input -->
       <div class="step" id="stepNIP">
-        <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Wprowadź NIP firmy, abyśmy mogli automatycznie pobrać dane.</p>
+        <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Wprowadź NIP firmy,
+          abyśmy mogli automatycznie pobrać dane.</p>
         <div class="input-group">
           <label class="input-label">Numer NIP</label>
-          <input type="text" id="nipInput" class="input-field" placeholder="np. 1234567890" autocomplete="off" />
+          <input type="number" id="nipInput" class="input-field" placeholder="np. 1234567890" autocomplete="off" />
         </div>
         <div style="display:flex; gap:12px; margin-top: 24px;">
           <button class="btn btn-secondary" style="flex:1;" onclick="goToStep('stepDocument')">Wróć</button>
@@ -194,11 +335,17 @@
 
       <!-- Step 4: Verify Data -->
       <div class="step" id="stepVerify">
-        <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Czy poniższe dane do faktury są prawidłowe?</p>
+        <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Czy poniższe dane do
+          faktury są prawidłowe?</p>
 
         <div class="company-details">
           <input type="text" id="cmpName" class="company-input" style="font-weight:700; margin-bottom:4px;" readonly />
-          <input type="text" id="cmpAddress" class="company-input" style="margin-bottom:4px;" readonly />
+          <input type="text" id="cmpStreet" class="company-input" placeholder="Ulica i numer" style="margin-bottom:4px;"
+            readonly />
+          <div style="display: flex; gap: 8px; margin-bottom: 4px;">
+            <input type="text" id="cmpZip" class="company-input" placeholder="Kod" style="flex: 1;" readonly />
+            <input type="text" id="cmpCity" class="company-input" placeholder="Miasto" style="flex: 2;" readonly />
+          </div>
           <input type="text" id="cmpNip" class="company-input muted" readonly />
         </div>
 
@@ -221,4 +368,5 @@
 
   <script src="assets/js/stolik3_api.js"></script>
 </body>
+
 </html>