Hugging Face's logo

Spaces:
nagasurendra
/
BiryaniHubflaskSalesTeam22
Running

App Files Community
lokesh341 commited on
Commit
41845e5
·
verified ·
1 Parent(s): 805dd20

Update templates/menu.html

Browse files
Files changed (1) hide show
  1. templates/menu.html +177 -273
templates/menu.html CHANGED
@@ -1,4 +1,4 @@
1
- <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
@@ -707,201 +707,68 @@
707
  0% { transform: rotate(0deg); }
708
  100% { transform: rotate(360deg); }
709
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
710
  @media (max-width: 576px) {
711
- .fixed-top-bar {
712
- height: 60px;
713
- padding: 10px;
 
714
  }
715
- .search-bar-container {
716
- width: 80%;
717
- max-width: 100%;
718
- left: 10px;
719
- top: 50%;
720
- transform: translateY(-50%);
721
  }
722
- .search-bar-container input {
723
- padding: 6px 35px 6px 35px;
724
- font-size: 14px;
725
- border-radius: 20px;
726
- }
727
- .search-icon {
728
- left: 12px;
729
- font-size: 16px;
730
- }
731
- .mic-icon {
732
- right: 12px;
733
- font-size: 16px;
734
- }
735
- .avatar-dropdown-container {
736
- right: 10px;
737
- }
738
- .avatar-icon {
739
- width: 40px;
740
- height: 40px;
741
- font-size: 20px;
742
- }
743
- .dropdown-menu {
744
- width: 180px;
745
- }
746
- .dropdown-menu .dropdown-item {
747
- padding: 8px 12px;
748
- font-size: 13px;
749
- }
750
- .upload-item,
751
- .delete-item,
752
- .view-item {
753
- padding: 8px 12px;
754
- font-size: 13px;
755
- }
756
- .category-buttons {
757
- gap: 8px;
758
- }
759
- .category-button {
760
- padding: 4px 12px;
761
- font-size: 0.85rem;
762
- }
763
- .modal-dialog {
764
- max-width: 96%;
765
- margin: 5px auto;
766
- }
767
- .modal-header {
768
- padding: 5px 10px;
769
- }
770
- .modal-title {
771
- font-size: 14px;
772
- }
773
- .modal-body {
774
- max-height: 50vh;
775
- padding: 8px;
776
- }
777
- .modal-body #avatar-modal-img {
778
- max-height: 300px;
779
- }
780
- .modal-body #modal-img {
781
- max-height: 150px;
782
- width: 100%;
783
- max-width: 150px;
784
- margin: 0 auto 5px;
785
- display: block;
786
- }
787
- .modal-body #modal-name {
788
- font-size: 18px;
789
- margin-bottom: 3px;
790
- }
791
- .modal-body #modal-price {
792
- font-size: 14px;
793
- margin-bottom: 5px;
794
- }
795
- .modal-body #modal-description {
796
- font-size: 12px;
797
- margin-bottom: 5px;
798
- }
799
- .modal-body .nutritional-info {
800
- font-size: 10px;
801
- margin-bottom: 5px;
802
- }
803
- .modal-body #modal-addons h6,
804
- .modal-body #first-row h6 {
805
- font-size: 12px;
806
- margin-bottom: 5px;
807
- }
808
- .modal-footer {
809
- padding: 5px;
810
- }
811
- .modal-footer .btn {
812
- height: 30px;
813
- padding: 0 10px;
814
- }
815
- .modal-footer .form-control {
816
- width: 30px;
817
- height: 30px;
818
- font-size: 12px;
819
- font-weight: bold;
820
- }
821
- .modal-footer .btn-outline-secondary {
822
- width: 25px;
823
- height: 25px;
824
- font-size: 12px;
825
- line-height: 25px;
826
- }
827
- .modal-footer .btn-primary {
828
- font-size: 12px;
829
- height: 30px;
830
- padding: 0 15px;
831
- border-radius: 5px;
832
- }
833
- .btn-primary {
834
- font-size: 10px;
835
- width: 50px;
836
- height: 25px;
837
- }
838
- .customisable-text {
839
- font-size: 8px;
840
- }
841
- .button-container {
842
- gap: 3px;
843
- }
844
- .quantity-selector .btn {
845
- width: 18px;
846
- height: 18px;
847
- font-size: 9px;
848
- line-height: 18px;
849
- }
850
- .quantity-selector .quantity-display {
851
- width: 18px;
852
- font-size: 9px;
853
- line-height: 18px;
854
- }
855
- .quantity-selector .quantity-to-add,
856
- .quantity-selector .quantity-to-remove {
857
- width: 35px;
858
- height: 18px;
859
- font-size: 9px;
860
- }
861
- .quantity-selector select {
862
- width: 50px;
863
- height: 30px;
864
- font-size: 12px;
865
- }
866
- .bottom-action-bar {
867
- padding: 8px 10px;
868
- }
869
- .bottom-action-bar .btn {
870
- padding: 8px 10px;
871
- font-size: 14px;
872
- }
873
- .cart-icon-badge {
874
- width: 18px;
875
- height: 18px;
876
- font-size: 10px;
877
- margin-left: 5px;
878
- }
879
- .item-details {
880
- padding: 10px;
881
- margin: 5px 10px;
882
- }
883
- .item-details h6 {
884
- font-size: 0.95rem;
885
- }
886
- .item-details p {
887
- font-size: 0.8rem;
888
- }
889
- .toggle-details {
890
- font-size: 0.8rem;
891
- }
892
- .mic-popup {
893
- padding: 20px;
894
- width: 280px;
895
- }
896
- .mic-popup-icon {
897
- font-size: 36px;
898
- margin-bottom: 15px;
899
- }
900
- .mic-popup-text {
901
- font-size: 16px;
902
- }
903
- .mic-popup-cancel {
904
- padding: 6px 16px;
905
  font-size: 14px;
906
  }
