Compare commits
3 Commits
a5adf77d44
...
297ef31eca
| Author | SHA1 | Date | |
|---|---|---|---|
| 297ef31eca | |||
| 05dfe4c3a6 | |||
| 9e3f648625 |
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -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,67 +23,173 @@
|
||||
</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">
|
||||
|
||||
<section class="status-card">
|
||||
<div class="status-header">
|
||||
<div>
|
||||
<span class="status-title">Aktualny status</span>
|
||||
<div id="prepStatus" class="status-value">Oczekiwanie...</div>
|
||||
<section class="status-card">
|
||||
<div class="status-header">
|
||||
<div>
|
||||
<span class="status-title">Aktualny status</span>
|
||||
<div id="prepStatus" class="status-value">Oczekiwanie...</div>
|
||||
</div>
|
||||
<div id="statusIcon" style="font-size: 28px;">⏳</div>
|
||||
</div>
|
||||
<div id="statusIcon" style="font-size: 28px;">⏳</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-container">
|
||||
<div id="progressBar" class="progress-bar"></div>
|
||||
</div>
|
||||
|
||||
<div id="statusMeta" style="font-size: 12px; color: var(--text-muted);">
|
||||
Sprawdzamy co pysznego się przygotowuje...
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="items-container">
|
||||
<h3>Twoje zamówione dania</h3>
|
||||
<div id="emptyState" class="empty-state hidden">
|
||||
<div class="empty-icon">🍽️</div>
|
||||
<p style="color: var(--text-muted)">Aktualnie nie przygotowujemy niczego dla tego stolika.</p>
|
||||
<p style="font-size: 14px">Jeśli właśnie złożyłeś zamówienie, daj nam chwilkę na jego przetworzenie.</p>
|
||||
</div>
|
||||
<div id="itemsList"></div>
|
||||
</section>
|
||||
<div class="progress-container">
|
||||
<div id="progressBar" class="progress-bar"></div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div id="historyList"></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;">
|
||||
<h3>Menu Restauracji</h3>
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">📖</div>
|
||||
<p style="color: var(--text-muted)">Nasza wspaniała karta dań pojawi się tutaj niebawem.</p>
|
||||
<div id="statusMeta" style="font-size: 12px; color: var(--text-muted);">
|
||||
Sprawdzamy co pysznego się przygotowuje...
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="items-container" id="ordersContainer">
|
||||
<h3 id="ordersTitle">Twoje zamówione dania</h3>
|
||||
<div id="emptyState" class="empty-state hidden">
|
||||
<div class="empty-icon">📖</div>
|
||||
<p style="color: var(--text-muted)">Jeśli właśnie złożyłeś zamówienie, daj nam chwilkę na jego
|
||||
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>
|
||||
<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">
|
||||
<div class="menu-search-container">
|
||||
<input type="text" id="menuSearchInput" placeholder="Szukaj dania..." oninput="filterMenu()" />
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</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;">
|
||||
© 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">
|
||||
@@ -120,36 +253,41 @@
|
||||
<h3 id="modalTitle">Rozliczenie</h3>
|
||||
<button class="close-btn" onclick="closeBillDialog()">×</button>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Step 0: Loading or List of Bills -->
|
||||
<div class="step active" id="stepBillList">
|
||||
<div id="billLoading" style="text-align:center; padding: 20px;">
|
||||
⏳ 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>
|
||||
<div id="billReviewContent" style="background: var(--surface-light); padding: 15px; border-radius: 12px; max-height: 40vh; overflow-y: auto; margin-bottom: 15px;">
|
||||
<p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Podsumowanie rachunku:
|
||||
</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-primary" style="flex:2;" onclick="goToStep('stepPayment')">Dalej</button>
|
||||
<button class="btn btn-secondary" style="flex:1;" onclick="goBackToBillList()"
|
||||
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>
|
||||
Reference in New Issue
Block a user