Update templates/menu.html

templates/menu.html

@@ -268,36 +268,57 @@
             <h3>{{ section }}</h3>
             <div class="row">
                 {% for item in items %}
-                    <!-- For 'Appetizer', 'Customized Dish', and 'Soft Drinks', remove 'Customisable' text and only show 'ADD' button -->
-                    {% if section == 'Appetizer' or section == 'Customized Dish' or section == 'Soft Drinks' %}
-                        <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';">
-                                <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>
-                                </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">
+                            <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>
                             </div>
                         </div>
-                    {% else %}
-                        <!-- For other sections, display 'ADD' button and 'Customisable' text -->
-                        <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';">
-                                <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>
-                                    <div class="customisable-text">Customisable</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> -->
+    
+    <div  >
+     <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' %}
+      <h5 class="customisable-text">Customisable</h5>         
+      </div>
+                           </div>
                         </div>
                     {% endif %}
                 {% endfor %}