Update templates/menu.html

templates/menu.html

@@ -10,7 +10,7 @@
     <style>
         body {
             font-family: Arial, sans-serif;
-            background-color: #fdf4e3; /* Updated background color */
+            background-color: #fdf4e3;
             margin: 0;
             padding: 0;
             display: flex;
@@ -27,13 +27,12 @@
             margin: auto;
             display: flex;
             flex-direction: column;
-            position: relative;
         }
         .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 */
+            height: 200px;
+            width: 100%;
+            object-fit: fill;
+            border-radius: 15px 15px 0 0;
         }
         .card-title {
             font-size: 1.2rem;
@@ -45,50 +44,239 @@
             color: #6c757d;
         }
         .customisable-text {
-            font-size: 0.8rem; /* Smaller font size */
-            color: #6c757d; /* Gray color */
-            text-align: center; /* Center the text */
-            margin-top: 5px; /* Small space above the text */
+            font-size: 0.8rem;
+            color: #6c757d;
+            text-align: center;
+            margin-top: 5px;
         }
         .btn-primary {
             font-size: 13px;
             font-weight: bold;
             border-radius: 5px;
             width: 100px;
-            background-color: #0FAA39; /* Green button color */
+            background-color: #0FAA39;
             border-color: #0FAA39;
-            text-transform: uppercase; /* Added to ensure button text is uppercase */
-            margin-top: 10px; /* Space between the customisable text and the button */
-            margin-left: auto; /* Align the button to the right */
-            margin-right: auto; /* Ensure the button is centered */
+            text-transform: uppercase;
+            margin-top: 10px;
+            margin-left: auto;
+            margin-right: auto;
+            display: block; /* Ensure the button is centered */
         }
-        .btn-primary:hover {
+        .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
             background-color: #0FAA39;
             border-color: #0FAA39;
+            box-shadow: none;
         }
-        .btn-primary:active,
-        .btn-primary:focus {
+        .view-cart-container {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 999;
+        }
+        .view-cart-button {
             background-color: #0FAA39;
-            border-color: #ffffff;
-            box-shadow: none;
+            color: #fff;
+            padding: 10px 20px;
+            border-radius: 30px;
+            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: #109835;
+            text-decoration: none;
+        }
+        .fixed-search-container {
+            position: absolute;
+            top: 90px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 80%;
+            max-width: 600px;
+            z-index: 999;
+            background-color: white;
+            padding: 10px;
+            border-radius: 25px;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
         }
         .container {
-            margin-top: 10px; /* Adjust spacing based on navbar and search bar */
-            padding-top: 0 !important; /* Ensure no padding is added by default */
+            margin-top: 10px;
         }
         h1.text-center {
-            margin-top: 10px; /* Reduced space above */
-            padding-top: 0 !important; /* Removed padding */
-            font-weight: semi-bold; /* Make the "Menu" text bold */
+            margin-top: 10px;
+            padding-top: 0 !important;
+            font-weight: semi-bold;
+        }
+        .fixed-top-bar {
+            position: relative;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 54px;
+            background-color: #FF6B35;
+            color: white;
+            padding: 15px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 1000;
+        }
+        .search-bar-container {
+            padding: 10px;
+            position: absolute;
+            left: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            width: 300px;
+        }
+        .search-bar-container input {
+            width: 85%;
+            padding: 8px 10px 8px 30px;
+            font-size: 16px;
+            border-radius: 10px;
+            border: none;
+        }
+        .search-icon {
+            position: absolute;
+            left: 15px;
+            font-size: 20px;
+            color: #888;
+        }
+        .addon-section {
+            background-color: #fff;
+            border: 2px solid #6c757d;
+            border-radius: 8px;
+            padding: 12px;
+            margin-bottom: 10px;
+        }
+        .addon-section h6 {
+            margin-bottom: 10px;
+            font-size: 1.1rem;
+            font-weight: bold;
+            color: #343a40;
+        }
+        .addon-section .form-check {
+            display: inline-flex;
+            align-items: center;
+            margin-left: 10px;
+            color: #343a40;
+        }
+        .addon-section .form-check-input {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border: 2px solid #343a40;
+            border-radius: 5px;
+            background-color: #f0f0f0;
+            position: relative;
+            margin-right: 10px;
+        }
+        .addon-section .form-check-input:checked {
+            background-color: #006400;
+            border-color: #006400;
+        }
+        .addon-section .form-check-input:checked::before {
+            content: '';
+            font-size: 14px;
+            position: absolute;
+            top: 3px;
+            left: 4px;
+            color: white;
+        }
+        .addon-section .form-check-input:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px #006400;
+        }
+        .addon-section .form-check-label {
+            font-size: 16px;
+            margin-left: 5px;
+            cursor: pointer;
+        }
+        .cart-container {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .modal-footer {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px;
+        }
+        .modal-footer .d-flex {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .modal-footer .btn {
+            height: 40px;
+            padding: 0 15px;
+        }
+        .modal-footer .form-control {
+            width: 50px;
+            height: 40px;
+            text-align: center;
+        }
+        .modal-footer .btn-primary {
+            background-color: #0FAA39;
+            border-color: #0FAA39;
+            font-weight: bold;
+            padding: 10px 20px;
+            height: 40px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: auto;
+        }
+        .modal-footer .btn-outline-secondary {
+            height: 40px;
+            width: 40px;
+        }
+        @media (max-width: 576px) {
+            .modal-dialog {
+                max-width: 98%;
+            }
+            .modal-footer .btn {
+                height: 35px;
+            }
+            .modal-footer .form-control {
+                width: 40px;
+                height: 35px;
+            }
         }
     </style>
 </head>
 <body>
 
+    <div class="fixed-top-bar">
+        <div class="avatar-dropdown-container">
+            <div class="avatar-icon">
+                <span>{{ first_letter }}</span>
+            </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('logout') }}" class="dropdown-item">Logout</a>
+            </div>
+        </div>
+
+        <div class="search-bar-container">
+            <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." onkeyup="filterMenu()">
+            <i class="bi bi-search search-icon"></i>
+        </div>
+    </div>
+
     <div class="container mt-4">
         <h1 class="text-center">Menu</h1>
