Hugging Face's logo

Spaces:
geethareddy
/
voicemenu1433
Sleeping

App Files Community
lokesh341 commited on
Commit
4539c80
·
verified ·
1 Parent(s): d79d0e9

Update templates/menu_page.html

Browse files
Files changed (1) hide show
  1. templates/menu_page.html +69 -181
templates/menu_page.html CHANGED
@@ -6,209 +6,97 @@
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Biryani Hub Menu</title>
8
  <style>
9
- /* General Styling */
10
  body {
11
  font-family: Arial, sans-serif;
12
  background-color: #f8f8f8;
13
- margin: 0;
14
- padding: 0;
15
- }
16
- .container {
17
- max-width: 1200px;
18
- margin: 50px auto;
19
  text-align: center;
 
 
20
  }
21
  h1 {
22
- font-size: 2.5rem;
23
- color: #333;
24
- }
25
-
26
- /* Menu Buttons */
27
- .menu-option button {
28
- font-size: 1.2rem;
29
- padding: 10px 20px;
30
- margin: 20px;
31
- cursor: pointer;
32
- border: none;
33
- border-radius: 5px;
34
- background-color: #007bff;
35
- color: white;
36
  }
37
- .menu-option button:hover {
38
- background-color: #0056b3;
 
 
 
39
  }
40
-
41
- /* Menu Items */
42
  .menu-item {
43
- display: inline-block;
44
- width: 30%;
45
  margin: 10px;
46
- padding: 10px;
47
- border: 1px solid #ddd;
48
- border-radius: 5px;
49
- background-color: #fff;
50
- }
51
- .menu-item img {
52
- width: 100px;
53
- height: 100px;
54
  border-radius: 8px;
55
- margin-bottom: 10px;
56
- }
57
-
58
- /* Cart Section */
59
- .cart-container {
60
- margin-top: 30px;
61
- padding: 10px;
62
- border: 1px solid #ddd;
63
- border-radius: 5px;
64
- background-color: #eaf3e1;
65
- display: none;
66
  }
67
- .cart-item {
68
- display: flex;
69
- justify-content: space-between;
70
- margin-bottom: 10px;
71
  }
72
-
73
- /* View Cart Button */
74
- .view-cart-container {
75
- position: fixed;
76
- bottom: 20px;
77
- right: 20px;
78
- z-index: 999;
79
  }
80
- .view-cart-button {
81
- background-color: #007bff;
82
- color: #fff;
83
- padding: 10px 20px;
84
- border-radius: 50px;
85
- font-size: 1rem;
86
- font-weight: bold;
87
- text-decoration: none;
88
- display: flex;
89
- align-items: center;
90
- justify-content: center;
91
  }
92
- .view-cart-button:hover {
93
- background-color: #0056b3;
94
- text-decoration: none;
95
  }
96
  </style>
97
  </head>
98
  <body>
99
-
100
- <!-- Welcome Section -->
101
- <div class="container" id="welcome-container">
102
- <h1>Welcome to the Biryani Hub Menu</h1>
103
- <div class="menu-option">
104
- <button id="veg-btn" onclick="showMenu('veg')">Vegetarian Menu</button>
105
- <button id="non-veg-btn" onclick="showMenu('nonVeg')">Non-Vegetarian Menu</button>
106
- </div>
107
- </div>
108
-
109
- <!-- Menu Section -->
110
- <div class="container" id="menu-container" style="display: none;">
111
- <h1>Menu</h1>
112
- <div id="menu-items" class="row">
113
- <!-- Menu items will be dynamically added here -->
114
- </div>
115
- <button onclick="viewCart()">View Cart</button>
116
- </div>
117
-
118
- <!-- Cart Section -->
119
- <div class="cart-container" id="cart-container">
120
- <h2>Your Cart</h2>
121
- <div id="cart-items"></div>
122
- <button onclick="placeOrder()">Place Final Order</button>
123
- </div>
124
-
125
- <!-- Floating View Cart Button -->
126
- <div class="view-cart-container">
127
- <a href="javascript:void(0);" class="view-cart-button" onclick="viewCart()">View Cart</a>
128
  </div>
