Update templates/menu.html

templates/menu.html

@@ -20,67 +20,7 @@
     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 {
@@ -599,7 +539,7 @@ form-check-input addon-option{
 </form>
   
   <!-- Show menu items only when Customized Dish is not selected -->
-    <div class="container mt-4">
+<div class="container mt-4">
         <h1 class="text-center">Menu</h1>
       
 <!-- Display text boxes for Customized Dish -->
@@ -623,7 +563,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">
@@ -670,38 +610,8 @@ 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>
+            </div> 
+ 
 
         {% endfor %}
     </div>