Update templates/menu.html

templates/menu.html

@@ -8,6 +8,36 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <style>
+/* subbu add button modification */
+
+.customize-btn {
+    position: absolute;
+    top: 50%;
+     right: 0;
+    transform: translateY(-50%);
+    z-index: 2;
+   background: linear-gradient(92.29deg, rgba(63, 63, 63, 0.7) 4.75%, rgba(0, 0, 0, 0.7) 93.57%);
+    color: #fff;
+    font-weight:bold;
+    border: none;
+    padding: 4px 12px;  /* Reduced padding for smaller height */
+    border-radius: 5px 0px 0px 5px ;
+    display: flex;
+    align-items: center;
+    font-size: 12px;  /* Slightly smaller text */
+}
+
+.customize-btn i {
+    margin-left: 5px; /* Icon spacing */
+}
+
+
+
+
+
+
+
+     
    body {
     font-family: Arial, sans-serif;
     background-color: #fdf4e3; /* Updated background color */
@@ -523,10 +553,16 @@ form-check-input addon-option{
             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="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>
+      <button class="btn btn-primary"onclick="addToCart()">Add</button>
+    </div>
+  </div>
+</div>
       
     </div>
 </div>