Hugging Face's logo

Spaces:
castro777
/
dash-frufru
Running

App Files Community
castro777 commited on
Commit
280a057
·
verified ·
1 Parent(s): a489c18

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1369 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dash Frufru
3
- emoji: 🏢
4
- colorFrom: indigo
5
- colorTo: gray
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: dash-frufru
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,1369 @@
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>Session View - Poker Cash Manager Pro</title>
7
+ <script src="https://unpkg.com/lucide@latest"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --primary: #2563eb;
12
+ --primary-dark: #1e40af;
13
+ --secondary: #4f46e5;
14
+ --success: #16a34a;
15
+ --danger: #dc2626;
16
+ --warning: #d97706;
17
+ --info: #0891b2;
18
+ --background: #f3f4f6;
19
+ --card: #ffffff;
20
+ --text: #111827;
21
+ --text-secondary: #6b7280;
22
+ --border: #e5e7eb;
23
+ }
24
+
25
+ * {
26
+ margin: 0;
27
+ padding: 0;
28
+ box-sizing: border-box;
29
+ font-family: 'Inter', sans-serif;
30
+ }
31
+
32
+ body {
33
+ background-color: var(--background);
34
+ color: var(--text);
35
+ min-height: 100vh;
36
+ }
37
+
38
+ /* Layout */
39
+ .app-container {
40
+ display: grid;
41
+ grid-template-columns: 280px 1fr;
42
+ min-height: 100vh;
43
+ }
44
+
45
+ /* Sidebar */
46
+ .sidebar {
47
+ background-color: var(--card);
48
+ border-right: 1px solid var(--border);
49
+ padding: 1.5rem;
50
+ position: relative;
51
+ z-index: 10;
52
+ }
53
+
54
+ .sidebar-header {
55
+ display: flex;
56
+ align-items: center;
57
+ margin-bottom: 2rem;
58
+ }
59
+
60
+ .sidebar-header h1 {
61
+ font-size: 1.25rem;
62
+ font-weight: 700;
63
+ display: flex;
64
+ align-items: center;
65
+ gap: 0.5rem;
66
+ }
67
+
68
+ .sidebar-header i {
69
+ color: var(--primary);
70
+ }
71
+
72
+ .sidebar-nav {
73
+ display: flex;
74
+ flex-direction: column;
75
+ gap: 0.5rem;
76
+ }
77
+
78
+ .nav-item {
79
+ display: flex;
80
+ align-items: center;
81
+ gap: 0.75rem;
82
+ padding: 0.75rem 1rem;
83
+ border-radius: 0.5rem;
84
+ font-weight: 500;
85
+ cursor: pointer;
86
+ transition: all 0.15s ease;
87
+ }
88
+
89
+ .nav-item:hover {
90
+ background-color: #f1f5f9;
91
+ }
92
+
93
+ .nav-item.active {
94
+ background-color: #e0e7ff;
95
+ color: var(--primary);
96
+ }
97
+
98
+ .nav-item i {
99
+ font-size: 1.1rem;
100
+ }
101
+
102
+ /* Main Content */
103
+ .main-content {
104
+ padding: 2rem;
105
+ }
106
+
107
+ .header {
108
+ display: flex;
109
+ justify-content: space-between;
110
+ align-items: center;
111
+ margin-bottom: 2rem;
112
+ }
113
+
114
+ .header h2 {
115
+ font-size: 1.5rem;
116
+ font-weight: 700;
117
+ }
118
+
119
+ .user-profile {
120
+ display: flex;
121
+ align-items: center;
122
+ gap: 0.75rem;
123
+ }
124
+
125
+ .user-avatar {
126
+ width: 40px;
127
+ height: 40px;
128
+ border-radius: 50%;
129
+ background-color: var(--primary);
130
+ color: white;
131
+ display: flex;
132
+ align-items: center;
133
+ justify-content: center;
134
+ font-weight: 600;
135
+ }
136
+
137
+ /* Session Header */
138
+ .session-header {
139
+ display: flex;
140
+ justify-content: space-between;
141
+ align-items: center;
142
+ margin-bottom: 1.5rem;
143
+ background-color: var(--card);
144
+ padding: 1.5rem;
145
+ border-radius: 0.75rem;
146
+ border: 1px solid var(--border);
147
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
148
+ }
149
+
150
+ .session-title {
151
+ font-size: 1.5rem;
152
+ font-weight: 700;
153
+ }
154
+
155
+ .session-status {
156
+ padding: 0.375rem 0.75rem;
157
+ border-radius: 1rem;
158
+ font-size: 0.875rem;
159
+ font-weight: 500;
160
+ }
161
+
162
+ .session-status.active {
163
+ background-color: #dcfce7;
164
+ color: var(--success);
165
+ }
166
+
167
+ .session-status.inactive {
168
+ background-color: #fee2e2;
169
+ color: var(--danger);
170
+ }
171
+
172
+ /* Session Stats */
173
+ .session-stats {
174
+ display: grid;
175
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
176
+ gap: 1rem;
177
+ margin-bottom: 1.5rem;
178
+ }
179
+
180
+ .session-stat-card {
181
+ background-color: var(--card);
182
+ border-radius: 0.75rem;
183
+ padding: 1.25rem;
184
+ border: 1px solid var(--border);
185
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
186
+ }
187
+
188
+ .session-stat-title {
189
+ font-size: 0.875rem;
190
+ color: var(--text-secondary);
191
+ margin-bottom: 0.5rem;
192
+ display: flex;
193
+ align-items: center;
194
+ gap: 0.5rem;
195
+ }
196
+
197
+ .session-stat-value {
198
+ font-size: 1.25rem;
199
+ font-weight: 700;
200
+ }
201
+
202
+ .session-stat-delta {
203
+ font-size: 0.75rem;
204
+ margin-top: 0.25rem;
205
+ display: flex;
206
+ align-items: center;
207
+ gap: 0.25rem;
208
+ }
209
+
210
+ .delta-up {
211
+ color: var(--success);
212
+ }
213
+
214
+ .delta-down {
215
+ color: var(--danger);
216
+ }
217
+
218
+ /* Players Section */
219
+ .section-title {
220
+ font-size: 1.125rem;
221
+ font-weight: 600;
222
+ margin-bottom: 1rem;
223
+ display: flex;
224
+ align-items: center;
225
+ gap: 0.5rem;
226
+ }
227
+
228
+ .players-grid {
229
+ display: grid;
230
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
231
+ gap: 1.25rem;
232
+ margin-bottom: 2rem;
233
+ }
234
+
235
+ .player-card {
236
+ background-color: var(--card);
237
+ border-radius: 0.75rem;
238
+ padding: 1.25rem;
239
+ border: 1px solid var(--border);
240
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
241
+ transition: transform 0.2s ease;
242
+ }
243
+
244
+ .player-card:hover {
245
+ transform: translateY(-2px);
246
+ }
247
+
248
+ .player-card-header {
249
+ display: flex;
250
+ justify-content: space-between;
251
+ align-items: center;
252
+ margin-bottom: 1rem;
253
+ }
254
+
255
+ .player-name {
256
+ font-weight: 600;
257
+ font-size: 1.125rem;
258
+ }
259
+
260
+ .player-chip-count {
261
+ display: inline-block;
262
+ padding: 0.25rem 0.5rem;
263
+ border-radius: 0.25rem;
264
+ font-weight: 600;
265
+ background-color: #1e40af;
266
+ color: white;
267
+ }
268
+
269
+ .player-balance {
270
+ font-size: 0.875rem;
271
+ margin-bottom: 0.5rem;
272
+ color: var(--text-secondary);
273
+ }
274
+
275
+ .player-buyins {
276
+ font-size: 0.875rem;
277
+ margin-bottom: 0.25rem;
278
+ }
279
+
280
+ .player-cashouts {
281
+ font-size: 0.875rem;
282
+ margin-bottom: 0.25rem;
283
+ }
284
+
285
+ .player-actions {
286
+ display: flex;
287
+ gap: 0.5rem;
288
+ margin-top: 1rem;
289
+ }
290
+
291
+ .action-btn {
292
+ padding: 0.375rem 0.75rem;
293
+ border-radius: 0.5rem;
294
+ font-size: 0.75rem;
295
+ font-weight: 500;
296
+ cursor: pointer;
297
+ border: none;
298
+ transition: all 0.15s ease;
299
+ display: flex;
300
+ align-items: center;
301
+ gap: 0.25rem;
302
+ }
303
+
304
+ .action-btn i {
305
+ width: 14px;
306
+ height: 14px;
307
+ }
308
+
309
+ .buyin-btn {
310
+ background-color: #e0f2fe;
311
+ color: #0369a1;
312
+ }
313
+
314
+ .buyin-btn:hover {
315
+ background-color: #bae6fd;
316
+ }
317
+
318
+ .cashout-btn {
319
+ background-color: #fce7f3;
320
+ color: #9d174d;
321
+ }
322
+
323
+ .cashout-btn:hover {
324
+ background-color: #fbcfe8;
325
+ }
326
+
327
+ .payment-btn {
328
+ background-color: #e0e7ff;
329
+ color: #4338ca;
330
+ }
331
+
332
+ .payment-btn:hover {
333
+ background-color: #c7d2fe;
334
+ }
335
+
336
+ /* Transactions Table */
337
+ .transactions-table {
338
+ width: 100%;
339
+ border-collapse: collapse;
340
+ background-color: var(--card);
341
+ border-radius: 0.75rem;
342
+ overflow: hidden;
343
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
344
+ }
345
+
346
+ .transactions-table th {
347
+ text-align: left;
348
+ padding: 0.75rem 1.25rem;
349
+ font-size: 0.75rem;
350
+ font-weight: 500;
351
+ color: var(--text-secondary);
352
+ background-color: #f9fafb;
353
+ border-bottom: 1px solid var(--border);
354
+ }
355
+
356
+ .transactions-table td {
357
+ padding: 0.75rem 1.25rem;
358
+ font-size: 0.875rem;
359
+ border-bottom: 1px solid var(--border);
360
+ }
361
+
362
+ .transaction-type {
363
+ display: inline-block;
364
+ padding: 0.25rem 0.5rem;
365
+ border-radius: 0.5rem;
366
+ font-size: 0.75rem;
367
+ font-weight: 500;
368
+ }
369
+
370
+ .type-buyin {
371
+ background-color: #e0f2fe;
372
+ color: #0369a1;
373
+ }
374
+
375
+ .type-cashout {
376
+ background-color: #fce7f3;
377
+ color: #9d174d;
378
+ }
379
+
380
+ .type-payment {
381
+ background-color: #e0e7ff;
382
+ color: #4338ca;
383
+ }
384
+
385
+ .transaction-status {
386
+ display: inline-block;
387
+ padding: 0.25rem 0.5rem;
388
+ border-radius: 0.5rem;
389
+ font-size: 0.75rem;
390
+ font-weight: 500;
391
+ }
392
+
393
+ .status-pending {
394
+ background-color: #fef3c7;
395
+ color: #92400e;
396
+ }
397
+
398
+ .status-paid {
399
+ background-color: #dcfce7;
400
+ color: #166534;
401
+ }
402
+
403
+ /* Action Buttons */
404
+ .btn {
405
+ padding: 0.5rem 1rem;
406
+ border-radius: 0.5rem;
407
+ font-size: 0.875rem;
408
+ font-weight: 500;
409
+ cursor: pointer;
410
+ border: none;
411
+ transition: all 0.15s ease;
412
+ display: flex;
413
+ align-items: center;
414
+ gap: 0.5rem;
415
+ }
416
+
417
+ .btn-primary {
418
+ background-color: var(--primary);
419
+ color: white;
420
+ }
421
+
422
+ .btn-primary:hover {
423
+ background-color: var(--primary-dark);
424
+ }
425
+
426
+ .btn-outline {
427
+ background-color: transparent;
428
+ border: 1px solid var(--border);
429
+ color: var(--text);
430
+ }
431
+
432
+ .btn-outline:hover {
433
+ background-color: #f9fafb;
434
+ }
435
+
436
+ .btn-danger {
437
+ background-color: #fee2e2;
438
+ color: #b91c1c;
439
+ }
440
+
441
+ .btn-danger:hover {
442
+ background-color: #fecaca;
443
+ }
444
+
445
+ /* Action Bar */
446
+ .action-bar {
447
+ display: flex;
448
+ justify-content: space-between;
449
+ align-items: center;
450
+ margin-bottom: 1.5rem;
451
+ background-color: var(--card);
452
+ padding: 1rem;
453
+ border-radius: 0.75rem;
454
+ border: 1px solid var(--border);
455
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
456
+ }
457
+
458
+ /* Session Notes */
459
+ .session-notes {
460
+ background-color: var(--card);
461
+ border-radius: 0.75rem;
462
+ padding: 1.25rem;
463
+ border: 1px solid var(--border);
464
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
465
+ margin-bottom: 1.5rem;
466
+ }
467
+
468
+ .session-notes-title {
469
+ font-weight: 600;
470
+ margin-bottom: 0.75rem;
471
+ }
472
+
473
+ .session-notes-content {
474
+ color: var(--text-secondary);
475
+ font-size: 0.875rem;
476
+ line-height: 1.5;
477
+ }
478
+
479
+ /* Responsive */
480
+ @media (max-width: 768px) {
481
+ .app-container {
482
+ grid-template-columns: 1fr;
483
+ }
484
+
485
+ .sidebar {
486
+ position: fixed;
487
+ top: 0;
488
+ left: 0;
489
+ right: 0;
490
+ bottom: 0;
491
+ transform: translateX(-100%);
492
+ transition: transform 0.3s ease;
493
+ z-index: 100;
494
+ }
495
+
496
+ .sidebar.active {
497
+ transform: translateX(0);
498
+ }
499
+
500
+ .session-stats {
501
+ grid-template-columns: 1fr;
502
+ }
503
+
504
+ .players-grid {
505
+ grid-template-columns: 1fr;
506
+ }
507
+
508
+ .player-actions {
509
+ flex-direction: column;
510
+ }
511
+
512
+ .action-btn {
513
+ width: 100%;
514
+ justify-content: center;
515
+ }
516
+ }
517
+
518
+ /* Utility classes */
519
+ .text-success {
520
+ color: var(--success);
521
+ }
522
+
523
+ .text-danger {
524
+ color: var(--danger);
525
+ }
526
+
527
+ .text-warning {
528
+ color: var(--warning);
529
+ }
530
+
531
+ .text-secondary {
532
+ color: var(--text-secondary);
533
+ }
534
+
535
+ .text-sm {
536
+ font-size: 0.875rem;
537
+ }
538
+
539
+ .font-semibold {
540
+ font-weight: 600;
541
+ }
542
+
543
+ .mb-4 {
544
+ margin-bottom: 1rem;
545
+ }
546
+
547
+ .mt-4 {
548
+ margin-top: 1rem;
549
+ }
550
+
551
+ .flex {
552
+ display: flex;
553
+ }
554
+
555
+ .items-center {
556
+ align-items: center;
557
+ }
558
+
559
+ .justify-between {
560
+ justify-content: space-between;
561
+ }
562
+
563
+ .gap-2 {
564
+ gap: 0.5rem;
565
+ }
566
+
567
+ .ml-auto {
568
+ margin-left: auto;
569
+ }
570
+
571
+ /* Modal */
572
+ .modal-overlay {
573
+ position: fixed;
574
+ top: 0;
575
+ left: 0;
576
+ right: 0;
577
+ bottom: 0;
578
+ background-color: rgba(0, 0, 0, 0.5);
579
+ display: flex;
580
+ justify-content: center;
581
+ align-items: center;
582
+ z-index: 50;
583
+ opacity: 0;
584
+ pointer-events: none;
585
+ transition: opacity 0.2s ease;
586
+ }
587
+
588
+ .modal-overlay.active {
589
+ opacity: 1;
590
+ pointer-events: all;
591
+ }
592
+
593
+ .modal {
594
+ background-color: var(--card);
595
+ border-radius: 0.75rem;
596
+ width: 100%;
597
+ max-width: 500px;
598
+ max-height: 90vh;
599
+ overflow-y: auto;
600
+ transform: translateY(10px);
601
+ transition: transform 0.2s ease;
602
+ }
603
+
604
+ .modal-overlay.active .modal {
605
+ transform: translateY(0);
606
+ }
607
+
608
+ .modal-header {
609
+ padding: 1.5rem;
610
+ border-bottom: 1px solid var(--border);
611
+ display: flex;
612
+ justify-content: space-between;
613
+ align-items: center;
614
+ }
615
+
616
+ .modal-header h3 {
617
+ font-size: 1.25rem;
618
+ font-weight: 600;
619
+ }
620
+
621
+ .modal-close-btn {
622
+ background: none;
623
+ border: none;
624
+ font-size: 1.25rem;
625
+ cursor: pointer;
626
+ color: var(--text-secondary);
627
+ }
628
+
629
+ .modal-body {
630
+ padding: 1.5rem;
631
+ }
632
+
633
+ .form-group {
634
+ margin-bottom: 1.25rem;
635
+ }
636
+
637
+ .form-label {
638
+ display: block;
639
+ margin-bottom: 0.5rem;
640
+ font-weight: 500;
641
+ font-size: 0.875rem;
642
+ }
643
+
644
+ .form-control {
645
+ width: 100%;
646
+ padding: 0.625rem 0.875rem;
647
+ border: 1px solid var(--border);
648
+ border-radius: 0.5rem;
649
+ font-size: 0.875rem;
650
+ }
651
+
652
+ .form-control:focus {
653
+ outline: none;
654
+ border-color: var(--primary);
655
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
656
+ }
657
+
658
+ .modal-footer {
659
+ padding: 1.25rem 1.5rem;
660
+ border-top: 1px solid var(--border);
661
+ display: flex;
662
+ justify-content: flex-end;
663
+ gap: 0.75rem;
664
+ }
665
+
666
+ /* New Player Modal */
667
+ .add-player-btn {
668
+ display: flex;
669
+ align-items: center;
670
+ justify-content: center;
671
+ height: 100%;
672
+ min-height: 150px;
673
+ background-color: var(--card);
674
+ border: 1px dashed var(--border);
675
+ border-radius: 0.75rem;
676
+ cursor: pointer;
677
+ transition: all 0.15s ease;
678
+ }
679
+
680
+ .add-player-btn:hover {
681
+ background-color: #f9fafb;
682
+ border-color: var(--primary);
683
+ }
684
+
685
+ .add-player-btn-content {
686
+ text-align: center;
687
+ color: var(--text-secondary);
688
+ }
689
+
690
+ .add-player-btn i {
691
+ font-size: 1.5rem;
692
+ margin-bottom: 0.5rem;
693
+ }
694
+ </style>
695
+ </head>
696
+ <body>
697
+ <div class="app-container">
698
+ <!-- Sidebar -->
699
+ <div class="sidebar">
700
+ <div class="sidebar-header">
701
+ <h1><i data-lucide="dollar-sign"></i> Poker Manager</h1>
702
+ </div>
703
+ <div class="sidebar-nav">
704
+ <div class="nav-item">
705
+ <i data-lucide="layout-dashboard"></i>
706
+ Dashboard
707
+ </div>
708
+ <div class="nav-item active">
709
+ <i data-lucide="calendar-clock"></i>
710
+ Session
711
+ </div>
712
+ <div class="nav-item">
713
+ <i data-lucide="users"></i>
714
+ Players
715
+ </div>
716
+ <div class="nav-item">
717
+ <i data-lucide="credit-card"></i>
718
+ Transactions
719
+ </div>
720
+ <div class="nav-item">
721
+ <i data-lucide="banknote"></i>
722
+ Rake & Jackpot
723
+ </div>
724
+ <div class="nav-item">
725
+ <i data-lucide="line-chart"></i>
726
+ Reports
727
+ </div>
728
+ </div>
729
+ <div class="sidebar-nav mt-8">
730
+ <div class="nav-item">
731
+ <i data-lucide="settings"></i>
732
+ Settings
733
+ </div>
734
+ <div class="nav-item">
735
+ <i data-lucide="help-circle"></i>
736
+ Help
737
+ </div>
738
+ </div>
739
+ </div>
740
+
741
+ <!-- Main Content -->
742
+ <div class="main-content">
743
+ <!-- Header -->
744
+ <div class="header">
745
+ <div>
746
+ <h2>Session: Midweek Tournament</h2>
747
+ </div>
748
+ <div class="user-profile">
749
+ <div class="user-avatar">JS</div>
750
+ <span>John Smith</span>
751
+ <i data-lucide="chevron-down"></i>
752
+ </div>
753
+ </div>
754
+
755
+ <!-- Session Header -->
756
+ <div class="session-header">
757
+ <div>
758
+ <div class="session-title">Midweek Tournament</div>
759
+ <div class="text-secondary text-sm mt-1">Started: Today, 7:30 PM</div>
760
+ </div>
761
+ <div class="session-status active">
762
+ <i data-lucide="activity"></i> Active
763
+ </div>
764
+ </div>
765
+
766
+ <!-- Session Stats -->
767
+ <div class="session-stats">
768
+ <div class="session-stat-card">
769
+ <div class="session-stat-title">
770
+ <i data-lucide="users"></i>
771
+ Players
772
+ </div>
773
+ <div class="session-stat-value">8</div>
774
+ <div class="session-stat-delta delta-up">
775
+ <i data-lucide="trending-up"></i>
776
+ <span>2 new this hour</span>
777
+ </div>
778
+ </div>
779
+ <div class="session-stat-card">
780
+ <div class="session-stat-title">
781
+ <i data-lucide="dollar-sign"></i>
782
+ Total Buy-ins
783
+ </div>
784
+ <div class="session-stat-value">$3,200</div>
785
+ <div class="session-stat-delta delta-up">
786
+ <i data-lucide="trending-up"></i>
787
+ <span>$650 last hour</span>
788
+ </div>
789
+ </div>
790
+ <div class="session-stat-card">
791
+ <div class="session-stat-title">
792
+ <i data-lucide="wallet"></i>
793
+ Total Cashouts
794
+ </div>
795
+ <div class="session-stat-value">$1,500</div>
796
+ <div class="session-stat-delta delta-up">
797
+ <i data-lucide="trending-up"></i>
798
+ <span>$300 last hour</span>
799
+ </div>
800
+ </div>
801
+ <div class="session-stat-card">
802
+ <div class="session-stat-title">
803
+ <i data-lucide="clock"></i>
804
+ Rake Collected
805
+ </div>
806
+ <div class="session-stat-value">$320</div>
807
+ <div class="session-stat-delta delta-up">
808
+ <i data-lucide="trending-up"></i>
809
+ <span>$65 last hour</span>
810
+ </div>
811
+ </div>
812
+ </div>
813
+
814
+ <!-- Action Bar -->
815
+ <div class="action-bar">
816
+ <div class="flex items-center gap-2">
817
+ <button class="btn btn-primary">
818
+ <i data-lucide="plus"></i>
819
+ Add Player
820
+ </button>
821
+ <button class="btn btn-outline">
822
+ <i data-lucide="printer"></i>
823
+ Print Receipt
824
+ </button>
825
+ </div>
826
+ <div class="flex items-center gap-2">
827
+ <button class="btn btn-outline">
828
+ <i data-lucide="settings"></i>
829
+ Session Settings
830
+ </button>
831
+ <button class="btn btn-danger">
832
+ <i data-lucide="power"></i>
833
+ End Session
834
+ </button>
835
+ </div>
836
+ </div>
837
+
838
+ <!-- Session Notes -->
839
+ <div class="session-notes">
840
+ <div class="session-notes-title">
841
+ <i data-lucide="file-text"></i> Session Notes
842
+ </div>
843
+ <div class="session-notes-content">
844
+ This is a medium-stakes tournament with 30-minute blinds. Rebuys allowed for first 3 levels.
845
+ Special prizes for top 3 players. Please track any special bounties or side pots.
846
+ </div>
847
+ </div>
848
+
849
+ <!-- Players Section -->
850
+ <div class="section-title">
851
+ <i data-lucide="users"></i>
852
+ Players (8)
853
+ </div>
854
+ <div class="players-grid">
855
+ <!-- Player Card 1 -->
856
+ <div class="player-card">
857
+ <div class="player-card-header">
858
+ <div class="player-name">Michael Johnson</div>
859
+ <div class="player-chip-count">12,500</div>
860
+ </div>
861
+ <div class="player-balance">
862
+ Current Balance: <span class="font-semibold text-success">+$450</span>
863
+ </div>
864
+ <div class="player-buyins">
865
+ <i data-lucide="arrow-down" class="text-success" style="width: 14px; height: 14px;"></i>
866
+ Buy-ins: <span class="font-semibold">$500</span> (Cash)
867
+ </div>
868
+ <div class="player-cashouts">
869
+ <i data-lucide="arrow-up" class="text-danger" style="width: 14px; height: 14px;"></i>
870
+ Cashouts: <span class="font-semibold">$50</span> (Cash)
871
+ </div>
872
+ <div class="player-actions">
873
+ <button class="action-btn buyin-btn">
874
+ <i data-lucide="arrow-down"></i>
875
+ Buy-in
876
+ </button>
877
+ <button class="action-btn cashout-btn">
878
+ <i data-lucide="arrow-up"></i>
879
+ Cashout
880
+ </button>
881
+ <button class="action-btn payment-btn">
882
+ <i data-lucide="credit-card"></i>
883
+ Payment
884
+ </button>
885
+ </div>
886
+ </div>
887
+
888
+ <!-- Player Card 2 -->
889
+ <div class="player-card">
890
+ <div class="player-card-header">
891
+ <div class="player-name">Sarah Williams</div>
892
+ <div class="player-chip-count">8,250</div>
893
+ </div>
894
+ <div class="player-balance">
895
+ Current Balance: <span class="font-semibold text-danger">-$1,250</span>
896
+ </div>
897
+ <div class="player-buyins">
898
+ <i data-lucide="arrow-down" class="text-success" style="width: 14px; height: 14px;"></i>
899
+ Buy-ins: <span class="font-semibold">$1,250</span> (Credit)
900
+ </div>
901
+ <div class="player-cashouts">
902
+ <i data-lucide="arrow-up" class="text-danger" style="width: 14px; height: 14px;"></i>
903
+ Cashouts: <span class="font-semibold">$2,500</span> (Pending)
904
+ </div>
905
+ <div class="player-actions">
906
+ <button class="action-btn buyin-btn">
907
+ <i data-lucide="arrow-down"></i>
908
+ Buy-in
909
+ </button>
910
+ <button class="action-btn cashout-btn">
911
+ <i data-lucide="arrow-up"></i>
912
+ Cashout
913
+ </button>
914
+ <button class="action-btn payment-btn">
915
+ <i data-lucide="credit-card"></i>
916
+ Payment
917
+ </button>
918
+ </div>
919
+ </div>
920
+
921
+ <!-- Player Card 3 -->
922
+ <div class="player-card">
923
+ <div class="player-card-header">
924
+ <div class="player-name">Robert Chen</div>
925
+ <div class="player-chip-count">15,800</div>
926
+ </div>
927
+ <div class="player-balance">
928
+ Current Balance: <span class="font-semibold text-success">+$650</span>
929
+ </div>
930
+ <div class="player-buyins">
931
+ <i data-lucide="arrow-down" class="text-success" style="width: 14px; height: 14px;"></i>
932
+ Buy-ins: <span class="font-semibold">$650</span> (Bank)
933
+ </div>
934
+ <div class="player-cashouts">
935
+ <i data-lucide="arrow-up" class="text-danger" style="width: 14px; height: 14px;"></i>
936
+ Cashouts: <span class="font-semibold">$0</span>
937
+ </div>
938
+ <div class="player-actions">
939
+ <button class="action-btn buyin-btn">
940
+ <i data-lucide="arrow-down"></i>
941
+ Buy-in
942
+ </button>
943
+ <button class="action-btn cashout-btn">
944
+ <i data-lucide="arrow-up"></i>
945
+ Cashout
946
+ </button>
947
+ <button class="action-btn payment-btn">
948
+ <i data-lucide="credit-card"></i>
949
+ Payment
950
+ </button>
951
+ </div>
952
+ </div>
953
+
954
+ <!-- Player Card 4 -->
955
+ <div class="player-card">
956
+ <div class="player-card-header">
957
+ <div class="player-name">Emily Parker</div>
958
+ <div class="player-chip-count">5,300</div>
959
+ </div>
960
+ <div class="player-balance">
961
+ Current Balance: <span class="font-semibold text-success">+$300</span>
962
+ </div>
963
+ <div class="player-buyins">
964
+ <i data-lucide="arrow-down" class="text-success" style="width: 14px; height: 14px;"></i>
965
+ Buy-ins: <span class="font-semibold">$300</span> (Cash)
966
+ </div>
967
+ <div class="player-cashouts">
968
+ <i data-lucide="arrow-up" class="text-danger" style="width: 14px; height: 14px;"></i>
969
+ Cashouts: <span class="font-semibold">$0</span>
970
+ </div>
971
+ <div class="player-actions">
972
+ <button class="action-btn buyin-btn">
973
+ <i data-lucide="arrow-down"></i>
974
+ Buy-in
975
+ </button>
976
+ <button class="action-btn cashout-btn">
977
+ <i data-lucide="arrow-up"></i>
978
+ Cashout
979
+ </button>
980
+ <button class="action-btn payment-btn">
981
+ <i data-lucide="credit-card"></i>
982
+ Payment
983
+ </button>
984
+ </div>
985
+ </div>
986
+
987
+ <!-- Player Card 5 -->
988
+ <div class="player-card">
989
+ <div class="player-card-header">
990
+ <div class="player-name">David Kim</div>
991
+ <div class="player-chip-count">22,100</div>
992
+ </div>
993
+ <div class="player-balance">
994
+ Current Balance: <span class="font-semibold text-success">+$800</span>
995
+ </div>
996
+ <div class="player-buyins">
997
+ <i data-lucide="arrow-down" class="text-success" style="width: 14px; height: 14px;"></i>
998
+ Buy-ins: <span class="font-semibold">$800</span> (Cash)
999
+ </div>
1000
+ <div class="player-cashouts">
1001
+ <i data-lucide="arrow-up" class="text-danger" style="width: 14px; height: 14px;"></i>
1002
+ Cashouts: <span class="font-semibold">$800</span> (Cash)
1003
+ </div>
1004
+ <div class="player-actions">
1005
+ <button class="action-btn buyin-btn">
1006
+ <i data-lucide="arrow-down"></i>
1007
+ Buy-in
1008
+ </button>
1009
+ <button class="action-btn cashout-btn">
1010
+ <i data-lucide="arrow-up"></i>
1011
+ Cashout
1012
+ </button>
1013
+ <button class="action-btn payment-btn">
1014
+ <i data-lucide="credit-card"></i>
1015
+ Payment
1016
+ </button>
1017
+ </div>
1018
+ </div>
1019
+
1020
+ <!-- Player Card 6 -->
1021
+ <div class="player-card">
1022
+ <div class="player-card-header">
1023
+ <div class="player-name">Jessica Brown</div>
1024
+ <div class="player-chip-count">7,400</div>
1025
+ </div>
1026
+ <div class="player-balance">
1027
+ Current Balance: <span class="font-semibold text-danger">-$200</span>
1028
+ </div>
1029
+ <div class="player-buyins">
1030
+ <i data-lucide="arrow-down" class="text-success" style="width: 14px; height: 14px;"></i>
1031
+ Buy-ins: <span class="font-semibold">$500</span> (Credit)
1032
+ </div>
1033
+ <div class="player-cashouts">
1034
+ <i data-lucide="arrow-up" class="text-danger" style="width: 14px; height: 14px;"></i>
1035
+ Cashouts: <span class="font-semibold">$700</span> (Credit)
1036
+ </div>
1037
+ <div class="player-actions">
1038
+ <button class="action-btn buyin-btn">
1039
+ <i data-lucide="arrow-down"></i>
1040
+ Buy-in
1041
+ </button>
1042
+ <button class="action-btn cashout-btn">
1043
+ <i data-lucide="arrow-up"></i>
1044
+ Cashout
1045
+ </button>
1046
+ <button class="action-btn payment-btn">
1047
+ <i data-lucide="credit-card"></i>
1048
+ Payment
1049
+ </button>
1050
+ </div>
1051
+ </div>
1052
+
1053
+ <!-- Player Card 7 -->
1054
+ <div class="player-card">
1055
+ <div class="player-card-header">
1056
+ <div class="player-name">Alex Turner</div>
1057
+ <div class="player-chip-count">10,200</div>
1058
+ </div>
1059
+ <div class="player-balance">
1060
+ Current Balance: <span class="font-semibold text-success">+$400</span>
1061
+ </div>
1062
+ <div class="player-buyins">
1063
+ <i data-lucide="arrow-down" class="text-success" style="width: 14px; height: 14px;"></i>
1064
+ Buy-ins: <span class="font-semibold">$400</span> (Cash)
1065
+ </div>
1066
+ <div class="player-cashouts">
1067
+ <i data-lucide="arrow-up" class="text-danger" style="width: 14px; height: 14px;"></i>
1068
+ Cashouts: <span class="font-semibold">$0</span>
1069
+ </div>
1070
+ <div class="player-actions">
1071
+ <button class="action-btn buyin-btn">
1072
+ <i data-lucide="arrow-down"></i>
1073
+ Buy-in
1074
+ </button>
1075
+ <button class="action-btn cashout-btn">
1076
+ <i data-lucide="arrow-up"></i>
1077
+ Cashout
1078
+ </button>
1079
+ <button class="action-btn payment-btn">
1080
+ <i data-lucide="credit-card"></i>
1081
+ Payment
1082
+ </button>
1083
+ </div>
1084
+ </div>
1085
+
1086
+ <!-- Player Card 8 -->
1087
+ <div class="player-card">
1088
+ <div class="player-card-header">
1089
+ <div class="player-name">Maria Garcia</div>
1090
+ <div class="player-chip-count">18,750</div>
1091
+ </div>
1092
+ <div class="player-balance">
1093
+ Current Balance: <span class="font-semibold text-success">+$1,200</span>
1094
+ </div>
1095
+ <div class="player-buyins">
1096
+ <i data-lucide="arrow-down" class="text-success" style="width: 14px; height: 14px;"></i>
1097
+ Buy-ins: <span class="font-semibold">$1,200</span> (Credit)
1098
+ </div>
1099
+ <div class="player-cashouts">
1100
+ <i data-lucide="arrow-up" class="text-danger" style="width: 14px; height: 14px;"></i>
1101
+ Cashouts: <span class="font-semibold">$0</span>
1102
+ </div>
1103
+ <div class="player-actions">
1104
+ <button class="action-btn buyin-btn">
1105
+ <i data-lucide="arrow-down"></i>
1106
+ Buy-in
1107
+ </button>
1108
+ <button class="action-btn cashout-btn">
1109
+ <i data-lucide="arrow-up"></i>
1110
+ Cashout
1111
+ </button>
1112
+ <button class="action-btn payment-btn">
1113
+ <i data-lucide="credit-card"></i>
1114
+ Payment
1115
+ </button>
1116
+ </div>
1117
+ </div>
1118
+
1119
+ <!-- Add Player Card -->
1120
+ <div class="add-player-btn" id="addPlayerBtn">
1121
+ <div class="add-player-btn-content">
1122
+ <i data-lucide="user-plus"></i>
1123
+ <div>Add New Player</div>
1124
+ </div>
1125
+ </div>
1126
+ </div>
1127
+
1128
+ <!-- Transactions Section -->
1129
+ <div class="section-title">
1130
+ <i data-lucide="list"></i>
1131
+ Session Transactions
1132
+ </div>
1133
+ <table class="transactions-table">
1134
+ <thead>
1135
+ <tr>
1136
+ <th>Player</th>
1137
+ <th>Type</th>
1138
+ <th>Amount</th>
1139
+ <th>Payment Method</th>
1140
+ <th>Status</th>
1141
+ <th>Time</th>
1142
+ </tr>
1143
+ </thead>
1144
+ <tbody>
1145
+ <tr>
1146
+ <td class="font-semibold">Michael Johnson</td>
1147
+ <td><span class="transaction-type type-buyin">Buy-in</span></td>
1148
+ <td class="font-semibold">$500.00</td>
1149
+ <td>Cash</td>
1150
+ <td><span class="transaction-status status-paid">Paid</span></td>
1151
+ <td class="text-secondary">5 min ago</td>
1152
+ </tr>
1153
+ <tr>
1154
+ <td class="font-semibold">Sarah Williams</td>
1155
+ <td><span class="transaction-type type-cashout">Cashout</span></td>
1156
+ <td class="font-semibold">$1,250.00</td>
1157
+ <td>Credit</td>
1158
+ <td><span class="transaction-status status-pending">Pending</span></td>
1159
+ <td class="text-secondary">12 min ago</td>
1160
+ </tr>
1161
+ <tr>
1162
+ <td class="font-semibold">Robert Chen</td>
1163
+ <td><span class="transaction-type type-payment">Payment</span></td>
1164
+ <td class="font-semibold">$650.00</td>
1165
+ <td>Bank Transfer</td>
1166
+ <td><span class="transaction-status status-paid">Paid</span></td>
1167
+ <td class="text-secondary">23 min ago</td>
1168
+ </tr>
1169
+ <tr>
1170
+ <td class="font-semibold">Emily Parker</td>
1171
+ <td><span class="transaction-type type-buyin">Buy-in</span></td>
1172
+ <td class="font-semibold">$300.00</td>
1173
+ <td>Cash</td>
1174
+ <td><span class="transaction-status status-paid">Paid</span></td>
1175
+ <td class="text-secondary">38 min ago</td>
1176
+ </tr>
1177
+ <tr>
1178
+ <td class="font-semibold">David Kim</td>
1179
+ <td><span class="transaction-type type-cashout">Cashout</span></td>
1180
+ <td class="font-semibold">$800.00</td>
1181
+ <td>Cash</td>
1182
+ <td><span class="transaction-status status-paid">Paid</span></td>
1183
+ <td class="text-secondary">1 hour ago</td>
1184
+ </tr>
1185
+ <tr>
1186
+ <td class="font-semibold">Jessica Brown</td>
1187
+ <td><span class="transaction-type type-buyin">Buy-in</span></td>
1188
+ <td class="font-semibold">$500.00</td>
1189
+ <td>Credit</td>
1190
+ <td><span class="transaction-status status-paid">Paid</span></td>
1191
+ <td class="text-secondary">1 hour 15 min ago</td>
1192
+ </tr>
1193
+ <tr>
1194
+ <td class="font-semibold">Alex Turner</td>
1195
+ <td><span class="transaction-type type-buyin">Buy-in</span></td>
1196
+ <td class="font-semibold">$400.00</td>
1197
+ <td>Cash</td>
1198
+ <td><span class="transaction-status status-paid">Paid</span></td>
1199
+ <td class="text-secondary">1 hour 30 min ago</td>
1200
+ </tr>
1201
+ <tr>
1202
+ <td class="font-semibold">Maria Garcia</td>
1203
+ <td><span class="transaction-type type-buyin">Buy-in</span></td>
1204
+ <td class="font-semibold">$1,200.00</td>
1205
+ <td>Credit</td>
1206
+ <td><span class="transaction-status status-paid">Paid</span></td>
1207
+ <td class="text-secondary">1 hour 45 min ago</td>
1208
+ </tr>
1209
+ </tbody>
1210
+ </table>
1211
+ </div>
1212
+ </div>
1213
+
1214
+ <!-- Add Player Modal -->
1215
+ <div class="modal-overlay" id="addPlayerModal">
1216
+ <div class="modal">
1217
+ <div class="modal-header">
1218
+ <h3>Add New Player</h3>
1219
+ <button class="modal-close-btn" id="closePlayerModal">
1220
+ <i data-lucide="x"></i>
1221
+ </button>
1222
+ </div>
1223
+ <div class="modal-body">
1224
+ <div class="form-group">
1225
+ <label class="form-label">Player Name</label>
1226
+ <input type="text" class="form-control" placeholder="Enter player name">
1227
+ </div>
1228
+ <div class="form-group">
1229
+ <label class="form-label">Initial Buy-in Amount</label>
1230
+ <input type="number" class="form-control" placeholder="0.00">
1231
+ </div>
1232
+ <div class="form-group">
1233
+ <label class="form-label">Payment Method</label>
1234
+ <select class="form-control">
1235
+ <option value="">Select payment method</option>
1236
+ <option value="cash">Cash</option>
1237
+ <option value="credit">Credit</option>
1238
+ <option value="bank">Bank Transfer</option>
1239
+ <option value="other">Other</option>
1240
+ </select>
1241
+ </div>
1242
+ <div class="form-group">
1243
+ <label class="form-label">Notes (Optional)</label>
1244
+ <textarea class="form-control" rows="2" placeholder="Any notes about this player..."></textarea>
1245
+ </div>
1246
+ </div>
1247
+ <div class="modal-footer">
1248
+ <button class="btn btn-outline">Cancel</button>
1249
+ <button class="btn btn-primary">Add Player</button>
1250
+ </div>
1251
+ </div>
1252
+ </div>
1253
+
1254
+ <!-- Buy-in Modal -->
1255
+ <div class="modal-overlay" id="buyinModal">
1256
+ <div class="modal">
1257
+ <div class="modal-header">
1258
+ <h3>Record Buy-in</h3>
1259
+ <button class="modal-close-btn" id="closeBuyinModal">
1260
+ <i data-lucide="x"></i>
1261
+ </button>
1262
+ </div>
1263
+ <div class="modal-body">
1264
+ <div class="form-group">
1265
+ <label class="form-label">Player</label>
1266
+ <select class="form-control">
1267
+ <option value="">Select player</option>
1268
+ <option value="michael">Michael Johnson</option>
1269
+ <option value="sarah">Sarah Williams</option>
1270
+ <option value="robert">Robert Chen</option>
1271
+ <option value="emily">Emily Parker</option>
1272
+ <option value="david">David Kim</option>
1273
+ </select>
1274
+ </div>
1275
+ <div class="form-group">
1276
+ <label class="form-label">Amount</label>
1277
+ <input type="number" class="form-control" placeholder="0.00">
1278
+ </div>
1279
+ <div class="form-group">
1280
+ <label class="form-label">Payment Method</label>
1281
+ <select class="form-control">
1282
+ <option value="">Select payment method</option>
1283
+ <option value="cash">Cash</option>
1284
+ <option value="credit">Credit</option>
1285
+ <option value="bank">Bank Transfer</option>
1286
+ <option value="other">Other</option>
1287
+ </select>
1288
+ </div>
1289
+ <div class="form-group">
1290
+ <label class="form-label">Notes (Optional)</label>
1291
+ <textarea class="form-control" rows="2" placeholder="Any notes about this transaction..."></textarea>
1292
+ </div>
1293
+ </div>
1294
+ <div class="modal-footer">
1295
+ <button class="btn btn-outline">Cancel</button>
1296
+ <button class="btn btn-primary">Record Buy-in</button>
1297
+ </div>
1298
+ </div>
1299
+ </div>
1300
+
1301
+ <script>
1302
+ // Initialize Lucide icons
1303
+ lucide.createIcons();
1304
+
1305
+ // Add Player Modal
1306
+ const addPlayerModal = document.getElementById('addPlayerModal');
1307
+ const addPlayerBtn = document.getElementById('addPlayerBtn');
1308
+ const closePlayerModal = document.getElementById('closePlayerModal');
1309
+
1310
+ // Function to open modal
1311
+ function openAddPlayerModal() {
1312
+ addPlayerModal.classList.add('active');
1313
+ document.body.style.overflow = 'hidden';
1314
+ }
1315
+
1316
+ // Function to close modal
1317
+ function closeAddPlayerModal() {
1318
+ addPlayerModal.classList.remove('active');
1319
+ document.body.style.overflow = 'auto';
1320
+ }
1321
+
1322
+ // Open modal when clicking Add Player button
1323
+ addPlayerBtn.addEventListener('click', openAddPlayerModal);
1324
+
1325
+ // Close modal when clicking outside of it
1326
+ addPlayerModal.addEventListener('click', function(e) {
1327
+ if (e.target === addPlayerModal) {
1328
+ closeAddPlayerModal();
1329
+ }
1330
+ });
1331
+
1332
+ // Close modal when clicking close button
1333
+ closePlayerModal.addEventListener('click', closeAddPlayerModal);
1334
+
1335
+ // Buy-in Modal
1336
+ const buyinModal = document.getElementById('buyinModal');
1337
+ const closeBuyinModal = document.getElementById('closeBuyinModal');
1338
+
1339
+ // Function to open modal
1340
+ function openBuyinModal() {
1341
+ buyinModal.classList.add('active');
1342
+ document.body.style.overflow = 'hidden';
1343
+ }
1344
+
1345
+ // Function to close modal
1346
+ function closeBuyinModal() {
1347
+ buyinModal.classList.remove('active');
1348
+ document.body.style.overflow = 'auto';
1349
+ }
1350
+
1351
+ // Close modal when clicking outside of it
1352
+ buyinModal.addEventListener('click', function(e) {
1353
+ if (e.target === buyinModal) {
1354
+ closeBuyinModal();
1355
+ }
1356
+ });
1357
+
1358
+ // Close modal when clicking close button
1359
+ closeBuyinModal.addEventListener('click', closeBuyinModal);
1360
+
1361
+ // In a real app, you would also handle:
1362
+ // 1. Form submissions for adding players and transactions
1363
+ // 2. API calls to fetch session data
1364
+ // 3. Dynamic updates to player cards and stats
1365
+ // 4. Session state management
1366
+ // 5. More complex interactions and validation
1367
+ </script>
1368
+ <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>
1369
+ </html>