129
 
130
  <script>
131
- // Menu Data
132
- const menuItems = {
133
- veg: [
134
- { name: 'Samosa', price: 9, ingredients: 'Potatoes, Peas, Flour, Spices', description: 'Crispy fried pastry filled with spiced potatoes and peas.', imageUrl: 'https://via.placeholder.com/100' },
135
- { name: 'Onion Pakoda', price: 10, ingredients: 'Onions, Gram Flour, Spices', description: 'Deep-fried onion fritters seasoned with herbs and spices.', imageUrl: 'https://via.placeholder.com/100' },
136
- { name: 'Chilli Gobi', price: 12, ingredients: 'Cauliflower, Chili Sauce, Spices', description: 'Cauliflower florets tossed in a spicy chili sauce.', imageUrl: 'https://via.placeholder.com/100' }
137
- ],
138
- nonVeg: [
139
- { name: 'Chicken Biryani', price: 14, ingredients: 'Chicken, Basmati Rice, Spices', description: 'Aromatic basmati rice cooked with tender chicken and spices.', imageUrl: 'https://via.placeholder.com/100' },
140
- { name: 'Mutton Biryani', price: 16, ingredients: 'Mutton, Basmati Rice, Spices', description: 'Flavorful rice dish made with succulent mutton and aromatic spices.', imageUrl: 'https://via.placeholder.com/100' },
141
- { name: 'Butter Chicken', price: 15, ingredients: 'Chicken, Tomato, Butter, Cream', description: 'Tender chicken cooked in a rich, creamy tomato sauce.', imageUrl: 'https://via.placeholder.com/100' }
142
- ]
143
- };
144
-
145
- const cart = [];
146
-
147
- // Function to Show Menu
148
- function showMenu(type) {
149
- document.getElementById('welcome-container').style.display = 'none';
150
- document.getElementById('menu-container').style.display = 'block';
151
- const menuContainer = document.getElementById('menu-items');
152
- menuContainer.innerHTML = '';
153
-
154
- menuItems[type].forEach(item => {
155
- const div = document.createElement('div');
156
- div.classList.add('menu-item');
157
- div.innerHTML = `
158
- <div class="details">
159
- <img src="${item.imageUrl}" alt="${item.name}">
160
- <div class="text">
161
- <h3>${item.name}</h3>
162
- <p>${item.description}</p>
163
- <p><strong>Ingredients:</strong> ${item.ingredients}</p>
164
- <p><strong>Price:</strong> $${item.price}</p>
165
- <button onclick="addToCart('${item.name}')">Add to Cart</button>
166
- </div>
167
- </div>`;
168
- menuContainer.appendChild(div);
169
- });
170
- }
171
-
172
- // Function to Add Items to Cart
173
- function addToCart(itemName) {
174
- const quantity = prompt(`How many ${itemName} would you like to add?`, 1);
175
- if (quantity && !isNaN(quantity) && quantity > 0) {
176
- const item = menuItems.veg.concat(menuItems.nonVeg).find(item => item.name === itemName);
177
- const cartItem = { ...item, quantity: parseInt(quantity) };
178
- cart.push(cartItem);
179
- alert(`${quantity} of ${itemName} added to your cart.`);
180
- } else {
181
- alert("Please enter a valid quantity.");
182
- }
183
- }
184
-
185
- // Function to View Cart
186
- function viewCart() {
187
- const cartContainer = document.getElementById('cart-container');
188
- const cartItemsContainer = document.getElementById('cart-items');
189
- cartItemsContainer.innerHTML = '';
190
-
191
- cart.forEach(cartItem => {
192
- const div = document.createElement('div');
193
- div.classList.add('cart-item');
194
- div.innerHTML = `<span>${cartItem.name} (x${cartItem.quantity}) - $${cartItem.price * cartItem.quantity}</span>`;
195
- cartItemsContainer.appendChild(div);
196
- });
197
-
198
- cartContainer.style.display = 'block';
199
- }
200
-
201
- // Function to Place Order
202
- function placeOrder() {
203
- if (cart.length > 0) {
204
- alert("Your order has been placed successfully!");
205
- cart.length = 0;
206
- viewCart();
207
- } else {
208
- alert("Your cart is empty. Please add items before placing the order.");
209
- }
210
- }
211
  </script>
