Hugging Face's logo

Spaces:
lokeshloki143
/
BiryaniHubflaskhema6
Sleeping

App Files Community
4
lokeshloki143 commited on
Commit
e0339fc
·
verified ·
1 Parent(s): 05018e4

Update templates/search.html

Browse files
Files changed (1) hide show
  1. templates/search.html +179 -123
templates/search.html CHANGED
@@ -3,22 +3,20 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Enhanced Search Menu</title>
7
  <!-- Bootstrap CSS -->
8
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
9
- <!-- Font Awesome for Icons -->
10
- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
11
  <!-- Preload Placeholder Image -->
12
  <link rel="preload" href="/static/placeholder.jpg" as="image">
13
  <style>
14
  body {
15
- font-family: 'Poppins', sans-serif;
16
- background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
17
  margin: 0;
18
  padding: 0;
19
  display: flex;
20
  flex-direction: column;
21
- min-height: 100vh;
22
  padding-bottom: 80px;
23
  }
24
  .container {
@@ -31,9 +29,9 @@
31
  text-align: center;
32
  padding: 20px;
33
  margin: 30px 0;
34
- background: linear-gradient(45deg, #FF6F00, #0288D1);
35
- border-radius: 15px;
36
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
37
  width: 100%;
38
  max-width: 1000px;
39
  margin-left: auto;
@@ -47,13 +45,13 @@
47
  margin: auto;
48
  display: flex;
49
  flex-direction: column;
50
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
51
  cursor: pointer;
52
  transition: transform 0.3s ease, box-shadow 0.3s ease;
53
  }
54
  .menu-card:hover {
55
- transform: translateY(-10px);
56
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
57
  }
58
  .card-img-container {
59
  position: relative;
@@ -77,7 +75,7 @@
77
  color: #fff;
78
  text-align: center;
79
  padding: 8px 12px;
80
- background: linear-gradient(45deg, rgba(2, 136, 209, 0.7), rgba(255, 111, 0, 0.7));
81
  border-radius: 8px;
82
  width: 90%;
83
  white-space: nowrap;
@@ -91,7 +89,7 @@
91
  }
92
  .menu-card .card-body .card-text.section {
93
  font-size: 1rem;
94
- color: #1C2526;
95
  margin-bottom: 10px;
96
  }
97
  .avatar-dropdown-container {
@@ -99,22 +97,20 @@
99
  right: 15px;
100
  top: 50%;
101
  transform: translateY(-50%);
102
- display: flex;
103
- align-items: center;
104
  }
105
  .avatar-icon {
106
- width: 50px;
107
- height: 50px;
108
  border-radius: 50%;
109
- background: linear-gradient(45deg, #FF6F00, #0288D1);
110
  cursor: pointer;
111
  display: flex;
112
  align-items: center;
113
  justify-content: center;
114
- color: #fff;
115
- font-size: 24px;
116
  font-weight: bold;
117
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
118
  transition: transform 0.3s ease;
119
  }
120
  .avatar-icon:hover {
@@ -124,45 +120,49 @@
124
  position: absolute;
125
  right: 0;
126
  top: 100%;
127
- background: linear-gradient(135deg, #1C2526, #0288D1);
128
  border-radius: 10px;
129
  width: 250px;
130
- box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
131
  display: none;
132
- border: none;
133
  z-index: 1000;
134
  }
135
  .dropdown-menu .dropdown-item {
136
  padding: 15px 20px;
137
  text-decoration: none;
138
  color: #fff;
 
139
  display: flex;
140
  align-items: center;
141
  font-size: 16px;
142
  transition: background-color 0.3s ease;
143
  }
144
- .dropdown-menu .dropdown-item i {
145
- margin-right: 10px;
146
- font-size: 18px;
147
  }
148
  .dropdown-menu .dropdown-item:hover {
149
  background-color: #FF6F00;
150
  color: #fff;
151
  }
 
 
 
 
152
  .fixed-top-bar {
153
  position: fixed;
154
  top: 0;
155
  left: 0;
156
  width: 100%;
157
- height: 70px;
158
- background: linear-gradient(45deg, #1C2526, #0288D1);
159
- color: #fff;
160
  padding: 15px;
161
  display: flex;
162
  justify-content: space-between;
163
  align-items: center;
164
  z-index: 1000;
165
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
166
  }
167
  .back-arrow-container {
168
  position: absolute;
@@ -174,28 +174,29 @@
174
  width: 40px;
175
  height: 40px;
176
  border-radius: 50%;
177
- background: #FF6F00;
178
  display: flex;
179
  align-items: center;
180
  justify-content: center;
181
- color: #fff;
182
  font-size: 22px;
183
  cursor: pointer;
184
  transition: transform 0.3s ease, background-color 0.3s ease;
185
  text-decoration: none;
186
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
187
  }
188
  .back-arrow:hover {
189
- background: #e65b00;
190
  transform: scale(1.1);
191
  }
 
 
 
192
  .search-bar-container {
193
- position: absolute;
194
  left: 70px;
195
  top: 50%;
196
  transform: translateY(-50%);
197
- display: flex;
198
- align-items: center;
199
  width: 350px;
200
  max-width: calc(90% - 70px);
201
  }
@@ -203,59 +204,98 @@
203
  width: 100%;
204
  padding: 10px 50px 10px 50px;
205
  font-size: 16px;
206
- border-radius: 30px;
207
  border: none;
208
  background-color: #fff;
209
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
210
  outline: none;
211
  transition: box-shadow 0.3s ease;
212
  }
213
  .search-bar-container input:focus {
214
- box-shadow: 0 4px 12px rgba(2, 136, 209, 0.4);
215
  }
216
  .search-bar-container input::placeholder {
217
  color: #888;
218
  }
219
  .search-icon {
220
  position: absolute;
221
- left: 20px;
 
 
222
  font-size: 20px;
223
- color: #FF6F00;
224
  }
225
  .mic-icon {
226
  position: absolute;
227
- right: 20px;
 
 
228
  font-size: 20px;
229
- color: #0288D1;
230
  cursor: pointer;
231
  transition: color 0.3s ease;
232
  }
233
  .mic-icon.active {
234
  color: #FF6F00;
235
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
236
  .bottom-action-bar {
237
  position: fixed;
238
  bottom: 0;
239
  left: 0;
240
  right: 0;
241
- background: #fff;
242
- padding: 15px 20px;
243
  display: flex;
244
  justify-content: space-between;
245
  align-items: center;
246
- box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
247
  z-index: 1000;
248
  max-width: 1000px;
249
  margin: 0 auto;
250
  }
251
  .bottom-action-bar .btn {
252
  flex: 1;
253
- margin: 0 10px;
254
  padding: 12px 20px;
255
  border-radius: 10px;
256
- font-weight: 600;
257
  font-size: 16px;
258
- color: #fff;
259
  display: flex;
260
  align-items: center;
261
  justify-content: center;
@@ -263,55 +303,38 @@
263
  transition: background-color 0.3s ease;
264
  }
265
  .bottom-action-bar .btn-order-history {
266
- background: linear-gradient(45deg, #FF6F00, #e65b00);
267
  }
268
  .bottom-action-bar .btn-order-history:hover {
269
- background: linear-gradient(45deg, #e65b00, #d54f00);
270
  }
271
  .bottom-action-bar .btn-view-cart {
272
- background: linear-gradient(45deg, #0288D1, #0277BD);
273
  }
274
  .bottom-action-bar .btn-view-cart:hover {
275
- background: linear-gradient(45deg, #0277BD, #0267A8);
276
  }
277
  .cart-icon-badge {
278
- background-color: #FF6F00;
279
- color: #fff;
280
  border-radius: 50%;
281
- width: 24px;
282
- height: 24px;
283
  display: inline-flex;
284
  align-items: center;
285
  justify-content: center;
286
- font-size: 14px;
287
  margin-left: 10px;
288
  }
289
  .no-results {
290
  text-align: center;
291
- font-size: 1.5rem;
292
- color: #1C2526;
293
  margin-top: 30px;
294
  }
295
- .image-preview {
296
- position: fixed;
297
- top: 100px;
298
- right: 20px;
299
- width: 200px;
300
- height: 200px;
301
- border-radius: 15px;
302
- overflow: hidden;
303
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
304
- display: none;
305
- z-index: 1000;
306
- }
307
- .image-preview img {
308
- width: 100%;
309
- height: 100%;
310
- object-fit: cover;
311
- }
312
  @media (max-width: 576px) {
313
  .fixed-top-bar {
314
- height: 60px;
315
  padding: 10px;
316
  }
317
  .back-arrow-container {
@@ -324,21 +347,25 @@
324
  }
325
  .search-bar-container {
326
  width: calc(80% - 60px);
 
327
  left: 60px;
328
  }
329
  .search-bar-container input {
330
- padding: 8px 40px 8px 40px;
331
  font-size: 14px;
332
- border-radius: 25px;
333
  }
334
  .search-icon {
335
- left: 15px;
336
  font-size: 18px;
337
  }
338
  .mic-icon {
339
- right: 15px;
340
  font-size: 18px;
341
  }
 
 
 
342
  .avatar-dropdown-container {
343
  right: 10px;
344
  }
@@ -352,7 +379,7 @@
352
  }
353
  .menu-heading {
354
  font-size: 1.8rem;
355
- padding: 15px;
356
  margin: 20px 0;
357
  }
358
  .menu-card {
@@ -370,7 +397,7 @@
370
  font-size: 0.9rem;
371
  }
372
  .bottom-action-bar {
373
- padding: 10px 15px;
374
  }
375
  .bottom-action-bar .btn {
376
  padding: 10px 12px;
@@ -379,13 +406,8 @@
379
  .cart-icon-badge {
380
  width: 20px;
381
  height: 20px;
382
- font-size: 12px;
383
- }
384
- .image-preview {
385
- width: 150px;
386
- height: 150px;
387
- right: 10px;
388
- top: 80px;
389
  }
390
  }
391
  </style>
@@ -394,7 +416,7 @@
394
  <div class="fixed-top-bar">
395
  <div class="back-arrow-container">
396
  <a href="{{ url_for('menu.menu') }}" class="back-arrow" aria-label="Back to Menu">
397
- <i class="fas fa-arrow-left"></i>
398
  </a>
399
  </div>
400
  <div class="avatar-dropdown-container">
@@ -402,26 +424,27 @@
402
  <span>{{ first_letter }}</span>
403
  </div>
404
  <div class="dropdown-menu">
405
- <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item"><i class="fas fa-user"></i> View Profile</a>
406
- <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item"><i class="fas fa-history"></i> Order History</a>
407
- <a href="{{ url_for('combined_summary.combined_summary') }}" class="dropdown-item"><i class="fas fa-file-alt"></i> MY Summary</a>
408
- <a href="{{ url_for('logout') }}" class="dropdown-item"><i class="fas fa-sign-out-alt"></i> Logout</a>
409
  </div>
410
  </div>
411
  <div class="search-bar-container">
412
- <input type="text" id="searchBar" class="form-control" placeholder="Search items (e.g., type 'c' for items starting with 'c')..." autocomplete="off">
413
- <i class="fas fa-search search-icon"></i>
414
- <i class="fas fa-microphone mic-icon" id="micIcon"></i>
 
415
  </div>
416
  </div>
417
 
418
- <div class="container mt-4">
419
  <h1 class="menu-heading">Search Menu Items</h1>
420
  <div class="row" id="menuItems">
421
  {% for section, items in ordered_menu.items() %}
422
  {% for item in items %}
423
- <div class="col-md-6 mb-4 menu-item" data-name="{{ item.Name | default('Unnamed Item') }}" data-section="{{ item.Section__c | default(section) }}" data-image="{{ item.Image1__c | default('/static/placeholder.jpg') }}">
424
- <div class="card menu-card" onclick="selectItem('{{ item.Name | default('Unnamed Item') }}', '{{ item.Section__c | default(section) }}', '{{ item.Image1__c | default('/static/placeholder.jpg') }}')">
425
  <div class="card-img-container">
426
  <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">
427
  <h5 class="card-title">{{ item.Name | default('Unnamed Item') }}</h5>
@@ -439,21 +462,17 @@
439
  </div>
440
  </div>
441
 
442
- <div class="image-preview" id="imagePreview">
443
- <img src="/static/placeholder.jpg" alt="Item Preview" id="previewImage">
444
- </div>
445
-
446
  <div class="bottom-action-bar">
447
  <a href="{{ url_for('orderhistory.order_history') }}" class="btn btn-order-history">
448
- <i class="fas fa-history"></i> Order History
449
  </a>
450
  <a href="{{ url_for('cart.cart') }}" class="btn btn-view-cart">
451
- <i class="fas fa-shopping-cart"></i> View Cart
452
  <span id="cart-item-count" class="cart-icon-badge" style="display: none;">0</span>
453
  </a>
454
  </div>
455
 
456
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
457
  <script>
458
  const menuItems = [
459
  {% for section, items in ordered_menu.items() %}
@@ -487,15 +506,9 @@
487
  return JSON.parse(localStorage.getItem('cart')) || [];
488
  }
489
 
490
- function selectItem(itemName, section, image) {
491
- localStorage.setItem('selectedItem', JSON.stringify({ name: itemName, section: section, image: image }));
492
- const imagePreview = document.getElementById('imagePreview');
493
- const previewImage = document.getElementById('previewImage');
494
- previewImage.src = image;
495
- imagePreview.style.display = 'block';
496
- setTimeout(() => {
497
- window.location.href = '/menu';
498
- }, 500);
499
  }
500
 
501
  function filterMenuItems(query) {
@@ -506,7 +519,7 @@
506
  menuItemElements.forEach(item => {
507
  const name = item.getAttribute('data-name').toLowerCase();
508
  const section = item.getAttribute('data-section').toLowerCase();
509
- const matches = query ? name.startsWith(query.toLowerCase()) || section.startsWith(query.toLowerCase()) : true;
510
  item.style.display = matches ? '' : 'none';
511
  if (matches) hasResults = true;
512
  });
@@ -514,6 +527,41 @@
514
  noResults.style.display = hasResults ? 'none' : 'block';
515
  }
516
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
517
  document.addEventListener('DOMContentLoaded', function () {
518
  // Avatar Dropdown
519
  const avatarContainer = document.querySelector('.avatar-dropdown-container');
@@ -536,6 +584,7 @@
536
 
537
  // Search Bar Functionality
538
  const searchBar = document.getElementById('searchBar');
 
539
  const searchQuery = localStorage.getItem('searchQuery');
540
  if (searchQuery) {
541
  searchBar.value = searchQuery;
@@ -544,6 +593,12 @@
544
  }
545
  searchBar.addEventListener('input', function () {
546
  filterMenuItems(this.value);
 
 
 
 
 
 
547
  });
548
 
549
  // Voice Recognition
@@ -557,6 +612,7 @@
557
  const query = event.results[0][0].transcript.trim();
558
  searchBar.value = query;
559
  filterMenuItems(query);
 
560
  };
561
  recognition.onend = () => micIcon.classList.remove('active');
562
  recognition.onerror = (event) => {
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Search Menu</title>
7
  <!-- Bootstrap CSS -->
8
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
9
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
 
10
  <!-- Preload Placeholder Image -->
11
  <link rel="preload" href="/static/placeholder.jpg" as="image">
12
  <style>
13
  body {
14
+ font-family: 'Segoe UI', Arial, sans-serif;
15
+ background-color: #f5f5f5;
16
  margin: 0;
17
  padding: 0;
18
  display: flex;
19
  flex-direction: column;
 
20
  padding-bottom: 80px;
21
  }
22
  .container {
 
29
  text-align: center;
30
  padding: 20px;
31
  margin: 30px 0;
32
+ background: linear-gradient(45deg, #FF6F00, #007BFF);
33
+ border-radius: 12px;
34
+ box-shadow: 0 6px 12px rgba(0,0,0,0.3);
35
  width: 100%;
36
  max-width: 1000px;
37
  margin-left: auto;
 
45
  margin: auto;
46
  display: flex;
47
  flex-direction: column;
48
+ box-shadow: 0 6px 12px rgba(0,0,0,0.15);
49
  cursor: pointer;
50
  transition: transform 0.3s ease, box-shadow 0.3s ease;
51
  }
52
  .menu-card:hover {
53
+ transform: translateY(-5px);
54
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
55
  }
56
  .card-img-container {
57
  position: relative;
 
75
  color: #fff;
76
  text-align: center;
77
  padding: 8px 12px;
78
+ background-color: rgba(26, 26, 26, 0.7);
79
  border-radius: 8px;
80
  width: 90%;
81
  white-space: nowrap;
 
89
  }
90
  .menu-card .card-body .card-text.section {
91
  font-size: 1rem;
92
+ color: #6c757d;
93
  margin-bottom: 10px;
94
  }
95
  .avatar-dropdown-container {
 
97
  right: 15px;
98
  top: 50%;
99
  transform: translateY(-50%);
 
 
100
  }
101
  .avatar-icon {
102
+ width: 45px;
103
+ height: 45px;
104
  border-radius: 50%;
105
+ background: linear-gradient(45deg, #FF6F00, #007BFF);
106
  cursor: pointer;
107
  display: flex;
108
  align-items: center;
109
  justify-content: center;
110
+ color: white;
111
+ font-size: 22px;
112
  font-weight: bold;
113
+ box-shadow: 0 2px 6px rgba(0,0,0,0.2);
114
  transition: transform 0.3s ease;
115
  }
116
  .avatar-icon:hover {
 
120
  position: absolute;
121
  right: 0;
122
  top: 100%;
123
+ background-color: #1A1A1A;
124
  border-radius: 10px;
125
  width: 250px;
126
+ box-shadow: 0 6px 12px rgba(0,0,0,0.3);
127
  display: none;
128
+ border: 1px solid #FF6F00;
129
  z-index: 1000;
130
  }
131
  .dropdown-menu .dropdown-item {
132
  padding: 15px 20px;
133
  text-decoration: none;
134
  color: #fff;
135
+ border-bottom: 1px solid #333;
136
  display: flex;
137
  align-items: center;
138
  font-size: 16px;
139
  transition: background-color 0.3s ease;
140
  }
141
+ .dropdown-menu .dropdown-item:last-child {
142
+ border-bottom: none;
 
143
  }
144
  .dropdown-menu .dropdown-item:hover {
145
  background-color: #FF6F00;
146
  color: #fff;
147
  }
148
+ .dropdown-menu .dropdown-item i {
149
+ margin-right: 10px;
150
+ font-size: 18px;
151
+ }
152
  .fixed-top-bar {
153
  position: fixed;
154
  top: 0;
155
  left: 0;
156
  width: 100%;
157
+ height: 60px;
158
+ background: linear-gradient(45deg, #1A1A1A, #007BFF);
159
+ color: white;
160
  padding: 15px;
161
  display: flex;
162
  justify-content: space-between;
163
  align-items: center;
164
  z-index: 1000;
165
+ box-shadow: 0 2px 6px rgba(0,0,0,0.2);
166
  }
167
  .back-arrow-container {
168
  position: absolute;
 
174
  width: 40px;
175
  height: 40px;
176
  border-radius: 50%;
177
+ background: linear-gradient(45deg, #FF6F00, #007BFF);
178
  display: flex;
179
  align-items: center;
180
  justify-content: center;
181
+ color: white;
182
  font-size: 22px;
183
  cursor: pointer;
184
  transition: transform 0.3s ease, background-color 0.3s ease;
185
  text-decoration: none;
186
+ box-shadow: 0 2px 6px rgba(0,0,0,0.2);
187
  }
188
  .back-arrow:hover {
189
+ background: linear-gradient(45deg, #E65C00, #005CBF);
190
  transform: scale(1.1);
191
  }
192
+ .back-arrow:active {
193
+ transform: scale(0.95);
194
+ }
195
  .search-bar-container {
196
+ position: relative;
197
  left: 70px;
198
  top: 50%;
199
  transform: translateY(-50%);
 
 
200
  width: 350px;
201
  max-width: calc(90% - 70px);
202
  }
 
204
  width: 100%;
205
  padding: 10px 50px 10px 50px;
206
  font-size: 16px;
207
+ border-radius: 25px;
208
  border: none;
209
  background-color: #fff;
210
+ box-shadow: 0 3px 6px rgba(0,0,0,0.1);
211
  outline: none;
212
  transition: box-shadow 0.3s ease;
213
  }
214
  .search-bar-container input:focus {
215
+ box-shadow: 0 0 8px rgba(0,123,255,0.5);
216
  }
217
  .search-bar-container input::placeholder {
218
  color: #888;
219
  }
220
  .search-icon {
221
  position: absolute;
222
+ left: 15px;
223
+ top: 50%;
224
+ transform: translateY(-50%);
225
  font-size: 20px;
226
+ color: #888;
227
  }
228
  .mic-icon {
229
  position: absolute;
230
+ right: 15px;
231
+ top: 50%;
232
+ transform: translateY(-50%);
233
  font-size: 20px;
234
+ color: #888;
235
  cursor: pointer;
236
  transition: color 0.3s ease;
237
  }
238
  .mic-icon.active {
239
  color: #FF6F00;
240
  }
241
+ .autocomplete-popup {
242
+ position: absolute;
243
+ top: 100%;
244
+ left: 0;
245
+ right: 0;
246
+ background-color: #fff;
247
+ border-radius: 10px;
248
+ box-shadow: 0 6px 12px rgba(0,0,0,0.2);
249
+ max-height: 300px;
250
+ overflow-y: auto;
251
+ z-index: 1000;
252
+ display: none;
253
+ }
254
+ .autocomplete-item {
255
+ display: flex;
256
+ align-items: center;
257
+ padding: 10px 15px;
258
+ border-bottom: 1px solid #eee;
259
+ cursor: pointer;
260
+ transition: background-color 0.3s ease;
261
+ }
262
+ .autocomplete-item:hover {
263
+ background-color: #f1f1f1;
264
+ }
265
+ .autocomplete-item img {
266
+ width: 50px;
267
+ height: 50px;
268
+ object-fit: cover;
269
+ border-radius: 5px;
270
+ margin-right: 15px;
271
+ }
272
+ .autocomplete-item span {
273
+ font-size: 16px;
274
+ color: #333;
275
+ }
276
  .bottom-action-bar {
277
  position: fixed;
278
  bottom: 0;
279
  left: 0;
280
  right: 0;
281
+ background-color: #1A1A1A;
282
+ padding: 12px 20px;
283
  display: flex;
284
  justify-content: space-between;
285
  align-items: center;
286
+ box-shadow: 0 -3px 10px rgba(0,0,0,0.2);
287
  z-index: 1000;
288
  max-width: 1000px;
289
  margin: 0 auto;
290
  }
291
  .bottom-action-bar .btn {
292
  flex: 1;
293
+ margin: 0 8px;
294
  padding: 12px 20px;
295
  border-radius: 10px;
296
+ font-weight: bold;
297
  font-size: 16px;
298
+ color: white;
299
  display: flex;
300
  align-items: center;
301
  justify-content: center;
 
303
  transition: background-color 0.3s ease;
304
  }
305
  .bottom-action-bar .btn-order-history {
306
+ background: linear-gradient(45deg, #FF6F00, #E65C00);
307
  }
308
  .bottom-action-bar .btn-order-history:hover {
309
+ background: linear-gradient(45deg, #E65C00, #CC5200);
310
  }
311
  .bottom-action-bar .btn-view-cart {
312
+ background: linear-gradient(45deg, #007BFF, #005CBF);
313
  }
314
  .bottom-action-bar .btn-view-cart:hover {
315
+ background: linear-gradient(45deg, #005CBF, #004799);
316
  }
317
  .cart-icon-badge {
318
+ background-color: #fff;
319
+ color: #007BFF;
320
  border-radius: 50%;
321
+ width: 22px;
322
+ height: 22px;
323
  display: inline-flex;
324
  align-items: center;
325
  justify-content: center;
326
+ font-size: 12px;
327
  margin-left: 10px;
328
  }
329
  .no-results {
330
  text-align: center;
331
+ font-size: 1.3rem;
332
+ color: #6c757d;
333
  margin-top: 30px;
334
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
335
  @media (max-width: 576px) {
336
  .fixed-top-bar {
337
+ height: 65px;
338
  padding: 10px;
339
  }
340
  .back-arrow-container {
 
347
  }
348
  .search-bar-container {
349
  width: calc(80% - 60px);
350
+ max-width: calc(100% - 60px);
351
  left: 60px;
352
  }
353
  .search-bar-container input {
354
+ padding: 8px 45px 8px 45px;
355
  font-size: 14px;
356
+ border-radius: 20px;
357
  }
358
  .search-icon {
359
+ left: 12px;
360
  font-size: 18px;
361
  }
362
  .mic-icon {
363
+ right: 12px;
364
  font-size: 18px;
365
  }
366
+ .autocomplete-popup {
367
+ width: 100%;
368
+ }
369
  .avatar-dropdown-container {
370
  right: 10px;
371
  }
 
379
  }
380
  .menu-heading {
381
  font-size: 1.8rem;
382
+ padding: 12px 15px;
383
  margin: 20px 0;
384
  }
385
  .menu-card {
 
397
  font-size: 0.9rem;
398
  }
399
  .bottom-action-bar {
400
+ padding: 10px 12px;
401
  }
402
  .bottom-action-bar .btn {
403
  padding: 10px 12px;
 
406
  .cart-icon-badge {
407
  width: 20px;
408
  height: 20px;
409
+ font-size: 11px;
410
+ margin-left: 6px;
 
 
 
 
 
411
  }
412
  }
413
  </style>
 
416
  <div class="fixed-top-bar">
417
  <div class="back-arrow-container">
418
  <a href="{{ url_for('menu.menu') }}" class="back-arrow" aria-label="Back to Menu">
419
+ <i class="bi bi-arrow-left"></i>
420
  </a>
421
  </div>
422
  <div class="avatar-dropdown-container">
 
424
  <span>{{ first_letter }}</span>
425
  </div>
426
  <div class="dropdown-menu">
427
+ <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item"><i class="bi bi-person"></i> View Profile</a>
428
+ <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item"><i class="bi bi-clock-history"></i> Order History</a>
429
+ <a href="{{ url_for('combined_summary.combined_summary') }}" class="dropdown-item"><i class="bi bi-file-earmark-text"></i> MY Summary</a>
430
+ <a href="{{ url_for('logout') }}" class="dropdown-item"><i class="bi bi-box-arrow-right"></i> Logout</a>
431
  </div>
432
  </div>
433
  <div class="search-bar-container">
434
+ <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
435
+ <i class="bi bi-search search-icon"></i>
436
+ <i class="bi bi-mic mic-icon" id="micIcon"></i>
437
+ <div class="autocomplete-popup" id="autocompletePopup"></div>
438
  </div>
439
  </div>
440
 
441
+ <div class="container mt-5">
442
  <h1 class="menu-heading">Search Menu Items</h1>
443
  <div class="row" id="menuItems">
444
  {% for section, items in ordered_menu.items() %}
445
  {% for item in items %}
446
+ <div class="col-md-6 mb-4 menu-item" data-name="{{ item.Name | default('Unnamed Item') }}" data-section="{{ item.Section__c | default(section) }}">
447
+ <div class="card menu-card" onclick="selectItem('{{ item.Name | default('Unnamed Item') }}', '{{ item.Section__c | default(section) }}')">
448
  <div class="card-img-container">
449
  <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">
450
  <h5 class="card-title">{{ item.Name | default('Unnamed Item') }}</h5>
 
462
  </div>
463
  </div>
464
 
 
 
 
 
465
  <div class="bottom-action-bar">
466
  <a href="{{ url_for('orderhistory.order_history') }}" class="btn btn-order-history">
467
+ <i class="bi bi-clock-history"></i> Order History
468
  </a>
469
  <a href="{{ url_for('cart.cart') }}" class="btn btn-view-cart">
470
+ <i class="bi bi-cart"></i> View Cart
471
  <span id="cart-item-count" class="cart-icon-badge" style="display: none;">0</span>
472
  </a>
473
  </div>
474
 
475
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]-alpha1/dist/js/bootstrap.bundle.min.js"></script>
476
  <script>
477
  const menuItems = [
478
  {% for section, items in ordered_menu.items() %}
 
506
  return JSON.parse(localStorage.getItem('cart')) || [];
507
  }
508
 
509
+ function selectItem(itemName, section) {
510
+ localStorage.setItem('selectedItem', JSON.stringify({ name: itemName, section: section }));
511
+ window.location.href = '/menu';
 
 
 
 
 
 
512
  }
513
 
514
  function filterMenuItems(query) {
 
519
  menuItemElements.forEach(item => {
520
  const name = item.getAttribute('data-name').toLowerCase();
521
  const section = item.getAttribute('data-section').toLowerCase();
522
+ const matches = name.includes(query.toLowerCase()) || section.includes(query.toLowerCase());
523
  item.style.display = matches ? '' : 'none';
524
  if (matches) hasResults = true;
525
  });
 
527
  noResults.style.display = hasResults ? 'none' : 'block';
528
  }
529
 
530
+ function showAutocomplete(query) {
531
+ const autocompletePopup = document.getElementById('autocompletePopup');
532
+ autocompletePopup.innerHTML = '';
533
+ if (!query) {
534
+ autocompletePopup.style.display = 'none';
535
+ return;
536
+ }
537
+
538
+ const filteredItems = menuItems.filter(item =>
539
+ item.name.toLowerCase().startsWith(query.toLowerCase())
540
+ );
541
+
542
+ if (filteredItems.length === 0) {
543
+ autocompletePopup.style.display = 'none';
544
+ return;
545
+ }
546
+
547
+ filteredItems.forEach(item => {
548
+ const div = document.createElement('div');
549
+ div.className = 'autocomplete-item';
550
+ div.innerHTML = `
551
+ <img src="${item.image}" alt="${item.name}">
552
+ <span>${item.name}</span>
553
+ `;
554
+ div.addEventListener('click', () => {
555
+ document.getElementById('searchBar').value = item.name;
556
+ filterMenuItems(item.name);
557
+ autocompletePopup.style.display = 'none';
558
+ });
559
+ autocompletePopup.appendChild(div);
560
+ });
561
+
562
+ autocompletePopup.style.display = 'block';
563
+ }
564
+
565
  document.addEventListener('DOMContentLoaded', function () {
566
  // Avatar Dropdown
567
  const avatarContainer = document.querySelector('.avatar-dropdown-container');
 
584
 
585
  // Search Bar Functionality
586
  const searchBar = document.getElementById('searchBar');
587
+ const autocompletePopup = document.getElementById('autocompletePopup');
588
  const searchQuery = localStorage.getItem('searchQuery');
589
  if (searchQuery) {
590
  searchBar.value = searchQuery;
 
593
  }
594
  searchBar.addEventListener('input', function () {
595
  filterMenuItems(this.value);
596
+ showAutocomplete(this.value);
597
+ });
598
+ document.addEventListener('click', function (event) {
599
+ if (!searchBar.contains(event.target) && !autocompletePopup.contains(event.target)) {
600
+ autocompletePopup.style.display = 'none';
601
+ }
602
  });
603
 
604
  // Voice Recognition
 
612
  const query = event.results[0][0].transcript.trim();
613
  searchBar.value = query;
614
  filterMenuItems(query);
615
+ showAutocomplete(query);
616
  };
617
  recognition.onend = () => micIcon.classList.remove('active');
618
  recognition.onerror = (event) => {