Hugging Face's logo

Spaces:
lokesh341
/
voicemenu1433
Sleeping

App Files Community
lokesh341 commited on
Commit
934ceb8
·
verified ·
1 Parent(s): 7b29599

Update templates/menu_page.html

Browse files
Files changed (1) hide show
  1. templates/menu_page.html +116 -68
templates/menu_page.html CHANGED
@@ -4,83 +4,155 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Biryani Hub Menu</title>
 
 
7
  <style>
8
- body { font-family: Arial, sans-serif; background-color: #f8f8f8; margin: 0; padding: 0; }
9
- .menu-container { max-width: 1200px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 8px; margin-top: 20px; }
10
- h1 { text-align: center; font-size: 2.5rem; color: #333; }
11
- .menu-item { margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
12
- .menu-item img { width: 100px; height: 100px; border-radius: 8px; margin-right: 10px; }
13
- .details { display: flex; align-items: center; }
14
- .text { margin-left: 10px; }
15
- .menu-option { margin: 20px; font-size: 1.5rem; text-align: center; }
16
- .menu-option button { font-size: 1.2rem; padding: 10px 20px; margin: 10px; cursor: pointer; }
17
- .cart-container { margin-top: 30px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #eaf3e1; }
18
- .cart-item { display: flex; justify-content: space-between; margin-bottom: 10px; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </style>
20
  </head>
21
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
 
23
- <div class="menu-container">
24
- <h1>Welcome to the Menu</h1>
25
  <!-- Buttons to select vegetarian or non-vegetarian menu -->
26
- <div class="menu-option">
27
- <button onclick="showMenu('veg')">Vegetarian Menu</button>
28
- <button onclick="showMenu('nonVeg')">Non-Vegetarian Menu</button>
 
 
 
 
 
29
  </div>
30
- <div id="menu-items"></div>
31
- <button onclick="viewCart()">View Cart</button>
32
  </div>
33
 
34
- <div class="cart-container" id="cart-container" style="display:none;">
35
- <h2>Your Cart</h2>
36
- <div id="cart-items"></div>
37
- <button onclick="placeOrder()">Place Final Order</button>
 
38
  </div>
39
 
40
  <script>
 
41
  const menuItems = {
42
  veg: [
43
  { 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' },
44
  { 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' },
45
- { 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' },
46
- { 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' },
47
- { name: 'Aloo Gobi', price: 10, ingredients: 'Potatoes, Cauliflower, Spices', description: 'A traditional Indian curry with potatoes and cauliflower.', imageUrl: 'https://via.placeholder.com/100' },
48
- { 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' }
49
  ],
50
-
51
  nonVeg: [
52
- { 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' },
53
- { 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' },
54
  { 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' },
55
- { name: 'Chicken Tikka', price: 12, ingredients: 'Chicken, Yogurt, Spices', description: 'Grilled chicken marinated in yogurt and spices.', imageUrl: 'https://via.placeholder.com/100' },
56
- { name: 'Prawn Masala', price: 20, ingredients: 'Prawns, Spices, Tomatoes', description: 'Juicy prawns cooked in a flavorful, spicy masala.', imageUrl: 'https://via.placeholder.com/100' }
57
  ]
58
  };
59
 
60
  const cart = [];
61
 
 
62
  function showMenu(type) {
63
  const menuContainer = document.getElementById('menu-items');
64
  menuContainer.innerHTML = ''; // Clear previous menu items
65
 
66
- // Display items based on selected menu type
67
  menuItems[type].forEach(item => {
68
  const div = document.createElement('div');
69
- div.classList.add('menu-item');
70
- div.innerHTML = `<div class="details">
71
- <img src="${item.imageUrl}" alt="${item.name}">
72
- <div class="text">
73
- <h3>${item.name}</h3>
74
- <p>${item.description}</p>
75
- <p><strong>Ingredients:</strong> ${item.ingredients}</p>
76
- <p><strong>Price:</strong> $${item.price}</p>
77
- <button onclick="addToCart('${item.name}')">Add to Cart</button>
78
- </div>
79
- </div>`;
 
80
  menuContainer.appendChild(div);
81
  });
82
  }
83
 
 
84
  function addToCart(itemName) {
85
  const quantity = prompt(`How many ${itemName} would you like to add?`, 1);
86
  if (quantity && !isNaN(quantity) && quantity > 0) {
@@ -92,31 +164,7 @@
92
  alert("Please enter a valid quantity.");
93
  }
94
  }
95
-
96
- function viewCart() {
97
- const cartContainer = document.getElementById('cart-container');
98
- const cartItemsContainer = document.getElementById('cart-items');
99
- cartItemsContainer.innerHTML = '';
100
- cart.forEach(cartItem => {
101
- const div = document.createElement('div');
102
- div.classList.add('cart-item');
103
- div.innerHTML = `<span>${cartItem.name} (x${cartItem.quantity}) - $${cartItem.price * cartItem.quantity}</span>`;
104
- cartItemsContainer.appendChild(div);
105
- });
106
- cartContainer.style.display = 'block';
107
- }
108
-
109
- function placeOrder() {
110
- if (cart.length > 0) {
111
- alert("Your order has been placed successfully!");
112
- cart.length = 0; // Clear the cart after placing the order
113
- viewCart(); // Optionally, update cart view
114
- } else {
115
- alert("Your cart is empty. Please add items before placing the order.");
116
- }
117
- }
118
-
119
  </script>
 
120
  </body>
121
  </html>
122
-
 
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/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
9
  <style>
10
+ body {
11
+ font-family: Arial, sans-serif;
12
+ background-color: #f8f9fa;
13
+ margin: 0;
14
+ padding: 0;
15
+ }
16
+ .container {
17
+ max-width: 900px;
18
+ }
19
+ .menu-card {
20
+ max-width: 350px;
21
+ border-radius: 15px;
22
+ overflow: hidden;
23
+ background-color: #fff;
24
+ margin: auto;
25
+ }
26
+ .menu-image {
27
+ height: 200px;
28
+ width: 100%;
29
+ object-fit: cover;
30
+ border-radius: 15px 15px 0 0;
31
+ }
32
+ .card-title {
33
+ font-size: 1.2rem;
34
+ font-weight: bold;
35
+ }
36
+ .card-text {
37
+ font-size: 1rem;
38
+ color: #6c757d;
39
+ }
40
+ .btn-primary {
41
+ font-size: 0.9rem;
42
+ border-radius: 20px;
43
+ width: 100px;
44
+ }
45
+ .filter-container {
46
+ margin-bottom: 15px;
47
+ }
48
+ .view-cart-container {
49
+ position: fixed;
50
+ bottom: 20px;
51
+ right: 20px;
52
+ z-index: 999;
53
+ }
54
+ .view-cart-button {
55
+ background-color: #007bff;
56
+ color: #fff;
57
+ padding: 10px 20px;
58
+ border-radius: 50px;
59
+ font-size: 1rem;
60
+ font-weight: bold;
61
+ text-decoration: none;
62
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
63
+ display: flex;
64
+ align-items: center;
65
+ justify-content: center;
66
+ }
67
+ .view-cart-button:hover {
68
+ background-color: #0056b3;
69
+ text-decoration: none;
70
+ }
71
  </style>
72
  </head>
73
  <body>
74
+ <div class="d-flex justify-content-between align-items-center p-3" style="background-color: #007bff; color: white;">
75
+ <div>
76
+ <h6>Referral Code: <span id="referral-code">{{ referral_code }}</span></h6>
77
+ </div>
78
+ <div>
79
+ <button onclick="window.location.href='{{ url_for('order_history') }}'" class="btn btn-light" style="color: #007bff; font-weight: bold;">
80
+ Order History
81
+ </button>
82
+ </div>
83
+ <div>
84
+ <button onclick="window.location.href='{{ url_for('logout') }}'" class="btn btn-light" style="color: #007bff; font-weight: bold;">
85
+ Logout
86
+ </button>
87
+ </div>
88
+ <div>
89
+ <h6>Reward Points: <span id="reward-points">{{ reward_points }}</span></h6>
90
+ </div>
91
+ </div>
92
+
93
+ <div class="container mt-4">
94
+ <h1 class="text-center">Menu</h1>
95
 
 
 
96
  <!-- Buttons to select vegetarian or non-vegetarian menu -->
97
+ <div class="text-center mb-4">
98
+ <button class="btn btn-success" onclick="showMenu('veg')">Vegetarian Menu</button>
99
+ <button class="btn btn-danger" onclick="showMenu('nonVeg')">Non-Vegetarian Menu</button>
100
+ </div>
101
+
102
+ <!-- Menu Items -->
103
+ <div id="menu-items" class="row">
104
+ <!-- Dynamically populated menu items will appear here -->
105
  </div>
 
 
106
  </div>
107
 
108
+ <!-- View Cart Button -->
109
+ <div class="view-cart-container">
110
+ <a href="/cart" class="view-cart-button">
111
+ View Cart
112
+ </a>
113
  </div>
114
 
115
  <script>
116
+ // Sample data for the menus
117
  const menuItems = {
118
  veg: [
119
  { 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' },
120
  { 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' },
121
+ { name: 'Vegetable Biryani', price: 15, ingredients: 'Rice, Mixed Vegetables, Spices', description: 'Aromatic rice cooked with seasonal vegetables and spices.', imageUrl: 'https://via.placeholder.com/100' }
 
 
 
122
  ],
 
123
  nonVeg: [
124
+ { name: 'Chicken Biryani', price: 14, ingredients: 'Chicken, Rice, Spices', description: 'Aromatic rice cooked with tender chicken and spices.', imageUrl: 'https://via.placeholder.com/100' },
 
125
  { 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' },
126
+ { name: 'Mutton Biryani', price: 16, ingredients: 'Mutton, Rice, Spices', description: 'Flavorful rice dish made with succulent mutton and aromatic spices.', imageUrl: 'https://via.placeholder.com/100' }
 
127
  ]
128
  };
129
 
130
  const cart = [];
131
 
132
+ // Function to display menu based on user's choice (veg or non-veg)
133
  function showMenu(type) {
134
  const menuContainer = document.getElementById('menu-items');
135
  menuContainer.innerHTML = ''; // Clear previous menu items
136
 
 
137
  menuItems[type].forEach(item => {
138
  const div = document.createElement('div');
139
+ div.classList.add('col-md-4', 'mb-4');
140
+ div.innerHTML = `
141
+ <div class="card menu-card">
142
+ <img src="${item.imageUrl}" class="card-img-top menu-image" alt="${item.name}">
143
+ <div class="card-body">
144
+ <h5 class="card-title">${item.name}</h5>
145
+ <p class="card-text">${item.description}</p>
146
+ <p class="card-text">Price: $${item.price}</p>
147
+ <button class="btn btn-primary" onclick="addToCart('${item.name}')">Add to Cart</button>
148
+ </div>
149
+ </div>
150
+ `;
151
  menuContainer.appendChild(div);
152
  });
153
  }
154
 
155
+ // Function to add items to the cart
156
  function addToCart(itemName) {
157
  const quantity = prompt(`How many ${itemName} would you like to add?`, 1);
158
  if (quantity && !isNaN(quantity) && quantity > 0) {
 
164
  alert("Please enter a valid quantity.");
165
  }
166
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
167
  </script>
168
+
169
  </body>
170
  </html>