Hugging Face's logo

Spaces:
juanutuy
/
dist-lucy-pos
Running

App Files Community
juanutuy commited on
Commit
cbbc706
·
verified ·
1 Parent(s): 784bbf1

change currency to guatemala - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +673 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dist Lucy Pos
3
- emoji: 🚀
4
- colorFrom: indigo
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: dist-lucy-pos
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,673 @@
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>Dist Lucy - Sistema POS (Guatemala)</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
+ @keyframes pulse {
11
+ 0%, 100% { opacity: 1; }
12
+ 50% { opacity: 0.5; }
13
+ }
14
+ .animate-pulse {
15
+ animation: pulse 2s infinite;
16
+ }
17
+ .receipt-print {
18
+ transform: scaleY(0);
19
+ transform-origin: top;
20
+ transition: transform 0.3s ease-out;
21
+ }
22
+ .receipt-print.active {
23
+ transform: scaleY(1);
24
+ }
25
+ .product-card:hover {
26
+ transform: translateY(-5px);
27
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
28
+ }
29
+ .product-card {
30
+ transition: all 0.3s ease;
31
+ }
32
+ .sidebar {
33
+ transition: all 0.3s ease;
34
+ }
35
+ @media (max-width: 768px) {
36
+ .sidebar {
37
+ position: fixed;
38
+ left: -100%;
39
+ top: 0;
40
+ z-index: 50;
41
+ height: 100vh;
42
+ }
43
+ .sidebar.active {
44
+ left: 0;
45
+ }
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-100 font-sans">
50
+ <div class="min-h-screen flex flex-col">
51
+ <!-- Header -->
52
+ <header class="bg-indigo-900 text-white shadow-lg">
53
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
54
+ <div class="flex items-center space-x-2">
55
+ <button id="menu-toggle" class="md:hidden text-white focus:outline-none">
56
+ <i class="fas fa-bars text-2xl"></i>
57
+ </button>
58
+ <h1 class="text-2xl font-bold">
59
+ <i class="fas fa-tshirt mr-2"></i>Dist Lucy POS
60
+ </h1>
61
+ </div>
62
+ <div class="flex items-center space-x-4">
63
+ <div class="hidden md:flex items-center space-x-2">
64
+ <i class="fas fa-user-circle"></i>
65
+ <span>Cashier: Lucy</span>
66
+ </div>
67
+ <div class="hidden md:flex items-center space-x-2">
68
+ <i class="fas fa-calendar-alt"></i>
69
+ <span id="current-date"></span>
70
+ </div>
71
+ <button class="bg-indigo-700 hover:bg-indigo-600 px-4 py-2 rounded-lg flex items-center space-x-2">
72
+ <i class="fas fa-sign-out-alt"></i>
73
+ <span class="hidden md:inline">Logout</span>
74
+ </button>
75
+ </div>
76
+ </div>
77
+ </header>
78
+
79
+ <div class="flex flex-1 overflow-hidden">
80
+ <!-- Sidebar -->
81
+ <aside class="sidebar bg-white w-64 shadow-md md:shadow-none md:relative">
82
+ <div class="p-4">
83
+ <div class="mb-6">
84
+ <h2 class="text-lg font-semibold text-gray-700 mb-2">Quick Actions</h2>
85
+ <div class="grid grid-cols-2 gap-2">
86
+ <button class="bg-blue-100 text-blue-800 p-2 rounded-lg hover:bg-blue-200 transition">
87
+ <i class="fas fa-redo mr-1"></i> Return
88
+ </button>
89
+ <button class="bg-green-100 text-green-800 p-2 rounded-lg hover:bg-green-200 transition">
90
+ <i class="fas fa-exchange-alt mr-1"></i> Exchange
91
+ </button>
92
+ <button class="bg-purple-100 text-purple-800 p-2 rounded-lg hover:bg-purple-200 transition">
93
+ <i class="fas fa-tag mr-1"></i> Discount
94
+ </button>
95
+ <button class="bg-yellow-100 text-yellow-800 p-2 rounded-lg hover:bg-yellow-200 transition">
96
+ <i class="fas fa-receipt mr-1"></i> Hold
97
+ </button>
98
+ </div>
99
+ </div>
100
+
101
+ <div class="mb-6">
102
+ <h2 class="text-lg font-semibold text-gray-700 mb-2">Categories</h2>
103
+ <div class="space-y-1">
104
+ <button class="category-btn w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 transition" data-category="all">
105
+ <i class="fas fa-boxes mr-2"></i>All Products
106
+ </button>
107
+ <button class="category-btn w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 transition" data-category="men">
108
+ <i class="fas fa-male mr-2"></i>Men's Clothing
109
+ </button>
110
+ <button class="category-btn w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 transition" data-category="women">
111
+ <i class="fas fa-female mr-2"></i>Women's Clothing
112
+ </button>
113
+ <button class="category-btn w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 transition" data-category="kids">
114
+ <i class="fas fa-child mr-2"></i>Kids' Collection
115
+ </button>
116
+ <button class="category-btn w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 transition" data-category="accessories">
117
+ <i class="fas fa-tshirt mr-2"></i>Accessories
118
+ </button>
119
+ </div>
120
+ </div>
121
+
122
+ <div class="mb-6">
123
+ <h2 class="text-lg font-semibold text-gray-700 mb-2">Inventory</h2>
124
+ <div class="flex items-center justify-between mb-2">
125
+ <span class="text-sm text-gray-600">Low Stock Items</span>
126
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">3</span>
127
+ </div>
128
+ <div class="flex items-center justify-between">
129
+ <span class="text-sm text-gray-600">New Arrivals</span>
130
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">12</span>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </aside>
135
+
136
+ <!-- Main Content -->
137
+ <main class="flex-1 overflow-auto p-4">
138
+ <div class="container mx-auto">
139
+ <!-- Search and Filter -->
140
+ <div class="mb-6 bg-white rounded-lg shadow p-4">
141
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
142
+ <div class="relative flex-1 max-w-md">
143
+ <input type="text" placeholder="Search products..." class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
144
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
145
+ </div>
146
+ <div class="flex space-x-2">
147
+ <select class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
148
+ <option>Sort by</option>
149
+ <option>Price: Low to High</option>
150
+ <option>Price: High to Low</option>
151
+ <option>Popularity</option>
152
+ </select>
153
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
154
+ <i class="fas fa-filter mr-2"></i>Filter
155
+ </button>
156
+ </div>
157
+ </div>
158
+ </div>
159
+
160
+ <!-- Products Grid -->
161
+ <div class="mb-6">
162
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Available Products</h2>
163
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
164
+ <!-- Product cards will be dynamically inserted here -->
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Current Transaction -->
169
+ <div class="bg-white rounded-lg shadow overflow-hidden">
170
+ <div class="p-4 border-b">
171
+ <h2 class="text-xl font-semibold text-gray-800">Current Transaction</h2>
172
+ </div>
173
+ <div class="p-4">
174
+ <div class="flex justify-between items-center mb-4">
175
+ <div>
176
+ <span class="text-gray-600">Transaction #</span>
177
+ <span class="font-semibold">DL-2023-00142</span>
178
+ </div>
179
+ <div>
180
+ <span class="text-gray-600">Cashier:</span>
181
+ <span class="font-semibold">Lucy</span>
182
+ </div>
183
+ </div>
184
+
185
+ <div class="overflow-x-auto">
186
+ <table class="min-w-full divide-y divide-gray-200">
187
+ <thead class="bg-gray-50">
188
+ <tr>
189
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Item</th>
190
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
191
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Qty</th>
192
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
193
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
194
+ </tr>
195
+ </thead>
196
+ <tbody class="bg-white divide-y divide-gray-200" id="cart-items">
197
+ <!-- Cart items will be dynamically inserted here -->
198
+ <tr id="empty-cart">
199
+ <td colspan="5" class="px-6 py-4 text-center text-gray-500">No items added yet</td>
200
+ </tr>
201
+ </tbody>
202
+ </table>
203
+ </div>
204
+
205
+ <div class="mt-6 flex flex-col md:flex-row md:space-x-6 space-y-4 md:space-y-0">
206
+ <div class="flex-1 bg-gray-50 p-4 rounded-lg">
207
+ <h3 class="text-lg font-semibold text-gray-800 mb-3">Payment Summary</h3>
208
+ <div class="space-y-2">
209
+ <div class="flex justify-between">
210
+ <span class="text-gray-600">Subtotal:</span>
211
+ <span class="font-medium" id="subtotal">$0.00</span>
212
+ </div>
213
+ <div class="flex justify-between">
214
+ <span class="text-gray-600">Tax (8%):</span>
215
+ <span class="font-medium" id="tax">$0.00</span>
216
+ </div>
217
+ <div class="flex justify-between border-t pt-2">
218
+ <span class="text-gray-800 font-semibold">Total:</span>
219
+ <span class="text-indigo-600 font-bold" id="total">$0.00</span>
220
+ </div>
221
+ </div>
222
+
223
+ <div class="mt-4">
224
+ <label class="block text-sm font-medium text-gray-700 mb-1">Payment Method</label>
225
+ <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
226
+ <option>Cash</option>
227
+ <option>Credit Card</option>
228
+ <option>Debit Card</option>
229
+ <option>Mobile Payment</option>
230
+ </select>
231
+ </div>
232
+
233
+ <div class="mt-4">
234
+ <label class="block text-sm font-medium text-gray-700 mb-1">Amount Tendered</label>
235
+ <input type="number" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="0.00">
236
+ </div>
237
+
238
+ <div class="mt-6 grid grid-cols-2 gap-2">
239
+ <button class="bg-gray-200 text-gray-800 py-2 rounded-lg hover:bg-gray-300 transition">
240
+ <i class="fas fa-times mr-2"></i>Cancel
241
+ </button>
242
+ <button id="checkout-btn" class="bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition">
243
+ <i class="fas fa-check mr-2"></i>Complete Sale
244
+ </button>
245
+ </div>
246
+ </div>
247
+
248
+ <div class="flex-1 bg-gray-50 p-4 rounded-lg">
249
+ <h3 class="text-lg font-semibold text-gray-800 mb-3">Customer Information</h3>
250
+ <div class="space-y-3">
251
+ <div>
252
+ <label class="block text-sm font-medium text-gray-700 mb-1">Customer Name</label>
253
+ <input type="text" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Optional">
254
+ </div>
255
+ <div>
256
+ <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
257
+ <input type="tel" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Optional">
258
+ </div>
259
+ <div>
260
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
261
+ <input type="email" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Optional">
262
+ </div>
263
+ <div>
264
+ <label class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
265
+ <textarea class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" rows="2" placeholder="Any special requests..."></textarea>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </main>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Receipt Modal -->
278
+ <div id="receipt-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
279
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
280
+ <div class="p-4 border-b flex justify-between items-center">
281
+ <h3 class="text-lg font-semibold">Transaction Receipt</h3>
282
+ <button id="close-receipt" class="text-gray-500 hover:text-gray-700">
283
+ <i class="fas fa-times"></i>
284
+ </button>
285
+ </div>
286
+ <div class="p-4">
287
+ <div class="receipt-print bg-white p-4 border border-dashed border-gray-300">
288
+ <div class="text-center mb-4">
289
+ <h2 class="text-xl font-bold">Dist Lucy</h2>
290
+ <p class="text-sm text-gray-600">6a Avenida 8-00, Zona 1</p>
291
+ <p class="text-sm text-gray-600">Ciudad de Guatemala</p>
292
+ <p class="text-sm text-gray-600">Teléfono: 1234-5678</p>
293
+ </div>
294
+ <div class="border-t border-b border-gray-200 py-2">
295
+ <div class="flex justify-between text-sm">
296
+ <span class="text-gray-600">Date:</span>
297
+ <span id="receipt-date"></span>
298
+ </div>
299
+ <div class="flex justify-between text-sm">
300
+ <span class="text-gray-600">Transaction #:</span>
301
+ <span>DL-2023-00142</span>
302
+ </div>
303
+ <div class="flex justify-between text-sm">
304
+ <span class="text-gray-600">Cashier:</span>
305
+ <span>Lucy</span>
306
+ </div>
307
+ </div>
308
+ <div class="my-3">
309
+ <div class="grid grid-cols-12 text-xs font-semibold text-gray-500 mb-1">
310
+ <div class="col-span-6">ITEM</div>
311
+ <div class="col-span-2 text-right">PRICE</div>
312
+ <div class="col-span-2 text-right">QTY</div>
313
+ <div class="col-span-2 text-right">TOTAL</div>
314
+ </div>
315
+ <div id="receipt-items" class="space-y-1">
316
+ <!-- Receipt items will be inserted here -->
317
+ </div>
318
+ </div>
319
+ <div class="border-t border-gray-200 pt-2 space-y-1">
320
+ <div class="flex justify-between text-sm">
321
+ <span class="text-gray-600">Subtotal:</span>
322
+ <span id="receipt-subtotal">$0.00</span>
323
+ </div>
324
+ <div class="flex justify-between text-sm">
325
+ <span class="text-gray-600">Tax (8%):</span>
326
+ <span id="receipt-tax">$0.00</span>
327
+ </div>
328
+ <div class="flex justify-between font-semibold">
329
+ <span>TOTAL:</span>
330
+ <span id="receipt-total">$0.00</span>
331
+ </div>
332
+ </div>
333
+ <div class="mt-4 text-center text-xs text-gray-500">
334
+ <p>Thank you for shopping with us!</p>
335
+ <p>Returns accepted within 14 days with receipt</p>
336
+ </div>
337
+ </div>
338
+ <div class="mt-4 flex justify-center space-x-4">
339
+ <button id="print-receipt" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
340
+ <i class="fas fa-print mr-2"></i>Print Receipt
341
+ </button>
342
+ <button id="email-receipt" class="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition">
343
+ <i class="fas fa-envelope mr-2"></i>Email Receipt
344
+ </button>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+
350
+ <script>
351
+ // Sample product data
352
+ const products = [
353
+ { id: 1, name: "Men's Classic T-Shirt", price: 24.99, category: "men", image: "https://via.placeholder.com/150/FF5733/FFFFFF?text=T-Shirt", stock: 15 },
354
+ { id: 2, name: "Women's Summer Dress", price: 39.99, category: "women", image: "https://via.placeholder.com/150/C70039/FFFFFF?text=Dress", stock: 8 },
355
+ { id: 3, name: "Kids' Jeans", price: 19.99, category: "kids", image: "https://via.placeholder.com/150/900C3F/FFFFFF?text=Jeans", stock: 12 },
356
+ { id: 4, name: "Men's Formal Shirt", price: 34.99, category: "men", image: "https://via.placeholder.com/150/581845/FFFFFF?text=Shirt", stock: 5 },
357
+ { id: 5, name: "Women's Blazer", price: 59.99, category: "women", image: "https://via.placeholder.com/150/FFC300/FFFFFF?text=Blazer", stock: 7 },
358
+ { id: 6, name: "Unisex Hoodie", price: 45.99, category: "men", image: "https://via.placeholder.com/150/DAF7A6/000000?text=Hoodie", stock: 10 },
359
+ { id: 7, name: "Women's Scarf", price: 14.99, category: "accessories", image: "https://via.placeholder.com/150/FF5733/FFFFFF?text=Scarf", stock: 20 },
360
+ { id: 8, name: "Men's Belt", price: 22.99, category: "accessories", image: "https://via.placeholder.com/150/C70039/FFFFFF?text=Belt", stock: 3 },
361
+ { id: 9, name: "Kids' Jacket", price: 29.99, category: "kids", image: "https://via.placeholder.com/150/900C3F/FFFFFF?text=Jacket", stock: 6 },
362
+ { id: 10, name: "Women's Jeans", price: 49.99, category: "women", image: "https://via.placeholder.com/150/581845/FFFFFF?text=Jeans", stock: 9 },
363
+ ];
364
+
365
+ // Cart data
366
+ let cart = [];
367
+
368
+ // DOM elements
369
+ const productsGrid = document.querySelector('.grid');
370
+ const cartItemsTable = document.getElementById('cart-items');
371
+ const emptyCartRow = document.getElementById('empty-cart');
372
+ const subtotalEl = document.getElementById('subtotal');
373
+ const taxEl = document.getElementById('tax');
374
+ const totalEl = document.getElementById('total');
375
+ const checkoutBtn = document.getElementById('checkout-btn');
376
+ const receiptModal = document.getElementById('receipt-modal');
377
+ const closeReceiptBtn = document.getElementById('close-receipt');
378
+ const printReceiptBtn = document.getElementById('print-receipt');
379
+ const receiptItemsEl = document.getElementById('receipt-items');
380
+ const receiptSubtotalEl = document.getElementById('receipt-subtotal');
381
+ const receiptTaxEl = document.getElementById('receipt-tax');
382
+ const receiptTotalEl = document.getElementById('receipt-total');
383
+ const receiptDateEl = document.getElementById('receipt-date');
384
+ const menuToggle = document.getElementById('menu-toggle');
385
+ const sidebar = document.querySelector('.sidebar');
386
+ const categoryButtons = document.querySelectorAll('.category-btn');
387
+
388
+ // Initialize the app
389
+ document.addEventListener('DOMContentLoaded', function() {
390
+ // Set current date
391
+ const now = new Date();
392
+ document.getElementById('current-date').textContent = now.toLocaleDateString('en-US', {
393
+ weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
394
+ });
395
+ receiptDateEl.textContent = now.toLocaleDateString() + ' ' + now.toLocaleTimeString();
396
+
397
+ // Render products
398
+ renderProducts(products);
399
+
400
+ // Event listeners
401
+ menuToggle.addEventListener('click', toggleSidebar);
402
+ checkoutBtn.addEventListener('click', showReceipt);
403
+ closeReceiptBtn.addEventListener('click', () => receiptModal.classList.add('hidden'));
404
+ printReceiptBtn.addEventListener('click', printReceipt);
405
+
406
+ categoryButtons.forEach(button => {
407
+ button.addEventListener('click', function() {
408
+ const category = this.dataset.category;
409
+ filterProducts(category);
410
+
411
+ // Update active state
412
+ categoryButtons.forEach(btn => btn.classList.remove('bg-indigo-100', 'text-indigo-800'));
413
+ if (category !== 'all') {
414
+ this.classList.add('bg-indigo-100', 'text-indigo-800');
415
+ }
416
+ });
417
+ });
418
+ });
419
+
420
+ // Toggle sidebar on mobile
421
+ function toggleSidebar() {
422
+ sidebar.classList.toggle('active');
423
+ }
424
+
425
+ // Render products to the grid
426
+ function renderProducts(productsToRender) {
427
+ productsGrid.innerHTML = '';
428
+
429
+ productsToRender.forEach(product => {
430
+ const productCard = document.createElement('div');
431
+ productCard.className = 'product-card bg-white rounded-lg shadow overflow-hidden cursor-pointer';
432
+ productCard.innerHTML = `
433
+ <div class="relative">
434
+ <img src="${product.image}" alt="${product.name}" class="w-full h-40 object-cover">
435
+ ${product.stock < 5 ? `<span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">Low Stock</span>` : ''}
436
+ </div>
437
+ <div class="p-3">
438
+ <h3 class="font-semibold text-gray-800 truncate">${product.name}</h3>
439
+ <div class="flex justify-between items-center mt-2">
440
+ <span class="text-indigo-600 font-bold">Q${product.price.toFixed(2)}</span>
441
+ <span class="text-xs text-gray-500">Stock: ${product.stock}</span>
442
+ </div>
443
+ <button class="add-to-cart w-full mt-3 bg-indigo-600 text-white py-1 rounded hover:bg-indigo-700 transition"
444
+ data-id="${product.id}" data-name="${product.name}" data-price="${product.price}">
445
+ <i class="fas fa-cart-plus mr-2"></i>Add to Cart
446
+ </button>
447
+ </div>
448
+ `;
449
+ productsGrid.appendChild(productCard);
450
+ });
451
+
452
+ // Add event listeners to all "Add to Cart" buttons
453
+ document.querySelectorAll('.add-to-cart').forEach(button => {
454
+ button.addEventListener('click', function() {
455
+ const productId = parseInt(this.dataset.id);
456
+ const productName = this.dataset.name;
457
+ const productPrice = parseFloat(this.dataset.price);
458
+
459
+ addToCart(productId, productName, productPrice);
460
+ });
461
+ });
462
+ }
463
+
464
+ // Filter products by category
465
+ function filterProducts(category) {
466
+ if (category === 'all') {
467
+ renderProducts(products);
468
+ } else {
469
+ const filteredProducts = products.filter(product => product.category === category);
470
+ renderProducts(filteredProducts);
471
+ }
472
+ }
473
+
474
+ // Add product to cart
475
+ function addToCart(id, name, price) {
476
+ // Check if product already exists in cart
477
+ const existingItem = cart.find(item => item.id === id);
478
+
479
+ if (existingItem) {
480
+ existingItem.quantity += 1;
481
+ } else {
482
+ cart.push({
483
+ id,
484
+ name,
485
+ price,
486
+ quantity: 1
487
+ });
488
+ }
489
+
490
+ updateCart();
491
+ }
492
+
493
+ // Update cart display
494
+ function updateCart() {
495
+ // Clear current cart display
496
+ cartItemsTable.innerHTML = '';
497
+
498
+ if (cart.length === 0) {
499
+ cartItemsTable.appendChild(emptyCartRow);
500
+ } else {
501
+ emptyCartRow.remove();
502
+
503
+ let subtotal = 0;
504
+
505
+ cart.forEach(item => {
506
+ const row = document.createElement('tr');
507
+ const itemTotal = item.price * item.quantity;
508
+ subtotal += itemTotal;
509
+
510
+ row.innerHTML = `
511
+ <td class="px-6 py-4 whitespace-nowrap">${item.name}</td>
512
+ <td class="px-6 py-4 whitespace-nowrap">Q${item.price.toFixed(2)}</td>
513
+ <td class="px-6 py-4 whitespace-nowrap">
514
+ <div class="flex items-center">
515
+ <button class="decrease-qty text-gray-500 hover:text-indigo-600" data-id="${item.id}">
516
+ <i class="fas fa-minus"></i>
517
+ </button>
518
+ <input type="number" min="1" value="${item.quantity}"
519
+ class="quantity-input w-12 text-center border rounded mx-2 py-1" data-id="${item.id}">
520
+ <button class="increase-qty text-gray-500 hover:text-indigo-600" data-id="${item.id}">
521
+ <i class="fas fa-plus"></i>
522
+ </button>
523
+ </div>
524
+ </td>
525
+ <td class="px-6 py-4 whitespace-nowrap">Q${itemTotal.toFixed(2)}</td>
526
+ <td class="px-6 py-4 whitespace-nowrap">
527
+ <button class="remove-item text-red-500 hover:text-red-700" data-id="${item.id}">
528
+ <i class="fas fa-trash"></i>
529
+ </button>
530
+ </td>
531
+ `;
532
+ cartItemsTable.appendChild(row);
533
+ });
534
+
535
+ // Calculate tax and total
536
+ const tax = subtotal * 0.08;
537
+ const total = subtotal + tax;
538
+
539
+ // Update totals display
540
+ subtotalEl.textContent = `Q${subtotal.toFixed(2)}`;
541
+ taxEl.textContent = `Q${tax.toFixed(2)}`;
542
+ totalEl.textContent = `Q${total.toFixed(2)}`;
543
+
544
+ // Add event listeners to quantity controls
545
+ document.querySelectorAll('.decrease-qty').forEach(button => {
546
+ button.addEventListener('click', function() {
547
+ const id = parseInt(this.dataset.id);
548
+ updateQuantity(id, -1);
549
+ });
550
+ });
551
+
552
+ document.querySelectorAll('.increase-qty').forEach(button => {
553
+ button.addEventListener('click', function() {
554
+ const id = parseInt(this.dataset.id);
555
+ updateQuantity(id, 1);
556
+ });
557
+ });
558
+
559
+ document.querySelectorAll('.quantity-input').forEach(input => {
560
+ input.addEventListener('change', function() {
561
+ const id = parseInt(this.dataset.id);
562
+ const newQuantity = parseInt(this.value);
563
+
564
+ if (newQuantity > 0) {
565
+ const item = cart.find(item => item.id === id);
566
+ if (item) {
567
+ item.quantity = newQuantity;
568
+ updateCart();
569
+ }
570
+ } else {
571
+ this.value = 1;
572
+ }
573
+ });
574
+ });
575
+
576
+ document.querySelectorAll('.remove-item').forEach(button => {
577
+ button.addEventListener('click', function() {
578
+ const id = parseInt(this.dataset.id);
579
+ removeFromCart(id);
580
+ });
581
+ });
582
+ }
583
+ }
584
+
585
+ // Update item quantity
586
+ function updateQuantity(id, change) {
587
+ const item = cart.find(item => item.id === id);
588
+ if (item) {
589
+ const newQuantity = item.quantity + change;
590
+ if (newQuantity > 0) {
591
+ item.quantity = newQuantity;
592
+ updateCart();
593
+ } else {
594
+ removeFromCart(id);
595
+ }
596
+ }
597
+ }
598
+
599
+ // Remove item from cart
600
+ function removeFromCart(id) {
601
+ cart = cart.filter(item => item.id !== id);
602
+ updateCart();
603
+ }
604
+
605
+ // Show receipt modal
606
+ function showReceipt() {
607
+ if (cart.length === 0) {
608
+ alert('Please add items to cart first!');
609
+ return;
610
+ }
611
+
612
+ // Update receipt items
613
+ receiptItemsEl.innerHTML = '';
614
+
615
+ let subtotal = 0;
616
+ cart.forEach(item => {
617
+ const itemTotal = item.price * item.quantity;
618
+ subtotal += itemTotal;
619
+
620
+ const itemEl = document.createElement('div');
621
+ itemEl.className = 'grid grid-cols-12 text-sm';
622
+ itemEl.innerHTML = `
623
+ <div class="col-span-6 truncate">${item.name}</div>
624
+ <div class="col-span-2 text-right">Q${item.price.toFixed(2)}</div>
625
+ <div class="col-span-2 text-right">${item.quantity}</div>
626
+ <div class="col-span-2 text-right">Q${itemTotal.toFixed(2)}</div>
627
+ `;
628
+ receiptItemsEl.appendChild(itemEl);
629
+ });
630
+
631
+ // Calculate tax and total
632
+ const tax = subtotal * 0.08;
633
+ const total = subtotal + tax;
634
+
635
+ // Update receipt totals
636
+ receiptSubtotalEl.textContent = `Q${subtotal.toFixed(2)}`;
637
+ receiptTaxEl.textContent = `Q${tax.toFixed(2)}`;
638
+ receiptTotalEl.textContent = `Q${total.toFixed(2)}`;
639
+
640
+ // Set current date/time on receipt
641
+ const now = new Date();
642
+ receiptDateEl.textContent = now.toLocaleDateString() + ' ' + now.toLocaleTimeString();
643
+
644
+ // Show modal
645
+ receiptModal.classList.remove('hidden');
646
+ setTimeout(() => {
647
+ document.querySelector('.receipt-print').classList.add('active');
648
+ }, 50);
649
+ }
650
+
651
+ // Print receipt
652
+ function printReceipt() {
653
+ const receiptContent = document.querySelector('.receipt-print').innerHTML;
654
+ const originalContent = document.body.innerHTML;
655
+
656
+ document.body.innerHTML = `
657
+ <style>
658
+ body { font-family: Arial, sans-serif; font-size: 12px; }
659
+ .grid div { padding: 2px 0; }
660
+ </style>
661
+ ${receiptContent}
662
+ `;
663
+
664
+ window.print();
665
+ document.body.innerHTML = originalContent;
666
+
667
+ // After printing, clear the cart
668
+ cart = [];
669
+ updateCart();
670
+ }
671
+ </script>
672
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=juanutuy/dist-lucy-pos" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
673
+ </html>