212
-
213
  </body>
214
  </html>
 
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Biryani Hub Menu</title>
8
  <style>
 
9
  body {
10
  font-family: Arial, sans-serif;
11
  background-color: #f8f8f8;
 
 
 
 
 
 
12
  text-align: center;
13
+ margin: 0;
14
+ padding: 20px;
15
  }
16
  h1 {
17
+ color: #ff5722;
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  }
19
+ .menu-container {
20
+ display: flex;
21
+ flex-wrap: wrap;
22
+ justify-content: center;
23
+ margin-top: 20px;
24
  }
 
 
25
  .menu-item {
26
+ background: white;
27
+ padding: 15px;
28
  margin: 10px;
 
 
 
 
 
 
 
 
29
  border-radius: 8px;
30
+ box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
31
+ width: 300px;
32
+ text-align: left;
 
 
 
 
 
 
 
 
33
  }
34
+ .menu-item h3 {
35
+ margin: 0;
36
+ color: #333;
 
37
  }
38
+ .menu-item p {
39
+ margin: 5px 0;
40
+ color: #555;
 
 
 
 
41
  }
42
+ .menu-item button {
43
+ background-color: #ff5722;
44
+ color: white;
45
+ border: none;
46
+ padding: 8px;
47
+ cursor: pointer;
48
+ width: 100%;
49
+ border-radius: 5px;
 
 
 
50
  }
51
+ .menu-item button:hover {
52
+ background-color: #e64a19;
 
53
  }
54
  </style>
55
  </head>
56
  <body>
57
+ <h1>Restaurant Menu</h1>
58
+ <div class="menu-container" id="menu-list">
59
+ <p>Loading menu...</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
60
  </div>
61
 
62
  <script>
63
+ function fetchMenu() {
64
+ fetch("/menu") // Fetching menu from Flask API
65
+ .then(response => response.json())
66
+ .then(data => {
67
+ if (data.success) {
68
+ let menuContainer = document.getElementById("menu-list");
69
+ menuContainer.innerHTML = "";
70
+
71
+ data.menu.forEach(item => {
72
+ let menuItem = document.createElement("div");
73
+ menuItem.classList.add("menu-item");
74
+
75
+ menuItem.innerHTML = `
76
+ <h3>${item.name}</h3>
77
+ <p><strong>Category:</strong> ${item.category}</p>
78
+ <p><strong>Price:</strong> $${item.price}</p>
79
+ <p><strong>Ingredients:</strong> ${item.ingredients}</p>
80
+ <button onclick="addToCart('${item.name}', ${item.price})">Add to Cart</button>
81
+ `;
82
+
83
+ menuContainer.appendChild(menuItem);
84
+ });
85
+ } else {
86
+ document.getElementById("menu-list").innerHTML = "<p>Error fetching menu.</p>";
87
+ }
88
+ })
89
+ .catch(error => {
90
+ console.error("Error fetching menu:", error);
91
+ document.getElementById("menu-list").innerHTML = "<p>Unable to load menu.</p>";
92
+ });
93
+ }
94
+
95
+ function addToCart(name, price) {
96
+ alert(`${name} added to cart!`);
97
+ }
98
+
99
+ window.onload = fetchMenu;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
100
  </script>
 
101
  </body>
102
  </html>