Hugging Face's logo

Spaces:
Swathi6
/
Biryanihub
Sleeping

App Files Community
Swathi6 commited on
Commit
712461d
·
verified ·
1 Parent(s): 5169f7c

Update templates/menu.html

Browse files
Files changed (1) hide show
  1. templates/menu.html +0 -312
templates/menu.html CHANGED
@@ -1,312 +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 Page</title>
7
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
8
- <style>
9
- /* Basic Styles */
10
- body {
11
- font-family: Arial, sans-serif;
12
- background-color: #f4f4f4;
13
- margin: 0;
14
- padding: 0;
15
- }
16
-
17
- header {
18
- background-color: #333;
19
- color: white;
20
- padding: 15px;
21
- text-align: center;
22
- }
23
-
24
- .menu-container {
25
- margin: 20px;
26
- }
27
-
28
- .menu-category {
29
- margin-bottom: 20px;
30
- }
31
-
32
- .menu-category h2 {
33
- text-align: center;
34
- font-size: 24px;
35
- }
36
-
37
- .menu-item {
38
- background-color: white;
39
- padding: 10px;
40
- margin-bottom: 10px;
41
- border-radius: 5px;
42
- box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
43
- display: flex;
44
- justify-content: space-between;
45
- align-items: center;
46
- }
47
-
48
- .menu-item h3 {
49
- margin: 0;
50
- font-size: 20px;
51
- }
52
-
53
- .menu-item p {
54
- margin: 0;
55
- font-size: 16px;
56
- color: #888;
57
- }
58
-
59
- .menu-item button {
60
- padding: 8px 12px;
61
- background-color: #28a745;
62
- color: white;
63
- border: none;
64
- border-radius: 5px;
65
- cursor: pointer;
66
- }
67
-
68
- .menu-item button:hover {
69
- background-color: #218838;
70
- }
71
-
72
- .cart-button {
73
- padding: 12px 20px;
74
- background-color: #007bff;
75
- color: white;
76
- border: none;
77
- border-radius: 5px;
78
- text-align: center;
79
- font-size: 18px;
80
- cursor: pointer;
81
- width: 100%;
82
- }
83
-
84
- .cart-button:hover {
85
- background-color: #0056b3;
86
- }
87
-
88
- .cart-icon {
89
- margin-right: 8px;
90
- }
91
-
92
- footer {
93
- text-align: center;
94
- padding: 10px;
95
- background-color: #333;
96
- color: white;
97
- position: fixed;
98
- width: 100%;
99
- bottom: 0;
100
- }
101
-
102
- .order-summary {
103
- margin: 20px;
104
- padding: 20px;
105
- background-color: white;
106
- border-radius: 5px;
107
- box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
108
- }
109
-
110
- .order-summary h3 {
111
- font-size: 24px;
112
- text-align: center;
113
- }
114
-
115
- .order-summary ul {
116
- list-style-type: none;
117
- padding: 0;
118
- }
119
-
120
- .order-summary li {
121
- padding: 10px;
122
- border-bottom: 1px solid #ddd;
123
- display: flex;
124
- justify-content: space-between;
125
- }
126
-
127
- .order-summary button {
128
- padding: 10px 20px;
129
- background-color: #007bff;
130
- color: white;
131
- border: none;
132
- border-radius: 5px;
133
- font-size: 18px;
134
- cursor: pointer;
135
- }
136
-
137
- .order-summary button:hover {
138
- background-color: #0056b3;
139
- }
140
-
141
- .cart-summary {
142
- display: flex;
143
- justify-content: space-between;
144
- margin-top: 20px;
145
- }
146
-
147
- .cart-summary span {
148
- font-size: 18px;
149
- font-weight: bold;
150
- }
151
-
152
- .cart-summary button {
153
- background-color: #28a745;
154
- }
155
-
156
- .logout-button {
157
- padding: 12px 20px;
158
- background-color: #dc3545;
159
- color: white;
160
- border: none;
161
- border-radius: 5px;
162
- font-size: 18px;
163
- cursor: pointer;
164
- width: 100%;
165
- margin-top: 20px;
166
- }
167
-
168
- .logout-button:hover {
169
- background-color: #c82333;
170
- }
171
- </style>
172
- </head>
173
- <body>
174
-
175
- <!-- Header -->
176
- <header>
177
- <h1>Welcome to Our Restaurant</h1>
178
- </header>
179
-
180
- <!-- Menu Content -->
181
- <div class="menu-container">
182
- <!-- Main Course Category -->
183
- <div class="menu-category">
184
- <h2>Main Course</h2>
185
- {% for item in menu_items %}
186
- <div class="menu-item">
187
- <div>
188
- <h3>{{ item.name }}</h3>
189
- <p>Price: ₹{{ item.price }}</p>
190
- </div>
191
- <button onclick="addToCart('{{ item.name }}', {{ item.price }}, '{{ item.category }}')">Add to Cart</button>
192
- </div>
193
- {% endfor %}
194
- </div>
195
-
196
- <!-- Cart Button -->
197
- <div class="menu-category">
198
- <button class="cart-button" onclick="showCart()">
199
- <i class="fas fa-shopping-cart cart-icon"></i> View Cart
200
- </button>
201
- </div>
202
-
203
- <!-- Logout Button -->
204
- <div class="menu-category">
205
- <button class="logout-button" onclick="logout()">
206
- <i class="fas fa-sign-out-alt cart-icon"></i> Logout
207
- </button>
208
- </div>
209
- </div>
210
-
211
- <!-- Cart Summary (hidden initially) -->
212
- <div id="cart-summary" class="order-summary" style="display:none;">
213
- <h3>Your Cart</h3>
214
- <ul id="cart-items-list">
215
- <!-- Cart items will be dynamically listed here -->
216
- </ul>
217
- <div class="cart-summary">
218
- <span>Total: ₹<span id="total-price">0</span></span>
219
- <button onclick="placeOrder()">Place Order</button>
220
- </div>
221
- </div>
222
-
223
- <!-- Footer -->
224
- <footer>
225
- <p>Restaurant &copy; 2025</p>
226
- </footer>
227
-
228
- <!-- JavaScript -->
229
- <script>
230
- let cart = [];
231
-
232
- // Add item to cart
233
- function addToCart(itemName, itemPrice, itemCategory) {
234
- cart.push({ name: itemName, price: itemPrice, category: itemCategory });
235
- alert(`${itemName} added to cart!`);
236
- }
237
-
238
- // Show cart and order summary
239
- function showCart() {
240
- if (cart.length === 0) {
241
- alert("Your cart is empty!");
242
- return;
243
- }
244
-
245
- // Update cart items list
246
- const cartItemsList = document.getElementById('cart-items-list');
247
- cartItemsList.innerHTML = '';
248
-
249
- let totalPrice = 0;
250
-
251
- cart.forEach(item => {
252
- const li = document.createElement('li');
253
- li.innerHTML = `${item.name} - ₹${item.price}`;
254
- cartItemsList.appendChild(li);
255
- totalPrice += item.price;
256
- });
257
-
258
- // Update total price
259
- document.getElementById('total-price').textContent = totalPrice;
260
-
261
- // Show cart summary
262
- document.getElementById('cart-summary').style.display = 'block';
263
- }
264
-
265
- // Place the order
266
- function placeOrder() {
267
- if (cart.length === 0) {
268
- alert("Your cart is empty, cannot place the order.");
269
- return;
270
- }
271
-
272
- // Send the order to the backend (POST request)
273
- fetch('/order', {
274
- method: 'POST',
275
- headers: {
276
- 'Content-Type': 'application/json',
277
- },
278
- body: JSON.stringify({
279
- customer_id: "user-id-placeholder", // Replace with actual user ID if necessary
280
- items: cart.map(item => ({
281
- item_id: item.name,
282
- quantity: 1, // Assuming quantity is 1 for now
283
- }))
284
- })
285
- })
286
- .then(response => response.json())
287
- .then(data => {
288
- alert(data.message);
289
- cart = []; // Clear cart after placing the order
290
- document.getElementById('cart-summary').style.display = 'none'; // Hide cart summary
291
- })
292
- .catch(error => {
293
- console.error('Error:', error);
294
- alert('Error placing order');
295
- });
296
- }
297
-
298
- // Logout
299
- function logout() {
300
- fetch('/logout')
301
- .then(response => {
302
- window.location.href = "/"; // Redirect to home page after logout
303
- })
304
- .catch(error => {
305
- console.error('Error:', error);
306
- alert('Error logging out');
307
- });
308
- }
309
- </script>
310
-
311
- </body>
312
- </html>