BiryaniHubflaskhema6

Running

App Files Files Community

lokesh341 commited on Apr 8

Commit

1e496b7

verified ·

1 Parent(s): c32eb64

Update templates/menu.html

Browse files

Files changed (1) hide show

templates/menu.html +624 -536

templates/menu.html CHANGED Viewed

@@ -1,3 +1,4 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -26,6 +27,7 @@
         }
         .container {
             max-width: 900px;
         }
         .menu-card {
             max-width: 350px;
@@ -36,11 +38,12 @@
             display: flex;
             flex-direction: column;
             opacity: 0;
-            transition: opacity 0.3s ease-in-out;
             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         }
         .menu-card.visible {
             opacity: 1;
         }
         .menu-video {
             height: 200px;
@@ -78,11 +81,12 @@
             font-weight: bold;
             border-radius: 5px;
             border: none;
-            transition: background-color 0.3s ease;
             margin-left: 13px;
         }
         .addbutton .btn:hover {
             background-color: #218838;
         }
         .button-container {
             display: flex;
@@ -174,6 +178,11 @@
             border: 1px solid #ffd8b1;
             padding: 5px 0;
             z-index: 1000;
         }
         .dropdown-menu .dropdown-item {
             padding: 10px 16px;
@@ -204,7 +213,7 @@
             color: #2c2c2c;
         }
         .fixed-top-bar {
-            position: relative;
             top: 0;
             left: 0;
             width: 100%;
@@ -216,6 +225,7 @@
             justify-content: space-between;
             align-items: center;
             z-index: 1000;
         }
         .search-bar-container {
             position: absolute;
@@ -237,6 +247,10 @@
             background-color: #fff;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             outline: none;
         }
         .search-bar-container input::placeholder {
             color: #888;
@@ -288,6 +302,7 @@
             cursor: pointer;
             font-size: 14px;
             color: #333;
         }
         .autocomplete-suggestions .suggestion-item:hover {
             background-color: #f1f1f1;
@@ -565,13 +580,56 @@
         #custom-dish-form {
             position: relative;
             padding-bottom: 80px;
         }
         #custom-dish-form .btn-primary {
-            position: absolute;
-            right: 15px;
-            bottom: 15px;
-            width: auto;
             padding: 10px 20px;
         }
         .bottom-action-bar {
             position: fixed;
@@ -602,6 +660,10 @@
             text-align: center;
             min-width: 0;
             white-space: nowrap;
         }
         .bottom-action-bar .btn-order-history {
             background-color: #FFA07A;
@@ -630,6 +692,7 @@
             justify-content: center;
             font-size: 12px;
             margin-left: 8px;
         }
         .mic-popup {
             position: fixed;
@@ -872,75 +935,114 @@
                 padding: 6px 16px;
                 font-size: 14px;
             }
         }
     </style>
 </head>
 <body>
-    <div class="fixed-top-bar">
         <div class="avatar-dropdown-container">
-            <div class="avatar-icon" id="avatarIcon">
                 {% if user_image %}
                     <img src="{{ user_image }}" alt="User Avatar" class="avatar-image">
                 {% else %}
                     <span>{{ first_letter }}</span>
                 {% endif %}
             </div>
-            <div class="dropdown-menu" id="avatarDropdown">
                 {% if user_image %}
-                    <div class="dropdown-item delete-item" id="deleteAvatar">Delete Image</div>
-                    <div class="dropdown-item view-item" id="viewAvatar">View Avatar</div>
                 {% endif %}
-                <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item">Order History</a>
-                <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item">View Profile</a>
-                <div class="dropdown-item upload-item">
                     <label for="avatarUpload" style="cursor: pointer; margin: 0; width: 100%;">
                         Upload Image
                     </label>
-                    <input type="file" id="avatarUpload" accept="image/*" style="display: none;">
                 </div>
-                <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
             </div>
         </div>
         <div class="search-bar-container">
-            <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
             <i class="bi bi-search search-icon"></i>
-            <i class="bi bi-mic mic-icon" id="micIcon"></i>
             <span class="mic-unsupported" id="micUnsupported">Mic not supported</span>
             <div id="autocompleteSuggestions" class="autocomplete-suggestions"></div>
         </div>
     </div>
-    <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" id="customDishForm">
-                    <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 Custom Dish</button>
                 </form>
             </div>
         {% else %}
             {% if ordered_menu.items()|length == 0 %}
-                <p>No menu items available for this category.</p>
             {% else %}
                 {% for section, items in ordered_menu.items() %}
                     <h3>{{ section }}</h3>
@@ -959,7 +1061,8 @@
                                         height="200"
                                         onmouseover="this.play()"
                                         onmouseout="this.pause(); this.currentTime = 0;"
-                                        onerror="this.poster='/static/placeholder.jpg';">
                                         <source src="{{ item.Video1__c | default('/static/placeholder.mp4') }}" type="video/mp4">
                                         Your browser does not support the video tag.
                                     </video>
@@ -969,7 +1072,7 @@
                                                 <h5 class="card-title">{{ item.Name | default('Unnamed Item') }}</h5>
                                                 <p class="card-text price">${{ item.Price__c | default('0.00') }}</p>
                                                 {% if item.Section__c != 'Soft Drinks' %}
-                                                    <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}">Show Details</div>
                                                 {% endif %}
                                             </div>
                                             <div class="d-flex flex-column align-item-center justify-content-center">
@@ -980,12 +1083,13 @@
                                                      data-item-section="{{ item.Section__c | default(section) }}"
                                                      data-item-category="{{ selected_category }}">
                                                     {% if item.Section__c == 'Soft Drinks' %}
-                                                        <button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)">ADD</button>
                                                     {% else %}
                                                         <button class="btn btn-primary"
                                                                 data-bs-toggle="modal"
                                                                 data-bs-target="#itemModal"
-                                                                onclick="showItemDetails('{{ item.Name | default('Unnamed Item') | e }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}', '{{ item.Description__c | default('No description') | e }}', '{{ item.IngredientsInfo__c | default('Not specified') | e }}', '{{ item.NutritionalInfo__c | default('Not available') | e }}', '{{ item.Allergens__c | default('None listed') | e }}', '{{ item.Section__c | default(section) | e }}', '{{ selected_category | e }}')">
                                                             ADD
                                                         </button>
                                                     {% endif %}
@@ -1017,11 +1121,11 @@
         {% endif %}
     </div>
-    <div class="bottom-action-bar">
-        <a href="{{ url_for('orderhistory.order_history') }}" class="btn btn-order-history">
             <i class="bi bi-clock-history"></i> Order History
         </a>
-        <a href="{{ url_for('cart.cart') }}" class="btn btn-view-cart">
             <i class="bi bi-cart"></i> View Cart
             <span class="cart-icon-badge" id="cart-item-count">{{ cart_item_count }}</span>
         </a>
@@ -1051,17 +1155,17 @@
                     </div>
                     <div class="mt-4">
                         <h6>Custom Request</h6>
-                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
                     </div>
                     <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
                 </div>
                 <div class="modal-footer d-flex align-items-center justify-content-between">
                     <div class="d-flex align-items-center gap-2">
-                        <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
-                        <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;"/>
-                        <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
                     </div>
-                    <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
                 </div>
             </div>
         </div>
@@ -1079,7 +1183,7 @@
                     <img id="avatar-modal-img" class="img-fluid rounded mx-auto d-block" alt="Avatar Image" style="max-height: 400px; object-fit: contain;">
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                 </div>
             </div>
         </div>
@@ -1101,26 +1205,45 @@
                     </div>
                     <div class="d-flex justify-content-center align-items-center mb-4">
                         <div class="quantity-selector" style="background-color: #f8f9fa; padding: 10px; border-radius: 10px;">
-                            <button type="button" class="btn btn-outline-secondary" id="soft-drink-decrease" style="width: 40px; height: 40px;">-</button>
-                            <input type="text" class="form-control text-center mx-2" id="soft-drink-quantity" value="1" readonly style="width: 60px; font-weight: bold; font-size: 1.1rem;">
-                            <button type="button" class="btn btn-outline-secondary" id="soft-drink-increase" style="width: 40px; height: 40px;">+</button>
                         </div>
                     </div>
                 </div>
                 <div class="modal-footer" style="border-top: none; padding: 0 20px 20px 20px; justify-content: center;">
-                    <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()" style="width: 200px; padding: 12px; font-size: 1.1rem; background-color: #0FAA39; border-color: #0FAA39;">Add to Cart</button>
                 </div>
             </div>
         </div>
     </div>
     <!-- Mic Popup -->
