Update templates/menu.html

templates/menu.html

@@ -11,7 +11,7 @@
 
 
 /* subbu */
-     .addbutton .btn {
+     /* .addbutton .btn {
   background: linear-gradient(135deg, #28a745, #006400); /* Gradient green */
   color: white; /* Make the text color white */
   border: none; /* Remove the border */
@@ -30,8 +30,41 @@
     color: #28a745; /* Same color as the "ADD" button */
     font-size: 14px; /* Same font size as the "ADD" button */
     margin: 0;
+} */
+
+.addbutton .btn {
+  background: linear-gradient(135deg, #28a745, #006400); /* Gradient green */
+  color: white; /* Make the text color white */
+  border: none; /* Remove the border */
+  padding: 6px 15px; /* Smaller padding */
+  font-size: 14px; /* Smaller font size */
+  border-radius: 5px; /* Optional: round the corners */
+  transition: background 0.3s ease; /* Add transition effect for hover */
 }
 
+.addbutton .btn:hover {
+  background: linear-gradient(135deg, #006400, #28a745); /* Reverse gradient for hover effect */
+}
+
+.customisable-text {
+  color: #28a745; /* Same color as the "ADD" button */
+  font-size: 14px; /* Same font size as the "ADD" button */
+  margin: 0;
+}
+
+/* Ensure the button is aligned to the right */
+.d-flex.justify-content-end {
+  width: 100%; /* Make sure the parent div takes the full width */
+  justify-content: flex-end; /* Align the button to the right */
+}
+
+/* Center the "Customisable" text */
+.d-flex.text-center {
+  width: 100%; /* Ensure the div takes the full width */
+  text-align: center; /* Center the text */
+}
+
+
 
 
      
@@ -560,7 +593,7 @@ form-check-input addon-option{
       <h5 class="card-title">{{ item.Name }}</h5>
       <p class="card-text">${{ item.Price__c }}</p>
     </div>
-    <div class= "d-flex flex-column align-item-center justify-content-center">
+    <!-- <div class= "d-flex flex-column align-item-center justify-content-center">
       <!-- <button class="btn btn-primary>ADD</button> -->
     
     <div  >
@@ -570,14 +603,30 @@ form-check-input addon-option{
             ADD
         </button> 
       </div>
-      <div>
+      <div class="w-100 text-center">
         <h5 class="customisable-text">Customisable</h5> 
-      </div>
+    </div>
     
     
     
+    </div> -->
+<div class="d-flex flex-column align-items-center justify-content-center">
+    <!-- Container for the button -->
+    <div class="d-flex justify-content-end w-100">
+        <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>
 
+    <!-- Customisable text centered below the button -->
+    <div class="w-100 text-center">
+        <h5 class="customisable-text">Customisable</h5> 
+    </div>
+</div>
+
+
     
   </div>
 </div>