Update templates/menu.html

templates/menu.html

@@ -16,6 +16,38 @@
     display: flex;
     flex-direction: column;
 }
+     /* ################################################################### */
+.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;
+    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 */
+}
+
+
+/* ################################################################################################ */
+
+
+
+
+
+
+
+
+     
 .container {
     max-width: 900px;
 }
@@ -463,14 +495,22 @@ form-check-input addon-option{
                 {% for item in items %}
                     <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">
+                            
+                          <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>
-                                <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>
                     </div>