Hugging Face's logo

Spaces:
mohddh
/
ddd
Running

App Files Community
mohddh commited on
Commit
6cccd26
·
verified ·
1 Parent(s): 8da10da

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +487 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ddd
3
- emoji: 💻
4
- colorFrom: pink
5
- colorTo: pink
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: ddd
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: purple
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,487 @@
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>POS Desktop App</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
+ /* Custom scrollbar */
11
+ ::-webkit-scrollbar {
12
+ width: 8px;
13
+ height: 8px;
14
+ }
15
+ ::-webkit-scrollbar-track {
16
+ background: #f1f1f1;
17
+ }
18
+ ::-webkit-scrollbar-thumb {
19
+ background: #888;
20
+ border-radius: 4px;
21
+ }
22
+ ::-webkit-scrollbar-thumb:hover {
23
+ background: #555;
24
+ }
25
+
26
+ /* Custom window effect */
27
+ .window {
28
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
29
+ border-radius: 8px;
30
+ overflow: hidden;
31
+ }
32
+
33
+ .title-bar {
34
+ -webkit-user-select: none;
35
+ user-select: none;
36
+ }
37
+
38
+ /* Animation for buttons */
39
+ .btn-animate {
40
+ transition: all 0.2s ease;
41
+ }
42
+ .btn-animate:hover {
43
+ transform: translateY(-2px);
44
+ }
45
+ .btn-animate:active {
46
+ transform: translateY(0);
47
+ }
48
+
49
+ /* Custom input focus */
50
+ .input-focus:focus {
51
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="bg-gray-200 min-h-screen flex items-center justify-center p-4">
56
+ <div class="window w-full max-w-6xl h-[90vh] flex flex-col bg-white">
57
+ <!-- Title Bar -->
58
+ <div class="title-bar bg-gray-800 text-white px-4 py-2 flex items-center justify-between">
59
+ <div class="flex items-center space-x-2">
60
+ <i class="fas fa-cash-register text-blue-400"></i>
61
+ <span class="font-semibold">POS Pro Desktop</span>
62
+ </div>
63
+ <div class="flex items-center space-x-3">
64
+ <button class="text-gray-300 hover:text-white">
65
+ <i class="fas fa-window-minimize"></i>
66
+ </button>
67
+ <button class="text-gray-300 hover:text-white">
68
+ <i class="fas fa-window-maximize"></i>
69
+ </button>
70
+ <button class="text-gray-300 hover:text-red-400">
71
+ <i class="fas fa-times"></i>
72
+ </button>
73
+ </div>
74
+ </div>
75
+
76
+ <!-- Menu Bar -->
77
+ <div class="bg-gray-700 text-white px-4 py-1 flex items-center space-x-6 text-sm">
78
+ <div class="relative group">
79
+ <button class="hover:bg-gray-600 px-2 py-1 rounded">File</button>
80
+ <div class="hidden group-hover:block absolute bg-white text-gray-800 shadow-lg rounded z-10 w-48">
81
+ <a href="#" class="block px-4 py-2 hover:bg-blue-100">New Transaction</a>
82
+ <a href="#" class="block px-4 py-2 hover:bg-blue-100">Open</a>
83
+ <a href="#" class="block px-4 py-2 hover:bg-blue-100">Save</a>
84
+ <div class="border-t"></div>
85
+ <a href="#" class="block px-4 py-2 hover:bg-blue-100">Print Receipt</a>
86
+ <div class="border-t"></div>
87
+ <a href="#" class="block px-4 py-2 hover:bg-blue-100">Exit</a>
88
+ </div>
89
+ </div>
90
+ <div class="relative group">
91
+ <button class="hover:bg-gray-600 px-2 py-1 rounded">Edit</button>
92
+ <div class="hidden group-hover:block absolute bg-white text-gray-800 shadow-lg rounded z-10 w-48">
93
+ <a href="#" class="block px-4 py-2 hover:bg-blue-100">Undo</a>
94
+ <a href="#" class="block px-4 py-2 hover:bg-blue-100">Redo</a>
95
+ <div class="border-t"></div>
96
+ <a href="#" class="block px-4 py-2 hover:bg-blue-100">Cut</a>
97
+ <a href="#" class="block px-4 py-2 hover:bg-blue-100">Copy</a>
98
+ <a href="#" class="block px-4 py-2 hover:bg-blue-100">Paste</a>
99
+ </div>
100
+ </div>
101
+ <div class="relative group">
102
+ <button class="hover:bg-gray-600 px-2 py-1 rounded">View</button>
103
+ <div class="hidden group-hover:block absolute bg-white text-gray-800 shadow-lg rounded z-10 w-48">
104
+ <a href="#" class="block px-4 py-2 hover:bg-blue-100">Full Screen</a>
105
+ <a href="#" class="block px-4 py-2 hover:bg-blue-100">Zoom In</a>
106
+ <a href="#" class="block px-4 py-2 hover:bg-blue-100">Zoom Out</a>
107
+ </div>
108
+ </div>
109
+ <div class="relative group">
110
+ <button class="hover:bg-gray-600 px-2 py-1 rounded">Reports</button>
111
+ <div class="hidden group-hover:block absolute bg-white text-gray-800 shadow-lg rounded z-10 w-48">
112
+ <a href="#" class="block px-4 py-2 hover:bg-blue-100">Daily Sales</a>
113
+ <a href="#" class="block px-4 py-2 hover:bg-blue-100">Inventory</a>
114
+ <a href="#" class="block px-4 py-2 hover:bg-blue-100">Customer</a>
115
+ </div>
116
+ </div>
117
+ <div class="relative group">
118
+ <button class="hover:bg-gray-600 px-2 py-1 rounded">Help</button>
119
+ <div class="hidden group-hover:block absolute bg-white text-gray-800 shadow-lg rounded z-10 w-48">
120
+ <a href="#" class="block px-4 py-2 hover:bg-blue-100">Documentation</a>
121
+ <a href="#" class="block px-4 py-2 hover:bg-blue-100">About</a>
122
+ </div>
123
+ </div>
124
+ </div>
125
+
126
+ <!-- Toolbar -->
127
+ <div class="bg-gray-100 border-b px-4 py-2 flex items-center space-x-4">
128
+ <button class="bg-blue-600 text-white px-3 py-1 rounded btn-animate flex items-center space-x-1">
129
+ <i class="fas fa-plus"></i>
130
+ <span>New Sale</span>
131
+ </button>
132
+ <button class="bg-green-600 text-white px-3 py-1 rounded btn-animate flex items-center space-x-1">
133
+ <i class="fas fa-save"></i>
134
+ <span>Save</span>
135
+ </button>
136
+ <button class="bg-yellow-500 text-white px-3 py-1 rounded btn-animate flex items-center space-x-1">
137
+ <i class="fas fa-print"></i>
138
+ <span>Print</span>
139
+ </button>
140
+ <button class="bg-red-500 text-white px-3 py-1 rounded btn-animate flex items-center space-x-1">
141
+ <i class="fas fa-trash"></i>
142
+ <span>Cancel</span>
143
+ </button>
144
+ <div class="border-l h-6 mx-2"></div>
145
+ <button class="bg-purple-600 text-white px-3 py-1 rounded btn-animate flex items-center space-x-1">
146
+ <i class="fas fa-chart-line"></i>
147
+ <span>Reports</span>
148
+ </button>
149
+ <button class="bg-indigo-600 text-white px-3 py-1 rounded btn-animate flex items-center space-x-1">
150
+ <i class="fas fa-cog"></i>
151
+ <span>Settings</span>
152
+ </button>
153
+ </div>
154
+
155
+ <!-- Main Content -->
156
+ <div class="flex flex-1 overflow-hidden">
157
+ <!-- Left Sidebar - Products -->
158
+ <div class="w-1/3 border-r bg-gray-50 flex flex-col">
159
+ <div class="p-3 border-b">
160
+ <div class="relative">
161
+ <input type="text" placeholder="Search products..."
162
+ class="w-full px-4 py-2 border rounded-full input-focus pl-10">
163
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
164
+ </div>
165
+ </div>
166
+
167
+ <div class="flex-1 overflow-y-auto p-2">
168
+ <div class="grid grid-cols-2 gap-2">
169
+ <!-- Product Items -->
170
+ <div class="bg-white border rounded p-2 cursor-pointer hover:bg-blue-50 transition-colors">
171
+ <div class="h-24 bg-gray-200 rounded mb-2 flex items-center justify-center">
172
+ <i class="fas fa-wine-bottle text-3xl text-blue-500"></i>
173
+ </div>
174
+ <div class="font-semibold text-sm">Mineral Water</div>
175
+ <div class="text-xs text-gray-500">500ml</div>
176
+ <div class="font-bold text-blue-600 mt-1">$1.50</div>
177
+ </div>
178
+
179
+ <div class="bg-white border rounded p-2 cursor-pointer hover:bg-blue-50 transition-colors">
180
+ <div class="h-24 bg-gray-200 rounded mb-2 flex items-center justify-center">
181
+ <i class="fas fa-coffee text-3xl text-brown-500"></i>
182
+ </div>
183
+ <div class="font-semibold text-sm">Coffee</div>
184
+ <div class="text-xs text-gray-500">Regular</div>
185
+ <div class="font-bold text-blue-600 mt-1">$2.50</div>
186
+ </div>
187
+
188
+ <div class="bg-white border rounded p-2 cursor-pointer hover:bg-blue-50 transition-colors">
189
+ <div class="h-24 bg-gray-200 rounded mb-2 flex items-center justify-center">
190
+ <i class="fas fa-hamburger text-3xl text-yellow-500"></i>
191
+ </div>
192
+ <div class="font-semibold text-sm">Burger</div>
193
+ <div class="text-xs text-gray-500">Cheese</div>
194
+ <div class="font-bold text-blue-600 mt-1">$5.99</div>
195
+ </div>
196
+
197
+ <div class="bg-white border rounded p-2 cursor-pointer hover:bg-blue-50 transition-colors">
198
+ <div class="h-24 bg-gray-200 rounded mb-2 flex items-center justify-center">
199
+ <i class="fas fa-pizza-slice text-3xl text-red-500"></i>
200
+ </div>
201
+ <div class="font-semibold text-sm">Pizza</div>
202
+ <div class="text-xs text-gray-500">Large</div>
203
+ <div class="font-bold text-blue-600 mt-1">$12.99</div>
204
+ </div>
205
+
206
+ <div class="bg-white border rounded p-2 cursor-pointer hover:bg-blue-50 transition-colors">
207
+ <div class="h-24 bg-gray-200 rounded mb-2 flex items-center justify-center">
208
+ <i class="fas fa-ice-cream text-3xl text-pink-500"></i>
209
+ </div>
210
+ <div class="font-semibold text-sm">Ice Cream</div>
211
+ <div class="text-xs text-gray-500">Vanilla</div>
212
+ <div class="font-bold text-blue-600 mt-1">$3.50</div>
213
+ </div>
214
+
215
+ <div class="bg-white border rounded p-2 cursor-pointer hover:bg-blue-50 transition-colors">
216
+ <div class="h-24 bg-gray-200 rounded mb-2 flex items-center justify-center">
217
+ <i class="fas fa-beer text-3xl text-amber-500"></i>
218
+ </div>
219
+ <div class="font-semibold text-sm">Beer</div>
220
+ <div class="text-xs text-gray-500">500ml</div>
221
+ <div class="font-bold text-blue-600 mt-1">$4.50</div>
222
+ </div>
223
+
224
+ <div class="bg-white border rounded p-2 cursor-pointer hover:bg-blue-50 transition-colors">
225
+ <div class="h-24 bg-gray-200 rounded mb-2 flex items-center justify-center">
226
+ <i class="fas fa-wine-glass-alt text-3xl text-purple-500"></i>
227
+ </div>
228
+ <div class="font-semibold text-sm">Wine</div>
229
+ <div class="text-xs text-gray-500">Red</div>
230
+ <div class="font-bold text-blue-600 mt-1">$8.99</div>
231
+ </div>
232
+
233
+ <div class="bg-white border rounded p-2 cursor-pointer hover:bg-blue-50 transition-colors">
234
+ <div class="h-24 bg-gray-200 rounded mb-2 flex items-center justify-center">
235
+ <i class="fas fa-cookie text-3xl text-brown-500"></i>
236
+ </div>
237
+ <div class="font-semibold text-sm">Cookie</div>
238
+ <div class="text-xs text-gray-500">Chocolate</div>
239
+ <div class="font-bold text-blue-600 mt-1">$1.99</div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <div class="p-3 border-t bg-gray-100">
245
+ <div class="flex justify-between items-center">
246
+ <div>
247
+ <div class="text-xs text-gray-500">Total Items</div>
248
+ <div class="font-bold">8</div>
249
+ </div>
250
+ <button class="bg-blue-600 text-white px-4 py-2 rounded btn-animate">
251
+ <i class="fas fa-sync-alt mr-1"></i> Refresh
252
+ </button>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Right Content - Cart & Payment -->
258
+ <div class="flex-1 flex flex-col">
259
+ <!-- Current Transaction -->
260
+ <div class="border-b p-3">
261
+ <div class="flex justify-between items-center">
262
+ <div>
263
+ <span class="font-semibold">Transaction #</span>
264
+ <span class="text-blue-600 ml-2">ORD-2023-00142</span>
265
+ </div>
266
+ <div class="flex items-center space-x-2">
267
+ <div class="text-sm">
268
+ <span class="text-gray-500">Date:</span>
269
+ <span class="ml-1">2023-07-15</span>
270
+ </div>
271
+ <div class="text-sm">
272
+ <span class="text-gray-500">Time:</span>
273
+ <span class="ml-1">14:30</span>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Cart Items -->
280
+ <div class="flex-1 overflow-y-auto p-3">
281
+ <table class="w-full">
282
+ <thead>
283
+ <tr class="border-b text-left text-gray-600">
284
+ <th class="pb-2">Item</th>
285
+ <th class="pb-2 text-right">Price</th>
286
+ <th class="pb-2 text-right">Qty</th>
287
+ <th class="pb-2 text-right">Total</th>
288
+ <th class="pb-2"></th>
289
+ </tr>
290
+ </thead>
291
+ <tbody>
292
+ <tr class="border-b">
293
+ <td class="py-2">
294
+ <div class="font-semibold">Burger</div>
295
+ <div class="text-xs text-gray-500">Cheese</div>
296
+ </td>
297
+ <td class="text-right">$5.99</td>
298
+ <td class="text-right">
299
+ <div class="flex items-center justify-end">
300
+ <button class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center">
301
+ <i class="fas fa-minus text-xs"></i>
302
+ </button>
303
+ <span class="mx-2">1</span>
304
+ <button class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center">
305
+ <i class="fas fa-plus text-xs"></i>
306
+ </button>
307
+ </div>
308
+ </td>
309
+ <td class="text-right font-semibold">$5.99</td>
310
+ <td class="text-right">
311
+ <button class="text-red-500 hover:text-red-700">
312
+ <i class="fas fa-trash-alt"></i>
313
+ </button>
314
+ </td>
315
+ </tr>
316
+ <tr class="border-b">
317
+ <td class="py-2">
318
+ <div class="font-semibold">Coffee</div>
319
+ <div class="text-xs text-gray-500">Regular</div>
320
+ </td>
321
+ <td class="text-right">$2.50</td>
322
+ <td class="text-right">
323
+ <div class="flex items-center justify-end">
324
+ <button class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center">
325
+ <i class="fas fa-minus text-xs"></i>
326
+ </button>
327
+ <span class="mx-2">2</span>
328
+ <button class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center">
329
+ <i class="fas fa-plus text-xs"></i>
330
+ </button>
331
+ </div>
332
+ </td>
333
+ <td class="text-right font-semibold">$5.00</td>
334
+ <td class="text-right">
335
+ <button class="text-red-500 hover:text-red-700">
336
+ <i class="fas fa-trash-alt"></i>
337
+ </button>
338
+ </td>
339
+ </tr>
340
+ <tr class="border-b">
341
+ <td class="py-2">
342
+ <div class="font-semibold">Mineral Water</div>
343
+ <div class="text-xs text-gray-500">500ml</div>
344
+ </td>
345
+ <td class="text-right">$1.50</td>
346
+ <td class="text-right">
347
+ <div class="flex items-center justify-end">
348
+ <button class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center">
349
+ <i class="fas fa-minus text-xs"></i>
350
+ </button>
351
+ <span class="mx-2">1</span>
352
+ <button class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center">
353
+ <i class="fas fa-plus text-xs"></i>
354
+ </button>
355
+ </div>
356
+ </td>
357
+ <td class="text-right font-semibold">$1.50</td>
358
+ <td class="text-right">
359
+ <button class="text-red-500 hover:text-red-700">
360
+ <i class="fas fa-trash-alt"></i>
361
+ </button>
362
+ </td>
363
+ </tr>
364
+ </tbody>
365
+ </table>
366
+ </div>
367
+
368
+ <!-- Totals & Payment -->
369
+ <div class="border-t p-3 bg-gray-50">
370
+ <div class="grid grid-cols-2 gap-4">
371
+ <div>
372
+ <div class="mb-3">
373
+ <label class="block text-sm font-medium text-gray-700 mb-1">Customer</label>
374
+ <select class="w-full border rounded px-3 py-2 input-focus">
375
+ <option>Walk-in Customer</option>
376
+ <option>John Doe (VIP)</option>
377
+ <option>Jane Smith</option>
378
+ </select>
379
+ </div>
380
+ <div>
381
+ <label class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
382
+ <textarea class="w-full border rounded px-3 py-2 h-20 input-focus" placeholder="Special instructions..."></textarea>
383
+ </div>
384
+ </div>
385
+
386
+ <div>
387
+ <div class="bg-white border rounded p-3">
388
+ <div class="flex justify-between mb-2">
389
+ <span>Subtotal:</span>
390
+ <span>$12.49</span>
391
+ </div>
392
+ <div class="flex justify-between mb-2">
393
+ <span>Tax (10%):</span>
394
+ <span>$1.25</span>
395
+ </div>
396
+ <div class="flex justify-between mb-2">
397
+ <span>Discount:</span>
398
+ <span>$0.00</span>
399
+ </div>
400
+ <div class="border-t pt-2 mb-2">
401
+ <div class="flex justify-between font-bold text-lg">
402
+ <span>Total:</span>
403
+ <span>$13.74</span>
404
+ </div>
405
+ </div>
406
+
407
+ <div class="mt-4 grid grid-cols-3 gap-2">
408
+ <button class="bg-blue-600 text-white py-2 rounded btn-animate">
409
+ <i class="fas fa-money-bill-wave"></i> Cash
410
+ </button>
411
+ <button class="bg-green-600 text-white py-2 rounded btn-animate">
412
+ <i class="fas fa-credit-card"></i> Card
413
+ </button>
414
+ <button class="bg-purple-600 text-white py-2 rounded btn-animate">
415
+ <i class="fas fa-mobile-alt"></i> Mobile
416
+ </button>
417
+ </div>
418
+
419
+ <div class="mt-3">
420
+ <button class="w-full bg-green-600 text-white py-3 rounded-lg font-bold btn-animate">
421
+ <i class="fas fa-check-circle mr-1"></i> Complete Sale
422
+ </button>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </div>
430
+
431
+ <!-- Status Bar -->
432
+ <div class="bg-gray-800 text-white text-sm px-4 py-1 flex justify-between">
433
+ <div>
434
+ <span class="text-gray-400">User:</span>
435
+ <span class="ml-1">Admin</span>
436
+ </div>
437
+ <div>
438
+ <span class="text-gray-400">Shift:</span>
439
+ <span class="ml-1">Morning (08:00 - 16:00)</span>
440
+ </div>
441
+ <div>
442
+ <span class="text-gray-400">Sales Today:</span>
443
+ <span class="ml-1">$1,245.75</span>
444
+ </div>
445
+ <div>
446
+ <i class="fas fa-circle text-green-400 mr-1"></i>
447
+ <span>Connected</span>
448
+ </div>
449
+ </div>
450
+ </div>
451
+
452
+ <script>
453
+ // Simple script to handle product selection
454
+ document.querySelectorAll('.grid.grid-cols-2 > div').forEach(product => {
455
+ product.addEventListener('click', function() {
456
+ // In a real app, this would add the product to the cart
457
+ console.log('Product selected:', this.querySelector('div.font-semibold').textContent);
458
+
459
+ // Visual feedback
460
+ this.classList.add('bg-blue-100');
461
+ setTimeout(() => {
462
+ this.classList.remove('bg-blue-100');
463
+ }, 200);
464
+ });
465
+ });
466
+
467
+ // Handle payment method buttons
468
+ document.querySelectorAll('.grid.grid-cols-3 > button').forEach(btn => {
469
+ btn.addEventListener('click', function() {
470
+ // In a real app, this would set the payment method
471
+ console.log('Payment method:', this.textContent.trim());
472
+
473
+ // Visual feedback
474
+ this.classList.add('ring-2', 'ring-offset-2');
475
+ setTimeout(() => {
476
+ this.classList.remove('ring-2', 'ring-offset-2');
477
+ }, 300);
478
+ });
479
+ });
480
+
481
+ // Complete sale button
482
+ document.querySelector('.bg-green-600.py-3').addEventListener('click', function() {
483
+ alert('Sale completed! Receipt printed.');
484
+ });
485
+ </script>
486
+ <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=mohddh/ddd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
487
+ </html>