BiryaniHubflaskImplent

Sleeping

App Files Files Community

lokesh341 commited on Apr 3

Commit

0d04669

verified ·

1 Parent(s): 211d39c

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +549 -833

templates/menu.html CHANGED Viewed

@@ -1,16 +1,17 @@
-    <!DOCTYPE html>
-    <html lang="en">
-     <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Menu</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
-    <link rel="preload" href="/static/placeholder.jpg" as="image">
     {% for section, items in ordered_menu.items() %}
         {% for item in items[:1] %}
-            <link rel="preload" href="{{ item.Image1__c }}" as="image" fetchpriority="high">
         {% endfor %}
     {% endfor %}
     <style>
@@ -21,6 +22,7 @@
             padding: 0;
             display: flex;
             flex-direction: column;
         }
         .container {
             max-width: 900px;
@@ -35,92 +37,52 @@
             flex-direction: column;
             opacity: 0;
             transition: opacity 0.3s ease-in-out;
         }
         .menu-card.visible {
             opacity: 1;
         }
         .video-container {
             position: relative;
-            width: 100%;
-            height: 200px;
-            overflow: hidden;
-            border-radius: 15px 15px 0 0;
-            background-color: #000;
-            touch-action: manipulation;
         }
-        .video-container video {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            transition: opacity 0.5s ease;
-            -webkit-user-select: none;
-            user-select: none;
         }
-        .video-container .video-placeholder {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: #f0f0f0;
-            color: #666;
-            font-size: 14px;
         }
-        .video-container .play-button {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 50px;
-            height: 50px;
-            background-color: rgba(0, 0, 0, 0.7);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            z-index: 10;
             opacity: 0;
-            transition: opacity 0.3s ease;
         }
-        .video-container:hover .play-button {
             opacity: 1;
         }
-        .video-container .play-button i {
-            color: white;
-            font-size: 20px;
-            margin-left: 3px;
-        }
-        @media (max-width: 768px) {
-            .video-container .play-button {
-                opacity: 1;
-            }
-            .video-container:hover .play-button {
-                opacity: 1;
-            }
-            .video-container {
-                height: 150px;
-            }
         }
-        .card-title {
             font-size: 1.2rem;
-            font-weight: bold;
             margin: 10px 0;
         }
-        .card-text {
             font-size: 1rem;
-            color: #6c757d;
         }
         .addbutton .btn {
             background-color: #28a745;
@@ -177,53 +139,6 @@
             box-shadow: none;
             transform: scale(0.98);
         }
-        .view-cart-container {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            z-index: 999;
-            display: flex;
-            align-items: center;
-        }
-        .view-cart-button {
-            background-color: #0FAA39;
-            color: #fff;
-            padding: 10px 20px;
-            border-radius: 30px;
-            font-size: 1rem;
-            font-weight: bold;
-            text-decoration: none;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            transition: background-color 0.3s ease, transform 0.2s ease;
-        }
-        .view-cart-button:hover {
-            background-color: #109835;
-            text-decoration: none;
-            color: #fff;
-            transform: scale(1.05);
-        }
-        .cart-icon-badge {
-            background-color: #fff;
-            color: #0FAA39;
-            border-radius: 50%;
-            width: 24px;
-            height: 24px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 12px;
-            font-weight: bold;
-            margin-left: 5px;
-            transition: background-color 0.3s ease, color 0.3s ease;
-        }
-        .cart-icon-badge.active {
-            background-color: #ffcc00;
-            color: #0FAA39;
-        }
         .avatar-dropdown-container {
             position: absolute;
             right: 10px;
@@ -237,7 +152,7 @@
             width: 40px;
             height: 40px;
             border-radius: 50%;
-            background-color: #5bbfc1;
             cursor: pointer;
             display: flex;
             align-items: center;
@@ -250,25 +165,28 @@
             position: absolute;
             right: 0;
             top: 100%;
-            background-color: #fff;
             border-radius: 5px;
             width: 220px;
             box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
             display: none;
         }
         .dropdown-menu .dropdown-item {
             padding: 12px 16px;
             text-decoration: none;
             color: #333;
-            border-bottom: 1px solid #ddd;
             display: block;
             font-size: 15px;
         }
         .dropdown-menu .dropdown-item:last-child {
             border-bottom: none;
         }
         .dropdown-menu .dropdown-item:hover {
-            background-color: #f1f1f1;
         }
         .fixed-top-bar {
             position: relative;
@@ -293,10 +211,11 @@
             align-items: center;
             width: 300px;
             max-width: 90%;
         }
         .search-bar-container input {
             width: 100%;
-            padding: 8px 15px 8px 40px;
             font-size: 16px;
             border-radius: 25px;
             border: none;
@@ -313,6 +232,17 @@
             font-size: 18px;
             color: #888;
         }
         .autocomplete-suggestions {
             position: absolute;
             top: 100%;
@@ -338,7 +268,7 @@
         }
         .addon-section {
             background-color: #fff;
-            border: 2px solid #6c757d;
             border-radius: 8px;
             padding: 12px;
             margin-bottom: 10px;
@@ -418,11 +348,12 @@
             font-weight: bold;
             text-align: center;
             margin-bottom: 5px;
         }
         .modal-body #modal-price {
             font-size: 16px;
-            font-weight: bold;
-            color: #6c757d;
             text-align: center;
             margin-bottom: 10px;
         }
@@ -491,6 +422,7 @@
             font-size: 0.9rem;
             font-weight: bold;
             margin-bottom: 5px;
         }
         .item-details p {
             font-size: 0.85rem;
@@ -587,6 +519,86 @@
         .modal-body::-webkit-scrollbar-thumb:hover {
             background: #0D9232;
         }
         @media (max-width: 576px) {
             .fixed-top-bar {
                 height: 60px;
@@ -600,7 +612,7 @@
                 transform: translateY(-50%);
             }
             .search-bar-container input {
-                padding: 6px 12px 6px 35px;
                 font-size: 14px;
                 border-radius: 20px;
             }
@@ -608,6 +620,10 @@
                 left: 12px;
                 font-size: 16px;
             }
             .avatar-dropdown-container {
                 right: 10px;
             }
@@ -725,20 +741,28 @@
                 height: 18px;
                 font-size: 9px;
             }
-            .view-cart-button {
-                padding: 8px 16px;
                 font-size: 14px;
             }
             .cart-icon-badge {
-                width: 20px;
-                height: 20px;
                 font-size: 10px;
             }
         }
     </style>
 </head>
 <body>
     <div class="fixed-top-bar">
         <div class="avatar-dropdown-container">
             <div class="avatar-icon">
@@ -753,6 +777,7 @@
         <div class="search-bar-container">
             <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
             <i class="bi bi-search search-icon"></i>
             <div id="autocompleteSuggestions" class="autocomplete-suggestions"></div>
         </div>
     </div>
@@ -782,96 +807,100 @@
                         <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
                         <div id="descriptionSuggestions" class="autocomplete-suggestions"></div>
                     </div>
-                    <button type="submit" class="btn btn-primary">Submit</button>
                 </form>
             </div>
         {% else %}
-            {% for section, items in ordered_menu.items() %}
-                <h3>{{ section }}</h3>
-                <div class="row">
-                    {% for item in items %}
-                        <div class="col-md-6 mb-4">
-                            <div class="card menu-card">
-                                <div class="video-container">
-                                    <video
-                                        id="video-{{ loop.index }}"
-                                        preload="metadata"
-                                        poster="{{ item.Image1__c if item.Image1__c else '/static/placeholder.jpg' }}"
-                                        data-src="{{ item.Video1__c }}"
-                                        muted
-                                        loop
-                                    >
-                                        <source src="{{ item.Video1__c }}" type="video/mp4">
-                                        Your browser does not support the video tag.
-                                    </video>
-                                    {% if not item.Video1__c %}
-                                        <div class="video-placeholder">
-                                            No video available
-                                        </div>
-                                    {% endif %}
-                                    <div class="play-button" onclick="togglePlay(this)">
-                                        <i class="bi bi-play-fill"></i>
                                     </div>
-                                </div>
-                                <div class="addbutton">
-                                    <div class="card-body d-flex align-items-center justify-content-between">
-                                        <div>
-                                            <h5 class="card-title">{{ item.Name }}</h5>
-                                            <p class="card-text">${{ item.Price__c }}</p>
-                                        </div>
-                                        <div class="d-flex flex-column align-item-center justify-content-center">
-                                            <div class="button-container" data-item-name="{{ item.Name }}" data-item-price="{{ item.Price__c }}" data-item-image="{{ item.Image1__c }}" data-item-section="{{ item.Section__c }}" data-item-category="{{ selected_category }}">
-                                                {% if item.Section__c == 'Soft Drinks' %}
-                                                    <button class="btn btn-primary add-to-cart-btn" onclick="handleSoftDrinkAdd(this)">ADD</button>
-                                                    <div class="quantity-selector" style="display: none;">
-                                                        <button class="btn btn-outline-secondary decrease-btn" onclick="decreaseQuantity(this)">-</button>
-                                                        <select class="quantity-to-remove">
-                                                            {% for i in range(1, 21) %}
-                                                                <option value="{{ i }}">{{ i }}</option>
-                                                            {% endfor %}
-                                                        </select>
-                                                        <span class="quantity-display">0</span>
-                                                        <button class="btn btn-outline-secondary increase-btn" onclick="increaseQuantity(this)">+</button>
-                                                        <select class="quantity-to-add">
-                                                            {% for i in range(1, 21) %}
-                                                                <option value="{{ i }}">{{ i }}</option>
-                                                            {% endfor %}
-                                                        </select>
-                                                    </div>
-                                                {% else %}
-                                                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal"
-                                                        onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
-                                                        ADD
-                                                    </button>
-                                                {% endif %}
-                                                {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c !='Soft Drinks' %}
-                                                    <span class="customisable-text">Customisable</span>
-                                                {% endif %}
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="toggle-details" data-item-name="{{ item.Name }}">Show Details</div>
-                                <div class="item-details" id="details-{{ item.Name | replace(' ', '-') }}"></div>
                             </div>
