Update templates/menu.html

templates/menu.html

@@ -8,249 +8,249 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
     body {
-    font-family: Arial, sans-serif;
-    background-color: #ffffff; /* Updated background color */
-    margin: 0;
-    padding: 0;
-}
-.container {
-    max-width: 900px;
-}
-.menu-card {
-    max-width: 350px;
-    border-radius: 15px;
-    overflow: hidden;
-    background-color: #fff;
-    margin: auto;
-}
-.menu-image {
-    height: 200px;
-    width: 100%;
-    object-fit: cover;
-    border-radius: 15px 15px 0 0;
-}
-.card-title {
-    font-size: 1.2rem;
-    font-weight: bold;
-}
-.card-text {
-    font-size: 1rem;
-    color: #6c757d;
-}
-.btn-primary {
-    font-size: 0.9rem;
-    border-radius: 20px;
-    width: 100px;
-    background-color: #ff6b35; /* Updated button background color */
-    border-color: #28a745;
-}
-.btn-primary:hover {
-    background-color: #4a5d68;
-    border-color: #1e7e34;
-}
-.btn-primary:active,
-.btn-primary:focus {
-    background-color: #4a5d68;
-    border-color: #1e7e34;
-    box-shadow: none;
-}
-.view-cart-container {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    z-index: 999;
-}
-.view-cart-button {
-    background-color: #ff6b35; /* Updated View Cart button background color */
-    color: #fff;
-    padding: 10px 20px;
-    border-radius: 50px;
-    font-size: 1rem;
-    font-weight: bold;
-    text-decoration: none;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.view-cart-button:hover {
-    background-color: #e25a2a; /* Slightly darker shade for hover effect */
-    text-decoration: none;
-}
-.avatar-dropdown-container {
-    position: relative;
-}
-.avatar-icon {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background-color: #5bbfc1;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-size: 20px;
-    font-weight: bold;
-}
-.dropdown-menu {
-    position: absolute;
-    right: 0;
-    top: 100%;
-    background-color: #fff;
-    border-radius: 5px;
-    width: 200px; /* Adjust width as needed */
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-    display: none;
-}
-.avatar-dropdown-container:hover .dropdown-menu {
-    display: block;
-}
-.dropdown-menu .dropdown-item {
-    padding: 10px 15px;
-    text-decoration: none;
-    color: #333;
-    border-bottom: 1px solid #ddd;
-    display: block; /* Make each item stack vertically */
-}
-.dropdown-menu .dropdown-item:last-child {
-    border-bottom: none; /* Remove the bottom border from the last item */
-}
-.dropdown-menu .dropdown-item:hover {
-    background-color: #f1f1f1;
-}
-.fixed-search-container {
-    position: absolute;
-    top: 90px; /* Move it slightly lower */
-    left: 50%;
-    transform: translateX(-50%);
-    width: 80%;
-    max-width: 600px;
-    z-index: 999; /* Keep it above content */
-    background-color: white;
-    padding: 10px;
-    border-radius: 25px;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-}
-/* Ensure the category filter dropdown does not overlap */
-form.text-center.mb-4 {
-    margin-top: 120px !important; /* Increase spacing below search bar */
-}
-/* Ensure the container has enough margin so nothing is overlapped */
-.container {
-    margin-top: 180px; /* Adjust spacing based on navbar and search bar */
-}
-.fixed-top-bar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 44px;
-    z-index: 1000; /* Ensures it stays on top of other elements */
-    background-color: #FF6B35; /* Updated header background */
-    color: white;
-    padding: 15px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
+        font-family: Arial, sans-serif;
+        background-color: #ffffff; /* Updated background color */
+        margin: 0;
+        padding: 0;
+    }
+    .container {
+        max-width: 900px;
+    }
+    .menu-card {
+        max-width: 350px;
+        border-radius: 15px;
+        overflow: hidden;
+        background-color: #fff;
+        margin: auto;
+    }
+    .menu-image {
+        height: 200px;
+        width: 100%;
+        object-fit: cover;
+        border-radius: 15px 15px 0 0;
+    }
+    .card-title {
+        font-size: 1.2rem;
+        font-weight: bold;
+    }
+    .card-text {
+        font-size: 1rem;
+        color: #6c757d;
+    }
+    .btn-primary {
+        font-size: 0.9rem;
+        border-radius: 20px;
+        width: 100px;
+        background-color: #ff6b35; /* Updated button background color */
+        border-color: #28a745;
+    }
+    .btn-primary:hover {
+        background-color: #4a5d68;
+        border-color: #1e7e34;
+    }
+    .btn-primary:active,
+    .btn-primary:focus {
+        background-color: #4a5d68;
+        border-color: #1e7e34;
+        box-shadow: none;
+    }
+    .view-cart-container {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+    }
+    .view-cart-button {
+        background-color: #ff6b35; /* Updated View Cart button background color */
+        color: #fff;
+        padding: 10px 20px;
+        border-radius: 50px;
+        font-size: 1rem;
+        font-weight: bold;
+        text-decoration: none;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .view-cart-button:hover {
+        background-color: #e25a2a; /* Slightly darker shade for hover effect */
+        text-decoration: none;
+    }
+    .avatar-dropdown-container {
+        position: relative;
+    }
+    .avatar-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background-color: #5bbfc1;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-size: 20px;
+        font-weight: bold;
+    }
+    .dropdown-menu {
+        position: absolute;
+        right: 0;
+        top: 100%;
+        background-color: #fff;
+        border-radius: 5px;
+        width: 200px; /* Adjust width as needed */
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+        display: none;
+    }
+    .avatar-dropdown-container:hover .dropdown-menu {
+        display: block;
+    }
+    .dropdown-menu .dropdown-item {
+        padding: 10px 15px;
+        text-decoration: none;
+        color: #333;
+        border-bottom: 1px solid #ddd;
+        display: block; /* Make each item stack vertically */
+    }
+    .dropdown-menu .dropdown-item:last-child {
+        border-bottom: none; /* Remove the bottom border from the last item */
+    }
+    .dropdown-menu .dropdown-item:hover {
+        background-color: #f1f1f1;
+    }
+    .fixed-search-container {
+        position: absolute;
+        top: 90px; /* Move it slightly lower */
+        left: 50%;
+        transform: translateX(-50%);
+        width: 80%;
+        max-width: 600px;
+        z-index: 999; /* Keep it above content */
+        background-color: white;
+        padding: 10px;
+        border-radius: 25px;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+    }
+    /* Ensure the category filter dropdown does not overlap */
+    form.text-center.mb-4 {
+        margin-top: 120px !important; /* Increase spacing below search bar */
+    }
+    /* Ensure the container has enough margin so nothing is overlapped */
+    .container {
+        margin-top: 180px; /* Adjust spacing based on navbar and search bar */
+    }
+    .fixed-top-bar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 44px;
+        z-index: 1000; /* Ensures it stays on top of other elements */
+        background-color: #FF6B35; /* Updated header background */
+        color: white;
+        padding: 15px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
      