-    <div class="mic-popup" id="micPopup">
         <div class="mic-popup-icon">
             <i class="bi bi-mic-fill"></i>
         </div>
         <div class="mic-popup-text" id="micPopupText">Listening...</div>
-        <button class="mic-popup-cancel" id="micPopupCancel">Cancel</button>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
@@ -1136,23 +1259,29 @@
             {% 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)"
         ];
-        // Utility function to sanitize input to prevent XSS
         function sanitizeInput(input) {
             const div = document.createElement('div');
             div.textContent = input;
@@ -1167,7 +1296,7 @@
                 JSON.stringify(item.addons) === JSON.stringify(payload.addons)
             );
             if (existingItem) {
-                existingItem.quantity = payload.quantity;
             } else {
                 cart.push(payload);
             }
@@ -1205,6 +1334,17 @@
             };
         }
         function showSoftDrinkModal(button) {
             currentSoftDrinkButton = button;
             const buttonContainer = button.closest('.button-container');
@@ -1227,6 +1367,10 @@
             const buttonContainer = currentSoftDrinkButton.closest('.button-container');
             const quantity = parseInt(document.getElementById('soft-drink-quantity').value) || 1;
             const itemName = sanitizeInput(buttonContainer.getAttribute('data-item-name'));
             const itemPrice = parseFloat(buttonContainer.getAttribute('data-item-price'));
@@ -1242,7 +1386,8 @@
                 category: selectedCategory,
                 addons: [],
                 instructions: '',
-                quantity: quantity
             };
             fetch('/cart/add', {
@@ -1257,15 +1402,9 @@
                 if (data.success) {
                     alert('Item added to cart successfully!');
                     updateCartUI(data.cart);
-                    const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
-                    modal.hide();
                 } else {
-                    console.error('Failed to add item to cart:', data.error);
-                    alert(data.error || 'Failed to add item to cart. Using local storage as fallback.');
-                    const cart = addToCartLocalStorage(cartPayload);
-                    updateCartUI(cart);
-                    const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
-                    modal.hide();
                 }
             })
             .catch(err => {
@@ -1273,8 +1412,7 @@
                 alert('Error adding item to cart. Using local storage as fallback.');
                 const cart = addToCartLocalStorage(cartPayload);
                 updateCartUI(cart);
-                const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
-                modal.hide();
             });
         }
@@ -1304,7 +1442,6 @@
             const deleteAvatar = document.getElementById('deleteAvatar');
             const viewAvatar = document.getElementById('viewAvatar');
-            // Load avatar from localStorage if available
             function loadAvatar() {
                 const savedAvatar = localStorage.getItem('userAvatar');
                 const avatarImage = avatarIcon.querySelector('.avatar-image');
@@ -1323,7 +1460,6 @@
                 }
             }
-            // Ensure avatar options (Delete and View) are present only once
             function ensureAvatarOptions() {
                 if (!document.querySelector('#deleteAvatar')) {
                     const deleteItem = document.createElement('div');
@@ -1344,7 +1480,6 @@
                 }
             }
-            // Remove avatar options
             function removeAvatarOptions() {
                 const deleteItem = document.getElementById('deleteAvatar');
                 const viewItem = document.getElementById('viewAvatar');
@@ -1352,25 +1487,21 @@
                 if (viewItem) viewItem.remove();
             }
-            // Save avatar to localStorage
             function saveAvatar(imageUrl) {
                 localStorage.setItem('userAvatar', imageUrl);
             }
-            // Clear avatar from localStorage
             function clearAvatar() {
                 localStorage.removeItem('userAvatar');
                 avatarIcon.innerHTML = `<span>{{ first_letter }}</span>`;
                 removeAvatarOptions();
             }
-            // Avatar click handler
             avatarIcon.addEventListener('click', function(event) {
                 event.stopPropagation();
                 dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
             });
-            // Handle image upload with 15MB limit and error handling
             avatarUpload.addEventListener('change', function(event) {
                 const file = event.target.files[0];
                 if (file) {
@@ -1407,17 +1538,7 @@
                                 ensureAvatarOptions();
                                 dropdownMenu.style.display = 'none';
                             } else {
-                                alert('Failed to upload image: ' + (data.error || 'Unknown error. Using default image.'));
-                                const img = document.createElement('img');
-                                img.src = '/static/default-avatar.jpg';
-                                img.alt = 'User Avatar';
-                                img.className = 'avatar-image';
-                                img.style.cssText = 'width: 100%; height: 100%; object-fit: cover; border-radius: 50%;';
-                                avatarIcon.innerHTML = '';
-                                avatarIcon.appendChild(img);
-                                saveAvatar('/static/default-avatar.jpg');
-                                ensureAvatarOptions();
-                                dropdownMenu.style.display = 'none';
                             }
                         })
                         .catch(error => {
@@ -1436,51 +1557,43 @@
                         });
                     };
                     reader.onerror = function() {
-                        alert('Error reading the image file. Using default image as fallback.');
-                        const img = document.createElement('img');
-                        img.src = '/static/default-avatar.jpg';
-                        img.alt = 'User Avatar';
-                        img.className = 'avatar-image';
-                        img.style.cssText = 'width: 100%; height: 100%; object-fit: cover; border-radius: 50%;';
-                        avatarIcon.innerHTML = '';
-                        avatarIcon.appendChild(img);
-                        saveAvatar('/static/default-avatar.jpg');
-                        ensureAvatarOptions();
-                        dropdownMenu.style.display = 'none';
                     };
                     reader.readAsDataURL(file);
                 }
             });
-            // Handle image deletion
             function addDeleteListener(deleteElement) {
                 deleteElement.addEventListener('click', function() {
-                    fetch('/delete_avatar', {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json'
-                        }
-                    })
-                    .then(response => {
-                        if (!response.ok) throw new Error('Delete failed');
-                        return response.json();
-                    })
-                    .then(data => {
-                        if (data.success) {
                             clearAvatar();
                             dropdownMenu.style.display = 'none';
-                        } else {
-                            alert('Failed to delete image: ' + (data.error || 'Unknown error'));
-                        }
-                    })
-                    .catch(error => {
-                        console.error('Delete error:', error);
-                        alert('Error deleting image. Please try again.');
                     });
                 });
             }
-            // Handle avatar view
             function addViewListener(viewElement) {
                 viewElement.addEventListener('click', function() {
                     const avatarImage = avatarIcon.querySelector('.avatar-image');
@@ -1496,14 +1609,11 @@
                 });
             }
-            // Add listeners if elements exist
             if (deleteAvatar) addDeleteListener(deleteAvatar);
             if (viewAvatar) addViewListener(viewAvatar);
-            // Load avatar on page load
             loadAvatar();
-            // Close dropdown when clicking outside
             document.addEventListener('click', function(event) {
                 if (!avatarContainer.contains(event.target)) {
                     dropdownMenu.style.display = 'none';
@@ -1559,6 +1669,7 @@
                             const otherLink = otherDetails.previousElementSibling.querySelector('.toggle-details');
                             if (otherLink) {
                                 otherLink.innerText = 'Show Details';
                             }
                         }
                     });
@@ -1566,9 +1677,11 @@
                     if (!isCurrentlyShown) {
                         detailsDiv.classList.add('show');
                         this.innerText = 'Hide Details';
                     } else {
                         detailsDiv.classList.remove('show');
                         this.innerText = 'Show Details';
                     }
                 });
             });
@@ -1578,7 +1691,8 @@
             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 () {
@@ -1591,7 +1705,6 @@
             const searchBar = document.getElementById('searchBar');
             const suggestionsContainer = document.getElementById('autocompleteSuggestions');
-            const debouncedFilterMenu = debounce(filterMenu, 300);
             // Redirect to search page on click
             searchBar.addEventListener('click', function (event) {
@@ -1599,269 +1712,283 @@
                 window.location.href = '/search';
             });
-            searchBar.addEventListener('input', function () {
-                const input = sanitizeInput(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';
-                                debouncedFilterMenu();
-                            });
-                            suggestionsContainer.appendChild(suggestionDiv);
-                        });
-                        suggestionsContainer.style.display = 'block';
-                    }
-                }
-                debouncedFilterMenu();
-            });
-            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';
                     }
                 });