907
  }
@@ -1035,7 +902,7 @@
1035
  <h6>Ingredients Info</h6>
1036
  <p>{{ item.IngredientsInfo__c | default('Not specified') }}</p>
1037
  <h6>Nutritional Info</h6>
1038
- север <p>{{ item.NutritionalInfo__c | default('Not available') }}</p>
1039
  <h6>Allergens</h6>
1040
  <p>{{ item.Allergens__c | default('None listed') }}</p>
1041
  </div>
@@ -1160,15 +1027,31 @@
1160
  <div class="spinner"></div>
1161
  </div>
1162
 
 
 
 
 
 
 
 
 
 
1163
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
1164
  <script>
1165
  let isProcessingRequest = false;
1166
  let currentSoftDrinkButton = null;
1167
 
1168
- const menuItems = [
1169
  {% for section, items in ordered_menu.items() %}
1170
  {% for item in items %}
1171
- "{{ item.Name | default('Unnamed Item') | e }}",
 
 
 
 
 
 
 
1172
  {% endfor %}
1173
  {% endfor %}
1174
  ];
@@ -1332,63 +1215,62 @@
1332
  }
1333
  }
1334
 
1335
- function handleHighlightedItem() {
1336
- const urlParams = new URLSearchParams(window.location.search);
1337
- const highlightItemName = urlParams.get('highlight');
 
 
 
 
 
 
 
1338
 
1339
- if (highlightItemName) {
1340
- const itemData = JSON.parse(sessionStorage.getItem('highlightItem'));
1341
-
1342
- if (itemData) {
1343
- setTimeout(() => {
1344
- const itemElement = document.querySelector(`[data-item-name="${itemData.name}"]`);
1345
-
1346
- if (itemElement) {
1347
- itemElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
1348
- itemElement.classList.add('highlight-item');
1349
- setTimeout(() => {
1350
- itemElement.classList.remove('highlight-item');
1351
- }, 2000);
1352
-
1353
- const addButton = itemElement.querySelector('.btn-primary');
1354
- const buttonContainer = addButton.closest('.button-container');
1355
- const section = buttonContainer.getAttribute('data-item-section');
1356
-
1357
- if (section === 'Soft Drinks') {
1358
- showSoftDrinkModal(addButton);
1359
- } else {
1360
- const name = buttonContainer.getAttribute('data-item-name');
1361
- const price = buttonContainer.getAttribute('data-item-price');
1362
- const image = buttonContainer.getAttribute('data-item-image');
1363
- const category = buttonContainer.getAttribute('data-item-category');
1364
-
1365
- const description = itemElement.querySelector('.item-details h6:contains("Description") + p')?.textContent || 'No description available';
1366
- const ingredients = itemElement.querySelector('.item-details h6:contains("Ingredients Info") + p')?.textContent || 'Not specified';
1367
- const nutrition = itemElement.querySelector('.item-details h6:contains("Nutritional Info") + p')?.textContent || 'Not available';
1368
- const allergens = itemElement.querySelector('.item-details h6:contains("Allergens") + p')?.textContent || 'None listed';
1369
-
1370
- showItemDetails(
1371
- name,
1372
- price,
1373
- image,
1374
- description,
1375
- ingredients,
1376
- nutrition,
1377
- allergens,
1378
- section,
1379
- category
1380
- );
1381
-
1382
- const modal = new bootstrap.Modal(document.getElementById('itemModal'));
1383
- modal.show();
1384
- }
1385
- }
1386
-
1387
- sessionStorage.removeItem('highlightItem');
1388
- window.history.replaceState({}, document.title, window.location.pathname);
1389
- }, 500);
1390
  }
1391
- }
 
 
 
 
 
 
1392
  }