-                        </div>
-                    {% endfor %}
-                </div>
-            {% endfor %}
         {% endif %}
     </div>
-    <div class="view-cart-container">
-        <a href="{{ url_for('cart.cart') }}" class="view-cart-button">
-            <i class="bi bi-cart"></i>
-            view Cart
-            <span id="cart-item-count" class="cart-icon-badge {% if cart_item_count > 0 %}active{% endif %}">
-                {{ cart_item_count if cart_item_count > 0 else '' }}
-            </span>
         </a>
     </div>
     <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
@@ -880,33 +909,14 @@
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image">
                     <h5 id="modal-name" class="fw-bold text-center"></h5>
                     <p id="modal-price" class="text-muted text-center"></p>
                     <p id="modal-description" class="text-secondary"></p>
-                    <p class="nutritional-info" id="modal-nutritional-info"></p>
-                    <div id="first-row">
-                        <h6 id="first-row-title" style="display: none;">Customization Options</h6>
-                        <div class="addon-section">
-                            <h6>Choose Preparation Style</h6>
-                            <div id="prep-style-options"></div>
-                        </div>
-                        <div class="addon-section">
-                            <h6>Type</h6>
-                            <div id="type-options"></div>
-                        </div>
-                        <div class="addon-section">
-                            <h6>Spice Level</h6>
-                            <div id="spice-level-options"></div>
-                        </div>
-                    </div>
                     <div id="modal-addons" class="modal-addons mt-4">
-                        <h6 id="addons-title">Customization Options</h6>
                         <div id="addons-list" class="addons-container">Loading customization options...</div>
                     </div>
                     <div class="mt-4">
                         <h6>Custom Request</h6>
                         <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
@@ -927,29 +937,12 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
-        function togglePlay(button) {
-            const videoContainer = button.closest('.video-container');
-            const video = videoContainer.querySelector('video');
-            if (video.paused) {
-                if (!video.src && video.dataset.src) {
-                    video.src = video.dataset.src;
-                }
-                video.play()
-                    .then(() => {
-                        button.innerHTML = '<i class="bi bi-pause-fill"></i>';
-                    })
-                    .catch(e => console.log('Video play error:', e));
-            } else {
-                video.pause();
-                button.innerHTML = '<i class="bi bi-play-fill"></i>';
-            }
-        }
         const menuItems = [
             {% for section, items in ordered_menu.items() %}
                 {% for item in items %}
-                    "{{ item.Name }}",
                 {% endfor %}
             {% endfor %}
         ];
@@ -1063,6 +1056,49 @@
             }
         };
         function addToCartLocalStorage(payload) {
             let cart = JSON.parse(localStorage.getItem('cart')) || [];
             const existingItem = cart.find(item =>
@@ -1071,7 +1107,7 @@
                 JSON.stringify(item.addons) === JSON.stringify(payload.addons)
             );
             if (existingItem) {
-                existingItem.quantity += payload.quantity;
             } else {
                 cart.push(payload);
             }
@@ -1101,99 +1137,211 @@
             return JSON.parse(localStorage.getItem('cart')) || [];
         }
