BiryaniHubflaskhema6

Running

App Files Files Community

lokesh341 commited on Apr 3

Commit

4b5baa7

verified ·

1 Parent(s): 91a4a53

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +1097 -334

templates/menu.html CHANGED Viewed

@@ -1,14 +1,18 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Menu with Auto-Play Videos</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.jpg" as="image">
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -30,17 +34,12 @@
             display: flex;
             flex-direction: column;
             opacity: 0;
-            transition: opacity 0.3s ease-in-out, transform 0.3s ease;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         }
         .menu-card.visible {
             opacity: 1;
         }
-        .menu-card:hover {
-            transform: translateY(-5px);
-        }
-        /* Video Container Styles */
         .video-container {
             position: relative;
             width: 100%;
@@ -48,6 +47,7 @@
             overflow: hidden;
             border-radius: 15px 15px 0 0;
             background-color: #000;
         }
         .video-container video {
@@ -55,6 +55,8 @@
             height: 100%;
             object-fit: cover;
             transition: opacity 0.5s ease;
         }
         .video-container .video-placeholder {
@@ -71,6 +73,46 @@
             font-size: 14px;
         }
         .card-title {
             font-size: 1.2rem;
             font-weight: bold;
@@ -692,22 +734,6 @@
                 height: 20px;
                 font-size: 10px;
             }
-            /* Mobile video adjustments */
-            .video-container {
-                height: 150px;
-            }
-        }
-        /* Touch device specific styles */
-        @media (hover: none) and (pointer: coarse) {
-            .video-container {
-                height: 200px;
-            }
-            .video-container video {
-                pointer-events: auto;
-            }
         }
     </style>
 </head>
@@ -716,12 +742,12 @@
     <div class="fixed-top-bar">
         <div class="avatar-dropdown-container">
             <div class="avatar-icon">
-                <span>U</span>
             </div>
             <div class="dropdown-menu">
-                <a href="/user_details" class="dropdown-item">View Profile</a>
-                <a href="/orderhistory" class="dropdown-item">Order History</a>
-                <a href="/logout" class="dropdown-item">Logout</a>
             </div>
         </div>
         <div class="search-bar-container">
@@ -734,199 +760,118 @@
     <form method="get" action="/menu" class="text-center mb-4" id="categoryForm">
         <label class="form-label fw-bold">Select a Category:</label>
         <div class="category-buttons">
-            <button type="button" class="category-button selected" data-category="All">All</button>
-            <button type="button" class="category-button" data-category="Starters">Starters</button>
-            <button type="button" class="category-button" data-category="Main Course">Main Course</button>
-            <button type="button" class="category-button" data-category="Desserts">Desserts</button>
-            <button type="button" class="category-button" data-category="Drinks">Drinks</button>
-            <button type="button" class="category-button" data-category="Customized Dish">Customized Dish</button>
         </div>
-        <input type="hidden" name="category" id="selectedCategoryInput" value="All">
     </form>
     <div class="container mt-4">
-        <h3>Main Course</h3>
-        <div class="row">
-            <div class="col-md-6 mb-4">
-                <div class="card menu-card visible">
-                    <div class="video-container">
-                        <video
-                            id="video-1"
-                            preload="metadata"
-                            poster="https://via.placeholder.com/350x200"
-                            data-src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
-                            muted
-                            loop
-                            playsinline
-                        >
-                            <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
-                            Your browser does not support the video tag.
-                        </video>
-                    </div>
-                    <div class="addbutton">
-                        <div class="card-body d-flex align-items-center justify-content-between">
-                            <div>
-                                <h5 class="card-title">Veg Biryani</h5>
-                                <p class="card-text">$12.99</p>
-                            </div>
-                            <div class="d-flex flex-column align-item-center justify-content-center">
-                                <div class="button-container" data-item-name="Veg Biryani" data-item-price="12.99" data-item-image="https://via.placeholder.com/350x200" data-item-section="Main Course" data-item-category="Main Course">
-                                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal"
-                                        onclick="showItemDetails('Veg Biryani', '12.99', 'https://via.placeholder.com/350x200', 'Fragrant basmati rice cooked with mixed vegetables and aromatic spices', 'Main Course','Main Course')">
-                                        ADD
-                                    </button>
-                                    <span class="customisable-text">Customisable</span>
-                                </div>
-                            </div>
-                        </div>
                     </div>
