BiryaniHubflaskhema6

Running

App Files Files Community

lokesh341 commited on Apr 6

Commit

5842196

verified ·

1 Parent(s): 4e6dd6f

Update templates/search.html

Browse files

Files changed (1) hide show

templates/search.html +76 -199

templates/search.html CHANGED Viewed

@@ -3,7 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Search - Menu</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
     <style>
@@ -11,248 +12,124 @@
             font-family: Arial, sans-serif;
             background-color: #fdf4e3;
             margin: 0;
-            padding: 0;
-            display: flex;
-            flex-direction: column;
-            padding-bottom: 70px;
-        }
-        .fixed-top-bar {
-            position: relative;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 54px;
-            background: linear-gradient(45deg, #FFA07A, #FFB347);
-            color: white;
-            padding: 15px;
-            display: flex;
-            align-items: center;
-            z-index: 1000;
         }
-        .orange-label {
-            background-color: #FFA500;
-            padding: 5px 10px;
-            border-radius: 5px;
-            display: flex;
-            align-items: center;
-            position: absolute;
-            left: 10px;
-            top: 50%;
-            transform: translateY(-50%);
-        }
-        .back-button {
-            background-color: black;
-            color: white;
-            border: none;
-            border-radius: 50%;
-            width: 25px;
-            height: 25px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            cursor: pointer;
-            margin-right: 10px;
         }
-        .search-bar-container {
-            position: fixed;
-            bottom: 10px;
-            left: 50%;
-            transform: translateX(-50%);
-            display: flex;
-            align-items: center;
-            width: 300px;
-            max-width: 90%;
-            z-index: 1000;
         }
-        .search-bar-container input {
             width: 100%;
-            padding: 8px 40px 8px 40px;
             font-size: 16px;
             border-radius: 25px;
-            border: none;
-            background-color: #fff;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             outline: none;
         }
         .search-icon {
             position: absolute;
             left: 15px;
             font-size: 18px;
             color: #888;
         }
-        .mic-icon {
-            position: absolute;
-            right: 15px;
-            font-size: 18px;
-            color: #888;
-            cursor: pointer;
-        }
-        .autocomplete-suggestions {
-            position: absolute;
-            bottom: 100%;
-            left: 0;
-            width: 100%;
-            max-height: 200px;
-            overflow-y: auto;
             background-color: #fff;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-            z-index: 1000;
-            display: none;
-        }
-        .autocomplete-suggestions .suggestion-item {
-            padding: 8px 15px;
-            cursor: pointer;
-            font-size: 14px;
-            color: #333;
-        }
-        .autocomplete-suggestions .suggestion-item:hover {
-            background-color: #f1f1f1;
-        }
-        .container {
-            max-width: 900px;
-            margin-top: 20px;
-            margin-bottom: 70px;
-        }
-        .search-item {
             cursor: pointer;
         }
-        .menu-card {
-            max-width: 350px;
-            border-radius: 15px;
-            overflow: hidden;
-            background-color: #fff;
-            margin: auto;
-            display: flex;
-            flex-direction: column;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-            transition: transform 0.2s;
         }
-        .menu-card:hover {
-            transform: scale(1.05);
-        }
-        .menu-video {
-            height: 200px;
-            width: 100%;
             object-fit: cover;
-            border-radius: 15px 15px 0 0;
         }
-        .card-body {
-            padding: 10px;
-            text-align: center;
-        }
-        .card-title {
             font-size: 1.2rem;
             font-weight: 600;
-            margin: 0;
-            color: #333333;
         }
     </style>
 </head>
 <body>
-    <div class="fixed-top-bar">
-        <div class="orange-label">
-            <button class="back-button" onclick="window.location.href='/menu'"><</button>
-            <span>Search</span>
-        </div>
-    </div>
     <div class="container">
-        <h2>Search Results</h2>
-        <div id="searchResults" class="row">
-            {% for item in all_items %}
-                <div class="col-md-6 mb-4 search-item" data-name="{{ item.Name | lower }}" data-section="{{ item.Section__c | lower }}"
-                     onclick="window.location.href='/menu?highlight={{ item.Name | urlencode }}'">
-                    <div class="card menu-card">
-                        <img src="{{ item.Image2__c | default(item.Image1__c) | default('/static/placeholder.jpg') }}"
-                             class="card-img-top menu-video" alt="{{ item.Name }}" style="height: 200px; object-fit: cover;">
-                        <div class="card-body">
-                            <h5 class="card-title">{{ item.Name }}</h5>
-                        </div>
-                    </div>
                 </div>
             {% endfor %}
         </div>
     </div>
-    <div class="search-bar-container">
-        <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 id="autocompleteSuggestions" class="autocomplete-suggestions"></div>
-    </div>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
-        const menuItems = [
-            {% for item in all_items %}
-                "{{ item.Name | e }}",
-            {% endfor %}
-        ];
-        function sanitizeInput(input) {
-            const div = document.createElement('div');
-            div.textContent = input;
-            return div.innerHTML;
         }
         document.addEventListener('DOMContentLoaded', function () {
             const searchBar = document.getElementById('searchBar');
-            const suggestionsContainer = document.getElementById('autocompleteSuggestions');
             const searchResults = document.getElementById('searchResults');
-            function filterSearch() {
-                const input = sanitizeInput(searchBar.value.trim().toLowerCase());
-                const items = document.querySelectorAll('.search-item');
-                items.forEach(item => {
-                    const itemName = item.getAttribute('data-name');
-                    const itemSection = item.getAttribute('data-section');
-                    if (itemName.includes(input) || itemSection.includes(input)) {
-                        item.style.display = 'block';
                     } else {
                         item.style.display = 'none';
                     }
                 });
-                if (!input) {
-                    items.forEach(item => item.style.display = 'block');
-                }
-            }
-            searchBar.addEventListener('input', function () {
-                const input = sanitizeInput(this.value.trim().toLowerCase());
-                suggestionsContainer.innerHTML = '';
-                suggestionsContainer.style.display = 'none';
-                if (input) {
-                    const filteredItems = menuItems.filter(item =>
-                        item.toLowerCase().includes(input)
-                    );
-                    if (filteredItems.length > 0) {
-                        filteredItems.forEach(item => {
-                            const suggestionDiv = document.createElement('div');
-                            suggestionDiv.classList.add('suggestion-item');
-                            suggestionDiv.innerText = item;
-                            suggestionDiv.addEventListener('click', function () {
-                                searchBar.value = item;
-                                suggestionsContainer.style.display = 'none';
-                                filterSearch();
-                            });
-                            suggestionsContainer.appendChild(suggestionDiv);
-                        });
-                        suggestionsContainer.style.display = 'block';
-                    }
-                }
-                filterSearch();
-            });
-            document.addEventListener('click', function (event) {
-                if (!searchBar.contains(event.target) && !suggestionsContainer.contains(event.target)) {
-                    suggestionsContainer.style.display = 'none';
-                }
             });
         });
     </script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Search Menu</title>
+    <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
     <style>
             font-family: Arial, sans-serif;
             background-color: #fdf4e3;
             margin: 0;
+            padding: 20px;
         }