-.search-bar-container {
-    margin-left: 20px;
-    margin-right: 20px;
-    flex: 1;
-    max-width: 400px;
-}     
+    .search-bar-container {
+        margin-left: 20px;
+        margin-right: 20px;
+        flex: 1;
+        max-width: 400px;
+    }     
 
-.search-bar-container input {
-    width: 100%;
-    padding: 5px;
-    font-size: 16px;
-    border-radius: 20px;
-    border: none;
-}
+    .search-bar-container input {
+        width: 100%;
+        padding: 5px;
+        font-size: 16px;
+        border-radius: 20px;
+        border: none;
+    }
      
-/* Style for customization sections */
-.addon-section {
-    background-color: #f8f9fa; /* Light gray background */
-    border: 2px solid #ff6b35; /* Border color */
-    border-radius: 8px;
-    padding: 12px;
-    margin-bottom: 15px; /* Spacing between sections */
-}
-/* Customization section title */
-.addon-section h6 {
-    margin-bottom: 10px;
-    font-size: 1.1rem;
-    font-weight: bold;
-    color: #333;
-}
-/* Style for add-on checkboxes */
-.addon-section .form-check {
-    margin-left: 10px;
-}
+    /* Style for customization sections */
+    .addon-section {
+        background-color: #f8f9fa; /* Light gray background */
+        border: 2px solid #ff6b35; /* Border color */
+        border-radius: 8px;
+        padding: 12px;
+        margin-bottom: 15px; /* Spacing between sections */
+    }
+    /* Customization section title */
+    .addon-section h6 {
+        margin-bottom: 10px;
+        font-size: 1.1rem;
+        font-weight: bold;
+        color: #333;
+    }
+    /* Style for add-on checkboxes */
+    .addon-section .form-check {
+        margin-left: 10px;
+    }
 
