Hugging Face's logo

Spaces:
geethareddy
/
voicemenuspe
Running

App Files Community
lokesh341 commited on
Commit
a728ee2
·
verified ·
1 Parent(s): e9a1ebf

Update templates/menu_page.html

Browse files
Files changed (1) hide show
  1. templates/menu_page.html +12 -48
templates/menu_page.html CHANGED
@@ -61,19 +61,6 @@
61
  #cart-summary {
62
  display: none;
63
  }
64
- #view-cart-btn {
65
- padding: 10px 20px;
66
- background-color: #4CAF50;
67
- color: white;
68
- border: none;
69
- border-radius: 5px;
70
- cursor: pointer;
71
- font-size: 1.2rem;
72
- margin-top: 20px;
73
- }
74
- #view-cart-btn:hover {
75
- background-color: #45a049;
76
- }
77
  </style>
78
  </head>
79
  <body>
@@ -84,7 +71,6 @@
84
  <h3 id="category-title">Please select a category:</h3>
85
  <button id="main-course-btn">Main Course</button>
86
  <button id="appetizer-btn">Appetizers</button>
87
- <button id="view-cart-btn" onclick="viewCart()">View Cart</button>
88
  </div>
89
 
90
  <!-- Page 2: Main Course Menu -->
@@ -92,7 +78,6 @@
92
  <h1>Main Course Menu</h1>
93
  <div id="main-course-items"></div>
94
  <button id="back-to-category-btn">Back to Category Selection</button>
95
- <button id="view-cart-btn" onclick="viewCart()">View Cart</button>
96
  </div>
97
 
98
  <!-- Page 3: Appetizers Menu -->
@@ -100,15 +85,6 @@
100
  <h1>Appetizers Menu</h1>
101
  <div id="appetizer-items"></div>
102
  <button id="back-to-category-btn2">Back to Category Selection</button>
103
- <button id="view-cart-btn" onclick="viewCart()">View Cart</button>
104
- </div>
105
-
106
- <!-- Page 4: View Cart -->
107
- <div id="view-cart-page" class="menu-container" style="display: none;">
108
- <h1>Your Cart</h1>
109
- <div id="cart-details"></div>
110
- <button id="place-order-btn">Place Final Order</button>
111
- <button id="back-to-category-btn3" onclick="backToCategory()">Back to Category Selection</button>
112
  </div>
113
 
114
  <script>
@@ -129,7 +105,6 @@ const menuData = {
129
  const categoryButtons = document.getElementById('page1');
130
  const mainCoursePage = document.getElementById('main-course-page');
131
  const appetizerPage = document.getElementById('appetizer-page');
132
- const viewCartPage = document.getElementById('view-cart-page');
133
  const backToCategoryBtns = document.querySelectorAll('[id^="back-to-category-btn"]');
134
  let cart = []; // Global cart variable to store items
135
  let menuData = {}; // Will store menu items based on categories
@@ -155,29 +130,6 @@ backToCategoryBtns.forEach(button => {
155
  });
156
  });
157
 
158
- // Show Cart page
159
- function viewCart() {
160
- viewCartPage.style.display = "block";
161
- categoryButtons.style.display = "none";
162
- mainCoursePage.style.display = "none";
163
- appetizerPage.style.display = "none";
164
- displayCartDetails();
165
- }
166
-
167
- // Show Cart Details on the View Cart Page
168
- function displayCartDetails() {
169
- const cartDetails = document.getElementById("cart-details");
170
- if (cart.length > 0) {
171
- let cartHtml = "";
172
- cart.forEach(item => {
173
- cartHtml += `<p>${item.quantity} x ${item.name} - ₹${item.price * item.quantity}</p>`;
174
- });
175
- cartDetails.innerHTML = cartHtml;
176
- } else {
177
- cartDetails.innerHTML = "<p>Your cart is empty.</p>";
178
- }
179
- }
180
-
181
  // Function to populate the menu based on selected category
182
  function displayMenuItems(category) {
183
  const menuContainer = category === 'Main Course' ? document.getElementById('main-course-items') : document.getElementById('appetizer-items');
@@ -202,6 +154,18 @@ function displayMenuItems(category) {
202
  function addToCart(itemName, quantity) {
203
  const item = findItem(itemName);
204
  cart.push({ name: item.name, price: item.price, quantity: quantity });
 
 
 
 
 
 
 
 
 
 
 
 
205
  }
206
 
207
  // Function to find item in the menu
 
61
  #cart-summary {
62
  display: none;
63
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
64
  </style>
65
  </head>
66
  <body>
 
71
  <h3 id="category-title">Please select a category:</h3>
72
  <button id="main-course-btn">Main Course</button>
73
  <button id="appetizer-btn">Appetizers</button>
 
74
  </div>
75
 
76
  <!-- Page 2: Main Course Menu -->
 
78
  <h1>Main Course Menu</h1>
79
  <div id="main-course-items"></div>
80
  <button id="back-to-category-btn">Back to Category Selection</button>
 
81
  </div>
82
 
83
  <!-- Page 3: Appetizers Menu -->
 
85
  <h1>Appetizers Menu</h1>
86
  <div id="appetizer-items"></div>
87
  <button id="back-to-category-btn2">Back to Category Selection</button>
 
 
 
 
 
 
 
 
 
88
  </div>
89
 
90
  <script>
 
105
  const categoryButtons = document.getElementById('page1');
106
  const mainCoursePage = document.getElementById('main-course-page');
107
  const appetizerPage = document.getElementById('appetizer-page');
 
108
  const backToCategoryBtns = document.querySelectorAll('[id^="back-to-category-btn"]');
109
  let cart = []; // Global cart variable to store items
110
  let menuData = {}; // Will store menu items based on categories
 
130
  });
131
  });
132
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
133
  // Function to populate the menu based on selected category
134
  function displayMenuItems(category) {
135
  const menuContainer = category === 'Main Course' ? document.getElementById('main-course-items') : document.getElementById('appetizer-items');
 
154
  function addToCart(itemName, quantity) {
155
  const item = findItem(itemName);
156
  cart.push({ name: item.name, price: item.price, quantity: quantity });
157
+ displayCartSummary();
158
+ }
159
+
160
+ // Function to show cart details
161
+ function displayCartSummary() {
162
+ let cartHtml = "";
163
+ cart.forEach(item => {
164
+ cartHtml += `<p>${item.quantity} x ${item.name} - ₹${item.price * item.quantity}</p>`;
165
+ });
166
+ const cartSummary = document.getElementById("cart-summary");
167
+ cartSummary.innerHTML = cartHtml;
168
+ cartSummary.style.display = "block";
169
  }
170
 
171
  // Function to find item in the menu