-        document.addEventListener('DOMContentLoaded', function () {
-            const videoContainers = document.querySelectorAll('.video-container');
-            videoContainers.forEach(container => {
-                const video = container.querySelector('video');
-                const playButton = container.querySelector('.play-button');
-                const observer = new IntersectionObserver((entries) => {
-                    entries.forEach(entry => {
-                        if (entry.isIntersecting && video.dataset.src && !video.src) {
-                            video.src = video.dataset.src;
-                            observer.unobserve(entry.target);
-                        }
-                    });
-                }, {
-                    rootMargin: '200px',
-                    threshold: 0.1
-                });
-                observer.observe(container);
-                container.addEventListener('mouseenter', () => {
-                    if (window.innerWidth > 768) {
-                        if (video.src || video.dataset.src) {
-                            if (!video.src) video.src = video.dataset.src;
-                            video.play().catch(e => console.log('Autoplay prevented:', e));
-                        }
-                    }
-                });
-                container.addEventListener('mouseleave', () => {
-                    if (window.innerWidth > 768) {
-                        if (!video.paused) {
-                            video.pause();
-                            if (playButton) {
-                                playButton.innerHTML = '<i class="bi bi-play-fill"></i>';
-                            }
-                        }
-                    }
-                });
-                container.addEventListener('touchstart', (e) => {
-                    e.preventDefault();
-                    if (window.innerWidth <= 768) {
-                        if (video.src || video.dataset.src) {
-                            if (!video.src) video.src = video.dataset.src;
-                            if (video.paused) {
-                                video.play()
-                                    .then(() => {
-                                        if (playButton) {
-                                            playButton.innerHTML = '<i class="bi bi-pause-fill"></i>';
-                                        }
-                                    })
-                                    .catch(e => console.log('Video play error:', e));
-                            } else {
-                                video.pause();
-                                if (playButton) {
-                                    playButton.innerHTML = '<i class="bi bi-play-fill"></i>';
-                                }
-                            }
-                        }
-                    }
-                }, { passive: false });
-            });
-            const avatarContainer = document.querySelector('.avatar-dropdown-container');
-            const dropdownMenu = document.querySelector('.dropdown-menu');
-            avatarContainer.addEventListener('click', function (event) {
-                event.stopPropagation();
-                dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
-            });
-            document.addEventListener('click', function (event) {
-                if (!avatarContainer.contains(event.target)) {
-                    dropdownMenu.style.display = 'none';
-                }
-            });
-            const dropdownItems = document.querySelectorAll('.dropdown-item');
-            dropdownItems.forEach(item => {
-                item.addEventListener('click', function () {
-                    dropdownMenu.style.display = 'none';
-                });
-            });
-            const menuCards = document.querySelectorAll('.menu-card');
-            menuCards.forEach(card => {
-                const itemName = card.querySelector('.card-title').innerText;
-                const detailsDiv = card.querySelector('.item-details');
-                const detailsData = menuItemDetails[itemName];
-                if (detailsData) {
                     detailsDiv.innerHTML = `
                         <h6>Ingredients</h6>
                         <p>${detailsData.ingredients}</p>
@@ -1211,7 +1359,6 @@
                     detailsDiv.innerHTML = '<p>No details available for this item.</p>';
                 }
             });
             const cardObserver = new IntersectionObserver((entries, observer) => {
                 entries.forEach(entry => {
                     if (entry.isIntersecting) {
@@ -1224,9 +1371,32 @@
                 rootMargin: '0px',
                 threshold: 0.1
             });
             menuCards.forEach(card => cardObserver.observe(card));
             const toggleLinks = document.querySelectorAll('.toggle-details');
             toggleLinks.forEach(link => {
                 link.addEventListener('click', function () {
@@ -1236,16 +1406,13 @@
                     this.innerText = detailsDiv.classList.contains('show') ? 'Hide Details' : 'Show Details';
                 });
             });
             const categoryButtons = document.querySelectorAll('.category-button');
             const categoryForm = document.getElementById('categoryForm');
             const selectedCategoryInput = document.getElementById('selectedCategoryInput');
             if (!selectedCategoryInput.value) {
                 selectedCategoryInput.value = "All";
                 document.querySelector('.category-button[data-category="All"]').classList.add('selected');
             }
             categoryButtons.forEach(button => {
                 button.addEventListener('click', function () {
                     categoryButtons.forEach(btn => btn.classList.remove('selected'));
@@ -1254,15 +1421,12 @@
                     categoryForm.submit();
                 });
             });
             const searchBar = document.getElementById('searchBar');
             const suggestionsContainer = document.getElementById('autocompleteSuggestions');
             searchBar.addEventListener('input', function () {
                 const input = this.value.trim().toLowerCase();
                 suggestionsContainer.innerHTML = '';
                 suggestionsContainer.style.display = 'none';
                 if (input) {
                     const filteredItems = menuItems.filter(item =>
                         item.toLowerCase().includes(input)
@@ -1284,19 +1448,15 @@
                 }
                 filterMenu();
             });
             document.addEventListener('click', function (event) {
                 if (!searchBar.contains(event.target) && !suggestionsContainer.contains(event.target)) {
                     suggestionsContainer.style.display = 'none';
                 }
             });
             const descriptionTextarea = document.getElementById('custom-dish-description');
             const descriptionSuggestions = document.getElementById('descriptionSuggestions');
             if (descriptionTextarea && descriptionSuggestions) {
                 let usedIngredients = new Set();
                 function updateUsedIngredients() {
                     const inputText = descriptionTextarea.value.trim();
                     usedIngredients.clear();
@@ -1309,16 +1469,13 @@
                         });
                     }
                 }
                 descriptionTextarea.addEventListener('input', function () {
                     const inputText = this.value.trim();
                     const words = inputText.split(/,\s*/);
                     const lastWord = words[words.length - 1].trim().toLowerCase();
                     descriptionSuggestions.innerHTML = '';
                     descriptionSuggestions.style.display = 'none';
                     updateUsedIngredients();
                     if (lastWord) {
                         const filteredIngredients = ingredientsList.filter(ingredient =>
                             ingredient.toLowerCase().includes(lastWord) && !usedIngredients.has(ingredient)
@@ -1343,14 +1500,12 @@
                         }
                     }
                 });
                 document.addEventListener('click', function (event) {
                     if (!descriptionTextarea.contains(event.target) && !descriptionSuggestions.contains(event.target)) {
                         descriptionSuggestions.style.display = 'none';
                     }
                 });
             }
             fetch('/cart/get')
                 .then(response => {
                     if (!response.ok) {
@@ -1372,17 +1527,15 @@
                     const cart = getCartLocalStorage();
                     updateCartUI(cart);
                 });
-            const preloadedImages = document.querySelectorAll('link[rel="preload"]');
-            preloadedImages.forEach(link => {
-                const img = new Image();
-                img.src = link.href;
             });
             const decreaseBtn = document.getElementById('decreaseQuantity');
             const increaseBtn = document.getElementById('increaseQuantity');
             const quantityInput = document.getElementById('quantityInput');
             decreaseBtn.addEventListener('click', function () {
                 let currentQuantity = parseInt(quantityInput.value);
                 if (currentQuantity > 1) {
@@ -1390,32 +1543,43 @@
                     quantityInput.value = currentQuantity;
                 }
             });
             increaseBtn.addEventListener('click', function () {
                 let currentQuantity = parseInt(quantityInput.value);
                 currentQuantity++;
                 quantityInput.value = currentQuantity;
             });
-        });
-        function debounce(func, wait) {
-            let timeout;
-            return function (...args) {
-                clearTimeout(timeout);
-                timeout = setTimeout(() => func.apply(this, args), wait);
-            };
-        }
         function filterMenu() {
             const input = document.getElementById('searchBar').value.trim().toLowerCase();
             const sections = document.querySelectorAll('h3');
             const items = document.querySelectorAll('.menu-card');
             let matchedSections = new Set();
             items.forEach(item => {
                 const itemName = item.querySelector('.card-title').innerText.toLowerCase();
                 const itemSection = item.closest('.row').previousElementSibling.innerText.toLowerCase();
                 if (itemName.includes(input) || (itemSection && itemSection.includes(input))) {
                     item.style.display = 'block';
                     item.classList.add('visible');
@@ -1424,7 +1588,6 @@
                     item.style.display = 'none';
                 }
             });
             sections.forEach(section => {
                 const sectionRow = section.nextElementSibling;
                 if (matchedSections.has(sectionRow)) {
@@ -1435,7 +1598,6 @@
                     sectionRow.style.display = 'none';
                 }
             });
             if (!input) {
                 sections.forEach(section => {
                     section.style.display = 'block';
@@ -1452,22 +1614,8 @@
             document.getElementById('modal-name').innerText = name;
             document.getElementById('modal-price').innerText = `$${price}`;
             const modalImg = document.getElementById('modal-img');
-            if (section.toLowerCase() === 'soft drinks') {
-                modalImg.style.display = 'none';
-            } else {
-                modalImg.style.display = 'block';
-                modalImg.src = image || '/static/placeholder.jpg';
-            }
             document.getElementById('modal-description').innerText = description || 'No description available.';
-            const nutritionalInfoEl = document.getElementById('modal-nutritional-info');
-            const itemDetails = menuItemDetails[name];
-            if (itemDetails && itemDetails.nutritionalInfo) {
-                const { calories, protein, carbs, fats, fiber, sugar } = itemDetails.nutritionalInfo;
-                nutritionalInfoEl.innerText = `[Energy: ${calories} kcal, Protein: ${protein}g, Carbohydrates: ${carbs}g, Fiber: ${fiber}g, Fat: ${fats}g, Sugar: ${sugar}g]`;
-            } else {
-                nutritionalInfoEl.innerText = '[No nutritional info available.]';
-            }
             document.getElementById('addons-list').innerHTML = 'Loading customization options...';
             document.getElementById('modal-instructions').value = '';
             const modalSectionEl = document.getElementById('modal-section');
@@ -1475,148 +1623,28 @@
             modalSectionEl.setAttribute('data-category', selectedCategory);
             document.getElementById('quantityInput').value = 1;
-            const prepStyleOptions = document.getElementById('prep-style-options');
-            const typeOptions = document.getElementById('type-options');
-            const spiceLevelOptions = document.getElementById('spice-level-options');
-            const firstRow = document.getElementById('first-row');
-            const firstRowTitle = document.getElementById('first-row-title');
-            const addonsTitle = document.getElementById('addons-title');
-            prepStyleOptions.innerHTML = '';
-            typeOptions.innerHTML = '';
-            spiceLevelOptions.innerHTML = '';
-            if (section.toLowerCase() === 'starters') {
-                firstRow.style.display = 'block';
-                firstRowTitle.style.display = 'block';
-                addonsTitle.style.display = 'none';
-            } else {
-                firstRow.style.display = 'none';
-                firstRowTitle.style.display = 'none';
-                addonsTitle.style.display = 'block';
-            }
-            const addonsList = document.getElementById('addons-list');
-            addonsList.innerHTML = '';
-            const dummySections = [
-                { name: "Beverages", options: ["Sprite ($3)", "Thums Up ($3)", "Virgin Mojito ($3)", "Lemonade ($3)", "Blue Lagoon Mocktail ($3)"] },
-                { name: "Sauces", options: ["Mint Chutney", "Tomato Sauce"] },
-                { name: "Extra Toppings", options: ["Cheese ($2)", "Olives ($1)", "Jalapenos ($1)", "Mushrooms ($2)", "Peppers ($1)"] },
-                { name: "Sides", options: ["Fries ($3)", "Salad ($2)", "Garlic Bread ($3)", "Onion Rings ($2)", "Coleslaw ($2)"] },
-                { name: "Desserts", options: ["Ice Cream ($3)", "Brownie ($3)", "Cheesecake ($4)", "Gulab Jamun ($3)", "Rasmalai ($4)"] }
-            ];
-            dummySections.forEach(addon => {
-                const sectionDiv = document.createElement('div');
-                sectionDiv.classList.add('addon-section');
-                sectionDiv.setAttribute('data-addon-name', addon.name);
-                const title = document.createElement('h6');
-                title.innerText = addon.name;
-                sectionDiv.appendChild(title);
-                const optionsContainer = document.createElement('div');
-                addon.options.forEach((option, index) => {
-                    const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
-                    const listItem = document.createElement('div');
-                    listItem.classList.add('form-check');
-                    listItem.innerHTML = `
-                        <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
-                               data-name="${option}" data-group="${addon.name}" data-price="0">
-                        <label class="form-check-label" for="${optionId}">
-                            ${option}
-                        </label>
-                    `;
-                    optionsContainer.appendChild(listItem);
-                });
-                sectionDiv.appendChild(optionsContainer);
-                addonsList.appendChild(sectionDiv);
-            });
             fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
                 .then(response => response.json())
                 .then(data => {
                     const addonsList = document.getElementById('addons-list');
                     addonsList.innerHTML = '';
                     if (!data.success || !data.addons || data.addons.length === 0) {
                         addonsList.innerHTML = '<p>No customization options available.</p>';
-                        addonsTitle.style.display = 'none';
                         return;
                     }
-                    if (section.toLowerCase() === 'starters') {
-                        data.addons.forEach(addon => {
-                            if (addon.name.toLowerCase() === "choose preparation style") {
-                                addon.options.forEach(option => {
-                                    const optionId = `addon-prep-style-${option}`;
-                                    const optionHTML = `
-                                        <div class="form-check">
-                                            <input type="checkbox" class="form-check-input" id="${optionId}" value="${option}" data-name="${option}" data-group="Choose Preparation Style">
-                                            <label class="form-check-label" for="${optionId}">
-                                                ${option}
-                                            </label>
-                                        </div>
-                                    `;
-                                    prepStyleOptions.innerHTML += optionHTML;
-                                });
-                            }
-                            if (addon.name.toLowerCase() === "type") {
-                                addon.options.forEach(option => {
-                                    const optionId = `addon-type-${option}`;
-                                    const optionHTML = `
-                                        <div class="form-check">
-                                            <input type="checkbox" class="form-check-input" id="${optionId}" value="${option}" data-name="${option}" data-group="Type">
-                                            <label class="form-check-label" for="${optionId}">
-                                                ${option}
-                                            </label>
-                                        </div>
-                                    `;
-                                    typeOptions.innerHTML += optionHTML;
-                                });
-                            }
-                            if (addon.name.toLowerCase() === "spice level") {
-                                addon.options.forEach(option => {
-                                    const optionId = `addon-spice-level-${option}`;
-                                    const optionHTML = `
-                                        <div class="form-check">
-                                            <input type="checkbox" class="form-check-input spice-level-option" id="${optionId}" value="${option}" data-name="${option}" data-group="Spice Level">
-                                            <label class="form-check-label" for="${optionId}">
-                                                ${option}
-                                            </label>
-                                        </div>
-                                    `;
-                                    spiceLevelOptions.innerHTML += optionHTML;
-                                });
-                            }
-                        });
-                    }
                     data.addons.forEach(addon => {
-                        if (section.toLowerCase() === 'starters' &&
-                            (addon.name.toLowerCase() === "type" ||
-                             addon.name.toLowerCase() === "spice level" ||
-                             addon.name.toLowerCase() === "choose preparation style")) {
-                            return;
-                        }
                         const sectionDiv = document.createElement('div');
                         sectionDiv.classList.add('addon-section');
-                        sectionDiv.setAttribute('data-addon-name', addon.name);
                         const title = document.createElement('h6');
                         title.innerText = addon.name;
                         sectionDiv.appendChild(title);
                         const optionsContainer = document.createElement('div');
                         addon.options.forEach((option, index) => {
                             const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
                             const listItem = document.createElement('div');
                             listItem.classList.add('form-check');
                             listItem.innerHTML = `
-                                <input type="checkbox" class="form-check-input ${addon.name.toLowerCase() === 'spice level' ? 'spice-level-option' : 'addon-option'}" id="${optionId}" value="${option}"
                                        data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
                                 <label class="form-check-label" for="${optionId}">
                                     ${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}
@@ -1627,66 +1655,23 @@
                         sectionDiv.appendChild(optionsContainer);
                         addonsList.appendChild(sectionDiv);
                     });
-                    const startersOrder = [
-                        "Select Dip/Sauce",
-                        "Extra Add-ons",
-                        "Make it a Combo"
-                    ];
-                    const desiredOrder = [
-                        "Spice Level",
-                        "Choose Preparation Style",
-                        "Select Dip/Sauce",
-                        "Extra Add-ons",
-                        "Make it a Combo",
-                        "Type"
-                    ];
-                    const orderToUse = section.toLowerCase() === 'starters' ? startersOrder : desiredOrder;
-                    const sections = Array.from(addonsList.children);
-                    addonsList.innerHTML = '';
-                    orderToUse.forEach(sectionName => {
-                        const section = sections.find(s => s.getAttribute('data-addon-name') === sectionName);
-                        if (section) {
-                            addonsList.appendChild(section);
-                        }
-                    });
-                    sections.forEach(section => {
-                        if (!orderToUse.includes(section.getAttribute('data-addon-name'))) {
-                            addonsList.appendChild(section);
-                        }
-                    });
                 })
                 .catch(err => {
                     console.error('Error fetching add-ons:', err);
                     document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
-                    addonsTitle.style.display = 'none';
                 });
         }
         document.addEventListener('click', function(event) {
-            if (event.target.classList.contains('spice-level-option') || event.target.classList.contains('addon-option')) {
                 handleAddonClick(event.target);
             }
         });
         function handleAddonClick(checkbox) {
             const groupName = checkbox.getAttribute('data-group');
-            const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it a Combo", "Beverages", "Sauces"].includes(groupName);
-            if (groupName.toLowerCase() === "spice level") {
-                const allSpiceLevelCheckboxes = document.querySelectorAll('.spice-level-option');
-                allSpiceLevelCheckboxes.forEach(otherCheckbox => {
-                    if (otherCheckbox !== checkbox) {
-                        otherCheckbox.checked = false;
-                    }
-                });
-            }
-            else if (!isMultiSelectGroup) {
                 const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
                 checkboxes.forEach(otherCheckbox => {
                     if (otherCheckbox !== checkbox) {
@@ -1708,41 +1693,15 @@
             const section = modalSectionEl.getAttribute('data-section');
             const selectedCategory = modalSectionEl.getAttribute('data-category');
             if (!itemName || !itemPrice || !section || !itemImage) {
-                console.error('Missing data for cart item:', { itemName, itemPrice, section, itemImage});
                 return;
             }
-            let selectedAddOns = [];
-            const addonsListOptions = document.querySelectorAll('#addons-list .addon-option');
-            addonsListOptions.forEach(option => {
-                if (option.checked) {
-                    selectedAddOns.push({
-                        name: option.getAttribute('data-name') || 'Default Name',
-                        price: parseFloat(option.getAttribute('data-price') || 0)
-                    });
-                }
-            });
-            if (section.toLowerCase() === 'starters') {
-                const prepStyleOptions = Array.from(
-                    document.querySelectorAll('#prep-style-options input[type="checkbox"]:checked')
-                ).map(option => ({
-                    name: option.getAttribute('data-name') || 'Default Prep Style',
-                    price: 0
-                }));
-                const typeOptions = Array.from(
-                    document.querySelectorAll('#type-options input[type="checkbox"]:checked')
-                ).map(option => ({
-                    name: option.getAttribute('data-name') || 'Default Type',
-                    price: 0
-                }));
-                const spiceLevelOption = document.querySelector('#spice-level-options input[type="checkbox"].spice-level-option:checked');
-                const spiceLevelOptions = spiceLevelOption ? [{
-                    name: spiceLevelOption.getAttribute('data-name') || 'Default Spice Level',
-                    price: 0
-                }] : [];
-                selectedAddOns = [...selectedAddOns, ...prepStyleOptions, ...typeOptions, ...spiceLevelOptions];
-            }
             const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
             const instructions = document.getElementById('modal-instructions').value;
             const cartPayload = {
@@ -1755,6 +1714,7 @@
                 instructions: instructions,
                 quantity: quantity
             };
             fetch('/cart/add', {
                 method: 'POST',
                 headers: {
@@ -1762,12 +1722,7 @@
                 },
                 body: JSON.stringify(cartPayload)
             })
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error(`HTTP error! Status: ${response.status}`);
-                }
-                return response.json();
-            })
             .then(data => {
                 if (data.success) {
                     alert('Item added to cart successfully!');
@@ -1782,7 +1737,6 @@
             })
             .catch(err => {
                 console.error('Error adding item to cart:', err);
-                alert('An error occurred while adding the item to the cart: ' + err.message);
                 const cart = addToCartLocalStorage(cartPayload);
                 updateCartUI(cart);
                 const modal = document.getElementById('itemModal');
@@ -1790,244 +1744,6 @@
                 modalInstance.hide();
             });
         }
-        function handleSoftDrinkAdd(button) {
-            const buttonContainer = button.closest('.button-container');
-            const quantitySelector = buttonContainer.querySelector('.quantity-selector');
-            const addButton = buttonContainer.querySelector('.add-to-cart-btn');
-            const quantityDisplay = quantitySelector.querySelector('.quantity-display');
-            const quantityToAddSelect = quantitySelector.querySelector('.quantity-to-add');
-            const quantityToAdd = parseInt(quantityToAddSelect.value);
-            const itemName = buttonContainer.getAttribute('data-item-name');
-            const itemPrice = parseFloat(buttonContainer.getAttribute('data-item-price'));
-            const itemImage = buttonContainer.getAttribute('data-item-image');
-            const section = buttonContainer.getAttribute('data-item-section');
-            const selectedCategory = buttonContainer.getAttribute('data-item-category');
-            addButton.style.display = 'none';
-            quantitySelector.style.display = 'flex';
-            let currentQuantity = parseInt(quantityDisplay.innerText) || 0;
-            currentQuantity += quantityToAdd;
-            quantityDisplay.innerText = currentQuantity;
-            const cartPayload = {
-                itemName: itemName,
-                itemPrice: itemPrice,
-                itemImage: itemImage,
-                section: section,
-                category: selectedCategory,
-                addons: [],
-                instructions: '',
-                quantity: quantityToAdd
-            };
-            button.disabled = true;
-            fetch('/cart/add', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(cartPayload)
-            })
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error(`HTTP error! Status: ${response.status}`);
-                }
-                return response.json();
-            })
-            .then(data => {
-                if (data.success) {
-                    alert(`Added ${quantityToAdd} item(s) to cart successfully!`);
-                    updateCartUI(data.cart);
-                } else {
-                    console.error('Failed to add item to cart:', data.error);
-                    alert(data.error || 'Failed to add item to cart.');
-                    currentQuantity -= quantityToAdd;
-                    quantityDisplay.innerText = currentQuantity;
-                }
-            })
-            .catch(err => {
-                console.error('Error adding item to cart:', err);
-                alert('An error occurred while adding the item to the cart: ' + err.message);
-                const cart = addToCartLocalStorage(cartPayload);
-                updateCartUI(cart);
-            })
-            .finally(() => {
-                button.disabled = false;
-            });
-        }
-        function increaseQuantity(button) {
-            const buttonContainer = button.closest('.button-container');
-            const quantityDisplay = buttonContainer.querySelector('.quantity-display');
-            const quantityToAddSelect = buttonContainer.querySelector('.quantity-to-add');
-            const quantityToAdd = parseInt(quantityToAddSelect.value);
-            const itemName = buttonContainer.getAttribute('data-item-name');
-            const itemPrice = parseFloat(buttonContainer.getAttribute('data-item-price'));
-            const itemImage = buttonContainer.getAttribute('data-item-image');
-            const section = buttonContainer.getAttribute('data-item-section');
-            const selectedCategory = buttonContainer.getAttribute('data-item-category');
-            let currentQuantity = parseInt(quantityDisplay.innerText) || 0;
-            currentQuantity += quantityToAdd;
-            quantityDisplay.innerText = currentQuantity;
-            const cartPayload = {
-                itemName: itemName,
-                itemPrice: itemPrice,
-                itemImage: itemImage,
-                section: section,
-                category: selectedCategory,
-                addons: [],
-                instructions: '',
-                quantity: quantityToAdd
-            };
-            fetch('/cart/add', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(cartPayload)
-            })
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error(`HTTP error! Status: ${response.status}`);
-                }
-                return response.json();
-            })
-            .then(data => {
-                if (data.success) {
-                    alert(`Added ${quantityToAdd} item(s) to cart successfully!`);
-                    updateCartUI(data.cart);
-                } else {
-                    console.error('Failed to add item to cart:', data.error);
-                    alert(data.error || 'Failed to add item to cart.');
-                    currentQuantity -= quantityToAdd;
-                    quantityDisplay.innerText = currentQuantity;
-                }
-            })
-            .catch(err => {
-                console.error('Error adding item to cart:', err);
-                alert('An error occurred while adding the item to the cart: ' + err.message);
-                const cart = addToCartLocalStorage(cartPayload);
-                updateCartUI(cart);
-            });
-        }
-        function decreaseQuantity(button) {
-            const buttonContainer = button.closest('.button-container');
-            const quantityDisplay = buttonContainer.querySelector('.quantity-display');
-            const quantityToRemoveSelect = buttonContainer.querySelector('.quantity-to-remove');
-            const quantityToRemove = parseInt(quantityToRemoveSelect.value);
-            const addButton = buttonContainer.querySelector('.add-to-cart-btn');
-            const quantitySelector = buttonContainer.querySelector('.quantity-selector');
-            let currentQuantity = parseInt(quantityDisplay.innerText);
-            if (currentQuantity <= quantityToRemove) {
-                const itemName = buttonContainer.getAttribute('data-item-name');
-                fetch(`/cart/remove?item_name=${encodeURIComponent(itemName)}&quantity=${currentQuantity}&instructions=&addons=[]`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    }
-                })
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error(`HTTP error! Status: ${response.status}`);
-                    }
-                    return response.json();
-                })
-                .then(data => {
-                    if (data.success) {
-                        updateCartUI(data.cart);
-                        addButton.style.display = 'block';
-                        quantitySelector.style.display = 'none';
-                        quantityDisplay.innerText = 0;
-                    } else {
-                        console.error('Failed to remove item from cart:', data.error);
-                        alert(data.error || 'Failed to remove item from cart.');
-                    }
-                })
-                .catch(err => {
-                    console.error('Error removing item from cart:', err);
-                    alert('An error occurred while removing the item from the cart: ' + err.message);
-                    const cart = removeFromCartLocalStorage(itemName, currentQuantity, '', []);
-                    updateCartUI(cart);
-                    addButton.style.display = 'block';
-                    quantitySelector.style.display = 'none';
-                    quantityDisplay.innerText = 0;
-                });
-            } else {
-                currentQuantity -= quantityToRemove;
-                quantityDisplay.innerText = currentQuantity;
-                const itemName = buttonContainer.getAttribute('data-item-name');
-                fetch(`/cart/remove?item_name=${encodeURIComponent(itemName)}&quantity=${quantityToRemove}&instructions=&addons=[]`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    }
-                })
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error(`HTTP error! Status: ${response.status}`);
-                    }
-                    return response.json();
-                })
-                .then(data => {
-                    if (data.success) {
-                        alert(`Removed ${quantityToRemove} item(s) from cart successfully!`);
-                        updateCartUI(data.cart);
-                    } else {
-                        console.error('Failed to remove item from cart:', data.error);
-                        alert(data.error || 'Failed to remove item from cart.');
-                        currentQuantity += quantityToRemove;
-                        quantityDisplay.innerText = currentQuantity;
-                    }
-                })
-                .catch(err => {
-                    console.error('Error removing item from cart:', err);
-                    alert('An error occurred while removing the item from the cart: ' + err.message);
-                    const cart = removeFromCartLocalStorage(itemName, quantityToRemove, '', []);
-                    updateCartUI(cart);
-                });
-            }
-        }
-        function updateCartUI(cart) {
-            if (!Array.isArray(cart)) {
-                console.error('Invalid cart data:', cart);
-                return;
-            }
-            // Calculate total quantity of items in cart
-            let totalQuantity = 0;
-            cart.forEach(item => {
-                totalQuantity += item.quantity;
-            });
-            // Update cart item count badge
-            const cartItemCount = document.getElementById('cart-item-count');
-            if (cartItemCount) {
-                cartItemCount.innerText = totalQuantity;
-                if (totalQuantity > 0) {
-                    cartItemCount.classList.add('active');
-                } else {
-                    cartItemCount.classList.remove('active');
-                }
-            }
-            // Update quantity displays for soft drinks
-            const buttonContainers = document.querySelectorAll('.button-container');
-            buttonContainers.forEach(container => {
-                const itemName = container.getAttribute('data-item-name');
-                const quantityDisplay = container.querySelector('.quantity-display');
-                const addButton = container.querySelector('.add-to-cart-btn');
-                const quantitySelector = container.querySelector('.quantity-selector');
-                const cartItem = cart.find(item =>
-                    item.itemName === itemName &&
-                    item.instructions === '' &&
-                    JSON.stringify(item.addons) === JSON.stringify([])
-                );
-                if (cartItem && cartItem.quantity > 0) {
-                    quantityDisplay.innerText = cartItem.quantity;
-                    addButton.style.display = 'none';
-                    quantitySelector.style.display = 'flex';
-                } else {
-                    quantityDisplay.innerText = 0;
-                    addButton.style.display = 'block';
-                    quantitySelector.style.display = 'none';
-                }
-            });
-        }
     </script>
 </body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Menu</title>