+        .container {
+            max-width: 900px;
+            margin: 0 auto;
         }
+        .search-container {
+            margin-bottom: 20px;
+            position: relative;
         }
+        .search-container input {
             width: 100%;
+            padding: 10px 40px 10px 40px;
             font-size: 16px;
             border-radius: 25px;
+            border: 1px solid #ddd;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             outline: none;
         }
         .search-icon {
             position: absolute;
             left: 15px;
+            top: 50%;
+            transform: translateY(-50%);
             font-size: 18px;
             color: #888;
         }
+        .item-card {
+            display: flex;
+            align-items: center;
             background-color: #fff;
+            border-radius: 10px;
+            padding: 10px;
+            margin-bottom: 15px;
             cursor: pointer;
+            transition: background-color 0.3s ease, transform 0.2s ease;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         }
+        .item-card:hover {
+            background-color: #f8f9fa;
+            transform: scale(1.02);
         }
+        .item-image {
+            width: 80px;
+            height: 80px;
             object-fit: cover;
+            border-radius: 8px;
+            margin-right: 15px;
         }
+        .item-name {
             font-size: 1.2rem;
             font-weight: 600;
+            color: #333;
+        }
+        @media (max-width: 576px) {
+            .item-card {
+                padding: 8px;
+            }
+            .item-image {
+                width: 60px;
+                height: 60px;
+            }
+            .item-name {
+                font-size: 1rem;
+            }
+            .search-container input {
+                padding: 8px 35px 8px 35px;
+                font-size: 14px;
+            }
+            .search-icon {
+                font-size: 16px;
+                left: 12px;
+            }
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <div class="search-container">
+            <input type="text" id="searchBar" class="form-control" placeholder="Search items..." autocomplete="off">
+            <i class="bi bi-search search-icon"></i>
+        </div>
+        <div id="searchResults">
+            {% for item in menu_items %}
+                <div class="item-card"
+                     data-item-name="{{ item.Name | default('Unnamed Item') | e }}"
+                     data-item-section="{{ item.Section__c | default('Unknown') | e }}"
+                     onclick="redirectToMenu('{{ item.Name | default('Unnamed Item') | e }}')">
+                    <img src="{{ item.Image2__c | default('/static/placeholder.jpg') }}"
+                         alt="{{ item.Name | default('Unnamed Item') }}"
+                         class="item-image">
+                    <div class="item-name">{{ item.Name | default('Unnamed Item') }}</div>
                 </div>
             {% endfor %}
         </div>
     </div>
     <script>
+        function redirectToMenu(itemName) {
+            const encodedItemName = encodeURIComponent(itemName);
+            window.location.href = `/menu?highlight=${encodedItemName}`;
         }
         document.addEventListener('DOMContentLoaded', function () {
             const searchBar = document.getElementById('searchBar');
             const searchResults = document.getElementById('searchResults');
+            const allItems = Array.from(searchResults.querySelectorAll('.item-card'));
+            searchBar.addEventListener('input', function () {
+                const query = this.value.trim().toLowerCase();
+                allItems.forEach(item => {
+                    const itemName = item.getAttribute('data-item-name').toLowerCase();
+                    if (itemName.includes(query)) {
+                        item.style.display = 'flex';
                     } else {
                         item.style.display = 'none';
                     }
                 });
             });
         });
     </script>