Hugging Face's logo

Spaces:
Subbu1304
/
subbuok
Sleeping

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

Update templates/search.html

Browse files
Files changed (1) hide show
  1. templates/search.html +194 -173
templates/search.html CHANGED
@@ -3,76 +3,82 @@
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: Arial, sans-serif;
15
- background-color: #fdf4e3;
16
  margin: 0;
17
  padding: 0;
18
  display: flex;
19
  flex-direction: column;
20
- padding-bottom: 70px;
 
21
  }
22
  .container {
23
- max-width: 900px;
24
  }
25
  .menu-heading {
26
- font-size: 2rem;
27
  font-weight: 700;
28
  color: #fff;
29
  text-align: center;
30
- padding: 15px 20px;
31
- margin: 20px 0;
32
- background: linear-gradient(45deg, #FFA07A, #FFB347);
33
- border-radius: 10px;
34
- box-shadow: 0 4px 8px rgba(0,0,0,0.2);
35
  width: 100%;
36
- max-width: 900px;
37
  margin-left: auto;
38
  margin-right: auto;
39
  }
40
  .menu-card {
41
- max-width: 350px;
42
- border-radius: 15px;
43
  overflow: hidden;
44
  background-color: #fff;
45
  margin: auto;
46
  display: flex;
47
  flex-direction: column;
48
- box-shadow: 0 4px 8px rgba(0,0,0,0.1);
49
  cursor: pointer;
 
 
 
 
 
50
  }
51
  .card-img-container {
52
  position: relative;
53
  width: 100%;
54
- height: 200px;
55
  }
56
  .card-img {
57
  height: 100%;
58
  width: 100%;
59
  object-fit: cover;
60
- border-radius: 15px 15px 0 0;
61
- display: block; /* Prevents gaps or flashes */
62
  }
63
  .card-title {
64
  position: absolute;
65
- top: 10px;
66
  left: 50%;
67
  transform: translateX(-50%);
68
- font-size: 1.2rem;
69
  font-weight: 600;
70
  color: #fff;
71
  text-align: center;
72
- margin: 0;
73
- padding: 5px 10px;
74
- background-color: rgba(0, 0, 0, 0.5);
75
- border-radius: 5px;
76
  width: 90%;
77
  white-space: nowrap;
78
  overflow: hidden;
@@ -80,216 +86,228 @@
80
  z-index: 1;
81
  }
82
  .menu-card .card-body {
83
- padding: 10px;
84
  text-align: center;
85
  }
86
  .menu-card .card-body .card-text.section {
87
- font-size: 0.9rem;
88
- color: #6c757d;
89
- text-align: center;
90
  margin-bottom: 10px;
91
  }
92
  .avatar-dropdown-container {
93
  position: absolute;
94
- right: 10px;
95
  top: 50%;
96
  transform: translateY(-50%);
97
  display: flex;
98
  align-items: center;
99
- justify-content: center;
100
  }
101
  .avatar-icon {
102
- width: 40px;
103
- height: 40px;
104
  border-radius: 50%;
105
- background-color: #007bff;
106
  cursor: pointer;
107
  display: flex;
108
  align-items: center;
109
  justify-content: center;
110
- color: white;
111
- font-size: 20px;
112
  font-weight: bold;
 
 
 
 
 
113
  }
114
  .dropdown-menu {
115
  position: absolute;
116
  right: 0;
117
  top: 100%;
118
- background-color: #fff8f0;
119
- border-radius: 5px;
120
- width: 220px;
121
- box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
122
  display: none;
123
- border: 1px solid #ffd8b1;
 
124
  }
125
  .dropdown-menu .dropdown-item {
126
- padding: 12px 16px;
127
  text-decoration: none;
128
- color: #333;
129
- border-bottom: 1px solid #ffd8b1;
130
- display: block;
131
- font-size: 15px;
132
- transition: background-color 0.2s ease;
133
  }
134
- .dropdown-menu .dropdown-item:last-child {
135
- border-bottom: none;
 
136
  }
137
  .dropdown-menu .dropdown-item:hover {
138
- background-color: #ffe4c4;
139
- color: #333;
140
  }
141
  .fixed-top-bar {
142
- position: relative;
143
  top: 0;
144
  left: 0;
145
  width: 100%;
146
- height: 54px;
147
- background: linear-gradient(45deg, #FFA07A, #FFB347);
148
- color: white;
149
  padding: 15px;
150
  display: flex;
151
  justify-content: space-between;
152
  align-items: center;
153
  z-index: 1000;
 
154
  }
155
  .back-arrow-container {
156
  position: absolute;
157
- left: 10px;
158
  top: 50%;
159
  transform: translateY(-50%);
160
- display: flex;
161
- align-items: center;
162
- justify-content: center;
163
  }
164
  .back-arrow {
165
- width: 36px;
166
- height: 36px;
167
  border-radius: 50%;
168
- background: linear-gradient(45deg, #FFA07A, #FFB347);
169
  display: flex;
170
  align-items: center;
171
  justify-content: center;
172
- color: white;
173
- font-size: 20px;
174
  cursor: pointer;
175
- transition: transform 0.2s ease, background-color 0.2s ease;
176
  text-decoration: none;
177
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
178
  }
179
  .back-arrow:hover {
180
- background: linear-gradient(45deg, #FF8C61, #FF9E2C);
181
  transform: scale(1.1);
182
  }
183
- .back-arrow:active {
184
- transform: scale(0.95);
185
- }
186
  .search-bar-container {
187
  position: absolute;
188
- left: 60px;
189
  top: 50%;
190
  transform: translateY(-50%);
191
  display: flex;
192
  align-items: center;
193
- width: 300px;
194
- max-width: calc(90% - 60px);
195
  }
196
  .search-bar-container input {
197
  width: 100%;
198
- padding: 8px 40px 8px 40px;
199
  font-size: 16px;
200
- border-radius: 25px;
201
  border: none;
202
  background-color: #fff;
203
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
204
  outline: none;
205
- transition: border-bottom 0.3s ease;
206
  }
207
  .search-bar-container input:focus {
208
- border-bottom: 2px solid #FFA07A;
209
  }
210
  .search-bar-container input::placeholder {
211
  color: #888;
212
  }
213
  .search-icon {
214
  position: absolute;
215
- left: 15px;
216
- font-size: 18px;
217
- color: #888;
218
  }
219
  .mic-icon {
220
  position: absolute;
221
- right: 15px;
222
- font-size: 18px;
223
- color: #888;
224
  cursor: pointer;
225
  transition: color 0.3s ease;
226
  }
227
  .mic-icon.active {
228
- color: #007bff;
229
  }
230
  .bottom-action-bar {
231
  position: fixed;
232
  bottom: 0;
233
  left: 0;
234
  right: 0;
235
- background-color: white;
236
- padding: 10px 20px;
237
  display: flex;
238
  justify-content: space-between;
239
  align-items: center;
240
- box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
241
  z-index: 1000;
242
- max-width: 900px;
243
  margin: 0 auto;
244
  }
245
  .bottom-action-bar .btn {
246
  flex: 1;
247
- margin: 0 5px;
248
- padding: 10px 15px;
249
- border-radius: 8px;
250
- font-weight: bold;
251
  font-size: 16px;
252
- color: white;
253
  display: flex;
254
  align-items: center;
255
  justify-content: center;
256
  text-align: center;
257
- min-width: 0;
258
- white-space: nowrap;
259
  }
260
  .bottom-action-bar .btn-order-history {
261
- background-color: #FFA07A;
262
- border-color: #FFA07A;
263
  }
264
  .bottom-action-bar .btn-order-history:hover {
265
- background-color: #FF8C61;
266
- border-color: #FF8C61;
267
  }
268
  .bottom-action-bar .btn-view-cart {
269
- background-color: #0FAA39;
270
- border-color: #0FAA39;
271
  }
272
  .bottom-action-bar .btn-view-cart:hover {
273
- background-color: #0D9232;
274
- border-color: #0D9232;
275
  }
276
  .cart-icon-badge {
277
- background-color: white;
278
- color: #0FAA39;
279
  border-radius: 50%;
280
- width: 20px;
281
- height: 20px;
282
  display: inline-flex;
283
  align-items: center;
284
  justify-content: center;
285
- font-size: 12px;
286
- margin-left: 8px;
287
  }
288
  .no-results {
289
  text-align: center;
290
- font-size: 1.2rem;
291
- color: #6c757d;
292
- margin-top: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
293
  }
294
  @media (max-width: 576px) {
295
  .fixed-top-bar {
@@ -297,30 +315,29 @@
297
  padding: 10px;
298
  }
299
  .back-arrow-container {
300
- left: 8px;
301
  }
302
  .back-arrow {
303
- width: 32px;
304
- height: 32px;
305
- font-size: 18px;
306
  }
307
  .search-bar-container {
308
- width: calc(80% - 50px);
309
- max-width: calc(100% - 50px);
310
- left: 50px;
311
  }
312
  .search-bar-container input {
313
- padding: 6px 35px 6px 35px;
314
  font-size: 14px;
315
- border-radius: 20px;
316
  }
317
  .search-icon {
318
- left: 12px;
319
- font-size: 16px;
320
  }
321
  .mic-icon {
322
- right: 12px;
323
- font-size: 16px;
324
  }
325
  .avatar-dropdown-container {
326
  right: 10px;
@@ -333,41 +350,42 @@
333
  .dropdown-menu {
334
  width: 220px;
335
  }
336
- .dropdown-menu .dropdown-item {
337
- padding: 12px 16px;
338
- font-size: 15px;
339
- }
340
  .menu-heading {
341
- font-size: 1.5rem;
342
- padding: 10px 15px;
343
- margin: 15px 0;
344
  }
345
  .menu-card {
346
  max-width: 100%;
347
  }
348
  .card-img-container {
349
- height: 150px;
350
  }
351
  .card-title {
352
- font-size: 1rem;
353
- top: 8px;
354
- padding: 4px 8px;
355
  }
356
  .menu-card .card-body .card-text.section {
357
- font-size: 0.8rem;
358
  }
359
  .bottom-action-bar {
360
- padding: 8px 10px;
361
  }
362
  .bottom-action-bar .btn {
363
- padding: 8px 10px;
364
  font-size: 14px;
365
  }
366
  .cart-icon-badge {
367
- width: 18px;
368
- height: 18px;
369
- font-size: 10px;
370
- margin-left: 5px;
 
 
 
 
 
371
  }
372
  }
373
  </style>
@@ -376,7 +394,7 @@
376
  <div class="fixed-top-bar">
377
  <div class="back-arrow-container">
378
  <a href="{{ url_for('menu.menu') }}" class="back-arrow" aria-label="Back to Menu">
379
- <i class="bi bi-arrow-left"></i>
380
  </a>
381
  </div>
382
  <div class="avatar-dropdown-container">
@@ -384,16 +402,16 @@
384
  <span>{{ first_letter }}</span>
385
  </div>
386
  <div class="dropdown-menu">
387
- <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item">View Profile</a>
388
- <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item">Order History</a>
389
- <a href="{{ url_for('combined_summary.combined_summary') }}" class="dropdown-item">MY Summary</a>
390
- <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
391
  </div>
392
  </div>
393
  <div class="search-bar-container">
394
- <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
395
- <i class="bi bi-search search-icon"></i>
396
- <i class="bi bi-mic mic-icon" id="micIcon"></i>
397
  </div>
398
  </div>
399
 
@@ -402,10 +420,10 @@
402
  <div class="row" id="menuItems">
403
  {% for section, items in ordered_menu.items() %}
404
  {% for item in items %}
405
- <div class="col-md-6 mb-4 menu-item" data-name="{{ item.Name | default('Unnamed Item') }}" data-section="{{ item.Section__c | default(section) }}">
406
- <div class="card menu-card" onclick="selectItem('{{ item.Name | default('Unnamed Item') }}', '{{ item.Section__c | default(section) }}')">
407
  <div class="card-img-container">
408
- <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">
409
  <h5 class="card-title">{{ item.Name | default('Unnamed Item') }}</h5>
410
  </div>
411
  <div class="card-body">
@@ -421,24 +439,29 @@
421
  </div>
422
  </div>
423
 
 
 
 
 
424
  <div class="bottom-action-bar">
425
  <a href="{{ url_for('orderhistory.order_history') }}" class="btn btn-order-history">
426
- <i class="bi bi-clock-history"></i> Order History
427
  </a>
428
  <a href="{{ url_for('cart.cart') }}" class="btn btn-view-cart">
429
- <i class="bi bi-cart"></i> View Cart
430
  <span id="cart-item-count" class="cart-icon-badge" style="display: none;">0</span>
431
  </a>
432
  </div>
433
 
434
- <script src="https://cdn.jsdelivr.net/npm/[email protected]-alpha1/dist/js/bootstrap.bundle.min.js"></script>
435
  <script>
436
  const menuItems = [
437
  {% for section, items in ordered_menu.items() %}
438
  {% for item in items %}
439
  {
440
  name: "{{ item.Name | default('Unnamed Item') }}",
441
- section: "{{ item.Section__c | default(section) }}"
 
442
  },
443
  {% endfor %}
444
  {% endfor %}
@@ -464,9 +487,15 @@
464
  return JSON.parse(localStorage.getItem('cart')) || [];
465
  }
466
 
467
- function selectItem(itemName, section) {
468
- localStorage.setItem('selectedItem', JSON.stringify({ name: itemName, section: section }));
469
- window.location.href = '/menu';
 
 
 
 
 
 
470
  }
471
 
472
  function filterMenuItems(query) {
@@ -477,7 +506,7 @@
477
  menuItemElements.forEach(item => {
478
  const name = item.getAttribute('data-name').toLowerCase();
479
  const section = item.getAttribute('data-section').toLowerCase();
480
- const matches = name.includes(query.toLowerCase()) || section.includes(query.toLowerCase());
481
  item.style.display = matches ? '' : 'none';
482
  if (matches) hasResults = true;
483
  });
@@ -566,12 +595,4 @@
566
  });
567
  </script>
568
  </body>
569
- </html>
570
-
571
-
572
-
573
-
574
-
575
-
576
-
577
-
 
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 {
25
+ max-width: 1000px;
26
  }
27
  .menu-heading {
28
+ font-size: 2.5rem;
29
  font-weight: 700;
30
  color: #fff;
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;
40
  margin-right: auto;
41
  }
42
  .menu-card {
43
+ max-width: 400px;
44
+ border-radius: 20px;
45
  overflow: hidden;
46
  background-color: #fff;
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;
60
  width: 100%;
61
+ height: 220px;
62
  }
63
  .card-img {
64
  height: 100%;
65
  width: 100%;
66
  object-fit: cover;
67
+ border-radius: 20px 20px 0 0;
68
+ display: block;
69
  }
70
  .card-title {
71
  position: absolute;
72
+ top: 15px;
73
  left: 50%;
74
  transform: translateX(-50%);
75
+ font-size: 1.3rem;
76
  font-weight: 600;
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;
84
  overflow: hidden;
 
86
  z-index: 1;
87
  }
88
  .menu-card .card-body {
89
+ padding: 15px;
90
  text-align: center;
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 {
98
  position: absolute;
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 {
121
+ transform: scale(1.1);
122
  }
123
  .dropdown-menu {
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;
169
+ left: 15px;
170
  top: 50%;
171
  transform: translateY(-50%);
 
 
 
172
  }
173
  .back-arrow {
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
  }
202
  .search-bar-container input {
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;
262
  text-align: center;
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 {
 
315
  padding: 10px;
316
  }
317
  .back-arrow-container {
318
+ left: 10px;
319
  }
320
  .back-arrow {
321
+ width: 36px;
322
+ height: 36px;
323
+ font-size: 20px;
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;
 
350
  .dropdown-menu {
351
  width: 220px;
352
  }
 
 
 
 
353
  .menu-heading {
354
+ font-size: 1.8rem;
355
+ padding: 15px;
356
+ margin: 20px 0;
357
  }
358
  .menu-card {
359
  max-width: 100%;
360
  }
361
  .card-img-container {
362
+ height: 180px;
363
  }
364
  .card-title {
365
+ font-size: 1.1rem;
366
+ top: 10px;
367
+ padding: 6px 10px;
368
  }
369
  .menu-card .card-body .card-text.section {
370
+ font-size: 0.9rem;
371
  }
372
  .bottom-action-bar {
373
+ padding: 10px 15px;
374
  }
375
  .bottom-action-bar .btn {
376
+ padding: 10px 12px;
377
  font-size: 14px;
378
  }
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
  <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
  <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
 
 
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>
428
  </div>
429
  <div class="card-body">
 
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() %}
460
  {% for item in items %}
461
  {
462
  name: "{{ item.Name | default('Unnamed Item') }}",
463
+ section: "{{ item.Section__c | default(section) }}",
464
+ image: "{{ item.Image1__c | default('/static/placeholder.jpg') }}"
465
  },
466
  {% endfor %}
467
  {% endfor %}
 
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
  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
  });
 
595
  });
596
  </script>
597
  </body>
598
+ </html>