+    <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
+    <!-- Preload Critical Resources -->
+    <link rel="preload" href="/static/placeholder.mp4" as="video">
     {% for section, items in ordered_menu.items() %}
         {% for item in items[:1] %}
+            <link rel="preload" href="{{ item.Video1__c | default('/static/placeholder.mp4') }}" as="video" fetchpriority="high">
         {% endfor %}
     {% endfor %}
     <style>
             padding: 0;
             display: flex;
             flex-direction: column;
+            padding-bottom: 70px;
         }
         .container {
             max-width: 900px;
             flex-direction: column;
             opacity: 0;
             transition: opacity 0.3s ease-in-out;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         }
         .menu-card.visible {
             opacity: 1;
         }
         .video-container {
+            transition: all 0.3s ease;
             position: relative;
         }
+        .video-container.video-error .video-fallback {
+            opacity: 1 !important;
         }
+        .video-container.video-error video {
+            display: none !important;
         }
+        .video-container:focus-within {
+            outline: 2px solid #3a86ff;
+            outline-offset: 2px;
+        }
+        .menu-video {
+            height: 200px;
+            width: 100%;
+            object-fit: cover;
+            border-radius: 15px 15px 0 0;
             opacity: 0;
+            transition: opacity 0.5s ease-in-out;
+            background-color: #000;
         }
