Hugging Face's logo

Spaces:
castro777
/
deash-session
Running

App Files Community
castro777 commited on
Commit
e3f57b5
·
verified ·
1 Parent(s): 5f4f465

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1416 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deash Session
3
- emoji: 😻
4
- colorFrom: gray
5
- colorTo: red
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: deash-session
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,1416 @@
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="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Poker Dashboard</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/lucide@latest/dist/umd/lucide.min.js"></script>
8
+ <style>
9
+ :root {
10
+ --bg-primary: #1E1E1E;
11
+ --bg-secondary: #2D2D2D;
12
+ --bg-card: #1E1E1E;
13
+ --border: #333333;
14
+ --border-hover: #555555;
15
+ --text: #FFFFFF;
16
+ --text-secondary: #A1A1A1;
17
+ --primary: #3B82F6;
18
+ --primary-hover: #2563EB;
19
+ --success: #10B981;
20
+ --success-hover: #059669;
21
+ --danger: #EF4444;
22
+ --danger-hover: #DC2626;
23
+ --warning: #F59E0B;
24
+ --warning-hover: #D97706;
25
+ }
26
+
27
+ * {
28
+ margin: 0;
29
+ padding: 0;
30
+ box-sizing: border-box;
31
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
32
+ }
33
+
34
+ body {
35
+ background-color: var(--bg-primary);
36
+ color: var(--text);
37
+ line-height: 1.5;
38
+ }
39
+
40
+ .container {
41
+ max-width: 1200px;
42
+ margin: 0 auto;
43
+ padding: 1rem;
44
+ }
45
+
46
+ /* Typography */
47
+ h1, h2, h3, h4, h5, h6 {
48
+ font-weight: 600;
49
+ margin-bottom: 0.5rem;
50
+ }
51
+
52
+ h1 {
53
+ font-size: 2rem;
54
+ }
55
+
56
+ h2 {
57
+ font-size: 1.75rem;
58
+ }
59
+
60
+ h3 {
61
+ font-size: 1.5rem;
62
+ }
63
+
64
+ p, span {
65
+ color: var(--text-secondary);
66
+ }
67
+
68
+ /* Layout */
69
+ .flex {
70
+ display: flex;
71
+ }
72
+
73
+ .flex-col {
74
+ flex-direction: column;
75
+ }
76
+
77
+ .flex-row {
78
+ flex-direction: row;
79
+ }
80
+
81
+ .items-center {
82
+ align-items: center;
83
+ }
84
+
85
+ .items-start {
86
+ align-items: flex-start;
87
+ }
88
+
89
+ .justify-between {
90
+ justify-content: space-between;
91
+ }
92
+
93
+ .justify-center {
94
+ justify-content: center;
95
+ }
96
+
97
+ .gap-1 {
98
+ gap: 0.25rem;
99
+ }
100
+
101
+ .gap-2 {
102
+ gap: 0.5rem;
103
+ }
104
+
105
+ .gap-3 {
106
+ gap: 0.75rem;
107
+ }
108
+
109
+ .gap-4 {
110
+ gap: 1rem;
111
+ }
112
+
113
+ .gap-6 {
114
+ gap: 1.5rem;
115
+ }
116
+
117
+ .w-full {
118
+ width: 100%;
119
+ }
120
+
121
+ .w-auto {
122
+ width: auto;
123
+ }
124
+
125
+ .max-w-md {
126
+ max-width: 28rem;
127
+ }
128
+
129
+ .mx-auto {
130
+ margin-left: auto;
131
+ margin-right: auto;
132
+ }
133
+
134
+ .space-y-2 > * + * {
135
+ margin-top: 0.5rem;
136
+ }
137
+
138
+ .space-y-4 > * + * {
139
+ margin-top: 1rem;
140
+ }
141
+
142
+ .space-y-6 > * + * {
143
+ margin-top: 1.5rem;
144
+ }
145
+
146
+ .mb-1 {
147
+ margin-bottom: 0.25rem;
148
+ }
149
+
150
+ .mb-2 {
151
+ margin-bottom: 0.5rem;
152
+ }
153
+
154
+ .mb-4 {
155
+ margin-bottom: 1rem;
156
+ }
157
+
158
+ .mb-6 {
159
+ margin-bottom: 1.5rem;
160
+ }
161
+
162
+ .mt-1 {
163
+ margin-top: 0.25rem;
164
+ }
165
+
166
+ .mt-2 {
167
+ margin-top: 0.5rem;
168
+ }
169
+
170
+ .mt-4 {
171
+ margin-top: 1rem;
172
+ }
173
+
174
+ .py-2 {
175
+ padding-top: 0.5rem;
176
+ padding-bottom: 0.5rem;
177
+ }
178
+
179
+ .py-4 {
180
+ padding-top: 1rem;
181
+ padding-bottom: 1rem;
182
+ }
183
+
184
+ .py-6 {
185
+ padding-top: 1.5rem;
186
+ padding-bottom: 1.5rem;
187
+ }
188
+
189
+ .py-8 {
190
+ padding-top: 2rem;
191
+ padding-bottom: 2rem;
192
+ }
193
+
194
+ .py-12 {
195
+ padding-top: 3rem;
196
+ padding-bottom: 3rem;
197
+ }
198
+
199
+ .pt-2 {
200
+ padding-top: 0.5rem;
201
+ }
202
+
203
+ .pt-4 {
204
+ padding-top: 1rem;
205
+ }
206
+
207
+ .pb-2 {
208
+ padding-bottom: 0.5rem;
209
+ }
210
+
211
+ .p-4 {
212
+ padding: 1rem;
213
+ }
214
+
215
+ .p-5 {
216
+ padding: 1.25rem;
217
+ }
218
+
219
+ .p-6 {
220
+ padding: 1.5rem;
221
+ }
222
+
223
+ .px-4 {
224
+ padding-left: 1rem;
225
+ padding-right: 1rem;
226
+ }
227
+
228
+ .px-5 {
229
+ padding-left: 1.25rem;
230
+ padding-right: 1.25rem;
231
+ }
232
+
233
+ .px-6 {
234
+ padding-left: 1.5rem;
235
+ padding-right: 1.5rem;
236
+ }
237
+
238
+ .pl-5 {
239
+ padding-left: 1.25rem;
240
+ }
241
+
242
+ /* Cards */
243
+ .card {
244
+ background-color: var(--bg-card);
245
+ border: 1px solid var(--border);
246
+ border-radius: 0.5rem;
247
+ overflow: hidden;
248
+ transition: all 0.2s ease;
249
+ }
250
+
251
+ .card-header {
252
+ padding: 1.5rem 1.5rem 0;
253
+ }
254
+
255
+ .card-content {
256
+ padding: 1.5rem;
257
+ }
258
+
259
+ .card-footer {
260
+ padding: 0 1.5rem 1.5rem;
261
+ }
262
+
263
+ /* Buttons */
264
+ .btn {
265
+ display: inline-flex;
266
+ align-items: center;
267
+ justify-content: center;
268
+ padding: 0.5rem 1rem;
269
+ border-radius: 0.375rem;
270
+ font-weight: 500;
271
+ cursor: pointer;
272
+ transition: all 0.2s ease;
273
+ border: 1px solid transparent;
274
+ }
275
+
276
+ .btn-primary {
277
+ background-color: var(--primary);
278
+ color: white;
279
+ }
280
+
281
+ .btn-primary:hover {
282
+ background-color: var(--primary-hover);
283
+ }
284
+
285
+ .btn-success {
286
+ background-color: var(--success);
287
+ color: white;
288
+ }
289
+
290
+ .btn-success:hover {
291
+ background-color: var(--success-hover);
292
+ }
293
+
294
+ .btn-danger {
295
+ background-color: var(--danger);
296
+ color: white;
297
+ }
298
+
299
+ .btn-danger:hover {
300
+ background-color: var(--danger-hover);
301
+ }
302
+
303
+ .btn-outline {
304
+ background-color: transparent;
305
+ border: 1px solid var(--border);
306
+ color: var(--text);
307
+ }
308
+
309
+ .btn-outline:hover {
310
+ background-color: var(--bg-secondary);
311
+ }
312
+
313
+ .btn-ghost {
314
+ background-color: transparent;
315
+ color: var(--text);
316
+ }
317
+
318
+ .btn-ghost:hover {
319
+ background-color: var(--bg-secondary);
320
+ }
321
+
322
+ .btn-sm {
323
+ padding: 0.25rem 0.5rem;
324
+ font-size: 0.875rem;
325
+ }
326
+
327
+ .btn-lg {
328
+ padding: 0.75rem 1.5rem;
329
+ font-size: 1.125rem;
330
+ }
331
+
332
+ .btn .icon {
333
+ margin-right: 0.5rem;
334
+ width: 1rem;
335
+ height: 1rem;
336
+ }
337
+
338
+ /* Badge */
339
+ .badge {
340
+ display: inline-flex;
341
+ align-items: center;
342
+ padding: 0.25rem 0.5rem;
343
+ border-radius: 0.25rem;
344
+ font-size: 0.75rem;
345
+ font-weight: 500;
346
+ }
347
+
348
+ .badge-success {
349
+ background-color: rgba(16, 185, 129, 0.1);
350
+ color: #10B981;
351
+ }
352
+
353
+ .badge-danger {
354
+ background-color: rgba(239, 68, 68, 0.1);
355
+ color: #EF4444;
356
+ }
357
+
358
+ .badge-warning {
359
+ background-color: rgba(245, 158, 11, 0.1);
360
+ color: #F59E0B;
361
+ }
362
+
363
+ /* Input */
364
+ .input {
365
+ display: block;
366
+ width: 100%;
367
+ padding: 0.5rem 1rem;
368
+ background-color: var(--bg-secondary);
369
+ border: 1px solid var(--border);
370
+ border-radius: 0.375rem;
371
+ color: var(--text);
372
+ transition: border-color 0.2s ease;
373
+ }
374
+
375
+ .input:focus {
376
+ outline: none;
377
+ border-color: var(--primary);
378
+ }
379
+
380
+ .input-error {
381
+ border-color: var(--danger);
382
+ }
383
+
384
+ /* Alert */
385
+ .alert {
386
+ padding: 1rem;
387
+ border-radius: 0.375rem;
388
+ margin-bottom: 1rem;
389
+ }
390
+
391
+ .alert-danger {
392
+ background-color: rgba(239, 68, 68, 0.1);
393
+ border: 1px solid rgba(239, 68, 68, 0.2);
394
+ color: #EF4444;
395
+ }
396
+
397
+ .alert-success {
398
+ background-color: rgba(16, 185, 129, 0.1);
399
+ border: 1px solid rgba(16, 185, 129, 0.2);
400
+ color: #10B981;
401
+ }
402
+
403
+ /* Loading */
404
+ .animate-spin {
405
+ animation: spin 1s linear infinite;
406
+ }
407
+
408
+ @keyframes spin {
409
+ from {
410
+ transform: rotate(0deg);
411
+ }
412
+ to {
413
+ transform: rotate(360deg);
414
+ }
415
+ }
416
+
417
+ /* Grid */
418
+ .grid {
419
+ display: grid;
420
+ }
421
+
422
+ .grid-cols-1 {
423
+ grid-template-columns: repeat(1, minmax(0, 1fr));
424
+ }
425
+
426
+ .grid-cols-2 {
427
+ grid-template-columns: repeat(2, minmax(0, 1fr));
428
+ }
429
+
430
+ .grid-cols-3 {
431
+ grid-template-columns: repeat(3, minmax(0, 1fr));
432
+ }
433
+
434
+ /* Dialog */
435
+ .dialog-overlay {
436
+ position: fixed;
437
+ inset: 0;
438
+ background-color: rgba(0, 0, 0, 0.5);
439
+ z-index: 100;
440
+ }
441
+
442
+ .dialog-content {
443
+ position: fixed;
444
+ top: 50%;
445
+ left: 50%;
446
+ transform: translate(-50%, -50%);
447
+ background-color: var(--bg-primary);
448
+ border: 1px solid var(--border);
449
+ border-radius: 0.5rem;
450
+ padding: 1.5rem;
451
+ width: 90%;
452
+ max-width: 500px;
453
+ z-index: 101;
454
+ max-height: 90vh;
455
+ overflow-y: auto;
456
+ }
457
+
458
+ .dialog-header {
459
+ text-align: center;
460
+ margin-bottom: 1.5rem;
461
+ }
462
+
463
+ .dialog-title {
464
+ font-size: 1.25rem;
465
+ font-weight: 600;
466
+ }
467
+
468
+ .dialog-description {
469
+ color: var(--text-secondary);
470
+ }
471
+
472
+ .dialog-footer {
473
+ display: flex;
474
+ justify-content: flex-end;
475
+ gap: 0.5rem;
476
+ margin-top: 1.5rem;
477
+ }
478
+
479
+ /* Utils */
480
+ .text-center {
481
+ text-align: center;
482
+ }
483
+
484
+ .text-left {
485
+ text-align: left;
486
+ }
487
+
488
+ .text-right {
489
+ text-align: right;
490
+ }
491
+
492
+ .text-xl {
493
+ font-size: 1.25rem;
494
+ }
495
+
496
+ .text-lg {
497
+ font-size: 1.125rem;
498
+ }
499
+
500
+ .text-sm {
501
+ font-size: 0.875rem;
502
+ }
503
+
504
+ .text-xs {
505
+ font-size: 0.75rem;
506
+ }
507
+
508
+ .font-semibold {
509
+ font-weight: 600;
510
+ }
511
+
512
+ .font-bold {
513
+ font-weight: 700;
514
+ }
515
+
516
+ .rounded-lg {
517
+ border-radius: 0.5rem;
518
+ }
519
+
520
+ .rounded-md {
521
+ border-radius: 0.375rem;
522
+ }
523
+
524
+ .rounded-full {
525
+ border-radius: 9999px;
526
+ }
527
+
528
+ .border-l-4 {
529
+ border-left-width: 4px;
530
+ }
531
+
532
+ .border-l-green-600 {
533
+ border-left-color: #16A34A;
534
+ }
535
+
536
+ .cursor-pointer {
537
+ cursor: pointer;
538
+ }
539
+
540
+ .hidden {
541
+ display: none;
542
+ }
543
+
544
+ .relative {
545
+ position: relative;
546
+ }
547
+
548
+ .absolute {
549
+ position: absolute;
550
+ }
551
+
552
+ /* Responsive */
553
+ @media (min-width: 768px) {
554
+ .md:grid-cols-2 {
555
+ grid-template-columns: repeat(2, minmax(0, 1fr));
556
+ }
557
+
558
+ .md:flex-row {
559
+ flex-direction: row;
560
+ }
561
+
562
+ .md:w-auto {
563
+ width: auto;
564
+ }
565
+ }
566
+
567
+ /* Custom Components */
568
+ .session-card {
569
+ position: relative;
570
+ }
571
+
572
+ .session-card:hover {
573
+ transform: translateY(-2px);
574
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
575
+ }
576
+
577
+ .player-card {
578
+ transition: all 0.2s ease;
579
+ }
580
+
581
+ .player-card:hover {
582
+ transform: translateY(-2px);
583
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
584
+ }
585
+
586
+ .section-tabs {
587
+ width: 100%;
588
+ }
589
+
590
+ /* Animation */
591
+ @keyframes pulse {
592
+ 0%, 100% {
593
+ opacity: 1;
594
+ }
595
+ 50% {
596
+ opacity: 0.5;
597
+ }
598
+ }
599
+
600
+ .animate-pulse {
601
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
602
+ }
603
+ </style>
604
+ </head>
605
+ <body>
606
+ <div class="container">
607
+ <div class="space-y-6">
608
+ <!-- Header -->
609
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
610
+ <div>
611
+ <h1 class="text-2xl font-bold mb-1">Poker Dashboard</h1>
612
+ <p class="text-secondary" id="user-email">carregando...</p>
613
+ </div>
614
+
615
+ <div class="w-full md:w-auto flex gap-2">
616
+ <button id="new-session-btn" class="btn btn-primary" disabled>
617
+ Nova Sessão
618
+ </button>
619
+ <button id="reset-data-btn" class="btn btn-danger" disabled>
620
+ Reset Dados
621
+ </button>
622
+ </div>
623
+ </div>
624
+
625
+ <!-- New Session Form (Hidden by default) -->
626
+ <div id="new-session-form" class="card hidden">
627
+ <div class="card-header">
628
+ <h3 class="text-lg">Criar Nova Sessão</h3>
629
+ </div>
630
+ <div class="card-content">
631
+ <form id="session-form" class="space-y-4">
632
+ <div class="space-y-2">
633
+ <label for="session-name" class="block text-sm font-medium">Nome da Sessão</label>
634
+ <input
635
+ type="text"
636
+ id="session-name"
637
+ class="input"
638
+ placeholder="Digite um nome para a sessão"
639
+ />
640
+ </div>
641
+
642
+ <div class="flex flex-col sm:flex-row gap-2 pt-2">
643
+ <button
644
+ type="button"
645
+ id="cancel-new-session"
646
+ class="btn btn-outline w-full sm:w-auto"
647
+ >
648
+ Cancelar
649
+ </button>
650
+ <button
651
+ type="submit"
652
+ id="create-session"
653
+ class="btn btn-primary w-full sm:w-auto"
654
+ disabled
655
+ >
656
+ Criar e Iniciar
657
+ </button>
658
+ </div>
659
+ </form>
660
+ </div>
661
+ </div>
662
+
663
+ <!-- Tab Navigation -->
664
+ <div class="flex justify-center mb-4">
665
+ <div class="bg-card rounded-lg border border-border p-1 grid grid-cols-3 w-full md:w-auto">
666
+ <button
667
+ id="active-sessions-tab"
668
+ class="btn btn-primary rounded-md"
669
+ >
670
+ <i class="icon" data-lucide="clock"></i>
671
+ <span class="truncate">Ativas</span>
672
+ </button>
673
+ <button
674
+ id="finished-sessions-tab"
675
+ class="btn btn-ghost rounded-md"
676
+ >
677
+ <i class="icon" data-lucide="check-circle"></i>
678
+ <span class="truncate">Finalizadas</span>
679
+ </button>
680
+ <button
681
+ id="players-tab"
682
+ class="btn btn-ghost rounded-md"
683
+ >
684
+ <i class="icon" data-lucide="users"></i>
685
+ <span class="truncate">Jogadores</span>
686
+ </button>
687
+ </div>
688
+ </div>
689
+
690
+ <!-- Content Area -->
691
+ <div class="card">
692
+ <div class="card-header">
693
+ <h3 id="content-title">Sessões Ativas</h3>
694
+ </div>
695
+ <div class="card-content">
696
+ <!-- Loading State -->
697
+ <div id="loading-state" class="py-8 flex justify-center">
698
+ <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
699
+ </div>
700
+
701
+ <!-- Error State -->
702
+ <div id="error-state" class="hidden bg-red-900/20 border border-red-800 rounded-lg p-6 text-center">
703
+ <i class="icon mx-auto mb-4" style="height: 3rem; width: 3rem; color: #EF4444" data-lucide="alert-circle"></i>
704
+ <h3 class="text-xl font-medium text-red-300 mb-2">Erro</h3>
705
+ <p class="text-red-200 mb-4" id="error-message"></p>
706
+ <button id="retry-btn" class="btn btn-danger">
707
+ Tentar Novamente
708
+ </button>
709
+ </div>
710
+
711
+ <!-- Active Sessions Content -->
712
+ <div id="active-sessions-content" class="hidden space-y-4">
713
+ <!-- Active sessions will be dynamically inserted here -->
714
+ </div>
715
+
716
+ <!-- No Active Sessions -->
717
+ <div id="no-active-sessions" class="hidden text-center py-12 bg-card rounded-lg border border-border">
718
+ <i class="icon mx-auto mb-4" style="height: 3rem; width: 3rem; color: #A1A1A1" data-lucide="clock"></i>
719
+ <h3 class="text-lg font-medium mb-2">Nenhuma sessão ativa</h3>
720
+ <p class="text-secondary mt-2 mb-6 max-w-md mx-auto">
721
+ Crie uma nova sessão para começar a gerenciar suas partidas de poker
722
+ </p>
723
+ <button id="new-session-empty-btn" class="btn btn-primary">
724
+ <i class="icon" data-lucide="plus"></i>
725
+ Nova Sessão
726
+ </button>
727
+ </div>
728
+
729
+ <!-- Finished Sessions Content -->
730
+ <div id="finished-sessions-content" class="hidden space-y-4">
731
+ <!-- Finished sessions will be dynamically inserted here -->
732
+ </div>
733
+
734
+ <!-- No Finished Sessions -->
735
+ <div id="no-finished-sessions" class="hidden text-center py-12 bg-card rounded-lg border border-border">
736
+ <i class="icon mx-auto mb-4" style="height: 3rem; width: 3rem; color: #A1A1A1" data-lucide="check-circle"></i>
737
+ <h3 class="text-lg font-medium mb-2">Nenhuma sessão finalizada</h3>
738
+ <p class="text-secondary mt-2 max-w-md mx-auto">
739
+ As sessões finalizadas aparecerão aqui para consulta
740
+ </p>
741
+ </div>
742
+
743
+ <!-- Players Content -->
744
+ <div id="players-content" class="hidden">
745
+ <div id="players-grid" class="grid grid-cols-1 md:grid-cols-2 gap-4">
746
+ <!-- Players will be dynamically inserted here -->
747
+ </div>
748
+
749
+ <!-- No Players -->
750
+ <div id="no-players" class="hidden py-8 text-center">
751
+ <p class="text-secondary mb-4">Nenhum jogador cadastrado ainda.</p>
752
+ <button id="add-players-btn" class="btn btn-primary">
753
+ <i class="icon" data-lucide="plus"></i>
754
+ Cadastrar Jogadores
755
+ </button>
756
+ </div>
757
+
758
+ <!-- View All Players Button -->
759
+ <div id="view-all-players" class="hidden flex justify-center mt-6">
760
+ <button id="all-players-btn" class="btn btn-primary">
761
+ Ver Todos os Jogadores
762
+ </button>
763
+ </div>
764
+ </div>
765
+ </div>
766
+ </div>
767
+ </div>
768
+ </div>
769
+
770
+ <!-- Reset Data Confirmation Dialog -->
771
+ <div id="reset-dialog" class="dialog-overlay hidden">
772
+ <div class="dialog-content">
773
+ <div class="dialog-header">
774
+ <div class="dialog-title flex items-center gap-2">
775
+ <i class="icon text-red-400" data-lucide="alert-circle"></i>
776
+ Atenção! Reset de Dados
777
+ </div>
778
+ <div class="dialog-description">
779
+ <div class="mt-2 p-3 bg-red-950/30 border border-red-900 rounded-md text-red-300">
780
+ Esta ação irá excluir <span class="font-bold">todos os dados</span> do sistema, incluindo:
781
+ <ul class="list-disc pl-5 mt-2 space-y-1">
782
+ <li>Todas as sessões</li>
783
+ <li>Todos os dados de transações</li>
784
+ <li>Todas as fichas cadastradas</li>
785
+ <li>Todos os saldos e históricos</li>
786
+ </ul>
787
+ <p class="mt-2 font-semibold">Esta ação não pode ser desfeita!</p>
788
+ </div>
789
+ </div>
790
+ </div>
791
+
792
+ <div class="space-y-4 py-2">
793
+ <div class="space-y-2">
794
+ <label for="reset-password" class="text-red-300">Digite a senha de segurança:</label>
795
+ <input
796
+ type="password"
797
+ id="reset-password"
798
+ class="input"
799
+ placeholder="Senha de segurança"
800
+ />
801
+ <p id="password-error" class="hidden text-red-500 text-sm">Senha incorreta. Tente novamente.</p>
802
+ </div>
803
+ </div>
804
+
805
+ <div class="dialog-footer">
806
+ <button
807
+ id="cancel-reset"
808
+ class="btn btn-outline"
809
+ >
810
+ Cancelar
811
+ </button>
812
+ <button
813
+ id="confirm-reset"
814
+ class="btn btn-danger"
815
+ disabled
816
+ >
817
+ Confirmar Reset
818
+ </button>
819
+ </div>
820
+ </div>
821
+ </div>
822
+
823
+ <script>
824
+ // Initialize Lucide icons
825
+ lucide.createIcons();
826
+
827
+ // Mock data - in a real app, this would come from an API
828
+ const mockUser = {
829
+ id: 'user-123',
830
+ email: 'admin@poker.com',
831
+ name: 'Admin'
832
+ };
833
+
834
+ const mockSessions = [
835
+ {
836
+ id: 'session-1',
837
+ name: 'Sessão do Clube',
838
+ startTime: '2023-06-15T19:00:00',
839
+ endTime: '',
840
+ isActive: true,
841
+ createdBy: mockUser.email,
842
+ cashBoxId: 'cashbox-1'
843
+ },
844
+ {
845
+ id: 'session-2',
846
+ name: 'Torneio Mensal',
847
+ startTime: '2023-06-01T15:00:00',
848
+ endTime: '2023-06-01T22:30:00',
849
+ isActive: false,
850
+ createdBy: mockUser.email,
851
+ cashBoxId: 'cashbox-1'
852
+ },
853
+ {
854
+ id: 'session-3',
855
+ name: 'Torneio Anual',
856
+ startTime: '2023-01-15T12:00:00',
857
+ endTime: '2023-01-16T03:45:00',
858
+ isActive: false,
859
+ createdBy: mockUser.email,
860
+ cashBoxId: 'cashbox-1'
861
+ }
862
+ ];
863
+
864
+ const mockPlayers = [
865
+ {
866
+ id: 'player-1',
867
+ name: 'João Silva',
868
+ email: 'joao@example.com',
869
+ totalBalance: 250.50,
870
+ pendingAmount: 50.00
871
+ },
872
+ {
873
+ id: 'player-2',
874
+ name: 'Maria Oliveira',
875
+ email: 'maria@example.com',
876
+ totalBalance: -120.75,
877
+ pendingAmount: 0
878
+ },
879
+ {
880
+ id: 'player-3',
881
+ name: 'Pedro Santos',
882
+ email: 'pedro@example.com',
883
+ totalBalance: 75.20,
884
+ pendingAmount: 100.00
885
+ },
886
+ {
887
+ id: 'player-4',
888
+ name: 'Ana Costa',
889
+ email: 'ana@example.com',
890
+ totalBalance: -200.30,
891
+ pendingAmount: 0
892
+ }
893
+ ];
894
+
895
+ // State management
896
+ let currentSessionName = '';
897
+ let activeTab = 'active-sessions'; // default tab
898
+ let isLoading = false;
899
+
900
+ // DOM elements
901
+ const elements = {
902
+ userEmail: document.getElementById('user-email'),
903
+ newSessionBtn: document.getElementById('new-session-btn'),
904
+ resetDataBtn: document.getElementById('reset-data-btn'),
905
+ newSessionForm: document.getElementById('new-session-form'),
906
+ sessionForm: document.getElementById('session-form'),
907
+ sessionNameInput: document.getElementById('session-name'),
908
+ cancelNewSession: document.getElementById('cancel-new-session'),
909
+ createSession: document.getElementById('create-session'),
910
+ activeSessionsTab: document.getElementById('active-sessions-tab'),
911
+ finishedSessionsTab: document.getElementById('finished-sessions-tab'),
912
+ playersTab: document.getElementById('players-tab'),
913
+ contentTitle: document.getElementById('content-title'),
914
+ loadingState: document.getElementById('loading-state'),
915
+ errorState: document.getElementById('error-state'),
916
+ errorMessage: document.getElementById('error-message'),
917
+ retryBtn: document.getElementById('retry-btn'),
918
+ activeSessionsContent: document.getElementById('active-sessions-content'),
919
+ noActiveSessions: document.getElementById('no-active-sessions'),
920
+ newSessionEmptyBtn: document.getElementById('new-session-empty-btn'),
921
+ finishedSessionsContent: document.getElementById('finished-sessions-content'),
922
+ noFinishedSessions: document.getElementById('no-finished-sessions'),
923
+ playersContent: document.getElementById('players-content'),
924
+ playersGrid: document.getElementById('players-grid'),
925
+ noPlayers: document.getElementById('no-players'),
926
+ addPlayersBtn: document.getElementById('add-players-btn'),
927
+ viewAllPlayers: document.getElementById('view-all-players'),
928
+ allPlayersBtn: document.getElementById('all-players-btn'),
929
+ resetDialog: document.getElementById('reset-dialog'),
930
+ resetPassword: document.getElementById('reset-password'),
931
+ passwordError: document.getElementById('password-error'),
932
+ cancelReset: document.getElementById('cancel-reset'),
933
+ confirmReset: document.getElementById('confirm-reset')
934
+ };
935
+
936
+ // Format date to Brazilian format
937
+ function formatDate(dateString) {
938
+ if (!dateString) return '--';
939
+
940
+ const date = new Date(dateString);
941
+ return date.toLocaleString('pt-BR', {
942
+ day: '2-digit',
943
+ month: '2-digit',
944
+ year: 'numeric',
945
+ hour: '2-digit',
946
+ minute: '2-digit'
947
+ });
948
+ }
949
+
950
+ // Format duration between two dates
951
+ function formatDuration(startDate, endDate) {
952
+ if (!startDate || !endDate) return "--";
953
+
954
+ const start = new Date(startDate);
955
+ const end = new Date(endDate);
956
+ const diff = Math.abs(end.getTime() - start.getTime());
957
+
958
+ const hours = Math.floor(diff / (1000 * 60 * 60));
959
+ const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
960
+
961
+ return `${hours}h ${minutes}min`;
962
+ }
963
+
964
+ // Format currency to Brazilian Real
965
+ function formatCurrency(amount) {
966
+ return new Intl.NumberFormat('pt-BR', {
967
+ style: 'currency',
968
+ currency: 'BRL'
969
+ }).format(amount);
970
+ }
971
+
972
+ // Show active sessions
973
+ function renderActiveSessions(sessions) {
974
+ elements.activeSessionsContent.innerHTML = '';
975
+
976
+ if (sessions.length === 0) {
977
+ elements.noActiveSessions.classList.remove('hidden');
978
+ elements.activeSessionsContent.classList.add('hidden');
979
+ return;
980
+ }
981
+
982
+ elements.noActiveSessions.classList.add('hidden');
983
+ elements.activeSessionsContent.classList.remove('hidden');
984
+
985
+ sessions.forEach(session => {
986
+ const sessionElement = document.createElement('div');
987
+ sessionElement.className = 'card session-card bg-card border border-border border-l-4 border-l-green-600 transition-all hover:border-border-hover';
988
+
989
+ sessionElement.innerHTML = `
990
+ <div class="card-content p-5">
991
+ <div class="flex flex-col gap-4">
992
+ <div class="flex items-center gap-3">
993
+ <div class="w-10 h-10 rounded-full bg-green-900/30 flex items-center justify-center">
994
+ <i class="icon text-green-400" data-lucide="clock"></i>
995
+ </div>
996
+ <div>
997
+ <h3 class="text-lg font-semibold">${session.name}</h3>
998
+ <div class="text-sm text-secondary">
999
+ Iniciada em ${formatDate(session.startTime)}
1000
+ </div>
1001
+ </div>
1002
+ </div>
1003
+
1004
+ <div class="flex flex-col sm:flex-row gap-3">
1005
+ <button
1006
+ data-session-id="${session.id}"
1007
+ class="btn btn-success w-full sm:w-auto continue-session-btn"
1008
+ >
1009
+ <i class="icon" data-lucide="play"></i>
1010
+ Continuar Sessão
1011
+ </button>
1012
+ <button
1013
+ data-session-id="${session.id}"
1014
+ class="btn btn-outline border-red-700 text-red-400 hover:bg-red-950 w-full sm:w-auto end-session-btn"
1015
+ >
1016
+ Finalizar
1017
+ </button>
1018
+ </div>
1019
+ </div>
1020
+ </div>
1021
+ `;
1022
+
1023
+ elements.activeSessionsContent.appendChild(sessionElement);
1024
+ });
1025
+
1026
+ // Reinitialize icons in the new content
1027
+ lucide.createIcons();
1028
+
1029
+ // Add event listeners
1030
+ document.querySelectorAll('.continue-session-btn').forEach(btn => {
1031
+ btn.addEventListener('click', function() {
1032
+ const sessionId = this.getAttribute('data-session-id');
1033
+ continueSession(sessionId);
1034
+ });
1035
+ });
1036
+
1037
+ document.querySelectorAll('.end-session-btn').forEach(btn => {
1038
+ btn.addEventListener('click', function() {
1039
+ const sessionId = this.getAttribute('data-session-id');
1040
+ endSession(sessionId);
1041
+ });
1042
+ });
1043
+ }
1044
+
1045
+ // Show finished sessions
1046
+ function renderFinishedSessions(sessions) {
1047
+ elements.finishedSessionsContent.innerHTML = '';
1048
+
1049
+ if (sessions.length === 0) {
1050
+ elements.noFinishedSessions.classList.remove('hidden');
1051
+ elements.finishedSessionsContent.classList.add('hidden');
1052
+ return;
1053
+ }
1054
+
1055
+ elements.noFinishedSessions.classList.add('hidden');
1056
+ elements.finishedSessionsContent.classList.remove('hidden');
1057
+
1058
+ sessions.forEach(session => {
1059
+ const sessionElement = document.createElement('div');
1060
+ sessionElement.className = 'card bg-card border border-border';
1061
+
1062
+ sessionElement.innerHTML = `
1063
+ <div class="card-content p-4">
1064
+ <div class="flex flex-col gap-3">
1065
+ <div>
1066
+ <h3 class="text-xl font-bold">${session.name}</h3>
1067
+ <p class="text-sm text-secondary mt-1">
1068
+ Iniciada em ${formatDate(session.startTime)}
1069
+ </p>
1070
+ <p class="text-sm text-secondary">
1071
+ Finalizada em ${formatDate(session.endTime)}
1072
+ </p>
1073
+ <div class="mt-1 flex items-center gap-1">
1074
+ <i class="icon w-3 h-3 text-secondary" data-lucide="calendar"></i>
1075
+ <span class="text-xs text-secondary">
1076
+ Duração: ${formatDuration(session.startTime, session.endTime)}
1077
+ </span>
1078
+ </div>
1079
+ </div>
1080
+
1081
+ <button
1082
+ data-session-id="${session.id}"
1083
+ class="btn btn-primary w-full sm:w-auto view-session-details"
1084
+ >
1085
+ <i class="icon" data-lucide="arrow-right"></i>
1086
+ Ver Detalhes
1087
+ </button>
1088
+ </div>
1089
+ </div>
1090
+ `;
1091
+
1092
+ elements.finishedSessionsContent.appendChild(sessionElement);
1093
+ });
1094
+
1095
+ // Reinitialize icons in the new content
1096
+ lucide.createIcons();
1097
+
1098
+ // Add event listeners
1099
+ document.querySelectorAll('.view-session-details').forEach(btn => {
1100
+ btn.addEventListener('click', function() {
1101
+ const sessionId = this.getAttribute('data-session-id');
1102
+ viewSessionDetails(sessionId);
1103
+ });
1104
+ });
1105
+ }
1106
+
1107
+ // Show players
1108
+ function renderPlayers(players) {
1109
+ elements.playersGrid.innerHTML = '';
1110
+
1111
+ if (players.length === 0) {
1112
+ elements.noPlayers.classList.remove('hidden');
1113
+ elements.playersGrid.classList.add('hidden');
1114
+ elements.viewAllPlayers.classList.add('hidden');
1115
+ return;
1116
+ }
1117
+
1118
+ elements.noPlayers.classList.add('hidden');
1119
+ elements.playersGrid.classList.remove('hidden');
1120
+
1121
+ // Only show view all button if more than 4 players
1122
+ elements.viewAllPlayers.classList.toggle('hidden', players.length <= 4);
1123
+
1124
+ // Show only first 4 players initially
1125
+ const playersToShow = players.length > 4 ? players.slice(0, 4) : players;
1126
+
1127
+ playersToShow.forEach(player => {
1128
+ const playerElement = document.createElement('div');
1129
+ playerElement.className = 'player-card bg-card border border-border rounded-lg p-4 hover:border-border-hover cursor-pointer transition-colors';
1130
+ playerElement.setAttribute('data-player-id', player.id);
1131
+
1132
+ const balanceClass = player.totalBalance < 0 ? 'text-red-400' :
1133
+ player.totalBalance > 0 ? 'text-green-400' : 'text-white';
1134
+
1135
+ playerElement.innerHTML = `
1136
+ <div class="flex justify-between items-start mb-2">
1137
+ <h3 class="font-semibold text-lg">${player.name}</h3>
1138
+ <div class="font-bold ${balanceClass}">
1139
+ ${formatCurrency(Math.abs(player.totalBalance))}
1140
+ ${player.totalBalance !== 0 ?
1141
+ `<span class="text-sm ml-1">${player.totalBalance < 0 ? '(deve)' : '(recebe)'}</span>` :
1142
+ ''
1143
+ }
1144
+ </div>
1145
+ </div>
1146
+ ${player.pendingAmount !== 0 ? `
1147
+ <div class="mt-2">
1148
+ <span class="badge ${player.pendingAmount > 0 ? 'badge-danger' : 'badge-success'}">
1149
+ ${player.pendingAmount > 0 ?
1150
+ `Pendente: deve ${formatCurrency(player.pendingAmount)}` :
1151
+ `Pendente: recebe ${formatCurrency(Math.abs(player.pendingAmount))}`
1152
+ }
1153
+ </span>
1154
+ </div>
1155
+ ` : ''}
1156
+ `;
1157
+
1158
+ elements.playersGrid.appendChild(playerElement);
1159
+ });
1160
+
1161
+ // Add event listeners
1162
+ document.querySelectorAll('.player-card').forEach(card => {
1163
+ card.addEventListener('click', function() {
1164
+ const playerId = this.getAttribute('data-player-id');
1165
+ viewPlayerDetails(playerId);
1166
+ });
1167
+ });
1168
+ }
1169
+
1170
+ // Change active tab
1171
+ function setActiveTab(tab) {
1172
+ activeTab = tab;
1173
+
1174
+ // Update tab buttons
1175
+ elements.activeSessionsTab.className = tab === 'active-sessions' ? 'btn btn-primary rounded-md' : 'btn btn-ghost rounded-md';
1176
+ elements.finishedSessionsTab.className = tab === 'finished-sessions' ? 'btn btn-primary rounded-md' : 'btn btn-ghost rounded-md';
1177
+ elements.playersTab.className = tab === 'players' ? 'btn btn-primary rounded-md' : 'btn btn-ghost rounded-md';
1178
+
1179
+ // Update content title
1180
+ if (tab === 'active-sessions') {
1181
+ elements.contentTitle.textContent = 'Sessões Ativas';
1182
+ } else if (tab === 'finished-sessions') {
1183
+ elements.contentTitle.textContent = 'Sessões Finalizadas';
1184
+ } else {
1185
+ elements.contentTitle.textContent = 'Jogadores';
1186
+ }
1187
+
1188
+ // Hide all content
1189
+ elements.loadingState.classList.add('hidden');
1190
+ elements.errorState.classList.add('hidden');
1191
+ elements.activeSessionsContent.classList.add('hidden');
1192
+ elements.noActiveSessions.classList.add('hidden');
1193
+ elements.finishedSessionsContent.classList.add('hidden');
1194
+ elements.noFinishedSessions.classList.add('hidden');
1195
+ elements.playersContent.classList.add('hidden');
1196
+ elements.playersGrid.classList.add('hidden');
1197
+ elements.noPlayers.classList.add('hidden');
1198
+
1199
+ // Show loading state initially
1200
+ elements.loadingState.classList.remove('hidden');
1201
+
1202
+ // Simulate loading time
1203
+ setTimeout(() => {
1204
+ elements.loadingState.classList.add('hidden');
1205
+
1206
+ if (tab === 'active-sessions') {
1207
+ const activeSessions = mockSessions.filter(s => s.isActive);
1208
+ renderActiveSessions(activeSessions);
1209
+ } else if (tab === 'finished-sessions') {
1210
+ const finishedSessions = mockSessions.filter(s => !s.isActive);
1211
+ renderFinishedSessions(finishedSessions);
1212
+ } else {
1213
+ renderPlayers(mockPlayers);
1214
+ }
1215
+ }, 800);
1216
+ }
1217
+
1218
+ // Simulate session functions
1219
+ function createSession(sessionName) {
1220
+ console.log(`Creating session: ${sessionName}`);
1221
+ // In a real app, this would call an API
1222
+ return new Promise((resolve) => {
1223
+ setTimeout(() => {
1224
+ const newSession = {
1225
+ id: `session-${Date.now()}`,
1226
+ name: sessionName,
1227
+ startTime: new Date().toISOString(),
1228
+ endTime: '',
1229
+ isActive: true,
1230
+ createdBy: mockUser.email,
1231
+ cashBoxId: 'cashbox-1'
1232
+ };
1233
+ mockSessions.unshift(newSession);
1234
+ resolve(newSession);
1235
+ }, 1000);
1236
+ });
1237
+ }
1238
+
1239
+ function continueSession(sessionId) {
1240
+ console.log(`Continuing session: ${sessionId}`);
1241
+ // In a real app, this would navigate to the session page
1242
+ alert(`Continuando sessão ${sessionId}. Redirecionando...`);
1243
+ }
1244
+
1245
+ function endSession(sessionId) {
1246
+ console.log(`Ending session: ${sessionId}`);
1247
+ // In a real app, this would call an API
1248
+ const session = mockSessions.find(s => s.id === sessionId);
1249
+ if (session) {
1250
+ session.isActive = false;
1251
+ session.endTime = new Date().toISOString();
1252
+ }
1253
+
1254
+ // Refresh the view
1255
+ setActiveTab(activeTab);
1256
+ }
1257
+
1258
+ function viewSessionDetails(sessionId) {
1259
+ console.log(`Viewing session details: ${sessionId}`);
1260
+ // In a real app, this would navigate to the session details page
1261
+ alert(`Abrindo detalhes da sessão ${sessionId}...`);
1262
+ }
1263
+
1264
+ function viewPlayerDetails(playerId) {
1265
+ console.log(`Viewing player details: ${playerId}`);
1266
+ // In a real app, this would navigate to the player details page
1267
+ alert(`Abrindo detalhes do jogador ${playerId}...`);
1268
+ }
1269
+
1270
+ function viewAllPlayers() {
1271
+ console.log('Viewing all players');
1272
+ // In a real app, this would navigate to the players page
1273
+ alert('Abrindo lista completa de jogadores...');
1274
+ }
1275
+
1276
+ function resetAllData() {
1277
+ console.log('Resetting all data');
1278
+ // In a real app, this would call an API to reset all data
1279
+ return new Promise((resolve) => {
1280
+ setTimeout(() => {
1281
+ console.log('All data reset complete');
1282
+ resolve();
1283
+ }, 2000);
1284
+ });
1285
+ }
1286
+
1287
+ // Event listeners
1288
+ elements.sessionForm.addEventListener('submit', async (e) => {
1289
+ e.preventDefault();
1290
+
1291
+ if (!currentSessionName.trim()) return;
1292
+
1293
+ elements.createSession.disabled = true;
1294
+ elements.createSession.innerHTML = `
1295
+ <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
1296
+ Criando...
1297
+ `;
1298
+
1299
+ try {
1300
+ await createSession(currentSessionName);
1301
+
1302
+ // Reset form
1303
+ elements.newSessionForm.classList.add('hidden');
1304
+ elements.sessionNameInput.value = '';
1305
+ currentSessionName = '';
1306
+ elements.createSession.disabled = true;
1307
+
1308
+ // Refresh the view
1309
+ setActiveTab('active-sessions');
1310
+ } catch (error) {
1311
+ console.error('Error creating session:', error);
1312
+ alert('Erro ao criar sessão. Por favor, tente novamente.');
1313
+ } finally {
1314
+ elements.createSession.disabled = false;
1315
+ elements.createSession.innerHTML = `
1316
+ <i class="icon" data-lucide="play"></i>
1317
+ Criar e Iniciar
1318
+ `;
1319
+ lucide.createIcons();
1320
+ }
1321
+ });
1322
+
1323
+ elements.sessionNameInput.addEventListener('input', (e) => {
1324
+ currentSessionName = e.target.value;
1325
+ elements.createSession.disabled = !currentSessionName.trim();
1326
+ });
1327
+
1328
+ elements.cancelNewSession.addEventListener('click', () => {
1329
+ elements.newSessionForm.classList.add('hidden');
1330
+ elements.sessionNameInput.value = '';
1331
+ currentSessionName = '';
1332
+ elements.createSession.disabled = true;
1333
+ });
1334
+
1335
+ elements.activeSessionsTab.addEventListener('click', () => setActiveTab('active-sessions'));
1336
+ elements.finishedSessionsTab.addEventListener('click', () => setActiveTab('finished-sessions'));
1337
+ elements.playersTab.addEventListener('click', () => setActiveTab('players'));
1338
+
1339
+ elements.newSessionBtn.addEventListener('click', () => {
1340
+ elements.newSessionForm.classList.remove('hidden');
1341
+ elements.sessionNameInput.focus();
1342
+ });
1343
+
1344
+ elements.newSessionEmptyBtn.addEventListener('click', () => {
1345
+ elements.newSessionForm.classList.remove('hidden');
1346
+ elements.sessionNameInput.focus();
1347
+ });
1348
+
1349
+ elements.addPlayersBtn.addEventListener('click', viewAllPlayers);
1350
+ elements.allPlayersBtn.addEventListener('click', viewAllPlayers);
1351
+
1352
+ elements.resetDataBtn.addEventListener('click', () => {
1353
+ elements.resetDialog.classList.remove('hidden');
1354
+ elements.resetPassword.focus();
1355
+ });
1356
+
1357
+ elements.resetPassword.addEventListener('input', (e) => {
1358
+ elements.passwordError.classList.add('hidden');
1359
+ elements.confirmReset.disabled = !e.target.value;
1360
+ });
1361
+
1362
+ elements.cancelReset.addEventListener('click', () => {
1363
+ elements.resetDialog.classList.add('hidden');
1364
+ elements.resetPassword.value = '';
1365
+ elements.passwordError.classList.add('hidden');
1366
+ elements.confirmReset.disabled = true;
1367
+ });
1368
+
1369
+ elements.confirmReset.addEventListener('click', async () => {
1370
+ if (elements.resetPassword.value !== '452631') {
1371
+ elements.passwordError.classList.remove('hidden');
1372
+ return;
1373
+ }
1374
+
1375
+ elements.confirmReset.disabled = true;
1376
+ elements.confirmReset.innerHTML = `
1377
+ <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
1378
+ Resetando...
1379
+ `;
1380
+
1381
+ try {
1382
+ await resetAllData();
1383
+ alert('Dados resetados com sucesso!');
1384
+
1385
+ // Close dialog
1386
+ elements.resetDialog.classList.add('hidden');
1387
+ elements.resetPassword.value = '';
1388
+ elements.passwordError.classList.add('hidden');
1389
+
1390
+ // Refresh the view (would reload data in a real app)
1391
+ setActiveTab(activeTab);
1392
+ } catch (error) {
1393
+ console.error('Error resetting data:', error);
1394
+ alert('Erro ao resetar dados. Por favor, tente novamente.');
1395
+ } finally {
1396
+ elements.confirmReset.disabled = false;
1397
+ elements.confirmReset.innerHTML = 'Confirmar Reset';
1398
+ }
1399
+ });
1400
+
1401
+ elements.retryBtn.addEventListener('click', () => {
1402
+ setActiveTab(activeTab);
1403
+ });
1404
+
1405
+ // Simulate loading user data
1406
+ setTimeout(() => {
1407
+ elements.userEmail.textContent = mockUser.email;
1408
+ elements.newSessionBtn.disabled = false;
1409
+ elements.resetDataBtn.disabled = false;
1410
+
1411
+ // Load initial content
1412
+ setActiveTab('active-sessions');
1413
+ }, 1500);
1414
+ </script>
1415
+ <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
1416
+ </html>