Hugging Face's logo

Spaces:
geethareddy
/
BiryaniHubflaskcustomize
Runtime error

App Files Community
geethareddy commited on
Commit
e3eb007
·
verified ·
1 Parent(s): 93699eb

Update templates/menu.html

Browse files
Files changed (1) hide show
  1. templates/menu.html +95 -124
templates/menu.html CHANGED
@@ -27,7 +27,6 @@
27
  margin: auto;
28
  display: flex;
29
  flex-direction: column;
30
- position: relative;
31
  }
32
  .menu-image {
33
  height: 200px;
@@ -52,27 +51,27 @@
52
  background-color: #0FAA39;
53
  border-color: #0FAA39;
54
  }
 
55
  .btn-customize {
56
  font-size: 13px;
57
  font-weight: bold;
58
  border-radius: 5px;
59
- background-color: #0FAA39;
60
- border-color: #0FAA39;
61
- position: absolute;
62
- right: 10px; /* Align the Customize button to the right */
63
- bottom: 10px; /* Place it at the bottom right corner of the image */
64
  display: inline-flex;
65
- justify-content: center;
66
  align-items: center;
67
- padding: 5px 15px;
68
- }
69
- .btn-customize i {
70
- margin-left: 5px;
71
  }
72
- .btn-primary:hover, .btn-customize:hover {
73
  background-color: #0FAA39;
 
74
  border-color: #0FAA39;
75
  }
 
 
 