-                    <div class="toggle-details" data-item-name="Veg Biryani">Show Details</div>
-                    <div class="item-details" id="details-Veg-Biryani">
-                        <h6>Ingredients</h6>
-                        <p>Basmati Rice, Mixed Vegetables (Carrot, Peas, Potato, Cauliflower), Ginger, Garlic, Biryani Masala, Mint Leaves, Curd, Onion, Ghee</p>
-                        <h6>Nutritional Info</h6>
-                        <div class="nutritional-info">
-                            <span>Calories: 300 kcal</span>
-                            <span>Carbs: 50g</span>
-                            <span>Protein: 6g</span>
-                            <span>Fats: 12g</span>
-                        </div>
-                        <h6>Allergens</h6>
-                        <p>Dairy</p>
                     </div>
-                </div>
             </div>
-            <div class="col-md-6 mb-4">
-                <div class="card menu-card visible">
-                    <div class="video-container">
-                        <video
-                            id="video-2"
-                            preload="metadata"
-                            poster="https://via.placeholder.com/350x200"
-                            data-src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
-                            muted
-                            loop
-                            playsinline
-                        >
-                            <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
-                            Your browser does not support the video tag.
-                        </video>
-                    </div>
-                    <div class="addbutton">
-                        <div class="card-body d-flex align-items-center justify-content-between">
-                            <div>
-                                <h5 class="card-title">Butter Chicken</h5>
-                                <p class="card-text">$14.99</p>
-                            </div>
-                            <div class="d-flex flex-column align-item-center justify-content-center">
-                                <div class="button-container" data-item-name="Butter Chicken" data-item-price="14.99" data-item-image="https://via.placeholder.com/350x200" data-item-section="Main Course" data-item-category="Main Course">
-                                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal"
-                                        onclick="showItemDetails('Butter Chicken', '14.99', 'https://via.placeholder.com/350x200', 'Tender chicken in a rich, creamy tomato sauce', 'Main Course','Main Course')">
-                                        ADD
-                                    </button>
-                                    <span class="customisable-text">Customisable</span>
                                 </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="toggle-details" data-item-name="Butter Chicken">Show Details</div>
-                    <div class="item-details" id="details-Butter-Chicken">
-                        <h6>Ingredients</h6>
-                        <p>Chicken, Butter, Cream, Tomato Puree, Onion, Ginger, Garlic, Garam Masala</p>
-                        <h6>Nutritional Info</h6>
-                        <div class="nutritional-info">
-                            <span>Calories: 400 kcal</span>
-                            <span>Carbs: 20g</span>
-                            <span>Protein: 15g</span>
-                            <span>Fats: 25g</span>
-                        </div>
-                        <h6>Allergens</h6>
-                        <p>Dairy</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <h3>Drinks</h3>
-        <div class="row">
-            <div class="col-md-6 mb-4">
-                <div class="card menu-card visible">
-                    <div class="video-container">
-                        <video
-                            id="video-3"
-                            preload="metadata"
-                            poster="https://via.placeholder.com/350x200"
-                            data-src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
-                            muted
-                            loop
-                            playsinline
-                        >
-                            <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
-                            Your browser does not support the video tag.
-                        </video>
-                    </div>
-                    <div class="addbutton">
-                        <div class="card-body d-flex align-items-center justify-content-between">
-                            <div>
-                                <h5 class="card-title">Mango Lassi</h5>
-                                <p class="card-text">$4.99</p>
-                            </div>
-                            <div class="d-flex flex-column align-item-center justify-content-center">
-                                <div class="button-container" data-item-name="Mango Lassi" data-item-price="4.99" data-item-image="https://via.placeholder.com/350x200" data-item-section="Drinks" data-item-category="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>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="toggle-details" data-item-name="Mango Lassi">Show Details</div>
-                    <div class="item-details" id="details-Mango-Lassi">
-                        <h6>Ingredients</h6>
-                        <p>Yogurt, Mango Pulp, Sugar, Cardamom, Ice</p>
-                        <h6>Nutritional Info</h6>
-                        <div class="nutritional-info">
-                            <span>Calories: 250 kcal</span>
-                            <span>Carbs: 45g</span>
-                            <span>Protein: 8g</span>
-                            <span>Fats: 5g</span>
-                        </div>
-                        <h6>Allergens</h6>
-                        <p>Dairy</p>
-                    </div>
                 </div>
-            </div>
-        </div>
     </div>
     <div class="view-cart-container">
-        <a href="/cart" class="view-cart-button">
             <i class="bi bi-cart"></i>
             view Cart
-            <span id="cart-item-count" class="cart-icon-badge">
-                0
             </span>
         </a>
     </div>
-    <!-- Item Modal -->
     <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">
@@ -935,11 +880,11 @@
                     <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" src="https://via.placeholder.com/350x200" alt="Item Image">
