Update templates/menu.html

templates/menu.html

@@ -66,6 +66,9 @@
 
 
 
+
+
+     
 .customize-btn {
     position: absolute;
     top: 50%;
@@ -91,7 +94,31 @@
     transition: background-color 0.3s ease;
 } */
 
+.add-btn {
+    position: absolute;
+    top: 50%;
+    right: 10px;  /* Position the Add button right next to Customize */
+    transform: translateY(-50%);
+    background-color: #d9534f;  /* Red color for the Add button */
+    color: #fff;
+    border: none;
+    padding: 6px 18px;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+}
+
+.add-btn:hover,
+.customize-btn:hover {
+    background-color: #6a5d4b;
+    transition: background-color 0.3s ease;
+}
 
+.add-btn i,
+.customize-btn i {
+    margin-left: 5px; /* Icon spacing */
+}
 
 
 
@@ -514,7 +541,7 @@ form-check-input addon-option{
                         </div>
                     </div> -->
   <div class="col-md-4 mb-4">
-    <div class="card menu-card">
+    <div class="card menu-card position-relative">
         <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}"
             onerror="this.src='/static/placeholder.jpg';" loading="lazy">
 
@@ -525,15 +552,20 @@ form-check-input addon-option{
             Customize <i class="bi bi-caret-right-fill"></i>
         </button>
 
+        <!-- Add Button on Image -->
+        <button class="btn add-btn">
+            Add +
+        </button>
+
         <div class="card-body">
             <h5 class="card-title">{{ item.Name }}</h5>
             <p class="card-text">${{ item.Price__c }}</p>
         </div>
-      
     </div>
 </div>
 
 
+
               
                 {% endfor %}
             </div>