1393
 
1394
  document.addEventListener('DOMContentLoaded', function () {
@@ -1618,41 +1500,59 @@
1618
 
1619
  const searchBar = document.getElementById('searchBar');
1620
  const suggestionsContainer = document.getElementById('autocompleteSuggestions');
1621
- const debouncedFilterMenu = debounce(filterMenu, 300);
1622
-
1623
- searchBar.addEventListener('click', function (event) {
1624
- event.stopPropagation();
1625
- document.getElementById('loadingOverlay').style.display = 'flex';
1626
- window.location.href = '/search';
1627
- });
1628
 
1629
  searchBar.addEventListener('input', function () {
1630
  const input = sanitizeInput(this.value.trim().toLowerCase());
1631
  suggestionsContainer.innerHTML = '';
1632
  suggestionsContainer.style.display = 'none';
1633
- if (input) {
1634
- const filteredItems = menuItems.filter(item => item.toLowerCase().includes(input));
 
 
 
 
 
 
1635
  if (filteredItems.length > 0) {
1636
- filteredItems.forEach(item => {
1637
  const suggestionDiv = document.createElement('div');
1638
  suggestionDiv.classList.add('suggestion-item');
1639
- suggestionDiv.innerText = item;
 
 
 
1640
  suggestionDiv.addEventListener('click', function () {
1641
- searchBar.value = item;
1642
  suggestionsContainer.style.display = 'none';
1643
- debouncedFilterMenu();
1644
  });
1645
  suggestionsContainer.appendChild(suggestionDiv);
1646
  });
1647
  suggestionsContainer.style.display = 'block';
1648
  }
1649
  }
1650
- debouncedFilterMenu();
 
 
 
 
 
 
 
 
 
 
 
 
1651
  });
1652
 
1653
  document.addEventListener('click', function (event) {
1654
- if (!searchBar.contains(event.target) && !suggestionsContainer.contains(event.target)) {
 
 
1655
  suggestionsContainer.style.display = 'none';
 
1656
  }
1657
  });
1658
 
@@ -1814,7 +1714,7 @@
1814
  if (interimTranscript) micPopupText.textContent = interimTranscript;
1815
  if (finalTranscript) {
1816
  searchBar.value = sanitizeInput(finalTranscript.trim());
1817
- debouncedFilterMenu();
1818
  micPopup.classList.remove('active');
1819
  }
1820
  };
@@ -1856,15 +1756,19 @@
1856
  document.getElementById('loadingOverlay').style.display = 'none';
1857
  });
1858
 