-            }
-            const customDishForm = document.getElementById('customDishForm');
-            if (customDishForm) {
-                customDishForm.addEventListener('submit', function(event) {
-                    const dishName = document.getElementById('custom-dish-name').value.trim();
-                    const description = document.getElementById('custom-dish-description').value.trim();
-                    if (!dishName || !description) {
-                        event.preventDefault();
-                        alert('Please fill in both the dish name and description.');
-                        return;
                     }
                     event.preventDefault();
-                    fetch('/customdish/generate_custom_dish', {
                         method: 'POST',
                         headers: {
-                            'Content-Type': 'application/x-www-form-urlencoded',
                         },
-                        body: new URLSearchParams({
-                            'name': dishName,
-                            'description': description
-                        })
                     })
-                    .then(response => response.json())
                     .then(data => {
                         if (data.success) {
-                            alert('Custom dish submitted successfully!');
-                            window.location.reload();
                         } else {
-                            alert('Failed to submit custom dish: ' + (data.error || 'Unknown error'));
                         }
                     })
                     .catch(error => {
                         console.error('Error submitting custom dish:', error);
-                        alert('Error submitting custom dish. Please try again.');
                     });
                 });
-            }
-            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 preloadedVideos = document.querySelectorAll('link[rel="preload"][as="video"]');
-            preloadedVideos.forEach(link => {
-                const video = document.createElement('video');
-                video.src = link.href;
-                video.preload = 'auto';
-            });
-            const decreaseBtn = document.getElementById('decreaseQuantity');
-            const increaseBtn = document.getElementById('increaseQuantity');
-            const quantityInput = document.getElementById('quantityInput');
-            decreaseBtn.addEventListener('click', function () {
-                let currentQuantity = parseInt(quantityInput.value);
-                if (currentQuantity > 1) {
-                    currentQuantity--;
-                    quantityInput.value = currentQuantity;
-                }
-            });
-            increaseBtn.addEventListener('click', function () {
-                let currentQuantity = parseInt(quantityInput.value);
-                currentQuantity++;
-                quantityInput.value = currentQuantity;
-            });
-            const softDrinkDecreaseBtn = document.getElementById('soft-drink-decrease');
-            const softDrinkIncreaseBtn = document.getElementById('soft-drink-increase');
-            const softDrinkQuantityInput = document.getElementById('soft-drink-quantity');
-            softDrinkDecreaseBtn.addEventListener('click', function() {
-                let currentQuantity = parseInt(softDrinkQuantityInput.value);
-                if (currentQuantity > 1) {
-                    currentQuantity--;
-                    softDrinkQuantityInput.value = currentQuantity;
-                }
-            });
-            softDrinkIncreaseBtn.addEventListener('click', function() {
-                let currentQuantity = parseInt(softDrinkQuantityInput.value);
-                if (currentQuantity < 1000) {
-                    currentQuantity++;
-                    softDrinkQuantityInput.value = currentQuantity;
                 }
-            });
-            // Mic Popup Functionality
             const micIcon = document.getElementById('micIcon');
-            const micUnsupported = document.getElementById('micUnsupported');
             const micPopup = document.getElementById('micPopup');
             const micPopupText = document.getElementById('micPopupText');
             const micPopupCancel = document.getElementById('micPopupCancel');
-            if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
                 const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
                 const recognition = new SpeechRecognition();
                 recognition.continuous = false;
-                recognition.interimResults = true;
                 recognition.lang = 'en-US';
-                recognition.onstart = () => {
-                    micIcon.classList.add('active');
                     micPopup.classList.add('active');
                     micPopupText.textContent = 'Listening...';
                 };
-                recognition.onresult = (event) => {
-                    let interimTranscript = '';
-                    let finalTranscript = '';
-                    for (let i = event.resultIndex; i < event.results.length; i++) {
-                        const transcript = event.results[i][0].transcript;
-                        if (event.results[i].isFinal) {
-                            finalTranscript += transcript;
-                        } else {
-                            interimTranscript += transcript;
-                        }
-                    }
-                    if (interimTranscript) {
-                        micPopupText.textContent = interimTranscript;
-                    }
-                    if (finalTranscript) {
-                        searchBar.value = sanitizeInput(finalTranscript.trim());
-                        debouncedFilterMenu();
                         micPopup.classList.remove('active');
-                    }
-                };
-                recognition.onend = () => {
-                    micIcon.classList.remove('active');
-                    if (micPopup.classList.contains('active')) {
-                        setTimeout(() => {
-                            micPopup.classList.remove('active');
-                        }, 1000);
-                    }
                 };
-                recognition.onerror = (event) => {
-                    micIcon.classList.remove('active');
-                    micPopupText.textContent = 'Error: ' + event.error;
                     setTimeout(() => {
                         micPopup.classList.remove('active');
                     }, 2000);
-                    console.error('Speech error:', event.error);
                 };