-                    <h5 id="modal-name" class="fw-bold text-center">Item Name</h5>
-                    <p id="modal-price" class="text-muted text-center">$0.00</p>
-                    <p id="modal-description" class="text-secondary">Item description goes here</p>
-                    <p class="nutritional-info" id="modal-nutritional-info">[Energy: 0 kcal, Protein: 0g, Carbohydrates: 0g, Fiber: 0g, Fat: 0g, Sugar: 0g]</p>
                     <div id="first-row">
                         <h6 id="first-row-title" style="display: none;">Customization Options</h6>
@@ -959,19 +904,7 @@
                     <div id="modal-addons" class="modal-addons mt-4">
                         <h6 id="addons-title">Customization Options</h6>
-                        <div id="addons-list" class="addons-container">
-                            <div class="addon-section">
-                                <h6>Sauces</h6>
-                                <div class="form-check">
-                                    <input type="checkbox" class="form-check-input" id="sauce1" value="Mint Chutney" data-name="Mint Chutney" data-group="Sauces" data-price="0">
-                                    <label class="form-check-label" for="sauce1">Mint Chutney</label>
-                                </div>
-                                <div class="form-check">
-                                    <input type="checkbox" class="form-check-input" id="sauce2" value="Tomato Sauce" data-name="Tomato Sauce" data-group="Sauces" data-price="0">
-                                    <label class="form-check-label" for="sauce2">Tomato Sauce</label>
-                                </div>
-                            </div>
-                        </div>
                     </div>
                     <div class="mt-4">
@@ -992,18 +925,189 @@
         </div>
     </div>