1859
- function filterMenu() {
1860
- const input = sanitizeInput(document.getElementById('searchBar').value.trim().toLowerCase());
1861
  const sections = document.querySelectorAll('h3');
1862
  const items = document.querySelectorAll('.menu-card');
1863
  let matchedSections = new Set();
 
1864
  items.forEach(item => {
1865
  const itemName = item.querySelector('.card-title').innerText.toLowerCase();
1866
  const itemSection = item.closest('.row').previousElementSibling.innerText.toLowerCase();
1867
- if (itemName.includes(input) || (itemSection && itemSection.includes(input))) {
 
 
 
 
1868
  item.style.display = 'block';
1869
  item.classList.add('visible');
1870
  matchedSections.add(item.closest('.row'));
@@ -1872,6 +1776,7 @@
1872
  item.style.display = 'none';
1873
  }
1874
  });
 
1875
  sections.forEach(section => {
1876
  const sectionRow = section.nextElementSibling;
1877
  if (matchedSections.has(sectionRow)) {
@@ -1882,6 +1787,7 @@
1882
  sectionRow.style.display = 'none';
1883
  }
1884
  });
 
1885
  if (!input) {
1886
  sections.forEach(section => {
1887
  section.style.display = 'block';
@@ -1893,8 +1799,7 @@
1893
  });
1894
  }
1895
  }
1896
-
1897
- function showItemDetails(name, price, image, description, ingredients, nutrition, allergens, section, selectedCategory) {
1898
  document.getElementById('modal-name').innerText = name;
1899
  document.getElementById('modal-price').innerText = `$${price}`;
1900
  document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
@@ -2026,4 +1931,3 @@
2026
  </body>
2027
  </html>
2028
 
2029
-
 
1
+ <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
 
707
  0% { transform: rotate(0deg); }
708
  100% { transform: rotate(360deg); }
709
  }
710
+ .search-result-modal {
711
+ position: fixed;
712
+ top: 20%;
713
+ left: 50%;
714
+ transform: translateX(-50%);
715
+ width: 400px;
716
+ max-width: 90%;
717
+ background: white;
718
+ border-radius: 15px;
719
+ box-shadow: 0 5px 15px rgba(0,0,0,0.3);
720
+ z-index: 2000;
721
+ padding: 20px;
722
+ display: none;
723
+ }
724
+ .search-result-modal.active {
725
+ display: block;
726
+ }
727
+ .search-result-modal .item-info {
728
+ text-align: center;
729
+ margin-bottom: 15px;
730
+ }
731
+ .search-result-modal .item-info img {
732
+ max-height: 100px;
733
+ width: auto;
734
+ border-radius: 8px;
735
+ }
736
+ .search-result-modal .quick-add {
737
+ display: flex;
738
+ justify-content: center;
739
+ gap: 10px;
740
+ }
741
+ .search-result-modal .btn-quick-add {
742
+ background-color: #0FAA39;
743
+ color: white;
744
+ padding: 8px 20px;
745
+ border-radius: 5px;
746
+ border: none;
747
+ transition: background-color 0.3s ease;
748
+ }
749
+ .search-result-modal .btn-quick-add:hover {
750
+ background-color: #0D9232;
751
+ }
752
+ .search-result-modal .btn-close {
753
+ position: absolute;
754
+ top: 10px;
755
+ right: 10px;
756
+ background: none;
757
+ border: none;
758
+ font-size: 20px;
759
+ cursor: pointer;
760
+ }
761
  @media (max-width: 576px) {
762
+ /* Existing media queries remain unchanged */
763
+ .search-result-modal {
764
+ width: 300px;
765
+ padding: 15px;
766
  }
767
+ .search-result-modal .item-info img {
768
+ max-height: 80px;
 
 
 
 
769
  }
770
+ .search-result-modal .btn-quick-add {
771
+ padding: 6px 15px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
772
  font-size: 14px;
773
  }
774
  }
 
902
  <h6>Ingredients Info</h6>
903
  <p>{{ item.IngredientsInfo__c | default('Not specified') }}</p>
904
  <h6>Nutritional Info</h6>
905
+ <p>{{ item.NutritionalInfo__c | default('Not available') }}</p>
906
  <h6>Allergens</h6>
907
  <p>{{ item.Allergens__c | default('None listed') }}</p>
