Update templates/menu.html
Browse files- templates/menu.html +58 -69
templates/menu.html
CHANGED
|
@@ -277,7 +277,7 @@
|
|
| 277 |
transition: color 0.3s ease;
|
| 278 |
}
|
| 279 |
.mic-icon.active {
|
| 280 |
-
color: #
|
| 281 |
}
|
| 282 |
/* Addon Section */
|
| 283 |
.addon-section {
|
|
@@ -625,7 +625,7 @@
|
|
| 625 |
}
|
| 626 |
#micModal .modal-body i#mic-icon-animation {
|
| 627 |
font-size: 2.5rem;
|
| 628 |
-
color: #
|
| 629 |
animation: pulse 2s infinite;
|
| 630 |
}
|
| 631 |
#micModal .modal-body p#mic-status {
|
|
@@ -1230,6 +1230,43 @@
|
|
| 1230 |
font-size: 0.9rem;
|
| 1231 |
}
|
| 1232 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1233 |
</style>
|
| 1234 |
</head>
|
| 1235 |
<body>
|
|
@@ -1901,37 +1938,34 @@
|
|
| 1901 |
});
|
| 1902 |
if (targetCard && buttonContainer) {
|
| 1903 |
const name = buttonContainer.getAttribute('data-item-name');
|
| 1904 |
-
|
| 1905 |
-
const image = buttonContainer.getAttribute('data-item-image2');
|
| 1906 |
const description = buttonContainer.getAttribute('data-item-description');
|
| 1907 |
const category = buttonContainer.getAttribute('data-item-category');
|
| 1908 |
-
|
| 1909 |
-
|
| 1910 |
-
|
| 1911 |
-
|
| 1912 |
-
|
| 1913 |
-
|
| 1914 |
-
|
| 1915 |
-
}
|
| 1916 |
-
}, 1000);
|
| 1917 |
}
|
| 1918 |
-
|
| 1919 |
-
|
| 1920 |
-
|
| 1921 |
localStorage.removeItem('selectedItem');
|
| 1922 |
}
|
| 1923 |
}
|
| 1924 |
|
| 1925 |
-
//
|
| 1926 |
-
|
| 1927 |
-
mediaWrappers.forEach(wrapper => {
|
| 1928 |
const video = wrapper.querySelector('.menu-video');
|
| 1929 |
const image = wrapper.querySelector('.menu-image');
|
| 1930 |
|
| 1931 |
-
//
|
| 1932 |
wrapper.addEventListener('mouseenter', () => {
|
| 1933 |
image.classList.add('hidden');
|
| 1934 |
-
video.classList.add('
|
| 1935 |
video.play().catch(err => {
|
| 1936 |
console.error('Video playback failed:', err);
|
| 1937 |
image.classList.remove('hidden');
|
|
@@ -1949,6 +1983,7 @@
|
|
| 1949 |
let touchTimeout;
|
| 1950 |
wrapper.addEventListener('touchstart', (e) => {
|
| 1951 |
e.preventDefault();
|
|
|
|
| 1952 |
wrapper.classList.add('touched');
|
| 1953 |
image.classList.add('hidden');
|
| 1954 |
video.classList.add('active');
|
|
@@ -1956,17 +1991,11 @@
|
|
| 1956 |
console.error('Video playback failed:', err);
|
| 1957 |
image.classList.remove('hidden');
|
| 1958 |
video.classList.remove('active');
|
| 1959 |
-
});
|
| 1960 |
-
touchTimeout = setTimeout(() => {
|
| 1961 |
-
video.pause();
|
| 1962 |
-
video.classList.remove('active');
|
| 1963 |
-
image.classList.remove('hidden');
|
| 1964 |
wrapper.classList.remove('touched');
|
| 1965 |
-
}
|
| 1966 |
});
|
| 1967 |
wrapper.addEventListener('touchend', () => {
|
| 1968 |
-
|
| 1969 |
-
setTimeout(() => {
|
| 1970 |
video.pause();
|
| 1971 |
video.classList.remove('active');
|
| 1972 |
image.classList.remove('hidden');
|
|
@@ -2144,45 +2173,5 @@
|
|
| 2144 |
}
|
| 2145 |
});
|
| 2146 |
</script>
|
| 2147 |
-
<style>
|
| 2148 |
-
.autocomplete-suggestions {
|
| 2149 |
-
position: absolute;
|
| 2150 |
-
top: 100%;
|
| 2151 |
-
left: 0;
|
| 2152 |
-
right: 0;
|
| 2153 |
-
background-color: #fff;
|
| 2154 |
-
border: 1px solid #ced4da;
|
| 2155 |
-
border-radius: 4px;
|
| 2156 |
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
| 2157 |
-
max-height: 150px;
|
| 2158 |
-
overflow-y: auto;
|
| 2159 |
-
z-index: 1000;
|
| 2160 |
-
display: none;
|
| 2161 |
-
}
|
| 2162 |
-
.autocomplete-suggestion {
|
| 2163 |
-
padding: 8px 12px;
|
| 2164 |
-
cursor: pointer;
|
| 2165 |
-
font-size: 0.9rem;
|
| 2166 |
-
color: #333;
|
| 2167 |
-
transition: background-color 0.2s ease;
|
| 2168 |
-
}
|
| 2169 |
-
.autocomplete-suggestion:hover {
|
| 2170 |
-
background-color: #e6f4ea;
|
| 2171 |
-
}
|
| 2172 |
-
.autocomplete-suggestions::-webkit-scrollbar {
|
| 2173 |
-
width: 6px;
|
| 2174 |
-
}
|
| 2175 |
-
.autocomplete-suggestions::-webkit-scrollbar-track {
|
| 2176 |
-
background: #f1f1f1;
|
| 2177 |
-
}
|
| 2178 |
-
.autocomplete-suggestions::-webkit-scrollbar-thumb {
|
| 2179 |
-
background: #0FAA39;
|
| 2180 |
-
border-radius: 10px;
|
| 2181 |
-
}
|
| 2182 |
-
.autocomplete-suggestions::-webkit-scrollbar-thumb:hover {
|
| 2183 |
-
background: #0D9232;
|
| 2184 |
-
}
|
| 2185 |
-
</style>
|
| 2186 |
</body>
|
| 2187 |
</html>
|
| 2188 |
-
</xaiArtifact>
|
|
|
|
| 277 |
transition: color 0.3s ease;
|
| 278 |
}
|
| 279 |
.mic-icon.active {
|
| 280 |
+
color: #DC3545;
|
| 281 |
}
|
| 282 |
/* Addon Section */
|
| 283 |
.addon-section {
|
|
|
|
| 625 |
}
|
| 626 |
#micModal .modal-body i#mic-icon-animation {
|
| 627 |
font-size: 2.5rem;
|
| 628 |
+
color: #DC3545;
|
| 629 |
animation: pulse 2s infinite;
|
| 630 |
}
|
| 631 |
#micModal .modal-body p#mic-status {
|
|
|
|
| 1230 |
font-size: 0.9rem;
|
| 1231 |
}
|
| 1232 |
}
|
| 1233 |
+
.autocomplete-suggestions {
|
| 1234 |
+
position: absolute;
|
| 1235 |
+
top: 100%;
|
| 1236 |
+
left: 0;
|
| 1237 |
+
right: 0;
|
| 1238 |
+
background-color: #fff;
|
| 1239 |
+
border: 1px solid #ced4da;
|
| 1240 |
+
border-radius: 4px;
|
| 1241 |
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
| 1242 |
+
max-height: 150px;
|
| 1243 |
+
overflow-y: auto;
|
| 1244 |
+
z-index: 1000;
|
| 1245 |
+
display: none;
|
| 1246 |
+
}
|
| 1247 |
+
.autocomplete-suggestion {
|
| 1248 |
+
padding: 8px 12px;
|
| 1249 |
+
cursor: pointer;
|
| 1250 |
+
font-size: 0.9rem;
|
| 1251 |
+
color: #333;
|
| 1252 |
+
transition: background-color 0.2s ease;
|
| 1253 |
+
}
|
| 1254 |
+
.autocomplete-suggestion:hover {
|
| 1255 |
+
background-color: #e6f4ea;
|
| 1256 |
+
}
|
| 1257 |
+
.autocomplete-suggestions::-webkit-scrollbar {
|
| 1258 |
+
width: 6px;
|
| 1259 |
+
}
|
| 1260 |
+
.autocomplete-suggestions::-webkit-scrollbar-track {
|
| 1261 |
+
background: #f1f1f1;
|
| 1262 |
+
}
|
| 1263 |
+
.autocomplete-suggestions::-webkit-scrollbar-thumb {
|
| 1264 |
+
background: #0FAA39;
|
| 1265 |
+
border-radius: 10px;
|
| 1266 |
+
}
|
| 1267 |
+
.autocomplete-suggestions::-webkit-scrollbar-thumb:hover {
|
| 1268 |
+
background: #0D9232;
|
| 1269 |
+
}
|
| 1270 |
</style>
|
| 1271 |
</head>
|
| 1272 |
<body>
|
|
|
|
| 1938 |
});
|
| 1939 |
if (targetCard && buttonContainer) {
|
| 1940 |
const name = buttonContainer.getAttribute('data-item-name');
|
| 1941 |
+
const price = buttonContainer.getAttribute('data-item-price');
|
| 1942 |
+
const image = buttonContainer.getAttribute('data-item-image2') || buttonContainer.getAttribute('data-item-image');
|
| 1943 |
const description = buttonContainer.getAttribute('data-item-description');
|
| 1944 |
const category = buttonContainer.getAttribute('data-item-category');
|
| 1945 |
+
if (section === 'Soft Drinks') {
|
| 1946 |
+
showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
|
| 1947 |
+
} else {
|
| 1948 |
+
showItemDetails(name, price, image, description, section, category);
|
| 1949 |
+
const modal = new bootstrap.Modal(document.getElementById('itemModal'));
|
| 1950 |
+
modal.show();
|
| 1951 |
+
}
|
|
|
|
|
|
|
| 1952 |
}
|
| 1953 |
+
localStorage.removeItem('selectedItem');
|
| 1954 |
+
} catch (err) {
|
| 1955 |
+
console.error('Error processing selected item:', err);
|
| 1956 |
localStorage.removeItem('selectedItem');
|
| 1957 |
}
|
| 1958 |
}
|
| 1959 |
|
| 1960 |
+
// Media wrapper hover and touch events
|
| 1961 |
+
document.querySelectorAll('.media-wrapper').forEach(wrapper => {
|
|
|
|
| 1962 |
const video = wrapper.querySelector('.menu-video');
|
| 1963 |
const image = wrapper.querySelector('.menu-image');
|
| 1964 |
|
| 1965 |
+
// Mouse events for desktop
|
| 1966 |
wrapper.addEventListener('mouseenter', () => {
|
| 1967 |
image.classList.add('hidden');
|
| 1968 |
+
video.classList.add('active');
|
| 1969 |
video.play().catch(err => {
|
| 1970 |
console.error('Video playback failed:', err);
|
| 1971 |
image.classList.remove('hidden');
|
|
|
|
| 1983 |
let touchTimeout;
|
| 1984 |
wrapper.addEventListener('touchstart', (e) => {
|
| 1985 |
e.preventDefault();
|
| 1986 |
+
clearTimeout(touchTimeout);
|
| 1987 |
wrapper.classList.add('touched');
|
| 1988 |
image.classList.add('hidden');
|
| 1989 |
video.classList.add('active');
|
|
|
|
| 1991 |
console.error('Video playback failed:', err);
|
| 1992 |
image.classList.remove('hidden');
|
| 1993 |
video.classList.remove('active');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1994 |
wrapper.classList.remove('touched');
|
| 1995 |
+
});
|
| 1996 |
});
|
| 1997 |
wrapper.addEventListener('touchend', () => {
|
| 1998 |
+
touchTimeout = setTimeout(() => {
|
|
|
|
| 1999 |
video.pause();
|
| 2000 |
video.classList.remove('active');
|
| 2001 |
image.classList.remove('hidden');
|
|
|
|
| 2173 |
}
|
| 2174 |
});
|
| 2175 |
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 2176 |
</body>
|
| 2177 |
</html>
|
|
|