-    <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
-        // Video Handling Functions
-        function setupVideoHover() {
             const videoContainers = document.querySelectorAll('.video-container');
             videoContainers.forEach(container => {
                 const video = container.querySelector('video');
-                // Load video source when container is in viewport
                 const observer = new IntersectionObserver((entries) => {
                     entries.forEach(entry => {
                         if (entry.isIntersecting && video.dataset.src && !video.src) {
@@ -1018,58 +1122,114 @@
                 observer.observe(container);
-                // Desktop hover behavior
                 container.addEventListener('mouseenter', () => {
-                    if (video.src) {
-                        video.play().catch(e => console.log('Autoplay prevented:', e));
                     }
                 });
                 container.addEventListener('mouseleave', () => {
-                    if (!video.paused) {
-                        video.pause();
-                        video.currentTime = 0;
                     }
                 });
-                // Touch device behavior
                 container.addEventListener('touchstart', (e) => {
-                    if (video.src) {
-                        // Prevent default to avoid double-tap zoom
-                        e.preventDefault();
-                        video.play().catch(e => console.log('Autoplay prevented:', e));
                     }
                 }, { passive: false });
-                // Pause when touching elsewhere
-                document.addEventListener('touchstart', (e) => {
-                    if (!container.contains(e.target) && !video.paused) {
-                        video.pause();
-                        video.currentTime = 0;
-                    }
                 });
             });
-            // Handle window resize to reset videos
-            window.addEventListener('resize', function() {
-                videoContainers.forEach(container => {
-                    const video = container.querySelector('video');
-                    if (!video.paused) {
-                        video.pause();
-                        video.currentTime = 0;
                     }
                 });
             });
-        }
-        // Initialize when DOM is loaded
-        document.addEventListener('DOMContentLoaded', function() {
-            setupVideoHover();
-            // Initialize other functionality
             const toggleLinks = document.querySelectorAll('.toggle-details');
             toggleLinks.forEach(link => {
-                link.addEventListener('click', function() {
                     const itemName = this.getAttribute('data-item-name').replace(/ /g, '-');
                     const detailsDiv = document.getElementById(`details-${itemName}`);
                     detailsDiv.classList.toggle('show');
@@ -1077,23 +1237,153 @@
                 });
             });
-            // Category buttons
             const categoryButtons = document.querySelectorAll('.category-button');
             categoryButtons.forEach(button => {
-                button.addEventListener('click', function() {
                     categoryButtons.forEach(btn => btn.classList.remove('selected'));
                     this.classList.add('selected');
-                    document.getElementById('selectedCategoryInput').value = this.getAttribute('data-category');
-                    document.getElementById('categoryForm').submit();
                 });
             });
-            // Modal quantity controls
             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) {
                     currentQuantity--;
@@ -1101,49 +1391,360 @@
                 }
             });
-            increaseBtn.addEventListener('click', function() {
                 let currentQuantity = parseInt(quantityInput.value);
                 currentQuantity++;
                 quantityInput.value = currentQuantity;
             });
         });
         function showItemDetails(name, price, image, description, section, selectedCategory) {
             document.getElementById('modal-name').innerText = name;
             document.getElementById('modal-price').innerText = `$${price}`;
-            document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
             document.getElementById('modal-description').innerText = description || 'No description available.';
-            // Set section and category data
             const modalSectionEl = document.getElementById('modal-section');
             modalSectionEl.setAttribute('data-section', section);
             modalSectionEl.setAttribute('data-category', selectedCategory);
-            // Reset quantity
             document.getElementById('quantityInput').value = 1;
         }
         function addToCartFromModal() {
             const itemName = document.getElementById('modal-name').innerText;
-            const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
             const itemImage = document.getElementById('modal-img').src;
             const modalSectionEl = document.getElementById('modal-section');
             const section = modalSectionEl.getAttribute('data-section');
             const selectedCategory = modalSectionEl.getAttribute('data-category');
-            const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
-            const instructions = document.getElementById('modal-instructions').value;
-            // Get selected addons
             let selectedAddOns = [];
-            const addonOptions = document.querySelectorAll('.addon-option:checked, .spice-level-option:checked');
-            addonOptions.forEach(option => {
-                selectedAddOns.push({
-                    name: option.getAttribute('data-name'),
-                    price: parseFloat(option.getAttribute('data-price') || 0)
-                });
             });
-            // Create cart payload
             const cartPayload = {
                 itemName: itemName,
                 itemPrice: itemPrice,
@@ -1154,16 +1755,41 @@
                 instructions: instructions,
                 quantity: quantity
             };
-            // Here you would typically send this to your server
-            console.log('Adding to cart:', cartPayload);
-            alert(`${quantity} ${itemName} added to cart!`);
-            // Close modal
-            const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
-            modal.hide();
         }
         function handleSoftDrinkAdd(button) {
             const buttonContainer = button.closest('.button-container');
             const quantitySelector = buttonContainer.querySelector('.quantity-selector');
@@ -1171,22 +1797,16 @@
             const quantityDisplay = quantitySelector.querySelector('.quantity-display');
             const quantityToAddSelect = quantitySelector.querySelector('.quantity-to-add');
             const quantityToAdd = parseInt(quantityToAddSelect.value);
-            addButton.style.display = 'none';
-            quantitySelector.style.display = 'flex';
-            let currentQuantity = parseInt(quantityDisplay.innerText) || 0;
-            currentQuantity += quantityToAdd;
-            quantityDisplay.innerText = currentQuantity;
-            // Get item details
             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');
-            // Create cart payload
             const cartPayload = {
                 itemName: itemName,
                 itemPrice: itemPrice,
@@ -1197,30 +1817,54 @@
                 instructions: '',
                 quantity: quantityToAdd
             };
-            // Here you would typically send this to your server
-            console.log('Adding to cart:', cartPayload);
-            alert(`${quantityToAdd} ${itemName} added to cart!`);
         }
         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);
-            let currentQuantity = parseInt(quantityDisplay.innerText) || 0;
-            currentQuantity += quantityToAdd;
-            quantityDisplay.innerText = currentQuantity;
-            // Get item details
             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');
-            // Create cart payload
             const cartPayload = {
                 itemName: itemName,
                 itemPrice: itemPrice,
@@ -1231,12 +1875,37 @@
                 instructions: '',
                 quantity: quantityToAdd
             };
-            // Here you would typically send this to your server
-            console.log('Adding to cart:', cartPayload);
-            alert(`${quantityToAdd} ${itemName} added to cart!`);
         }
         function decreaseQuantity(button) {
             const buttonContainer = button.closest('.button-container');
             const quantityDisplay = buttonContainer.querySelector('.quantity-display');
@@ -1245,26 +1914,120 @@
             const addButton = buttonContainer.querySelector('.add-to-cart-btn');
             const quantitySelector = buttonContainer.querySelector('.quantity-selector');
             let currentQuantity = parseInt(quantityDisplay.innerText);
             if (currentQuantity <= quantityToRemove) {
-                // Remove completely
                 const itemName = buttonContainer.getAttribute('data-item-name');
-                console.log(`Removing all ${itemName} from cart`);
-                alert(`Removed all ${itemName} from cart!`);
-                addButton.style.display = 'block';
-                quantitySelector.style.display = 'none';
-                quantityDisplay.innerText = 0;
             } else {
-                // Decrease quantity
                 currentQuantity -= quantityToRemove;
                 quantityDisplay.innerText = currentQuantity;
                 const itemName = buttonContainer.getAttribute('data-item-name');
-                console.log(`Removing ${quantityToRemove} ${itemName} from cart`);
-                alert(`Removed ${quantityToRemove} ${itemName} from cart!`);
             }
         }
     </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>
     <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>
         body {
             font-family: Arial, sans-serif;
             display: flex;
             flex-direction: column;
             opacity: 0;
+            transition: opacity 0.3s ease-in-out;
         }
         .menu-card.visible {
             opacity: 1;
         }
         .video-container {
             position: relative;
             width: 100%;
             overflow: hidden;
             border-radius: 15px 15px 0 0;
             background-color: #000;
+            touch-action: manipulation;
         }
         .video-container video {
             height: 100%;
             object-fit: cover;
             transition: opacity 0.5s ease;
+            -webkit-user-select: none;
+            user-select: none;
         }
         .video-container .video-placeholder {
             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;
                 height: 20px;
                 font-size: 10px;
             }
         }
     </style>
 </head>
     <div class="fixed-top-bar">
         <div class="avatar-dropdown-container">
             <div class="avatar-icon">
