Update templates/menu.html
Browse files- templates/menu.html +3 -138
templates/menu.html
CHANGED
|
@@ -1976,144 +1976,9 @@
|
|
| 1976 |
}
|
| 1977 |
form.submit();
|
| 1978 |
}
|
| 1979 |
-
|
| 1980 |
-
|
| 1981 |
-
|
| 1982 |
-
document.getElementById('micIcon').classList.remove('active');
|
| 1983 |
-
const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
|
| 1984 |
-
if (micModal) {
|
| 1985 |
-
micModal.hide();
|
| 1986 |
-
resetMicModal();
|
| 1987 |
-
}
|
| 1988 |
-
}
|
| 1989 |
-
}
|
| 1990 |
-
function resetMicModal() {
|
| 1991 |
-
document.getElementById('mic-status').textContent = 'Say the name of a menu item...';
|
| 1992 |
-
document.getElementById('mic-status').style.display = 'block';
|
| 1993 |
-
document.getElementById('mic-item-details').style.display = 'none';
|
| 1994 |
-
document.getElementById('mic-item-image').src = '';
|
| 1995 |
-
document.getElementById('mic-item-name').textContent = '';
|
| 1996 |
-
}
|
| 1997 |
-
document.addEventListener('DOMContentLoaded', function () {
|
| 1998 |
-
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
| 1999 |
-
if (SpeechRecognition) {
|
| 2000 |
-
recognition = new SpeechRecognition();
|
| 2001 |
-
recognition.continuous = false;
|
| 2002 |
-
recognition.interimResults = false;
|
| 2003 |
-
recognition.lang = 'en-US';
|
| 2004 |
-
recognition.onstart = function () {
|
| 2005 |
-
document.getElementById('micIcon').classList.add('active');
|
| 2006 |
-
document.getElementById('mic-status').textContent = 'Listening...';
|
| 2007 |
-
document.getElementById('mic-item-details').style.display = 'none';
|
| 2008 |
-
const micModal = new bootstrap.Modal(document.getElementById('micModal'));
|
| 2009 |
-
micModal.show();
|
| 2010 |
-
};
|
| 2011 |
-
recognition.onresult = function (event) {
|
| 2012 |
-
const transcript = event.results[0][0].transcript.trim().toLowerCase();
|
| 2013 |
-
document.getElementById('searchBar').value = transcript;
|
| 2014 |
-
const menuCards = document.querySelectorAll('.menu-card');
|
| 2015 |
-
let matchedItem = null;
|
| 2016 |
-
let matchedCard = null;
|
| 2017 |
-
menuCards.forEach(card => {
|
| 2018 |
-
const itemName = card.getAttribute('data-item-name').toLowerCase();
|
| 2019 |
-
const itemSection = card.getAttribute('data-item-section');
|
| 2020 |
-
if (itemName.includes(transcript) || transcript.includes(itemName)) {
|
| 2021 |
-
matchedItem = menuItems.find(item =>
|
| 2022 |
-
item.name.toLowerCase() === card.getAttribute('data-item-name').toLowerCase() &&
|
| 2023 |
-
item.section === itemSection
|
| 2024 |
-
);
|
| 2025 |
-
matchedCard = card;
|
| 2026 |
-
}
|
| 2027 |
-
});
|
| 2028 |
-
const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
|
| 2029 |
-
if (matchedItem && matchedCard) {
|
| 2030 |
-
document.getElementById('mic-status').style.display = 'none';
|
| 2031 |
-
const micItemDetails = document.getElementById('mic-item-details');
|
| 2032 |
-
const micItemImage = document.getElementById('mic-item-image');
|
| 2033 |
-
const micItemName = document.getElementById('mic-item-name');
|
| 2034 |
-
micItemImage.src = matchedItem.image || '/static/placeholder.jpg';
|
| 2035 |
-
micItemName.textContent = matchedItem.name;
|
| 2036 |
-
micItemDetails.style.display = 'block';
|
| 2037 |
-
matchedCard.classList.add('highlighted');
|
| 2038 |
-
matchedCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
| 2039 |
-
const toggleLink = matchedCard.querySelector('.toggle-details');
|
| 2040 |
-
if (toggleLink) {
|
| 2041 |
-
toggleLink.click();
|
| 2042 |
-
}
|
| 2043 |
-
const buttonContainer = matchedCard.querySelector('.button-container');
|
| 2044 |
-
if (buttonContainer) {
|
| 2045 |
-
const section = buttonContainer.getAttribute('data-item-section');
|
| 2046 |
-
setTimeout(() => {
|
| 2047 |
-
micModal.hide();
|
| 2048 |
-
if (section === 'Soft Drinks') {
|
| 2049 |
-
showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
|
| 2050 |
-
} else {
|
| 2051 |
-
const name = buttonContainer.getAttribute('data-item-name');
|
| 2052 |
-
const price = buttonContainer.getAttribute('data-item-price');
|
| 2053 |
-
const image = buttonContainer.getAttribute('data-item-image2');
|
| 2054 |
-
const description = buttonContainer.getAttribute('data-item-description');
|
| 2055 |
-
const category = buttonContainer.getAttribute('data-item-category');
|
| 2056 |
-
showItemDetails(name, price, image, description, section, category);
|
| 2057 |
-
const itemModal = new bootstrap.Modal(document.getElementById('itemModal'));
|
| 2058 |
-
itemModal.show();
|
| 2059 |
-
}
|
| 2060 |
-
resetMicModal();
|
| 2061 |
-
}, 1500);
|
| 2062 |
-
}
|
| 2063 |
-
} else {
|
| 2064 |
-
document.getElementById('mic-status').textContent = 'No matching item found. Try again...';
|
| 2065 |
-
setTimeout(() => {
|
| 2066 |
-
micModal.hide();
|
| 2067 |
-
resetMicModal();
|
| 2068 |
-
alert('No matching menu item found for: ' + transcript);
|
| 2069 |
-
}, 1500);
|
| 2070 |
-
}
|
| 2071 |
-
};
|
| 2072 |
-
recognition.onerror = function (event) {
|
| 2073 |
-
console.error('Speech recognition error:', event.error);
|
| 2074 |
-
document.getElementById('mic-status').textContent = 'Error occurred. Please try again.';
|
| 2075 |
-
document.getElementById('micIcon').classList.remove('active');
|
| 2076 |
-
const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
|
| 2077 |
-
setTimeout(() => {
|
| 2078 |
-
micModal.hide();
|
| 2079 |
-
resetMicModal();
|
| 2080 |
-
alert('Speech recognition failed: ' + event.error);
|
| 2081 |
-
}, 1500);
|
| 2082 |
-
};
|
| 2083 |
-
recognition.onend = function () {
|
| 2084 |
-
document.getElementById('micIcon').classList.remove('active');
|
| 2085 |
-
const micModal = bootstrap.Modal.getInstance(document.getElementById('micModal'));
|
| 2086 |
-
if (micModal && !matchedItem) {
|
| 2087 |
-
micModal.hide();
|
| 2088 |
-
resetMicModal();
|
| 2089 |
-
}
|
| 2090 |
-
};
|
| 2091 |
-
}
|
| 2092 |
-
document.getElementById('micIcon').addEventListener('click', function () {
|
| 2093 |
-
if (!recognition) {
|
| 2094 |
-
alert('Speech recognition is not supported in this browser.');
|
| 2095 |
-
return;
|
| 2096 |
-
}
|
| 2097 |
-
if (this.classList.contains('active')) {
|
| 2098 |
-
stopSpeechRecognition();
|
| 2099 |
-
} else {
|
| 2100 |
-
resetMicModal();
|
| 2101 |
-
this.classList.add('active');
|
| 2102 |
-
recognition.start();
|
| 2103 |
-
}
|
| 2104 |
-
});
|
| 2105 |
-
document.getElementById('increaseQuantity').addEventListener('click', function () {
|
| 2106 |
-
const quantityInput = document.getElementById('quantityInput');
|
| 2107 |
-
let quantity = parseInt(quantityInput.value) || 1;
|
| 2108 |
-
quantityInput.value = quantity + 1;
|
| 2109 |
-
});
|
| 2110 |
-
document.getElementById('decreaseQuantity').addEventListener('click', function () {
|
| 2111 |
-
const quantityInput = document.getElementById('quantityInput');
|
| 2112 |
-
let quantity = parseInt(quantityInput.value) || 1;
|
| 2113 |
-
if (quantity > 1) {
|
| 2114 |
-
quantityInput.value = quantity - 1;
|
| 2115 |
-
}
|
| 2116 |
-
});
|
| 2117 |
document.addEventListener('DOMContentLoaded', function () {
|
| 2118 |
const avatarContainer = document.querySelector('.avatar-dropdown-container');
|
| 2119 |
const dropdownMenu = document.querySelector('.dropdown-menu');
|
|
|
|
| 1976 |
}
|
| 1977 |
form.submit();
|
| 1978 |
}
|
| 1979 |
+
|
| 1980 |
+
|
| 1981 |
+
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1982 |
document.addEventListener('DOMContentLoaded', function () {
|
| 1983 |
const avatarContainer = document.querySelector('.avatar-dropdown-container');
|
| 1984 |
const dropdownMenu = document.querySelector('.dropdown-menu');
|