Hugging Face's logo

Spaces:
azimpolcu
/
anycoder-8b9c189c
Running

App Files Community
azimpolcu commited on
Commit
fcee36c
·
verified ·
1 Parent(s): 0f143a6

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1051 -19
index.html CHANGED
@@ -1,19 +1,1051 @@
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, maximum-scale=1.0, user-scalable=no">
6
+ <title>Fortuna Royale - Ultimate Casino Suite</title>
7
+ <!-- Phosphor Icons -->
8
+ <script src="https://unpkg.com/@phosphor-icons/web"></script>
9
+ <!-- Google Fonts -->
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
11
+
12
+ <style>
13
+ :root {
14
+ --bg-dark: #0f1115;
15
+ --bg-panel: #181b21;
16
+ --bg-card: #232730;
17
+ --primary: #ffd700; /* Gold */
18
+ --primary-glow: rgba(255, 215, 0, 0.4);
19
+ --accent: #7c3aed; /* Purple */
20
+ --danger: #ef4444;
21
+ --success: #10b981;
22
+ --text-main: #ffffff;
23
+ --text-muted: #9ca3af;
24
+ --border: #2d3342;
25
+ --radius-md: 12px;
26
+ --radius-lg: 20px;
27
+ --nav-height: 70px;
28
+ --header-height: 60px;
29
+ --font-main: 'Inter', sans-serif;
30
+ --font-display: 'Playfair Display', serif;
31
+ }
32
+
33
+ * {
34
+ box-sizing: border-box;
35
+ -webkit-tap-highlight-color: transparent;
36
+ }
37
+
38
+ body {
39
+ margin: 0;
40
+ padding: 0;
41
+ background-color: var(--bg-dark);
42
+ color: var(--text-main);
43
+ font-family: var(--font-main);
44
+ height: 100vh;
45
+ overflow: hidden; /* App-like feel */
46
+ display: flex;
47
+ flex-direction: column;
48
+ }
49
+
50
+ /* --- Utilities --- */
51
+ .hidden { display: none !important; }
52
+ .flex { display: flex; }
53
+ .flex-col { flex-direction: column; }
54
+ .items-center { align-items: center; }
55
+ .justify-between { justify-content: space-between; }
56
+ .justify-center { justify-content: center; }
57
+ .gap-2 { gap: 0.5rem; }
58
+ .gap-4 { gap: 1rem; }
59
+ .w-full { width: 100%; }
60
+ .text-center { text-align: center; }
61
+
62
+ button {
63
+ border: none;
64
+ outline: none;
65
+ cursor: pointer;
66
+ font-family: inherit;
67
+ transition: all 0.2s ease;
68
+ }
69
+
70
+ .btn {
71
+ padding: 10px 20px;
72
+ border-radius: var(--radius-md);
73
+ font-weight: 600;
74
+ font-size: 0.9rem;
75
+ display: inline-flex;
76
+ align-items: center;
77
+ justify-content: center;
78
+ gap: 8px;
79
+ }
80
+
81
+ .btn-primary {
82
+ background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%);
83
+ color: #000;
84
+ box-shadow: 0 4px 15px var(--primary-glow);
85
+ }
86
+ .btn-primary:active { transform: scale(0.96); }
87
+
88
+ .btn-secondary {
89
+ background: var(--bg-card);
90
+ color: var(--text-main);
91
+ border: 1px solid var(--border);
92
+ }
93
+ .btn-secondary:active { background: var(--border); }
94
+
95
+ .btn-icon {
96
+ width: 40px;
97
+ height: 40px;
98
+ border-radius: 50%;
99
+ background: var(--bg-card);
100
+ color: var(--text-main);
101
+ display: flex;
102
+ align-items: center;
103
+ justify-content: center;
104
+ font-size: 1.2rem;
105
+ }
106
+
107
+ /* --- Layout --- */
108
+ #app-container {
109
+ flex: 1;
110
+ position: relative;
111
+ overflow-y: auto;
112
+ overflow-x: hidden;
113
+ scroll-behavior: smooth;
114
+ padding-bottom: calc(var(--nav-height) + 20px);
115
+ }
116
+
117
+ header {
118
+ position: sticky;
119
+ top: 0;
120
+ z-index: 50;
121
+ height: var(--header-height);
122
+ background: rgba(15, 17, 21, 0.9);
123
+ backdrop-filter: blur(10px);
124
+ border-bottom: 1px solid var(--border);
125
+ display: flex;
126
+ align-items: center;
127
+ justify-content: space-between;
128
+ padding: 0 16px;
129
+ }
130
+
131
+ .logo {
132
+ font-family: var(--font-display);
133
+ font-size: 1.4rem;
134
+ color: var(--primary);
135
+ text-shadow: 0 0 10px var(--primary-glow);
136
+ }
137
+
138
+ .wallet-pill {
139
+ background: var(--bg-card);
140
+ padding: 6px 12px;
141
+ border-radius: 20px;
142
+ border: 1px solid var(--border);
143
+ display: flex;
144
+ align-items: center;
145
+ gap: 6px;
146
+ font-size: 0.9rem;
147
+ font-weight: 600;
148
+ }
149
+
150
+ /* --- Bottom Nav --- */
151
+ nav {
152
+ position: fixed;
153
+ bottom: 0;
154
+ left: 0;
155
+ width: 100%;
156
+ height: var(--nav-height);
157
+ background: rgba(24, 27, 33, 0.95);
158
+ backdrop-filter: blur(10px);
159
+ border-top: 1px solid var(--border);
160
+ display: flex;
161
+ justify-content: space-around;
162
+ align-items: center;
163
+ z-index: 100;
164
+ padding-bottom: env(safe-area-inset-bottom);
165
+ }
166
+
167
+ .nav-item {
168
+ display: flex;
169
+ flex-direction: column;
170
+ align-items: center;
171
+ gap: 4px;
172
+ color: var(--text-muted);
173
+ font-size: 0.75rem;
174
+ background: none;
175
+ }
176
+
177
+ .nav-item i {
178
+ font-size: 1.5rem;
179
+ margin-bottom: 2px;
180
+ }
181
+
182
+ .nav-item.active {
183
+ color: var(--primary);
184
+ }
185
+
186
+ /* --- Screens --- */
187
+ .screen {
188
+ padding: 20px;
189
+ animation: fadeIn 0.3s ease;
190
+ }
191
+
192
+ @keyframes fadeIn {
193
+ from { opacity: 0; transform: translateY(10px); }
194
+ to { opacity: 1; transform: translateY(0); }
195
+ }
196
+
197
+ /* --- Home Screen --- */
198
+ .hero-banner {
199
+ background: linear-gradient(45deg, var(--bg-card), var(--accent));
200
+ border-radius: var(--radius-lg);
201
+ padding: 20px;
202
+ margin-bottom: 24px;
203
+ position: relative;
204
+ overflow: hidden;
205
+ border: 1px solid rgba(124, 58, 237, 0.3);
206
+ }
207
+
208
+ .hero-banner::after {
209
+ content: '';
210
+ position: absolute;
211
+ top: 0; left: 0; right: 0; bottom: 0;
212
+ background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjIiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wNSkiLz48L3N2Zz4=');
213
+ opacity: 0.3;
214
+ }
215
+
216
+ .hero-title { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: 8px; }
217
+ .hero-desc { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 16px; }
218
+
219
+ .section-title {
220
+ font-size: 1.1rem;
221
+ font-weight: 700;
222
+ margin: 24px 0 16px 0;
223
+ display: flex;
224
+ justify-content: space-between;
225
+ align-items: center;
226
+ }
227
+ .section-title a { font-size: 0.8rem; color: var(--accent); text-decoration: none; }
228
+
229
+ .category-scroll {
230
+ display: flex;
231
+ gap: 12px;
232
+ overflow-x: auto;
233
+ padding-bottom: 10px;
234
+ scrollbar-width: none;
235
+ }
236
+ .category-scroll::-webkit-scrollbar { display: none; }
237
+
238
+ .cat-chip {
239
+ background: var(--bg-card);
240
+ padding: 8px 16px;
241
+ border-radius: 20px;
242
+ white-space: nowrap;
243
+ border: 1px solid var(--border);
244
+ font-size: 0.85rem;
245
+ }
246
+ .cat-chip.active { background: var(--accent); border-color: var(--accent); color: white; }
247
+
248
+ .game-grid {
249
+ display: grid;
250
+ grid-template-columns: repeat(2, 1fr);
251
+ gap: 16px;
252
+ }
253
+
254
+ .game-card {
255
+ background: var(--bg-card);
256
+ border-radius: var(--radius-md);
257
+ overflow: hidden;
258
+ border: 1px solid var(--border);
259
+ position: relative;
260
+ }
261
+
262
+ .game-card-img {
263
+ width: 100%;
264
+ aspect-ratio: 1;
265
+ object-fit: cover;
266
+ background: #2d3342;
267
+ }
268
+
269
+ .game-card-info {
270
+ padding: 12px;
271
+ }
272
+
273
+ .game-card-title {
274
+ font-weight: 600;
275
+ font-size: 0.95rem;
276
+ margin-bottom: 4px;
277
+ white-space: nowrap;
278
+ overflow: hidden;
279
+ text-overflow: ellipsis;
280
+ }
281
+
282
+ .game-card-rtp {
283
+ font-size: 0.75rem;
284
+ color: var(--success);
285
+ }
286
+
287
+ /* --- Wallet Screen --- */
288
+ .wallet-card {
289
+ background: linear-gradient(135deg, #1e293b, #0f172a);
290
+ border: 1px solid var(--border);
291
+ border-radius: var(--radius-lg);
292
+ padding: 24px;
293
+ text-align: center;
294
+ margin-bottom: 20px;
295
+ box-shadow: 0 10px 30px rgba(0,0,0,0.3);
296
+ }
297
+
298
+ .balance-amount {
299
+ font-size: 2.5rem;
300
+ font-weight: 800;
301
+ font-family: var(--font-display);
302
+ color: var(--primary);
303
+ margin: 10px 0;
304
+ }
305
+
306
+ .action-grid {
307
+ display: grid;
308
+ grid-template-columns: 1fr 1fr;
309
+ gap: 16px;
310
+ margin-bottom: 24px;
311
+ }
312
+
313
+ .quick-action {
314
+ background: var(--bg-card);
315
+ padding: 16px;
316
+ border-radius: var(--radius-md);
317
+ display: flex;
318
+ flex-direction: column;
319
+ align-items: center;
320
+ gap: 8px;
321
+ border: 1px solid var(--border);
322
+ }
323
+ .quick-action i { font-size: 1.5rem; color: var(--primary); }
324
+ .quick-action span { font-size: 0.9rem; font-weight: 600; }
325
+
326
+ .history-list {
327
+ background: var(--bg-card);
328
+ border-radius: var(--radius-md);
329
+ overflow: hidden;
330
+ }
331
+ .history-item {
332
+ padding: 16px;
333
+ border-bottom: 1px solid var(--border);
334
+ display: flex;
335
+ justify-content: space-between;
336
+ align-items: center;
337
+ }
338
+ .history-item:last-child { border-bottom: none; }
339
+ .tx-type { font-weight: 600; }
340
+ .tx-amount { font-weight: 700; }
341
+ .tx-amount.win { color: var(--success); }
342
+ .tx-amount.loss { color: var(--danger); }
343
+
344
+ /* --- Game Screen (The Engine) --- */
345
+ #game-screen {
346
+ position: fixed;
347
+ top: 0; left: 0; width: 100%; height: 100%;
348
+ background: #000;
349
+ z-index: 200;
350
+ display: flex;
351
+ flex-direction: column;
352
+ }
353
+
354
+ .game-header {
355
+ padding: 10px 16px;
356
+ background: rgba(0,0,0,0.8);
357
+ display: flex;
358
+ justify-content: space-between;
359
+ align-items: center;
360
+ }
361
+
362
+ .game-canvas-container {
363
+ flex: 1;
364
+ position: relative;
365
+ display: flex;
366
+ align-items: center;
367
+ justify-content: center;
368
+ overflow: hidden;
369
+ }
370
+
371
+ .game-controls {
372
+ padding: 20px;
373
+ background: rgba(15, 17, 21, 0.95);
374
+ border-top: 1px solid var(--border);
375
+ display: flex;
376
+ justify-content: space-between;
377
+ align-items: center;
378
+ }
379
+
380
+ /* --- Slots Specific --- */
381
+ .slot-machine {
382
+ background: #2a2a2a;
383
+ padding: 20px;
384
+ border-radius: var(--radius-md);
385
+ border: 4px solid #444;
386
+ box-shadow: inset 0 0 20px #000;
387
+ width: 100%;
388
+ max-width: 400px;
389
+ }
390
+ .reels-container {
391
+ display: flex;
392
+ gap: 10px;
393
+ overflow: hidden;
394
+ height: 120px;
395
+ position: relative;
396
+ }
397
+ .reel {
398
+ flex: 1;
399
+ background: #fff;
400
+ border-radius: 8px;
401
+ display: flex;
402
+ flex-direction: column;
403
+ align-items: center;
404
+ justify-content: center;
405
+ font-size: 3rem;
406
+ box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
407
+ position: relative;
408
+ }
409
+ .reel::before, .reel::after {
410
+ content: '';
411
+ position: absolute;
412
+ left: 0; right: 0; height: 30px;
413
+ background: linear-gradient(to bottom, #fff, transparent);
414
+ z-index: 2;
415
+ }
416
+ .reel::after { top: 100%; transform: translateY(-100%); background: linear-gradient(to top, #fff, transparent); }
417
+
418
+ .payline-indicator {
419
+ position: absolute;
420
+ top: 50%; left: 0; right: 0;
421
+ height: 2px;
422
+ background: rgba(255, 0, 0, 0.5);
423
+ transform: translateY(-50%);
424
+ z-index: 10;
425
+ pointer-events: none;
426
+ }
427
+
428
+ /* --- Modal --- */
429
+ .modal-overlay {
430
+ position: fixed;
431
+ top: 0; left: 0; width: 100%; height: 100%;
432
+ background: rgba(0,0,0,0.8);
433
+ z-index: 300;
434
+ display: flex;
435
+ align-items: center;
436
+ justify-content: center;
437
+ padding: 20px;
438
+ opacity: 0;
439
+ pointer-events: none;
440
+ transition: opacity 0.3s;
441
+ }
442
+ .modal-overlay.open { opacity: 1; pointer-events: all; }
443
+
444
+ .modal {
445
+ background: var(--bg-panel);
446
+ border-radius: var(--radius-lg);
447
+ width: 100%;
448
+ max-width: 400px;
449
+ border: 1px solid var(--border);
450
+ transform: scale(0.9);
451
+ transition: transform 0.3s;
452
+ }
453
+ .modal-overlay.open .modal { transform: scale(1); }
454
+
455
+ .modal-header {
456
+ padding: 16px;
457
+ border-bottom: 1px solid var(--border);
458
+ display: flex;
459
+ justify-content: space-between;
460
+ align-items: center;
461
+ font-weight: 700;
462
+ }
463
+ .modal-body { padding: 20px; }
464
+ .modal-footer {
465
+ padding: 16px;
466
+ border-top: 1px solid var(--border);
467
+ display: flex;
468
+ justify-content: flex-end;
469
+ gap: 10px;
470
+ }
471
+
472
+ .input-group { margin-bottom: 15px; }
473
+ .input-group label { display: block; margin-bottom: 8px; font-size: 0.9rem; color: var(--text-muted); }
474
+ .input-field {
475
+ width: 100%;
476
+ background: var(--bg-dark);
477
+ border: 1px solid var(--border);
478
+ color: white;
479
+ padding: 12px;
480
+ border-radius: var(--radius-md);
481
+ font-size: 1rem;
482
+ }
483
+
484
+ /* --- Toast Notification --- */
485
+ #toast-container {
486
+ position: fixed;
487
+ top: 80px;
488
+ left: 50%;
489
+ transform: translateX(-50%);
490
+ z-index: 400;
491
+ display: flex;
492
+ flex-direction: column;
493
+ gap: 10px;
494
+ width: 90%;
495
+ max-width: 350px;
496
+ }
497
+ .toast {
498
+ background: rgba(30, 30, 30, 0.95);
499
+ color: white;
500
+ padding: 12px 16px;
501
+ border-radius: var(--radius-md);
502
+ box-shadow: 0 4px 12px rgba(0,0,0,0.5);
503
+ display: flex;
504
+ align-items: center;
505
+ gap: 10px;
506
+ animation: slideDown 0.3s ease;
507
+ border-left: 4px solid var(--primary);
508
+ }
509
+ .toast.success { border-left-color: var(--success); }
510
+ .toast.error { border-left-color: var(--danger); }
511
+ @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
512
+
513
+ /* --- Responsive Tweaks --- */
514
+ @media (min-width: 768px) {
515
+ .game-grid { grid-template-columns: repeat(4, 1fr); }
516
+ #app-container { max-width: 600px; margin: 0 auto; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
517
+ }
518
+ </style>
519
+ </head>
520
+ <body>
521
+
522
+ <!-- Header -->
523
+ <header>
524
+ <div class="logo">Fortuna</div>
525
+ <div class="wallet-pill" onclick="app.router.navigate('wallet')">
526
+ <i class="ph ph-wallet"></i>
527
+ <span id="header-balance">$0.00</span>
528
+ </div>
529
+ </header>
530
+
531
+ <!-- Main Content Area -->
532
+ <main id="app-container">
533
+
534
+ <!-- HOME SCREEN -->
535
+ <section id="home-screen" class="screen">
536
+ <div class="hero-banner">
537
+ <h2 class="hero-title">Welcome Back!</h2>
538
+ <p class="hero-desc">Claim your 500 Free Coins bonus now.</p>
539
+ <button class="btn btn-primary" onclick="app.games.slots.open()">Play Now</button>
540
+ </div>
541
+
542
+ <div class="section-title">
543
+ <span>Categories</span>
544
+ </div>
545
+ <div class="category-scroll">
546
+ <div class="cat-chip active">All</div>
547
+ <div class="cat-chip">Slots</div>
548
+ <div class="cat-chip">Poker</div>
549
+ <div class="cat-chip">Blackjack</div>
550
+ <div class="cat-chip">Roulette</div>
551
+ </div>
552
+
553
+ <div class="section-title">
554
+ <span>Featured Games</span>
555
+ <a href="#">View All</a>
556
+ </div>
557
+
558
+ <div class="game-grid">
559
+ <!-- Game Card 1 -->
560
+ <div class="game-card" onclick="app.games.slots.open()">
561
+ <img src="https://picsum.photos/seed/slots1/200/200" class="game-card-img" alt="Slot Game">
562
+ <div class="game-card-info">
563
+ <div class="game-card-title">Mega Fortune</div>
564
+ <div class="game-card-rtp">RTP: 96.5%</div>
565
+ </div>
566
+ </div>
567
+ <!-- Game Card 2 -->
568
+ <div class="game-card" onclick="app.games.poker.open()">
569
+ <img src="https://picsum.photos/seed/poker1/200/200" class="game-card-img" alt="Poker Game">
570
+ <div class="game-card-info">
571
+ <div class="game-card-title">Royal Hold'em</div>
572
+ <div class="game-card-rtp">RTP: 98.0%</div>
573
+ </div>
574
+ </div>
575
+ <!-- Game Card 3 -->
576
+ <div class="game-card" onclick="app.games.blackjack.open()">
577
+ <img src="https://picsum.photos/seed/blackjack1/200/200" class="game-card-img" alt="Blackjack">
578
+ <div class="game-card-info">
579
+ <div class="game-card-title">VIP Blackjack</div>
580
+ <div class="game-card-rtp">RTP: 99.5%</div>
581
+ </div>
582
+ </div>
583
+ <!-- Game Card 4 -->
584
+ <div class="game-card" onclick="app.games.roulette.open()">
585
+ <img src="https://picsum.photos/seed/roulette1/200/200" class="game-card-img" alt="Roulette">
586
+ <div class="game-card-info">
587
+ <div class="game-card-title">European Roulette</div>
588
+ <div class="game-card-rtp">RTP: 97.3%</div>
589
+ </div>
590
+ </div>
591
+ </div>
592
+ </section>
593
+
594
+ <!-- WALLET SCREEN -->
595
+ <section id="wallet-screen" class="screen hidden">
596
+ <div class="wallet-card">
597
+ <div style="color: var(--text-muted); font-size: 0.9rem;">Total Balance</div>
598
+ <div class="balance-amount" id="wallet-balance-display">$0.00</div>
599
+ <div style="display: flex; gap: 10px; justify-content: center;">
600
+ <button class="btn btn-primary" onclick="app.ui.openDepositModal()">Deposit</button>
601
+ <button class="btn btn-secondary" onclick="app.ui.openWithdrawModal()">Withdraw</button>
602
+ </div>
603
+ </div>
604
+
605
+ <div class="action-grid">
606
+ <div class="quick-action">
607
+ <i class="ph ph-clock-counter-clockwise"></i>
608
+ <span>Session Limit</span>
609
+ </div>
610
+ <div class="quick-action">
611
+ <i class="ph ph-shield-check"></i>
612
+ <span>Self-Exclusion</span>
613
+ </div>
614
+ </div>
615
+
616
+ <div class="section-title">
617
+ <span>Transaction History</span>
618
+ </div>
619
+ <div class="history-list" id="history-list">
620
+ <!-- JS Injected -->
621
+ </div>
622
+ </section>
623
+
624
+ <!-- LEADERBOARD SCREEN -->
625
+ <section id="leaderboard-screen" class="screen hidden">
626
+ <div class="section-title">
627
+ <span>Global Leaderboard</span>
628
+ <span style="font-size: 0.8rem; color: var(--text-muted);">Weekly</span>
629
+ </div>
630
+
631
+ <div style="background: var(--bg-card); padding: 16px; border-radius: var(--radius-md); margin-bottom: 20px;">
632
+ <div style="display: flex; align-items: center; gap: 12px;">
633
+ <img src="https://picsum.photos/seed/me/50/50" style="border-radius: 50%; width: 40px; height: 40px;">
634
+ <div>
635
+ <div style="font-weight: 700;">You</div>
636
+ <div style="font-size: 0.8rem; color: var(--text-muted);">Rank #4,291</div>
637
+ </div>
638
+ <div style="margin-left: auto; font-weight: 700; color: var(--primary);">12,450 XP</div>
639
+ </div>
640
+ </div>
641
+
642
+ <div class="history-list">
643
+ <div class="history-item">
644
+ <div style="display: flex; align-items: center; gap: 10px;">
645
+ <span style="color: #666; font-weight: 700;">1</span>
646
+ <img src="https://picsum.photos/seed/p1/30/30" style="border-radius: 50%;">
647
+ <div>KingSlayer</div>
648
+ </div>
649
+ <div style="color: var(--primary); font-weight: 700;">45,200 XP</div>
650
+ </div>
651
+ <div class="history-item">
652
+ <div style="display: flex; align-items: center; gap: 10px;">
653
+ <span style="color: #666; font-weight: 700;">2</span>
654
+ <img src="https://picsum.photos/seed/p2/30/30" style="border-radius: 50%;">
655
+ <div>LuckyCharm</div>
656
+ </div>
657
+ <div style="color: var(--primary); font-weight: 700;">42,100 XP</div>
658
+ </div>
659
+ <div class="history-item">
660
+ <div style="display: flex; align-items: center; gap: 10px;">
661
+ <span style="color: #666; font-weight: 700;">3</span>
662
+ <img src="https://picsum.photos/seed/p3/30/30" style="border-radius: 50%;">
663
+ <div>HighRoller</div>
664
+ </div>
665
+ <div style="color: var(--primary); font-weight: 700;">38,950 XP</div>
666
+ </div>
667
+ </div>
668
+ </section>
669
+
670
+ </main>
671
+
672
+ <!-- Bottom Navigation -->
673
+ <nav>
674
+ <button class="nav-item active" onclick="app.router.navigate('home')">
675
+ <i class="ph ph-house"></i>
676
+ <span>Home</span>
677
+ </button>
678
+ <button class="nav-item" onclick="app.router.navigate('wallet')">
679
+ <i class="ph ph-wallet"></i>
680
+ <span>Wallet</span>
681
+ </button>
682
+ <button class="nav-item" onclick="app.router.navigate('leaderboard')">
683
+ <i class="ph ph-trophy"></i>
684
+ <span>Ranks</span>
685
+ </button>
686
+ <button class="nav-item" onclick="app.ui.showSupport()">
687
+ <i class="ph ph-lifebuoy"></i>
688
+ <span>Support</span>
689
+ </button>
690
+ </nav>
691
+
692
+ <!-- GAME ENGINE OVERLAY -->
693
+ <div id="game-screen" class="hidden">
694
+ <div class="game-header">
695
+ <button class="btn-icon" onclick="app.games.slots.close()"><i class="ph ph-arrow-left"></i></button>
696
+ <div style="font-weight: 700;">Mega Fortune Slots</div>
697
+ <button class="btn-icon" onclick="app.ui.showHelp()"><i class="ph ph-question"></i></button>
698
+ </div>
699
+
700
+ <div class="game-canvas-container">
701
+ <div class="payline-indicator"></div>
702
+ <div class="slot-machine">
703
+ <div class="reels-container">
704
+ <div class="reel" id="reel-1">🍒</div>
705
+ <div class="reel" id="reel-2">🍋</div>
706
+ <div class="reel" id="reel-3">💎</div>
707
+ </div>
708
+ <div style="text-align: center; margin-top: 15px; font-size: 1.2rem; font-weight: bold; color: var(--primary);" id="slot-result">
709
+ READY TO SPIN
710
+ </div>
711
+ </div>
712
+ </div>
713
+
714
+ <div class="game-controls">
715
+ <div>
716
+ <div style="font-size: 0.8rem; color: var(--text-muted);">Bet Amount</div>
717
+ <div style="font-weight: 700;" id="current-bet">$10.00</div>
718
+ </div>
719
+ <button class="btn btn-primary" style="padding: 12px 30px; font-size: 1.1rem;" onclick="app.games.slots.spin()">
720
+ SPIN
721
+ </button>
722
+ <div style="text-align: right;">
723
+ <div style="font-size: 0.8rem; color: var(--text-muted);">Last Win</div>
724
+ <div style="font-weight: 700; color: var(--success);" id="last-win">$0.00</div>
725
+ </div>
726
+ </div>
727
+ </div>
728
+
729
+ <!-- DEPOSIT MODAL -->
730
+ <div class="modal-overlay" id="deposit-modal">
731
+ <div class="modal">
732
+ <div class="modal-header">
733
+ <span>Deposit Funds</span>
734
+ <button class="btn-icon" onclick="app.ui.closeModals()" style="width: 30px; height: 30px; font-size: 1rem;"><i class="ph ph-x"></i></button>
735
+ </div>
736
+ <div class="modal-body">
737
+ <div class="input-group">
738
+ <label>Amount ($)</label>
739
+ <input type="number" class="input-field" id="deposit-amount" placeholder="100">
740
+ </div>
741
+ <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
742
+ <button class="btn btn-secondary" onclick="app.wallet.deposit(50)">$50</button>
743
+ <button class="btn btn-secondary" onclick="app.wallet.deposit(100)">$100</button>
744
+ <button class="btn btn-secondary" onclick="app.wallet.deposit(500)">$500</button>
745
+ <button class="btn btn-secondary" onclick="app.wallet.deposit(1000)">$1,000</button>
746
+ </div>
747
+ </div>
748
+ </div>
749
+ </div>
750
+
751
+ <!-- WITHDRAW MODAL -->
752
+ <div class="modal-overlay" id="withdraw-modal">
753
+ <div class="modal">
754
+ <div class="modal-header">
755
+ <span>Withdraw Funds</span>
756
+ <button class="btn-icon" onclick="app.ui.closeModals()" style="width: 30px; height: 30px; font-size: 1rem;"><i class="ph ph-x"></i></button>
757
+ </div>
758
+ <div class="modal-body">
759
+ <div class="input-group">
760
+ <label>Available: <span id="withdraw-available">$0.00</span></label>
761
+ </div>
762
+ <div class="input-group">
763
+ <label>Amount ($)</label>
764
+ <input type="number" class="input-field" id="withdraw-amount" placeholder="100">
765
+ </div>
766
+ <button class="btn btn-primary w-full" onclick="app.wallet.withdraw()">Request Withdrawal</button>
767
+ </div>
768
+ </div>
769
+ </div>
770
+
771
+ <!-- TOAST CONTAINER -->
772
+ <div id="toast-container"></div>
773
+
774
+ <script>
775
+ /**
776
+ * FORTUNA ROYALE - CASINO APP ENGINE
777
+ * Single File Architecture
778
+ */
779
+
780
+ const app = {
781
+ state: {
782
+ balance: 500.00,
783
+ currentGame: null,
784
+ history: [
785
+ { type: 'deposit', amount: 500, date: '2023-10-24', desc: 'Initial Bonus' },
786
+ { type: 'win', amount: 50, date: '2023-10-24', desc: 'Slots Jackpot' }
787
+ ]
788
+ },
789
+
790
+ // --- Core System ---
791
+ init: function() {
792
+ this.router.init();
793
+ this.wallet.render();
794
+ this.ui.toast('Welcome to Fortuna Royale!', 'success');
795
+ },
796
+
797
+ // --- Router ---
798
+ router: {
799
+ screens: ['home', 'wallet', 'leaderboard'],
800
+ init: function() {
801
+ this.navigate('home');
802
+ },
803
+ navigate: function(screenId) {
804
+ // Update Nav UI
805
+ document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
806
+ const navIndex = this.screens.indexOf(screenId);
807
+ if (navIndex >= 0) {
808
+ document.querySelectorAll('.nav-item')[navIndex].classList.add('active');
809
+ }
810
+
811
+ // Show Screen
812
+ document.querySelectorAll('.screen').forEach(el => el.classList.add('hidden'));
813
+ const target = document.getElementById(screenId + '-screen');
814
+ if (target) target.classList.remove('hidden');
815
+
816
+ // Scroll to top
817
+ document.getElementById('app-container').scrollTop = 0;
818
+ }
819
+ },
820
+
821
+ // --- Wallet System ---
822
+ wallet: {
823
+ render: function() {
824
+ const el = document.getElementById('wallet-balance-display');
825
+ const headerEl = document.getElementById('header-balance');
826
+ el.innerText = '$' + this.format(app.state.balance);
827
+ headerEl.innerText = '$' + this.format(app.state.balance);
828
+
829
+ // Render History
830
+ const list = document.getElementById('history-list');
831
+ list.innerHTML = '';
832
+ app.state.history.forEach(tx => {
833
+ const isWin = tx.type === 'win';
834
+ const colorClass = isWin ? 'win' : (tx.type === 'loss' ? 'loss' : '');
835
+ const icon = tx.type === 'deposit' ? 'ph-arrow-down-left' : (isWin ? 'ph-trend-up' : 'ph-trend-down');
836
+
837
+ list.innerHTML += `
838
+ <div class="history-item">
839
+ <div style="display:flex; flex-direction:column;">
840
+ <span class="tx-type">${tx.desc}</span>
841
+ <span style="font-size:0.75rem; color:#666;">${tx.date}</span>
842
+ </div>
843
+ <div style="text-align:right;">
844
+ <div class="tx-amount ${colorClass}">${isWin ? '+' : ''}$${tx.amount}</div>
845
+ </div>
846
+ </div>
847
+ `;
848
+ });
849
+ },
850
+ deposit: function(amount) {
851
+ app.state.balance += amount;
852
+ app.state.history.unshift({
853
+ type: 'deposit',
854
+ amount: amount,
855
+ date: new Date().toLocaleDateString(),
856
+ desc: 'Deposit'
857
+ });
858
+ this.render();
859
+ app.ui.closeModals();
860
+ app.ui.toast(`Deposited $${amount}`, 'success');
861
+ },
862
+ withdraw: function() {
863
+ const input = document.getElementById('withdraw-amount');
864
+ const amount = parseFloat(input.value);
865
+ if (!amount || amount <= 0) return app.ui.toast('Invalid amount', 'error');
866
+ if (amount > app.state.balance) return app.ui.toast('Insufficient funds', 'error');
867
+
868
+ app.state.balance -= amount;
869
+ app.state.history.unshift({
870
+ type: 'loss', // treated as expense
871
+ amount: amount,
872
+ date: new Date().toLocaleDateString(),
873
+ desc: 'Withdrawal'
874
+ });
875
+ this.render();
876
+ app.ui.closeModals();
877
+ app.ui.toast(`Withdrawal of $${amount} processed`, 'success');
878
+ },
879
+ format: function(num) {
880
+ return num.toFixed(2);
881
+ }
882
+ },
883
+
884
+ // --- UI Utilities ---
885
+ ui: {
886
+ openDepositModal: function() {
887
+ document.getElementById('deposit-modal').classList.add('open');
888
+ },
889
+ openWithdrawModal: function() {
890
+ document.getElementById('withdraw-available').innerText = '$' + app.format(app.state.balance);
891
+ document.getElementById('withdraw-modal').classList.add('open');
892
+ },
893
+ closeModals: function() {
894
+ document.querySelectorAll('.modal-overlay').forEach(el => el.classList.remove('open'));
895
+ },
896
+ toast: function(msg, type = 'info') {
897
+ const container = document.getElementById('toast-container');
898
+ const el = document.createElement('div');
899
+ el.className = `toast ${type}`;
900
+ el.innerHTML = `<i class="ph ${type === 'success' ? 'ph-check-circle' : (type === 'error' ? 'ph-warning-circle' : 'ph-info')}"></i> ${msg}`;
901
+ container.appendChild(el);
902
+ setTimeout(() => el.remove(), 3000);
903
+ },
904
+ showSupport: function() {
905
+ this.toast('Support ticket system coming soon.', 'info');
906
+ },
907
+ showHelp: function() {
908
+ this.toast('Match 3 symbols on the center line to win!', 'info');
909
+ }
910
+ },
911
+
912
+ // --- Games Module ---
913
+ games: {
914
+ currentEngine: null,
915
+
916
+ // Slots Engine
917
+ slots: {
918
+ isOpen: false,
919
+ symbols: ['🍒', '🍋', '🍇', '💎', '7️⃣', '🔔'],
920
+ isSpinning: false,
921
+
922
+ open: function() {
923
+ document.getElementById('game-screen').classList.remove('hidden');
924
+ this.isOpen = true;
925
+ this.isSpinning = false;
926
+ this.reset();
927
+ },
928
+
929
+ close: function() {
930
+ document.getElementById('game-screen').classList.add('hidden');
931
+ this.isOpen = false;
932
+ },
933
+
934
+ reset: function() {
935
+ document.getElementById('slot-result').innerText = "READY TO SPIN";
936
+ document.getElementById('slot-result').style.color = "var(--primary)";
937
+ document.getElementById('last-win').innerText = "$0.00";
938
+ },
939
+
940
+ spin: function() {
941
+ if (this.isSpinning) return;
942
+
943
+ // Check Balance
944
+ const bet = 10;
945
+ if (app.state.balance < bet) {
946
+ app.ui.toast('Insufficient funds! Deposit more.', 'error');
947
+ return;
948
+ }
949
+
950
+ // Deduct Balance
951
+ app.state.balance -= bet;
952
+ app.wallet.render();
953
+ app.state.history.unshift({
954
+ type: 'loss',
955
+ amount: bet,
956
+ date: new Date().toLocaleDateString(),
957
+ desc: 'Slots Spin'
958
+ });
959
+
960
+ this.isSpinning = true;
961
+ document.getElementById('slot-result').innerText = "SPINNING...";
962
+ document.getElementById('last-win').innerText = "$0.00";
963
+
964
+ // Animation Logic
965
+ const reels = [
966
+ document.getElementById('reel-1'),
967
+ document.getElementById('reel-2'),
968
+ document.getElementById('reel-3')
969
+ ];
970
+
971
+ let results = [];
972
+
973
+ reels.forEach((reel, index) => {
974
+ // Random stop time
975
+ const stopTime = 1000 + (index * 500) + Math.random() * 500;
976
+
977
+ // Rapidly cycle symbols
978
+ const interval = setInterval(() => {
979
+ reel.innerText = this.symbols[Math.floor(Math.random() * this.symbols.length)];
980
+ }, 100);
981
+
982
+ setTimeout(() => {
983
+ clearInterval(interval);
984
+ // Final result
985
+ const finalSym = this.symbols[Math.floor(Math.random() * this.symbols.length)];
986
+ reel.innerText = finalSym;
987
+ results[index] = finalSym;
988
+
989
+ // Check if last reel stopped
990
+ if (index === 2) {
991
+ this.checkWin(results);
992
+ }
993
+ }, stopTime);
994
+ });
995
+ },
996
+
997
+ checkWin: function(results) {
998
+ this.isSpinning = false;
999
+ const [r1, r2, r3] = results;
1000
+
1001
+ // Logic: 3 match = Big Win, 2 match = Small Win
1002
+ let multiplier = 0;
1003
+ let msg = "TRY AGAIN";
1004
+
1005
+ if (r1 === r2 && r2 === r3) {
1006
+ // 3 Match
1007
+ if (r1 === '7️⃣') { multiplier = 50; msg = "JACKPOT!"; }
1008
+ else if (r1 === '💎') { multiplier = 20; msg = "BIG WIN!"; }
1009
+ else { multiplier = 10; msg = "WIN!"; }
1010
+ } else if (r1 === r2 || r2 === r3 || r1 === r3) {
1011
+ // 2 Match
1012
+ multiplier = 2;
1013
+ msg = "GOOD MATCH";
1014
+ }
1015
+
1016
+ if (multiplier > 0) {
1017
+ const winAmount = 10 * multiplier;
1018
+ app.state.balance += winAmount;
1019
+ app.state.history.unshift({
1020
+ type: 'win',
1021
+ amount: winAmount,
1022
+ date: new Date().toLocaleDateString(),
1023
+ desc: 'Slots Win'
1024
+ });
1025
+ app.wallet.render();
1026
+
1027
+ document.getElementById('slot-result').innerText = msg;
1028
+ document.getElementById('slot-result').style.color = "var(--success)";
1029
+ document.getElementById('last-win').innerText = "$" + winAmount.toFixed(2);
1030
+ app.ui.toast(`You won $${winAmount}!`, 'success');
1031
+ } else {
1032
+ document.getElementById('slot-result').style.color = "var(--danger)";
1033
+ }
1034
+ }
1035
+ },
1036
+
1037
+ // Placeholder for other game engines
1038
+ poker: { open: () => app.ui.toast('Poker module loading...', 'info') },
1039
+ blackjack: { open: () => app.ui.toast('Blackjack module loading...', 'info') },
1040
+ roulette: { open: () => app.ui.toast('Roulette module loading...', 'info') }
1041
+ }
1042
+ };
1043
+
1044
+ // Initialize App
1045
+ document.addEventListener('DOMContentLoaded', () => {
1046
+ app.init();
1047
+ });
1048
+
1049
+ </script>
1050
+ </body>
1051
+ </html>