Update templates/menu.html

templates/menu.html

@@ -15,6 +15,7 @@
         {% endfor %}
     {% endfor %}
     <style>
+        /* General Styles */
         body {
             font-family: Arial, sans-serif;
             background-color: #fdf4e3;
@@ -23,100 +24,99 @@
             display: flex;
             flex-direction: column;
             padding-bottom: 70px;
+            min-height: 100vh;
         }
         .container {
-            max-width: 900px;
+            max-width: 1200px;
+            padding: 0 15px;
         }
-        .menu-card {
-            max-width: 350px;
-            border-radius: 15px;
-            overflow: hidden;
-            background-color: #fff;
-            margin: auto;
+        h3 {
+            color: #333;
+            font-size: 1.5rem;
+            margin-bottom: 20px;
+            font-weight: 600;
+        }
+        /* Fixed Top Bar */
+        .fixed-top-bar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 60px;
+            background: linear-gradient(45deg, #FFA07A, #FFB347);
+            color: white;
+            padding: 10px 20px;
             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);
+            justify-content: space-between;
+            align-items: center;
+            z-index: 1000;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         }
-        .menu-card.visible {
-            opacity: 1;
+        /* Search Bar */
+        .search-bar-container {
+            position: absolute;
+            left: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            display: flex;
+            align-items: center;
+            width: 300px;
+            max-width: 90%;
         }
-        .menu-video {
-            height: 200px;
+        .search-bar-container input {
             width: 100%;
-            object-fit: cover;
-            border-radius: 15px 15px 0 0;
-            opacity: 0;
-            transition: opacity 0.5s ease-in-out;
-            background-color: #000;
+            padding: 10px 40px 10px 40px;
+            font-size: 16px;
+            border-radius: 25px;
+            border: none;
+            background-color: #fff;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            outline: none;
+            transition: box-shadow 0.3s ease;
         }
-        .menu-video.loaded {
-            opacity: 1;
+        .search-bar-container input:focus {
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         }
-        .menu-card:hover .menu-video {
-            opacity: 1;
-            transform: scale(1.05);
+        .search-icon {
+            position: absolute;
+            left: 15px;
+            font-size: 18px;
+            color: #888;
         }
-        .menu-card .card-body .card-title {
-            font-size: 1.2rem;
-            font-weight: 600;
-            margin: 10px 0;
-            color: #333333;
+        .mic-icon {
+            position: absolute;
+            right: 15px;
+            font-size: 18px;
+            color: #888;
+            cursor: pointer;
+            transition: color 0.3s ease;
         }
-        .menu-card .card-body .card-text.price {
-            font-size: 1rem;
-            font-weight: 500;
-            color: #000000;
-            margin-bottom: 5px;
+        .mic-icon.active {
+            color: #007bff;
         }
-        .addbutton .btn {
-            background-color: #28a745;
-            color: white;
-            padding: 10px 20px;
-            font-size: 16px;
-            font-weight: bold;
+        .autocomplete-suggestions {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            width: 100%;
+            max-height: 200px;
+            overflow-y: auto;
+            background-color: #fff;
+            border: 1px solid #ddd;
             border-radius: 5px;
-            border: none;
-            transition: background-color 0.3s ease;
-            margin-left: 13px;
-        }
-        .addbutton .btn:hover {
-            background-color: #218838;
-        }
-        .button-container {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            gap: 6px;
-        }
-        .customisable-text {
-            color: #0FAA39;
-            font-size: 10px;
-            font-weight: 500;
-            margin: 0;
-            text-align: center;
-            line-height: 1;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+            z-index: 1000;
+            display: none;
         }
-        .btn-primary {
-            font-size: 12px;
-            font-weight: bold;
-            border-radius: 8px;
-            width: 70px;
-            height: 35px;
-            background-color: #0FAA39;
-            border-color: #0FAA39;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0;
-            transition: background-color 0.3s ease, transform 0.1s ease;
+        .autocomplete-suggestions .suggestion-item {
+            padding: 8px 15px;
+            cursor: pointer;
+            font-size: 14px;
+            color: #333;
+            transition: background-color 0.2s ease;
         }
-        .btn-primary:hover {
-            background-color: #0D9232;
-            border-color: #0D9232;
-            transform: scale(1.05);
+        .autocomplete-suggestions .suggestion-item:hover {
+            background-color: #f1f1f1;
         }
         /* Avatar Styles */
         .avatar-dropdown-container {
@@ -138,10 +138,11 @@
             justify-content: center;
             overflow: hidden;
             background-color: #007bff;
-            transition: transform 0.2s ease;
+            transition: transform 0.2s ease, box-shadow 0.3s ease;
             color: white;
             font-weight: bold;
             font-size: 18px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
         }
         .avatar-icon img {
             width: 100%;
@@ -150,17 +151,19 @@
         }
         .avatar-icon:hover {
             transform: scale(1.1);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
         }
         .dropdown-menu {
             position: absolute;
             right: 0;
             top: 100%;
             background-color: #fff8f0;
-            border-radius: 5px;
+            border-radius: 8px;
             width: 220px;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
             display: none;
             border: 1px solid #ffd8b1;
+            z-index: 1001;
         }
         .dropdown-menu .dropdown-item {
             padding: 12px 16px;
@@ -169,7 +172,7 @@
             border-bottom: 1px solid #ffd8b1;
             display: block;
             font-size: 15px;
-            transition: background-color 0.2s ease;
+            transition: background-color 0.2s ease, color 0.2s ease;
         }
         .dropdown-menu .dropdown-item:last-child {
             border-bottom: none;
@@ -178,10 +181,11 @@
             background-color: #ffe4c4;
             color: #333;
         }
-        /* Avatar Modal Styles */
+        /* Avatar Modal */
         .avatar-modal .modal-content {
             border-radius: 20px;
             overflow: hidden;
+            background-color: #fff;
         }
         .avatar-modal-img {
             width: 300px;
@@ -190,87 +194,163 @@
             object-fit: cover;
             margin: 20px auto;
             border: 4px solid #0FAA39;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
             display: block;
+            transition: transform 0.3s ease;
         }
-        .fixed-top-bar {
-            position: relative;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 54px;
-            background: linear-gradient(45deg, #FFA07A, #FFB347);
-            color: white;
-            padding: 15px;
+        .avatar-modal-img:hover {
+            transform: scale(1.05);
+        }
+        .avatar-modal .modal-header {
+            background-color: #f8f9fa;
+            border-bottom: none;
+        }
+        .avatar-modal .modal-footer {
+            border-top: none;
+            justify-content: center;
+        }
+        /* Category Buttons */
+        .category-buttons {
             display: flex;
-            justify-content: space-between;
-            align-items: center;
-            z-index: 1000;
+            flex-wrap: wrap;
+            gap: 10px;
+            justify-content: center;
+            margin-top: 10px;
         }
-        .search-bar-container {
-            position: absolute;
-            left: 20px;
-            top: 50%;
-            transform: translateY(-50%);
+        .category-button {
+            padding: 10px 20px;
+            font-size: 14px;
+            border-radius: 20px;
+            background-color: #fff;
+            border: 1px solid #ddd;
+            color: #333;
+            cursor: pointer;
+            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+        }
+        .category-button:hover {
+            background-color: #f1f1f1;
+            border-color: #bbb;
+        }
+        .category-button.selected {
+            background-color: #0FAA39;
+            color: white;
+            border-color: #0FAA39;
+        }
+        /* Menu Cards */
+        .menu-card {
+            max-width: 350px;
+            border-radius: 15px;
+            overflow: hidden;
+            background-color: #fff;
+            margin: auto;
             display: flex;
-            align-items: center;
-            width: 300px;
-            max-width: 90%;
+            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);
         }
-        .search-bar-container input {
+        .menu-card.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .menu-video {
+            height: 200px;
             width: 100%;
-            padding: 8px 40px 8px 40px;
-            font-size: 16px;
-            border-radius: 25px;
-            border: none;
-            background-color: #fff;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            outline: none;
+            object-fit: cover;
+            border-radius: 15px 15px 0 0;
+            opacity: 0;
+            transition: opacity 0.5s ease-in-out;
+            background-color: #000;
         }
-        .search-bar-container input::placeholder {
-            color: #888;
+        .menu-video.loaded {
+            opacity: 1;
         }
-        .search-icon {
-            position: absolute;
-            left: 15px;
-            font-size: 18px;
-            color: #888;
+        .menu-card:hover .menu-video {
+            opacity: 1;
         }
-        .mic-icon {
-            position: absolute;
-            right: 15px;
-            font-size: 18px;
-            color: #888;
+        .menu-card .card-body {
+            padding: 15px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .menu-card .card-title {
+            font-size: 1.2rem;
+            font-weight: 600;
+            margin: 0 0 5px 0;
+            color: #333;
+        }
+        .menu-card .card-text.price {
+            font-size: 1rem;
+            font-weight: 500;
+            color: #000;
+            margin-bottom: 5px;
+        }
+        .toggle-details {
+            color: #0FAA39;
             cursor: pointer;
+            font-size: 0.9rem;
+            text-decoration: underline;
             transition: color 0.3s ease;
         }
-        .mic-icon.active {
-            color: #007bff;
+        .toggle-details:hover {
+            color: #0D9232;
         }
-        .autocomplete-suggestions {
-            position: absolute;
-            top: 100%;
-            left: 0;
-            width: 100%;
-            max-height: 200px;
-            overflow-y: auto;
-            background-color: #fff;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-            z-index: 1000;
+        .item-details {
+            padding: 15px;
+            background-color: #f9f9f9;
             display: none;
+            border-top: 1px solid #eee;
+        }
+        .item-details.show {
+            display: block;
+        }
+        .item-details h6 {
+            font-size: 1rem;
+            font-weight: 600;
+            margin-top: 10px;
+            color: #333;
+        }
+        .item-details p {
+            font-size: 0.9rem;
+            color: #666;
+            margin: 5px 0;
+        }
+        .button-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 6px;
+        }
+        .btn-primary {
+            font-size: 12px;
+            font-weight: bold;
+            border-radius: 8px;
+            width: 70px;
+            height: 35px;
+            background-color: #0FAA39;
+            border-color: #0FAA39;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            transition: background-color 0.3s ease, transform 0.1s ease;
         }
-        .autocomplete-suggestions .suggestion-item {
-            padding: 8px 15px;
-            cursor: pointer;
-            font-size: 14px;
-            color: #333;
+        .btn-primary:hover {
+            background-color: #0D9232;
+            border-color: #0D9232;
+            transform: scale(1.05);
         }
-        .autocomplete-suggestions .suggestion-item:hover {
-            background-color: #f1f1f1;
+        .customisable-text {
+            color: #0FAA39;
+            font-size: 10px;
+            font-weight: 500;
+            margin: 0;
+            text-align: center;
+            line-height: 1;
         }
-        /* Add rest of your existing CSS here */
+        /* Bottom Action Bar */
         .bottom-action-bar {
             position: fixed;
             bottom: 0;
@@ -283,17 +363,19 @@
             align-items: center;
             box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
             z-index: 1000;
-            max-width: 900px;
+            max-width: 1200px;
             margin: 0 auto;
         }
         .bottom-action-bar .btn {
             flex: 1;
             margin: 0 5px;
-            padding: 10px 15px;
+            padding: 12px 15px;
             border-radius: 8px;
             font-weight: bold;
             font-size: 16px;
             color: white;
+            text-align: center;
+            transition: background-color 0.3s ease;
         }
         .bottom-action-bar .btn-order-history {
             background-color: #FFA07A;
@@ -303,6 +385,9 @@
             background-color: #0FAA39;
             border-color: #0FAA39;
         }
+        .bottom-action-bar .btn:hover {
+            opacity: 0.9;
+        }
         .cart-icon-badge {
             background-color: white;
             color: #0FAA39;
@@ -314,7 +399,61 @@
             justify-content: center;
             font-size: 12px;
             margin-left: 8px;
+            font-weight: bold;
         }
+        /* Modals */
+        .modal-content {
+            border-radius: 15px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        }
+        .modal-header {
+            background: linear-gradient(45deg, #0FAA39, #0D9232);
+            color: white;
+            border-radius: 15px 15px 0 0;
+            padding: 15px 20px;
+        }
+        .modal-body {
+            padding: 20px;
+        }
+        .modal-footer {
+            padding: 15px 20px;
+            border-top: none;
+            justify-content: space-between;
+        }
+        .modal-addons h6 {
+            font-size: 1rem;
+            font-weight: 600;
+            margin-bottom: 10px;
+        }
+        .addon-section {
+            margin-bottom: 15px;
+        }
+        .form-check {
+            margin-bottom: 8px;
+        }
+        .form-check-label {
+            font-size: 0.9rem;
+            color: #333;
+        }
+        .quantity-selector {
+            background-color: #f8f9fa;
+            padding: 10px;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .quantity-selector button {
+            width: 40px;
+            height: 40px;
+            font-size: 1.2rem;
+        }
+        .quantity-selector input {
+            width: 60px;
+            font-weight: bold;
+            font-size: 1.1rem;
+        }
+        /* Mic Popup */
         .mic-popup {
             position: fixed;
             top: 50%;
@@ -339,11 +478,52 @@
             color: #ff4444;
             animation: pulse 1.5s infinite;
         }
+        .mic-popup-text {
+            font-size: 1.2rem;
+            margin-bottom: 20px;
+        }
+        .mic-popup-cancel {
+            background-color: #ff4444;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .mic-popup-cancel:hover {
+            background-color: #cc3333;
+        }
         @keyframes pulse {
             0% { transform: scale(1); }
             50% { transform: scale(1.1); }
             100% { transform: scale(1); }
         }
+        /* Custom Dish Form */
+        #custom-dish-form {
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 15px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        #custom-dish-form h3 {
+            font-size: 1.5rem;
+            margin-bottom: 20px;
+        }
+        #custom-dish-form .form-label {
+            font-weight: 600;
+            color: #333;
+        }
+        #custom-dish-form .form-control {
+            border-radius: 8px;
+            margin-bottom: 15px;
+        }
+        #custom-dish-form .btn-primary {
+            width: 100%;
+            padding: 12px;
+            font-size: 1.1rem;
+        }
+        /* Add any additional styles from your original code here */
     </style>
 </head>
 <body>
@@ -397,19 +577,20 @@
         </div>
     </div>
 
-    <!-- Menu Content -->
-    <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>
+    <!-- Category Selection -->
+    <div class="container mt-5 pt-4">
+        <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">
+        <!-- Menu Content -->
         {% if selected_category == "Customized Dish" %}
             <div id="custom-dish-form" class="mt-4">
                 <h3>Create Your Custom Dish</h3>
@@ -428,13 +609,13 @@
             </div>
         {% else %}
             {% if ordered_menu.items()|length == 0 %}
-                <p>No menu items available for this category.</p>
+                <p class="text-center text-muted">No menu items available for this category.</p>
             {% else %}
                 {% for section, items in ordered_menu.items() %}
                     <h3>{{ section }}</h3>
                     <div class="row">
                         {% for item in items %}
-                            <div class="col-md-6 mb-4">
+                            <div class="col-md-6 col-lg-4 mb-4">
                                 <div class="card menu-card">
                                     <video 
                                         class="card-img-top menu-video" 
@@ -460,27 +641,25 @@
                                                     <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">
-                                                <div class="button-container" 
-                                                     data-item-name="{{ item.Name | default('Unnamed Item') }}" 
-                                                     data-item-price="{{ item.Price__c | default('0.00') }}" 
-                                                     data-item-image="{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}"
-                                                     data-item-section="{{ item.Section__c | default(section) }}" 
-                                                     data-item-category="{{ selected_category }}">
-                                                    {% if item.Section__c == 'Soft Drinks' %}
-                                                        <button class="btn btn-primary add-to-cart-btn" onclick="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') }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}', '{{ item.Description__c | default('No description') }}', '{{ item.IngredientsInfo__c | default('Not specified') }}', '{{ item.NutritionalInfo__c | default('Not available') }}', '{{ item.Allergens__c | default('None listed') }}', '{{ item.Section__c | default(section) }}', '{{ selected_category }}')">
-                                                            ADD
-                                                        </button>
-                                                    {% endif %}
-                                                    {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c !='Soft Drinks' %}
-                                                        <span class="customisable-text">Customisable</span>
-                                                    {% endif %}
-                                                </div>
+                                            <div class="button-container" 
+                                                 data-item-name="{{ item.Name | default('Unnamed Item') }}" 
+                                                 data-item-price="{{ item.Price__c | default('0.00') }}" 
+                                                 data-item-image="{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}"
+                                                 data-item-section="{{ item.Section__c | default(section) }}" 
+                                                 data-item-category="{{ selected_category }}">
+                                                {% if item.Section__c == 'Soft Drinks' %}
+                                                    <button class="btn btn-primary add-to-cart-btn" onclick="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') }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}', '{{ item.Description__c | default('No description') }}', '{{ item.IngredientsInfo__c | default('Not specified') }}', '{{ item.NutritionalInfo__c | default('Not available') }}', '{{ item.Allergens__c | default('None listed') }}', '{{ item.Section__c | default(section) }}', '{{ selected_category }}')">
+                                                        ADD
+                                                    </button>
+                                                {% endif %}
+                                                {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c != 'Soft Drinks' %}
+                                                    <span class="customisable-text">Customisable</span>
+                                                {% endif %}
                                             </div>
                                         </div>
                                     </div>
@@ -540,7 +719,7 @@
                     </div>
                     <div class="mt-4">
                         <h6>Custom Request</h6>
-                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
+                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..." rows="3"></textarea>
                     </div>
                     <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
                 </div>
@@ -559,27 +738,27 @@
     <!-- Soft Drink Modal -->
     <div class="modal fade" id="softDrinkModal" tabindex="-1" aria-labelledby="softDrinkModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content" style="border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);">
-                <div class="modal-header" style="background: linear-gradient(45deg, #0FAA39, #0D9232); color: white; border-radius: 15px 15px 0 0;">
+            <div class="modal-content">
+                <div class="modal-header">
                     <h5 class="modal-title" id="softDrinkModalLabel">Select Your Drink</h5>
                     <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
-                <div class="modal-body" style="padding: 20px;">
+                <div class="modal-body">
                     <div class="text-center mb-4">
                         <img id="soft-drink-image" class="img-fluid rounded mb-3" alt="Soft Drink Image" style="max-height: 150px; width: auto; object-fit: contain;">
                         <h5 id="soft-drink-name" class="fw-bold" style="color: #333;"></h5>
                         <p id="soft-drink-price" style="font-size: 1.1rem;"></p>
                     </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 class="quantity-selector">
+                            <button type="button" class="btn btn-outline-secondary" id="soft-drink-decrease">-</button>
+                            <input type="text" class="form-control text-center mx-2" id="soft-drink-quantity" value="1" readonly>
+                            <button type="button" class="btn btn-outline-secondary" id="soft-drink-increase">+</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 class="modal-footer">
+                    <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()">Add to Cart</button>
                 </div>
             </div>
         </div>
@@ -599,8 +778,6 @@
         // Initial data from Flask
         const firstLetter = "{{ first_letter | default('G') }}";
         let userAvatar = "{{ user_avatar | default('') }}";
-
-        // Menu item details
         const menuItemDetails = {
             {% for section, items in ordered_menu.items() %}
                 {% for item in items %}
@@ -613,7 +790,6 @@
                 {% endfor %}
             {% endfor %}
         };
-
         let isProcessingRequest = false;
         let currentSoftDrinkButton = null;
 
@@ -628,10 +804,15 @@
         const ingredientsList = [
             "Basmati Rice", "Bell Pepper", "Biryani Masala", "Butter", "Capsicum", "Cauliflower",
             "Chickpea Flour (Besan)", "Chickpeas (Channa)", "Chili Powder", "Chili Sauce",
-            // Add rest of your ingredients here
+            "Cilantro", "Cinnamon", "Cloves", "Coconut Milk", "Coriander Powder", "Cumin Seeds",
+            "Curry Leaves", "Egg", "Fish Sauce", "Garam Masala", "Garlic", "Ginger",
+            "Green Beans", "Green Chili", "Lemon Grass", "Mint Leaves", "Mustard Seeds",
+            "Onion", "Paneer", "Peanuts", "Red Chili", "Rice Flour", "Saffron", "Salt",
+            "Soy Sauce", "Spinach", "Sugar", "Tamarind", "Tomato", "Turmeric", "Yogurt"
+            // Add any additional ingredients from your original code here
         ];
 
-        // LocalStorage cart functions
+        // LocalStorage Cart Functions
         function addToCartLocalStorage(payload) {
             let cart = JSON.parse(localStorage.getItem('cart')) || [];
             const existingItem = cart.find(item => 
@@ -645,6 +826,26 @@
                 cart.push(payload);
             }
             localStorage.setItem('cart', JSON.stringify(cart));
+            updateCartUI(cart);
+            return cart;
+        }
+
+        function removeFromCartLocalStorage(itemName, quantityToRemove, instructions, addons) {
+            let cart = JSON.parse(localStorage.getItem('cart')) || [];
+            const itemIndex = cart.findIndex(item => 
+                item.itemName === itemName && 
+                item.instructions === instructions && 
+                JSON.stringify(item.addons) === JSON.stringify(addons)
+            );
+            if (itemIndex !== -1) {
+                if (quantityToRemove >= cart[itemIndex].quantity) {
+                    cart.splice(itemIndex, 1);
+                } else {
+                    cart[itemIndex].quantity -= quantityToRemove;
+                }
+            }
+            localStorage.setItem('cart', JSON.stringify(cart));
+            updateCartUI(cart);
             return cart;
         }
 
@@ -652,7 +853,7 @@
             return JSON.parse(localStorage.getItem('cart')) || [];
         }
 
-        // Avatar functions
+        // Avatar Functions
         function updateAvatarUI(imageSrc) {
             const avatarIcon = document.getElementById('avatarIcon');
             const avatarDropdown = document.getElementById('avatarDropdown');
@@ -730,6 +931,7 @@
             const maxSizeMB = 50;
             if (file.size > maxSizeMB * 1024 * 1024) {
                 alert(`File size exceeds ${maxSizeMB}MB limit`);
+                e.target.value = '';
                 return;
             }
 
@@ -790,10 +992,219 @@
             });
         }
 
-        // Main DOMContentLoaded event listener
+        // Menu and Interaction Functions
+        function updateCartUI(cart) {
+            if (!Array.isArray(cart)) return;
+            let totalQuantity = cart.reduce((sum, item) => sum + item.quantity, 0);
+            const cartItemCount = document.getElementById('cart-item-count');
+            if (cartItemCount) {
+                cartItemCount.innerText = totalQuantity;
+                cartItemCount.style.display = totalQuantity > 0 ? 'inline-flex' : 'none';
+            }
+        }
+
+        function showSoftDrinkModal(button) {
+            currentSoftDrinkButton = button;
+            const buttonContainer = button.closest('.button-container');
+            const itemName = buttonContainer.getAttribute('data-item-name');
+            const itemPrice = buttonContainer.getAttribute('data-item-price');
+            const itemImage = buttonContainer.getAttribute('data-item-image');
+
+            document.getElementById('soft-drink-name').textContent = itemName;
+            document.getElementById('soft-drink-price').textContent = `$${itemPrice}`;
+            document.getElementById('soft-drink-quantity').value = '1';
+            document.getElementById('soft-drink-image').src = itemImage || '/static/placeholder.jpg';
+
+            const modal = new bootstrap.Modal(document.getElementById('softDrinkModal'));
+            modal.show();
+        }
+
+        function addSoftDrinkToCart() {
+            if (!currentSoftDrinkButton) return;
+
+            const buttonContainer = currentSoftDrinkButton.closest('.button-container');
+            const quantity = parseInt(document.getElementById('soft-drink-quantity').value) || 1;
+            const itemName = buttonContainer.getAttribute('data-item-name');
+            const itemPrice = parseFloat(buttonContainer.getAttribute('data-item-price'));
+            const itemImage = buttonContainer.getAttribute('data-item-image');
+            const section = buttonContainer.getAttribute('data-item-section');
+            const selectedCategory = buttonContainer.getAttribute('data-item-category');
+
+            const cartPayload = {
+                itemName: itemName,
+                itemPrice: itemPrice,
+                itemImage: itemImage,
+                section: section,
+                category: selectedCategory,
+                addons: [],
+                instructions: '',
+                quantity: quantity
+            };
+
+            fetch('/cart/add', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(cartPayload)
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    updateCartUI(data.cart);
+                    const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
+                    modal.hide();
+                } else {
+                    const cart = addToCartLocalStorage(cartPayload);
+                    updateCartUI(cart);
+                    const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
+                    modal.hide();
+                }
+            })
+            .catch(error => {
+                console.error('Error adding to cart:', error);
+                const cart = addToCartLocalStorage(cartPayload);
+                updateCartUI(cart);
+                const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
+                modal.hide();
+            });
+        }
+
+        function showItemDetails(name, price, image, description, ingredients, nutritionalInfo, allergens, section, selectedCategory) {
+            document.getElementById('modal-name').innerText = name;
+            document.getElementById('modal-price').innerText = `$${price}`;
+            document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
+            document.getElementById('modal-description').innerText = description;
+            document.getElementById('modal-ingredients').innerText = ingredients;
+            document.getElementById('modal-nutrition').innerText = nutritionalInfo;
+            document.getElementById('modal-allergens').innerText = allergens;
+            document.getElementById('modal-instructions').value = '';
+            document.getElementById('modal-section').setAttribute('data-section', section);
+            document.getElementById('modal-section').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 = data.success && data.addons.length ? '' : '<p>No customization options available.</p>';
+                    if (data.success && data.addons) {
+                        data.addons.forEach(addon => {
+                            const sectionDiv = document.createElement('div');
+                            sectionDiv.classList.add('addon-section');
+                            sectionDiv.innerHTML = `<h6>${addon.name}</h6>`;
+                            addon.options.forEach((option, index) => {
+                                const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
+                                sectionDiv.innerHTML += `
+                                    <div class="form-check">
+                                        <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>
+                                    </div>
+                                `;
+                            });
+                            addonsList.appendChild(sectionDiv);
+                        });
+                    }
+                })
+                .catch(error => {
+                    console.error('Error fetching addons:', error);
+                    document.getElementById('addons-list').innerHTML = '<p>Failed to load customization options.</p>';
+                });
+        }
+
+        function addToCartFromModal() {
+            const itemName = document.getElementById('modal-name').innerText;
+            let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
+            const itemImage = document.getElementById('modal-img').src;
+            const section = document.getElementById('modal-section').getAttribute('data-section');
+            const selectedCategory = document.getElementById('modal-section').getAttribute('data-category');
+            const selectedAddOns = Array.from(document.querySelectorAll('#addons-list input[type="checkbox"]:checked')).map(addon => ({
+                name: addon.getAttribute('data-name'),
+                price: parseFloat(addon.getAttribute('data-price') || 0)
+            }));
+            const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
+            const instructions = document.getElementById('modal-instructions').value;
+
+            const cartPayload = {
+                itemName: itemName,
+                itemPrice: itemPrice,
+                itemImage: itemImage,
+                section: section,
+                category: selectedCategory,
+                addons: selectedAddOns,
+                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) {
+                    updateCartUI(data.cart);
+                    bootstrap.Modal.getInstance(document.getElementById('itemModal')).hide();
+                } else {
+                    const cart = addToCartLocalStorage(cartPayload);
+                    updateCartUI(cart);
+                    bootstrap.Modal.getInstance(document.getElementById('itemModal')).hide();
+                }
+            })
+            .catch(error => {
+                console.error('Error adding to cart:', error);
+                const cart = addToCartLocalStorage(cartPayload);
+                updateCartUI(cart);
+                bootstrap.Modal.getInstance(document.getElementById('itemModal')).hide();
+            });
+        }
+
+        function filterMenu() {
+            const input = document.getElementById('searchBar').value.trim().toLowerCase();
+            const sections = document.querySelectorAll('h3');
+            const items = document.querySelectorAll('.menu-card');
+            let matchedSections = new Set();
+
+            items.forEach(item => {
+                const itemName = item.querySelector('.card-title').innerText.toLowerCase();
+                const itemSection = item.closest('.row').previousElementSibling.innerText.toLowerCase();
+                if (itemName.includes(input) || itemSection.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');
+                });
+            }
+        }
+
+        // DOMContentLoaded Event Listener
         document.addEventListener('DOMContentLoaded', function () {
             attachAvatarEventListeners();
 
+            // Intersection Observers for Lazy Loading
             const menuCards = document.querySelectorAll('.menu-card');
             const menuVideos = document.querySelectorAll('.menu-video');
             const cardObserver = new IntersectionObserver((entries) => {
@@ -818,9 +1229,11 @@
                     }
                 });
             }, { rootMargin: '200px', threshold: 0.01 });
+
             menuCards.forEach(card => cardObserver.observe(card));
             menuVideos.forEach(video => videoObserver.observe(video));
 
+            // Toggle Details
             const toggleLinks = document.querySelectorAll('.toggle-details');
             toggleLinks.forEach(link => {
                 link.addEventListener('click', function () {
@@ -839,12 +1252,14 @@
                 });
             });
 
+            // Category Selection
             const categoryButtons = document.querySelectorAll('.category-button');
             const categoryForm = document.getElementById('categoryForm');
             const selectedCategoryInput = document.getElementById('selectedCategoryInput');
             if (!selectedCategoryInput.value) {
                 selectedCategoryInput.value = "All";
-                document.querySelector('.category-button[data-category="All"]').classList.add('selected');
+                const allButton = document.querySelector('.category-button[data-category="All"]');
+                if (allButton) allButton.classList.add('selected');
             }
             categoryButtons.forEach(button => {
                 button.addEventListener('click', function () {
@@ -855,6 +1270,7 @@
                 });
             });
 
+            // Search Functionality
             const searchBar = document.getElementById('searchBar');
             const suggestionsContainer = document.getElementById('autocompleteSuggestions');
             searchBar.addEventListener('input', function () {
@@ -862,9 +1278,7 @@
                 suggestionsContainer.innerHTML = '';
                 suggestionsContainer.style.display = 'none';
                 if (input) {
-                    const filteredItems = menuItems.filter(item => 
-                        item.toLowerCase().includes(input)
-                    );
+                    const filteredItems = menuItems.filter(item => item.toLowerCase().includes(input));
                     if (filteredItems.length > 0) {
                         filteredItems.forEach(item => {
                             const suggestionDiv = document.createElement('div');
@@ -883,157 +1297,7 @@
                 filterMenu();
             });
 
-            // Soft Drink Modal Logic
-            function showSoftDrinkModal(button) {
-                currentSoftDrinkButton = button;
-                const buttonContainer = button.closest('.button-container');
-                const itemName = buttonContainer.getAttribute('data-item-name');
-                const itemPrice = buttonContainer.getAttribute('data-item-price');
-                const itemImage = buttonContainer.getAttribute('data-item-image');
-                
-                document.getElementById('soft-drink-name').textContent = itemName;
-                document.getElementById('soft-drink-price').textContent = `$${itemPrice}`;
-                document.getElementById('soft-drink-quantity').value = '1';
-                document.getElementById('soft-drink-image').src = itemImage || '/static/placeholder.jpg';
-                
-                const modal = new bootstrap.Modal(document.getElementById('softDrinkModal'));
-                modal.show();
-            }
-
-            function addSoftDrinkToCart() {
-                if (!currentSoftDrinkButton) return;
-                
-                const buttonContainer = currentSoftDrinkButton.closest('.button-container');
-                const quantity = parseInt(document.getElementById('soft-drink-quantity').value) || 1;
-                const itemName = buttonContainer.getAttribute('data-item-name');
-                const itemPrice = parseFloat(buttonContainer.getAttribute('data-item-price'));
-                const itemImage = buttonContainer.getAttribute('data-item-image');
-                const section = buttonContainer.getAttribute('data-item-section');
-                const selectedCategory = buttonContainer.getAttribute('data-item-category');
-                
-                const cartPayload = {
-                    itemName: itemName,
-                    itemPrice: itemPrice,
-                    itemImage: itemImage,
-                    section: section,
-                    category: selectedCategory,
-                    addons: [],
-                    instructions: '',
-                    quantity: quantity
-                };
-                
-                fetch('/cart/add', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(cartPayload)
-                })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        updateCartUI(data.cart);
-                        const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
-                        modal.hide();
-                    } else {
-                        const cart = addToCartLocalStorage(cartPayload);
-                        updateCartUI(cart);
-                        const modal = bootstrap.Modal.getInstance(document.getElementById('softDrinkModal'));
-                        modal.hide();
-                    }
-                });
-            }
-
-            function updateCartUI(cart) {
-                if (!Array.isArray(cart)) return;
-                let totalQuantity = cart.reduce((sum, item) => sum + item.quantity, 0);
-                const cartItemCount = document.getElementById('cart-item-count');
-                if (cartItemCount) {
-                    cartItemCount.innerText = totalQuantity;
-                    cartItemCount.style.display = totalQuantity > 0 ? 'inline-flex' : 'none';
-                }
-            }
-
-            function showItemDetails(name, price, image, description, ingredients, nutritionalInfo, allergens, section, selectedCategory) {
-                document.getElementById('modal-name').innerText = name;
-                document.getElementById('modal-price').innerText = `$${price}`;
-                document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
-                document.getElementById('modal-description').innerText = description;
-                document.getElementById('modal-ingredients').innerText = ingredients;
-                document.getElementById('modal-nutrition').innerText = nutritionalInfo;
-                document.getElementById('modal-allergens').innerText = allergens;
-                document.getElementById('modal-instructions').value = '';
-                document.getElementById('modal-section').setAttribute('data-section', section);
-                document.getElementById('modal-section').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 = data.success && data.addons.length ? '' : '<p>No customization options available.</p>';
-                        if (data.success && data.addons) {
-                            data.addons.forEach(addon => {
-                                const sectionDiv = document.createElement('div');
-                                sectionDiv.classList.add('addon-section');
-                                sectionDiv.innerHTML = `<h6>${addon.name}</h6>`;
-                                addon.options.forEach((option, index) => {
-                                    const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
-                                    sectionDiv.innerHTML += `
-                                        <div class="form-check">
-                                            <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>
-                                        </div>
-                                    `;
-                                });
-                                addonsList.appendChild(sectionDiv);
-                            });
-                        }
-                    });
-            }
-
-            function addToCartFromModal() {
-                const itemName = document.getElementById('modal-name').innerText;
-                let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
-                const itemImage = document.getElementById('modal-img').src;
-                const section = document.getElementById('modal-section').getAttribute('data-section');
-                const selectedCategory = document.getElementById('modal-section').getAttribute('data-category');
-                const selectedAddOns = Array.from(document.querySelectorAll('#addons-list input[type="checkbox"]:checked')).map(addon => ({
-                    name: addon.getAttribute('data-name'),
-                    price: parseFloat(addon.getAttribute('data-price') || 0)
-                }));
-                const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
-                const instructions = document.getElementById('modal-instructions').value;
-
-                const cartPayload = {
-                    itemName: itemName,
-                    itemPrice: itemPrice,
-                    itemImage: itemImage,
-                    section: section,
-                    category: selectedCategory,
-                    addons: selectedAddOns,
-                    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) {
-                        updateCartUI(data.cart);
-                        bootstrap.Modal.getInstance(document.getElementById('itemModal')).hide();
-                    } else {
-                        const cart = addToCartLocalStorage(cartPayload);
-                        updateCartUI(cart);
-                        bootstrap.Modal.getInstance(document.getElementById('itemModal')).hide();
-                    }
-                });
-            }
-
-            // Quantity controls
+            // Quantity Controls
             document.getElementById('decreaseQuantity').addEventListener('click', () => {
                 let qty = parseInt(document.getElementById('quantityInput').value);
                 if (qty > 1) document.getElementById('quantityInput').value = qty - 1;
@@ -1051,52 +1315,33 @@
                 if (qty < 1000) document.getElementById('soft-drink-quantity').value = qty + 1;
             });
 
-            // Initial cart fetch
+            // Initial Cart Fetch
             fetch('/cart/get')
                 .then(response => response.json())
                 .then(data => {
                     if (data.success) updateCartUI(data.cart);
                     else updateCartUI(getCartLocalStorage());
+                })
+                .catch(error => {
+                    console.error('Error fetching cart:', error);
+                    updateCartUI(getCartLocalStorage());
                 });
-        });
 
-        function filterMenu() {
-            const input = document.getElementById('searchBar').value.trim().toLowerCase();
-            const sections = document.querySelectorAll('h3');
-            const items = document.querySelectorAll('.menu-card');
-            let matchedSections = new Set();
-            items.forEach(item => {
-                const itemName = item.querySelector('.card-title').innerText.toLowerCase();
-                const itemSection = item.closest('.row').previousElementSibling.innerText.toLowerCase();
-                if (itemName.includes(input) || itemSection.includes(input)) {
-                    item.style.display = 'block';
-                    item.classList.add('visible');
-                    matchedSections.add(item.closest('.row'));
-                } else {
-                    item.style.display = 'none';
-                }
+            // Mic Functionality (placeholder for your implementation)
+            const micIcon = document.getElementById('micIcon');
+            const micPopup = document.getElementById('micPopup');
+            const micPopupCancel = document.getElementById('micPopupCancel');
+            micIcon.addEventListener('click', () => {
+                micPopup.classList.add('active');
+                // Add your speech recognition logic here
             });
-            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';
-                }
+            micPopupCancel.addEventListener('click', () => {
+                micPopup.classList.remove('active');
+                // Stop speech recognition here
             });
-            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');
-                });
-            }
-        }
+
+            // Add any additional JavaScript from your original code here
+        });
     </script>
 </body>
 </html>