76
  .view-cart-container {
77
  position: fixed;
78
  bottom: 20px;
@@ -100,125 +99,78 @@
100
  </head>
101
  <body>
102
 
103
- <!-- Fixed Top Bar -->
104
- <div class="fixed-top-bar">
105
- <div class="avatar-dropdown-container">
106
- <div class="avatar-icon">
107
- <span>{{ first_letter }}</span> <!-- Display the first letter of the customer's name -->
108
- </div>
109
- <div class="dropdown-menu">
110
- <a href="{{ url_for('customer_details') }}" class="dropdown-item">View Profile</a>
111
- <a href="{{ url_for('order_history') }}" class="dropdown-item">Order History</a>
112
- <a href="{{ url_for('logout') }}" class="dropdown-item">Logout</a>
113
- </div>
114
- </div>
115
-
116
- <div class="search-bar-container">
117
- <input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." onkeyup="filterMenu()">
118
- <i class="bi bi-search search-icon"></i>
119
- </div>
120
- </div>
121
-
122
- <!-- Category Filter -->
123
- <form method="get" action="/menu" class="text-center mb-4">
124
- <label class="form-label fw-bold">Select a Category:</label>
125
- <div class="form-check form-check-inline">
126
- {% for category in categories %}
127
- <input type="radio" id="category-{{ category }}" name="category" value="{{ category }}" class="custom-radio"
128
- {% if selected_category == category %}checked{% endif %} onchange="this.form.submit()">
129
- <label class="form-check-label" for="category-{{ category }}">{{ category }}</label>
130
- {% endfor %}
131
- </div>
132
- <div class="form-check">
133
- <input type="radio" id="category-CustomizedDish" name="category" value="Customized Dish" class="custom-radio"
134
- {% if selected_category == "Customized Dish" %}checked{% endif %} onchange="this.form.submit()">
135
- <label class="form-check-label" for="category-CustomizedDish">Customized Dish</label>
136
- </div>
137
- </form>
138
-
139
- <!-- Menu Section -->
140
  <div class="container mt-4">
141
  <h1 class="text-center">Menu</h1>
142
 
143
- {% if selected_category == "Customized Dish" %}
144
- <div id="custom-dish-form" class="mt-4">
145
- <h3>Create Your Custom Dish</h3>
146
- <form method="POST" action="/generate_custom_dish">
147
- <div class="mb-3">
148
- <label for="custom-dish-name" class="form-label">Dish Name</label>
149
- <input type="text" class="form-control" id="custom-dish-name" name="name" required>
 
 
 
 
 
150
  </div>
151
- <div class="mb-3">
152
- <label for="custom-dish-description" class="form-label">Dish Description</label>
153
- <textarea class="form-control" id="custom-dish-description" name="description" required></textarea>
154
- </div>
155
- <button type="submit" class="btn btn-primary">Submit</button>
156
- </form>
157
  </div>
158
- {% else %}
159
- {% for section, items in ordered_menu.items() %}
160
- <h3>{{ section }}</h3>
161
- <div class="row">
162
- {% for item in items %}
163
- <div class="col-md-6 mb-4">
164
- <div class="card menu-card">
165
- <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
166
- <div class="card-body">
167
- <h5 class="card-title">{{ item.Name }}</h5>
168
- <p class="card-text">${{ item.Price__c }}</p>
169
- <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal"
170
- onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
171
- Add
172
- </button>
173
- <!-- Customize Button -->
174
- <button class="btn btn-customize" onclick="customizeItem('{{ item.Name }}', '{{ item.Price__c }}')">
175
- <i class="bi bi-pencil-square"></i> Customize
176
- </button>
177
- </div>
178
- </div>
179
- </div>
180
- {% endfor %}
181
  </div>
182
- {% endfor %}
183
- {% endif %}
184
  </div>
185
 
186
- <!-- View Cart Button -->
187
  <div class="view-cart-container">
188
  <a href="/cart" class="view-cart-button">
189
  View Cart
190
  </a>
191
  </div>
192
 
193
- <!-- Modal for Item Details -->
194
- <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
195
  <div class="modal-dialog modal-dialog-centered">
196
  <div class="modal-content">
197
  <div class="modal-header">
198
- <h5 class="modal-title" id="itemModalLabel">Item Details</h5>
199
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
200
  </div>
201
  <div class="modal-body">
202
- <img id="modal-img" class="img-fluid rounded mb-3 d-block mx-auto" alt="Item Image" style="max-height: 200px; object-fit: cover;">
203
- <h5 id="modal-name" class="fw-bold text-center"></h5>
204
- <p id="modal-price" class="text-muted text-center"></p>
205
- <p id="modal-description" class="text-secondary"></p>
206
- <div id="modal-addons" class="modal-addons mt-4">
207
- <h6>Customization Options</h6>
208
- <div id="addons-list" class="addons-container">Loading customization options...</div>
209
- </div>
210
- <div class="mt-4">
211
- <h6>Custom Request</h6>
212
- <textarea id="modal-instructions" class="form-control" placeholder="Enter any special instructions here..."></textarea>
 
 
 
 
 
 
213
  </div>
214
- <span id="modal-section" data-section="" data-category="" style="display: none;"></span>
215
  </div>
216
- <div class="modal-footer d-flex align-items-center justify-content-between">
217
- <div class="d-flex align-items-center gap-2">
218
- <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
219
- <input type="text" class="form-control text-center" id="quantityInput" value="1" readonly style="width: 50px;"/>
220
- <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
221
- </div>
222
  <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
223
  </div>
224
  </div>
@@ -226,23 +178,42 @@
226
  </div>
227
 
228
  <script>
229
- // Customize Item Action
230
- function customizeItem(itemName, itemPrice) {
231
- alert(`Customizing your ${itemName} for $${itemPrice}`);
 
 
 
232
  }
233
 
234
- // Handle Search Filtering (optional)
235
- function filterMenu() {
236
- let input = document.getElementById('searchBar').value.toLowerCase();
237
- let items = document.querySelectorAll('.menu-card');
238
- items.forEach(item => {
239
- let itemName = item.querySelector('.card-title').innerText.toLowerCase();
240
- if (itemName.includes(input)) {
241
- item.style.display = 'block';
242
- } else {
243
- item.style.display = 'none';
244
- }
245
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
246
  }
247
  </script>
248
 
 
27
  margin: auto;
28
  display: flex;
29
  flex-direction: column;
 
30
  }
31
  .menu-image {
32
  height: 200px;
 
51
  background-color: #0FAA39;
52
  border-color: #0FAA39;
53
  }
54
+ /* Customize button styling */
55
  .btn-customize {
56
  font-size: 13px;
57
  font-weight: bold;
58
  border-radius: 5px;
59
+ background-color: transparent;
60
+ border: 1px solid #0FAA39;
61
+ color: #0FAA39;
62
+ padding: 5px 15px;
 
63
  display: inline-flex;
 
64
  align-items: center;
65
+ justify-content: center;
 
 
 
66
  }
67
+ .btn-customize:hover {
68
  background-color: #0FAA39;
69
+ color: white;
70
  border-color: #0FAA39;
71
  }
72
+ .btn-customize .bi-chevron-right {
73
+ margin-left: 5px;
74
+ }
75
  .view-cart-container {
76
  position: fixed;
77
  bottom: 20px;
 
99
  </head>
100
  <body>
101
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
102
  <div class="container mt-4">
103
  <h1 class="text-center">Menu</h1>
104
 
105
+ <div class="row">
106
+ <!-- Sample Item Card -->
107
+ <div class="col-md-6 mb-4">
108
+ <div class="card menu-card">
109
+ <img src="your-image-path.jpg" class="card-img-top menu-image" alt="Item Image">
110
+ <div class="card-body">
111
+ <h5 class="card-title">Chicken Sausage</h5>
112
+ <p class="card-text">Molten Cheese Indulgence with American classic herbed chicken sausage.</p>
113
+ <button class="btn btn-primary">Add</button>
114
+ <button class="btn btn-customize" onclick="openCustomizeModal('Chicken Sausage', 288)">
115
+ Customize <i class="bi bi-chevron-right"></i>
116
+ </button>
117
  </div>
118
+ </div>
 
 
 
 
 
119
  </div>
120
+ <!-- Sample Item Card -->
121
+ <div class="col-md-6 mb-4">
122
+ <div class="card menu-card">
123
+ <img src="your-image-path.jpg" class="card-img-top menu-image" alt="Item Image">
124
+ <div class="card-body">
125
+ <h5 class="card-title">Prawn Fry</h5>
126
+ <p class="card-text">Delicious prawn fry with a spicy twist.</p>
127
+ <button class="btn btn-primary">Add</button>
128
+ <button class="btn btn-customize" onclick="openCustomizeModal('Prawn Fry', 15)">
129
+ Customize <i class="bi bi-chevron-right"></i>
130
+ </button>
131
+ </div>
 
 
 
 
 
 
 
 
 
 
 
132
  </div>
133
+ </div>
134
+ </div>
135
  </div>
136
 
 
137
  <div class="view-cart-container">
138
  <a href="/cart" class="view-cart-button">
139
  View Cart
140
  </a>
141
  </div>
142
 
143
+ <!-- Customize Modal -->
144
+ <div class="modal fade" id="customizeModal" tabindex="-1" aria-labelledby="customizeModalLabel" aria-hidden="true">
145
  <div class="modal-dialog modal-dialog-centered">
146
  <div class="modal-content">
147
  <div class="modal-header">
148
+ <h5 class="modal-title" id="customizeModalLabel">Customize Your Item</h5>
149
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
150
  </div>
151
  <div class="modal-body">
152
+ <h5 id="modal-item-name"></h5>
153
+ <p>Price: $<span id="modal-item-price"></span></p>
154
+ <div id="addons-list">
155
+ <!-- Addon Options will be loaded here -->
156
+ <h6>Choose Toppings:</h6>
157
+ <div class="form-check">
158
+ <input class="form-check-input" type="checkbox" value="Extra Cheese" id="addon1">
159
+ <label class="form-check-label" for="addon1">
160
+ Extra Cheese ($2)
161
+ </label>
162
+ </div>
163
+ <div class="form-check">
164
+ <input class="form-check-input" type="checkbox" value="Olives" id="addon2">
165
+ <label class="form-check-label" for="addon2">
166
+ Olives ($1)
167
+ </label>
168
+ </div>
169
  </div>
170
+ <textarea class="form-control" id="special-request" placeholder="Special Instructions (Optional)"></textarea>
171
  </div>
172
+ <div class="modal-footer">
173
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
 
 
 
 
174
  <button type="button" class="btn btn-primary" onclick="addToCartFromModal()">Add to Cart</button>
175
  </div>
176
  </div>
 
178
  </div>
179
 
180
  <script>
181
+ // Open Customize Modal with Item Details
182
+ function openCustomizeModal(itemName, itemPrice) {
183
+ document.getElementById('modal-item-name').innerText = itemName;
184
+ document.getElementById('modal-item-price').innerText = itemPrice;
185
+ const modal = new bootstrap.Modal(document.getElementById('customizeModal'));
186
+ modal.show();
187
  }
188
 
189
+ // Add Custom Item to Cart from Modal
190
+ function addToCartFromModal() {
191
+ const itemName = document.getElementById('modal-item-name').innerText;
192
+ const itemPrice = parseFloat(document.getElementById('modal-item-price').innerText);
193
+ const specialRequest = document.getElementById('special-request').value;
194
+
195
+ let selectedAddons = [];
196
+ if (document.getElementById('addon1').checked) {
197
+ selectedAddons.push('Extra Cheese ($2)');
198
+ }
199
+ if (document.getElementById('addon2').checked) {
200
+ selectedAddons.push('Olives ($1)');
201
+ }
202
+
203
+ const cartItem = {
204
+ itemName,
205
+ itemPrice,
206
+ addons: selectedAddons,
207
+ specialRequest
208
+ };
209
+
210
+ // You can push this cartItem into your cart data (e.g., localStorage, array, etc.)
211
+ console.log(cartItem);
212
+ alert('Item added to cart successfully!');
213
+
214
+ // Close the modal
215
+ const modal = bootstrap.Modal.getInstance(document.getElementById('customizeModal'));
216
+ modal.hide();
217
  }
218
  </script>
219