+                <span>{{ first_letter }}</span>
             </div>
             <div class="dropdown-menu">
+                <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item">View Profile</a>
+                <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item">Order History</a>
+                <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
             </div>
         </div>
         <div class="search-bar-container">
     <form method="get" action="/menu" class="text-center mb-4" id="categoryForm">
         <label class="form-label fw-bold">Select a Category:</label>
         <div class="category-buttons">
+            {% for category in categories %}
+                <button type="button" class="category-button {% if selected_category == category %}selected{% endif %}" data-category="{{ category }}">{{ category }}</button>
+            {% endfor %}
+            <button type="button" class="category-button {% if selected_category == 'Customized Dish' %}selected{% endif %}" data-category="Customized Dish">Customized Dish</button>
         </div>
+        <input type="hidden" name="category" id="selectedCategoryInput" value="{{ selected_category }}">
     </form>
     <div class="container mt-4">
+        {% if selected_category == "Customized Dish" %}
+            <div id="custom-dish-form" class="mt-4">
+                <h3>Create Your Custom Dish</h3>
+                <form method="POST" action="/customdish/generate_custom_dish">
+                    <div class="mb-3">
+                        <label for="custom-dish-name" class="form-label">Dish Name</label>
+                        <input type="text" class="form-control" id="custom-dish-name" name="name" required>
                     </div>
+                    <div class="mb-3 position-relative">
+                        <label for="custom-dish-description" class="form-label">Dish Description</label>
+                        <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">
                     <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 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">
         </div>
     </div>
     <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 %}