+        .menu-video.loaded {
             opacity: 1;
         }
+        .menu-card:hover .menu-video {
+            opacity: 1;
+            transform: scale(1.05);
         }
+        .menu-card .card-body .card-title {
             font-size: 1.2rem;
+            font-weight: 600;
             margin: 10px 0;
+            color: #333333;
         }
+        .menu-card .card-body .card-text.price {
             font-size: 1rem;
+            font-weight: 500;
+            color: #000000;
+            margin-bottom: 5px;
         }
         .addbutton .btn {
             background-color: #28a745;
             box-shadow: none;
             transform: scale(0.98);
         }
         .avatar-dropdown-container {
             position: absolute;
             right: 10px;
             width: 40px;
             height: 40px;
             border-radius: 50%;
+            background-color: #007bff;
             cursor: pointer;
             display: flex;
             align-items: center;
             position: absolute;
             right: 0;
             top: 100%;
+            background-color: #fff8f0;
             border-radius: 5px;
             width: 220px;
             box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
             display: none;
+            border: 1px solid #ffd8b1;
         }
         .dropdown-menu .dropdown-item {
             padding: 12px 16px;
             text-decoration: none;
             color: #333;
+            border-bottom: 1px solid #ffd8b1;
             display: block;
             font-size: 15px;
+            transition: background-color 0.2s ease;
         }
         .dropdown-menu .dropdown-item:last-child {
             border-bottom: none;
         }
         .dropdown-menu .dropdown-item:hover {
+            background-color: #ffe4c4;
+            color: #333;
         }
         .fixed-top-bar {
             position: relative;
             align-items: center;
             width: 300px;
             max-width: 90%;
+            position: relative;
         }
         .search-bar-container input {
             width: 100%;
+            padding: 8px 40px 8px 40px;
             font-size: 16px;
             border-radius: 25px;
             border: none;
             font-size: 18px;
             color: #888;
         }
