Hugging Face's logo

Spaces:
lokesh341
/
voicemenu143
Sleeping

App Files Community
lokesh341 commited on
Commit
0ab6add
·
verified ·
1 Parent(s): 84f7782

Update templates/menu_page.html

Browse files
Files changed (1) hide show
  1. templates/menu_page.html +101 -22
templates/menu_page.html CHANGED
@@ -99,6 +99,45 @@
99
  bottom: 0;
100
  }
101
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
102
  .cart-summary {
103
  display: flex;
104
  justify-content: space-between;
@@ -113,6 +152,22 @@
113
  .cart-summary button {
114
  background-color: #28a745;
115
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
116
  </style>
117
  </head>
118
  <body>
@@ -124,27 +179,33 @@
124
 
125
  <!-- Menu Content -->
126
  <div class="menu-container">
127
- {% for category, items in menu_data.items() %}
128
- <div class="menu-category">
129
- <h2>{{ category }}</h2>
130
- {% for item in items %}
131
- <div class="menu-item">
132
- <div>
133
- <h3>{{ item.name }}</h3>
134
- <p>Price: ₹{{ item.price }}</p>
135
- </div>
136
- <button onclick="addToCart('{{ item.name }}', {{ item.price }})">Add to Cart</button>
137
  </div>
138
- {% endfor %}
139
- </div>
140
- {% endfor %}
141
- </div>
 
 
 
 
 
 
 
142
 
143
- <!-- Cart Button -->
144
- <div class="menu-category">
145
- <button class="cart-button" onclick="showCart()">
146
- <i class="fas fa-shopping-cart cart-icon"></i> View Cart
147
- </button>
 
148
  </div>
149
 
150
  <!-- Cart Summary (hidden initially) -->
@@ -169,8 +230,8 @@
169
  let cart = [];
170
 
171
  // Add item to cart
172
- function addToCart(itemName, itemPrice) {
173
- cart.push({ name: itemName, price: itemPrice });
174
  alert(`${itemName} added to cart!`);
175
  }
176
 
@@ -214,7 +275,13 @@
214
  headers: {
215
  'Content-Type': 'application/json',
216
  },
217
- body: JSON.stringify({ cart: cart })
 
 
 
 
 
 
218
  })
219
  .then(response => response.json())
220
  .then(data => {
@@ -227,6 +294,18 @@
227
  alert('Error placing order');
228
  });
229
  }
 
 
 
 
 
 
 
 
 
 
 
 
230
  </script>
231
 
232
  </body>
 
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;
 
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>
 
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) -->
 
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
 
 
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 => {
 
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>