-/* Category Filter with Custom Radio Buttons */
-form.text-center.mb-4 {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
+    /* Category Filter with Custom Radio Buttons */
+    form.text-center.mb-4 {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
 
-.form-check {
-    display: inline-block;
-    margin-right: 15px;
-    margin-bottom: 10px; /* Add space between buttons */
-}
+    .form-check {
+        display: inline-block;
+        margin-right: 15px;
+        margin-bottom: 10px; /* Add space between buttons */
+    }
 
-.form-check-inline {
-    margin-right: 10px;
-}
+    .form-check-inline {
+        margin-right: 10px;
+    }
 
-.form-check-label {
-    font-size: 16px;
-    margin-left: 8px; /* Space between radio button and label */
-}
+    .form-check-label {
+        font-size: 16px;
+        margin-left: 8px; /* Space between radio button and label */
+    }
 
-.custom-radio {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    width: 18px;
-    height: 18px;
-    border: 2px solid #333;
-    border-radius: 50%;
-    margin-right: 10px; /* Increased spacing between button and label */
-    outline: none;
-    cursor: pointer;
-    position: relative;
-}
+    .custom-radio {
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        width: 18px;
+        height: 18px;
+        border: 2px solid #333;
+        border-radius: 50%;
+        margin-right: 10px; /* Increased spacing between button and label */
+        outline: none;
+        cursor: pointer;
+        position: relative;
+    }
 
-.custom-radio:checked {
-    background-color: #007bff;
-    border-color: #007bff;
-}
+    .custom-radio:checked {
+        background-color: #007bff;
+        border-color: #007bff;
+    }
 
-.custom-radio:checked::after {
-    content: '';
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    width: 8px;
-    height: 8px;
-    background-color: #fff;
-    border-radius: 50%;
-}
+    .custom-radio:checked::after {
+        content: '';
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        width: 8px;
+        height: 8px;
+        background-color: #fff;
+        border-radius: 50%;
+    }
 
-.custom-radio:hover {
-    border-color: #007bff;
-}
+    .custom-radio:hover {
+        border-color: #007bff;
+    }
 
-/* Optional: Style the labels */
-.form-check-label {
-    font-size: 16px;
-    margin-left: 8px; /* Space between the radio button and the label */
-}
+    /* Optional: Style the labels */
+    .form-check-label {
+        font-size: 16px;
+        margin-left: 8px; /* Space between the radio button and the label */
+    }
 </style>
 </head>
 <body>
@@ -293,7 +293,6 @@ form.text-center.mb-4 {
     <div class="container mt-4">
         <h1 class="text-center">Menu</h1>
 
-       
 <!-- 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>
@@ -308,7 +307,7 @@ form.text-center.mb-4 {
         <label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
     </div>
 </form>
-      
+
 <!-- Display text boxes for Customized Dish -->
 {% if selected_category == "Customized Dish" %}
     <div id="custom-dish-form" class="mt-4">
@@ -327,10 +326,6 @@ form.text-center.mb-4 {
     </div>
 {% else %}
 
-       <div class="fixed-search-container">
-            <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." onkeyup="filterMenu()">
-        </div>
-
     <!-- Show menu items only when Customized Dish is not selected -->
     <div class="container mt-4">
         <h1 class="text-center">Menu</h1>
@@ -369,47 +364,7 @@ form.text-center.mb-4 {
     </div>
 
     <!-- Bootstrap JS -->
-    
-
-
-    <!-- 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">
-                    <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <!-- Item Image -->
-                    <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
-                    <!-- Item Name -->
-                    <h5 id="modal-name" class="fw-bold text-center"></h5>
-                    <!-- Item Price -->
-                    <p id="modal-price" class="text-muted text-center"></p>
-                    <!-- Item Description -->
-                    <p id="modal-description" class="text-secondary"></p>
-                    <!-- Add-ons -->
-                    <div id="modal-addons" class="modal-addons mt-4">
-                        <h6>Customization Options</h6>
-                        <div id="addons-list" class="addons-container">Loading customization options...</div>
-                    </div>
-
-
-                    <div class="mt-4">
-                        <h6>Custom Request</h6>
-                        <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
-                    </div>
-                    <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
-
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                </div>
-            </div>
-        </div>
-    </div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 
     <!-- JavaScript -->
     <script>
@@ -467,6 +422,7 @@ form.text-center.mb-4 {
                     document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
                 });
         }
+
         function filterMenu() {
             let input = document.getElementById('searchBar').value.toLowerCase();
             let sections = document.querySelectorAll('h3'); // Select section headers
@@ -495,6 +451,7 @@ form.text-center.mb-4 {
                 }
             });
         }
+
         function addToCartFromModal() {
             const itemName = document.getElementById('modal-name').innerText;
             const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
@@ -546,21 +503,6 @@ form.text-center.mb-4 {
                 alert('An error occurred while adding the item to the cart.');
             });
         }
-        // Function to round reward points to a single digit
-        function roundRewardPoints() {
-            let rewardPointsElement = document.getElementById('reward-points');
-            let rewardPoints = parseFloat(rewardPointsElement.innerText);
-    
-            if (!isNaN(rewardPoints)) {
-                rewardPointsElement.innerText = rewardPoints.toFixed(1); // Rounds to 1 decimal place
-            }
-        }
-        // Run the function when the page loads
-        window.onload = roundRewardPoints;
-        
     </script>
-
-    <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>