908
  </div>
 
1027
  <div class="spinner"></div>
1028
  </div>
1029
 
1030
+ <!-- Search Result Popup -->
1031
+ <div class="search-result-modal" id="searchResultModal">
1032
+ <button class="btn-close" id="closeSearchModal">×</button>
1033
+ <div class="item-info" id="searchResultInfo"></div>
1034
+ <div class="quick-add">
1035
+ <button class="btn-quick-add" id="quickAddToCart">Add to Cart</button>
1036
+ </div>
1037
+ </div>
1038
+
1039
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
1040
  <script>
1041
  let isProcessingRequest = false;
1042
  let currentSoftDrinkButton = null;
1043
 
1044
+ const menuItemsData = [
1045
  {% for section, items in ordered_menu.items() %}
1046
  {% for item in items %}
1047
+ {
1048
+ name: "{{ item.Name | default('Unnamed Item') | e }}",
1049
+ price: "{{ item.Price__c | default('0.00') }}",
1050
+ image: "{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}",
1051
+ section: "{{ item.Section__c | default(section) | e }}",
1052
+ category: "{{ selected_category | e }}",
1053
+ description: "{{ item.Description__c | default('No description') | e }}"
1054
+ },
1055
  {% endfor %}
1056
  {% endfor %}
1057
  ];
 
1215
  }
1216
  }
1217
 
1218
+ function showSearchResultModal(item) {
1219
+ const modal = document.getElementById('searchResultModal');
1220
+ const info = document.getElementById('searchResultInfo');
1221
+ info.innerHTML = `
1222
+ <img src="${item.image}" alt="${item.name}">
1223
+ <h5>${item.name}</h5>
1224
+ <p>$${item.price}</p>
1225
+ <p>${item.description}</p>
1226
+ `;
1227
+ modal.classList.add('active');
1228
 
1229
+ document.getElementById('quickAddToCart').onclick = () => {
1230
+ quickAddToCart(item);
1231
+ modal.classList.remove('active');
1232
+ };
1233
+ document.getElementById('closeSearchModal').onclick = () => {
1234
+ modal.classList.remove('active');
1235
+ };
1236
+ }
1237
+
1238
+ function quickAddToCart(item) {
1239
+ const cartPayload = {
1240
+ itemName: item.name,
1241
+ itemPrice: parseFloat(item.price),
1242
+ itemImage: item.image,
1243
+ section: item.section,
1244
+ category: item.category,
1245
+ addons: [],
1246
+ instructions: '',
1247
+ quantity: 1
1248
+ };
1249
+
1250
+ fetch('/cart/add', {
1251
+ method: 'POST',
1252
+ headers: {
1253
+ 'Content-Type': 'application/json',
1254
+ },
1255
+ body: JSON.stringify(cartPayload)
1256
+ })
1257
+ .then(response => response.json())
1258
+ .then(data => {
1259
+ if (data.success) {
1260
+ updateCartUI(data.cart);
1261
+ alert('Item added to cart successfully!');
1262
+ } else {
1263
+ const cart = addToCartLocalStorage(cartPayload);
1264
+ updateCartUI(cart);
1265
+ alert('Item added to cart (local storage)');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1266
  }
1267
+ })
1268
+ .catch(err => {
1269
+ console.error('Error:', err);
1270
+ const cart = addToCartLocalStorage(cartPayload);
1271
+ updateCartUI(cart);
1272
+ alert('Item added to cart (local storage)');
1273
+ });
1274
  }
1275
 