-                micIcon.addEventListener('click', () => {
-                    try {
-                        recognition.start();
-                    } catch (e) {
-                        micPopupText.textContent = 'Error starting microphone';
                         setTimeout(() => {
                             micPopup.classList.remove('active');
-                        }, 2000);
-                        console.error('Recognition start error:', e);
                     }
-                });
-                micPopupCancel.addEventListener('click', () => {
                     recognition.stop();
                     micPopup.classList.remove('active');
                     micIcon.classList.remove('active');
@@ -1871,217 +1998,178 @@
                 micUnsupported.style.display = 'block';
             }
-            // Highlight and open modal for item from search redirect
-            const highlightItem = "{{ highlight_item | e }}";
-            if (highlightItem) {
-                const itemElement = document.querySelector(`[data-item-name="${highlightItem}"]`);
-                if (itemElement) {
-                    itemElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                    itemElement.style.backgroundColor = '#FFFFE0'; // Light yellow highlight
-                    setTimeout(() => {
-                        itemElement.style.backgroundColor = ''; // Remove highlight after 2 seconds
-                    }, 2000);
-                    // Find the ADD button and trigger the appropriate modal
-                    const addButton = itemElement.querySelector('.btn-primary');
-                    const buttonContainer = addButton.closest('.button-container');
-                    const section = buttonContainer.getAttribute('data-item-section');
-                    if (section === 'Soft Drinks') {
-                        showSoftDrinkModal(addButton);
-                    } else {
-                        const name = sanitizeInput(buttonContainer.getAttribute('data-item-name'));
-                        const price = buttonContainer.getAttribute('data-item-price');
-                        const image = buttonContainer.getAttribute('data-item-image');
-                        const category = buttonContainer.getAttribute('data-item-category');
-                        // Use data from the button's onclick attribute or fetch from server
-                        const onclickAttr = addButton.getAttribute('onclick');
-                        if (onclickAttr) {
-                            const argsMatch = onclickAttr.match(/showItemDetails\((.*?)\)/);
-                            if (argsMatch) {
-                                const args = argsMatch[1].split(',').map(arg => arg.trim().replace(/['"]/g, ''));
-                                const [name, price, image, description, ingredients, nutrition, allergens, section, category] = args;
-                                showItemDetails(name, price, image, description, ingredients, nutrition, allergens, section, category);
-                            }
                         } else {
-                            // Fallback if onclick isn't sufficient
-                            showItemDetails(name, price, image, 'No description available', 'Not specified', 'Not available', 'None listed', section, category);
                         }
-                    }
-                }
             }
-        });
-        function filterMenu() {
-            const input = sanitizeInput(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, ingredients, nutrition, allergens, section, selectedCategory) {
-            document.getElementById('modal-name').innerText = name;
-            document.getElementById('modal-price').innerText = `$${price}`;
-            const modalImg = document.getElementById('modal-img');
-            modalImg.src = image || '/static/placeholder.jpg';
-            document.getElementById('modal-description').innerText = description || 'No description available.';
-            document.getElementById('modal-ingredients').innerText = ingredients || 'Not specified';
-            document.getElementById('modal-nutrition').innerText = nutrition || 'Not available';
-            document.getElementById('modal-allergens').innerText = allergens || 'None listed';
-            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;
-            fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
                 .then(response => response.json())
                 .then(data => {
-                    const addonsList = document.getElementById('addons-list');
-                    addonsList.innerHTML = '';
-                    if (!data.success || !data.addons || data.addons.length === 0) {
-                        addonsList.innerHTML = '<p>No customization options available.</p>';
-                        return;
                     }
-                    data.addons.forEach(addon => {
-                        const sectionDiv = document.createElement('div');
-                        sectionDiv.classList.add('addon-section');
-                        const title = document.createElement('h6');
-                        title.innerText = addon.name;
-                        sectionDiv.appendChild(title);
-                        const optionsContainer = document.createElement('div');
-                        addon.options.forEach((option, index) => {
-                            const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
-                            const listItem = document.createElement('div');
-                            listItem.classList.add('form-check');
-                            listItem.innerHTML = `
-                                <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
-                                       data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
-                                <label class="form-check-label" for="${optionId}">
-                                    ${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}
-                                </label>
-                            `;
-                            optionsContainer.appendChild(listItem);
-                        });
-                        sectionDiv.appendChild(optionsContainer);
-                        addonsList.appendChild(sectionDiv);
-                    });
                 })
                 .catch(err => {
-                    console.error('Error fetching add-ons:', err);
-                    document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
                 });
-        }
-        document.addEventListener('click', function(event) {
-            if (event.target.classList.contains('addon-option')) {
-                handleAddonClick(event.target);
             }
-        });
-        function handleAddonClick(checkbox) {
-            const groupName = checkbox.getAttribute('data-group');
-            const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it"].includes(groupName);
-            const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
-            if (!isMultiSelectGroup) {
-                checkboxes.forEach(cb => {
-                    if (cb !== checkbox) cb.checked = false;
-                });
-            }
-        }
-        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 instructions = document.getElementById('modal-instructions').value.trim();
-            const quantity = parseInt(document.getElementById('quantityInput').value);
-            const section = document.getElementById('modal-section').getAttribute('data-section');
-            const selectedCategory = document.getElementById('modal-section').getAttribute('data-category');
-            const addons = Array.from(document.querySelectorAll('.addon-option:checked')).map(cb => ({
-                name: cb.getAttribute('data-name'),
-                price: parseFloat(cb.getAttribute('data-price') || 0)
-            }));
-            const cartPayload = {
-                itemName: itemName,
-                itemPrice: itemPrice,
-                itemImage: itemImage,
-                section: section,
-                category: selectedCategory,
-                addons: addons,
-                instructions: instructions,
-                quantity: quantity
-            };
-            fetch('/cart/add', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(cartPayload)
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert('Item added to cart successfully!');
-                    updateCartUI(data.cart);
-                    const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
-                    modal.hide();
-                } else {
-                    console.error('Failed to add item to cart:', data.error);
-                    alert(data.error || 'Failed to add item to cart. Using local storage as fallback.');
-                    const cart = addToCartLocalStorage(cartPayload);
-                    updateCartUI(cart);
-                    const modal = document.getElementById('itemModal');
-                    const modalInstance = bootstrap.Modal.getInstance(modal);
-                    modalInstance.hide();
                 }
-            })
-            .catch(err => {
-                console.error('Error adding item to cart:', err);
-                alert('Error adding item to cart. Using local storage as fallback.');
-                const cart = addToCartLocalStorage(cartPayload);
-                updateCartUI(cart);
-                const modal = document.getElementById('itemModal');
-                const modalInstance = bootstrap.Modal.getInstance(modal);
-                modalInstance.hide();
             });
-        }
     </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
         }
         .container {
             max-width: 900px;
+            padding: 0 15px;
         }
         .menu-card {
             max-width: 350px;
             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;
+            transform: translateY(0);
         }
         .menu-video {
             height: 200px;
             font-weight: bold;
             border-radius: 5px;
             border: none;
+            transition: background-color 0.3s ease, transform 0.2s ease;
             margin-left: 13px;
         }
         .addbutton .btn:hover {
             background-color: #218838;
+            transform: scale(1.05);
         }
         .button-container {
             display: flex;
             border: 1px solid #ffd8b1;
             padding: 5px 0;
             z-index: 1000;
+            animation: slideDown 0.2s ease-out;
+        }
+        @keyframes slideDown {
+            from { opacity: 0; transform: translateY(-10px); }
+            to { opacity: 1; transform: translateY(0); }
         }
         .dropdown-menu .dropdown-item {
             padding: 10px 16px;
             color: #2c2c2c;
         }
         .fixed-top-bar {
+            position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             justify-content: space-between;
             align-items: center;
             z-index: 1000;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
         }
         .search-bar-container {
             position: absolute;
             background-color: #fff;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             outline: none;
+            transition: box-shadow 0.3s ease;
+        }
+        .search-bar-container input:focus {
+            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
         }
         .search-bar-container input::placeholder {
             color: #888;
             cursor: pointer;
             font-size: 14px;
             color: #333;
+            transition: background-color 0.2s ease;
         }
         .autocomplete-suggestions .suggestion-item:hover {
             background-color: #f1f1f1;
         #custom-dish-form {
             position: relative;
             padding-bottom: 80px;
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
+            max-height: 70vh;
+            overflow-y: auto;
+        }
+        #custom-dish-form h3 {
+            font-size: 1.3rem;
+            color: #0FAA39;
+            margin-bottom: 20px;
+            text-align: center;
         }
         #custom-dish-form .btn-primary {
+            width: 100%;
             padding: 10px 20px;
+            margin-top: 15px;
+        }
+        #custom-dish-form::-webkit-scrollbar {
+            width: 8px;
+        }
+        #custom-dish-form::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+        #custom-dish-form::-webkit-scrollbar-thumb {
+            background: #0FAA39;
+            border-radius: 10px;
+        }
+        #custom-dish-form::-webkit-scrollbar-thumb:hover {
+            background: #0D9232;
+        }
+        #dishNameSuggestions {
+            position: absolute;
+            width: calc(100% - 30px);
+            max-height: 200px;
+            overflow-y: auto;
+            background: white;
+            border: 1px solid #ddd;
+            border-radius: 0 0 4px 4px;
+            z-index: 1000;
+            display: none;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+        .selection-buttons .btn {
+            width: 100px;
+        }
+        .chat-bar {
+            margin-top: 20px;
         }
         .bottom-action-bar {
             position: fixed;
             text-align: center;
             min-width: 0;
             white-space: nowrap;
+            transition: transform 0.2s ease;
+        }
+        .bottom-action-bar .btn:hover {
+            transform: scale(1.05);
         }
         .bottom-action-bar .btn-order-history {
             background-color: #FFA07A;
             justify-content: center;
             font-size: 12px;
             margin-left: 8px;
+            transition: all 0.3s ease;
         }
         .mic-popup {
             position: fixed;
                 padding: 6px 16px;
                 font-size: 14px;
             }
+            #custom-dish-form {
+                padding: 15px;
+                max-height: 60vh;
+            }
         }
     </style>
 </head>
 <body>
+    <div class="fixed-top-bar" role="banner">
         <div class="avatar-dropdown-container">
+            <div class="avatar-icon" id="avatarIcon" role="button" aria-label="User Menu">
                 {% if user_image %}
                     <img src="{{ user_image }}" alt="User Avatar" class="avatar-image">
                 {% else %}
                     <span>{{ first_letter }}</span>
                 {% endif %}
             </div>
+            <div class="dropdown-menu" id="avatarDropdown" role="menu">
                 {% if user_image %}
+                    <div class="dropdown-item delete-item" id="deleteAvatar" role="menuitem">Delete Image</div>
+                    <div class="dropdown-item view-item" id="viewAvatar" role="menuitem">View Avatar</div>
                 {% endif %}
+                <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item" role="menuitem">Order History</a>
+                <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item" role="menuitem">View Profile</a>
+                <div class="dropdown-item upload-item" role="menuitem">
                     <label for="avatarUpload" style="cursor: pointer; margin: 0; width: 100%;">
                         Upload Image
                     </label>
+                    <input type="file" id="avatarUpload" accept="image/*" style="display: none;" aria-label="Upload Avatar">
                 </div>
+                <a href="{{ url_for('logout') }}" class="dropdown-item" role="menuitem">Logout</a>
             </div>
         </div>
         <div class="search-bar-container">
+            <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off" aria-label="Search menu items">
             <i class="bi bi-search search-icon"></i>
+            <i class="bi bi-mic mic-icon" id="micIcon" role="button" aria-label="Voice Search"></i>
             <span class="mic-unsupported" id="micUnsupported">Mic not supported</span>
             <div id="autocompleteSuggestions" class="autocomplete-suggestions"></div>
         </div>
     </div>
+    <form method="get" action="/menu" class="text-center mb-4" id="categoryForm" role="form">
+        <label class="form-label fw-bold" for="selectedCategoryInput">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 }}" aria-pressed="{% if selected_category == category %}true{% else %}false{% endif %}">{{ category }}</button>
             {% endfor %}
+            <button type="button" class="category-button {% if selected_category == 'Customized Dish' %}selected{% endif %}" data-category="Customized Dish" aria-pressed="{% if selected_category == 'Customized Dish' %}true{% else %}false{% endif %}">Customized Dish</button>
         </div>
         <input type="hidden" name="category" id="selectedCategoryInput" value="{{ selected_category }}">
     </form>
+    <div class="container mt-4" role="main">
         {% if selected_category == "Customized Dish" %}
             <div id="custom-dish-form" class="mt-4">
                 <h3>Create Your Custom Dish</h3>
