Update templates/menu.html

templates/menu.html

@@ -43,6 +43,43 @@
     font-size: 1rem;
     color: #6c757d;
 }
+
+
+     .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 */
+}
+
+/* .customize-btn:hover {
+    background-color: #e08c00; /* Darker shade for hover effect */
+    transition: background-color 0.3s ease;
+} *
+
+
+
+
+
+
+
+
+
+
+     
 .btn-primary {
     font-size: 13px;
     font-weight: bold;
@@ -461,7 +498,7 @@ form-check-input addon-option{
             <h3>{{ section }}</h3>
             <div class="row">
                 {% for item in items %}
-                    <div class="col-md-6 mb-4">
+                    <!-- <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">
@@ -473,7 +510,26 @@ form-check-input addon-option{
                                 </button>
                             </div>
                         </div>
-                    </div>
+                    </div> -->
+                    <div class="col-md-4 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>
+</div>
                 {% endfor %}
             </div>
         {% endfor %}