Hugging Face's logo

Spaces:
Subbu1304
/
BiryaniHubMenu0304
Build error

App Files Community
Subbu1304 commited on
Commit
90d617e
·
verified ·
1 Parent(s): 83ad76d

Delete templates

Browse files
Files changed (10) hide show
  1. templates/Update_profile.html +0 -72
  2. templates/cart.html +0 -757
  3. templates/customer_details.html +0 -248
  4. templates/index.html +0 -15
  5. templates/login.html +0 -90
  6. templates/menu.html +0 -1062
  7. templates/order.html +0 -210
  8. templates/order_history.html +0 -241
  9. templates/redirect_page.html +0 -25
  10. templates/rewards.html +0 -65
templates/Update_profile.html DELETED
@@ -1,72 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Update Profile</title>
7
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
8
- <style>
9
- .back-to-menu {
10
- display: block;
11
- margin: 30px auto 10px auto;
12
- padding: 10px 20px;
13
- background-color: #ff5722;
14
- color: #ffffff;
15
- border: none;
16
- border-radius: 25px;
17
- font-size: 1rem;
18
- font-weight: bold;
19
- text-align: center;
20
- text-decoration: none;
21
- width: 100%;
22
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
23
- transition: background-color 0.3s ease;
24
- }
25
- .back-to-menu:hover {
26
- background-color: #e64a19;
27
- text-decoration: none;
28
- }
29
- </style>
30
- </head>
31
- <body>
32
- <div class="container mt-4">
33
- <h1>Update Profile</h1>
34
-
35
- <form method="POST">
36
- <div class="mb-3">
37
- <label for="customerName" class="form-label"><strong>Name:</strong></label>
38
- <input type="text" class="form-control" id="customerName" name="customerName" value="{{ customer['name'] }}" readonly>
39
- <button type="button" class="btn btn-outline-secondary mt-2" onclick="enableEditField('customerName')">Change</button>
40
- </div>
41
-
42
- <div class="mb-3">
43
- <label for="email" class="form-label"><strong>Email:</strong></label>
44
- <input type="email" class="form-control" id="email" name="email" value="{{ customer['email'] }}" readonly>
45
- <button type="button" class="btn btn-outline-secondary mt-2" onclick="enableEditField('email')">Change</button>
46
- </div>
47
-
48
- <div class="mb-3">
49
- <label for="phone" class="form-label"><strong>Phone:</strong></label>
50
- <input type="text" class="form-control" id="phone" name="phone" value="{{ customer['phone'] }}" readonly>
51
- <button type="button" class="btn btn-outline-secondary mt-2" onclick="enableEditField('phone')">Change</button>
52
- </div>
53
-
54
- <div class="mb-3">
55
- <label for="referralCode" class="form-label"><strong>Referral Code:</strong></label>
56
- <input type="text" class="form-control" id="referralCode" name="referralCode" value="{{ customer['referral_code'] }}" readonly>
57
- <button type="button" class="btn btn-outline-secondary mt-2" onclick="enableEditField('referralCode')">Change</button>
58
- </div>
59
-
60
- <div class="mb-3">
61
- <label for="rewardPoints" class="form-label"><strong>Reward Points:</strong></label>
62
- <input type="text" class="form-control" id="rewardPoints" name="rewardPoints" value="{{ customer['reward_points'] }}" readonly>
63
- <button type="button" class="btn btn-outline-secondary mt-2" onclick="enableEditField('rewardPoints')">Change</button>
64
- </div>
65
-
66
- <button type="submit" class="btn btn-primary">Update Profile</button>
67
- </form>
68
-
69
- <a href="/menu" class="back-to-menu">Back to Menu</a>
70
- </div>
71
- </body>
72
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/cart.html DELETED
@@ -1,757 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Cart</title>
7
- <!-- Bootstrap CSS -->
8
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
9
- <style>
10
-
11
- body {
12
- font-family: Arial, sans-serif;
13
- background-color: #fdf4e3; /* Updated background color */
14
- color: #333;
15
- }
16
- .cart-container {
17
- max-width: 768px;
18
- margin: 20px auto;
19
- padding: 15px;
20
- background-color: #FFFFFF;
21
- border-radius: 10px;
22
-
23
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
24
- }
25
- .cart-container2 {
26
- background-color:#FFFFFF;
27
- }
28
- /* Green Back Button styling */
29
- .back-button {
30
- position: absolute;
31
- top: 15px;
32
- left: 15px;
33
- display: inline-block;
34
- background-color: green; /* Green color */
35
- color: white;
36
- padding: 10px 20px;
37
- text-decoration: none;
38
- font-weight: bold;
39
- border-radius: 4px;
40
- z-index: 10; /* Ensure it stays above other content */
41
- }
42
- .back-button:hover {
43
- background-color: darkgreen; /* Darker green color on hover */
44
- }
45
- .cart-item {
46
- display: flex;
47
- align-items: flex-start;
48
- justify-content: space-between;
49
- border: 1px solid transparent; /* Set the border to transparent */
50
- padding: 30px 15px 15px;
51
- background-color: #fff;/* Padding for the content */
52
- box-sizing: border-box;
53
- min-height: 100px;
54
- position: relative; /* Make the cart item a reference for the absolute positioning of the remove icon */
55
- border: 1px solid #fdf4e3; /* light Orange border around each item */
56
- border-radius: 8px; /* Rounded corners for items */
57
- }
58
- .remove-btn {
59
- border: none; /* Remove the border around the button */
60
- background-color: transparent; /* Transparent background */
61
- cursor: pointer; /* Change cursor to pointer */
62
- font-size: 1.2rem; /* Slightly decrease the size of the trash icon */
63
- margin-bottom: 10px; /* Add space below the delete icon */
64
- transition: color 0.3s ease; /* Smooth transition for icon color */
65
- position: relative; /* Make it relative for movement */
66
- top: -35px; /* Move the button 10px upwards */
67
- left: 50px; /* Move the button 30px to the right */
68
- }
69
- .remove-btn i {
70
- color: red; /* Make the trash icon red */
71
- }
72
- /* Hover effect */
73
- .remove-btn:hover {
74
- color: black; /* Change the icon color to black on hover */
75
- background-color: transparent; /* Keep background transparent on hover */
76
- }
77
- /* Prevent background color on focus or click */
78
- .remove-btn:focus {
79
- outline: none; /* Remove the outline */
80
- background-color: transparent; /* Keep background transparent after clicking */
81
- }
82
- /* Green Color for Prices */
83
- .text-primary {
84
- color: #2e7d32; /* Green color for the prices */
85
- text-align: right; /* Center-align the price */
86
- font-weight: bold; /* Make the price text bold */
87
- white-space: nowrap; /* Prevent price text from wrapping */
88
- }
89
- /* For the image container */
90
- .image-wrapper {
91
- width: 80px; /* Width of the image container */
92
- height: 80px !important; /* Set the height of the container to match the image */
93
- display: flex; /* Flex container for the image */
94
- align-items: center; /* Center image vertically */
95
- justify-content: center; /* Center image horizontally */
96
- }
97
- /* For the image */
98
- .cart-item img {
99
- width: 70px; /* Set the width to 70px */
100
- height: 70px; /* Set the height to 70px */
101
- object-fit: cover; /* Ensure the image covers the container without stretching */
102
- border-radius: 5px; /* Optional: rounded corners */
103
- border: 1px solid #ffcc80; /* Light orange border around images */
104
- margin: 0; /* Ensure no extra space around the image */
105
- }
106
-
107
- .cart-item img:hover {
108
- transform: scale(1.05);
109
- }
110
- .cart-item-title {
111
- font-size: 1.1rem;
112
- font-weight: bold; /* Make the title text bold */
113
- }
114
-
115
- .checkout-button {
116
- background-color: #ff5722; /* Full Orange color */
117
- color: #ffffff; /* White text */
118
- padding: 12px;
119
- border-radius: 8px;
120
- border: none;
121
- width: 100%;
122
- font-size: 1.2rem;
123
- cursor: pointer;
124
- transition: background-color 0.3s, color 0.3s;
125
- }
126
- .checkout-button:hover {
127
- background-color: #ff5722; /* Full Orange color on hover */
128
- color: #ffffff; /* White text on hover */
129
- }
130
- .add-back-button {
131
- padding: 6px 20px;
132
- font-size: 0.9rem;
133
- border-radius: 20px;
134
- border: 1px solid #fff;
135
- background-color: #fff;
136
- color: #0FAA39;
137
- cursor: pointer;
138
- transition: background-color 0.3s, color 0.3s;
139
- }
140
- .add-back-button:hover {
141
- background-color: #fff;
142
- color: #0FAA39;
143
- }
144
-
145
- .cart-item-details {
146
- flex: 1;
147
- margin-left: 15px;
148
- }
149
-
150
- .cart-item-quantity {
151
- display: flex;
152
- align-items: center;
153
- margin-top: 5px;
154
- }
155
- .cart-item-quantity button {
156
- width: 24px;
157
- height: 24px;
158
- border: none;
159
- background-color: #f0f0f0;
160
- font-size: 0.8rem;
161
- font-weight: bold;
162
- cursor: pointer;
163
- }
164
- .cart-item-quantity input {
165
- width: 40px;
166
- text-align: center;
167
- border: none;
168
- background-color: #f8f9fa;
169
- font-size: 1rem;
170
- margin: 0 5px;
171
- }
172
- /* Make the parent container position relative */
173
- .cart-summary {
174
- position: relative; /* Make sure dropdown is positioned relative to this container */
175
- text-align: left;
176
- margin-top: 15px;
177
- padding: 20px;
178
- background-color: #fff;
179
- border-radius: 12px;
180
- border: 2px solid #fdf4e3; /* light Orange border around the cart summary */
181
- box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
182
- }
183
- .cart-item-instructions {
184
- word-wrap: break-word; /* Ensure that long instructions text wraps to the next line */
185
- white-space: normal; /* Allow text to wrap and prevent overflow */
186
- overflow: hidden; /* Hide any overflow text */
187
- max-width: 100%; /* Ensure instructions text stays within the container's width */
188
- word-break: break-word; /* Break the word when necessary */
189
-
190
- }
191
- /* Coupon Section styling */
192
- .coupon-selection {
193
- display: flex; /* Use flexbox to align items */
194
- justify-content: space-between; /* Space between the label and the link */
195
- align-items: center;
196
- font-size: 1rem;
197
- margin-bottom: 20px; /* Add space below Apply Coupon section */
198
- position: relative; /* Ensure dropdown is within this container */
199
- }
200
- /* Ensure the Apply Coupon label and link are aligned correctly */
201
- .coupon-selection label {
202
- font-weight: bold;
203
- color: black;
204
- }
205
- .coupon-selection a {
206
- color: #007bff; /* Blue for the link */
207
- font-size: 1rem;
208
- text-decoration: none;
209
- text-align: right;
210
- }
211
- /* Coupon Dropdown styling */
212
- #couponDropdown {
213
- width: 30%; /* Set dropdown to 30% of the width */
214
- display: none; /* Hidden by default */
215
- background-color: #fff;
216
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
217
- z-index: 10; /* Ensure it's above other content */
218
- margin-top: 10px; /* Add space from the link */
219
- margin-left: auto; /* Push it to the right side */
220
- margin-right: 0; /* Ensure it doesn't overflow outside */
221
- }
222
- /* Show the dropdown when it's active */
223
- #couponDropdown.show {
224
- display: block;
225
- }
226
- /* Ensure Apply Coupon section aligns correctly */
227
- .coupon-selection {
228
- display: flex;
229
- justify-content: space-between;
230
- align-items: center;
231
- font-size: 1rem;
232
- margin-bottom: 20px; /* Add space below Apply Coupon section */
233
- }
234
- /* Apply Coupon link and label styles */
235
- .coupon-selection label {
236
- font-weight: bold;
237
- color: black;
238
- }
239
- .coupon-selection a {
240
- color: #007bff; /* Blue for the link */
241
- font-size: 1rem;
242
- text-decoration: none;
243
- text-align: right;
244
- }
245
- /* Bill details grid structure */
246
- .bill-details {
247
- display: grid;
248
- grid-template-columns: 1fr 1fr; /* Two-column layout */
249
- grid-gap: 10px;
250
- margin-bottom: 10px;
251
- }
252
- /* Adjust label and amount for bill details */
253
- .bill-details .label {
254
- font-weight: 600;
255
- font-size: 1rem;
256
- }
257
- .bill-details .amount {
258
- text-align: right;
259
- font-weight: 600;
260
- font-size: 1rem;
261
- }
262
- /* Divider line between bill sections */
263
- .dotted-line {
264
- border-bottom: 2px dotted #ccc;
265
- margin: 15px 0;
266
- }
267
- /* Total bill grid layout */
268
- .total-bill {
269
- display: grid;
270
- grid-template-columns: 1fr 1fr;
271
- font-weight: 600;
272
- font-size: 1.2rem;
273
- margin-top: 10px;
274
- margin-bottom: 10px; /* Add 10px space between To Pay and Submit Button */
275
- }
276
- .total-bill .label {
277
- font-size: 1.1rem;
278
- }
279
- .total-bill .amount {
280
- text-align: right;
281
- font-size: 1.1rem;
282
- color: #2e7d32; /* Green for Total Bill Price */
283
- }
284
- /* Margin to add space for dropdown when visible */
285
- .cart-summary.has-dropdown {
286
- margin-bottom: 80px; /* Create space below the content when dropdown is visible */
287
- }
288
- .checkout-button {
289
- background-color: #ff5722;
290
- color: #ffffff;
291
- padding: 12px;
292
- border-radius: 8px;
293
- border: none;
294
- height: 44px;
295
- width: 100%;
296
- font-size: 1.2rem;
297
- cursor: pointer;
298
- transition: background-color 0.3s, color 0.3s;
299
- display: flex;
300
- justify-content: center;
301
- align-items: center;
302
- text-align: center;
303
- }
304
- .suggestion-section {
305
- margin-top: 25px;
306
- padding: 15px;
307
- background-color: #fff;
308
- border-radius: 10px;
309
- border: 2px solid #fdf4e3; /* light Orange border around the complete meal box */
310
- }
311
- .suggestion-items-container {
312
- display: flex;
313
- overflow-x: auto; /* Horizontal scrolling */
314
- gap: 10px; /* Space between items */
315
- padding-bottom: 10px;
316
- padding-top: 10px;
317
- }
318
- /* Styling for the suggestion item card */
319
- .suggestion-item {
320
- display: flex; /* Align items horizontally */
321
- align-items: center; /* Center image and text vertically */
322
- justify-content: flex-start; /* Align items to the start (left side) */
323
- flex-shrink: 0;
324
- width: 160px; /* Set fixed width for each suggestion item */
325
- padding: 10px;
326
- border-radius: 8px; /* Rounded corners */
327
- background-color: #fff;
328
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
329
- transition: transform 0.3s ease;
330
- margin-right: 10px; /* Ensure there's space between the cards */
331
- position: relative; /* For positioning the + icon */
332
- text-align: left; /* Align text to the left */
333
- overflow: visible; /* Allow the button to overflow outside */
334
- border: 2px solid #fdf4e3; /* light Orange border around the suggestion items */
335
- }
336
- .suggestion-item:hover {
337
- transform: scale(1.05); /* Slight zoom effect on hover */
338
- }
339
- .suggestion-item img {
340
- width: 50px; /* Set a fixed width for the image */
341
- height: 50px; /* Set a fixed height for the image */
342
- object-fit: cover; /* Ensure image fits correctly without distortion */
343
- border-radius: 5px; /* Rounded corners for the image */
344
- margin-right: 12px; /* Space between the image and text */
345
- }
346
- .suggestion-item div {
347
- flex-grow: 1; /* Allow the text section to expand and fill available space */
348
- text-align: left; /* Align text to the left */
349
- }
350
- /* Styling for the + symbol button (with green border, white background, and black text) */
351
- .add-back-button {
352
- position: absolute;
353
- top: -5px;
354
- right: -10px;
355
- font-size: 1rem; /* Smaller font size */
356
- padding: 0; /* Remove padding */
357
- width: 30px; /* Set fixed width */
358
- height: 30px; /* Set fixed height */
359
- background-color: #fff;
360
- color: #0FAA39;
361
- border: 2px solid #0FAA39;
362
- border-radius: 0; /* Square shape */
363
- cursor: pointer;
364
- transition: background-color 0.3s, color 0.3s, border-color 0.3s;
365
- z-index: 2; /* Increased z-index to ensure it stays above the borders */
366
- }
367
- .add-back-button:hover {
368
- background-color: #fff; /* Green background on hover */
369
- color: #0FAA39; /* White color for the + symbol when hovered */
370
- border-color: #0FAA39; /* Green border on hover */
371
- z-index: 3; /* Ensure button stays on top when hovered */
372
- }
373
- /* Ensure the scroll container works fine */
374
- .suggestion-items-container::-webkit-scrollbar {
375
- height: 8px; /* Height of the scrollbar */
376
- }
377
- .suggestion-items-container::-webkit-scrollbar-thumb {
378
- background-color: #fff; /* Green color for scrollbar thumb */
379
- border-radius: 4px;
380
- }
381
- .suggestion-items-container::-webkit-scrollbar-track {
382
- background-color: #f1f1f1;
383
- }
384
-
385
- .cart-item-actions {
386
- display: flex; /* Use flexbox to align items horizontally */
387
- align-items: flex-start; /* Align the price at the top of the cart item (like the item name) */
388
- margin-left: auto; /* This will push the price to the right side of the cart item */
389
- }
390
- h4.mb-4.fw-bold {
391
- text-align: center; /* Centers the title */
392
- color: #FF5722; /* Orange color for the title */
393
- .cart-container h4 {
394
- text-align: center; /* This will center the title horizontally */
395
- color: #FF5722; /* Orange color */
396
- font-weight: bold; /* Make it bold */
397
- }
398
-
399
- </style>
400
- </head>
401
- <body>
402
- <div class="container">
403
- <div class="cart-container">
404
- <div style="text-align: right;">
405
- <a href="/menu" style="text-decoration: none; font-size: 1.5rem; color: #007bff;">&times;</a>
406
- </div>
407
-
408
- <h4 class="mb-4 fw-bold">Your Cart</h4>
409
-
410
- <!-- Cart Items -->
411
- <div class="cart-container2">
412
- {% for item in cart_items %}
413
- <div class="cart-item">
414
- <div class="image-wrapper">
415
- <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
416
- </div>
417
- <div class="cart-item-details">
418
- <div class="cart-item-title">
419
- {{ item.Name }}
420
- </div>
421
- <div class="cart-item-addons">
422
- <small class="text-muted">Add-ons: {{ item.Add_Ons__c }}</small>
423
- </div>
424
- <div class="cart-item-instructions">
425
- <small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small>
426
- </div>
427
- <div class="cart-item-quantity mt-2">
428
- <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
429
- <input type="text" value="{{ item.Quantity__c|int }}" readonly data-item-name="{{ item.Name }}">
430
- <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
431
- </div>
432
- </div>
433
- <div class="cart-item-actions">
434
- <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
435
-
436
- <!-- Delete Button with Trash Icon and onclick handler -->
437
- <button type="button" class="btn btn-light text-dark remove-btn" onclick="removeItemFromCart('{{ item.Name }}')">
438
- <i class="bi bi-trash"></i>
439
- </button>
440
-
441
- <div class="text-primary" style="color: #000 !important;">
442
- $<span class="base-price">{{ item.Price__c }}</span>
443
- </div>
444
- </div>
445
- </div>
446
- {% else %}
447
- <!-- Code to handle the case when cart_items is empty -->
448
- <p>No items in your cart.</p>
449
- {% endfor %}
450
- </div>
451
-
452
- <!-- Suggestions Section -->
453
- {% if suggestions %}
454
- <div class="suggestion-section">
455
- <h5>Complete Your Meal</h5>
456
- <div class="suggestion-items-container">
457
- {% for suggestion in suggestions %}
458
- <div class="suggestion-item">
459
- <img src="{{ suggestion.Image1__c }}" alt="{{ suggestion.Name }}" onerror="this.src='/static/placeholder.jpg';">
460
- <div>
461
- <div>{{ suggestion.Name }}</div>
462
- <div class="text-muted">${{ suggestion.Price__c }}</div>
463
- </div>
464
- <!-- Replace add button with a cart icon -->
465
- <button class="add-back-button" onclick="addToCartSuggestion('{{ suggestion.Name }}', '{{ suggestion.Price__c }}', '{{ suggestion.Image1__c }}', '{{ suggestion.Id }}')">+</button>
466
-
467
-
468
- </div>
469
- {% endfor %}
470
- </div>
471
- </div>
472
-
473
- {% endif %}
474
-
475
- <!-- Subtotal -->
476
- <div class="cart-summary">
477
- <!-- Coupon Section -->
478
- {% if coupons %}
479
- <div class="coupon-selection d-flex justify-content-between align-items-center">
480
- <label class="text-dark font-weight-bold mb-0">Apply Coupon</label>
481
- <a href="javascript:void(0);" id="applyCouponLink" onclick="toggleCouponDropdown()" class="text-primary">+ Apply Coupon</a>
482
- </div>
483
-
484
- <!-- Coupon Dropdown, positioned below Apply Coupon -->
485
- <select id="couponDropdown" class="form-select mt-2" style="display:none;" onchange="calculateDiscount()">
486
- <option value="">Select a coupon</option>
487
- {% for coupon in coupons %}
488
- <option value="{{ coupon }}">{{ coupon }}</option>
489
- {% endfor %}
490
- </select>
491
- {% endif %}
492
-
493
-
494
-
495
- <div class="bill-details">
496
- <div class="label">Cart Total</div>
497
- <div class="amount">${{ subtotal }}</div>
498
-
499
-
500
- <div class="label">Discount</div>
501
- <div class="amount" id="discountText">-${{ discount }}</div>
502
-
503
-
504
-
505
-
506
- </div>
507
-
508
- <div class="dotted-line"></div>
509
-
510
- <div class="total-bill">
511
- <div class="label">To Pay</div>
512
- <div class="amount" id="totalBillText">${{ subtotal }}</div>
513
- </div>
514
- <button class="checkout-button" onclick="proceedToOrder()">Proceed to Order</button>
515
- </div>
516
- </div>
517
- </div>
518
-
519
-
520
- <script>
521
- // Example function to handle the increase/decrease button clicks
522
- function updateQuantity(action, itemName, customerEmail) {
523
- let quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
524
- let quantity = parseInt(quantityInput.value);
525
- // Update quantity based on action
526
- if (action === 'increase') {
527
- quantity++;
528
- } else if (action === 'decrease' && quantity > 1) {
529
- quantity--;
530
- }
531
- // Validate quantity
532
- if (isNaN(quantity) || quantity < 1) {
533
- alert("Invalid quantity!");
534
- return;
535
- }
536
- // Send updated quantity to the server
537
- fetch('/cart/update_quantity', {
538
- method: 'POST',
539
- headers: { 'Content-Type': 'application/json' },
540
- body: JSON.stringify({ email: customerEmail, item_name: itemName, quantity: quantity })
541
- })
542
- .then(response => response.json())
543
- .then(data => {
544
- if (data.success) {
545
- // Update the item price and quantity in the UI
546
- quantityInput.value = quantity;
547
- let itemElement = quantityInput.closest(".cart-item"); // Locate the parent cart item
548
- if (itemElement) {
549
- let basePriceElement = itemElement.querySelector(".base-price");
550
- let addonsPriceElement = itemElement.querySelector(".addons-price");
551
- // Update the base price
552
- if (basePriceElement) {
553
- basePriceElement.innerText = data.new_item_price.toFixed(2); // Assuming backend sends this
554
- }
555
- // Update add-ons price if needed (optional)
556
- if (addonsPriceElement && data.addons_price !== undefined) {
557
- addonsPriceElement.innerText = data.addons_price.toFixed(2);
558
- }
559
- } else {
560
- console.error(`Parent cart item element not found for item: ${itemName}`);
561
- }
562
- location.reload();
563
- // Recalculate subtotal dynamically
564
-
565
- } else {
566
- alert("Error updating quantity: " + data.error);
567
- }
568
- })
569
- .catch(err => console.error("Error:", err));
570
- }
571
- function toggleCouponDropdown() {
572
- let couponDropdown = document.getElementById('couponDropdown');
573
-
574
- // Toggle the visibility of the coupon dropdown
575
- if (couponDropdown.style.display === "none" || couponDropdown.style.display === "") {
576
- couponDropdown.style.display = "block";
577
- } else {
578
- couponDropdown.style.display = "none";
579
- }
580
- }
581
- function calculateDiscount() {
582
- let couponDropdown = document.getElementById('couponDropdown'); // Get coupon dropdown
583
- let selectedCoupon = couponDropdown.value.trim(); // Get the selected coupon value
584
- let subtotal = parseFloat("{{ subtotal }}"); // Get the subtotal (from the backend)
585
- // If a valid coupon is selected
586
- if (selectedCoupon && selectedCoupon.toLowerCase() !== "none") {
587
- // Apply 10% discount
588
- let discount = subtotal * 0.10;
589
- let total = subtotal - discount;
590
- // Update UI with discount and total bill
591
- document.getElementById("discountText").innerText = `$${discount.toFixed(2)}`;
592
- document.getElementById("totalBillText").innerText = `$${total.toFixed(2)}`;
593
- } else {
594
- // If no coupon is selected or "None" is selected, reset the discount
595
- document.getElementById("discountText").innerText = `$0.00`;
596
- document.getElementById("totalBillText").innerText = `$${subtotal.toFixed(2)}`;
597
- }
598
- }
599
-
600
- function proceedToOrder() {
601
- let couponDropdown = document.getElementById('couponDropdown');
602
-
603
- // Initialize selectedCoupon to an empty string by default
604
- let selectedCoupon = "";
605
-
606
- // Only proceed if couponDropdown exists
607
- if (couponDropdown) {
608
- // If the value is not null or undefined, strip the value
609
- if (couponDropdown.value != null) {
610
- selectedCoupon = couponDropdown.value.trim(); // safely call .trim() if value is not null
611
- } else {
612
- selectedCoupon = ""; // Assign empty string if value is null
613
- }
614
- }
615
- // If no coupon is selected or the value is empty, treat it as no coupon
616
- if (selectedCoupon === "" || selectedCoupon === "None" || selectedCoupon === "Null") {
617
- selectedCoupon = null; // Treat it as no coupon selected
618
- }
619
- // Send the selected coupon to the backend for processing
620
- fetch('/cart/checkout', {
621
- method: 'POST',
622
- headers: { 'Content-Type': 'application/json' },
623
- body: JSON.stringify({ selectedCoupon: selectedCoupon })
624
- })
625
- .then(response => response.json())
626
- .then(data => {
627
- if (data.success) {
628
- alert(data.message); // Success message
629
- window.location.href = '/order'; // Redirect to order page
630
- } else {
631
- alert(data.error || data.message); // Handle error message
632
- }
633
- })
634
- .catch(err => console.error('Error during checkout:', err));
635
- }
636
- function calculateSubtotal() {
637
- let subtotal = 0;
638
- document.querySelectorAll('.cart-item').forEach(item => {
639
- const quantity = parseInt(item.querySelector('input').value);
640
- const basePrice = parseFloat(item.querySelector('.base-price').innerText.replace('$', '')); // Base Price
641
- const addonsPrice = parseFloat(item.querySelector('.addons-price').innerText.replace('$', '')) || 0; // Add-ons Price
642
- subtotal += (basePrice * quantity) + addonsPrice; // Include add-ons price in subtotal
643
- });
644
- // Update the subtotal in the HTML
645
- document.querySelector('.cart-summary p').innerText = `Subtotal: $${subtotal.toFixed(2)}`;
646
- return subtotal;
647
- }
648
- function addSuggestion(itemId) {
649
- fetch(`/cart/add_suggestion/${itemId}`, {
650
- method: 'POST',
651
- headers: { 'Content-Type': 'application/json' },
652
- body: JSON.stringify({})
653
- })
654
- .then(response => response.json())
655
- .then(data => {
656
- if (data.success) {
657
- alert('Item added to cart!');
658
- location.reload();
659
- } else {
660
- alert(data.error);
661
- }
662
- })
663
- .catch(err => console.error('Error adding suggestion:', err));
664
- }
665
- function removeItemFromCart(itemName) {
666
- fetch(`/cart/remove/${encodeURIComponent(itemName)}`, {
667
- method: 'POST',
668
- headers: {
669
- 'Content-Type': 'application/json'
670
- }
671
- })
672
- .then(response => response.json())
673
- .then(data => {
674
- if (data.success) {
675
- alert(data.message);
676
- location.reload(); // Reload the page to update the cart
677
- } else {
678
- alert(data.message);
679
- }
680
- })
681
- .catch(err => console.error('Error removing item:', err));
682
- }
683
- function addToCart(itemName, customerEmail) {
684
- fetch(`/cart/add_item`, {
685
- method: "POST",
686
- headers: { "Content-Type": "application/json" },
687
- body: JSON.stringify({
688
- email: customerEmail,
689
- item_name: itemName.trim(), //Ensure the item name is trimmed
690
- quantity: 0 // DEFAULT QUANTITY PASSED HERE
691
- })
692
- })
693
- .then(response => response.json())
694
- .then(data => {
695
- if (data.success) {
696
- alert("Item added/updated successfully.");
697
- location.reload(); // Reload the page to update the cart
698
- } else {
699
- alert(data.error || "Failed to add item to cart.");
700
- }
701
- })
702
- .catch(err => console.error("Error adding item to cart:", err));
703
- }
704
- function addSuggestion(itemId) {
705
- fetch(`/cart/add_suggestion/${itemId}`, {
706
- method: 'POST',
707
- headers: { 'Content-Type': 'application/json' },
708
- body: JSON.stringify({})
709
- })
710
- .then(response => response.json())
711
- .then(data => {
712
- if (data.success) {
713
- alert('Item added to cart!');
714
- location.reload();
715
- } else {
716
- alert(data.error);
717
- }
718
- })
719
- .catch(err => console.error('Error adding suggestion:', err));
720
- }
721
- function addToCartSuggestion(itemName, itemPrice, itemImage, itemId) {
722
- const customerEmail = "{{ customer_email }}"; // Get customer email from session
723
- // Create the data object to send to the ser ver
724
- const data = {
725
- item_name: itemName,
726
- item_price: itemPrice,
727
- item_image: itemImage,
728
- item_id: itemId,
729
- addons: [], // Default to empty, you can adjust if needed
730
- instructions: "", // Default to empty, you can adjust if needed
731
- customer_email: customerEmail
732
- };
733
- // Send the data to the backend via a POST request
734
- fetch('/cart/add_suggestion_to_cart', {
735
- method: 'POST',
736
- headers: {
737
- 'Content-Type': 'application/json'
738
- },
739
- body: JSON.stringify(data)
740
- })
741
- .then(response => response.json())
742
- .then(data => {
743
- if (data.success) {
744
- alert('Item added to cart!');
745
- location.reload(); // Reload to update the cart view
746
- } else {
747
- alert('Error adding item to cart: ' + data.error);
748
- }
749
- })
750
- .catch(err => console.error('Error adding item:', err));
751
- }
752
-
753
-
754
- </script>
755
-
756
- </body>
757
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/customer_details.html DELETED
@@ -1,248 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>User Profile</title>
7
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
8
- <style>
9
- body {
10
- background-color: #FDF4E3;
11
- }
12
-
13
- .back-to-menu {
14
- display: block;
15
- margin: 30px auto 10px auto;
16
- padding: 10px 20px;
17
- background-color: #ff5722;
18
- color: #ffffff;
19
- border: none;
20
- border-radius: 25px;
21
- font-size: 1rem;
22
- font-weight: bold;
23
- text-align: center;
24
- text-decoration: none;
25
- width: 100%;
26
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
27
- transition: background-color 0.3s ease;
28
- }
29
-
30
- .back-to-menu:hover {
31
- background-color: #e64a19;
32
- text-decoration: none;
33
- }
34
-
35
- .editable {
36
- background-color: #f0f8ff; /* Light blue when edited */
37
- }
38
-
39
- .input-group {
40
- position: relative;
41
- }
42
-
43
- .btn-change {
44
- position: absolute;
45
- right: 10px;
46
- top: 50%;
47
- transform: translateY(-50%);
48
- background-color: #ffffff;
49
- color: #0FAA39;
50
- border: none;
51
- border-radius: 5px;
52
- padding: 5px 10px;
53
- cursor: pointer;
54
- font-size: 0.9rem;
55
- }
56
-
57
- .btn-change:hover {
58
- background-color: #ffffff;
59
- color: #0FAA39;
60
- }
61
-
62
- .copy-btn {
63
- position: absolute;
64
- right: 10px;
65
- top: 50%;
66
- transform: translateY(-50%);
67
- background: none;
68
- border: none;
69
- color: #007bff;
70
- font-size: 1.2rem;
71
- cursor: pointer;
72
- }
73
-
74
- .update-btn {
75
- background-color: #0FAA39;
76
- color: white;
77
- border: none;
78
- border-radius: 5px;
79
- padding: 10px 20px;
80
- font-size: 1rem;
81
- cursor: pointer;
82
- width: 100%;
83
- font-weight: bold; /* Making the button text bold */
84
- }
85
-
86
- .update-btn:hover {
87
- background-color: #0f8e29;
88
- }
89
-
90
- .edit-btn {
91
- background-color: #0FAA39;
92
- color: white;
93
- border: none;
94
- border-radius: 5px;
95
- padding: 10px 20px;
96
- font-size: 1rem;
97
- cursor: pointer;
98
- width: 100%;
99
- font-weight: bold; /* Making the button text bold */
100
- }
101
-
102
- .edit-btn:hover {
103
- background-color: #0f8e29;
104
- }
105
-
106
- /* Flexbox for equally spaced buttons */
107
- .button-container {
108
- display: flex;
109
- justify-content: space-between;
110
- margin-top: 20px;
111
- }
112
-
113
- /* Ensure both buttons have equal height and width */
114
- .edit-btn, .update-btn {
115
- flex: 1;
116
- margin: 0 5px;
117
- padding: 10px 20px;
118
- font-size: 1rem;
119
- cursor: pointer;
120
- border-radius: 5px;
121
- height: 50px; /* Equal height for both buttons */
122
- }
123
-
124
- /* Change text color inside input fields to gray */
125
- input[type="text"], input[type="email"], input[type="number"], .form-control {
126
- color: #808080; /* Change text color to gray */
127
- }
128
-
129
- /* Change color for the headings like Name, Email, Phone, Referral Code, Reward Points */
130
- .form-label {
131
- color: #1C1C1C; /* Change heading text color */
132
- }
133
-
134
- h1 {
135
- color: #1C1C1C; /* Change User Profile heading color */
136
- font-size: 24px; /* Change font size of 'User Profile' */
137
- }
138
- </style>
139
- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
140
- <script>
141
- function enableEditField(fieldId) {
142
- var field = document.getElementById(fieldId);
143
- field.removeAttribute("readonly");
144
- field.classList.add("editable");
145
- field.focus();
146
- }
147
-
148
- function updateProfile(event) {
149
- event.preventDefault();
150
- var formData = $('#profileForm').serialize();
151
-
152
- $.ajax({
153
- type: "POST",
154
- url: "/user/update_profile",
155
- data: formData,
156
- success: function(response) {
157
- if (response.status === "success") {
158
- alert(response.message);
159
- location.reload();
160
- } else {
161
- alert(response.message);
162
- }
163
- },
164
- error: function() {
165
- alert("An error occurred while updating the profile.");
166
- }
167
- });
168
- }
169
-
170
- function editProfileFields() {
171
- document.getElementById('customerName').removeAttribute('readonly');
172
- document.getElementById('email').removeAttribute('readonly');
173
- document.getElementById('phone').removeAttribute('readonly');
174
- document.getElementById('customerName').classList.add('editable');
175
- document.getElementById('email').classList.add('editable');
176
- document.getElementById('phone').classList.add('editable');
177
- }
178
-
179
- function copyReferralCode() {
180
- var referralCode = document.getElementById('referralCode');
181
- referralCode.select();
182
- document.execCommand('copy');
183
- alert('Referral Code Copied!');
184
- }
185
- </script>
186
- </head>
187
- <body>
188
- <div class="container mt-4">
189
- <h1>User Profile</h1>
190
-
191
- {% with messages = get_flashed_messages(with_categories=true) %}
192
- {% if messages %}
193
- <div class="alert alert-{{ messages[0][0] }}">
194
- {{ messages[0][1] }}
195
- </div>
196
- {% endif %}
197
- {% endwith %}
198
-
199
- <div class="card">
200
- <div class="card-body">
201
- <form id="profileForm" method="POST" onsubmit="updateProfile(event)">
202
- <div class="mb-3">
203
- <label for="customerName" class="form-label"><strong>Name:</strong></label>
204
- <div class="input-group">
205
- <input type="text" id="customerName" name="customerName" class="form-control" value="{{ customer['name'] }}" readonly>
206
- </div>
207
- </div>
208
-
209
- <div class="mb-3">
210
- <label for="email" class="form-label"><strong>Email:</strong></label>
211
- <div class="input-group">
212
- <input type="email" id="email" name="email" class="form-control" value="{{ customer['email'] }}" readonly>
213
- </div>
214
- </div>
215
-
216
- <div class="mb-3">
217
- <label for="phone" class="form-label"><strong>Phone:</strong></label>
218
- <div class="input-group">
219
- <input type="text" id="phone" name="phone" class="form-control" value="{{ customer['phone'] }}" readonly>
220
- </div>
221
- </div>
222
-
223
- <div class="mb-3">
224
- <label for="referralCode" class="form-label"><strong>Referral Code:</strong></label>
225
- <div class="input-group">
226
- <input type="text" id="referralCode" name="referralCode" class="form-control" value="{{ customer['referral_code'] }}" readonly>
227
- <button type="button" class="copy-btn" onclick="copyReferralCode()">📋</button>
228
- </div>
229
- </div>
230
-
231
- <div class="mb-3">
232
- <label for="rewardPoints" class="form-label"><strong>Reward Points:</strong></label>
233
- <input type="text" id="rewardPoints" name="rewardPoints" class="form-control" value="{{ customer['reward_points'] }}" readonly>
234
- </div>
235
-
236
- <!-- Flex container for Edit and Update buttons -->
237
- <div class="button-container">
238
- <button type="button" class="edit-btn" onclick="editProfileFields()">Edit Profile</button>
239
- <button type="submit" class="update-btn">Update Profile</button>
240
- </div>
241
- </form>
242
- </div>
243
- </div>
244
-
245
- <a href="/menu" class="back-to-menu">Back to Menu</a>
246
- </div>
247
- </body>
248
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/index.html DELETED
@@ -1,15 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>BiryaniHub</title>
7
- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
8
- </head>
9
- <body>
10
- <div class="container">
11
- <h1>Welcome to BiryaniHub</h1>
12
- <button onclick="window.location.href='/login'">Login</button>
13
- </div>
14
- </body>
15
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/login.html DELETED
@@ -1,90 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Login</title>
7
- <style>
8
- body {
9
- font-family: Arial, sans-serif;
10
- background: linear-gradient(to right, #6a11cb, #2575fc);
11
- margin: 0;
12
- display: flex;
13
- justify-content: center;
14
- align-items: center;
15
- height: 100vh;
16
- color: #fff;
17
- }
18
- .form-container {
19
- background: #ffffff;
20
- padding: 20px 30px;
21
- border-radius: 10px;
22
- width: 100%;
23
- max-width: 400px;
24
- text-align: center;
25
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
26
- color: #333;
27
- }
28
- .form-container h2 {
29
- margin-bottom: 20px;
30
- color: #333;
31
- }
32
- .form-container label {
33
- display: block;
34
- text-align: left;
35
- margin: 10px 0 5px;
36
- }
37
- .form-container input {
38
- width: 100%;
39
- padding: 10px;
40
- margin-bottom: 15px;
41
- border: 1px solid #ccc;
42
- border-radius: 5px;
43
- }
44
- .form-container button {
45
- width: 100%;
46
- padding: 10px;
47
- background-color: #6a11cb;
48
- color: #fff;
49
- border: none;
50
- border-radius: 5px;
51
- font-size: 16px;
52
- cursor: pointer;
53
- }
54
- .form-container button:hover {
55
- background-color: #2575fc;
56
- }
57
- .form-container p {
58
- margin-top: 10px;
59
- }
60
- .form-container a {
61
- color: #6a11cb;
62
- text-decoration: none;
63
- }
64
- .form-container a:hover {
65
- text-decoration: underline;
66
- }
67
- .error-message {
68
- color: red;
69
- margin-top: 10px;
70
- }
71
- </style>
72
- </head>
73
- <body>
74
- <div class="form-container">
75
- <h2>Login</h2>
76
- <form action="/login" method="POST">
77
- <label for="email">Email:</label>
78
- <input type="email" id="email" name="email" placeholder="Enter your email" required>
79
-
80
- <label for="password">Password:</label>
81
- <input type="password" id="password" name="password" placeholder="Enter your password" required>
82
-
83
- <button type="submit">Login</button>
84
- </form>
85
- {% if error %}
86
- <p class="error-message">{{ error }}</p>
87
- {% endif %}
88
- </div>
89
- </body>
90
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/menu.html DELETED
@@ -1,1062 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Menu</title>
7
- <!-- Bootstrap CSS -->
8
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-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
- <style>
11
-
12
-
13
- /* subbu */
14
- .addbutton .btn {
15
- background: linear-gradient(135deg, #ffffff, #f0f0f0); /* Gradient white background */
16
- color: green; /* Make text color transparent */
17
- background-clip: text; /* Apply the gradient to the text */
18
- -webkit-background-clip: text; /* For Safari compatibility */
19
- border: 1px solid #90ee90; /* Light green border */
20
- padding: 6px 15px; /* Smaller padding */
21
- font-size: 14px; /* Smaller font size */
22
- font-weight:bold;
23
- border-radius: 5px; /* Optional: round the corners */
24
- transition: background 0.3s ease, border-color 0.3s ease; /* Add transition effect for hover */
25
- margin-left: 13px; /* Margin for positioning */
26
- }
27
-
28
- .addbutton .btn:hover {
29
- background: linear-gradient(135deg, #f0f0f0, #ffffff); /* Reverse gradient for hover effect */
30
- border-color: #28a745; /* Darker green border on hover */
31
- background-clip: text; /* Ensure the gradient is clipped to the text on hover */
32
- -webkit-background-clip: text; /* Safari compatibility */
33
- }
34
-
35
-
36
-
37
- .customisable-text {
38
- color: #28a745; /* Same color as the "ADD" button */
39
- font-size: 12px; /* Same font size as the "ADD" button */
40
- margin-left: 5px;
41
- margin-top:1px;
42
- }
43
-
44
- /* model */
45
- /* .modal-footer {
46
- display: flex;
47
- align-items: center;
48
- justify-content: space-between; /* Space between quantity controls and Add to Cart button */
49
- padding: 10px;
50
- }
51
-
52
- .modal-footer .d-flex {
53
- display: flex;
54
- align-items: center;
55
- gap: 10px; /* Space between quantity buttons */
56
- }
57
-
58
- .modal-footer .btn {
59
- height: 40px; /* Set consistent button height */
60
- padding: 0 15px; /* Adjust padding to fit inside the buttons */
61
- }
62
-
63
- .modal-footer .form-control {
64
- width: 50px; /* Fixed width for quantity input */
65
- height: 40px; /* Match the height of buttons */
66
- text-align: center; /* Center the value inside the input */
67
- }
68
-
69
- .modal-footer .btn-primary {
70
- background-color: #0FAA39; /* Green background for Add to Cart button */
71
- border-color: #0FAA39; /* Border color to match button background */
72
- font-weight: bold; /* Bold text */
73
- padding: 10px 20px; /* Adjust padding to make the button look better */
74
- height: 40px; /* Match the height with quantity buttons */
75
- display: flex;
76
- justify-content: center;
77
- align-items: center;
78
- width: auto; /* Auto width to adjust to button text */
79
- border-radius: 5px; /* Rounded corners for the button */
80
- }
81
-
82
- .modal-footer .btn-outline-secondary {
83
- height: 40px; /* Ensure quantity buttons are the same size */
84
- width: 40px; /* Make sure the buttons are square */
85
- border-radius: 5px; /* Rounded corners for the buttons */
86
- }
87
-
88
- @media (max-width: 576px) {
89
- /* Responsive adjustments for smaller screens */
90
- .modal-dialog {
91
- max-width: 98%; /* Adjust modal width for smaller screens */
92
- }
93
-
94
- .modal-footer .btn {
95
- height: 35px; /* Smaller buttons for small screens */
96
- padding: 0 12px; /* Adjust padding to make the button look proportional */
97
- }
98
-
99
- .modal-footer .form-control {
100
- width: 40px; /* Adjust input size for smaller screens */
101
- height: 35px;
102
- }
103
-
104
- .modal-footer .d-flex {
105
- gap: 8px; /* Reduce space between quantity buttons on smaller screens */
106
- }
107
- } */
108
-
109
-
110
-
111
-
112
-
113
-
114
-
115
-
116
-
117
-
118
-
119
- body {
120
- font-family: Arial, sans-serif;
121
- background-color: #fdf4e3; /* Updated background color */
122
- margin: 0;
123
- padding: 0;
124
- display: flex;
125
- flex-direction: column;
126
- }
127
- .container {
128
- max-width: 900px;
129
- }
130
- .menu-card {
131
- max-width: 350px;
132
- border-radius: 15px;
133
- overflow: hidden;
134
- background-color: #fff;
135
- margin: auto;
136
- display: flex;
137
- flex-direction: column;
138
- }
139
- .menu-image {
140
- height: 200px; /* Fixed height */
141
- width: 100%; /* Full width of the card */
142
- object-fit: fill; /* Ensure the image covers the area and maintains the aspect ratio */
143
- border-radius: 15px 15px 0 0; /* Rounded top corners */
144
- }
145
- .card-title {
146
- font-size: 1.2rem;
147
- font-weight: bold;
148
- margin: 10px 0;
149
- }
150
- .card-text {
151
- font-size: 1rem;
152
- color: #6c757d;
153
- }
154
-
155
-
156
- .customize-btn {
157
- position: absolute;
158
- top: 50%;
159
- right: 0;
160
- transform: translateY(-50%);
161
- z-index: 2;
162
- background: linear-gradient(92.29deg, rgba(63, 63, 63, 0.7) 4.75%, rgba(0, 0, 0, 0.7) 93.57%);
163
- color: #fff;
164
- border: none;
165
- padding: 4px 12px; /* Reduced padding for smaller height */
166
- border-radius: 5px 0px 0px 5px ;
167
- display: flex;
168
- align-items: center;
169
- font-size: 12px; /* Slightly smaller text */
170
- }
171
-
172
- .customize-btn i {
173
- margin-left: 5px; /* Icon spacing */
174
- }
175
-
176
- /* .customize-btn:hover {
177
- background-color: #e08c00; /* Darker shade for hover effect */
178
- transition: background-color 0.3s ease;
179
- } *
180
-
181
-
182
-
183
-
184
-
185
-
186
-
187
-
188
-
189
-
190
-
191
- .btn-primary {
192
- font-size: 13px;
193
- font-weight: bold;
194
- border-radius: 5px;
195
- width: 100px;
196
- background-color: #0FAA39; /* Updated button background color */
197
- border-color: #0FAA39;
198
- }
199
- .btn-primary:hover {
200
- background-color: #0FAA39;
201
- border-color: #0FAA39;
202
- }
203
- .btn-primary:active,
204
- .btn-primary:focus {
205
- background-color: #0FAA39;
206
- border-color: #ffffff;
207
- box-shadow: none;
208
- }
209
- .view-cart-container {
210
- position: fixed;
211
- bottom: 20px;
212
- right: 20px;
213
- z-index: 999;
214
- }
215
- .view-cart-button {
216
- background-color: #0FAA39; /* Updated View Cart button background color */
217
- color: #fff;
218
- padding: 10px 20px;
219
- border-radius: 30px;
220
- font-size: 1rem;
221
- font-weight: bold;
222
- text-decoration: none;
223
- box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
224
- display: flex;
225
- align-items: center;
226
- justify-content: center;
227
- }
228
- .view-cart-button:hover {
229
- background-color: #109835; /* Slightly darker shade for hover effect */
230
- text-decoration: none;
231
- }
232
- .avatar-dropdown-container {
233
- position: relative;
234
- }
235
- .avatar-icon {
236
- width: 40px;
237
- height: 40px;
238
- border-radius: 50%;
239
- background-color: #5bbfc1;
240
- cursor: pointer;
241
- display: flex;
242
- align-items: center;
243
- justify-content: center;
244
- color: white;
245
- font-size: 20px;
246
- font-weight: bold;
247
- }
248
- .dropdown-menu {
249
- position: absolute;
250
- right: 0;
251
- top: 100%;
252
- background-color: #fff;
253
- border-radius: 5px;
254
- width: 200px; /* Adjust width as needed */
255
- box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
256
- display: none;
257
- }
258
- .avatar-dropdown-container:hover .dropdown-menu {
259
- display: block;
260
- }
261
- .avatar-dropdown-container {
262
- position: absolute;
263
- right: 20px; /* Adjust the value as needed to position it properly */
264
- top: 50%; /* Adjust top to place it within the header */
265
- transform: translateY(-50%); /* Correct the alignment to be perfectly centered */
266
- display: flex;
267
- align-items: right;
268
- justify-content: center;
269
- }
270
-
271
- .dropdown-menu .dropdown-item {
272
- padding: 10px 15px;
273
- text-decoration: none;
274
- color: #333;
275
- border-bottom: 1px solid #ddd;
276
- display: block; /* Make each item stack vertically */
277
- }
278
- .dropdown-menu .dropdown-item:last-child {
279
- border-bottom: none; /* Remove the bottom border from the last item */
280
- }
281
- .dropdown-menu .dropdown-item:hover {
282
- background-color: #f1f1f1;
283
- }
284
- .fixed-search-container {
285
- position: absolute;
286
- top: 90px; /* Move it slightly lower */
287
- left: 50%;
288
- transform: translateX(-50%);
289
- width: 80%;
290
- max-width: 600px;
291
- z-index: 999; /* Keep it above content */
292
- background-color: white;
293
- padding: 10px;
294
- border-radius: 25px;
295
- box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
296
- }
297
- /* Ensure the category filter dropdown does not overlap */
298
- form.text-center.mb-4 {
299
- margin-top: 10px; /* No margin at the top */
300
- margin-bottom: 0px; /* Small space at the bottom */
301
- }
302
- /* Ensure the container has enough margin so nothing is overlapped */
303
- .container {
304
- margin-top: 10px; /* Adjust spacing based on navbar and search bar */
305
- padding-top: 0 !important; /* Ensure no padding is added by default */
306
- }
307
- h1.text-center {
308
- margin-top: 10px; /* Reduced space above */
309
- padding-top: 0 !important; /* Removed padding */
310
- font-weight: semi-bold; /* Make the "Menu" text bold */
311
- }
312
- .fixed-top-bar {
313
- /* Remove the fixed positioning */
314
- position: relative; /* Change from fixed to relative */
315
- top: 0;
316
- left: 0;
317
- width: 100%;
318
- height: 54px;
319
- background-color: #FF6B35;
320
- color: white;
321
- padding: 15px;
322
- display: flex;
323
- justify-content: space-between;
324
- align-items: center; /* Vertically align items */
325
- z-index: 1000; /* Make sure it's still above other content */
326
- }
327
- .search-bar-container {
328
- padding: 10px;
329
- position: absolute;
330
- left: 20px;
331
- top: 50%;
332
- transform: translateY(-50%);
333
- display: flex;
334
- justify-content: flex-start;
335
- align-items: center;
336
- width: 300px; /* Adjust width as needed */
337
- }
338
- .search-bar-container input {
339
- width: 85%;
340
- padding: 8px 10px 8px 30px; /* Add padding for the icon */
341
- font-size: 16px;
342
- border-radius: 10px;
343
- border: none;
344
- }
345
- .search-icon {
346
- position: absolute;
347
- left: 15px; /* Position the icon inside the input box */
348
- font-size: 20px;
349
- color: #888; /* Icon color */
350
- }
351
- /* Style for customization sections */
352
- .addon-section {
353
- background-color: #fff; /* Light gray background */
354
- border: 2px solid #6c757d; /* Border color */
355
- border-radius: 8px;
356
- padding: 12px;
357
- margin-bottom: 10px; /* Spacing between sections */
358
- }
359
- /* Customization section title */
360
- .addon-section h6 {
361
- margin-bottom: 10px;
362
- font-size: 1.1rem;
363
- font-weight: bold;
364
- color: #343a40; /* Darker title text */
365
- }
366
- /* Style for add-on checkboxes */
367
- .addon-section .form-check {
368
- display: inline-flex; /* Display checkboxes horizontally */
369
- align-items: center; /* Align checkboxes and labels */
370
- margin-left: 10px; /* Space between checkboxes */
371
- color: #343a40; /* Darker text color */
372
- }
373
- /* Customize the default checkbox */
374
- .addon-section .form-check-input {
375
- -webkit-appearance: none; /* Remove default checkbox styling in Webkit browsers (e.g. Chrome, Safari) */
376
- -moz-appearance: none; /* Remove default checkbox styling in Firefox */
377
- appearance: none; /* Remove default checkbox styling in all browsers */
378
- width: 20px;
379
- height: 20px;
380
- border: 2px solid #343a40; /* Darker border color */
381
- border-radius: 5px; /* Rounded corners */
382
- background-color: #f0f0f0; /* Lighter gray background when unchecked */
383
- position: relative;
384
- margin-right: 10px; /* Add space between the checkbox and label */
385
- }
386
-
387
- /* Checked state for the custom checkbox */
388
- .addon-section .form-check-input:checked {
389
- background-color: #006400; /* Dark green background when checked */
390
- border-color: #006400; /* Dark green border when checked */
391
- }
392
- /* Add the check mark when checkbox is checked */
393
- .addon-section .form-check-input:checked::before {
394
- content: ''; /* Unicode check mark */
395
- font-size: 14px;
396
- position: absolute;
397
- top: 3px;
398
- left: 4px;
399
- color: white; /* White color for the check mark */
400
- }
401
- /* Hover effect for the checkboxes */
402
- .addon-section .form-check-input:hover {
403
- /* background-color: #006400; /* Slightly darker background on hover */
404
- }
405
- /* Focus effect on custom checkbox */
406
- .addon-section .form-check-input:focus {
407
- outline: none;
408
- box-shadow: 0 0 0 2px #006400; /* Green focus outline */
409
- }
410
- /* Custom checkbox label styles */
411
- .addon-section .form-check-label {
412
- font-size: 16px;
413
- margin-left: 5px;
414
- cursor: pointer;
415
- display: inline-block; /* Ensure label aligns correctly with checkbox */
416
- vertical-align: middle; /* Align text vertically with the checkbox */
417
- }
418
- /* Fix alignment of text and checkbox */
419
- .addon-section .form-check input[type="checkbox"],
420
- .addon-section .form-check label {
421
- display: inline-block;
422
- /* vertical-align: middle; /* Align text and checkboxes vertically */
423
- }
424
- /* Category Filter with Custom Radio Buttons */
425
- form.text-center.mb-4 {
426
- display: flex;
427
- flex-direction: column;
428
- align-items: center;
429
- justify-content: center;
430
- margin-bottom: 5px; /* Reduce bottom margin */
431
- }
432
- .form-check {
433
- display: inline-block;
434
- margin-right: 5px; /* Reduced space between radio button and label */
435
- margin-bottom: 0; /* Remove bottom margin */
436
- margin-top: 10px; /* Adds space between categories and Customized Dish */
437
- vertical-align: middle; /* Align radio buttons vertically */
438
- }
439
- .form-check-inline {
440
- display: inline-block;
441
- margin-right: 5px; /* Decrease space between each radio button */
442
- }
443
- .form-check-label {
444
- display: inline-block;
445
- font-size: 16px;
446
- margin-left: 5px; /* Spacing between radio button and label */
447
- vertical-align: middle; /* Align label vertically */
448
- }
449
- form-check-input addon-option{
450
- color: #333d47;
451
- }
452
- .custom-radio {
453
- appearance: none;
454
- -webkit-appearance: none;
455
- -moz-appearance: none;
456
- width: 20px;
457
- height: 20px;
458
- border: 3px solid #4CAF50; /* Green border */
459
- border-radius: 50%;
460
- margin-right: -5px; /* Reduced spacing between button and label */
461
- outline: none;
462
- cursor: pointer;
463
- position: relative;
464
- display: inline-block;
465
- vertical-align: middle; /* Align vertically with text */
466
- }
467
- .custom-radio:checked {
468
- background-color: #4CAF50; /* Green color when checked */
469
- border-color: #4CAF50; /* Matching border color */
470
- }
471
- .custom-radio:checked::after {
472
- content: '';
473
- position: relative;
474
- top: 5px;
475
- left: 5px;
476
- border-radius: 50%;
477
- }
478
- .custom-radio:hover {
479
- border-color: #388E3C;
480
- }
481
- /* Optional: Style the labels */
482
- .form-check-label {
483
- font-size: 16px;
484
- margin-left: 8px; /* Space between the radio button and the label */
485
- }
486
- .cart-container {
487
- display: flex;
488
- align-items: center;
489
- gap: 10px;
490
- }
491
-
492
- /* modal################## */
493
- .modal-footer {
494
- display: flex;
495
- align-items: center;
496
- justify-content: space-between; /* Space between quantity and Add to Cart button */
497
- padding: 10px;
498
- }
499
- .modal-footer .d-flex {
500
- display: flex;
501
- align-items: center;
502
- gap: 10px; /* Space between quantity buttons */
503
- }
504
- .modal-footer .btn {
505
- height: 40px; /* Set consistent button height */
506
- padding: 0 15px; /* Adjust padding to fit inside the buttons */
507
- }
508
- .modal-footer .form-control {
509
- width: 50px; /* Fixed width for quantity input */
510
- height: 40px; /* Match the height of buttons */
511
- text-align: center; /* Center the value inside the input */
512
- }
513
- .modal-footer .btn-primary {
514
- background-color: #0FAA39; /* Green background for Add to Cart button */
515
- border-color: #0FAA39; /* Border color to match button background */
516
- font-weight: bold; /* Bold text */
517
- padding: 10px 20px; /* Adjust padding to make the button look better */
518
- height: 40px; /* Match the height with quantity buttons */
519
- display: flex;
520
- justify-content: center;
521
- align-items: center;
522
- width: auto; /* Auto width to adjust to button text */
523
- }
524
- .modal-footer .btn-outline-secondary {
525
- height: 40px; /* Ensure quantity buttons are the same size */
526
- width: 40px; /* Make sure the buttons are square */
527
- }
528
- @media (max-width: 576px) {
529
- /* Responsive adjustments for smaller screens */
530
- .modal-dialog {
531
- max-width: 98%; /* Adjust modal width for smaller screens */
532
- }
533
- .modal-footer .btn {
534
- height: 35px; /* Smaller buttons for small screens */
535
- }
536
- .modal-footer .form-control {
537
- width: 40px; /* Adjust input size for smaller screens */
538
- height: 35px;
539
- }
540
- }
541
- .quantity-control {
542
- display: flex;
543
- align-items: center;
544
- gap: 5px;
545
- }
546
-
547
- .quantity {
548
- font-size: 14px;
549
- font-weight: bold;
550
- min-width: 20px;
551
- text-align: center;
552
- }
553
-
554
- .btn-sm {
555
- padding: 2px 8px;
556
- font-size: 12px;
557
- }
558
- </style>
559
- </head>
560
- <body>
561
-
562
- <div class="fixed-top-bar">
563
- <!-- Avatar and Dropdown -->
564
- <div class="avatar-dropdown-container">
565
- <div class="avatar-icon">
566
- <span>{{ first_letter }}</span> <!-- Display the first letter of the customer's name -->
567
- </div>
568
- <div class="dropdown-menu">
569
- <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item">View Profile</a>
570
-
571
- <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item">Order History</a>
572
- <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
573
- </div>
574
- </div>
575
-
576
- <!-- Search Bar Section -->
577
- <div class="search-bar-container">
578
- <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." onkeyup="filterMenu()">
579
- <i class="bi bi-search search-icon"></i> <!-- Search icon inside the input -->
580
- </div>
581
- </div>
582
-
583
- <!-- Category Filter with Custom Radio Buttons -->
584
- <form method="get" action="/menu" class="text-center mb-4">
585
- <label class="form-label fw-bold">Select a Category:</label>
586
- <div class="form-check form-check-inline">
587
- {% for category in categories %}
588
- <input type="radio" id="category-{{ category }}" name="category" value="{{ category }}" class="custom-radio"
589
- {% if selected_category == category %}checked{% endif %} onchange="this.form.submit()">
590
- <label class="form-check-label" for="category-{{ category }}">{{ category }}</label>
591
- {% endfor %}
592
- </div>
593
- <!-- Separate Customized Dish radio button in a new div to align it properly -->
594
- <div class="form-check">
595
- <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish" class="custom-radio"
596
- {% if selected_category == "Customized Dish" %}checked{% endif %} onchange="this.form.submit()">
597
- <label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
598
- </div>
599
- </form>
600
-
601
- <!-- Show menu items only when Customized Dish is not selected -->
602
- <div class="container mt-4">
603
- <h1 class="text-center">Menu</h1>
604
-
605
- <!-- Display text boxes for Customized Dish -->
606
- {% if selected_category == "Customized Dish" %}
607
- <div id="custom-dish-form" class="mt-4">
608
- <h3>Create Your Custom Dish</h3>
609
- <form method="POST" action="/customdish/generate_custom_dish">
610
- <div class="mb-3">
611
- <label for="custom-dish-name" class="form-label">Dish Name</label>
612
- <input type="text" class="form-control" id="custom-dish-name" name="name" required>
613
- </div>
614
- <div class="mb-3">
615
- <label for="custom-dish-description" class="form-label">Dish Description</label>
616
- <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
617
- </div>
618
- <button type="submit" class="btn btn-primary">Submit</button>
619
- </form>
620
- </div>
621
- {% else %}
622
- <!-- Menu Sections -->
623
- {% for section, items in ordered_menu.items() %}
624
- <h3>{{ section }}</h3>
625
- <div class="row">
626
- {% for item in items %}
627
- <div class="col-md-6 mb-4">
628
- <div class="card menu-card">
629
- <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}"
630
- onerror="this.src='/static/placeholder.jpg';" loading="lazy">
631
- <div class="addbutton">
632
- <div class="card-body d-flex align-items-center justify-content-between">
633
- <div>
634
- <h5 class="card-title">{{ item.Name }}</h5>
635
- <p class="card-text">${{ item.Price__c }}</p>
636
- </div>
637
- <div class="d-flex flex-column align-items-center justify-content-center">
638
- {% if item.Section__c == 'Soft Drinks' %}
639
- <!-- Soft Drinks: Direct Add-to-Cart Button -->
640
- <div id="quantity-control-{{ loop.index }}" class="quantity-control" style="display: none;">
641
- <button class="btn btn-outline-secondary btn-sm" onclick="decreaseQuantity('{{ item.Name }}', {{ loop.index }})">−</button>
642
- <span class="quantity mx-2" id="quantity-{{ loop.index }}">1</span>
643
- <button class="btn btn-outline-secondary btn-sm" onclick="increaseQuantity('{{ item.Name }}', {{ loop.index }})">+</button>
644
- </div>
645
-
646
-
647
-
648
-
649
- <button class="btn btn-primary" id="add-btn-{{ loop.index }}"
650
- onclick="addSoftDrinkToCart('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image1__c }}', '{{ item.Section__c }}', '{{ selected_category }}', {{ loop.index }})">
651
- ADD
652
- </button>
653
- {% else %}
654
- <!-- Other Items: Modal Button -->
655
- <button class="btn btn-primary"
656
- data-bs-toggle="modal" data-bs-target="#itemModal"
657
- onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}', '{{ selected_category }}')">
658
- ADD
659
- </button>
660
- <div class="w-100 text-center">
661
- {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c != 'Soft Drinks' %}
662
- <h5 class="customisable-text">Customisable</h5>
663
- {% endif %}
664
- </div>
665
- {% endif %}
666
- </div>
667
- </div>
668
- </div>
669
- </div>
670
- </div>
671
- {% endfor %}
672
- </div>
673
-
674
-
675
- {% endfor %}
676
- {% endif %}
677
- </div>
678
-
679
- <!-- View Cart Button -->
680
- <div class="view-cart-container">
681
- <a href="{{ url_for('cart.cart') }}" class="view-cart-button">
682
- View Cart
683
- </a>
684
- </div>
685
-
686
- <!-- Modal for Item Details -->
687
- <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
688
- <div class="modal-dialog modal-dialog-centered">
689
- <div class="modal-content">
690
- <div class="modal-header">
691
- <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
692
- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
693
- </div>
694
- <div class="modal-body">
695
- <!-- Item Image -->
696
- <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
697
- <!-- Item Name -->
698
- <h5 id="modal-name" class="fw-bold text-center"></h5>
699
- <!-- Item Price -->
700
- <p id="modal-price" class="text-muted text-center"></p>
701
- <!-- Item Description -->
702
- <p id="modal-description" class="text-secondary"></p>
703
- <!-- Add-ons -->
704
- <div id="modal-addons" class="modal-addons mt-4">
705
- <h6>Customization Options</h6>
706
- <div id="addons-list" class="addons-container">Loading customization options...</div>
707
- </div>
708
- <div class="mt-4">
709
- <h6>Custom Request</h6>
710
- <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
711
- </div>
712
- <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
713
- </div>
714
- <!-- Quantity Controls and Add to Cart Button -->
715
- <div class="modal-footer d-flex align-items-center justify-content-between">
716
- <!-- Quantity Controls -->
717
- <div class="d-flex align-items-center gap-2">
718
- <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
719
- <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;"/>
720
- <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
721
- </div>
722
- <!-- Add to Cart Button -->
723
- <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
724
- </div>
725
- </div>
726
- </div>
727
- </div>
728
-
729
- <!-- JavaScript -->
730
- <script>
731
- Show item details and fetch customization options
732
- function showItemDetails(name, price, image, description, section, selectedCategory) {
733
- document.getElementById('modal-name').innerText = name;
734
- document.getElementById('modal-price').innerText = `$${price}`;
735
- document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
736
- document.getElementById('modal-description').innerText = description || 'No description available.';
737
- document.getElementById('addons-list').innerHTML = 'Loading customization options...';
738
- document.getElementById('modal-instructions').value = '';
739
-
740
- const modalSectionEl = document.getElementById('modal-section');
741
- modalSectionEl.setAttribute('data-section', section);
742
- modalSectionEl.setAttribute('data-category', selectedCategory);
743
-
744
- // Set the default quantity to 1
745
- document.getElementById('quantityInput').value = 1;
746
-
747
- // Fetch customization options based on the section
748
- fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
749
- .then(response => response.json())
750
- .then(data => {
751
- const addonsList = document.getElementById('addons-list');
752
- addonsList.innerHTML = ''; // Clear previous content
753
-
754
- if (!data.success || !data.addons || data.addons.length === 0) {
755
- addonsList.innerHTML = '<p>No customization options available.</p>';
756
- return;
757
- }
758
-
759
- // Display customization options inside styled divs
760
- data.addons.forEach(addon => {
761
- const sectionDiv = document.createElement('div');
762
- sectionDiv.classList.add('addon-section'); // Add styling class
763
-
764
- // Add section title
765
- const title = document.createElement('h6');
766
- title.innerText = addon.name;
767
- sectionDiv.appendChild(title);
768
-
769
- // Create options list
770
- const optionsContainer = document.createElement('div');
771
- addon.options.forEach((option, index) => {
772
- const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
773
- const listItem = document.createElement('div');
774
- listItem.classList.add('form-check');
775
- listItem.innerHTML = `
776
- <input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
777
- data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
778
- <label class="form-check-label" for="${optionId}">
779
- ${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}
780
- </label>
781
- `;
782
- optionsContainer.appendChild(listItem);
783
- });
784
- sectionDiv.appendChild(optionsContainer);
785
- addonsList.appendChild(sectionDiv);
786
- });
787
- })
788
- .catch(err => {
789
- console.error('Error fetching add-ons:', err);
790
- document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
791
- });
792
- }
793
-
794
-
795
-
796
-
797
-
798
-
799
-
800
-
801
-
802
-
803
-
804
-
805
- // Handle single-select/deselect logic for checkbox groups in all modals
806
- document.addEventListener('click', function(event) {
807
- if (event.target.classList.contains('addon-option')) {
808
- handleAddonClick(event.target);
809
- }
810
- });
811
-
812
- // Handle checkbox selection logic
813
- function handleAddonClick(checkbox) {
814
- const groupName = checkbox.getAttribute('data-group');
815
- const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides","Select Dip/Sauce","Extra Add-ons","Make it a Combo"].includes(groupName);
816
-
817
- // If it's not multi-select, uncheck all other checkboxes in the same group
818
- if (!isMultiSelectGroup) {
819
- const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
820
- checkboxes.forEach(otherCheckbox => {
821
- if (otherCheckbox !== checkbox) {
822
- otherCheckbox.checked = false;
823
- }
824
- });
825
- }
826
- }
827
- function filterMenu() {
828
- let input = document.getElementById('searchBar').value.toLowerCase(); // Get the value from search bar
829
- let sections = document.querySelectorAll('h3'); // Select section headers
830
- let items = document.querySelectorAll('.menu-card'); // Select all items
831
- let matchedSections = new Set(); // Store matched sections
832
-
833
- // Hide all items initially
834
- items.forEach(item => {
835
- let itemName = item.querySelector('.card-title').innerText.toLowerCase(); // Get item name
836
- let itemSection = item.closest('.row').previousElementSibling.innerText.toLowerCase(); // Get section name
837
-
838
- // If the search matches item name or section, show the item
839
- if (itemName.includes(input) || (itemSection && itemSection.includes(input))) {
840
- item.style.display = 'block'; // Show item if it matches search
841
- matchedSections.add(item.closest('.row')); // Add section to matched list
842
- } else {
843
- item.style.display = 'none'; // Hide item if not matched
844
- }
845
- });
846
-
847
- // Show or hide sections based on matched items
848
- sections.forEach(section => {
849
- let sectionRow = section.nextElementSibling; // The row containing items
850
- if (matchedSections.has(sectionRow)) {
851
- section.style.display = 'block'; // Show section header
852
- sectionRow.style.display = 'flex'; // Show section items
853
- } else {
854
- section.style.display = 'none'; // Hide section header
855
- sectionRow.style.display = 'none'; // Hide section items
856
- }
857
- });
858
- }
859
-
860
- function addToCartFromModal() {
861
- const itemName = document.getElementById('modal-name').innerText;
862
- let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
863
-
864
- // Validate item price
865
- if (isNaN(itemPrice)) {
866
- alert('Invalid price for the item. Please check the item details.');
867
- return;
868
- }
869
-
870
- const itemImage = document.getElementById('modal-img').src;
871
- console.log(itemName, itemPrice, itemImage); // Log values for debugging
872
- const modalSectionEl = document.getElementById('modal-section');
873
- const section = modalSectionEl.getAttribute('data-section');
874
- const selectedCategory = modalSectionEl.getAttribute('data-category');
875
- if (!itemName || !itemPrice || !section || !itemImage) {
876
- console.error('Missing data for cart item:', { itemName, itemPrice, section, itemImage});
877
- return;
878
- }
879
-
880
- // Collect selected add-ons
881
- let selectedAddOns = Array.from(
882
- document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
883
- ).map(addon => ({
884
- name: addon.getAttribute('data-name') || 'Default Name', // Fallback Name
885
- price: parseFloat(addon.getAttribute('data-price') || 0)
886
- }));
887
-
888
- // Get the selected quantity
889
- const quantity = parseInt(document.getElementById('quantityInput').value) || 1; // Default to 1 if invalid
890
-
891
- const instructions = document.getElementById('modal-instructions').value;
892
-
893
- // Prepare data for the cart
894
- const cartPayload = {
895
- itemName: itemName,
896
- itemPrice: itemPrice,
897
- itemImage: itemImage,
898
- section: section,
899
- category: selectedCategory,
900
- addons: selectedAddOns,
901
- instructions: instructions,
902
- quantity: quantity // Include the quantity
903
- };
904
-
905
- // Send the cart data to the server
906
- fetch('/cart/add', {
907
- method: 'POST',
908
- headers: {
909
- 'Content-Type': 'application/json',
910
- },
911
- body: JSON.stringify(cartPayload)
912
- })
913
- .then(response => response.json())
914
- .then(data => {
915
- if (data.success) {
916
- alert('Item added to cart successfully!');
917
- updateCartUI(data.cart); // Update cart UI after adding an item
918
- const modal = document.getElementById('itemModal');
919
- const modalInstance = bootstrap.Modal.getInstance(modal);
920
- modalInstance.hide();
921
- } else {
922
- alert(data.error || 'Failed to add item to cart.');
923
- }
924
- })
925
- .catch(err => {
926
- console.error('Error adding item to cart:', err);
927
- alert('An error occurred while adding the item to the cart.');
928
- });
929
- }
930
-
931
- function updateCartUI(cart) {
932
- if (!Array.isArray(cart)) {
933
- console.error('Invalid cart data:', cart);
934
- return;
935
- }
936
- const cartIcon = document.getElementById('cart-icon');
937
- cartIcon.innerText = cart.length; // Assuming cart is an array of items
938
- }
939
-
940
- function updateCartDisplay(cart) {
941
- if (!Array.isArray(cart)) {
942
- console.error('Invalid cart data:', cart);
943
- return;
944
- }
945
- // Optional: Update quantity on the cart page
946
- const cartCountElement = document.getElementById('cart-count');
947
- cartCountElement.innerText = cart.reduce((total, item)=> total+item.quantity,0); // Update cart item count //Sum of all quantities
948
-
949
- // Optionally, show a small success notification that the item was added
950
- const successNotification = document.createElement('div');
951
- successNotification.classList.add('success-notification');
952
- successNotification.innerText = 'Item added to cart!';
953
- document.body.appendChild(successNotification);
954
- setTimeout(() => {
955
- successNotification.remove(); // Remove success notification after a few seconds
956
- }, 2000);
957
- }
958
-
959
- document.addEventListener('DOMContentLoaded', function () {
960
- // Get references to the quantity buttons and the input field
961
- const decreaseBtn = document.getElementById('decreaseQuantity');
962
- const increaseBtn = document.getElementById('increaseQuantity');
963
- const quantityInput = document.getElementById('quantityInput');
964
-
965
- // Add event listener to decrease button
966
- decreaseBtn.addEventListener('click', function () {
967
- let currentQuantity = parseInt(quantityInput.value);
968
- if (currentQuantity > 1) {
969
- currentQuantity--;
970
- quantityInput.value = currentQuantity;
971
- }
972
- });
973
-
974
- // Add event listener to increase button
975
- increaseBtn.addEventListener('click', function () {
976
- let currentQuantity = parseInt(quantityInput.value);
977
- currentQuantity++;
978
- quantityInput.value = currentQuantity;
979
- });
980
- });
981
-
982
- // Function to add Soft Drink to cart directly
983
- function addSoftDrinkToCart(name, price, image, section, category, index) {
984
- const itemPrice = parseFloat(price);
985
- const quantity = 1; // Default quantity
986
-
987
- const cartPayload = {
988
- itemName: name,
989
- itemPrice: itemPrice,
990
- itemImage: image || '/static/placeholder.jpg',
991
- section: section,
992
- category: category,
993
- addons: [], // No add-ons for Soft Drinks
994
- instructions: '', // No instructions for Soft Drinks
995
- quantity: quantity
996
- };
997
-
998
- fetch('/cart/add', {
999
- method: 'POST',
1000
- headers: {
1001
- 'Content-Type': 'application/json',
1002
- },
1003
- body: JSON.stringify(cartPayload)
1004
- })
1005
- .then(response => response.json())
1006
- .then(data => {
1007
- if (data.success) {
1008
- // Hide the ADD button and show quantity controls
1009
- document.getElementById(`add-btn-${index}`).style.display = 'none';
1010
- document.getElementById(`quantity-control-${index}`).style.display = 'flex';
1011
- updateCartUI(data.cart);
1012
- alert('Soft Drink added to cart successfully!');
1013
- } else {
1014
- alert(data.error || 'Failed to add Soft Drink to cart.');
1015
- }
1016
- })
1017
- .catch(err => {
1018
- console.error('Error adding Soft Drink to cart:', err);
1019
- alert('An error occurred while adding the Soft Drink to the cart.');
1020
- });
1021
- }
1022
- // Function to increase quantity
1023
- function increaseQuantity(name, index) {
1024
- let quantityElement = document.getElementById(`quantity-${index}`);
1025
- let currentQuantity = parseInt(quantityElement.innerText);
1026
- currentQuantity++;
1027
- quantityElement.innerText = currentQuantity;
1028
-
1029
- updateCartQuantity(name, currentQuantity);
1030
- }
1031
-
1032
- // Function to decrease quantity
1033
- function decreaseQuantity(name, index) {
1034
- let quantityElement = document.getElementById(`quantity-${index}`);
1035
- let currentQuantity = parseInt(quantityElement.innerText);
1036
- if (currentQuantity > 1) {
1037
- currentQuantity--;
1038
- quantityElement.innerText = currentQuantity;
1039
- updateCartQuantity(name, currentQuantity);
1040
- } else {
1041
- // Remove from cart and revert to ADD button
1042
- removeFromCart(name, index);
1043
- }
1044
- }
1045
- // Existing updateCartUI function (unchanged, but included for reference)
1046
- function updateCartUI(cart) {
1047
- if (!Array.isArray(cart)) {
1048
- console.error('Invalid cart data:', cart);
1049
- return;
1050
- }
1051
- const cartIcon = document.getElementById('cart-icon');
1052
- if (cartIcon) {
1053
- cartIcon.innerText = cart.length; // Update cart icon if it exists
1054
- }
1055
- }
1056
-
1057
- </script>
1058
-
1059
- <!-- Bootstrap JS -->
1060
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
1061
- </body>
1062
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/order.html DELETED
@@ -1,210 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Order Summary</title>
7
- <!-- Bootstrap CSS -->
8
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
9
- <style>
10
- body {
11
- font-family: 'Arial', sans-serif;
12
- background-color: #fdf4e3; /* Updated background color */
13
- color: #333333; /* Dark gray text */
14
- margin: 0;
15
- padding: 0;
16
- display: flex;
17
- flex-direction: column;
18
- min-height: 100vh;
19
- }
20
- .order-container {
21
- max-width: 768px;
22
- margin: 40px auto;
23
- padding: 20px;
24
- background-color: #ffffff; /* Set the container background to white */
25
- border-radius: 15px;
26
- box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
27
- border: 1px solid #ffffff;
28
- flex-grow: 1;
29
- }
30
- .cart-item {
31
- display: flex;
32
- justify-content: space-between;
33
- background-color: #fffcf5; /* Slightly lighter beige */
34
- border-radius: 8px;
35
- border: 1px solid #ffe5b4; /* Light orange border */
36
- padding: 10px;
37
- margin-bottom: 10px;
38
- }
39
- .cart-item img {
40
- width: 70px;
41
- height: 70px;
42
- object-fit: cover;
43
- border-radius: 5px;
44
- border: 1px solid #ffcc80; /* Light orange border around images */
45
- }
46
- .cart-item-details {
47
- flex: 1;
48
- margin-left: 15px;
49
- }
50
- .cart-item-title {
51
- font-size: 1.2rem;
52
- font-weight: bold;
53
- color: #000000; /* Change the color to black */
54
- }
55
- .cart-item-addons,
56
- .cart-item-instructions {
57
- font-size: 0.9rem;
58
- color: #000000; /* Change the color to black */
59
- }
60
- .cart-item-actions {
61
- font-size: 1.2rem;
62
- font-weight: bold;
63
- color: #2b9348;
64
- }
65
- .order-summary {
66
- text-align: right;
67
- margin-top: 15px;
68
- }
69
- .total-price {
70
- font-size: 1.5rem;
71
- font-weight: bold;
72
- color: #2b9348; /* Green for the total price */
73
- }
74
- .back-to-menu {
75
- display: block;
76
- margin: 30px auto 10px auto;
77
- padding: 10px 20px;
78
- background-color: #ff5722;
79
- color: #ffffff;
80
- border: none;
81
- border-radius: 25px;
82
- font-size: 1rem;
83
- font-weight: bold;
84
- text-align: center;
85
- text-decoration: none;
86
- width: 100%;
87
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
88
- transition: background-color 0.3s ease;
89
- }
90
- .back-to-menu:hover {
91
- background-color: #ff5722;
92
- text-decoration: none;
93
- }
94
- footer {
95
- background-color: #333333;
96
- color: #ffffff;
97
- text-align: center;
98
- padding: 15px 10px;
99
- margin-top: auto;
100
- }
101
- footer p {
102
- margin: 0;
103
- font-size: 1rem;
104
- }
105
- footer p span {
106
- color: #ffcc00;
107
- font-weight: bold;
108
- }
109
- .totsl_bill {
110
- max-width: 768px;
111
- }
112
- .yourorder {
113
- font-family: Serif;
114
- color: #ff5722; /* Orange color for "Your Order Summary" */
115
- font-size: 1.5rem; /* Adjusted for better visibility */
116
- font-weight: bold;
117
- }
118
- /* Remove any gap between Sub-Total and Discount */
119
- .d-flex {
120
- margin-bottom: 0px !important; /* Remove margin */
121
- }
122
- .d-flex:first-child {
123
- margin-top: 0px !important; /* Ensure no space above Sub-Total */
124
- }
125
- /* Remove padding and margins from the individual fields */
126
- .d-flex .cart-item-actions {
127
- margin-bottom: 0px !important; /* Remove margin between fields */
128
- }
129
- .cart-item-instructions {
130
- word-wrap: break-word; /* Ensures text wraps to the next line */
131
- white-space: normal; /* Allows text to wrap naturally */
132
- overflow-wrap: break-word; /* Breaks long words to prevent overflow */
133
- max-width: 100%; /* Ensures the text stays within the container's width */
134
- line-height: 1.5; /* Increases line height for better readability */
135
- padding: 5px 0; /* Adds some padding for better text spacing */
136
- word-break: break-word; /* Prevents words from overflowing */
137
- }
138
-
139
- </style>
140
- </head>
141
- <body>
142
- <div class="container">
143
- <div class="order-container">
144
- <h4 class="mb-4 text-center yourorder">Your Order Summary</h4>
145
-
146
- {% if order %}
147
- {% for line in order.Order_Details__c.split('\n') %}
148
- {% set item_parts = line.split('|') %}
149
- <div class="cart-item">
150
- <!-- Item Image -->
151
- <img src="{{ item_parts[4].strip().replace('Image:', '') }}"
152
- alt="{{ item_parts[0].strip() }}"
153
- onerror="this.src='/static/placeholder.jpg';">
154
-
155
- <!-- Item Details -->
156
- <div class="cart-item-details">
157
- <div class="cart-item-title">{{ item_parts[0].strip() }}</div> <!-- Item Name & Quantity -->
158
-
159
-
160
- <div class="cart-item-addons">
161
- <small class="text-muted">Add-ons: {{ item_parts[1].strip().replace('Add-Ons:', '') }}</small>
162
- </div>
163
-
164
- <div class="cart-item-instructions">
165
- <small class="text-muted">Instructions: {{ item_parts[2].strip().replace('Instructions:', '') }}</small>
166
- </div>
167
- </div>
168
-
169
- <!-- Price -->
170
- <div class="cart-item-actions m">
171
- <span style="font-size: 16px; margin-right: 13px">{{ item_parts[3].strip().replace('Price:', '') }}</span>
172
- </div>
173
- </div>
174
- {% endfor %}
175
-
176
- <!-- Total Section -->
177
- <div class="container mt-5 cart-item">
178
- <div class="container">
179
- <div class="d-flex justify-content-between mb-3">
180
- <p><strong>Sub-Total:</strong></p>
181
- <p class="cart-item-actions" style="font-size: 16px;">${{ order.Total_Amount__c }}</p>
182
- </div>
183
- <div class="d-flex justify-content-between mb-3">
184
- <p><strong>Discount:</strong></p>
185
- <p class="cart-item-actions" style="font-size: 16px;">${{ "%.2f"|format(order.Discount__c) }}</p>
186
- </div>
187
- <!-- Add dotted line here -->
188
- <div style="border-bottom: 2px dotted #000; margin-bottom: 10px;"></div>
189
- <div class="d-flex justify-content-between mb-3">
190
- <p><strong>Total Bill:</strong></p>
191
- <p class="cart-item-actions" style="font-size: 16px;">${{ "%.2f"|format(order.Total_Bill__c) }}</p>
192
- </div>
193
- </div>
194
- </div>
195
-
196
- {% else %}
197
- <p class="text-center">No order details available.</p>
198
- {% endif %}
199
-
200
- <!-- Back to Menu Button -->
201
- <a href="/menu" class="back-to-menu">Back to Menu</a>
202
- </div>
203
- </div>
204
-
205
- <!-- Footer -->
206
- <footer>
207
- <p>Thank you for dining with us! <span>We look forward to serving you again.</span></p>
208
- </footer>
209
- </body>
210
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/order_history.html DELETED
@@ -1,241 +0,0 @@
1
- <html lang="en">
2
- <head>
3
- <meta charset="UTF-8">
4
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
5
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
6
- <title>Order History</title>
7
- <style>
8
- /* Reset padding and margin for all elements */
9
- * {
10
- margin: 0;
11
- padding: 0;
12
- box-sizing: border-box;
13
- }
14
- body {
15
- font-family: Arial, sans-serif;
16
- background-color: #fdf4e3; /* Light orange background for the whole page */
17
- margin: 0;
18
- padding: 0;
19
- }
20
- /* Light Orange Background for the back-side */
21
- .background {
22
- padding: 8vw 0;
23
- position: relative;
24
- }
25
- /* Green Back Button styling */
26
- .back-button {
27
- position: absolute;
28
- top: 15px;
29
- left: 15px;
30
- display: inline-block;
31
- background-color: green; /* Green color */
32
- color: white;
33
- padding: 10px 20px;
34
- text-decoration: none;
35
- font-weight: bold;
36
- border-radius: 4px;
37
- z-index: 10; /* Ensure it stays above other content */
38
- }
39
- .back-button:hover {
40
- background-color: darkgreen; /* Darker green color on hover */
41
- }
42
- /* Container */
43
- .container {
44
- width: 85%; /* Decreased width for smaller template size */
45
- max-width: 450px; /* Reduced max-width */
46
- margin: 30px auto 0; /* Added margin-top to push content down */
47
- padding: 15px;
48
- background-color: white;
49
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
50
- border-radius: 8px;
51
- }
52
- .order-item {
53
- padding: 12px;
54
- border: 1px solid #6c757d;
55
- margin-bottom: 12px;
56
- border-radius: 5px;
57
- }
58
- .order-details {
59
- font-size: 14px;
60
- font-weight: bold;
61
- color: black;
62
- }
63
- .order-details p {
64
- margin: 4px 0;
65
- }
66
- .order-date-time {
67
- font-size: 11px;
68
- color: black;
69
- }
70
- .order-price {
71
- font-size: 13px;
72
- font-weight: bold;
73
- color: black;
74
- margin: 5px 0;
75
- }
76
- .order-status {
77
- font-size: 11px;
78
- font-weight: bold;
79
- margin-top: 6px;
80
- }
81
- .order-status.pending {
82
- color: green;
83
- }
84
- .order-status.completed {
85
- color: #28a745;
86
- }
87
- .order-buttons {
88
- margin-top: 6px;
89
- }
90
- .reorder-btn, .rate-order-btn {
91
- background-color: #ff7f00;
92
- color: white;
93
- border: none;
94
- padding: 6px 12px;
95
- margin-right: 8px;
96
- cursor: pointer;
97
- border-radius: 4px;
98
- }
99
- .reorder-btn:hover, .rate-order-btn:hover {
100
- background-color: #f55b00;
101
- }
102
- .total-price {
103
- font-size: 14px;
104
- font-weight: bold;
105
- color: #333;
106
- margin-top: 15px;
107
- }
108
- .order-heading {
109
- font-size: 16px;
110
- font-weight: bold;
111
- color: #ff7f00;
112
- margin-bottom: 15px;
113
- text-align: center;
114
- }
115
- .show-more-btn {
116
- background-color: #ff7f00;
117
- color: white;
118
- padding: 10px 20px;
119
- border: none;
120
- cursor: pointer;
121
- border-radius: 4px;
122
- margin-top: 20px;
123
- font-weight: bold;
124
- }
125
- .show-more-btn:hover {
126
- background-color: #f55b00;
127
- }
128
- /* Responsive design adjustments */
129
- @media (max-width: 480px) {
130
- .container {
131
- width: 90%;
132
- margin: 30px auto 0;
133
- padding: 10px;
134
- }
135
- .order-details {
136
- font-size: 12px;
137
- }
138
- .order-price {
139
- font-size: 12px;
140
- }
141
- .order-status {
142
- font-size: 10px;
143
- }
144
- .order-heading {
145
- font-size: 14px;
146
- }
147
- .show-more-btn {
148
- padding: 6px 12px;
149
- }
150
- .back-button {
151
- top: 10px;
152
- left: 10px;
153
- padding: 8px 16px;
154
- }
155
- }
156
- </style>
157
- </head>
158
- <body>
159
-
160
- <!-- Background container with light orange -->
161
- <div class="background">
162
- <a href="{{ url_for('menu.menu') }}" class="back-button"><i class="fa fa-arrow-left"></i></a>
163
-
164
- <div class="container">
165
- <div class="order-heading">Order History</div>
166
-
167
- <!-- Loop through the orders (first 3) -->
168
- {% for order in orders[:3] %}
169
- <div class="order-item">
170
- <div class="order-details">
171
- <p>{{ order.formatted_items }}</p>
172
- </div>
173
-
174
- <div class="order-date-time">
175
- <p>{{ order.formatted_date }}</p>
176
- </div>
177
-
178
- <div class="order-price">
179
- <p>Total: ₹{{ order.Total_Bill__c }}</p>
180
- </div>
181
-
182
- <div class="order-status {% if order.order_status == 'Pending' %}pending{% else %}completed{% endif %}">
183
- <p>Status: {{ order.order_status }}</p>
184
- </div>
185
- </div>
186
- {% endfor %}
187
-
188
- <!-- Loop through the remaining orders (hidden initially) -->
189
- <div class="more-orders" id="more-orders">
190
- {% for order in orders[3:] %}
191
- <div class="order-item">
192
- <div class="order-details">
193
- <p>{{ order.formatted_items }}</p>
194
- </div>
195
-
196
- <div class="order-date-time">
197
- <p>Order Placed: {{ order.formatted_date }}</p>
198
- </div>
199
-
200
- <div class="order-price">
201
- <p>Total: ₹{{ order.Total_Bill__c }}</p>
202
- </div>
203
-
204
- <div class="order-status {% if order.order_status == 'Pending' %}pending{% else %}completed{% endif %}">
205
- <p>Status: {{ order.order_status }}</p>
206
- </div>
207
- </div>
208
- {% endfor %}
209
- </div>
210
-
211
- <!-- Show More button -->
212
- {% if orders|length > 3 %}
213
- <button class="show-more-btn" onclick="toggleOrders()">Show More</button>
214
- {% endif %}
215
-
216
- <!-- If no orders exist -->
217
- {% if not orders %}
218
- <div class="no-orders">
219
- <p>No orders found.</p>
220
- </div>
221
- {% endif %}
222
- </div>
223
- </div>
224
-
225
- <script>
226
- // Function to toggle between Show More and Show Less
227
- function toggleOrders() {
228
- const moreOrders = document.getElementById("more-orders");
229
- const button = document.querySelector(".show-more-btn");
230
- if (moreOrders.style.display === "none") {
231
- moreOrders.style.display = "block";
232
- button.innerHTML = "Show Less"; // Change button text
233
- } else {
234
- moreOrders.style.display = "none";
235
- button.innerHTML = "Show More"; // Change button text back
236
- }
237
- }
238
- </script>
239
-
240
- </body>
241
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/redirect_page.html DELETED
@@ -1,25 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Logging Out...</title>
7
- <script type="text/javascript">
8
- // Get the table number from Flask (if needed)
9
- var tableNumber = "{{ table_number }}";
10
- window.onload = function() {
11
- // Construct the logout redirect URL with table number (optional)
12
- let redirectURL = "/login"; // Redirect to login page
13
- if (tableNumber) {
14
- redirectURL += "?table=" + encodeURIComponent(tableNumber);
15
- }
16
- // Optionally, redirect the current tab to the login page
17
- window.location.href = redirectURL;
18
- };
19
- </script>
20
- </head>
21
- <body>
22
- <h1>Logging out...</h1>
23
- <p>Please wait while we log you out and redirect you to the login page.</p>
24
- </body>
25
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/rewards.html DELETED
@@ -1,65 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>User Rewards</title>
7
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
8
- </head>
9
- <body>
10
- <div class="container mt-5">
11
- <h1>User Rewards</h1>
12
- <div id="rewards-container" class="mt-3"></div>
13
- </div>
14
-
15
- <script>
16
- // Fetch rewards for the user
17
- fetch('/rewards')
18
- .then(response => response.json())
19
- .then(data => {
20
- if (data.success) {
21
- const rewardsContainer = document.getElementById('rewards-container');
22
- data.rewards.forEach(reward => {
23
- const rewardDiv = document.createElement('div');
24
- rewardDiv.className = 'card mb-3';
25
- rewardDiv.innerHTML = `
26
- <div class="card-body">
27
- <h5 class="card-title">${reward.Name}</h5>
28
- <p>Coupon Code: ${reward.Coupon_Code__c || 'N/A'}</p>
29
- <p>Points Earned: ${reward.Points_Earned__c}</p>
30
- <p>Points Redeemed: ${reward.Points_Redeemed__c}</p>
31
- <p>Total Points: ${reward.Total_Reward_Points__c}</p>
32
- <p>Discount: ${reward.Discount_Perc__c || 0}%</p>
33
- <button class="btn btn-primary" onclick="redeemPoints('${reward.Id}', 10)">Redeem 10 Points</button>
34
- </div>
35
- `;
36
- rewardsContainer.appendChild(rewardDiv);
37
- });
38
- } else {
39
- alert('Failed to load rewards');
40
- }
41
- })
42
- .catch(err => console.error('Error:', err));
43
- // Redeem points
44
- function redeemPoints(rewardId, points) {
45
- fetch('/redeem', {
46
- method: 'POST',
47
- headers: {
48
- 'Content-Type': 'application/json'
49
- },
50
- body: JSON.stringify({ reward_id: rewardId, points: points })
51
- })
52
- .then(response => response.json())
53
- .then(data => {
54
- if (data.success) {
55
- alert(data.message);
56
- location.reload(); // Refresh to show updated points
57
- } else {
58
- alert('Error redeeming points: ' + data.error);
59
- }
60
- })
61
- .catch(err => console.error('Error:', err));
62
- }
63
- </script>
64
- </body>
65
- </html>