geethareddy commited on
Commit
9697028
·
verified ·
1 Parent(s): 39ffa9b

Create menu

Browse files
Files changed (1) hide show
  1. menu +226 -0
menu ADDED
@@ -0,0 +1,226 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <!-- Preload Critical Resources -->
11
+ <link rel="preload" href="/static/placeholder.mp4" as="video">
12
+ {% for section, items in ordered_menu.items() %}
13
+ {% for item in items[:1] %}
14
+ <link rel="preload" href="{{ item.Video1__c | default('/static/placeholder.mp4') }}" as="video" fetchpriority="high">
15
+ {% endfor %}
16
+ {% endfor %}
17
+ <style>
18
+ /* Same CSS styles as provided */
19
+ </style>
20
+ </head>
21
+ <body>
22
+ <div class="fixed-top-bar">
23
+ <div class="avatar-dropdown-container">
24
+ <div class="avatar-icon">
25
+ <span>{{ first_letter }}</span>
26
+ </div>
27
+ <div class="dropdown-menu">
28
+ <a href="{{ url_for('user_details.customer_details') }}" class="dropdown-item">View Profile</a>
29
+ <a href="{{ url_for('orderhistory.order_history') }}" class="dropdown-item">Order History</a>
30
+ <a href="{{ url_for('combined_summary.combined_summary') }}" class="dropdown-item">MY Summary</a>
31
+ <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
32
+ </div>
33
+ </div>
34
+ <div class="search-bar-container">
35
+ <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." autocomplete="off">
36
+ <i class="bi bi-search search-icon"></i>
37
+ <i class="bi bi-mic mic-icon" id="micIcon"></i>
38
+ </div>
39
+ </div>
40
+
41
+ <form method="get" action="/menu" class="text-center mb-4" id="filter-form">
42
+ <label class="form-label fw-bold">Filters:</label>
43
+ <div class="toggle-container">
44
+ <!-- Veg Only Toggle -->
45
+ <input type="checkbox" id="veg-toggle" name="veg"
46
+ {% if selected_category == "Veg" %}checked{% endif %}
47
+ class="custom-toggle" onchange="handleToggle('veg')"
48
+ aria-label="Toggle Vegetarian filter">
49
+ <label for="veg-toggle">Veg</label>
50
+ </div>
51
+ <div class="toggle-container">
52
+ <!-- Customized Dish Toggle -->
53
+ <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish"
54
+ {% if selected_category == "Customized Dish" %}checked{% endif %}
55
+ class="custom-toggle" onchange="handleToggle('custom')"
56
+ aria-label="Toggle Customized Dish filter">
57
+ <label for="category-CustomizedDish">Customized Dish</label>
58
+ </div>
59
+ </form>
60
+
61
+ <div class="container mt-4">
62
+ {% if selected_category == "Customized Dish" %}
63
+ <div id="custom-dish-form" class="mt-4">
64
+ <!-- Removed Chef Bot Code Here -->
65
+ </div>
66
+ {% else %}
67
+ {% if ordered_menu.items()|length == 0 %}
68
+ <p>No menu items available for this category.</p>
69
+ {% else %}
70
+ {% for section, items in ordered_menu.items() %}
71
+ <h3>{{ section }}</h3>
72
+ <div class="row">
73
+ {% for item in items %}
74
+ <div class="col-md-6 mb-4">
75
+ <div class="card menu-card" data-item-name="{{ item.Name | default('Unnamed Item') }}" data-item-section="{{ item.Section__c | default(section) }}">
76
+ <video
77
+ class="card-img-top menu-video"
78
+ muted
79
+ loop
80
+ preload="auto"
81
+ data-src="{{ item.Video1__c | default('/static/placeholder.mp4') }}"
82
+ poster="{{ item.Image1__c | default('/static/placeholder.jpg') }}"
83
+ width="350"
84
+ height="200"
85
+ onmouseover="this.play()"
86
+ onmouseout="this.pause(); this.currentTime = 0;"
87
+ onerror="this.poster='/static/placeholder.jpg';">
88
+ <source src="{{ item.Video1__c | default('/static/placeholder.mp4') }}" type="video/mp4">
89
+ Your browser does not support the video tag.
90
+ </video>
91
+ <div class="addbutton">
92
+ <div class="card-body d-flex align-items-center justify-content-between">
93
+ <div>
94
+ <h5 class="card-title">{{ item.Name | default('Unnamed Item') }}</h5>
95
+ <p class="card-text price">${{ item.Price__c | default('0.00') }}</p>
96
+ </div>
97
+ <div class="d-flex flex-column align-items-center justify-content-center">
98
+ <div class="button-container"
99
+ data-item-name="{{ item.Name | default('Unnamed Item') }}"
100
+ data-item-price="{{ item.Price__c | default('0.00') }}"
101
+ data-item-image="{{ item.Image1__c | default('/static/placeholder.jpg') }}"
102
+ data-item-section="{{ item.Section__c | default(section) }}"
103
+ data-item-category="{{ selected_category }}"
104
+ data-item-description="{{ item.Description__c | default('No description') }}"
105
+ data-item-image2="{{ item.Image2__c | default(item.Image1__c) }}">
106
+ {% if item.Section__c == 'Soft Drinks' %}
107
+ <button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)">ADD</button>
108
+ {% else %}
109
+ <button class="btn btn-primary"
110
+ data-bs-toggle="modal"
111
+ data-bs-target="#itemModal"
112
+ onclick="showItemDetails('{{ item.Name | default('Unnamed Item') }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) }}', '{{ item.Description__c | default('No description') }}', '{{ item.Section__c | default(section) }}', '{{ selected_category }}')">
113
+ ADD
114
+ </button>
115
+ {% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' %}
116
+ <span class="customisable-text">Customisable</span>
117
+ {% endif %}
118
+ {% endif %}
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ {% if item.Section__c != 'Soft Drinks' %}
124
+ <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}">Show Details</div>
125
+ <div class="item-details" id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}">
126
+ <h6>Description</h6>
127
+ <p>{{ item.Description__c | default('No description available') }}</p>
128
+ <h6>Ingredients</h6>
129
+ <p>{{ item.Ingredientsinfo__c | default('Not specified') }}</p>
130
+ <h6>Nutritional Info</h6>
131
+ <p class="nutritional-info">{{ item.NutritionalInfo__c | default('Not available') }}</p>
132
+ <h6>Allergens</h6>
133
+ <p>{{ item.Allergens__c | default('None listed') }}</p>
134
+ </div>
135
+ {% endif %}
136
+ </div>
137
+ </div>
138
+ {% endfor %}
139
+ </div>
140
+ {% endfor %}
141
+ {% endif %}
142
+ {% endif %}
143
+ </div>
144
+
145
+ <div class="bottom-action-bar">
146
+ <a href="{{ url_for('orderhistory.order_history') }}" class="btn btn-order-history">
147
+ <i class="bi bi-clock-history"></i> Order History
148
+ </a>
149
+ <a href="{{ url_for('cart.cart') }}" class="btn btn-view-cart">
150
+ <i class="bi bi-cart"></i> View Cart
151
+ <span id="cart-item-count" class="cart-icon-badge" style="display: none;">0</span>
152
+ </a>
153
+ </div>
154
+
155
+ <!-- Modal for Item Details -->
156
+ <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
157
+ <div class="modal-dialog modal-dialog-centered">
158
+ <div class="modal-content">
159
+ <div class="modal-header">
160
+ <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
161
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
162
+ </div>
163
+ <div class="modal-body">
164
+ <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
165
+ <h5 id="modal-name" class="fw-bold text-center"></h5>
166
+ <p id="modal-price" class="text-muted text-center"></p>
167
+ <p id="modal-description" class="text-secondary"></p>
168
+ <div id="modal-addons" class="modal-addons mt-4">
169
+ <h5>Customization Options</h5>
170
+ <div id="addons-list" class="addons-container addon-loading"></div>
171
+ </div>
172
+ <div class="mt-4">
173
+ <h6>Special Instructions</h6>
174
+ <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
175
+ </div>
176
+ <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
177
+ </div>
178
+ <div class="modal-footer d-flex align-items-center justify-content-between">
179
+ <div class="d-flex align-items-center gap-2">
180
+ <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
181
+ <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;"/>
182
+ <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
183
+ </div>
184
+ <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Modal for Soft Drinks Quantity Selection -->
191
+ <div class="modal fade" id="softDrinkModal" tabindex="-1" aria-labelledby="softDrinkModalLabel" aria-hidden="true">
192
+ <div class="modal-dialog modal-dialog-centered">
193
+ <div class="modal-content">
194
+ <div class="modal-header">
195
+ <h5 class="modal-title" id="softDrinkModalLabel">Select Quantity</h5>
196
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
197
+ </div>
198
+ <div class="modal-body">
199
+ <img id="soft-drink-image" class="img-fluid rounded mb-3 d-block mx-auto" alt="Soft Drink Image">
200
+ <div class="text-center mb-3">
201
+ <h5 id="soft-drink-name"></h5>
202
+ <p id="soft-drink-price"></p>
203
+ </div>
204
+ <div class="quantity-controls">
205
+ <button type="button" class="btn" id="soft-drink-decrease" onclick="updateSoftDrinkQuantity(-1)" aria-label="Decrease quantity by 1">-</button>
206
+ <input type="text" class="form-control text-center" id="soft-drink-quantity" value="1" readonly aria-label="Selected quantity">
207
+ <button type="button" class="btn" id="soft-drink-increase" onclick="updateSoftDrinkQuantity(1)" aria-label="Increase quantity by 1">+</button>
208
+ </div>
209
+ </div>
210
+ <div class="modal-footer">
211
+ <div class="quantity-controls-footer">
212
+ <button type="button" class="btn" id="soft-drink-decrease-footer" onclick="updateSoftDrinkQuantity(-1)" aria-label="Decrease quantity by 1">-1</button>
213
+ <button type="button" class="btn" id="soft-drink-increase-footer" onclick="updateSoftDrinkQuantity(1)" aria-label="Increase quantity by 1">+1</button>
214
+ </div>
215
+ <button type="button" class="btn btn-primary" onclick="addSoftDrinkToCart()" aria-label="Add soft drink to cart">Add to Cart</button>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
222
+ <script>
223
+ /* JavaScript functions here */
224
+ </script>
225
+ </body>
226
+ </html>