+                <!-- Veg/Non-Veg Selection -->
+                <div class="selection-buttons mb-3">
+                    <button id="veg-btn" class="btn btn-outline-success me-2" aria-label="Select Vegetarian">Veg</button>
+                    <button id="non-veg-btn" class="btn btn-outline-danger" aria-label="Select Non-Vegetarian">Non-Veg</button>
+                </div>
+                <!-- Custom Dish Form -->
+                <form id="customDishForm" role="form">
+                    <div class="mb-3 position-relative">
                         <label for="custom-dish-name" class="form-label">Dish Name</label>
+                        <input type="text" class="form-control" id="custom-dish-name" name="name" required autocomplete="off" placeholder="e.g., Spicy Chicken Curry" aria-label="Custom Dish Name">
+                        <div id="dishNameSuggestions" class="autocomplete-suggestions"></div>
                     </div>
+                    <div class="mb-3">
+                        <label for="custom-dish-ingredients" class="form-label">Ingredients List</label>
+                        <textarea class="form-control" id="custom-dish-ingredients" name="ingredients" required rows="3" placeholder="e.g., Chicken, Tomatoes, Spices" aria-label="Ingredients List"></textarea>
+                    </div>
+                    <div class="mb-3">
                         <label for="custom-dish-description" class="form-label">Dish Description</label>
+                        <textarea class="form-control" id="custom-dish-description" name="description" required rows="3" placeholder="e.g., A spicy and flavorful chicken dish" aria-label="Dish Description"></textarea>
+                    </div>
+                    <div class="mb-3">
+                        <label for="custom-dish-price" class="form-label">Price ($)</label>
+                        <input type="number" class="form-control" id="custom-dish-price" name="price" step="0.01" min="0.01" required placeholder="e.g., 12.99" aria-label="Price">
                     </div>
+                    <button type="submit" class="btn btn-primary" id="submitCustomDish" aria-label="Submit to Salesforce">Submit to Salesforce</button>
+                    <div id="form-feedback" class="mt-3" style="display: none; text-align: center;"></div>
                 </form>
+                <!-- Selected Item Details -->
+                <div id="item-details" class="mt-3" style="display: none; background: #f8f9fa; padding: 15px; border-radius: 8px;">
+                    <h4>Selected Item Details</h4>
+                    <p><strong>Name:</strong> <span id="detail-name"></span></p>
+                    <p><strong>Ingredients:</strong> <span id="detail-ingredients"></span></p>
+                    <p><strong>Description:</strong> <span id="detail-description"></span></p>
+                    <p><strong>Price:</strong> $<span id="detail-price"></span></p>
+                </div>
+                <!-- Text Bar and Send Button -->
+                <div class="chat-bar mt-3">
+                    <div class="input-group">
+                        <input type="text" class="form-control" id="chat-input" placeholder="Type 'hi' or 'veg'/'non-veg'..." aria-label="Chat Input">
+                        <button class="btn btn-primary" id="send-btn" aria-label="Send Message">Send</button>
+                    </div>
+                    <div id="chat-feedback" class="mt-2" style="text-align: center;"></div>
+                </div>
             </div>
         {% else %}
             {% if ordered_menu.items()|length == 0 %}
+                <p class="text-center">No menu items available for this category.</p>
             {% else %}
                 {% for section, items in ordered_menu.items() %}
                     <h3>{{ section }}</h3>
                                         height="200"
                                         onmouseover="this.play()"
                                         onmouseout="this.pause(); this.currentTime = 0;"
+                                        onerror="this.poster='/static/placeholder.jpg';"
+                                        aria-label="Video preview of {{ item.Name | default('Unnamed Item') }}">
                                         <source src="{{ item.Video1__c | default('/static/placeholder.mp4') }}" type="video/mp4">
                                         Your browser does not support the video tag.
                                     </video>
                                                 <h5 class="card-title">{{ item.Name | default('Unnamed Item') }}</h5>
                                                 <p class="card-text price">${{ item.Price__c | default('0.00') }}</p>
                                                 {% if item.Section__c != 'Soft Drinks' %}
+                                                    <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}" role="button" aria-expanded="false" aria-controls="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}">Show Details</div>
                                                 {% endif %}
                                             </div>
                                             <div class="d-flex flex-column align-item-center justify-content-center">
                                                      data-item-section="{{ item.Section__c | default(section) }}"
                                                      data-item-category="{{ selected_category }}">
                                                     {% if item.Section__c == 'Soft Drinks' %}
+                                                        <button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)" aria-label="Add {{ item.Name | default('Unnamed Item') }} to cart">ADD</button>
                                                     {% else %}
                                                         <button class="btn btn-primary"
                                                                 data-bs-toggle="modal"
                                                                 data-bs-target="#itemModal"
+                                                                onclick="showItemDetails('{{ item.Name | default('Unnamed Item') | e }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}', '{{ item.Description__c | default('No description') | e }}', '{{ item.IngredientsInfo__c | default('Not specified') | e }}', '{{ item.NutritionalInfo__c | default('Not available') | e }}', '{{ item.Allergens__c | default('None listed') | e }}', '{{ item.Section__c | default(section) | e }}', '{{ selected_category | e }}')"
+                                                                aria-label="Add {{ item.Name | default('Unnamed Item') }} to cart">
                                                             ADD
                                                         </button>
                                                     {% endif %}
         {% endif %}
     </div>
+    <div class="bottom-action-bar" role="navigation">
+        <a href="{{ url_for('orderhistory.order_history') }}" class="btn btn-order-history" aria-label="View Order History">
             <i class="bi bi-clock-history"></i> Order History
         </a>
+        <a href="{{ url_for('cart.cart') }}" class="btn btn-view-cart" aria-label="View Cart">
             <i class="bi bi-cart"></i> View Cart
             <span class="cart-icon-badge" id="cart-item-count">{{ cart_item_count }}</span>
         </a>
                     </div>
                     <div class="mt-4">
                         <h6>Custom Request</h6>
+                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..." aria-label="Special Instructions"></textarea>
                     </div>
                     <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
                 </div>
                 <div class="modal-footer d-flex align-items-center justify-content-between">
                     <div class="d-flex align-items-center gap-2">
+                        <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity" aria-label="Decrease Quantity">-</button>
+                        <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;" aria-label="Quantity"/>
+                        <button type="button" class="btn btn-outline-secondary" id="increaseQuantity" aria-label="Increase Quantity">+</button>
                     </div>
+                    <button type="button" class="btn btn-primary" onclick="addToCartFromModal()" aria-label="Add to Cart">Add to Cart</button>
                 </div>
             </div>
         </div>
                     <img id="avatar-modal-img" class="img-fluid rounded mx-auto d-block" alt="Avatar Image" style="max-height: 400px; object-fit: contain;">
                 </div>
                 <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close Avatar Modal">Close</button>
                 </div>
             </div>
         </div>
                     </div>
                     <div class="d-flex justify-content-center align-items-center mb-4">
                         <div class="quantity-selector" style="background-color: #f8f9fa; padding: 10px; border-radius: 10px;">
+                            <button type="button" class="btn btn-outline-secondary" id="soft-drink-decrease" style="width: 40px; height: 40px;" aria-label="Decrease Drink Quantity">-</button>
+                            <input type="text" class="form-control text-center mx-2" id="soft-drink-quantity" value="1" readonly style="width: 60px; font-weight: bold; font-size: 1.1rem;" aria-label="Drink Quantity">
+                            <button type="button" class="btn btn-outline-secondary" id="soft-drink-increase" style="width: 40px; height: 40px;" aria-label="Increase Drink Quantity">+</button>
                         </div>
                     </div>
                 </div>
                 <div class="modal-footer" style="border-top: none; padding: 0 20px 20px 20px; justify-content: center;">
+                    <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()" style="width: 200px; padding: 12px; font-size: 1.1rem; background-color: #0FAA39; border-color: #0FAA39;" aria-label="Add Drink to Cart">Add to Cart</button>
                 </div>
             </div>
         </div>
     </div>
     <!-- Mic Popup -->
+    <div class="mic-popup" id="micPopup" role="alert" aria-live="polite">
         <div class="mic-popup-icon">
             <i class="bi bi-mic-fill"></i>
         </div>
         <div class="mic-popup-text" id="micPopupText">Listening...</div>
+        <button class="mic-popup-cancel" id="micPopupCancel" aria-label="Cancel Voice Search">Cancel</button>
+    </div>
+    <!-- Confirmation Modal -->
+    <div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="confirmationModalLabel">Confirm Action</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <p id="confirmationMessage"></p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Cancel">Cancel</button>
+                    <button type="button" class="btn btn-primary" id="confirmAction" aria-label="Confirm">Confirm</button>
+                </div>
+            </div>
+        </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
             {% endfor %}
         ];
