Update templates/menu.html

templates/menu.html

@@ -16,8 +16,36 @@
     display: flex;
     flex-direction: column;
 }
-     /* ################################################################### */
-.customize-btn {
+.container {
+    max-width: 900px;
+}
+.menu-card {
+    max-width: 350px;
+    border-radius: 15px;
+    overflow: hidden;
+    background-color: #fff;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+}
+.menu-image {
+    height: 200px; /* Fixed height */
+    width: 100%; /* Full width of the card */
+    object-fit: fill; /* Ensure the image covers the area and maintains the aspect ratio */
+    border-radius: 15px 15px 0 0; /* Rounded top corners */
+}
+.card-title {
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin: 10px 0;
+}
+.card-text {
+    font-size: 1rem;
+    color: #6c757d;
+}
+
+
+     .customize-btn {
     position: absolute;
     top: 50%;
      right: 0;
@@ -25,7 +53,6 @@
     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;
-    font-weight:bold;
     border: none;
     padding: 4px 12px;  /* Reduced padding for smaller height */
     border-radius: 5px 0px 0px 5px ;
@@ -38,63 +65,21 @@
     margin-left: 5px; /* Icon spacing */
 }
 
+/* .customize-btn:hover {
+    background-color: #e08c00; /* Darker shade for hover effect */
+    transition: background-color 0.3s ease;
+} *
 
-/* ################################################################################################ */
 
 
-.addbutton .card-body {
-  padding: 10px; /* Adjust as needed */
-}
 
-.addbutton .btn {
-  margin-left: 10px; /* Adds some space between button and text */
-}
-.addbutton .btn {
-  background: linear-gradient(135deg, #28a745, #006400); /* Gradient green */
-  color: white; /* Make the text color white */
-  border: none; /* Remove the border */
-  padding: 8px 15px; /* Adjust padding */
-  font-size: 16px; /* Adjust font size */
-  border-radius: 5px; /* Optional: round the corners */
-  transition: background 0.3s ease; /* Add transition effect for hover */
-}
 
-.addbutton .btn:hover {
-  background: linear-gradient(135deg, #006400, #28a745); /* Reverse gradient for hover effect */
-}
 
 
 
 
 
      
-.container {
-    max-width: 900px;
-}
-.menu-card {
-    max-width: 350px;
-    border-radius: 15px;
-    overflow: hidden;
-    background-color: #fff;
-    margin: auto;
-    display: flex;
-    flex-direction: column;
-}
-.menu-image {
-    height: 200px; /* Fixed height */
-    width: 100%; /* Full width of the card */
-    object-fit: fill; /* Ensure the image covers the area and maintains the aspect ratio */
-    border-radius: 15px 15px 0 0; /* Rounded top corners */
-}
-.card-title {
-    font-size: 1.2rem;
-    font-weight: bold;
-    margin: 10px 0;
-}
-.card-text {
-    font-size: 1rem;
-    color: #6c757d;
-}
 .btn-primary {
     font-size: 13px;
     font-weight: bold;
@@ -113,18 +98,12 @@
     border-color: #ffffff;
     box-shadow: none;
 }
-
-
-/* view-cart#### */
-     
 .view-cart-container {
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 999;
 }
-
-     
 .view-cart-button {
     background-color: #0FAA39; /* Updated View Cart button background color */
     color: #fff;
@@ -142,11 +121,6 @@
     background-color: #109835; /* Slightly darker shade for hover effect */
     text-decoration: none;
 }
-
-/* ######################### */
-
-     
-     
 .avatar-dropdown-container {
     position: relative;
 }
@@ -227,99 +201,21 @@ h1.text-center {
     padding-top: 0 !important; /* Removed padding */
     font-weight: semi-bold; /* Make the "Menu" text bold */
 }
-/* .fixed-top-bar {
+.fixed-top-bar {
     /* Remove the fixed positioning */
     position: relative; /* Change from fixed to relative */
     top: 0;
     left: 0;
     width: 100%;
     height: 54px;
-    background: linear-gradient(135deg, #000000, #434343); 
+    background-color: #FF6B35;
     color: white;
     padding: 15px;
     display: flex;
     justify-content: space-between;
     align-items: center; /* Vertically align items */
     z-index: 1000; /* Make sure it's still above other content */
-} */
-.fixed-top-bar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    background-color: #fff; /* Background color for the top bar */
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 20px;
-    z-index: 1000;
 }
-
-.logo-search-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-grow: 1; /* Allow this section to take up available space */
-    position: relative;
-}
-
-.logo {
-    margin-right: 15px; /* Space between logo and search bar */
-}
-
-.logo-img {
-    height: 40px; /* Adjust logo size */
-    width: auto;
-}
-
-     
-
-.search-bar-container {
-    display: flex;
-    align-items: center;
-    width: 70%; /* Adjust the width as needed */
-    max-width: 600px; /* Optional: limit the maximum width */
-}
-
-.search-bar-container input {
-    width: 100%; /* Make the input field take up all available space */
-    padding: 10px;
-    font-size: 14px;
-    border-radius: 25px; /* Round the edges of the input */
-    border: 1px solid #ccc;
-}
-
-.search-icon {
-    position: absolute;
-    right: 15px;
-    pointer-events: none;
-    font-size: 16px;
-}
-
-.avatar-dropdown-container {
-    display: flex;
-    align-items: center;
-}
-
-.avatar-icon {
-    width: 40px;
-    height: 40px;
-    background-color: #f0f0f0;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-weight: bold;
-    margin-left: 10px;
-}
-
-
-
-
-
-
-
-     
 .search-bar-container {
     padding: 10px;
     position: absolute;
@@ -557,7 +453,6 @@ form-check-input addon-option{
     </div>
 </div>
 
-
 <!-- Category Filter with Custom Radio Buttons -->
 <form method="get" action="/menu" class="text-center mb-4">
     <label class="form-label fw-bold">Select a Category:</label>
@@ -578,7 +473,7 @@ form-check-input addon-option{
   
   <!-- Show menu items only when Customized Dish is not selected -->
     <div class="container mt-4">
-        <!-- <h1 class="text-center">Menu</h1> -->
+        <h1 class="text-center">Menu</h1>
       
 <!-- Display text boxes for Customized Dish -->
 {% if selected_category == "Customized Dish" %}
@@ -603,45 +498,38 @@ form-check-input addon-option{
             <h3>{{ section }}</h3>
             <div class="row">
                 {% for item in items %}
-                    <div class="col-md-4 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">
-                             <!-- Customize Button on Image -->
+                            <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">
+                                <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> -->
+                    <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="addbutton">
-                          <div class="card-body ">
-                                <h5 class="card-title">{{ item.Name }}</h5>
-                                <p class="card-text">${{ item.Price__c }}</p>
-                               </div>
-                            <div class="mt-10 mr-5 ">
-                              <button class="btn btn-primary ">Add</button>
-                            </div>
 
-                          </div> -->
-                          <div class="addbutton">
-  <div class="card-body d-flex align-items-center justify-content-between">
-    <div>
-      <h5 class="card-title">{{ item.Name }}</h5>
-      <p class="card-text">${{ item.Price__c }}</p>
-    </div>
-    <div>
-      <button class="btn btn-primary"onclick="addToCart()">Add</button>
+        <div class="card-body">
+            <h5 class="card-title">{{ item.Name }}</h5>
+            <p class="card-text">${{ item.Price__c }}</p>
+        </div>
+      
     </div>
-  </div>
 </div>
-
-
-                          
-                        </div>
-                    </div>
                 {% endfor %}
             </div>
         {% endfor %}
@@ -942,41 +830,8 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 });
 
-
-
-
-
-
-  // subbu
-
-
-
-
-
-
-  function addToCart(itemName, customerEmail) {
-            fetch(`/cart/add_item`, {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    email: customerEmail,
-                    item_name: itemName.trim(), //Ensure the item name is trimmed
-                    quantity: 0 // DEFAULT QUANTITY PASSED HERE
-                })
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert("Item added/updated successfully.");
-                    location.reload(); // Reload the page to update the cart
-                } else {
-                    alert(data.error || "Failed to add item to cart.");
-                }
-            })
-            .catch(err => console.error("Error adding item to cart:", err));
-        }
     
-        // subbu
+        
     </script>
 
     <!-- Bootstrap JS -->