1276
  document.addEventListener('DOMContentLoaded', function () {
 
1500
 
1501
  const searchBar = document.getElementById('searchBar');
1502
  const suggestionsContainer = document.getElementById('autocompleteSuggestions');
1503
+ const debouncedSearch = debounce(handleSearch, 300);
 
 
 
 
 
 
1504
 
1505
  searchBar.addEventListener('input', function () {
1506
  const input = sanitizeInput(this.value.trim().toLowerCase());
1507
  suggestionsContainer.innerHTML = '';
1508
  suggestionsContainer.style.display = 'none';
1509
+
1510
+ if (input.length >= 2) {
1511
+ const filteredItems = menuItemsData.filter(item =>
1512
+ item.name.toLowerCase().includes(input) ||
1513
+ item.section.toLowerCase().includes(input) ||
1514
+ item.description.toLowerCase().includes(input)
1515
+ );
1516
+
1517
  if (filteredItems.length > 0) {
1518
+ filteredItems.slice(0, 5).forEach(item => {
1519
  const suggestionDiv = document.createElement('div');
1520
  suggestionDiv.classList.add('suggestion-item');
1521
+ suggestionDiv.innerHTML = `
1522
+ <strong>${item.name}</strong><br>
1523
+ <small>${item.section} - $${item.price}</small>
1524
+ `;
1525
  suggestionDiv.addEventListener('click', function () {
1526
+ searchBar.value = item.name;
1527
  suggestionsContainer.style.display = 'none';
1528
+ showSearchResultModal(item);
1529
  });
1530
  suggestionsContainer.appendChild(suggestionDiv);
1531
  });
1532
  suggestionsContainer.style.display = 'block';
1533
  }
1534
  }
1535
+ debouncedSearch(input);
1536
+ });
1537
+
1538
+ searchBar.addEventListener('keypress', function(e) {
1539
+ if (e.key === 'Enter') {
1540
+ const input = sanitizeInput(this.value.trim().toLowerCase());
1541
+ const exactMatch = menuItemsData.find(item =>
1542
+ item.name.toLowerCase() === input
1543
+ );
1544
+ if (exactMatch) {
1545
+ showSearchResultModal(exactMatch);
1546
+ }
1547
+ }
1548
  });
1549
 
1550
  document.addEventListener('click', function (event) {
1551
+ if (!searchBar.contains(event.target) &&
1552
+ !suggestionsContainer.contains(event.target) &&
1553
+ !document.getElementById('searchResultModal').contains(event.target)) {
1554
  suggestionsContainer.style.display = 'none';
1555
+ document.getElementById('searchResultModal').classList.remove('active');
1556
  }
1557
  });
1558
 
 
1714
  if (interimTranscript) micPopupText.textContent = interimTranscript;
1715
  if (finalTranscript) {
1716
  searchBar.value = sanitizeInput(finalTranscript.trim());
1717
+ debouncedSearch(finalTranscript.trim().toLowerCase());
1718
  micPopup.classList.remove('active');
1719
  }
1720
  };
 
1756
  document.getElementById('loadingOverlay').style.display = 'none';
1757
  });
1758
 
1759
+ function handleSearch(input) {
 
1760
  const sections = document.querySelectorAll('h3');
1761
  const items = document.querySelectorAll('.menu-card');
1762
  let matchedSections = new Set();
1763
+
1764
  items.forEach(item => {
1765
  const itemName = item.querySelector('.card-title').innerText.toLowerCase();
1766
  const itemSection = item.closest('.row').previousElementSibling.innerText.toLowerCase();
1767
+ const itemDescription = item.querySelector('.item-details p')?.innerText.toLowerCase() || '';
1768
+
1769
+ if (itemName.includes(input) ||
1770
+ itemSection.includes(input) ||
1771
+ itemDescription.includes(input)) {
1772
  item.style.display = 'block';
1773
  item.classList.add('visible');
1774
  matchedSections.add(item.closest('.row'));
 
1776
  item.style.display = 'none';
1777
  }
1778
  });
1779
+
1780
  sections.forEach(section => {
1781
  const sectionRow = section.nextElementSibling;
1782
  if (matchedSections.has(sectionRow)) {
 
1787
  sectionRow.style.display = 'none';
1788
  }
1789
  });
1790
+
1791
  if (!input) {
1792
  sections.forEach(section => {
1793
  section.style.display = 'block';
 
1799
  });
1800
  }
1801
  }
1802
+ function showItemDetails(name, price, image, description, ingredients, nutrition, allergens, section, selectedCategory) {
 
1803
  document.getElementById('modal-name').innerText = name;
1804
  document.getElementById('modal-price').innerText = `$${price}`;
1805
  document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
 
1931
  </body>
1932
  </html>
1933