Update templates/menu.html

templates/menu.html

@@ -598,112 +598,77 @@ form-check-input addon-option{
     </div>
 </form>
   
-  <!-- Show menu items only when Customized Dish is not selected -->
-    <div class="container mt-4">
-        <h1 class="text-center">Menu</h1>
-      
-<!-- Display text boxes for Customized Dish -->
-{% if selected_category == "Customized Dish" %}
-    <div id="custom-dish-form" class="mt-4">
-        <h3>Create Your Custom Dish</h3>
-        <form method="POST" action="/customdish/generate_custom_dish">
-            <div class="mb-3">
-                <label for="custom-dish-name" class="form-label">Dish Name</label>
-                <input type="text" class="form-control" id="custom-dish-name" name="name" required>
-            </div>
-            <div class="mb-3">
-                <label for="custom-dish-description" class="form-label">Dish Description</label>
-                <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
-            </div>
-            <button type="submit" class="btn btn-primary">Submit</button>
-        </form>
-    </div>
-{% else %}
-
+ <!-- Show menu items only when Customized Dish is not selected -->
+<div class="container mt-4">
+    <h1 class="text-center">Menu</h1>
+
+    <!-- Display text boxes for Customized Dish -->
+    {% if selected_category == "Customized Dish" %}
+        <div id="custom-dish-form" class="mt-4">
+            <h3>Create Your Custom Dish</h3>
+            <form method="POST" action="/customdish/generate_custom_dish">
+                <div class="mb-3">
+                    <label for="custom-dish-name" class="form-label">Dish Name</label>
+                    <input type="text" class="form-control" id="custom-dish-name" name="name" required>
+                </div>
+                <div class="mb-3">
+                    <label for="custom-dish-description" class="form-label">Dish Description</label>
+                    <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
+                </div>
+                <button type="submit" class="btn btn-primary">Submit</button>
+            </form>
+        </div>
+    {% else %}
         <!-- Menu Sections -->
         {% 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 mb-4">
                         <div class="card menu-card">
-                            <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';" "loading="lazy">
-                            <div class="card-body">
-                                <h5 class="card-title">{{ item.Name }}</h5>
-                                <p class="card-text">${{ item.Price__c }}</p>
-                                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal" 
-                                    onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
-                                    Add
-                                </button>
+                            <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}"
+                                onerror="this.src='/static/placeholder.jpg';" loading="lazy">
+                            <div class="addbutton">
+                                <div class="card-body d-flex align-items-center justify-content-between">
+                                    <div>
+                                        <h5 class="card-title">{{ item.Name }}</h5>
+                                        <p class="card-text">${{ item.Price__c }}</p>
+                                    </div>
+                                    <div class="d-flex flex-column align-items-center justify-content-center">
+                                        {% if item.Section__c == 'Soft Drinks' %}
+                                            <!-- Soft Drinks: Direct Add-to-Cart Button -->
+                                            <div id="quantity-control-{{ loop.index }}" class="quantity-control" style="display: none;">
+                                                <button class="btn btn-outline-secondary btn-sm" onclick="decreaseQuantity('{{ item.Name }}', {{ loop.index }})">−</button>
+                                                <span class="quantity mx-2" id="quantity-{{ loop.index }}">1</span>
+                                                <button class="btn btn-outline-secondary btn-sm" onclick="increaseQuantity('{{ item.Name }}', {{ loop.index }})">+</button>
+                                            </div>
+                                            <button class="btn btn-primary" id="add-btn-{{ loop.index }}"
+                                                onclick="addSoftDrinkToCart('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image1__c }}', '{{ item.Section__c }}', '{{ selected_category }}', {{ loop.index }})">
+                                                ADD
+                                            </button>
+                                        {% else %}
+                                            <!-- Other Items: Modal Button -->
+                                            <button class="btn btn-primary"
+                                                data-bs-toggle="modal" data-bs-target="#itemModal"
+                                                onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}', '{{ selected_category }}')">
+                                                ADD
+                                            </button>
+                                            <div class="w-100 text-center">
+                                                {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c != 'Soft Drinks' %}
+                                                    <h5 class="customisable-text">Customisable</h5>
+                                                {% endif %}
+                                            </div>
+                                        {% endif %}
+                                    </div>
+                                </div>
                             </div>
                         </div>
-                    </div> -->
-                    <div class="col-md-6 mb-4">
-    <div class="card menu-card">
-        <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}"
-            onerror="this.src='/static/placeholder.jpg';" loading="lazy">
-
-        <!-- Customize Button on Image -->
-        <!-- <button class="btn customize-btn"
-            data-bs-toggle="modal" data-bs-target="#itemModal"
-            onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
-            Customize <i class="bi bi-caret-right-fill"></i>
-        </button> -->
-
-        <!-- <div class="card-body">
-            <h5 class="card-title">{{ item.Name }}</h5>
-            <p class="card-text">${{ item.Price__c }}</p>
-        </div> -->
-      <div class="addbutton">
-  <div class="card-body d-flex align-items-center justify-content-between">
-    <div>
-      <h5 class="card-title">{{ item.Name }}</h5>
-      <p class="card-text">${{ item.Price__c }}</p>
-    </div>
-    <div class= "d-flex flex-column align-item-center justify-content-center">
-      <!-- <button class="btn btn-primary>ADD</button> -->
-      {% if item.Section__c == 'Soft Drinks' %}
-                        <!-- Soft Drinks: Direct Add-to-Cart Button -->
-                        <div id="quantity-control-{{ loop.index }}" class="quantity-control" style="display: none;">
-                            <button class="btn btn-outline-secondary btn-sm" onclick="decreaseQuantity('{{ item.Name }}', {{ loop.index }})">−</button>
-                            <span class="quantity mx-2" id="quantity-{{ loop.index }}">1</span>
-                            <button class="btn btn-outline-secondary btn-sm" onclick="increaseQuantity('{{ item.Name }}', {{ loop.index }})">+</button>
-                        </div>
-      <button class="btn btn-primary" id="add-btn-{{ loop.index }}"
-                            onclick="addSoftDrinkToCart('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image1__c }}', '{{ item.Section__c }}', '{{ selected_category }}', {{ loop.index }})">
-                            ADD
-                        </button>
-    
-   {% else %}
-                        <!-- Other Items: Modal Button -->
-     <button class="btn btn btn-primary "
-            data-bs-toggle="modal" data-bs-target="#itemModal"
-            onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
-            ADD
-        </button> 
-      </div>
-      <div class="w-100 text-center">
-        
-
-
-       {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c !='Soft Drinks' %}
-  <h5 class="customisable-text">Customisable</h5>
-{% endif %}
-    </div>    
-    </div>
-  </div>
-</div>
-
-      
-    </div>
-</div>
+                    </div>
                 {% endfor %}
             </div>
         {% endfor %}
-    </div>
-{% endif %}
-
-    </div>
+    {% endif %}
+</div>
 
     <!-- View Cart Button -->
     <div class="view-cart-container">