+        ];
+        const ingredientsList = [
+            "Basmati Rice", "Bell Pepper", "Biryani Masala", "Butter", "Capsicum", "Cauliflower",
+            "Chickpea Flour (Besan)", "Chickpea Flour (for batter)", "Chickpeas (Channa)", "Chili Powder",
+            "Chili Sauce", "Coconut Milk", "Coriander Powder", "Cornflour", "Cream", "Cumin Powder",
+            "Cumin Seeds", "Curd (Yogurt)", "Curry Leaves", "Fish (e.g., King Fish or Salmon)",
+            "Fresh Coriander Leaves", "Garam Masala", "Garlic", "Ghee (Clarified Butter)", "Ginger",
+            "Ginger-Garlic Paste", "Goat Meat (Mutton)", "Green Chilies", "Honey",
+            "Kasuri Methi (dried fenugreek leaves)", "Lemon Juice", "Mango Puree", "Mint Leaves",
+            "Mixed Vegetables (Carrot, Peas, Potato, Cauliflower)", "Mixed Vegetables (Carrot, Peas, Potato)",
+            "Mustard Seeds", "Mutton (Goat Meat)", "Oil", "Oil (for frying)", "Onion",
+            "Paneer (Indian Cottage Cheese)", "Peas", "Potatoes", "Prawns", "Red Chili Powder",
+            "Rice Flour", "Saffron", "Salt", "Soy Sauce", "Spring Onion", "Tamarind (for sourness)",
+            "Tomato Ketchup", "Tomatoes", "Turmeric Powder", "Vinegar", "Water", "Wheat Flour (for dough)",
+            "Whole Wheat Flour", "Yogurt (Curd)"
+        ];
+        const menuItemDetails = {
+            "Veg Manchurian": {
+                ingredients: "Cauliflower, Onion, Ginger, Garlic, Soy Sauce, Cornflour, Green Chilies, Capsicum, Spring Onion",
+                nutritionalInfo: { calories: 250, protein: 5, carbs: 35, fats: 12, fiber: 3, sugar: 2 },
+                allergens: "Soy, Gluten"
+            },
+            "Veg Biryani": {
+                ingredients: "Basmati Rice, Mixed Vegetables (Carrot, Peas, Potato, Cauliflower), Ginger, Garlic, Biryani Masala, Mint Leaves, Curd, Onion, Ghee",
+                nutritionalInfo: { calories: 300, protein: 6, carbs: 50, fats: 12, fiber: 5, sugar: 3 },
+                allergens: "Dairy"
+            },
+            "Sukka Gosht (Goat)": {
+                ingredients: "Goat Meat, Ginger-Garlic Paste, Green Chilies, Onion, Tomatoes, Garam Masala, Coriander Powder, Cumin Powder, Fresh Coriander",
+                nutritionalInfo: { calories: 450, protein: 35, carbs: 10, fats: 30, fiber: 2, sugar: 1 },
+                allergens: "None"
+            },
+            "Samosa": {
+                ingredients: "Potatoes, Peas, Onion, Ginger, Cumin Seeds, Garam Masala, Wheat Flour (for dough), Oil (for frying)",
+                nutritionalInfo: { calories: 150, protein: 3, carbs: 25, fats: 7, fiber: 2, sugar: 1 },
+                allergens: "Gluten"
+            },
+            "Roti": {
+                ingredients: "Whole Wheat Flour, Water, Salt",
+                nutritionalInfo: { calories: 150, protein: 4, carbs: 30, fats: 1, fiber: 3, sugar: 0 },
+                allergens: "Gluten"
+            },
+            "Prawn Fry": {
+                ingredients: "Prawns, Garlic, Ginger, Chili Powder, Coriander Powder, Cumin Powder, Lemon Juice, Oil",
+                nutritionalInfo: { calories: 350, protein: 25, carbs: 10, fats: 20, fiber: 1, sugar: 1 },
+                allergens: "Shellfish"
+            },
+            "Paneer Butter Masala": {
+                ingredients: "Paneer, Butter, Cream, Tomato Puree, Onion, Ginger, Garlic, Garam Masala",
+                nutritionalInfo: { calories: 400, protein: 15, carbs: 20, fats: 25, fiber: 2, sugar: 3 },
+                allergens: "Dairy"
+            },
+            "Paneer Biryani": {
+                ingredients: "Paneer, Basmati Rice, Mixed Vegetables (Carrot, Peas, Potato), Onion, Tomatoes, Biryani Masala, Mint Leaves, Curd",
+                nutritionalInfo: { calories: 350, protein: 12, carbs: 55, fats: 15, fiber: 4, sugar: 3 },
+                allergens: "Dairy"
+            },
+            "Onion Pakoda": {
+                ingredients: "Onion, Chickpea Flour (Besan), Rice Flour, Green Chilies, Cumin Seeds, Ginger, Turmeric Powder, Oil (for frying)",
+                nutritionalInfo: { calories: 200, protein: 5, carbs: 30, fats: 8, fiber: 3, sugar: 2 },
+                allergens: "Gluten (if cross-contamination)"
+            },
+            "Mutton Biryani": {
+                ingredients: "Mutton, Basmati Rice, Onion, Tomatoes, Ginger-Garlic Paste, Biryani Masala, Mint Leaves, Yogurt, Ghee",
+                nutritionalInfo: { calories: 500, protein: 30, carbs: 50, fats: 25, fiber: 4, sugar: 3 },
+                allergens: "Dairy"
+            },
+            "Fish Curry": {
+                ingredients: "Fish (any firm fish like Salmon or King Fish), Onion, Tomato, Ginger-Garlic Paste, Curry Leaves, Coconut Milk, Tamarind, Mustard Seeds",
+                nutritionalInfo: { calories: 300, protein: 25, carbs: 10, fats: 20, fiber: 2, sugar: 1 },
+                allergens: "Fish"
+            },
+            "Fiery Mango Glaze Chicken": {
+                ingredients: "Chicken, Mango Puree, Chili Sauce, Soy Sauce, Honey, Garlic, Ginger, Lemon Juice",
+                nutritionalInfo: { calories: 350, protein: 30, carbs: 15, fats: 18, fiber: 1, sugar: 5 },
+                allergens: "Soy"
+            },
+            "Chilli Gobi": {
+                ingredients: "Cauliflower, Onion, Green Chilies, Soy Sauce, Cornflour, Garlic, Ginger, Cumin Powder",
+                nutritionalInfo: { calories: 250, protein: 6, carbs: 35, fats: 12, fiber: 3, sugar: 2 },
+                allergens: "Soy, Gluten"
+            },
+            "Chilli Chicken": {
+                ingredients: "Chicken, Bell Pepper, Onion, Green Chilies, Soy Sauce, Cornflour, Garlic, Ginger",
+                nutritionalInfo: { calories: 400, protein: 35, carbs: 20, fats: 18, fiber: 2, sugar: 2 },
+                allergens: "Soy, Gluten"
+            },
+            "Chicken Manchurian": {
+                ingredients: "Chicken, Onion, Garlic, Ginger, Soy Sauce, Cornflour, Green Chilies, Capsicum",
+                nutritionalInfo: { calories: 350, protein: 25, carbs: 20, fats: 18, fiber: 2, sugar: 2 },
+                allergens: "Soy, Gluten"
+            },
+            "Chicken Curry": {
+                ingredients: "Chicken, Onion, Tomatoes, Ginger-Garlic Paste, Garam Masala, Coconut Milk, Coriander Leaves",
+                nutritionalInfo: { calories: 350, protein: 28, carbs: 15, fats: 12, fiber: 4, sugar: 2 },
+                allergens: "None"
+            },
+            "Chicken Biryani": {
+                ingredients: "Chicken, Basmati Rice, Onion, Tomatoes, Ginger-Garlic Paste, Biryani Masala, Mint Leaves, Curd",
+                nutritionalInfo: { calories: 500, protein: 35, carbs: 60, fats: 20, fiber: 5, sugar: 3 },
+                allergens: "Dairy"
+            },
+            "Channa Masala": {
+                ingredients: "Chickpeas, Onion, Tomatoes, Ginger-Garlic Paste, Garam Masala, Coriander Powder, Cumin Seeds, Lemon Juice",
+                nutritionalInfo: { calories: 250, protein: 10, carbs: 45, fats: 5, fiber: 6, sugar: 2 },
+                allergens: "None"
+            }
+        };
+        function addToCartLocalStorage(payload) {
+            let cart = JSON.parse(localStorage.getItem('cart')) || [];
+            const existingItem = cart.find(item =>
+                item.itemName === payload.itemName &&
+                item.instructions === payload.instructions &&
+                JSON.stringify(item.addons) === JSON.stringify(payload.addons)
+            );
+            if (existingItem) {
+                existingItem.quantity += payload.quantity;
+            } else {
+                cart.push(payload);
+            }
+            localStorage.setItem('cart', JSON.stringify(cart));
+            return cart;
+        }
+        function removeFromCartLocalStorage(itemName, quantityToRemove, instructions, addons) {
+            let cart = JSON.parse(localStorage.getItem('cart')) || [];
+            const itemIndex = cart.findIndex(item =>
+                item.itemName === itemName &&
+                item.instructions === instructions &&
+                JSON.stringify(item.addons) === JSON.stringify(addons)
+            );
+            if (itemIndex !== -1) {
+                if (quantityToRemove >= cart[itemIndex].quantity) {
+                    cart.splice(itemIndex, 1);
+                } else {
+                    cart[itemIndex].quantity -= quantityToRemove;
+                }
+            }
+            localStorage.setItem('cart', JSON.stringify(cart));
+            return cart;
+        }
+        function getCartLocalStorage() {
+            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) {
                 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>
+                        <h6>Nutritional Info</h6>
+                        <div class="nutritional-info">
+                            <span>Calories: ${detailsData.nutritionalInfo.calories} kcal</span>
+                            <span>Carbs: ${detailsData.nutritionalInfo.carbs}g</span>
+                            <span>Protein: ${detailsData.nutritionalInfo.protein}g</span>
+                            <span>Fats: ${detailsData.nutritionalInfo.fats}g</span>
+                        </div>
+                        <h6>Allergens</h6>
+                        <p>${detailsData.allergens}</p>
+                    `;
+                } else {
+                    detailsDiv.innerHTML = '<p>No details available for this item.</p>';
+                }
+            });
+            const cardObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('visible');
+                        observer.unobserve(entry.target);
                     }
                 });
+            }, {
+                root: null,
+                rootMargin: '0px',
+                threshold: 0.1
             });
+            menuCards.forEach(card => cardObserver.observe(card));
             const toggleLinks = document.querySelectorAll('.toggle-details');
             toggleLinks.forEach(link => {
+                link.addEventListener('click', function () {
                     const itemName = this.getAttribute('data-item-name').replace(/ /g, '-');
                     const detailsDiv = document.getElementById(`details-${itemName}`);
                     detailsDiv.classList.toggle('show');
                 });
             });
             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'));
                     this.classList.add('selected');
+                    selectedCategoryInput.value = this.getAttribute('data-category');
+                    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)
+                    );
+                    if (filteredItems.length > 0) {
+                        filteredItems.forEach(item => {
+                            const suggestionDiv = document.createElement('div');
+                            suggestionDiv.classList.add('suggestion-item');
+                            suggestionDiv.innerText = item;
+                            suggestionDiv.addEventListener('click', function () {
+                                searchBar.value = item;
+                                suggestionsContainer.style.display = 'none';
+                                filterMenu();
+                            });
+                            suggestionsContainer.appendChild(suggestionDiv);
+                        });
+                        suggestionsContainer.style.display = 'block';
+                    }
+                }
+                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();
+                    if (inputText) {
+                        const words = inputText.split(/,\s*/).map(word => word.trim());
+                        words.forEach(word => {
+                            if (word && ingredientsList.includes(word)) {
+                                usedIngredients.add(word);
+                            }
+                        });
+                    }
+                }
+                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)
+                        );
+                        if (filteredIngredients.length > 0) {
+                            filteredIngredients.forEach(ingredient => {
+                                const suggestionDiv = document.createElement('div');
+                                suggestionDiv.classList.add('suggestion-item');
+                                suggestionDiv.innerText = ingredient;
+                                suggestionDiv.addEventListener('click', function () {
+                                    const currentValue = descriptionTextarea.value;
+                                    const lastCommaIndex = currentValue.lastIndexOf(',');
+                                    const baseText = lastCommaIndex !== -1 ? currentValue.substring(0, lastCommaIndex + 1) : '';
+                                    descriptionTextarea.value = baseText + (baseText ? ' ' : '') + ingredient + ', ';
+                                    descriptionSuggestions.style.display = 'none';
+                                    descriptionTextarea.focus();
+                                    updateUsedIngredients();
+                                });
+                                descriptionSuggestions.appendChild(suggestionDiv);
+                            });
+                            descriptionSuggestions.style.display = 'block';
+                        }
+                    }
+                });
+                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) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    if (data.success) {
+                        updateCartUI(data.cart);
+                    } else {
+                        console.error('Failed to fetch cart:', data.error);
+                        const cart = getCartLocalStorage();
+                        updateCartUI(cart);
+                    }
+                })
+                .catch(err => {
+                    console.error('Error fetching cart:', err);
+                    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) {
                     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');
+                    matchedSections.add(item.closest('.row'));
+                } else {
+                    item.style.display = 'none';
+                }
+            });
+            sections.forEach(section => {
+                const sectionRow = section.nextElementSibling;
+                if (matchedSections.has(sectionRow)) {
+                    section.style.display = 'block';
+                    sectionRow.style.display = 'flex';
+                } else {
+                    section.style.display = 'none';
+                    sectionRow.style.display = 'none';
+                }
+            });
+            if (!input) {
+                sections.forEach(section => {
+                    section.style.display = 'block';
+                    section.nextElementSibling.style.display = 'flex';
+                });
+                items.forEach(item => {
+                    item.style.display = 'block';
+                    item.classList.add('visible');
+                });
+            }
+        }
         function showItemDetails(name, price, image, description, section, selectedCategory) {
             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');
             modalSectionEl.setAttribute('data-section', section);
             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})` : ''}
