Hugging Face's logo

Spaces:
lokesh341
/
voicemenu1433
Sleeping

App Files Community
lokesh341 commited on
Commit
a11265e
·
verified ·
1 Parent(s): f8101ff

Update templates/menu_page.html

Browse files
Files changed (1) hide show
  1. templates/menu_page.html +57 -15
templates/menu_page.html CHANGED
@@ -4,7 +4,6 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Biryani Hub Menu</title>
7
- <!-- Bootstrap CSS -->
8
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
9
  <style>
10
  body { font-family: Arial, sans-serif; background-color: #f8f8f8; margin: 0; padding: 0; }
@@ -18,9 +17,22 @@
18
  .menu-option button { font-size: 1.2rem; padding: 10px 20px; margin: 10px; cursor: pointer; }
19
  .cart-container { margin-top: 30px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #eaf3e1; }
20
  .cart-item { display: flex; justify-content: space-between; margin-bottom: 10px; }
21
- .view-cart-container { position: fixed; bottom: 20px; right: 20px; z-index: 999; }
22
- .view-cart-button { background-color: #007bff; color: #fff; padding: 10px 20px; border-radius: 50px; font-size: 1rem; font-weight: bold; text-decoration: none; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; }
23
- .view-cart-button:hover { background-color: #0056b3; text-decoration: none; }
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  </style>
25
  </head>
26
  <body>
@@ -36,14 +48,25 @@
36
  <button onclick="viewCart()">View Cart</button>
37
  </div>
38
 
 
 
 
 
 
 
 
 
 
39
  <div class="cart-container" id="cart-container" style="display:none;">
40
  <h2>Your Cart</h2>
41
  <div id="cart-items"></div>
42
  <button onclick="placeOrder()">Place Final Order</button>
43
  </div>
44
 
45
- <div class="view-cart-container">
46
- <a href="javascript:void(0);" class="view-cart-button" onclick="viewCart()">View Cart</a>
 
 
47
  </div>
48
 
49
  <script>
@@ -51,18 +74,12 @@
51
  veg: [
52
  { 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' },
53
  { 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' },
54
- { 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' },
55
- { name: 'Paneer Butter Masala', price: 13, ingredients: 'Paneer, Tomato, Butter, Spices', description: 'Soft paneer cubes in a creamy, flavorful gravy.', imageUrl: 'https://via.placeholder.com/100' },
56
- { name: 'Aloo Gobi', price: 10, ingredients: 'Potatoes, Cauliflower, Spices', description: 'A traditional Indian curry with potatoes and cauliflower.', imageUrl: 'https://via.placeholder.com/100' },
57
- { name: 'Vegetable Biryani', price: 15, ingredients: 'Basmati Rice, Mixed Vegetables, Spices', description: 'Aromatic rice cooked with seasonal vegetables and spices.', imageUrl: 'https://via.placeholder.com/100' }
58
  ],
59
-
60
  nonVeg: [
61
  { 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' },
62
  { 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' },
63
- { 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' },
64
- { name: 'Chicken Tikka', price: 12, ingredients: 'Chicken, Yogurt, Spices', description: 'Grilled chicken marinated in yogurt and spices.', imageUrl: 'https://via.placeholder.com/100' },
65
- { name: 'Prawn Masala', price: 20, ingredients: 'Prawns, Spices, Tomatoes', description: 'Juicy prawns cooked in a flavorful, spicy masala.', imageUrl: 'https://via.placeholder.com/100' }
66
  ]
67
  };
68
 
@@ -71,7 +88,6 @@
71
  function showMenu(type) {
72
  const menuContainer = document.getElementById('menu-items');
73
  menuContainer.innerHTML = ''; // Clear previous menu items
74
-
75
  menuItems[type].forEach(item => {
76
  const div = document.createElement('div');
77
  div.classList.add('menu-item');
@@ -123,6 +139,32 @@
123
  alert("Your cart is empty. Please add items before placing the order.");
124
  }
125
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
126
  </script>
127
 
128
  </body>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Biryani Hub Menu</title>
 
7
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
  <style>
9
  body { font-family: Arial, sans-serif; background-color: #f8f8f8; margin: 0; padding: 0; }
 
17
  .menu-option button { font-size: 1.2rem; padding: 10px 20px; margin: 10px; cursor: pointer; }
18
  .cart-container { margin-top: 30px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #eaf3e1; }
19
  .cart-item { display: flex; justify-content: space-between; margin-bottom: 10px; }
20
+ .view-cart-button {
21
+ background-color: #007bff;
22
+ color: #fff;
23
+ padding: 10px 20px;
24
+ border-radius: 50px;
25
+ font-size: 1rem;
26
+ font-weight: bold;
27
+ text-decoration: none;
28
+ display: flex;
29
+ align-items: center;
30
+ justify-content: center;
31
+ }
32
+ .view-cart-button:hover {
33
+ background-color: #0056b3;
34
+ text-decoration: none;
35
+ }
36
  </style>
37
  </head>
38
  <body>
 
48
  <button onclick="viewCart()">View Cart</button>
49
  </div>
50
 
51
+ <!-- Order History Section -->
52
+ <div class="container mt-4">
53
+ <h2 class="text-center">Order History</h2>
54
+ <div id="order-history">
55
+ <!-- Order history details will be dynamically loaded here -->
56
+ </div>
57
+ </div>
58
+
59
+ <!-- Cart View -->
60
  <div class="cart-container" id="cart-container" style="display:none;">
61
  <h2>Your Cart</h2>
62
  <div id="cart-items"></div>
63
  <button onclick="placeOrder()">Place Final Order</button>
64
  </div>
65
 
66
+ <div class="view-cart-button">
67
+ <a href="javascript:void(0);" onclick="viewCart()">
68
+ View Cart
69
+ </a>
70
  </div>
71
 
72
  <script>
 
74
  veg: [
75
  { 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' },
76
  { 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' },
77
+ { 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' }
 
 
 
78
  ],
 
79
  nonVeg: [
80
  { 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' },
81
  { 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' },
82
+ { 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' }
 
 
83
  ]
84
  };
85
 
 
88
  function showMenu(type) {
89
  const menuContainer = document.getElementById('menu-items');
90
  menuContainer.innerHTML = ''; // Clear previous menu items
 
91
  menuItems[type].forEach(item => {
92
  const div = document.createElement('div');
93
  div.classList.add('menu-item');
 
139
  alert("Your cart is empty. Please add items before placing the order.");
140
  }
141
  }
142
+
143
+ // Example Order History (You can fetch this dynamically from the backend)
144
+ const orders = [
145
+ { date: '2023-02-20', orderDetails: 'Chicken Biryani, Butter Chicken', totalAmount: 45, status: 'Completed' },
146
+ { date: '2023-02-19', orderDetails: 'Paneer Butter Masala, Vegetable Biryani', totalAmount: 35, status: 'Pending' },
147
+ { date: '2023-02-18', orderDetails: 'Mutton Biryani, Chicken Shawarma', totalAmount: 60, status: 'Cancelled' }
148
+ ];
149
+
150
+ // Render Order History
151
+ const orderHistoryContainer = document.getElementById('order-history');
152
+ if (orders.length > 0) {
153
+ orders.forEach(order => {
154
+ const orderCard = document.createElement('div');
155
+ orderCard.classList.add('order-card');
156
+ orderCard.innerHTML = `
157
+ <p><strong>Date:</strong> ${order.date}</p>
158
+ <p><strong>Order:</strong> ${order.orderDetails}</p>
159
+ <p><strong>Total Amount:</strong> $${order.totalAmount}</p>
160
+ <p><span class="order-status ${order.status === 'Completed' ? 'status-completed' : order.status === 'Pending' ? 'status-pending' : 'status-cancelled'}">${order.status}</span></p>
161
+ `;
162
+ orderHistoryContainer.appendChild(orderCard);
163
+ });
164
+ } else {
165
+ orderHistoryContainer.innerHTML = '<p>No past orders found.</p>';
166
+ }
167
+
168
  </script>
169
 
170
  </body>