+        .mic-icon {
+            position: absolute;
+            right: 15px;
+            font-size: 18px;
+            color: #888;
+            cursor: pointer;
+            transition: color 0.3s ease;
+        }
+        .mic-icon.active {
+            color: #007bff;
+        }
         .autocomplete-suggestions {
             position: absolute;
             top: 100%;
         }
         .addon-section {
             background-color: #fff;
+            border: 2px solid #ffa500;
             border-radius: 8px;
             padding: 12px;
             margin-bottom: 10px;
             font-weight: bold;
             text-align: center;
             margin-bottom: 5px;
+            color: #333333;
         }
         .modal-body #modal-price {
             font-size: 16px;
+            font-weight: 500;
+            color: #000000;
             text-align: center;
             margin-bottom: 10px;
         }
             font-size: 0.9rem;
             font-weight: bold;
             margin-bottom: 5px;
+            color: #333333;
         }
         .item-details p {
             font-size: 0.85rem;
         .modal-body::-webkit-scrollbar-thumb:hover {
             background: #0D9232;
         }
+        .btn-primary:disabled {
+            opacity: 0.65;
+            cursor: not-allowed;
+        }
+        .quantity-selector select {
+            width: 60px;
+            height: 35px;
+            padding: 5px;
+            border-radius: 5px;
+            border: 1px solid #ced4da;
+        }
+        #custom-dish-form {
+            position: relative;
+            padding-bottom: 80px;
+        }
+        #custom-dish-form .btn-primary {
+            position: absolute;
+            right: 15px;
+            bottom: 15px;
+            width: auto;
+            padding: 10px 20px;
+        }
+        .bottom-action-bar {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-color: white;
+            padding: 10px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+            z-index: 1000;
+            max-width: 900px;
+            margin: 0 auto;
+        }
+        .bottom-action-bar .btn {
+            flex: 1;
+            margin: 0 5px;
+            padding: 10px 15px;
+            border-radius: 8px;
+            font-weight: bold;
+            font-size: 16px;
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            min-width: 0;
+            white-space: nowrap;
+        }
+        .bottom-action-bar .btn-order-history {
+            background-color: #FFA07A;
+            border-color: #FFA07A;
+        }
+        .bottom-action-bar .btn-order-history:hover {
+            background-color: #FF8C61;
+            border-color: #FF8C61;
+        }
+        .bottom-action-bar .btn-view-cart {
+            background-color: #0FAA39;
+            border-color: #0FAA39;
+        }
+        .bottom-action-bar .btn-view-cart:hover {
+            background-color: #0D9232;
+            border-color: #0D9232;
+        }
+        .cart-icon-badge {
+            background-color: white;
+            color: #0FAA39;
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            margin-left: 8px;
+        }
         @media (max-width: 576px) {
             .fixed-top-bar {
                 height: 60px;
                 transform: translateY(-50%);
             }
             .search-bar-container input {
+                padding: 6px 35px 6px 35px;
                 font-size: 14px;
                 border-radius: 20px;
             }
                 left: 12px;
                 font-size: 16px;
             }
+            .mic-icon {
+                right: 12px;
+                font-size: 16px;
+            }
             .avatar-dropdown-container {
                 right: 10px;
             }
                 height: 18px;
                 font-size: 9px;
             }
+            .quantity-selector select {
+                width: 50px;
+                height: 30px;
+                font-size: 12px;
+            }
+            .bottom-action-bar {
+                padding: 8px 10px;
+            }
+            .bottom-action-bar .btn {
+                padding: 8px 10px;
                 font-size: 14px;
             }
             .cart-icon-badge {
+                width: 18px;
+                height: 18px;
                 font-size: 10px;
+                margin-left: 5px;
             }
         }
     </style>
 </head>
 <body>
     <div class="fixed-top-bar">
         <div class="avatar-dropdown-container">
             <div class="avatar-icon">
         <div class="search-bar-container">
             <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
             <i class="bi bi-search search-icon"></i>
+            <i class="bi bi-mic mic-icon" id="micIcon"></i>
             <div id="autocompleteSuggestions" class="autocomplete-suggestions"></div>
         </div>
     </div>
                         <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
                         <div id="descriptionSuggestions" class="autocomplete-suggestions"></div>
                     </div>
+                    <button type="submit" class="btn btn-primary">Submit Custom Dish</button>
                 </form>
             </div>
         {% else %}
+            {% if ordered_menu.items()|length == 0 %}
+                <p>No menu items available for this category.</p>
+            {% else %}
+                {% for section, items in ordered_menu.items() %}
+                    <h3>{{ section }}</h3>
+                    <div class="row">
+                        {% for item in items %}
+                            <div class="col-md-6 mb-4">
+                                <div class="card menu-card">
+                                    <div class="video-container">
+                                        <video
+                                            class="card-img-top menu-video"
+                                            id="video-{{ loop.index }}"
+                                            muted
+                                            loop
+                                            preload="metadata"
+                                            autoplay
+                                            data-src="{{ item.Video1__c | default('/static/placeholder.mp4') }}"
+                                            poster="{{ item.Image1__c | default('/static/placeholder.jpg') }}"
+                                            width="350"
+                                            height="200"
+                                            aria-label="Video demonstration of {{ item.Name }}"
+                                            onmouseover="handleVideoHover(this.parentElement, true)"
+                                            onmouseout="handleVideoHover(this.parentElement, false)"
+                                            onerror="this.parentElement.classList.add('video-error');">
+                                            <source src="{{ item.Video1__c | default('/static/placeholder.mp4') }}" type="video/mp4">
+                                            Your browser does not support the video tag.
+                                        </video>
+                                        <img class="video-fallback"
+                                             src="{{ item.Image1__c | default('/static/placeholder.jpg') }}"
+                                             alt="{{ item.Name }}"
+                                             style="opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease;">
                                     </div>
+                                    <div class="addbutton">
+                                        <div class="card-body d-flex align-items-center justify-content-between">
+                                            <div>
+                                                <h5 class="card-title">{{ item.Name | default('Unnamed Item') }}</h5>
+                                                <p class="card-text">${{ item.Price__c | default('0.00') }}</p>
+                                            </div>
+                                            <div class="d-flex flex-column align-item-center justify-content-center">
+                                                <div class="button-container"
+                                                     data-item-name="{{ item.Name | default('Unnamed Item') }}"
+                                                     data-item-price="{{ item.Price transcriptase__c | default('0.00') }}"
+                                                     data-item-image="{{ item.Image1__c | default('/static/placeholder.jpg') }}"
+                                                     data-item-section="{{ item.Section__c | default(section) }}"
+                                                     data-item-category="{{ selected_category }}">
+                                                    {% if item.Section__c == 'Soft Drinks' %}
+                                                        <button class="btn btn-primary add-to-cart-btn" onclick="handleSoftDrinkAdd(this)">ADD</button>
+                                                        <div class="quantity-selector" style="display: none;">
+                                                            <button class="btn btn-outline-secondary decrease-btn" onclick="decreaseQuantity(this)">-</button>
+                                                            <span class="quantity-display">0</span>
+                                                            <button class="btn btn-outline-secondary increase-btn" onclick="increaseQuantity(this)">+</button>
+                                                        </div>
+                                                    {% else %}
+                                                        <button class="btn btn-primary"
+                                                                data-bs-toggle="modal"
+                                                                data-bs-target="#itemModal"
+                                                                onclick="showItemDetails('{{ item.Name | default('Unnamed Item') }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) }}', '{{ item.Description__c | default('No description') }}', '{{ item.Section__c | default(section) }}', '{{ selected_category }}')">
+                                                            ADD
+                                                        </button>
+                                                    {% endif %}
+                                                    {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c !='Soft Drinks' %}
+                                                        <span class="customisable-text">Customisable</span>
+                                                    {% endif %}
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
+                                    <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}">Show Details</div>
+                                    <div class="item-details" id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}"></div>
                                 </div>
                             </div>
+                        {% endfor %}
+                    </div>
+                {% endfor %}
+            {% endif %}
         {% endif %}
     </div>
+    <div class="bottom-action-bar">
+        <a href="{{ url_for('orderhistory.order_history') }}" class="btn btn-order-history">
+            <i class="bi bi-clock-history"></i> Order History
+        </a>
+        <a href="{{ url_for('cart.cart') }}" class="btn btn-view-cart">
+            <i class="bi bi-cart"></i> View Cart
+            <span class="cart-icon-badge" id="cart-item-count">0</span>
         </a>
     </div>
+    <!-- Modal for Item Details -->
     <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
+                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
                     <h5 id="modal-name" class="fw-bold text-center"></h5>
                     <p id="modal-price" class="text-muted text-center"></p>
                     <p id="modal-description" class="text-secondary"></p>
                     <div id="modal-addons" class="modal-addons mt-4">
+                        <h6>Customization Options</h6>
                         <div id="addons-list" class="addons-container">Loading customization options...</div>
                     </div>
                     <div class="mt-4">
                         <h6>Custom Request</h6>
                         <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
+        let isProcessingRequest = false;
         const menuItems = [
             {% for section, items in ordered_menu.items() %}
                 {% for item in items %}
+                    "{{ item.Name | default('Unnamed Item') }}",
                 {% endfor %}
             {% endfor %}
         ];
             }
         };