-      
-        <!-- Menu Sections -->
         {% for section, items in ordered_menu.items() %}
             <h3>{{ section }}</h3>
             <div class="row">
@@ -99,13 +287,11 @@
                             <div class="card-body">
                                 <h5 class="card-title">{{ item.Name }}</h5>
                                 <p class="card-text">${{ item.Price__c }}</p>
-                                <!-- Customisable text below the item description -->
-                                <div class="customisable-text">Customisable</div>
-                                <!-- ADD button below the customisable text -->
                                 <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 }}')">
+                                    onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
                                     ADD
                                 </button>
+                                <div class="customisable-text">Customisable</div>
                             </div>
                         </div>
                     </div>
@@ -114,14 +300,12 @@
         {% endfor %}
     </div>
 
-    <!-- View Cart Button -->
     <div class="view-cart-container">
         <a href="/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">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
@@ -130,15 +314,10 @@
                     <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>
@@ -149,24 +328,19 @@
                     </div>
                     <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
                 </div>
-                <!-- Quantity Controls and Add to Cart Button -->
                 <div class="modal-footer d-flex align-items-center justify-content-between">
-                    <!-- Quantity Controls -->
                     <div class="d-flex align-items-center gap-2">
                         <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
                         <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;"/>
                         <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
                     </div>
-                    <!-- Add to Cart Button -->
                     <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
                 </div>
             </div>
         </div>
     </div>
 
-    <!-- JavaScript -->
     <script>
-        // Show item details and fetch customization options
         function showItemDetails(name, price, image, description, section, selectedCategory) {
             document.getElementById('modal-name').innerText = name;
             document.getElementById('modal-price').innerText = `$${price}`;
@@ -178,33 +352,24 @@
             const modalSectionEl = document.getElementById('modal-section');
             modalSectionEl.setAttribute('data-section', section);
             modalSectionEl.setAttribute('data-category', selectedCategory);
-
-            // Set the default quantity to 1
             document.getElementById('quantityInput').value = 1;
-
-            // Fetch customization options based on the section
+            
             fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
                 .then(response => response.json())
                 .then(data => {
                     const addonsList = document.getElementById('addons-list');
-                    addonsList.innerHTML = ''; // Clear previous content
-
+                    addonsList.innerHTML = '';
                     if (!data.success || !data.addons || data.addons.length === 0) {
                         addonsList.innerHTML = '<p>No customization options available.</p>';
                         return;
                     }
-                
-                    // Display customization options inside styled divs
+                    
                     data.addons.forEach(addon => {
                         const sectionDiv = document.createElement('div');
-                        sectionDiv.classList.add('addon-section'); // Add styling class
-                    
-                        // Add section title
+                        sectionDiv.classList.add('addon-section');
                         const title = document.createElement('h6');
                         title.innerText = addon.name;
                         sectionDiv.appendChild(title);
-                    
-                        // Create options list
                         const optionsContainer = document.createElement('div');
                         addon.options.forEach((option, index) => {
                             const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;