Update templates/menu.html
Browse files- templates/menu.html +18 -6
templates/menu.html
CHANGED
|
@@ -1,4 +1,4 @@
|
|
| 1 |
-
<!DOCTYPE html>
|
| 2 |
<html lang="en">
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
|
@@ -863,9 +863,7 @@
|
|
| 863 |
}
|
| 864 |
.mic-popup-icon {
|
| 865 |
font-size: 36px;
|
| 866 |
-
margin-bottom:
|
| 867 |
-
|
| 868 |
-
px;
|
| 869 |
}
|
| 870 |
.mic-popup-text {
|
| 871 |
font-size: 16px;
|
|
@@ -948,7 +946,7 @@ px;
|
|
| 948 |
<h3>{{ section }}</h3>
|
| 949 |
<div class="row">
|
| 950 |
{% for item in items %}
|
| 951 |
-
<div class="col-md-6 mb-4">
|
| 952 |
<div class="card menu-card">
|
| 953 |
<video
|
| 954 |
class="card-img-top menu-video"
|
|
@@ -1003,7 +1001,7 @@ px;
|
|
| 1003 |
<h6>Description</h6>
|
| 1004 |
<p>{{ item.Description__c | default('No description available') }}</p>
|
| 1005 |
<h6>Ingredients Info</h6>
|
| 1006 |
-
<p>{{ item.
|
| 1007 |
<h6>Nutritional Info</h6>
|
| 1008 |
<p>{{ item.NutritionalInfo__c | default('Not available') }}</p>
|
| 1009 |
<h6>Allergens</h6>
|
|
@@ -1875,6 +1873,19 @@ px;
|
|
| 1875 |
micIcon.style.display = 'none';
|
| 1876 |
micUnsupported.style.display = 'block';
|
| 1877 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1878 |
});
|
| 1879 |
|
| 1880 |
function filterMenu() {
|
|
@@ -1944,6 +1955,7 @@ px;
|
|
| 1944 |
const sectionDiv = document.createElement('div');
|
| 1945 |
sectionDiv.classList.add('addon-section');
|
| 1946 |
const title = document.createElement('h6');
|
|
|
|
| 1947 |
title.innerText = addon.name;
|
| 1948 |
sectionDiv.appendChild(title);
|
| 1949 |
const optionsContainer = document.createElement('div');
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
<html lang="en">
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
|
|
|
| 863 |
}
|
| 864 |
.mic-popup-icon {
|
| 865 |
font-size: 36px;
|
| 866 |
+
margin-bottom: 15px;
|
|
|
|
|
|
|
| 867 |
}
|
| 868 |
.mic-popup-text {
|
| 869 |
font-size: 16px;
|
|
|
|
| 946 |
<h3>{{ section }}</h3>
|
| 947 |
<div class="row">
|
| 948 |
{% for item in items %}
|
| 949 |
+
<div class="col-md-6 mb-4" data-item-name="{{ item.Name | default('Unnamed Item') | e }}">
|
| 950 |
<div class="card menu-card">
|
| 951 |
<video
|
| 952 |
class="card-img-top menu-video"
|
|
|
|
| 1001 |
<h6>Description</h6>
|
| 1002 |
<p>{{ item.Description__c | default('No description available') }}</p>
|
| 1003 |
<h6>Ingredients Info</h6>
|
| 1004 |
+
<p>{{ item.IngredientsInfo__c | default('Not specified') }}</p>
|
| 1005 |
<h6>Nutritional Info</h6>
|
| 1006 |
<p>{{ item.NutritionalInfo__c | default('Not available') }}</p>
|
| 1007 |
<h6>Allergens</h6>
|
|
|
|
| 1873 |
micIcon.style.display = 'none';
|
| 1874 |
micUnsupported.style.display = 'block';
|
| 1875 |
}
|
| 1876 |
+
|
| 1877 |
+
// Highlight item from search redirect
|
| 1878 |
+
const highlightItem = "{{ highlight_item | e }}";
|
| 1879 |
+
if (highlightItem) {
|
| 1880 |
+
const itemElement = document.querySelector(`[data-item-name="${highlightItem}"]`);
|
| 1881 |
+
if (itemElement) {
|
| 1882 |
+
itemElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
| 1883 |
+
itemElement.style.backgroundColor = '#FFFFE0'; // Light yellow highlight
|
| 1884 |
+
setTimeout(() => {
|
| 1885 |
+
itemElement.style.backgroundColor = ''; // Remove highlight after 2 seconds
|
| 1886 |
+
}, 2000);
|
| 1887 |
+
}
|
| 1888 |
+
}
|
| 1889 |
});
|
| 1890 |
|
| 1891 |
function filterMenu() {
|
|
|
|
| 1955 |
const sectionDiv = document.createElement('div');
|
| 1956 |
sectionDiv.classList.add('addon-section');
|
| 1957 |
const title = document.createElement('h6');
|
| 1958 |
+
|
| 1959 |
title.innerText = addon.name;
|
| 1960 |
sectionDiv.appendChild(title);
|
| 1961 |
const optionsContainer = document.createElement('div');
|