Update templates/search.html

templates/search.html

@@ -11,72 +11,68 @@
     <link rel="preload" href="/static/placeholder.jpg" as="image">
     <style>
         body {
-            font-family: 'Segoe UI', Arial, sans-serif;
-            background-color: #f5f5f5;
+            font-family: Arial, sans-serif;
+            background-color: #fdf4e3;
             margin: 0;
             padding: 0;
             display: flex;
             flex-direction: column;
-            padding-bottom: 80px;
+            padding-bottom: 70px;
         }
         .container {
-            max-width: 1000px;
+            max-width: 900px;
         }
         .menu-heading {
-            font-size: 2.5rem;
+            font-size: 2rem;
             font-weight: 700;
             color: #fff;
             text-align: center;
-            padding: 20px;
-            margin: 30px 0;
-            background: linear-gradient(45deg, #FF6F00, #007BFF);
-            border-radius: 12px;
-            box-shadow: 0 6px 12px rgba(0,0,0,0.3);
+            padding: 15px 20px;
+            margin: 20px 0;
+            background: linear-gradient(45deg, #FFA07A, #FFB347);
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
             width: 100%;
-            max-width: 1000px;
+            max-width: 900px;
             margin-left: auto;
             margin-right: auto;
         }
         .menu-card {
-            max-width: 400px;
-            border-radius: 20px;
+            max-width: 350px;
+            border-radius: 15px;
             overflow: hidden;
             background-color: #fff;
             margin: auto;
             display: flex;
             flex-direction: column;
-            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
             cursor: pointer;
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-        }
-        .menu-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
         }
         .card-img-container {
             position: relative;
             width: 100%;
-            height: 220px;
+            height: 200px;
         }
         .card-img {
             height: 100%;
             width: 100%;
             object-fit: cover;
-            border-radius: 20px 20px 0 0;
+            border-radius: 15px 15px 0 0;
             display: block;
         }
         .card-title {
             position: absolute;
-            top: 15px;
+            top: 10px;
             left: 50%;
             transform: translateX(-50%);
-            font-size: 1.3rem;
+            font-size: 1.2rem;
             font-weight: 600;
             color: #fff;
             text-align: center;
-            padding: 8px 12px;
-            background-color: rgba(26, 26, 26, 0.7);
-            border-radius: 8px;
+            margin: 0;
+            padding: 5px 10px;
+            background-color: rgba(0, 0, 0, 0.5);
+            border-radius: 5px;
             width: 90%;
             white-space: nowrap;
             overflow: hidden;
@@ -84,135 +80,143 @@
             z-index: 1;
         }
         .menu-card .card-body {
-            padding: 15px;
+            padding: 10px;
             text-align: center;
         }
         .menu-card .card-body .card-text.section {
-            font-size: 1rem;
+            font-size: 0.9rem;
             color: #6c757d;
+            text-align: center;
             margin-bottom: 10px;
         }
         .avatar-dropdown-container {
             position: absolute;
-            right: 15px;
+            right: 10px;
             top: 50%;
             transform: translateY(-50%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
         .avatar-icon {
-            width: 45px;
-            height: 45px;
+            width: 40px;
+            height: 40px;
             border-radius: 50%;
-            background: linear-gradient(45deg, #FF6F00, #007BFF);
+            background: linear-gradient(45deg, #FF4500, #000000, #1E90FF);
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
             color: white;
-            font-size: 22px;
+            font-size: 20px;
             font-weight: bold;
-            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
-            transition: transform 0.3s ease;
-        }
-        .avatar-icon:hover {
-            transform: scale(1.1);
         }
         .dropdown-menu {
             position: absolute;
             right: 0;
             top: 100%;
-            background-color: #1A1A1A;
-            border-radius: 10px;
-            width: 250px;
-            box-shadow: 0 6px 12px rgba(0,0,0,0.3);
+            background-color: #fff8f0;
+            border-radius: 5px;
+            width: 220px;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
             display: none;
-            border: 1px solid #FF6F00;
+            border: 1px solid #ffd8b1;
             z-index: 1000;
         }
         .dropdown-menu .dropdown-item {
-            padding: 15px 20px;
+            padding: 12px 16px;
             text-decoration: none;
-            color: #fff;
-            border-bottom: 1px solid #333;
+            color: #333;
+            border-bottom: 1px solid #ffd8b1;
             display: flex;
             align-items: center;
+            font-size: 15px;
+            transition: background-color 0.2s ease;
+            background: linear-gradient(45deg, #FF4500, #000000, #1E90FF);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .dropdown-menu .dropdown-item i {
+            margin-right: 10px;
             font-size: 16px;
-            transition: background-color 0.3s ease;
         }
         .dropdown-menu .dropdown-item:last-child {
             border-bottom: none;
         }
         .dropdown-menu .dropdown-item:hover {
-            background-color: #FF6F00;
-            color: #fff;
-        }
-        .dropdown-menu .dropdown-item i {
-            margin-right: 10px;
-            font-size: 18px;
+            background-color: #ffe4c4;
+            color: #333;
+            -webkit-text-fill-color: #333;
         }
         .fixed-top-bar {
-            position: fixed;
+            position: relative;
             top: 0;
             left: 0;
             width: 100%;
-            height: 60px;
-            background: linear-gradient(45deg, #1A1A1A, #007BFF);
+            height: 54px;
+            background: linear-gradient(45deg, #FFA07A, #FFB347);
             color: white;
             padding: 15px;
             display: flex;
             justify-content: space-between;
             align-items: center;
             z-index: 1000;
-            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
         }
         .back-arrow-container {
             position: absolute;
-            left: 15px;
+            left: 10px;
             top: 50%;
             transform: translateY(-50%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
         .back-arrow {
-            width: 40px;
-            height: 40px;
+            width: 36px;
+            height: 36px;
             border-radius: 50%;
-            background: linear-gradient(45deg, #FF6F00, #007BFF);
+            background: linear-gradient(45deg, #FFA07A, #FFB347);
             display: flex;
             align-items: center;
             justify-content: center;
             color: white;
-            font-size: 22px;
+            font-size: 20px;
             cursor: pointer;
-            transition: transform 0.3s ease, background-color 0.3s ease;
+            transition: transform 0.2s ease, background-color 0.2s ease;
             text-decoration: none;
-            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
         }
         .back-arrow:hover {
-            background: linear-gradient(45deg, #E65C00, #005CBF);
+            background: linear-gradient(45deg, #FF8C61, #FF9E2C);
             transform: scale(1.1);
         }
         .back-arrow:active {
             transform: scale(0.95);
         }
         .search-bar-container {
-            position: relative;
-            left: 70px;
+            position: absolute;
+            left: 60px;
             top: 50%;
             transform: translateY(-50%);
-            width: 350px;
-            max-width: calc(90% - 70px);
+            display: flex;
+            align-items: center;
+            width: 300px;
+            max-width: calc(90% - 60px);
+            position: relative;
         }
         .search-bar-container input {
             width: 100%;
-            padding: 10px 50px 10px 50px;
+            padding: 8px 40px 8px 40px;
             font-size: 16px;
             border-radius: 25px;
             border: none;
             background-color: #fff;
-            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             outline: none;
-            transition: box-shadow 0.3s ease;
+            transition: border-bottom 0.3s ease;
         }
         .search-bar-container input:focus {
-            box-shadow: 0 0 8px rgba(0,123,255,0.5);
+            border-bottom: 2px solid #FFA07A;
         }
         .search-bar-container input::placeholder {
             color: #888;
@@ -220,57 +224,54 @@
         .search-icon {
             position: absolute;
             left: 15px;
-            top: 50%;
-            transform: translateY(-50%);
-            font-size: 20px;
+            font-size: 18px;
             color: #888;
         }
         .mic-icon {
             position: absolute;
             right: 15px;
-            top: 50%;
-            transform: translateY(-50%);
-            font-size: 20px;
+            font-size: 18px;
             color: #888;
             cursor: pointer;
             transition: color 0.3s ease;
         }
         .mic-icon.active {
-            color: #FF6F00;
+            color: #007bff;
         }
-        .autocomplete-popup {
+        .search-popup {
             position: absolute;
             top: 100%;
             left: 0;
             right: 0;
             background-color: #fff;
-            border-radius: 10px;
-            box-shadow: 0 6px 12px rgba(0,0,0,0.2);
+            border-radius: 5px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
             max-height: 300px;
             overflow-y: auto;
             z-index: 1000;
             display: none;
+            margin-top: 5px;
         }
-        .autocomplete-item {
+        .search-popup-item {
             display: flex;
             align-items: center;
-            padding: 10px 15px;
+            padding: 10px;
             border-bottom: 1px solid #eee;
             cursor: pointer;
-            transition: background-color 0.3s ease;
+            transition: background-color 0.2s ease;
         }
-        .autocomplete-item:hover {
-            background-color: #f1f1f1;
+        .search-popup-item:hover {
+            background-color: #f8f9fa;
         }
-        .autocomplete-item img {
+        .search-popup-item img {
             width: 50px;
             height: 50px;
             object-fit: cover;
             border-radius: 5px;
-            margin-right: 15px;
+            margin-right: 10px;
         }
-        .autocomplete-item span {
-            font-size: 16px;
+        .search-popup-item span {
+            font-size: 14px;
             color: #333;
         }
         .bottom-action-bar {
@@ -278,21 +279,21 @@
             bottom: 0;
             left: 0;
             right: 0;
-            background-color: #1A1A1A;
-            padding: 12px 20px;
+            background-color: white;
+            padding: 10px 20px;
             display: flex;
             justify-content: space-between;
             align-items: center;
-            box-shadow: 0 -3px 10px rgba(0,0,0,0.2);
+            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
             z-index: 1000;
-            max-width: 1000px;
+            max-width: 900px;
             margin: 0 auto;
         }
         .bottom-action-bar .btn {
             flex: 1;
-            margin: 0 8px;
-            padding: 12px 20px;
-            border-radius: 10px;
+            margin: 0 5px;
+            padding: 10px 15px;
+            border-radius: 8px;
             font-weight: bold;
             font-size: 16px;
             color: white;
@@ -300,71 +301,73 @@
             align-items: center;
             justify-content: center;
             text-align: center;
-            transition: background-color 0.3s ease;
+            min-width: 0;
+            white-space: nowrap;
         }
         .bottom-action-bar .btn-order-history {
-            background: linear-gradient(45deg, #FF6F00, #E65C00);
+            background-color: #FFA07A;
+            border-color: #FFA07A;
         }
         .bottom-action-bar .btn-order-history:hover {
-            background: linear-gradient(45deg, #E65C00, #CC5200);
+            background-color: #FF8C61;
+            border-color: #FF8C61;
         }
         .bottom-action-bar .btn-view-cart {
-            background: linear-gradient(45deg, #007BFF, #005CBF);
+            background-color: #0FAA39;
+            border-color: #0FAA39;
         }
         .bottom-action-bar .btn-view-cart:hover {
-            background: linear-gradient(45deg, #005CBF, #004799);
+            background-color: #0D9232;
+            border-color: #0D9232;
         }
         .cart-icon-badge {
-            background-color: #fff;
-            color: #007BFF;
+            background-color: white;
+            color: #0FAA39;
             border-radius: 50%;
-            width: 22px;
-            height: 22px;
+            width: 20px;
+            height: 20px;
             display: inline-flex;
             align-items: center;
             justify-content: center;
             font-size: 12px;
-            margin-left: 10px;
+            margin-left: 8px;
         }
         .no-results {
             text-align: center;
-            font-size: 1.3rem;
+            font-size: 1.2rem;
             color: #6c757d;
-            margin-top: 30px;
+            margin-top: 20px;
         }
         @media (max-width: 576px) {
             .fixed-top-bar {
-                height: 65px;
+                height: 60px;
                 padding: 10px;
             }
             .back-arrow-container {
-                left: 10px;
+                left: 8px;
             }
             .back-arrow {
-                width: 36px;
-                height: 36px;
-                font-size: 20px;
+                width: 32px;
+                height: 32px;
+                font-size: 18px;
             }
             .search-bar-container {
-                width: calc(80% - 60px);
-                max-width: calc(100% - 60px);
-                left: 60px;
+                width: calc(80% - 50px);
+                max-width: calc(100% - 50px);
+                left: 50px;
             }
             .search-bar-container input {
-                padding: 8px 45px 8px 45px;
+                padding: 6px 35px 6px 35px;
                 font-size: 14px;
                 border-radius: 20px;
             }
             .search-icon {
                 left: 12px;
-                font-size: 18px;
+                font-size: 16px;
             }
             .mic-icon {
                 right: 12px;
-                font-size: 18px;
-            }
-            .autocomplete-popup {
-                width: 100%;
+                font-size: 16px;
             }
             .avatar-dropdown-container {
                 right: 10px;
@@ -377,37 +380,51 @@
             .dropdown-menu {
                 width: 220px;
             }
+            .dropdown-menu .dropdown-item {
+                padding: 12px 16px;
+                font-size: 15px;
+            }
             .menu-heading {
-                font-size: 1.8rem;
-                padding: 12px 15px;
-                margin: 20px 0;
+                font-size: 1.5rem;
+                padding: 10px 15px;
+                margin: 15px 0;
             }
             .menu-card {
                 max-width: 100%;
             }
             .card-img-container {
-                height: 180px;
+                height: 150px;
             }
             .card-title {
-                font-size: 1.1rem;
-                top: 10px;
-                padding: 6px 10px;
+                font-size: 1rem;
+                top: 8px;
+                padding: 4px 8px;
             }
             .menu-card .card-body .card-text.section {
-                font-size: 0.9rem;
+                font-size: 0.8rem;
             }
             .bottom-action-bar {
-                padding: 10px 12px;
+                padding: 8px 10px;
             }
             .bottom-action-bar .btn {
-                padding: 10px 12px;
+                padding: 8px 10px;
                 font-size: 14px;
             }
             .cart-icon-badge {
-                width: 20px;
-                height: 20px;
-                font-size: 11px;
-                margin-left: 6px;
+                width: 18px;
+                height: 18px;
+                font-size: 10px;
+                margin-left: 5px;
+            }
+            .search-popup {
+                width: 100%;
+            }
+            .search-popup-item img {
+                width: 40px;
+                height: 40px;
+            }
+            .search-popup-item span {
+                font-size: 12px;
             }
         }
     </style>
@@ -434,11 +451,11 @@
             <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
             <i class="bi bi-search search-icon"></i>
             <i class="bi bi-mic mic-icon" id="micIcon"></i>
-            <div class="autocomplete-popup" id="autocompletePopup"></div>
+            <div class="search-popup" id="searchPopup"></div>
         </div>
     </div>
 
-    <div class="container mt-5">
+    <div class="container mt-4">
         <h1 class="menu-heading">Search Menu Items</h1>
         <div class="row" id="menuItems">
             {% for section, items in ordered_menu.items() %}
@@ -446,7 +463,7 @@
                     <div class="col-md-6 mb-4 menu-item" data-name="{{ item.Name | default('Unnamed Item') }}" data-section="{{ item.Section__c | default(section) }}">
                         <div class="card menu-card" onclick="selectItem('{{ item.Name | default('Unnamed Item') }}', '{{ item.Section__c | default(section) }}')">
                             <div class="card-img-container">
-                                <img src="{{ item.Image1__c | default('/static/placeholder.jpg') }}" alt="{{ item.Name | default('Unnamed Item') }}" class="card-img" loading="eager" decoding="async" width="400" height="220">
+                                <img src="{{ item.Image1__c | default('/static/placeholder.jpg') }}" alt="{{ item.Name | default('Unnamed Item') }}" class="card-img" loading="eager" decoding="async" width="350" height="200">
                                 <h5 class="card-title">{{ item.Name | default('Unnamed Item') }}</h5>
                             </div>
                             <div class="card-body">
@@ -527,39 +544,38 @@
             noResults.style.display = hasResults ? 'none' : 'block';
         }
 
-        function showAutocomplete(query) {
-            const autocompletePopup = document.getElementById('autocompletePopup');
-            autocompletePopup.innerHTML = '';
+        function showSearchPopup(query) {
+            const searchPopup = document.getElementById('searchPopup');
+            searchPopup.innerHTML = '';
             if (!query) {
-                autocompletePopup.style.display = 'none';
+                searchPopup.style.display = 'none';
                 return;
             }
 
             const filteredItems = menuItems.filter(item => 
-                item.name.toLowerCase().startsWith(query.toLowerCase())
+                item.name.toLowerCase().includes(query.toLowerCase()) || 
+                item.section.toLowerCase().includes(query.toLowerCase())
             );
 
             if (filteredItems.length === 0) {
-                autocompletePopup.style.display = 'none';
+                searchPopup.style.display = 'none';
                 return;
             }
 
             filteredItems.forEach(item => {
-                const div = document.createElement('div');
-                div.className = 'autocomplete-item';
-                div.innerHTML = `
+                const popupItem = document.createElement('div');
+                popupItem.className = 'search-popup-item';
+                popupItem.innerHTML = `
                     <img src="${item.image}" alt="${item.name}">
                     <span>${item.name}</span>
                 `;
-                div.addEventListener('click', () => {
-                    document.getElementById('searchBar').value = item.name;
-                    filterMenuItems(item.name);
-                    autocompletePopup.style.display = 'none';
+                popupItem.addEventListener('click', () => {
+                    selectItem(item.name, item.section);
                 });
-                autocompletePopup.appendChild(div);
+                searchPopup.appendChild(popupItem);
             });
 
-            autocompletePopup.style.display = 'block';
+            searchPopup.style.display = 'block';
         }
 
         document.addEventListener('DOMContentLoaded', function () {
@@ -584,20 +600,21 @@
 
             // Search Bar Functionality
             const searchBar = document.getElementById('searchBar');
-            const autocompletePopup = document.getElementById('autocompletePopup');
+            const searchPopup = document.getElementById('searchPopup');
             const searchQuery = localStorage.getItem('searchQuery');
             if (searchQuery) {
                 searchBar.value = searchQuery;
                 filterMenuItems(searchQuery);
+                showSearchPopup(searchQuery);
                 localStorage.removeItem('searchQuery');
             }
             searchBar.addEventListener('input', function () {
                 filterMenuItems(this.value);
-                showAutocomplete(this.value);
+                showSearchPopup(this.value);
             });
             document.addEventListener('click', function (event) {
-                if (!searchBar.contains(event.target) && !autocompletePopup.contains(event.target)) {
-                    autocompletePopup.style.display = 'none';
+                if (!searchBar.contains(event.target) && !searchPopup.contains(event.target)) {
+                    searchPopup.style.display = 'none';
                 }
             });
 
@@ -612,7 +629,7 @@
                     const query = event.results[0][0].transcript.trim();
                     searchBar.value = query;
                     filterMenuItems(query);
-                    showAutocomplete(query);
+                    showSearchPopup(query);
                 };
                 recognition.onend = () => micIcon.classList.remove('active');
                 recognition.onerror = (event) => {
@@ -651,11 +668,4 @@
         });
     </script>
 </body>
-</html
-
-
-
-
-
-
-
+</html>