+        const sections = [
+            {% for section in ordered_menu.keys() %}
+                "{{ section | e }}",
+            {% endfor %}
         ];
+        const dishDatabase = {
+            veg: {
+                "Aloo Paratha": { ingredients: "Wheat flour, potatoes, spices (cumin, coriander), ghee", description: "Stuffed potato flatbread cooked with ghee, a North Indian breakfast favorite.", price: 8.99 },
+                "Dosa": { ingredients: "Rice, urad dal, salt (fermented batter)", description: "Crispy South Indian crepe, typically served with sambar and chutney.", price: 8.99 },
+                "Dal Tadka": { ingredients: "Toor dal, garlic, cumin, ghee, tomatoes", description: "Tempered lentil dish with aromatic spices, a staple across India.", price: 7.99 },
+                "Pav Bhaji": { ingredients: "Mixed veggies (potatoes, peas, capsicum), butter, pav bread", description: "Mumbai's famous buttery vegetable mash with soft bread rolls.", price: 10.49 },
+                "Masala Dosa": { ingredients: "Dosa batter, potato filling, mustard seeds, curry leaves", description: "Crispy crepe stuffed with spiced potatoes, served with chutney.", price: 9.99 }
+            },
+            nonVeg: {
+                "Butter Chicken": { ingredients: "Chicken, tomato puree, butter, cream, garam masala", description: "Creamy Punjabi curry with tender chicken pieces in rich tomato sauce.", price: 15.99 },
+                "Biryani": { ingredients: "Basmati rice, meat (chicken/mutton), spices (saffron, bay leaf), yogurt, fried onions", description: "Fragrant layered rice dish with spiced meat, a celebration favorite.", price: 14.99 },
+                "Chicken Chettinad": { ingredients: "Chicken, coconut, black pepper, fennel, curry leaves", description: "Fiery Tamil Nadu chicken curry with aromatic spices and coconut.", price: 16.99 },
+                "Fish Curry": { ingredients: "Fish (pomfret/rohu), coconut milk, tamarind, curry leaves", description: "Goan/Kerala style fish in tangy coconut gravy with spices.", price: 17.99 },
+                "Tandoori Chicken": { ingredients: "Chicken, yogurt, red chili, tandoori masala, lemon", description: "Clay oven-roasted chicken marinated in yogurt and spices.", price: 15.99 }
+            }
+        };
         function sanitizeInput(input) {
             const div = document.createElement('div');
             div.textContent = input;
                 JSON.stringify(item.addons) === JSON.stringify(payload.addons)
             );
             if (existingItem) {
+                existingItem.quantity += payload.quantity;
             } else {
                 cart.push(payload);
             }
             };
         }
