Hugging Face's logo

Spaces:
agentpx
/
undefined
Running

App Files Community
agentpx commited on
Commit
c94949a
·
verified ·
1 Parent(s): 8bbcc34

I need a sigin with google using firebase here as well as signup with email or link for this

Browse files
Files changed (2) hide show
  1. README.md +8 -4
  2. index.html +571 -19
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 👁
4
  colorFrom: purple
5
- colorTo: purple
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
 
3
  colorFrom: purple
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,571 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Self-Service Ordering</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .category-btn.active {
11
+ background-color: #3b82f6;
12
+ color: white;
13
+ }
14
+ .item-btn:hover {
15
+ transform: scale(1.02);
16
+ }
17
+ .cart-item:hover {
18
+ background-color: #f3f4f6;
19
+ }
20
+ .num-pad-btn:active {
21
+ transform: scale(0.95);
22
+ }
23
+ @media (max-width: 640px) {
24
+ .category-scroll {
25
+ overflow-x: auto;
26
+ white-space: nowrap;
27
+ padding-bottom: 8px;
28
+ }
29
+ .category-scroll::-webkit-scrollbar {
30
+ height: 4px;
31
+ }
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-100 font-sans">
36
+ <div class="flex flex-col h-screen max-w-md mx-auto bg-white shadow-lg">
37
+ <!-- Header - Simplified for customers -->
38
+ <header class="bg-blue-600 text-white p-4 shadow-md">
39
+ <div class="flex justify-between items-center">
40
+ <h1 class="text-xl font-bold">Self-Service Ordering</h1>
41
+ <div class="flex items-center space-x-2">
42
+ <span class="text-sm">Table #<span id="table-number">5</span></span>
43
+ </div>
44
+ </div>
45
+ </header>
46
+
47
+ <!-- Main Content - Single column for mobile -->
48
+ <div class="flex-1 overflow-hidden flex flex-col">
49
+ <!-- Category Navigation -->
50
+ <div class="p-2 bg-gray-200 category-scroll">
51
+ <div class="inline-flex space-x-2">
52
+ <button class="category-btn active px-3 py-2 rounded-lg bg-blue-500 text-white text-sm" data-category="all">
53
+ All
54
+ </button>
55
+ <button class="category-btn px-3 py-2 rounded-lg bg-white hover:bg-gray-300 text-sm" data-category="food">
56
+ Food
57
+ </button>
58
+ <button class="category-btn px-3 py-2 rounded-lg bg-white hover:bg-gray-300 text-sm" data-category="drinks">
59
+ Drinks
60
+ </button>
61
+ <button class="category-btn px-3 py-2 rounded-lg bg-white hover:bg-gray-300 text-sm" data-category="snacks">
62
+ Snacks
63
+ </button>
64
+ <button class="category-btn px-3 py-2 rounded-lg bg-white hover:bg-gray-300 text-sm" data-category="alcohol">
65
+ Beverages
66
+ </button>
67
+ </div>
68
+ </div>
69
+
70
+ <!-- Product Grid - Adjusted for mobile -->
71
+ <div class="flex-1 p-2 overflow-y-auto grid grid-cols-2 gap-2" id="product-grid">
72
+ <!-- Product buttons will be generated here -->
73
+ </div>
74
+
75
+ <!-- Order Summary Bar - Sticky at bottom -->
76
+ <div class="sticky bottom-0 bg-white border-t border-gray-300">
77
+ <div class="flex justify-between items-center p-2">
78
+ <div class="text-sm">
79
+ <span id="cart-count">0</span> item(s) | ₱<span id="cart-total">0.00</span>
80
+ </div>
81
+ <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-sm" id="view-cart">
82
+ <i class="fas fa-shopping-cart mr-1"></i> View Cart
83
+ </button>
84
+ </div>
85
+ </div>
86
+ </div>
87
+
88
+ <!-- Cart Modal -->
89
+ <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="cart-modal">
90
+ <div class="bg-white rounded-t-lg w-full max-w-md absolute bottom-0 max-h-[80vh] flex flex-col">
91
+ <div class="p-4 border-b border-gray-300 flex justify-between items-center sticky top-0 bg-white">
92
+ <h2 class="text-lg font-bold">Your Order</h2>
93
+ <button class="text-gray-500" id="close-cart">
94
+ <i class="fas fa-times"></i>
95
+ </button>
96
+ </div>
97
+ <div class="flex-1 overflow-y-auto p-4" id="cart-items">
98
+ <!-- Cart items will be displayed here -->
99
+ <div class="text-center text-gray-500 py-10" id="empty-cart-message">
100
+ <i class="fas fa-shopping-cart text-4xl mb-2"></i>
101
+ <p>Your cart is empty</p>
102
+ <p class="text-sm">Select items to add to your order</p>
103
+ </div>
104
+ </div>
105
+ <div class="p-4 bg-white border-t border-gray-300">
106
+ <div class="flex justify-between mb-1 text-sm">
107
+ <span>Subtotal:</span>
108
+ <span id="subtotal">₱0.00</span>
109
+ </div>
110
+ <div class="flex justify-between mb-1 text-sm">
111
+ <span>Tax (10%):</span>
112
+ <span id="tax">₱0.00</span>
113
+ </div>
114
+ <div class="flex justify-between font-bold mt-2">
115
+ <span>TOTAL:</span>
116
+ <span id="total">₱0.00</span>
117
+ </div>
118
+ <div class="grid grid-cols-2 gap-2 mt-4">
119
+ <button class="bg-gray-200 hover:bg-gray-300 py-2 rounded-lg text-sm" id="keep-shopping">
120
+ Keep Shopping
121
+ </button>
122
+ <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg text-sm" id="proceed-payment">
123
+ Checkout
124
+ </button>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Table Selection Modal -->
131
+ <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="table-modal">
132
+ <div class="bg-white rounded-lg p-6 w-5/6 max-w-sm">
133
+ <h2 class="text-lg font-bold mb-4">Select Your Table</h2>
134
+ <div class="grid grid-cols-4 gap-2">
135
+ <button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="1">1</button>
136
+ <button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="2">2</button>
137
+ <button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="3">3</button>
138
+ <button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="4">4</button>
139
+ <button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="5">5</button>
140
+ <button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="6">6</button>
141
+ <button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="7">7</button>
142
+ <button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="8">8</button>
143
+ <button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="9">9</button>
144
+ <button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="10">10</button>
145
+ <button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="11">11</button>
146
+ <button class="table-btn bg-gray-200 hover:bg-gray-300 py-3 rounded" data-table="12">12</button>
147
+ </div>
148
+ <div class="mt-4 flex justify-center">
149
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm" id="confirm-table">
150
+ Confirm
151
+ </button>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Payment Modal -->
157
+ <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="payment-modal">
158
+ <div class="bg-white rounded-lg p-6 w-5/6 max-w-sm">
159
+ <h2 class="text-lg font-bold mb-4">Payment</h2>
160
+ <div class="mb-4">
161
+ <div class="flex justify-between mb-1">
162
+ <span>Total:</span>
163
+ <span id="payment-total">₱0.00</span>
164
+ </div>
165
+ <div class="mb-3">
166
+ <label class="block text-gray-700 mb-1 text-sm">Payment Method</label>
167
+ <select class="w-full p-2 border rounded text-sm" id="payment-method">
168
+ <option value="cash">Cash</option>
169
+ <option value="card">Credit/Debit Card</option>
170
+ <option value="mobile">Mobile Payment</option>
171
+ </select>
172
+ </div>
173
+ <div class="mb-3" id="cash-payment">
174
+ <label class="block text-gray-700 mb-1 text-sm">Amount Received</label>
175
+ <input type="number" class="w-full p-2 border rounded text-sm" id="amount-received">
176
+ <div class="grid grid-cols-3 gap-2 mt-2" id="payment-keypad">
177
+ <button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">1</button>
178
+ <button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">2</button>
179
+ <button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">3</button>
180
+ <button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">4</button>
181
+ <button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">5</button>
182
+ <button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">6</button>
183
+ <button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">7</button>
184
+ <button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">8</button>
185
+ <button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">9</button>
186
+ <button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">.</button>
187
+ <button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">0</button>
188
+ <button class="num-pad-btn bg-gray-200 hover:bg-gray-300 py-2 rounded">
189
+ <i class="fas fa-backspace"></i>
190
+ </button>
191
+ </div>
192
+ </div>
193
+ <div class="hidden" id="change-display">
194
+ <div class="flex justify-between">
195
+ <span>Change:</span>
196
+ <span id="change-amount">₱0.00</span>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ <div class="flex space-x-2">
201
+ <button class="flex-1 bg-gray-500 hover:bg-gray-600 text-white py-2 rounded-lg text-sm" id="cancel-payment">
202
+ Cancel
203
+ </button>
204
+ <button class="flex-1 bg-green-500 hover:bg-green-600 text-white py-2 rounded-lg text-sm" id="complete-payment">
205
+ Pay Now
206
+ </button>
207
+ </div>
208
+ </div>
209
+ </div>
210
+
211
+ <!-- Order Confirmation Modal -->
212
+ <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" id="confirmation-modal">
213
+ <div class="bg-white rounded-lg p-6 w-5/6 max-w-sm text-center">
214
+ <div class="text-green-500 text-5xl mb-4">
215
+ <i class="fas fa-check-circle"></i>
216
+ </div>
217
+ <h2 class="text-xl font-bold mb-2">Order Placed Successfully!</h2>
218
+ <p class="text-gray-600 mb-4">Your order #<span id="order-number">123</span> has been received.</p>
219
+ <p class="text-sm text-gray-500 mb-4">Estimated preparation time: 15-20 minutes</p>
220
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg w-full" id="new-order">
221
+ Start New Order
222
+ </button>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <script>
228
+ // Sample data
229
+ const products = [
230
+ { id: 1, name: "Cheeseburger", price: 5.99, category: "food" },
231
+ { id: 2, name: "Pepperoni Pizza", price: 8.99, category: "food" },
232
+ { id: 3, name: "French Fries", price: 2.99, category: "food" },
233
+ { id: 4, name: "Soda", price: 1.50, category: "drinks" },
234
+ { id: 5, name: "Bottled Water", price: 1.00, category: "drinks" },
235
+ { id: 6, name: "Orange Juice", price: 2.50, category: "drinks" },
236
+ { id: 7, name: "Potato Chips", price: 1.25, category: "snacks" },
237
+ { id: 8, name: "Chocolate Bar", price: 1.00, category: "snacks" },
238
+ { id: 9, name: "Craft Beer", price: 3.50, category: "alcohol" },
239
+ { id: 10, name: "House Wine", price: 5.00, category: "alcohol" },
240
+ { id: 11, name: "Garden Salad", price: 4.50, category: "food" },
241
+ { id: 12, name: "Coffee", price: 2.00, category: "drinks" }
242
+ ];
243
+
244
+ // Current cart state
245
+ let cart = [];
246
+ let currentTable = 5;
247
+ let orderNumber = Math.floor(Math.random() * 9000) + 1000;
248
+
249
+ // DOM elements
250
+ const productGrid = document.getElementById('product-grid');
251
+ const cartItemsContainer = document.getElementById('cart-items');
252
+ const emptyCartMessage = document.getElementById('empty-cart-message');
253
+ const subtotalElement = document.getElementById('subtotal');
254
+ const taxElement = document.getElementById('tax');
255
+ const totalElement = document.getElementById('total');
256
+ const cartTotalElement = document.getElementById('cart-total');
257
+ const cartCountElement = document.getElementById('cart-count');
258
+ const categoryButtons = document.querySelectorAll('.category-btn');
259
+ const tableNumberElement = document.getElementById('table-number');
260
+
261
+ // Initialize the app
262
+ function init() {
263
+ renderProducts('all');
264
+ updateTableNumber();
265
+
266
+ // Show table selection modal on first load
267
+ document.getElementById('table-modal').classList.remove('hidden');
268
+ }
269
+
270
+ // Render products based on category
271
+ function renderProducts(category) {
272
+ productGrid.innerHTML = '';
273
+
274
+ const filteredProducts = category === 'all'
275
+ ? products
276
+ : products.filter(product => product.category === category);
277
+
278
+ filteredProducts.forEach(product => {
279
+ const productBtn = document.createElement('div');
280
+ productBtn.className = 'item-btn bg-white p-3 rounded-lg shadow-sm border border-gray-200 flex flex-col items-center';
281
+ productBtn.dataset.id = product.id;
282
+
283
+ productBtn.innerHTML = `
284
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-2 overflow-hidden">
285
+ ${product.image ? `<img src="${product.image}" class="w-full h-full object-cover">` : `
286
+ <i class="fas ${getProductIcon(product.category)} text-blue-500"></i>`}
287
+ </div>
288
+ <span class="font-semibold text-sm text-center">${product.name}</span>
289
+ <span class="text-blue-600 text-sm">₱${product.price.toFixed(2)}</span>
290
+ `;
291
+
292
+ productBtn.addEventListener('click', () => addToCart(product.id));
293
+ productGrid.appendChild(productBtn);
294
+ });
295
+ }
296
+
297
+ // Helper function to get appropriate icon for product category
298
+ function getProductIcon(category) {
299
+ switch(category) {
300
+ case 'food': return 'fa-utensils';
301
+ case 'drinks': return 'fa-glass-whiskey';
302
+ case 'snacks': return 'fa-cookie';
303
+ case 'alcohol': return 'fa-wine-glass-alt';
304
+ default: return 'fa-shopping-bag';
305
+ }
306
+ }
307
+
308
+ // Add item to cart
309
+ function addToCart(productId) {
310
+ const product = products.find(p => p.id === productId);
311
+ const existingItem = cart.find(item => item.id === productId);
312
+
313
+ if (existingItem) {
314
+ existingItem.quantity++;
315
+ } else {
316
+ cart.push({
317
+ id: product.id,
318
+ name: product.name,
319
+ price: product.price,
320
+ quantity: 1
321
+ });
322
+ }
323
+
324
+ updateCartDisplay();
325
+ showAddedToCartFeedback(product.name);
326
+ }
327
+
328
+ // Show brief feedback when item is added to cart
329
+ function showAddedToCartFeedback(productName) {
330
+ const feedback = document.createElement('div');
331
+ feedback.className = 'fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg z-50 animate-fade';
332
+ feedback.innerHTML = `Added ${productName} to cart`;
333
+ document.body.appendChild(feedback);
334
+
335
+ setTimeout(() => {
336
+ feedback.classList.add('opacity-0', 'transition-opacity', 'duration-300');
337
+ setTimeout(() => feedback.remove(), 300);
338
+ }, 1500);
339
+ }
340
+
341
+ // Update cart display in the bottom bar
342
+ function updateCartMiniDisplay() {
343
+ const itemCount = cart.reduce((sum, item) => sum + item.quantity, 0);
344
+ const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
345
+
346
+ cartCountElement.textContent = itemCount;
347
+ cartTotalElement.textContent = total.toFixed(2);
348
+ }
349
+
350
+ // Render cart items in the cart modal
351
+ function renderCart() {
352
+ if (cart.length === 0) {
353
+ emptyCartMessage.classList.remove('hidden');
354
+ cartItemsContainer.innerHTML = '';
355
+ return;
356
+ }
357
+
358
+ emptyCartMessage.classList.add('hidden');
359
+ cartItemsContainer.innerHTML = '';
360
+
361
+ cart.forEach(item => {
362
+ const cartItem = document.createElement('div');
363
+ cartItem.className = 'cart-item flex justify-between items-center p-3 mb-2 bg-white rounded-lg shadow-sm';
364
+ cartItem.innerHTML = `
365
+ <div class="flex-1">
366
+ <div class="font-semibold text-sm">${item.name}</div>
367
+ <div class="text-xs text-gray-500">₱${item.price.toFixed(2)} each</div>
368
+ </div>
369
+ <div class="flex items-center">
370
+ <button class="qty-btn minus w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-xs" data-id="${item.id}">
371
+ <i class="fas fa-minus"></i>
372
+ </button>
373
+ <span class="mx-2 w-6 text-center text-sm">${item.quantity}</span>
374
+ <button class="qty-btn plus w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-xs" data-id="${item.id}">
375
+ <i class="fas fa-plus"></i>
376
+ </button>
377
+ <div class="ml-3 w-16 text-right text-sm font-semibold">₱${(item.price * item.quantity).toFixed(2)}</div>
378
+ <button class="delete-btn ml-2 w-6 h-6 rounded-full bg-red-100 text-red-600 flex items-center justify-center text-xs" data-id="${item.id}">
379
+ <i class="fas fa-times"></i>
380
+ </button>
381
+ </div>
382
+ `;
383
+ cartItemsContainer.appendChild(cartItem);
384
+ });
385
+
386
+ updateCartTotals();
387
+ }
388
+
389
+ // Update cart totals
390
+ function updateCartTotals() {
391
+ const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
392
+ const tax = subtotal * 0.10;
393
+ const total = subtotal + tax;
394
+
395
+ subtotalElement.textContent = `₱${subtotal.toFixed(2)}`;
396
+ taxElement.textContent = `₱${tax.toFixed(2)}`;
397
+ totalElement.textContent = `₱${total.toFixed(2)}`;
398
+ }
399
+
400
+ // Update entire cart display (both mini and modal)
401
+ function updateCartDisplay() {
402
+ updateCartMiniDisplay();
403
+ renderCart();
404
+ updateCartTotals();
405
+ }
406
+
407
+ // Update table number display
408
+ function updateTableNumber() {
409
+ tableNumberElement.textContent = currentTable;
410
+ }
411
+
412
+ // Event listeners
413
+ categoryButtons.forEach(btn => {
414
+ btn.addEventListener('click', function() {
415
+ categoryButtons.forEach(b => b.classList.remove('active', 'bg-blue-500', 'text-white'));
416
+ this.classList.add('active', 'bg-blue-500', 'text-white');
417
+ renderProducts(this.getAttribute('data-category'));
418
+ });
419
+ });
420
+
421
+ // View cart button
422
+ document.getElementById('view-cart').addEventListener('click', function() {
423
+ document.getElementById('cart-modal').classList.remove('hidden');
424
+ });
425
+
426
+ // Close cart modal
427
+ document.getElementById('close-cart').addEventListener('click', function() {
428
+ document.getElementById('cart-modal').classList.add('hidden');
429
+ });
430
+
431
+ // Keep shopping button
432
+ document.getElementById('keep-shopping').addEventListener('click', function() {
433
+ document.getElementById('cart-modal').classList.add('hidden');
434
+ });
435
+
436
+ // Proceed to payment button
437
+ document.getElementById('proceed-payment').addEventListener('click', function() {
438
+ if (cart.length === 0) return;
439
+
440
+ document.getElementById('payment-total').textContent = totalElement.textContent;
441
+ document.getElementById('cart-modal').classList.add('hidden');
442
+ document.getElementById('payment-modal').classList.remove('hidden');
443
+ });
444
+
445
+ // Cancel payment button
446
+ document.getElementById('cancel-payment').addEventListener('click', function() {
447
+ document.getElementById('payment-modal').classList.add('hidden');
448
+ });
449
+
450
+ // Complete payment button
451
+ document.getElementById('complete-payment').addEventListener('click', function() {
452
+ const paymentMethod = document.getElementById('payment-method').value;
453
+ const amountReceived = parseFloat(document.getElementById('amount-received').value) || 0;
454
+ const total = parseFloat(totalElement.textContent.substring(1));
455
+
456
+ // Validate cash payment
457
+ if (paymentMethod === 'cash' && amountReceived < total) {
458
+ alert('Amount received is less than total amount');
459
+ return;
460
+ }
461
+
462
+ // Process the payment
463
+ processPayment();
464
+ });
465
+
466
+ // Process the payment and show confirmation
467
+ function processPayment() {
468
+ // In a real app, this would send the order to the kitchen/bar system
469
+ document.getElementById('payment-modal').classList.add('hidden');
470
+ document.getElementById('order-number').textContent = orderNumber++;
471
+ document.getElementById('confirmation-modal').classList.remove('hidden');
472
+
473
+ // Reset for new order
474
+ cart = [];
475
+ updateCartDisplay();
476
+ }
477
+
478
+ // Start new order button
479
+ document.getElementById('new-order').addEventListener('click', function() {
480
+ document.getElementById('confirmation-modal').classList.add('hidden');
481
+ document.getElementById('table-modal').classList.remove('hidden');
482
+ });
483
+
484
+ // Table selection
485
+ document.querySelectorAll('.table-btn').forEach(btn => {
486
+ btn.addEventListener('click', function() {
487
+ // Highlight selected table
488
+ document.querySelectorAll('.table-btn').forEach(b =>
489
+ b.classList.remove('bg-blue-500', 'text-white'));
490
+ this.classList.add('bg-blue-500', 'text-white');
491
+ currentTable = parseInt(this.dataset.table);
492
+ });
493
+ });
494
+
495
+ // Confirm table selection
496
+ document.getElementById('confirm-table').addEventListener('click', function() {
497
+ document.getElementById('table-modal').classList.add('hidden');
498
+ updateTableNumber();
499
+ });
500
+
501
+ // Handle quantity changes in cart
502
+ document.addEventListener('click', function(e) {
503
+ if (e.target.closest('.qty-btn')) {
504
+ const btn = e.target.closest('.qty-btn');
505
+ const itemId = parseInt(btn.getAttribute('data-id'));
506
+ const item = cart.find(i => i.id === itemId);
507
+
508
+ if (btn.classList.contains('minus')) {
509
+ if (item.quantity > 1) {
510
+ item.quantity--;
511
+ } else {
512
+ cart = cart.filter(i => i.id !== itemId);
513
+ }
514
+ } else if (btn.classList.contains('plus')) {
515
+ item.quantity++;
516
+ }
517
+
518
+ updateCartDisplay();
519
+ }
520
+
521
+ if (e.target.closest('.delete-btn')) {
522
+ const itemId = parseInt(e.target.closest('.delete-btn').getAttribute('data-id'));
523
+ cart = cart.filter(i => i.id !== itemId);
524
+ updateCartDisplay();
525
+ }
526
+ });
527
+
528
+ // Payment keypad functionality
529
+ document.querySelectorAll('#payment-keypad .num-pad-btn').forEach(btn => {
530
+ btn.addEventListener('click', function() {
531
+ const input = document.getElementById('amount-received');
532
+ let currentValue = input.value || '';
533
+
534
+ if (this.textContent.trim() === '<i class="fas fa-backspace"></i>') {
535
+ input.value = currentValue.slice(0, -1);
536
+ } else if (this.textContent.trim() === '.' && currentValue.includes('.')) {
537
+ return;
538
+ } else {
539
+ input.value = currentValue + this.textContent.trim();
540
+ }
541
+
542
+ // Calculate change if cash payment
543
+ const amountReceived = parseFloat(input.value) || 0;
544
+ const total = parseFloat(totalElement.textContent.substring(1));
545
+
546
+ if (amountReceived >= total) {
547
+ const change = amountReceived - total;
548
+ document.getElementById('change-amount').textContent = `₱${change.toFixed(2)}`;
549
+ document.getElementById('change-display').classList.remove('hidden');
550
+ } else {
551
+ document.getElementById('change-display').classList.add('hidden');
552
+ }
553
+ });
554
+ });
555
+
556
+ // Payment method change handler
557
+ document.getElementById('payment-method').addEventListener('change', function() {
558
+ if (this.value === 'cash') {
559
+ document.getElementById('cash-payment').classList.remove('hidden');
560
+ } else {
561
+ document.getElementById('cash-payment').classList.add('hidden');
562
+ document.getElementById('change-display').classList.add('hidden');
563
+ }
564
+ });
565
+
566
+ // Initialize the app when the page loads
567
+ window.addEventListener('DOMContentLoaded', init);
568
+ </script>
569
+ </body>
570
+ </html>
571
+