+                                </label>
+                            `;
+                            optionsContainer.appendChild(listItem);
+                        });
+                        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) {
+                        otherCheckbox.checked = false;
+                    }
+                });
+            }
         }
         function addToCartFromModal() {
             const itemName = document.getElementById('modal-name').innerText;
+            let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
+            if (isNaN(itemPrice)) {
+                alert('Invalid price for the item. Please check the item details.');
+                return;
+            }
             const itemImage = document.getElementById('modal-img').src;
             const modalSectionEl = document.getElementById('modal-section');
             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 = {
                 itemName: itemName,
                 itemPrice: itemPrice,
                 instructions: instructions,
                 quantity: quantity
             };
+            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('Item added to cart successfully!');
+                    updateCartUI(data.cart);
+                    const modal = document.getElementById('itemModal');
+                    const modalInstance = bootstrap.Modal.getInstance(modal);
+                    modalInstance.hide();
+                } else {
+                    console.error('Failed to add item to cart:', data.error);
+                    alert(data.error || 'Failed to add item to cart.');
+                }
+            })
+            .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');
+                const modalInstance = bootstrap.Modal.getInstance(modal);
+                modalInstance.hide();
+            });
         }
         function handleSoftDrinkAdd(button) {
             const buttonContainer = button.closest('.button-container');
             const quantitySelector = buttonContainer.querySelector('.quantity-selector');
             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,
                 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,
                 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 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>