+        function getValidVideoUrl(videoUrl) {
+            if (!videoUrl) return null;
+            const sfDomain = window.SF_DOMAIN || 'https://yourdomain.my.salesforce.com';
+            if (videoUrl.startsWith('http')) return videoUrl;
+            if (videoUrl.startsWith('/')) return videoUrl;
+            if (videoUrl.startsWith('069')) return `${sfDomain}/sfc/servlet.shepherd/version/download/${videoUrl}`;
+            return null;
+        }
+        async function handleVideoHover(container, isHovering) {
+            const video = container.querySelector('video');
+            if (!video) return;
+            try {
+                if (isHovering) {
+                    if (!video.src && video.dataset.src) {
+                        video.src = getValidVideoUrl(video.dataset.src);
+                        await video.load();
+                    }
+                    try {
+                        await video.play();
+                        video.classList.add('visible');
+                        if (video.controls !== true) video.controls = true;
+                    } catch (e) {
+                        console.warn('Autoplay blocked:', e);
+                        video.controls = true;
+                    }
+                } else {
+                    video.pause();
+                    video.currentTime = 0;
+                    video.controls = false;
+                    video.classList.remove('visible');
+                }
+            } catch (e) {
+                console.error('Video handling error:', e);
+                const fallbackImg = container.querySelector('.video-fallback');
+                if (fallbackImg) {
+                    video.style.display = 'none';
+                    fallbackImg.style.opacity = '1';
+                }
+            }
+        }
         function addToCartLocalStorage(payload) {
             let cart = JSON.parse(localStorage.getItem('cart')) || [];
             const existingItem = cart.find(item =>
                 JSON.stringify(item.addons) === JSON.stringify(payload.addons)
             );
             if (existingItem) {
+                existingItem.quantity = payload.quantity;
             } else {
                 cart.push(payload);
             }
             return JSON.parse(localStorage.getItem('cart')) || [];
         }