+        function showConfirmation(message, callback) {
+            document.getElementById('confirmationMessage').innerText = message;
+            const confirmBtn = document.getElementById('confirmAction');
+            confirmBtn.onclick = function() {
+                callback();
+                bootstrap.Modal.getInstance(document.getElementById('confirmationModal')).hide();
+            };
+            const modal = new bootstrap.Modal(document.getElementById('confirmationModal'));
+            modal.show();
+        }
         function showSoftDrinkModal(button) {
             currentSoftDrinkButton = button;
             const buttonContainer = button.closest('.button-container');
             const buttonContainer = currentSoftDrinkButton.closest('.button-container');
             const quantity = parseInt(document.getElementById('soft-drink-quantity').value) || 1;
+            if (quantity < 1 || quantity > 99) {
+                alert('Quantity must be between 1 and 99.');
+                return;
+            }
             const itemName = sanitizeInput(buttonContainer.getAttribute('data-item-name'));
             const itemPrice = parseFloat(buttonContainer.getAttribute('data-item-price'));
                 category: selectedCategory,
                 addons: [],
                 instructions: '',
+                quantity: quantity,
+                timestamp: new Date().toISOString()
             };
             fetch('/cart/add', {
                 if (data.success) {
                     alert('Item added to cart successfully!');
                     updateCartUI(data.cart);
+                    bootstrap.Modal.getInstance(document.getElementById('softDrinkModal')).hide();
                 } else {
+                    throw new Error(data.error || 'Failed to add item to cart');
                 }
             })
             .catch(err => {
                 alert('Error adding item to cart. Using local storage as fallback.');
                 const cart = addToCartLocalStorage(cartPayload);
                 updateCartUI(cart);
+                bootstrap.Modal.getInstance(document.getElementById('softDrinkModal')).hide();
             });
         }
             const deleteAvatar = document.getElementById('deleteAvatar');
             const viewAvatar = document.getElementById('viewAvatar');
             function loadAvatar() {
                 const savedAvatar = localStorage.getItem('userAvatar');
                 const avatarImage = avatarIcon.querySelector('.avatar-image');
                 }
             }
             function ensureAvatarOptions() {
                 if (!document.querySelector('#deleteAvatar')) {
                     const deleteItem = document.createElement('div');
                 }
             }
             function removeAvatarOptions() {
                 const deleteItem = document.getElementById('deleteAvatar');
                 const viewItem = document.getElementById('viewAvatar');
                 if (viewItem) viewItem.remove();
             }
             function saveAvatar(imageUrl) {
                 localStorage.setItem('userAvatar', imageUrl);
             }
             function clearAvatar() {
                 localStorage.removeItem('userAvatar');
                 avatarIcon.innerHTML = `<span>{{ first_letter }}</span>`;
                 removeAvatarOptions();
             }
             avatarIcon.addEventListener('click', function(event) {
                 event.stopPropagation();
                 dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
             });
             avatarUpload.addEventListener('change', function(event) {
                 const file = event.target.files[0];
                 if (file) {
                                 ensureAvatarOptions();
                                 dropdownMenu.style.display = 'none';
                             } else {
+                                throw new Error(data.error || 'Unknown error');
                             }
                         })
                         .catch(error => {
                         });
                     };
                     reader.onerror = function() {
+                        alert('Error reading the image file.');
                     };
                     reader.readAsDataURL(file);
                 }
             });
             function addDeleteListener(deleteElement) {
                 deleteElement.addEventListener('click', function() {
+                    showConfirmation('Are you sure you want to delete your avatar?', function() {
+                        fetch('/delete_avatar', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            }
+                        })
+                        .then(response => {
+                            if (!response.ok) throw new Error('Delete failed');
+                            return response.json();
+                        })
+                        .then(data => {
+                            if (data.success) {
+                                clearAvatar();
+                                dropdownMenu.style.display = 'none';
+                            } else {
+                                throw new Error(data.error || 'Unknown error');
+                            }
+                        })
+                        .catch(error => {
+                            console.error('Delete error:', error);
+                            alert('Error deleting image. Cleared locally.');
                             clearAvatar();
                             dropdownMenu.style.display = 'none';
+                        });
                     });
                 });
             }
             function addViewListener(viewElement) {
                 viewElement.addEventListener('click', function() {
                     const avatarImage = avatarIcon.querySelector('.avatar-image');
                 });
             }
             if (deleteAvatar) addDeleteListener(deleteAvatar);
             if (viewAvatar) addViewListener(viewAvatar);
             loadAvatar();
             document.addEventListener('click', function(event) {
                 if (!avatarContainer.contains(event.target)) {
                     dropdownMenu.style.display = 'none';
                             const otherLink = otherDetails.previousElementSibling.querySelector('.toggle-details');
                             if (otherLink) {
                                 otherLink.innerText = 'Show Details';
+                                otherLink.setAttribute('aria-expanded', 'false');
                             }
                         }
                     });
                     if (!isCurrentlyShown) {
                         detailsDiv.classList.add('show');
                         this.innerText = 'Hide Details';
+                        this.setAttribute('aria-expanded', 'true');
                     } else {
                         detailsDiv.classList.remove('show');
                         this.innerText = 'Show Details';
+                        this.setAttribute('aria-expanded', 'false');
                     }
                 });
             });
             const selectedCategoryInput = document.getElementById('selectedCategoryInput');
             if (!selectedCategoryInput.value) {
                 selectedCategoryInput.value = "All";
+                const allBtn = document.querySelector('.category-button[data-category="All"]');
+                if (allBtn) allBtn.classList.add('selected');
             }
             categoryButtons.forEach(button => {
                 button.addEventListener('click', function () {
             const searchBar = document.getElementById('searchBar');
             const suggestionsContainer = document.getElementById('autocompleteSuggestions');
             // Redirect to search page on click
             searchBar.addEventListener('click', function (event) {
                 window.location.href = '/search';
             });
+            // Customized Dish Logic
+            const customDishForm = document.getElementById('customDishForm');
+            const dishNameInput = document.getElementById('custom-dish-name');
+            const dishIngredients = document.getElementById('custom-dish-ingredients');
+            const dishDescription = document.getElementById('custom-dish-description');
+            const dishPrice = document.getElementById('custom-dish-price');
+            const dishSuggestions = document.getElementById('dishNameSuggestions');
+            const formFeedback = document.getElementById('form-feedback');
+            const chatInput = document.getElementById('chat-input');
+            const sendBtn = document.getElementById('send-btn');
+            const chatFeedback = document.getElementById('chat-feedback');
+            const vegBtn = document.getElementById('veg-btn');
+            const nonVegBtn = document.getElementById('non-veg-btn');
+            const itemDetails = document.getElementById('item-details');
+            if (customDishForm) {
+                let filterType = 'all'; // Default to show all items
+                // Show item details
+                function showItemDetails(dish) {
+                    if (dish) {
+                        itemDetails.style.display = 'block';
+                        document.getElementById('detail-name').textContent = dish;
+                        document.getElementById('detail-ingredients').textContent = (dishDatabase.veg[dish] || dishDatabase.nonVeg[dish]).ingredients;
+                        document.getElementById('detail-description').textContent = (dishDatabase.veg[dish] || dishDatabase.nonVeg[dish]).description;
+                        document.getElementById('detail-price').textContent = (dishDatabase.veg[dish] || dishDatabase.nonVeg[dish]).price.toFixed(2);
+                    } else {
+                        itemDetails.style.display = 'none';
                     }
                 }
+                // Autocomplete function
+                function updateSuggestions(input) {
+                    const sanitizedInput = sanitizeInput(input.trim().toLowerCase());
+                    dishSuggestions.innerHTML = '';
+                    dishSuggestions.style.display = 'none';
+                    if (sanitizedInput.length > 0) {
+                        let matches = [];
+                        if (filterType === 'veg') {
+                            matches = Object.keys(dishDatabase.veg).filter(dish => dish.toLowerCase().includes(sanitizedInput));
+                        } else if (filterType === 'non-veg') {
+                            matches = Object.keys(dishDatabase.nonVeg).filter(dish => dish.toLowerCase().includes(sanitizedInput));
+                        } else {
+                            matches = [...Object.keys(dishDatabase.veg), ...Object.keys(dishDatabase.nonVeg)].filter(dish => dish.toLowerCase().includes(sanitizedInput));
+                        }
+                        if (matches.length > 0) {
+                            matches.slice(0, 5).forEach(dish => {
+                                const suggestion = document.createElement('div');
+                                suggestion.classList.add('suggestion-item');
+                                suggestion.textContent = dish;
+                                suggestion.addEventListener('click', function () {
+                                    dishNameInput.value = dish;
+                                    const dishData = dishDatabase.veg[dish] || dishDatabase.nonVeg[dish];
+                                    if (dishData) {
+                                        dishIngredients.value = dishData.ingredients;
+                                        dishDescription.value = dishData.description;
+                                        dishPrice.value = dishData.price.toFixed(2);
+                                        showItemDetails(dish);
+                                    }
+                                    dishSuggestions.style.display = 'none';
                                 });
+                                dishSuggestions.appendChild(suggestion);
                             });
+                            dishSuggestions.style.display = 'block';
                         }
                     }
+                }
+                // Autocomplete for dish name
+                dishNameInput.addEventListener('input', function () {
+                    updateSuggestions(this.value);
                 });
+                // Close suggestions when clicking outside
+                document.addEventListener('click', function (e) {
+                    if (e.target !== dishNameInput && !dishSuggestions.contains(e.target)) {
+                        dishSuggestions.style.display = 'none';
                     }
                 });
+                // Veg/Non-Veg button handlers
+                vegBtn.addEventListener('click', function () {
+                    filterType = 'veg';
+                    vegBtn.classList.remove('btn-outline-success');
+                    vegBtn.classList.add('btn-success');
+                    nonVegBtn.classList.remove('btn-danger');
+                    nonVegBtn.classList.add('btn-outline-danger');
+                    updateSuggestions(dishNameInput.value);
+                });
+                nonVegBtn.addEventListener('click', function () {
+                    filterType = 'non-veg';
+                    nonVegBtn.classList.remove('btn-outline-danger');
+                    nonVegBtn.classList.add('btn-danger');
+                    vegBtn.classList.remove('btn-success');
+                    vegBtn.classList.add('btn-outline-success');
+                    updateSuggestions(dishNameInput.value);
+                });
+                // Chat bar handler
+                sendBtn.addEventListener('click', function () {
+                    const input = sanitizeInput(chatInput.value.trim().toLowerCase());
+                    chatFeedback.innerHTML = '';
+                    if (input === 'hi') {
+                        fetch('/salesforce/get_customer_name', {
+                            method: 'GET',
+                            headers: { 'Content-Type': 'application/json' }
+                        })
+                        .then(response => response.json())
+                        .then(data => {
+                            const customerName = data.name || 'Customer';
+                            chatFeedback.innerHTML = `Welcome ${customerName}!`;
+                            chatFeedback.className = 'text-success';
+                        })
+                        .catch(error => {
+                            console.error('Error fetching customer name:', error);
+                            chatFeedback.innerHTML = 'Welcome Guest!';
+                            chatFeedback.className = 'text-success';
+                        });
+                    } else if (input === 'veg') {
+                        filterType = 'veg';
+                        vegBtn.click();
+                        chatFeedback.innerHTML = 'Showing vegetarian items.';
+                        chatFeedback.className = 'text-success';
+                    } else if (input === 'non-veg' || input === 'non veg') {
+                        filterType = 'non-veg';
+                        nonVegBtn.click();
+                        chatFeedback.innerHTML = 'Showing non-vegetarian items.';
+                        chatFeedback.className = 'text-success';
+                    } else {
+                        chatFeedback.innerHTML = 'Please type "hi", "veg", or "non-veg".';
+                        chatFeedback.className = 'text-danger';
                     }
+                    chatInput.value = '';
+                });
+                // Form submission to Salesforce
+                customDishForm.addEventListener('submit', function (event) {
                     event.preventDefault();
+                    formFeedback.style.display = 'none';
+                    formFeedback.innerHTML = '';
+                    const dishName = sanitizeInput(dishNameInput.value.trim());
+                    const ingredients = sanitizeInput(dishIngredients.value.trim());
+                    const description = sanitizeInput(dishDescription.value.trim());
+                    const price = parseFloat(dishPrice.value);
+                    if (!dishName) {
+                        showFeedback('Please enter a dish name.', 'text-danger');
+                        return;
+                    }
+                    if (!ingredients) {
+                        showFeedback('Please enter ingredients.', 'text-danger');
+                        return;
+                    }
+                    if (!description) {
+                        showFeedback('Please enter a description.', 'text-danger');
+                        return;
+                    }
+                    if (isNaN(price) || price <= 0) {
+                        showFeedback('Please enter a valid price greater than 0.', 'text-danger');
+                        return;
+                    }
+                    const submitBtn = document.getElementById('submitCustomDish');
+                    submitBtn.disabled = true;
+                    submitBtn.innerText = 'Submitting...';
+                    const formData = {
+                        name: dishName,
+                        ingredients: ingredients,
+                        description: description,
+                        price: price,
+                        type: filterType === 'veg' ? 'Vegetarian' : 'Non-Vegetarian'
+                    };
+                    fetch('/salesforce/submit_custom_dish', {
                         method: 'POST',
                         headers: {
+                            'Content-Type': 'application/json',
                         },
+                        body: JSON.stringify(formData)
+                    })
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error(`Server error: ${response.status}`);
+                        }
+                        return response.json();
                     })
                     .then(data => {
                         if (data.success) {
+                            showFeedback('Custom dish submitted to Salesforce successfully!', 'text-success');
+                            customDishForm.reset();
+                            itemDetails.style.display = 'none';
+                            setTimeout(() => {
+                                window.location.reload();
+                            }, 1500);
                         } else {
+                            throw new Error(data.error || 'Submission failed');
                         }
                     })
                     .catch(error => {
                         console.error('Error submitting custom dish:', error);
+                        showFeedback(`Error: ${error.message}. Please try again.`, 'text-danger');
+                    })
+                    .finally(() => {
+                        submitBtn.disabled = false;
+                        submitBtn.innerText = 'Submit to Salesforce';
                     });
                 });
+                // Show feedback to user
+                function showFeedback(message, className) {
+                    formFeedback.innerHTML = message;
+                    formFeedback.className = `mt-3 ${className}`;
+                    formFeedback.style.display = 'block';
                 }
+            }
+            // Voice Search Functionality
             const micIcon = document.getElementById('micIcon');
             const micPopup = document.getElementById('micPopup');
             const micPopupText = document.getElementById('micPopupText');
             const micPopupCancel = document.getElementById('micPopupCancel');
+            const micUnsupported = document.getElementById('micUnsupported');
+            if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
                 const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
                 const recognition = new SpeechRecognition();
                 recognition.continuous = false;
+                recognition.interimResults = false;
                 recognition.lang = 'en-US';
+                micIcon.addEventListener('click', function () {
                     micPopup.classList.add('active');
+                    recognition.start();
+                });
+                recognition.onstart = function () {
                     micPopupText.textContent = 'Listening...';
+                    micIcon.classList.add('active');
                 };
+                recognition.onresult = function (event) {
+                    const transcript = event.results[0][0].transcript.trim().toLowerCase();
+                    micPopupText.textContent = `You said: "${transcript}"`;
+                    setTimeout(() => {
                         micPopup.classList.remove('active');
+                        searchBar.value = transcript;
+                        performSearch(transcript);
+                        micIcon.classList.remove('active');
+                    }, 1000);
                 };
+                recognition.onerror = function (event) {
+                    micPopupText.textContent = 'Error occurred in recognition: ' + event.error;
                     setTimeout(() => {
                         micPopup.classList.remove('active');
+                        micIcon.classList.remove('active');
                     }, 2000);
                 };
+                recognition.onend = function () {
+                    if (micPopup.classList.contains('active')) {
+                        micPopupText.textContent = 'Recognition ended.';
                         setTimeout(() => {
                             micPopup.classList.remove('active');
+                            micIcon.classList.remove('active');
+                        }, 1000);
                     }
+                };
+                micPopupCancel.addEventListener('click', function () {
                     recognition.stop();
                     micPopup.classList.remove('active');
                     micIcon.classList.remove('active');
                 micUnsupported.style.display = 'block';
             }
+            function performSearch(query) {
+                const lowerQuery = query.toLowerCase();
+                const matchingSection = sections.find(section => section.toLowerCase().includes(lowerQuery));
+                if (matchingSection) {
+                    selectedCategoryInput.value = matchingSection;
+                    categoryForm.submit();
+                } else {
+                    const matchingItem = menuItems.find(item => item.toLowerCase().includes(lowerQuery));
+                    if (matchingItem) {
+                        const itemCard = document.querySelector(`[data-item-name="${matchingItem}"]`);
+                        if (itemCard) {
+                            itemCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                            itemCard.classList.add('highlight');
+                            setTimeout(() => itemCard.classList.remove('highlight'), 2000);
+                        }
+                    } else {
+                        alert('No matching items or sections found.');
+                    }
+                }
+            }
+            function showItemDetails(name, price, image, description, ingredients, nutrition, allergens, section, category) {
+                document.getElementById('modal-name').textContent = name;
+                document.getElementById('modal-price').textContent = `$${price}`;
+                document.getElementById('modal-img').src = image;
+                document.getElementById('modal-description').textContent = description;
+                document.getElementById('modal-ingredients').textContent = ingredients;
+                document.getElementById('modal-nutrition').textContent = nutrition;
+                document.getElementById('modal-allergens').textContent = allergens;
+                document.getElementById('modal-section').dataset.section = section;
+                document.getElementById('modal-section').dataset.category = category;
+                document.getElementById('quantityInput').value = '1';
+                document.getElementById('modal-instructions').value = '';
+                fetchAddons(name, section);
+            }
+            function fetchAddons(itemName, section) {
+                const addonsList = document.getElementById('addons-list');
+                addonsList.innerHTML = 'Loading customization options...';
+                fetch(`/menu/addons?item_name=${encodeURIComponent(itemName)}&section=${encodeURIComponent(section)}`)
+                    .then(response => response.json())
+                    .then(data => {
+                        addonsList.innerHTML = '';
+                        if (data.addons && data.addons.length > 0) {
+                            data.addons.forEach(addon => {
+                                const addonDiv = document.createElement('div');
+                                addonDiv.className = 'addon-section mb-3';
+                                addonDiv.innerHTML = `
+                                    <h6>${addon.name}</h6>
+                                    ${addon.options.map(option => `
+                                        <div class="form-check">
+                                            <input class="form-check-input" type="${addon.type === 'single' ? 'radio' : 'checkbox'}"
+                                                   name="${addon.name}" id="${option.id}" value="${option.name}"
+                                                   data-price="${option.price}">
+                                            <label class="form-check-label" for="${option.id}">
+                                                ${option.name} ${option.price > 0 ? '(+$' + option.price.toFixed(2) + ')' : ''}
+                                            </label>
+                                        </div>
+                                    `).join('')}
+                                `;
+                                addonsList.appendChild(addonDiv);
+                            });
                         } else {
+                            addonsList.innerHTML = '<p>No customization options available.</p>';
                         }
+                    })
+                    .catch(error => {
+                        console.error('Error fetching addons:', error);
+                        addonsList.innerHTML = '<p>Error loading customization options.</p>';
+                    });
             }
+            function addToCartFromModal() {
+                if (isProcessingRequest) return;
+                isProcessingRequest = true;
+                const itemName = sanitizeInput(document.getElementById('modal-name').textContent);
+                const itemPrice = parseFloat(document.getElementById('modal-price').textContent.replace('$', ''));
+                const itemImage = document.getElementById('modal-img').src;
+                const section = sanitizeInput(document.getElementById('modal-section').dataset.section);
+                const category = sanitizeInput(document.getElementById('modal-section').dataset.category);
+                const quantity = parseInt(document.getElementById('quantityInput').value);
+                const instructions = sanitizeInput(document.getElementById('modal-instructions').value);
+                if (quantity < 1 || quantity > 99) {
+                    alert('Quantity must be between 1 and 99.');
+                    isProcessingRequest = false;
+                    return;
                 }
+                const addons = [];
+                document.querySelectorAll('#addons-list .form-check-input:checked').forEach(input => {
+                    const addonName = input.getAttribute('name');
+                    const optionName = input.value;
+                    const optionPrice = parseFloat(input.getAttribute('data-price')) || 0;
+                    addons.push({ addonName, optionName, optionPrice });
                 });
+                const cartPayload = {
+                    itemName: itemName,
+                    itemPrice: itemPrice,
+                    itemImage: itemImage,
+                    section: section,
+                    category: category,
+                    addons: addons,
+                    instructions: instructions,
+                    quantity: quantity,
+                    timestamp: new Date().toISOString()
+                };
+                fetch('/cart/add', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(cartPayload)
+                })
                 .then(response => response.json())
                 .then(data => {
+                    if (data.success) {
+                        alert('Item added to cart successfully!');
+                        updateCartUI(data.cart);
+                        bootstrap.Modal.getInstance(document.getElementById('itemModal')).hide();
+                    } else {
+                        throw new Error(data.error || 'Failed to add item to cart');
                     }
                 })
                 .catch(err => {
+                    console.error('Error adding item to cart:', err);
+                    alert('Error adding item to cart. Using local storage as fallback.');
+                    const cart = addToCartLocalStorage(cartPayload);
+                    updateCartUI(cart);
+                    bootstrap.Modal.getInstance(document.getElementById('itemModal')).hide();
+                })
+                .finally(() => {
+                    isProcessingRequest = false;
                 });
             }
+            document.getElementById('increaseQuantity').addEventListener('click', function () {
+                let quantity = parseInt(document.getElementById('quantityInput').value);
+                if (quantity < 99) {
+                    document.getElementById('quantityInput').value = quantity + 1;
+                }
+            });
+            document.getElementById('decreaseQuantity').addEventListener('click', function () {
+                let quantity = parseInt(document.getElementById('quantityInput').value);
+                if (quantity > 1) {
+                    document.getElementById('quantityInput').value = quantity - 1;
+                }
+            });
+            document.getElementById('soft-drink-increase').addEventListener('click', function () {
+                let quantity = parseInt(document.getElementById('soft-drink-quantity').value);
+                if (quantity < 99) {
+                    document.getElementById('soft-drink-quantity').value = quantity + 1;
+                }
+            });
+            document.getElementById('soft-drink-decrease').addEventListener('click', function () {
+                let quantity = parseInt(document.getElementById('soft-drink-quantity').value);
+                if (quantity > 1) {
+                    document.getElementById('soft-drink-quantity').value = quantity - 1;
                 }
             });
+            const initialCart = getCartLocalStorage();
+            updateCartUI(initialCart);
+        });
     </script>
 </body>
+</html>