Update templates/menu.html

templates/menu.html

@@ -19,6 +19,70 @@
 .container {
     max-width: 900px;
 }
+
+     /* bobby */
+  
+.menu-card {
+    max-width: 100%;
+    border-radius: 15px;
+    overflow: hidden;
+    background-color: #fff;
+    position: relative;
+}
+
+.menu-image {
+    height: 200px;
+    width: 100%;
+    object-fit: cover; /* Ensures the image covers the area */
+    border-radius: 15px 15px 0 0;
+}
+
+.customize-btn {
+    position: absolute;
+    top: 10px; /* Adjust top position */
+    left: 10px; /* Adjust left position */
+    background-color: rgba(0, 0, 0, 0.5); /* Slight transparent background */
+    color: #fff;
+    padding: 8px 12px;
+    border-radius: 5px;
+    border: none;
+    font-size: 14px;
+}
+
+.card-body {
+    padding: 15px;
+}
+
+.card-title {
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.card-text {
+    font-size: 14px;
+}
+
+.btn-danger {
+    width: 100%; /* Ensure the 'Add' button takes full width */
+}
+
+.d-flex {
+    display: flex;
+}
+
+.justify-content-between {
+    justify-content: space-between;
+}
+
+.align-items-center {
+    align-items: center;
+}
+
+
+
+/* bobby */
+
+     
 /* .menu-card {
     max-width: 350px;
     border-radius: 15px;
@@ -559,7 +623,7 @@ form-check-input addon-option{
         <!-- Menu Sections -->
         {% for section, items in ordered_menu.items() %}
             <h3>{{ section }}</h3>
-            <div class="row">
+            <!-- <div class="row">
                 {% for item in items %}
                     <!-- <div class="col-md-4 mb-4">
                         <div class="card menu-card">
@@ -606,7 +670,39 @@ form-check-input addon-option{
 
               
                 {% endfor %}
+            </div> -->
+  <div class="row">
+    {% for item in items %}
+    <div class="col-md-4 mb-4">
+        <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">
+
+            <!-- Customize Button on Image -->
+            <button class="btn customize-btn position-absolute" 
+                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">
+                <div class="d-flex justify-content-between align-items-center">
+                    <h5 class="card-title">{{ item.Name }}</h5>
+                    <p class="card-text">${{ item.Price__c }}</p>
+                </div>
+                
+                <div class="d-flex justify-content-between">
+                    <!-- Add Button -->
+                    <button class="btn btn-danger">
+                        Add 
+                    </button>
+                </div>
             </div>
+        </div>
+    </div>
+    {% endfor %}
+</div>
+
         {% endfor %}
     </div>
 {% endif %}