+        function debounce(func, wait) {
+            let timeout;
+            return function (...args) {
+                clearTimeout(timeout);
+                timeout = setTimeout(() => func.apply(this, args), wait);
+            };
+        }
+        function handleSoftDrinkAdd(button) {
+            const buttonContainer = button.closest('.button-container');
+            const quantitySelector = buttonContainer.querySelector('.quantity-selector');
+            const addButton = buttonContainer.querySelector('.add-to-cart-btn');
+            const quantityDisplay = quantitySelector.querySelector('.quantity-display');
+            addButton.style.display = 'none';
+            quantitySelector.style.display = 'flex';
+            if (parseInt(quantityDisplay.innerText) === 0) {
+                quantityDisplay.innerText = '1';
+                updateCartQuantity(buttonContainer, 1);
+            }
+        }
+        function increaseQuantity(button) {
+            if (isProcessingRequest) return;
+            isProcessingRequest = true;
+            const buttonContainer = button.closest('.button-container');
+            const quantityDisplay = buttonContainer.querySelector('.quantity-display');
+            let currentQuantity = parseInt(quantityDisplay.innerText) || 0;
+            if (currentQuantity < 10) {
+                const newQuantity = currentQuantity + 1;
+                quantityDisplay.innerText = newQuantity;
+                debouncedUpdateCart(buttonContainer, newQuantity);
+            } else {
+                console.log('Maximum quantity of 10 reached for Soft Drinks');
+                isProcessingRequest = false;
+            }
+        }
+        function decreaseQuantity(button) {
+            if (isProcessingRequest) return;
+            isProcessingRequest = true;
+            const buttonContainer = button.closest('.button-container');
+            const quantityDisplay = buttonContainer.querySelector('.quantity-display');
+            const addButton = buttonContainer.querySelector('.add-to-cart-btn');
+            const quantitySelector = buttonContainer.querySelector('.quantity-selector');
+            const currentQuantity = parseInt(quantityDisplay.innerText) || 0;
+            if (currentQuantity <= 1) {
+                quantityDisplay.innerText = '0';
+                addButton.style.display = 'block';
+                quantitySelector.style.display = 'none';
+                updateCartQuantity(buttonContainer, 0);
+            } else {
+                const newQuantity = currentQuantity - 1;
+                quantityDisplay.innerText = newQuantity;
+                debouncedUpdateCart(buttonContainer, newQuantity);
+            }
+        }
+        function updateCartQuantity(buttonContainer, newQuantity) {
+            const itemName = buttonContainer.getAttribute('data-item-name');
+            const itemPrice = parseFloat(buttonContainer.getAttribute('data-item-price'));
+            const itemImage = buttonContainer.getAttribute('data-item-image');
+            const section = buttonContainer.getAttribute('data-item-section');
+            const selectedCategory = buttonContainer.getAttribute('data-item-category');
+            const cartPayload = {
+                itemName: itemName,
+                itemPrice: itemPrice,
+                itemImage: itemImage,
+                section: section,
+                category: selectedCategory,
+                addons: [],
+                instructions: '',
+                quantity: newQuantity
+            };
+            if (newQuantity > 0) {
+                fetch('/cart/add', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(cartPayload)
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        updateCartUI(data.cart);
+                    } else {
+                        console.error('Failed to update cart:', data.error);
+                        const cart = addToCartLocalStorage(cartPayload);
+                        updateCartUI(cart);
+                    }
+                })
+                .catch(err => {
+                    console.error('Error updating cart:', err);
+                    const cart = addToCartLocalStorage(cartPayload);
+                    updateCartUI(cart);
+                })
+                .finally(() => {
+                    isProcessingRequest = false;
+                });
+            } else {
+                fetch(`/cart/remove?item_name=${encodeURIComponent(itemName)}&instructions=&addons=[]`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    }
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        updateCartUI(data.cart);
+                    } else {
+                        console.error('Failed to remove item:', data.error);
+                        const cart = removeFromCartLocalStorage(itemName, 1, '', []);
+                        updateCartUI(cart);
+                    }
+                })
+                .catch(err => {
+                    console.error('Error removing item:', err);
+                    const cart = removeFromCartLocalStorage(itemName, 1, '', []);
+                    updateCartUI(cart);
+                })
+                .finally(() => {
+                    isProcessingRequest = false;
+                });
+            }
+        }
+        const debouncedUpdateCart = debounce(updateCartQuantity, 300);
+        function updateCartUI(cart) {
+            if (!Array.isArray(cart)) {
+                console.error('Invalid cart data:', cart);
+                return;
+            }
+            let totalQuantity = 0;
+            cart.forEach(item => {
+                totalQuantity += item.quantity;
+            });
+            const cartItemCount = document.getElementById('cart-item-count');
+            if (cartItemCount) {
+                cartItemCount.innerText = totalQuantity;
+                cartItemCount.style.display = totalQuantity > 0 ? 'inline-flex' : 'none';
+            }
+            const buttonContainers = document.querySelectorAll('.button-container');
+            buttonContainers.forEach(container => {
+                const itemName = container.getAttribute('data-item-name');
+                const section = container.getAttribute('data-item-section');
+                const quantityDisplay = container.querySelector('.quantity-display');
+                const addButton = container.querySelector('.add-to-cart-btn');
+                const quantitySelector = container.querySelector('.quantity-selector');
+                const cartItem = cart.find(item =>
+                    item.itemName === itemName &&
+                    item.section === section &&
+                    item.instructions === '' &&
+                    JSON.stringify(item.addons) === JSON.stringify([])
+                );
+                if (cartItem && cartItem.quantity > 0) {
+                    quantityDisplay.innerText = cartItem.quantity;
+                    addButton.style.display = 'none';
+                    quantitySelector.style.display = 'flex';
+                } else {
+                    quantityDisplay.innerText = '0';
+                    addButton.style.display = 'block';
+                    quantitySelector.style.display = 'none';
+                }
+            });
+        }
+        document.addEventListener('DOMContentLoaded', function () {
+            const avatarContainer = document.querySelector('.avatar-dropdown-container');
+            const dropdownMenu = document.querySelector('.dropdown-menu');
+            avatarContainer.addEventListener('click', function (event) {
+                event.stopPropagation();
+                dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
+            });
+            document.addEventListener('click', function (event) {
+                if (!avatarContainer.contains(event.target)) {
+                    dropdownMenu.style.display = 'none';
+                }
+            });
+            const dropdownItems = document.querySelectorAll('.dropdown-item');
+            dropdownItems.forEach(item => {
+                item.addEventListener('click', function () {
+                    dropdownMenu.style.display = 'none';
+                });
+            });
+            const menuCards = document.querySelectorAll('.menu-card');
+            menuCards.forEach(card => {
+                const itemName = card.querySelector('.card-title').innerText;
+                const detailsDiv = card.querySelector('.item-details');
+                const detailsData = menuItemDetails[itemName];
+                if (detailsData) {
                     detailsDiv.innerHTML = `
                         <h6>Ingredients</h6>
                         <p>${detailsData.ingredients}</p>
                     detailsDiv.innerHTML = '<p>No details available for this item.</p>';
                 }
             });
             const cardObserver = new IntersectionObserver((entries, observer) => {
                 entries.forEach(entry => {
                     if (entry.isIntersecting) {
                 rootMargin: '0px',
                 threshold: 0.1
             });
+            const videoObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const video = entry.target;
+                        const container = video.closest('.video-container');
+                        const src = getValidVideoUrl(video.getAttribute('data-src'));
+                        if (src && !video.querySelector('source[src="' + src + '"]')) {
+                            const source = video.querySelector('source');
+                            source.src = src;
+                            video.load().then(() => {
+                                video.classList.add('loaded');
+                            }).catch(err => {
+                                console.error('Video load error:', err);
+                                container.classList.add('video-error');
+                            });
+                        }
+                        observer.unobserve(video);
+                    }
+                });
+            }, {
+                root: null,
+                rootMargin: '200px',
+                threshold: 0.01
+            });
             menuCards.forEach(card => cardObserver.observe(card));
+            document.querySelectorAll('.menu-video').forEach(video => videoObserver.observe(video));
             const toggleLinks = document.querySelectorAll('.toggle-details');
             toggleLinks.forEach(link => {
                 link.addEventListener('click', function () {
                     this.innerText = detailsDiv.classList.contains('show') ? 'Hide Details' : 'Show Details';
                 });
             });
             const categoryButtons = document.querySelectorAll('.category-button');
             const categoryForm = document.getElementById('categoryForm');
             const selectedCategoryInput = document.getElementById('selectedCategoryInput');
             if (!selectedCategoryInput.value) {
                 selectedCategoryInput.value = "All";
                 document.querySelector('.category-button[data-category="All"]').classList.add('selected');
             }
             categoryButtons.forEach(button => {
                 button.addEventListener('click', function () {
                     categoryButtons.forEach(btn => btn.classList.remove('selected'));
                     categoryForm.submit();
                 });
             });
             const searchBar = document.getElementById('searchBar');
             const suggestionsContainer = document.getElementById('autocompleteSuggestions');
             searchBar.addEventListener('input', function () {
                 const input = this.value.trim().toLowerCase();
                 suggestionsContainer.innerHTML = '';
                 suggestionsContainer.style.display = 'none';
                 if (input) {
                     const filteredItems = menuItems.filter(item =>
                         item.toLowerCase().includes(input)
                 }
                 filterMenu();
             });
             document.addEventListener('click', function (event) {
                 if (!searchBar.contains(event.target) && !suggestionsContainer.contains(event.target)) {
                     suggestionsContainer.style.display = 'none';
                 }
             });
             const descriptionTextarea = document.getElementById('custom-dish-description');
             const descriptionSuggestions = document.getElementById('descriptionSuggestions');
             if (descriptionTextarea && descriptionSuggestions) {
                 let usedIngredients = new Set();
                 function updateUsedIngredients() {
                     const inputText = descriptionTextarea.value.trim();
                     usedIngredients.clear();
                         });
                     }
                 }
                 descriptionTextarea.addEventListener('input', function () {
                     const inputText = this.value.trim();
                     const words = inputText.split(/,\s*/);
                     const lastWord = words[words.length - 1].trim().toLowerCase();
                     descriptionSuggestions.innerHTML = '';
                     descriptionSuggestions.style.display = 'none';
                     updateUsedIngredients();
                     if (lastWord) {
                         const filteredIngredients = ingredientsList.filter(ingredient =>
                             ingredient.toLowerCase().includes(lastWord) && !usedIngredients.has(ingredient)
                         }
                     }
                 });
                 document.addEventListener('click', function (event) {
                     if (!descriptionTextarea.contains(event.target) && !descriptionSuggestions.contains(event.target)) {
                         descriptionSuggestions.style.display = 'none';
                     }
                 });
             }
             fetch('/cart/get')
                 .then(response => {
                     if (!response.ok) {
                     const cart = getCartLocalStorage();
                     updateCartUI(cart);
                 });
+            const preloadedVideos = document.querySelectorAll('link[rel="preload"][as="video"]');
+            preloadedVideos.forEach(link => {
+                const video = document.createElement('video');
+                video.src = link.href;
+                video.preload = 'auto';
             });
             const decreaseBtn = document.getElementById('decreaseQuantity');
             const increaseBtn = document.getElementById('increaseQuantity');
             const quantityInput = document.getElementById('quantityInput');
             decreaseBtn.addEventListener('click', function () {
                 let currentQuantity = parseInt(quantityInput.value);
                 if (currentQuantity > 1) {
                     quantityInput.value = currentQuantity;
                 }
             });
             increaseBtn.addEventListener('click', function () {
                 let currentQuantity = parseInt(quantityInput.value);
                 currentQuantity++;
                 quantityInput.value = currentQuantity;
             });
+            const micIcon = document.getElementById('micIcon');
+            if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
+                const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+                const recognition = new SpeechRecognition();
+                recognition.lang = 'en-US';
+                recognition.onstart = () => micIcon.classList.add('active');
+                recognition.onresult = (event) => {
+                    searchBar.value = event.results[0][0].transcript.trim();
+                    filterMenu();
+                };
+                recognition.onend = () => micIcon.classList.remove('active');
+                recognition.onerror = (event) => {
+                    micIcon.classList.remove('active');
+                    console.error('Speech error:', event.error);
+                };
+                micIcon.addEventListener('click', () => {
+                    recognition.start();
+                });
+            } else {
+                micIcon.style.display = 'none';
+            }
+        });
         function filterMenu() {
             const input = document.getElementById('searchBar').value.trim().toLowerCase();
             const sections = document.querySelectorAll('h3');
             const items = document.querySelectorAll('.menu-card');
             let matchedSections = new Set();
             items.forEach(item => {
                 const itemName = item.querySelector('.card-title').innerText.toLowerCase();
                 const itemSection = item.closest('.row').previousElementSibling.innerText.toLowerCase();
                 if (itemName.includes(input) || (itemSection && itemSection.includes(input))) {
                     item.style.display = 'block';
                     item.classList.add('visible');
                     item.style.display = 'none';
                 }
             });
             sections.forEach(section => {
                 const sectionRow = section.nextElementSibling;
                 if (matchedSections.has(sectionRow)) {
                     sectionRow.style.display = 'none';
                 }
             });
             if (!input) {
                 sections.forEach(section => {
                     section.style.display = 'block';
             document.getElementById('modal-name').innerText = name;
             document.getElementById('modal-price').innerText = `$${price}`;
             const modalImg = document.getElementById('modal-img');
+            modalImg.src = image || '/static/placeholder.jpg';
             document.getElementById('modal-description').innerText = description || 'No description available.';
             document.getElementById('addons-list').innerHTML = 'Loading customization options...';
             document.getElementById('modal-instructions').value = '';
             const modalSectionEl = document.getElementById('modal-section');
             modalSectionEl.setAttribute('data-category', selectedCategory);
             document.getElementById('quantityInput').value = 1;
             fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
                 .then(response => response.json())
                 .then(data => {
                     const addonsList = document.getElementById('addons-list');
                     addonsList.innerHTML = '';
                     if (!data.success || !data.addons || data.addons.length === 0) {
                         addonsList.innerHTML = '<p>No customization options available.</p>';
                         return;
                     }
                     data.addons.forEach(addon => {
                         const sectionDiv = document.createElement('div');
                         sectionDiv.classList.add('addon-section');
                         const title = document.createElement('h6');
                         title.innerText = addon.name;
                         sectionDiv.appendChild(title);
                         const optionsContainer = document.createElement('div');
                         addon.options.forEach((option, index) => {
                             const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
                             const listItem = document.createElement('div');
                             listItem.classList.add('form-check');
                             listItem.innerHTML = `
+                                <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
                                        data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
                                 <label class="form-check-label" for="${optionId}">
                                     ${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}
                         sectionDiv.appendChild(optionsContainer);
                         addonsList.appendChild(sectionDiv);
                     });
                 })
                 .catch(err => {
                     console.error('Error fetching add-ons:', err);
                     document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
                 });
         }
         document.addEventListener('click', function(event) {
+            if (event.target.classList.contains('addon-option')) {
                 handleAddonClick(event.target);
             }
         });
         function handleAddonClick(checkbox) {
             const groupName = checkbox.getAttribute('data-group');
+            const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it a Combo"].includes(groupName);
+            if (!isMultiSelectGroup) {
                 const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
                 checkboxes.forEach(otherCheckbox => {
                     if (otherCheckbox !== checkbox) {
             const section = modalSectionEl.getAttribute('data-section');
             const selectedCategory = modalSectionEl.getAttribute('data-category');
             if (!itemName || !itemPrice || !section || !itemImage) {
+                console.error('Missing data for cart item:', { itemName, itemPrice, section, itemImage });
                 return;
             }
+            const selectedAddOns = Array.from(
+                document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
+            ).map(addon => ({
+                name: addon.getAttribute('data-name') || 'Default Name',
+                price: parseFloat(addon.getAttribute('data-price') || 0)
+            }));
             const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
             const instructions = document.getElementById('modal-instructions').value;
             const cartPayload = {
                 instructions: instructions,
                 quantity: quantity
             };
             fetch('/cart/add', {
                 method: 'POST',
                 headers: {
                 },
                 body: JSON.stringify(cartPayload)
             })
+            .then(response => response.json())
             .then(data => {
                 if (data.success) {
                     alert('Item added to cart successfully!');
             })
             .catch(err => {
                 console.error('Error adding item to cart:', err);
                 const cart = addToCartLocalStorage(cartPayload);
                 updateCartUI(cart);
                 const modal = document.getElementById('itemModal');
                 modalInstance.hide();
             });
         }
     </script>
 </body>
 </html>