Update templates/menu.html

templates/menu.html

@@ -8,6 +8,100 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <style>
+    
+  .addbutton .btn {
+        background-color: #28a745; /* Green background color */
+        color: white; /* White text color */
+        padding: 10px 20px; /* Add padding to the button */
+        font-size: 16px; /* Increase font size */
+        font-weight: bold; /* Make text bold */
+        border-radius: 5px; /* Rounded corners */
+        border: none; /* Remove border */
+        transition: background-color 0.3s ease; /* Smooth transition for hover effect */
+        margin-left: 13px; /* Margin for positioning */
+    }
+
+    .addbutton .btn:hover {
+        background-color: #218838; /* Darker green background on hover */
+    }
+
+    .customisable-text {
+        color: #28a745; /* Same color as the "ADD" button */
+        font-size: 12px; /* Same font size as the "ADD" button */
+        margin-left: 5px;
+        margin-top:1px;
+    } 
+
+    /* model */
+    .modal-footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between; /* Space between quantity controls and Add to Cart button */
+        padding: 10px;
+    }
+    .modal-footer .d-flex {
+        display: flex;
+        align-items: center;
+        gap: 10px; /* Space between quantity buttons */
+    }
+    .modal-footer .btn {
+        height: 40px; /* Set consistent button height */
+        padding: 0 15px; /* Adjust padding to fit inside the buttons */
+    }
+    .modal-footer .form-control {
+        width: 50px; /* Fixed width for quantity input */
+        height: 40px; /* Match the height of buttons */
+        text-align: center; /* Center the value inside the input */
+    }
+    .modal-footer .btn-primary {
+        background-color: #0FAA39; /* Green background for Add to Cart button */
+        border-color: #0FAA39; /* Border color to match button background */
+        font-weight: bold; /* Bold text */
+        padding: 10px 20px; /* Adjust padding to make the button look better */
+        height: 40px; /* Match the height with quantity buttons */
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: auto; /* Auto width to adjust to button text */
+        border-radius: 5px; /* Rounded corners for the button */
+    }
+    .modal-footer .btn-outline-secondary {
+        height: 40px; /* Ensure quantity buttons are the same size */
+        width: 40px; /* Make sure the buttons are square */
+        border-radius: 5px; /* Rounded corners for the buttons */
+    }
+
+@media (max-width: 576px) {
+    /* Responsive adjustments for smaller screens */
+    .modal-dialog {
+        max-width: 98%; /* Adjust modal width for smaller screens */
+    }
+
+    .modal-footer .btn {
+        height: 35px; /* Smaller buttons for small screens */
+        padding: 0 12px; /* Adjust padding to make the button look proportional */
+    }
+
+    .modal-footer .form-control {
+        width: 40px; /* Adjust input size for smaller screens */
+        height: 35px;
+    }
+
+    .modal-footer .d-flex {
+        gap: 8px; /* Reduce space between quantity buttons on smaller screens */
+    }
+} */
+
+
+
+
+
+     
+
+
+
+
+     
    body {
     font-family: Arial, sans-serif;
     background-color: #fdf4e3; /* Updated background color */
@@ -43,6 +137,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;
@@ -343,7 +474,9 @@ form-check-input addon-option{
     align-items: center;
     gap: 10px;
 }
-.modal-footer {
+
+/* modal################## */
+  .modal-footer {
     display: flex;
     align-items: center;
     justify-content: space-between; /* Space between quantity and Add to Cart button */
@@ -390,7 +523,7 @@ form-check-input addon-option{
         width: 40px; /* Adjust input size for smaller screens */
         height: 35px;
     }
-}
+}  
 </style>
 </head>
 <body>
@@ -402,8 +535,9 @@ form-check-input addon-option{
             <span>{{ first_letter }}</span> <!-- Display the first letter of the customer's name -->
         </div>
         <div class="dropdown-menu">
-            <a href="{{ url_for('customer_details') }}" class="dropdown-item">View Profile</a>
-            <a href="{{ url_for('order_history') }}" class="dropdown-item">Order History</a>
+            <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item">View Profile</a>
+
+            <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item">Order History</a>
             <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
         </div>
     </div>
@@ -441,7 +575,7 @@ form-check-input addon-option{
 {% if selected_category == "Customized Dish" %}
     <div id="custom-dish-form" class="mt-4">
         <h3>Create Your Custom Dish</h3>
-        <form method="POST" action="/generate_custom_dish">
+        <form method="POST" action="/customdish/generate_custom_dish">
             <div class="mb-3">
                 <label for="custom-dish-name" class="form-label">Dish Name</label>
                 <input type="text" class="form-control" id="custom-dish-name" name="name" required>
@@ -460,9 +594,9 @@ 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';">
+                            <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>
@@ -472,7 +606,61 @@ form-check-input addon-option{
                                 </button>
                             </div>
                         </div>
-                    </div>
+                    </div> -->
+                    <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 -->
+        <!-- <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 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 class= "d-flex flex-column align-item-center justify-content-center">
+      <!-- <button class="btn btn-primary>ADD</button> -->
+    
+    <div  >
+     <button class="btn 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 class="w-100 text-center">
+        
+
+
+        {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c != 'Soft Drinks' %}
+  <h5 class="customisable-text">Customisable</h5>
+{% endif %}
+    </div>
+    
+    
+    
+    </div> 
+
+
+
+    
+  </div>
+</div>
+
+      
+    </div>
+</div>
                 {% endfor %}
             </div>
         {% endfor %}
@@ -483,13 +671,13 @@ form-check-input addon-option{
 
     <!-- View Cart Button -->
     <div class="view-cart-container">
-        <a href="/cart" class="view-cart-button">
+        <a href="{{ url_for('cart.cart') }}" class="view-cart-button">
             View Cart
         </a>
     </div>
 
- <!-- Modal for Item Details -->
-<div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
+  <!-- Modal for Item Details -->
+ <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">
@@ -529,7 +717,9 @@ form-check-input addon-option{
             </div>
         </div>
     </div>
-</div>
+</div> 
+
+
 
 <!-- JavaScript -->
 <script>
@@ -606,7 +796,7 @@ form-check-input addon-option{
     // Handle checkbox selection logic
     function handleAddonClick(checkbox) {
         const groupName = checkbox.getAttribute('data-group');
-        const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides","Select Dip/Sauce","Extra Add-ons","Make it a Combo"].includes(groupName);
+        const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides","Select Dip/Sauce","Extra Add-ons","Make it a Combo","Beverages","Sauces"].includes(groupName);
         
         // If it's not multi-select, uncheck all other checkboxes in the same group
         if (!isMultiSelectGroup) {
@@ -773,34 +963,11 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 });
 
-    // Function to round reward points to a single digit
-function roundRewardPoints() {
-    // Get the reward points element
-    let rewardPointsElement = document.getElementById('reward-points');
-
-    // Check if the element exists in the DOM
-    if (rewardPointsElement) {
-        let rewardPointsText = rewardPointsElement.innerText.trim(); // Get and trim the value to remove any extra spaces
-
-        // Check if the innerText is a valid number
-        let rewardPoints = parseFloat(rewardPointsText);
-
-        // If it's a valid number, round it to 1 decimal place
-        if (!isNaN(rewardPoints)) {
-            rewardPointsElement.innerText = rewardPoints.toFixed(1); // Round to 1 decimal place
-        } else {
-            console.error("Reward points value is not a valid number:", rewardPointsText);
-        }
-    } else {
-        console.error("Reward points element is missing.");
-    }
-}
-        // Run the function when the page loads
-        window.onload = roundRewardPoints;
+    
         
     </script>
 
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
 </body>
-</html>
+</html>