Hugging Face's logo

Spaces:
weltenschmid
/
anycoder-04dc4c5e
Running

App Files Community
1
weltenschmid commited on
Commit
a0e64dc
·
verified ·
1 Parent(s): 1c13363

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1012 -1042
index.html CHANGED
@@ -1,896 +1,976 @@
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>Royal Fortune Casino</title>
7
-
8
- <!-- Google Fonts -->
9
- <link rel="preconnect" href="https://fonts.googleapis.com">
10
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
- <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
 
13
- <!-- FontAwesome for Icons -->
14
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
15
-
16
- <style>
17
- :root {
18
- --primary-gold: #d4af37;
19
- --primary-gold-hover: #f3cf55;
20
- --bg-dark: #0f0f13;
21
- --bg-panel: #1a1a24;
22
- --bg-card: #23232f;
23
- --text-main: #ffffff;
24
- --text-muted: #a0a0b0;
25
- --accent-red: #e74c3c;
26
- --accent-green: #2ecc71;
27
- --radius: 12px;
28
- --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
29
- --glass: rgba(26, 26, 36, 0.85);
30
- }
31
-
32
- * {
33
- box-sizing: border-box;
34
- margin: 0;
35
- padding: 0;
36
- }
37
-
38
- body {
39
- font-family: 'Roboto', sans-serif;
40
- background-color: var(--bg-dark);
41
- color: var(--text-main);
42
- line-height: 1.6;
43
- overflow-x: hidden;
44
- background-image: radial-gradient(circle at 10% 20%, #1a1a24 0%, #0f0f13 90%);
45
- }
46
-
47
- /* Typography */
48
- h1, h2, h3, h4 {
49
- font-family: 'Cinzel', serif;
50
- color: var(--primary-gold);
51
- }
52
-
53
- a {
54
- text-decoration: none;
55
- color: inherit;
56
- transition: color 0.3s;
57
- }
58
-
59
- /* Utility */
60
- .container {
61
- max-width: 1200px;
62
- margin: 0 auto;
63
- padding: 0 20px;
64
- }
65
-
66
- .btn {
67
- display: inline-flex;
68
- align-items: center;
69
- gap: 8px;
70
- padding: 10px 24px;
71
- border-radius: 30px;
72
- border: none;
73
- font-weight: 600;
74
- cursor: pointer;
75
- transition: all 0.3s ease;
76
- font-size: 0.95rem;
77
- }
78
-
79
- .btn-gold {
80
- background: linear-gradient(135deg, var(--primary-gold), #b8860b);
81
- color: #000;
82
- }
83
-
84
- .btn-gold:hover {
85
- transform: translateY(-2px);
86
- box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
87
- background: linear-gradient(135deg, var(--primary-gold-hover), var(--primary-gold));
88
- }
89
-
90
- .btn-outline {
91
- background: transparent;
92
- border: 2px solid var(--primary-gold);
93
- color: var(--primary-gold);
94
- }
95
-
96
- .btn-outline:hover {
97
- background: var(--primary-gold);
98
- color: #000;
99
- }
100
-
101
- /* Header */
102
- header {
103
- background: rgba(15, 15, 19, 0.95);
104
- backdrop-filter: blur(10px);
105
- position: sticky;
106
- top: 0;
107
- z-index: 100;
108
- padding: 15px 0;
109
- border-bottom: 1px solid rgba(255, 255, 255, 0.05);
110
- }
111
-
112
- nav {
113
- display: flex;
114
- justify-content: space-between;
115
- align-items: center;
116
- }
117
-
118
- .logo {
119
- font-size: 1.5rem;
120
- font-weight: 700;
121
- display: flex;
122
- align-items: center;
123
- gap: 10px;
124
- }
125
-
126
- .logo i {
127
- color: var(--primary-gold);
128
- font-size: 1.8rem;
129
- }
130
-
131
- .nav-controls {
132
- display: flex;
133
- align-items: center;
134
- gap: 20px;
135
- }
136
-
137
- .balance-display {
138
- background: var(--bg-panel);
139
- padding: 8px 16px;
140
- border-radius: 20px;
141
- border: 1px solid rgba(212, 175, 55, 0.3);
142
- display: flex;
143
- align-items: center;
144
- gap: 8px;
145
- font-weight: 700;
146
- color: var(--primary-gold);
147
- }
148
-
149
- .lang-select {
150
- background: var(--bg-panel);
151
- color: var(--text-main);
152
- border: 1px solid rgba(255, 255, 255, 0.1);
153
- padding: 5px 10px;
154
- border-radius: 6px;
155
- cursor: pointer;
156
- }
157
-
158
- /* Hero / Highlight Section */
159
- .hero {
160
- padding: 40px 0;
161
- text-align: center;
162
- }
163
-
164
- .daily-bonus-banner {
165
- background: linear-gradient(90deg, #2c3e50, #000000);
166
- border: 1px solid var(--primary-gold);
167
- padding: 15px;
168
- border-radius: var(--radius);
169
- margin-bottom: 30px;
170
- display: flex;
171
- justify-content: space-between;
172
- align-items: center;
173
- flex-wrap: wrap;
174
- gap: 15px;
175
- }
176
-
177
- .bonus-content h3 {
178
- font-size: 1.2rem;
179
- margin-bottom: 5px;
180
- }
181
-
182
- .bonus-content p {
183
- color: var(--primary-gold);
184
- font-weight: 700;
185
- }
186
-
187
- .game-highlight {
188
- background: var(--bg-panel);
189
- border-radius: var(--radius);
190
- overflow: hidden;
191
- box-shadow: var(--shadow);
192
- position: relative;
193
- border: 1px solid rgba(212, 175, 55, 0.2);
194
- }
195
-
196
- .highlight-badge {
197
- position: absolute;
198
- top: 20px;
199
- left: -35px;
200
- background: var(--accent-red);
201
- color: white;
202
- padding: 8px 40px;
203
- transform: rotate(-45deg);
204
- font-weight: bold;
205
- box-shadow: 0 2px 10px rgba(0,0,0,0.3);
206
- z-index: 10;
207
- }
208
-
209
- .highlight-content {
210
- display: grid;
211
- grid-template-columns: 1fr 1fr;
212
- align-items: center;
213
- }
214
-
215
- .highlight-image {
216
- height: 400px;
217
- background-size: cover;
218
- background-position: center;
219
- position: relative;
220
- }
221
-
222
- .highlight-image::after {
223
- content: '';
224
- position: absolute;
225
- inset: 0;
226
- background: linear-gradient(90deg, transparent 0%, var(--bg-panel) 100%);
227
- }
228
-
229
- .highlight-text {
230
- padding: 40px;
231
- text-align: left;
232
- }
233
-
234
- /* Games Grid */
235
- .section-title {
236
- text-align: center;
237
- margin: 50px 0 30px;
238
- font-size: 2rem;
239
- position: relative;
240
- display: inline-block;
241
- left: 50%;
242
- transform: translateX(-50%);
243
- }
244
-
245
- .section-title::after {
246
- content: '';
247
- display: block;
248
- width: 60px;
249
- height: 3px;
250
- background: var(--primary-gold);
251
- margin: 10px auto 0;
252
- }
253
-
254
- .games-grid {
255
- display: grid;
256
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
257
- gap: 25px;
258
- padding-bottom: 60px;
259
- }
260
-
261
- .game-card {
262
- background: var(--bg-card);
263
- border-radius: var(--radius);
264
- overflow: hidden;
265
- transition: transform 0.3s, box-shadow 0.3s;
266
- cursor: pointer;
267
- border: 1px solid transparent;
268
- position: relative;
269
- }
270
-
271
- .game-card:hover {
272
- transform: translateY(-5px);
273
- box-shadow: 0 10px 20px rgba(0,0,0,0.4);
274
- border-color: var(--primary-gold);
275
- }
276
-
277
- .card-img {
278
- height: 180px;
279
- background-color: #333;
280
- background-size: cover;
281
- background-position: center;
282
- position: relative;
283
- }
284
-
285
- .card-overlay {
286
- position: absolute;
287
- inset: 0;
288
- background: rgba(0,0,0,0.6);
289
- display: flex;
290
- align-items: center;
291
- justify-content: center;
292
- opacity: 0;
293
- transition: opacity 0.3s;
294
- }
295
-
296
- .game-card:hover .card-overlay {
297
- opacity: 1;
298
- }
299
-
300
- .card-body {
301
- padding: 20px;
302
- }
303
-
304
- .card-body h4 {
305
- font-size: 1.2rem;
306
- margin-bottom: 5px;
307
- color: #fff;
308
- }
309
-
310
- .card-body p {
311
- font-size: 0.9rem;
312
- color: var(--text-muted);
313
- }
314
-
315
- /* Modals */
316
- .modal-overlay {
317
- position: fixed;
318
- inset: 0;
319
- background: rgba(0,0,0,0.8);
320
- backdrop-filter: blur(5px);
321
- z-index: 1000;
322
- display: flex;
323
- align-items: center;
324
- justify-content: center;
325
- opacity: 0;
326
- visibility: hidden;
327
- transition: all 0.3s;
328
- }
329
-
330
- .modal-overlay.active {
331
- opacity: 1;
332
- visibility: visible;
333
- }
334
-
335
- .modal {
336
- background: var(--bg-panel);
337
- width: 90%;
338
- max-width: 500px;
339
- border-radius: var(--radius);
340
- padding: 30px;
341
- position: relative;
342
- transform: scale(0.9);
343
- transition: transform 0.3s;
344
- border: 1px solid var(--primary-gold);
345
- box-shadow: 0 0 30px rgba(0,0,0,0.7);
346
- }
347
-
348
- .modal-overlay.active .modal {
349
- transform: scale(1);
350
- }
351
-
352
- .modal-header {
353
- display: flex;
354
- justify-content: space-between;
355
- align-items: center;
356
- margin-bottom: 20px;
357
- border-bottom: 1px solid rgba(255,255,255,0.1);
358
- padding-bottom: 15px;
359
- }
360
-
361
- .close-modal {
362
- background: none;
363
- border: none;
364
- color: var(--text-muted);
365
- font-size: 1.5rem;
366
- cursor: pointer;
367
- }
368
-
369
- .close-modal:hover {
370
- color: #fff;
371
- }
372
-
373
- /* Forms */
374
- .form-group {
375
- margin-bottom: 20px;
376
- }
377
-
378
- .form-label {
379
- display: block;
380
- margin-bottom: 8px;
381
- color: var(--text-muted);
382
- }
383
-
384
- .form-input {
385
- width: 100%;
386
- padding: 12px;
387
- background: var(--bg-dark);
388
- border: 1px solid rgba(255,255,255,0.1);
389
- border-radius: 8px;
390
- color: #fff;
391
- font-size: 1rem;
392
- }
393
-
394
- .form-input:focus {
395
- outline: none;
396
- border-color: var(--primary-gold);
397
- }
398
-
399
- /* Game UI Specifics */
400
- .game-area {
401
- background: var(--bg-dark);
402
- padding: 20px;
403
- border-radius: 8px;
404
- text-align: center;
405
- min-height: 200px;
406
- display: flex;
407
- flex-direction: column;
408
- justify-content: center;
409
- align-items: center;
410
- gap: 15px;
411
- }
412
-
413
- .game-controls {
414
- display: flex;
415
- gap: 10px;
416
- justify-content: center;
417
- margin-top: 20px;
418
- flex-wrap: wrap;
419
- }
420
-
421
- .game-result {
422
- font-size: 1.2rem;
423
- font-weight: bold;
424
- min-height: 1.6em;
425
- }
426
-
427
- .win-anim { color: var(--accent-green); animation: pulse 0.5s; }
428
- .lose-anim { color: var(--accent-red); }
429
-
430
- @keyframes pulse {
431
- 0% { transform: scale(1); }
432
- 50% { transform: scale(1.1); }
433
- 100% { transform: scale(1); }
434
- }
435
-
436
- /* Toast Notification */
437
- .toast-container {
438
- position: fixed;
439
- bottom: 20px;
440
- right: 20px;
441
- z-index: 2000;
442
- display: flex;
443
- flex-direction: column;
444
- gap: 10px;
445
- }
446
-
447
- .toast {
448
- background: var(--bg-panel);
449
- border-left: 4px solid var(--primary-gold);
450
- color: #fff;
451
- padding: 15px 25px;
452
- border-radius: 4px;
453
- box-shadow: 0 5px 15px rgba(0,0,0,0.3);
454
- display: flex;
455
- align-items: center;
456
- gap: 10px;
457
- animation: slideIn 0.3s ease-out forwards;
458
- min-width: 250px;
459
- }
460
-
461
- @keyframes slideIn {
462
- from { transform: translateX(100%); opacity: 0; }
463
- to { transform: translateX(0); opacity: 1; }
464
- }
465
-
466
- /* Responsive */
467
- @media (max-width: 768px) {
468
- .highlight-content {
469
- grid-template-columns: 1fr;
470
- }
471
- .highlight-image {
472
- height: 250px;
473
- }
474
- .highlight-image::after {
475
- background: linear-gradient(180deg, transparent 0%, var(--bg-panel) 100%);
476
- }
477
- .nav-controls span {
478
- display: none;
479
- }
480
- .daily-bonus-banner {
481
- flex-direction: column;
482
- text-align: center;
483
- }
484
- }
485
-
486
- /* Slots Styles */
487
- .slots-container {
488
- display: flex;
489
- gap: 10px;
490
- background: #000;
491
- padding: 15px;
492
- border-radius: 8px;
493
- border: 2px solid var(--primary-gold);
494
- }
495
- .slot-reel {
496
- width: 60px;
497
- height: 80px;
498
- background: #fff;
499
- color: #000;
500
- font-size: 3rem;
501
- display: flex;
502
- align-items: center;
503
- justify-content: center;
504
- border-radius: 4px;
505
- }
506
-
507
- /* Roulette Styles */
508
- .roulette-wheel {
509
- width: 150px;
510
- height: 150px;
511
- border-radius: 50%;
512
- border: 5px solid var(--primary-gold);
513
- background: conic-gradient(
514
- #e74c3c 0deg 18deg,
515
- #000 18deg 36deg,
516
- #e74c3c 36deg 54deg,
517
- #000 54deg 72deg,
518
- #e74c3c 72deg 90deg,
519
- #000 90deg 108deg,
520
- #e74c3c 108deg 126deg,
521
- #000 126deg 144deg,
522
- #e74c3c 144deg 162deg,
523
- #000 162deg 180deg,
524
- #2ecc71 180deg 360deg
525
- );
526
- transition: transform 3s cubic-bezier(0.1, 0.7, 0.1, 1);
527
- margin: 0 auto;
528
- position: relative;
529
- }
530
- .roulette-pointer {
531
- position: absolute;
532
- top: -10px;
533
- left: 50%;
534
- transform: translateX(-50%);
535
- width: 0;
536
- height: 0;
537
- border-left: 10px solid transparent;
538
- border-right: 10px solid transparent;
539
- border-top: 20px solid var(--primary-gold);
540
- z-index: 2;
541
- }
542
-
543
- </style>
544
  </head>
 
545
  <body>
546
 
547
- <!-- Header -->
548
- <header>
549
- <div class="container">
550
- <nav>
551
- <div class="logo">
552
- <i class="fas fa-crown"></i>
553
- ROYAL FORTUNE
554
- </div>
555
- <div class="nav-controls">
556
- <select id="languageSelect" class="lang-select">
557
- <option value="en">EN</option>
558
- <option value="es">ES</option>
559
- <option value="fr">FR</option>
560
- <option value="de">DE</option>
561
- </select>
562
- <div class="balance-display">
563
- <i class="fas fa-coins"></i>
564
- <span id="balanceAmount">1000</span>
565
- </div>
566
- <button class="btn btn-gold" id="topUpBtn">
567
- <i class="fas fa-plus-circle"></i> <span data-i18n="topUp">Top Up</span>
568
- </button>
569
- </div>
570
- </nav>
571
  </div>
572
- </header>
573
-
574
- <main class="container">
575
-
576
- <!-- Hero & Daily Bonus -->
577
- <section class="hero">
578
- <div class="daily-bonus-banner">
579
- <div class="bonus-content">
580
- <h3 data-i18n="dailyBonusTitle">🔥 Daily Deposit Bonus</h3>
581
- <p id="dailyBonusText">Loading...</p>
582
- </div>
583
- <button class="btn btn-outline" onclick="openTopUpModal()" data-i18n="claimNow">Claim Now</button>
584
- </div>
585
-
586
- <div class="game-highlight" id="highlightSection">
587
- <div class="highlight-badge" data-i18n="gameOfDay">Game of the Day</div>
588
- <div class="highlight-content">
589
- <div class="highlight-image" id="highlightImage"></div>
590
- <div class="highlight-text">
591
- <h2 id="highlightTitle">Loading...</h2>
592
- <p id="highlightDesc" style="color: var(--text-muted); margin: 15px 0;">Loading description...</p>
593
- <button class="btn btn-gold" id="highlightPlayBtn">
594
- <i class="fas fa-play"></i> <span data-i18n="playNow">Play Now</span>
595
- </button>
596
- </div>
597
- </div>
598
- </div>
599
- </section>
600
-
601
- <!-- Games Grid -->
602
- <h2 class="section-title" data-i18n="ourGames">Our Games</h2>
603
- <section class="games-grid" id="gamesGrid">
604
- <!-- Games injected via JS -->
605
- </section>
606
-
607
- </main>
608
-
609
- <footer style="text-align: center; padding: 40px; color: var(--text-muted); font-size: 0.8rem; border-top: 1px solid rgba(255,255,255,0.05)">
610
- <p>&copy; 2023 Royal Fortune Casino. All rights reserved.</p>
611
- <p style="margin-top: 10px;">Please gamble responsibly. This is a demo application.</p>
612
- <div style="margin-top: 20px;">
613
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: var(--primary-gold); font-weight: bold;">
614
- Built with anycoder
615
- </a>
616
- </div>
617
- </footer>
618
-
619
- <!-- TOP UP MODAL -->
620
- <div class="modal-overlay" id="topUpModal">
621
- <div class="modal">
622
- <div class="modal-header">
623
- <h3 data-i18n="addFunds">Add Funds</h3>
624
- <button class="close-modal">&times;</button>
625
- </div>
626
- <div class="form-group">
627
- <label class="form-label" data-i18n="amount">Amount</label>
628
- <input type="number" id="topUpAmount" class="form-input" placeholder="Enter amount..." min="10">
629
- </div>
630
- <button class="btn btn-gold" id="confirmTopUp" style="width: 100%" data-i18n="confirm">Confirm</button>
631
  </div>
 
632
  </div>
 
 
 
633
 
634
- <!-- GAME MODAL -->
635
- <div class="modal-overlay" id="gameModal">
636
- <div class="modal" style="max-width: 600px;">
637
- <div class="modal-header">
638
- <h3 id="activeGameTitle">Game Title</h3>
639
- <button class="close-modal">&times;</button>
640
- </div>
641
- <div class="game-area" id="gameArena">
642
- <!-- Dynamic Game Content Here -->
643
- </div>
644
- <div class="game-controls" id="gameControls">
645
- <!-- Dynamic Controls Here -->
646
- </div>
647
- <div style="text-align: center; margin-top: 15px; color: var(--text-muted); font-size: 0.9rem;">
648
- <span data-i18n="yourBet">Your Bet</span>: <span id="currentBetDisplay" style="color: #fff; font-weight: bold;">10</span>
649
- <button class="btn btn-outline" style="padding: 2px 10px; font-size: 0.8rem; margin-left: 10px;" onclick="adjustBet(10)">+10</button>
650
- <button class="btn btn-outline" style="padding: 2px 10px; font-size: 0.8rem;" onclick="adjustBet(-10)">-10</button>
651
- </div>
652
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
653
  </div>
654
-
655
- <!-- Toast Container -->
656
- <div class="toast-container" id="toastContainer"></div>
657
-
658
- <script>
659
- // --- DATA & STATE ---
660
- const state = {
661
- balance: 1000,
662
- currentBet: 10,
663
- lang: 'en',
664
- activeGame: null
665
- };
666
-
667
- const translations = {
668
- en: {
669
- topUp: "Top Up",
670
- dailyBonusTitle: "🔥 Daily Deposit Bonus",
671
- claimNow: "Claim Now",
672
- gameOfDay: "Game of the Day",
673
- playNow: "Play Now",
674
- ourGames: "Our Games",
675
- addFunds: "Add Funds",
676
- amount: "Amount",
677
- confirm: "Confirm",
678
- yourBet: "Your Bet",
679
- spin: "Spin",
680
- hit: "Hit",
681
- stand: "Stand",
682
- pickColor: "Pick Color",
683
- pickHigher: "Higher",
684
- pickLower: "Lower",
685
- flip: "Flip Coin",
686
- red: "Red",
687
- black: "Black",
688
- green: "Green",
689
- msgWin: "You Won!",
690
- msgLose: "You Lost",
691
- msgInsufficient: "Insufficient funds!",
692
- msgTopUpSuccess: "Funds added successfully!",
693
- bonusText: "Get {value}% extra on every deposit today!",
694
- games: {
695
- slots: { name: "Neon Slots", desc: "Match symbols to win big!" },
696
- blackjack: { name: "Blackjack", desc: "Beat the dealer to 21." },
697
- roulette: { name: "Mini Roulette", desc: "Pick your lucky color." },
698
- highlow: { name: "High Low", desc: "Guess the next card." }
699
- }
700
- },
701
- es: {
702
- topUp: "Recargar",
703
- dailyBonusTitle: "🔥 Bono Diario",
704
- claimNow: "Reclamar",
705
- gameOfDay: "Juego del Día",
706
- playNow: "Jugar Ahora",
707
- ourGames: "Nuestros Juegos",
708
- addFunds: "Añadir Fondos",
709
- amount: "Cantidad",
710
- confirm: "Confirmar",
711
- yourBet: "Tu Apuesta",
712
- spin: "Girar",
713
- hit: "Pedir",
714
- stand: "Plantarse",
715
- pickColor: "Elige Color",
716
- pickHigher: "Más Alto",
717
- pickLower: "Más Bajo",
718
- flip: "Lanzar",
719
- red: "Rojo",
720
- black: "Negro",
721
- green: "Verde",
722
- msgWin: "¡Ganaste!",
723
- msgLose: "¡Perdiste!",
724
- msgInsufficient: "¡Fondos insuficientes!",
725
- msgTopUpSuccess: "¡Fondos añadidos con éxito!",
726
- bonusText: "¡Obtén un {value}% extra en cada depósito hoy!",
727
- games: {
728
- slots: { name: "Tragamonedas", desc: "¡Combina símbolos para ganar!" },
729
- blackjack: { name: "Blackjack", desc: "Supera al croupier con 21." },
730
- roulette: { name: "Ruleta Mini", desc: "Elige tu color de la suerte." },
731
- highlow: { name: "Alto Bajo", desc: "Adivina la siguiente carta." }
732
- }
733
- },
734
- fr: {
735
- topUp: "Recharger",
736
- dailyBonusTitle: "🔥 Bonus Quotidien",
737
- claimNow: "Réclamer",
738
- gameOfDay: "Jeu du Jour",
739
- playNow: "Jouer",
740
- ourGames: "Nos Jeux",
741
- addFunds: "Ajouter des Fonds",
742
- amount: "Montant",
743
- confirm: "Confirmer",
744
- yourBet: "Votre Mise",
745
- spin: "Tourner",
746
- hit: "Carte",
747
- stand: "Servi",
748
- pickColor: "Choisir Couleur",
749
- pickHigher: "Plus Haut",
750
- pickLower: "Plus Bas",
751
- flip: "Lancer",
752
- red: "Rouge",
753
- black: "Noir",
754
- green: "Vert",
755
- msgWin: "Vous avez gagné!",
756
- msgLose: "Vous avez perdu!",
757
- msgInsufficient: "Fonds insuffisants!",
758
- msgTopUpSuccess: "Fonds ajoutés avec succès!",
759
- bonusText: "Obtenez {value}% de plus sur chaque dépôt aujourd'hui!",
760
- games: {
761
- slots: { name: "Machine à Sous", desc: "Alignez les symboles!" },
762
- blackjack: { name: "Blackjack", desc: "Battre le croupier." },
763
- roulette: { name: "Mini Roulette", desc: "Choisissez votre couleur." },
764
- highlow: { name: "Plus ou Moins", desc: "Devinez la carte suivante." }
765
- }
766
- },
767
- de: {
768
- topUp: "Aufladen",
769
- dailyBonusTitle: "🔥 Tägliches Bonus",
770
- claimNow: "Fordern",
771
- gameOfDay: "Spiel des Tages",
772
- playNow: "Jetzt Spielen",
773
- ourGames: "Unsere Spiele",
774
- addFunds: "Guthaben Aufladen",
775
- amount: "Betrag",
776
- confirm: "Bestätigen",
777
- yourBet: "Dein Einsatz",
778
- spin: "Drehen",
779
- hit: "Karte",
780
- stand: "Halten",
781
- pickColor: "Farbe Wählen",
782
- pickHigher: "Höher",
783
- pickLower: "Niedriger",
784
- flip: "Werfen",
785
- red: "Rot",
786
- black: "Schwarz",
787
- green: "Grün",
788
- msgWin: "Gewonnen!",
789
- msgLose: "Verloren!",
790
- msgInsufficient: "Nicht genug Guthaben!",
791
- msgTopUpSuccess: "Guthaben erfolgreich aufgeladen!",
792
- bonusText: "Erhalten Sie heute {value}% mehr auf jede Einzahlung!",
793
- games: {
794
- slots: { name: "Automatenspiele", desc: "Symbole kombinieren!" },
795
- blackjack: { name: "Blackjack", desc: "Schlagen Sie den Dealer." },
796
- roulette: { name: "Mini Roulette", desc: "Wähle deine Glücksfarbe." },
797
- highlow: { name: "Hoch Runter", desc: "Rate die nächste Karte." }
798
- }
799
- }
800
- };
801
-
802
- const gamesList = [
803
- { id: 'slots', icon: 'fa-dice', color: '#e74c3c' },
804
- { id: 'blackjack', icon: 'fa-cards', color: '#3498db' },
805
- { id: 'roulette', icon: 'fa-circle-notch', color: '#2ecc71' },
806
- { id: 'highlow', icon: 'fa-layer-group', color: '#9b59b6' }
807
- ];
808
-
809
- // --- CORE FUNCTIONS ---
810
-
811
- function init() {
812
- updateBalanceUI();
813
- setupDailyFeatures();
814
- renderGames();
815
- setupEventListeners();
816
- applyLanguage();
817
- }
818
-
819
- function t(key, sub = {}) {
820
- let str = translations[state.lang][key] || key;
821
- for (const [k, v] of Object.entries(sub)) {
822
- str = str.replace(`{${k}}`, v);
823
- }
824
- return str;
825
- }
826
-
827
- function applyLanguage() {
828
- document.querySelectorAll('[data-i18n]').forEach(el => {
829
- const key = el.getAttribute('data-i18n');
830
- el.textContent = t(key);
831
- });
832
- // Update dynamic text
833
- setupDailyFeatures(); // Re-render text for bonus
834
- renderGames(); // Re-render game titles
835
- }
836
-
837
- function updateBalanceUI() {
838
- document.getElementById('balanceAmount').textContent = state.balance;
839
- }
840
-
841
- function adjustBet(amount) {
842
- state.currentBet += amount;
843
- if (state.currentBet < 10) state.currentBet = 10;
844
- document.getElementById('currentBetDisplay').textContent = state.currentBet;
845
- }
846
-
847
- function showToast(msg, type = 'info') {
848
- const container = document.getElementById('toastContainer');
849
- const toast = document.createElement('div');
850
- toast.className = 'toast';
851
- toast.style.borderLeftColor = type === 'error' ? 'var(--accent-red)' : (type === 'success' ? 'var(--accent-green)' : 'var(--primary-gold)');
852
- toast.innerHTML = `<i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-info-circle'}"></i> <span>${msg}</span>`;
853
- container.appendChild(toast);
854
- setTimeout(() => toast.remove(), 3000);
855
- }
856
-
857
- // --- DAILY FEATURES ---
858
-
859
- function setupDailyFeatures() {
860
- const dayIndex = new Date().getDay(); // 0-6
861
-
862
- // Daily Bonus: Based on day (e.g., Sunday=10%, Monday=20%...)
863
- const bonusPercent = (dayIndex + 1) * 10;
864
- document.getElementById('dailyBonusText').textContent = t('bonusText', { value: bonusPercent });
865
-
866
- // Game of the Day: Rotate based on day
867
- const gameIndex = dayIndex % gamesList.length;
868
- const highlightGame = gamesList[gameIndex];
869
-
870
- const gameInfo = t('games')[highlightGame.id];
871
-
872
- document.getElementById('highlightTitle').textContent = gameInfo.name;
873
- document.getElementById('highlightDesc').textContent = gameInfo.desc;
874
-
875
- // Set image placeholder color
876
- const imgDiv = document.getElementById('highlightImage');
877
- imgDiv.style.background = `linear-gradient(45deg, ${highlightGame.color}, #000)`;
878
-
879
- // Setup play button
880
- const btn = document.getElementById('highlightPlayBtn');
881
- btn.onclick = () => openGame(highlightGame.id);
882
- }
883
-
884
- // --- RENDER & EVENTS ---
885
-
886
- function renderGames() {
887
- const grid = document.getElementById('gamesGrid');
888
- grid.innerHTML = '';
889
- gamesList.forEach(game => {
890
- const info = t('games')[game.id];
891
- const card = document.createElement('div');
892
- card.className = 'game-card';
893
- card.innerHTML = `
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
894
  <div class="card-img" style="background: linear-gradient(135deg, ${game.color}, #111);">
895
  <div class="card-overlay">
896
  <button class="btn btn-gold play-trigger" data-id="${game.id}">${t('playNow')}</button>
@@ -902,165 +982,55 @@
902
  <p>${info.desc}</p>
903
  </div>
904
  `;
905
- card.onclick = () => openGame(game.id);
906
- grid.appendChild(card);
907
- });
908
- }
909
-
910
- function setupEventListeners() {
911
- // Language
912
- document.getElementById('languageSelect').addEventListener('change', (e) => {
913
- state.lang = e.target.value;
914
- applyLanguage();
915
- });
916
-
917
- // Modals
918
- document.querySelectorAll('.close-modal').forEach(btn => {
919
- btn.onclick = () => {
920
- document.querySelectorAll('.modal-overlay').forEach(m => m.classList.remove('active'));
921
- };
922
- });
923
-
924
- // Top Up
925
- document.getElementById('topUpBtn').onclick = openTopUpModal;
926
- document.getElementById('confirmTopUp').onclick = processTopUp;
927
- }
928
-
929
- function openTopUpModal() {
930
- document.getElementById('topUpModal').classList.add('active');
931
- }
932
-
933
- function processTopUp() {
934
- const amount = parseInt(document.getElementById('topUpAmount').value);
935
- if (!amount || amount <= 0) {
936
- showToast(t('msgInsufficient'), 'error');
937
- return;
938
- }
939
- const dayIndex = new Date().getDay();
940
- const bonusPercent = (dayIndex + 1) * 10;
941
- const bonus = Math.floor(amount * (bonusPercent / 100));
942
- const total = amount + bonus;
943
-
944
- state.balance += total;
945
- updateBalanceUI();
946
- showToast(t('msgTopUpSuccess') + ` (+${bonus} bonus)`, 'success');
947
- document.getElementById('topUpModal').classList.remove('active');
948
- document.getElementById('topUpAmount').value = '';
949
- }
950
-
951
- // --- GAME LOGIC ---
952
-
953
- function openGame(gameId) {
954
- if (state.balance < state.currentBet) {
955
- showToast(t('msgInsufficient'), 'error');
956
- return;
957
- }
958
- state.activeGame = gameId;
959
- document.getElementById('activeGameTitle').textContent = t('games')[gameId].name;
960
- document.getElementById('gameModal').classList.add('active');
961
-
962
- const arena = document.getElementById('gameArena');
963
- const controls = document.getElementById('gameControls');
964
- arena.innerHTML = '';
965
- controls.innerHTML = '';
966
-
967
- // Initialize specific game
968
- switch(gameId) {
969
- case 'slots': initSlots(arena, controls); break;
970
- case 'blackjack': initBlackjack(arena, controls); break;
971
- case 'roulette': initRoulette(arena, controls); break;
972
- case 'highlow': initHighLow(arena, controls); break;
973
- }
974
- }
975
-
976
- function endGame(won, amount) {
977
- if (won) {
978
- state.balance += amount;
979
- showToast(`${t('msgWin')} +${amount}`, 'success');
980
- } else {
981
- state.balance -= state.currentBet;
982
- showToast(t('msgLose'), 'error');
983
- }
984
- updateBalanceUI();
985
- }
986
-
987
- // 1. SLOTS
988
- function initSlots(arena, controls) {
989
- const symbols = ['🍒', '��', '🍉', '⭐', '💎', '7️⃣'];
990
- arena.innerHTML = `
991
- <div class="slots-container">
992
- <div class="slot-reel" id="reel1">7️⃣</div>
993
- <div class="slot-reel" id="reel2">7️⃣</div>
994
- <div class="slot-reel" id="reel3">7️⃣</div>
995
- </div>
996
- <div class="game-result" id="slotResult"></div>
997
- `;
998
-
999
- const spinBtn = document.createElement('button');
1000
- spinBtn.className = 'btn btn-gold';
1001
- spinBtn.innerHTML = `<i class="fas fa-sync"></i> ${t('spin')}`;
1002
- spinBtn.onclick = () => {
1003
- if (state.balance < state.currentBet) return showToast(t('msgInsufficient'), 'error');
1004
-
1005
- spinBtn.disabled = true;
1006
- document.getElementById('slotResult').textContent = '...';
1007
-
1008
- // Animation simulation
1009
- let spins = 0;
1010
- const interval = setInterval(() => {
1011
- document.getElementById('reel1').textContent = symbols[Math.floor(Math.random()*symbols.length)];
1012
- document.getElementById('reel2').textContent = symbols[Math.floor(Math.random()*symbols.length)];
1013
- document.getElementById('reel3').textContent = symbols[Math.floor(Math.random()*symbols.length)];
1014
- spins++;
1015
- if (spins > 10) {
1016
- clearInterval(interval);
1017
- finalizeSlots(symbols);
1018
- spinBtn.disabled = false;
1019
- }
1020
- }, 100);
1021
- };
1022
- controls.appendChild(spinBtn);
1023
- }
1024
-
1025
- function finalizeSlots(symbols) {
1026
- const r1 = symbols[Math.floor(Math.random()*symbols.length)];
1027
- const r2 = symbols[Math.floor(Math.random()*symbols.length)];
1028
- const r3 = symbols[Math.floor(Math.random()*symbols.length)];
1029
-
1030
- document.getElementById('reel1').textContent = r1;
1031
- document.getElementById('reel2').textContent = r2;
1032
- document.getElementById('reel3').textContent = r3;
1033
-
1034
- const resDiv = document.getElementById('slotResult');
1035
- if (r1 === r2 && r2 === r3) {
1036
- resDiv.textContent = t('msgWin');
1037
- resDiv.className = 'game-result win-anim';
1038
- endGame(true, state.currentBet * 10);
1039
- } else if (r1 === r2 || r2 === r3 || r1 === r3) {
1040
- resDiv.textContent = "Small Win!";
1041
- resDiv.className = 'game-result win-anim';
1042
- endGame(true, state.currentBet * 2);
1043
- } else {
1044
- resDiv.textContent = t('msgLose');
1045
- resDiv.className = 'game-result lose-anim';
1046
- endGame(false, 0);
1047
- }
1048
- }
1049
-
1050
- // 2. BLACKJACK (Simplified)
1051
- let bjDeck = [];
1052
- function initBlackjack(arena, controls) {
1053
- bjDeck = Array.from({length: 52}, (_, i) => {
1054
- const val = (i % 13) + 1;
1055
- return { val: val > 10 ? 10 : val, suit: ['♠','♥','♦','♣'][Math.floor(i/13)] };
1056
- });
1057
- // Shuffle
1058
- bjDeck.sort(() => Math.random() - 0.5);
1059
-
1060
- window.bjPlayer = [bjDeck.pop(), bjDeck.pop()];
1061
- window.bjDealer = [bjDeck.pop(), bjDeck.pop()];
1062
-
1063
- renderBJ(arena);
1064
-
1065
- const hitBtn = document.createElement('button');
1066
- hitBtn.className = 'btn
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+
4
  <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Royal Fortune Casino - Blackjack Edition</title>
8
+
9
+ <!-- Google Fonts -->
10
+ <link rel="preconnect" href="https://fonts.googleapis.com">
11
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
+ <link
13
+ href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Roboto:wght@300;400;500;700&display=swap"
14
+ rel="stylesheet">
15
+
16
+ <!-- FontAwesome for Icons -->
17
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
18
+
19
+ <style>
20
+ :root {
21
+ --primary-gold: #d4af37;
22
+ --primary-gold-hover: #f3cf55;
23
+ --bg-dark: #0f0f13;
24
+ --bg-panel: #1a1a24;
25
+ --bg-card: #23232f;
26
+ --text-main: #ffffff;
27
+ --text-muted: #a0a0b0;
28
+ --accent-red: #e74c3c;
29
+ --accent-green: #2ecc71;
30
+ --radius: 12px;
31
+ --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
32
+ --glass: rgba(26, 26, 36, 0.85);
33
+ }
34
+
35
+ * {
36
+ box-sizing: border-box;
37
+ margin: 0;
38
+ padding: 0;
39
+ }
40
+
41
+ body {
42
+ font-family: 'Roboto', sans-serif;
43
+ background-color: var(--bg-dark);
44
+ color: var(--text-main);
45
+ line-height: 1.6;
46
+ overflow-x: hidden;
47
+ background-image: radial-gradient(circle at 10% 20%, #1a1a24 0%, #0f0f13 90%);
48
+ min-height: 100vh;
49
+ display: flex;
50
+ flex-direction: column;
51
+ }
52
+
53
+ /* Typography */
54
+ h1, h2, h3, h4 {
55
+ font-family: 'Cinzel', serif;
56
+ color: var(--primary-gold);
57
+ }
58
+
59
+ a {
60
+ text-decoration: none;
61
+ color: inherit;
62
+ transition: color 0.3s;
63
+ }
64
+
65
+ /* Utility */
66
+ .container {
67
+ max-width: 1200px;
68
+ margin: 0 auto;
69
+ padding: 0 20px;
70
+ flex: 1;
71
+ }
72
+
73
+ .btn {
74
+ display: inline-flex;
75
+ align-items: center;
76
+ gap: 8px;
77
+ padding: 10px 24px;
78
+ border-radius: 30px;
79
+ border: none;
80
+ font-weight: 600;
81
+ cursor: pointer;
82
+ transition: all 0.3s ease;
83
+ font-size: 0.95rem;
84
+ }
85
+
86
+ .btn-gold {
87
+ background: linear-gradient(135deg, var(--primary-gold), #b8860b);
88
+ color: #000;
89
+ }
90
+
91
+ .btn-gold:hover {
92
+ transform: translateY(-2px);
93
+ box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
94
+ background: linear-gradient(135deg, var(--primary-gold-hover), var(--primary-gold));
95
+ }
96
+
97
+ .btn-outline {
98
+ background: transparent;
99
+ border: 2px solid var(--primary-gold);
100
+ color: var(--primary-gold);
101
+ }
102
+
103
+ .btn-outline:hover {
104
+ background: var(--primary-gold);
105
+ color: #000;
106
+ }
107
+
108
+ .btn-danger {
109
+ background: var(--accent-red);
110
+ color: white;
111
+ }
112
 
113
+ .btn-danger:hover {
114
+ background: #c0392b;
115
+ }
116
+
117
+ .btn-success {
118
+ background: var(--accent-green);
119
+ color: white;
120
+ }
121
+
122
+ .btn-success:hover {
123
+ background: #27ae60;
124
+ }
125
+
126
+ /* Header */
127
+ header {
128
+ background: rgba(15, 15, 19, 0.95);
129
+ backdrop-filter: blur(10px);
130
+ position: sticky;
131
+ top: 0;
132
+ z-index: 100;
133
+ padding: 15px 0;
134
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
135
+ }
136
+
137
+ nav {
138
+ display: flex;
139
+ justify-content: space-between;
140
+ align-items: center;
141
+ }
142
+
143
+ .logo {
144
+ font-size: 1.5rem;
145
+ font-weight: 700;
146
+ display: flex;
147
+ align-items: center;
148
+ gap: 10px;
149
+ }
150
+
151
+ .logo i {
152
+ color: var(--primary-gold);
153
+ font-size: 1.8rem;
154
+ }
155
+
156
+ .nav-controls {
157
+ display: flex;
158
+ align-items: center;
159
+ gap: 20px;
160
+ }
161
+
162
+ .balance-display {
163
+ background: var(--bg-panel);
164
+ padding: 8px 16px;
165
+ border-radius: 20px;
166
+ border: 1px solid rgba(212, 175, 55, 0.3);
167
+ display: flex;
168
+ align-items: center;
169
+ gap: 8px;
170
+ font-weight: 700;
171
+ color: var(--primary-gold);
172
+ }
173
+
174
+ .lang-select {
175
+ background: var(--bg-panel);
176
+ color: var(--text-main);
177
+ border: 1px solid rgba(255, 255, 255, 0.1);
178
+ padding: 5px 10px;
179
+ border-radius: 6px;
180
+ cursor: pointer;
181
+ }
182
+
183
+ /* Hero / Highlight Section */
184
+ .hero {
185
+ padding: 40px 0;
186
+ text-align: center;
187
+ }
188
+
189
+ .daily-bonus-banner {
190
+ background: linear-gradient(90deg, #2c3e50, #000000);
191
+ border: 1px solid var(--primary-gold);
192
+ padding: 15px;
193
+ border-radius: var(--radius);
194
+ margin-bottom: 30px;
195
+ display: flex;
196
+ justify-content: space-between;
197
+ align-items: center;
198
+ flex-wrap: wrap;
199
+ gap: 15px;
200
+ }
201
+
202
+ .bonus-content h3 {
203
+ font-size: 1.2rem;
204
+ margin-bottom: 5px;
205
+ }
206
+
207
+ .bonus-content p {
208
+ color: var(--primary-gold);
209
+ font-weight: 700;
210
+ }
211
+
212
+ .game-highlight {
213
+ background: var(--bg-panel);
214
+ border-radius: var(--radius);
215
+ overflow: hidden;
216
+ box-shadow: var(--shadow);
217
+ position: relative;
218
+ border: 1px solid rgba(212, 175, 55, 0.2);
219
+ }
220
+
221
+ .highlight-badge {
222
+ position: absolute;
223
+ top: 20px;
224
+ left: -35px;
225
+ background: var(--accent-red);
226
+ color: white;
227
+ padding: 8px 40px;
228
+ transform: rotate(-45deg);
229
+ font-weight: bold;
230
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
231
+ z-index: 10;
232
+ }
233
+
234
+ .highlight-content {
235
+ display: grid;
236
+ grid-template-columns: 1fr 1fr;
237
+ align-items: center;
238
+ }
239
+
240
+ .highlight-image {
241
+ height: 400px;
242
+ background-size: cover;
243
+ background-position: center;
244
+ position: relative;
245
+ }
246
+
247
+ .highlight-image::after {
248
+ content: '';
249
+ position: absolute;
250
+ inset: 0;
251
+ background: linear-gradient(90deg, transparent 0%, var(--bg-panel) 100%);
252
+ }
253
+
254
+ .highlight-text {
255
+ padding: 40px;
256
+ text-align: left;
257
+ }
258
+
259
+ /* Games Grid */
260
+ .section-title {
261
+ text-align: center;
262
+ margin: 50px 0 30px;
263
+ font-size: 2rem;
264
+ position: relative;
265
+ display: inline-block;
266
+ left: 50%;
267
+ transform: translateX(-50%);
268
+ }
269
+
270
+ .section-title::after {
271
+ content: '';
272
+ display: block;
273
+ width: 60px;
274
+ height: 3px;
275
+ background: var(--primary-gold);
276
+ margin: 10px auto 0;
277
+ }
278
+
279
+ .games-grid {
280
+ display: grid;
281
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
282
+ gap: 25px;
283
+ padding-bottom: 60px;
284
+ }
285
+
286
+ .game-card {
287
+ background: var(--bg-card);
288
+ border-radius: var(--radius);
289
+ overflow: hidden;
290
+ transition: transform 0.3s, box-shadow 0.3s;
291
+ cursor: pointer;
292
+ border: 1px solid transparent;
293
+ position: relative;
294
+ }
295
+
296
+ .game-card:hover {
297
+ transform: translateY(-5px);
298
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
299
+ border-color: var(--primary-gold);
300
+ }
301
+
302
+ .card-img {
303
+ height: 180px;
304
+ background-color: #333;
305
+ background-size: cover;
306
+ background-position: center;
307
+ position: relative;
308
+ }
309
+
310
+ .card-overlay {
311
+ position: absolute;
312
+ inset: 0;
313
+ background: rgba(0, 0, 0, 0.6);
314
+ display: flex;
315
+ align-items: center;
316
+ justify-content: center;
317
+ opacity: 0;
318
+ transition: opacity 0.3s;
319
+ }
320
+
321
+ .game-card:hover .card-overlay {
322
+ opacity: 1;
323
+ }
324
+
325
+ .card-body {
326
+ padding: 20px;
327
+ }
328
+
329
+ .card-body h4 {
330
+ font-size: 1.2rem;
331
+ margin-bottom: 5px;
332
+ color: #fff;
333
+ }
334
+
335
+ .card-body p {
336
+ font-size: 0.9rem;
337
+ color: var(--text-muted);
338
+ }
339
+
340
+ /* Modals */
341
+ .modal-overlay {
342
+ position: fixed;
343
+ inset: 0;
344
+ background: rgba(0, 0, 0, 0.8);
345
+ backdrop-filter: blur(5px);
346
+ z-index: 1000;
347
+ display: flex;
348
+ align-items: center;
349
+ justify-content: center;
350
+ opacity: 0;
351
+ visibility: hidden;
352
+ transition: all 0.3s;
353
+ }
354
+
355
+ .modal-overlay.active {
356
+ opacity: 1;
357
+ visibility: visible;
358
+ }
359
+
360
+ .modal {
361
+ background: var(--bg-panel);
362
+ width: 90%;
363
+ max-width: 600px; /* Wider for Blackjack */
364
+ border-radius: var(--radius);
365
+ padding: 30px;
366
+ position: relative;
367
+ transform: scale(0.9);
368
+ transition: transform 0.3s;
369
+ border: 1px solid var(--primary-gold);
370
+ box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
371
+ }
372
+
373
+ .modal-overlay.active .modal {
374
+ transform: scale(1);
375
+ }
376
+
377
+ .modal-header {
378
+ display: flex;
379
+ justify-content: space-between;
380
+ align-items: center;
381
+ margin-bottom: 20px;
382
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
383
+ padding-bottom: 15px;
384
+ }
385
+
386
+ .close-modal {
387
+ background: none;
388
+ border: none;
389
+ color: var(--text-muted);
390
+ font-size: 1.5rem;
391
+ cursor: pointer;
392
+ }
393
+
394
+ .close-modal:hover {
395
+ color: #fff;
396
+ }
397
+
398
+ /* Forms */
399
+ .form-group {
400
+ margin-bottom: 20px;
401
+ }
402
+
403
+ .form-label {
404
+ display: block;
405
+ margin-bottom: 8px;
406
+ color: var(--text-muted);
407
+ }
408
+
409
+ .form-input {
410
+ width: 100%;
411
+ padding: 12px;
412
+ background: var(--bg-dark);
413
+ border: 1px solid rgba(255, 255, 255, 0.1);
414
+ border-radius: 8px;
415
+ color: #fff;
416
+ font-size: 1rem;
417
+ }
418
+
419
+ .form-input:focus {
420
+ outline: none;
421
+ border-color: var(--primary-gold);
422
+ }
423
+
424
+ /* Game UI Specifics */
425
+ .game-area {
426
+ background: #050507; /* Darker felt color */
427
+ padding: 20px;
428
+ border-radius: 12px;
429
+ text-align: center;
430
+ min-height: 300px;
431
+ display: flex;
432
+ flex-direction: column;
433
+ justify-content: space-between;
434
+ border: 2px solid #333;
435
+ box-shadow: inset 0 0 50px rgba(0,0,0,0.8);
436
+ }
437
+
438
+ .game-controls {
439
+ display: flex;
440
+ gap: 10px;
441
+ justify-content: center;
442
+ margin-top: 20px;
443
+ flex-wrap: wrap;
444
+ }
445
+
446
+ .game-result {
447
+ font-size: 1.5rem;
448
+ font-weight: bold;
449
+ min-height: 2em;
450
+ margin: 10px 0;
451
+ text-shadow: 0 2px 4px rgba(0,0,0,0.5);
452
+ }
453
+
454
+ .win-anim {
455
+ color: var(--accent-green);
456
+ animation: pulse 0.5s;
457
+ }
458
+
459
+ .lose-anim {
460
+ color: var(--accent-red);
461
+ }
462
+
463
+ @keyframes pulse {
464
+ 0% { transform: scale(1); }
465
+ 50% { transform: scale(1.1); }
466
+ 100% { transform: scale(1); }
467
+ }
468
+
469
+ /* Toast Notification */
470
+ .toast-container {
471
+ position: fixed;
472
+ bottom: 20px;
473
+ right: 20px;
474
+ z-index: 2000;
475
+ display: flex;
476
+ flex-direction: column;
477
+ gap: 10px;
478
+ }
479
+
480
+ .toast {
481
+ background: var(--bg-panel);
482
+ border-left: 4px solid var(--primary-gold);
483
+ color: #fff;
484
+ padding: 15px 25px;
485
+ border-radius: 4px;
486
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
487
+ display: flex;
488
+ align-items: center;
489
+ gap: 10px;
490
+ animation: slideIn 0.3s ease-out forwards;
491
+ min-width: 250px;
492
+ }
493
+
494
+ @keyframes slideIn {
495
+ from { transform: translateX(100%); opacity: 0; }
496
+ to { transform: translateX(0); opacity: 1; }
497
+ }
498
+
499
+ /* --- BLACKJACK SPECIFIC STYLES --- */
500
+ .bj-table {
501
+ width: 100%;
502
+ display: flex;
503
+ flex-direction: column;
504
+ gap: 20px;
505
+ height: 100%;
506
+ }
507
+
508
+ .hand-area {
509
+ display: flex;
510
+ flex-direction: column;
511
+ align-items: center;
512
+ gap: 10px;
513
+ }
514
+
515
+ .hand-label {
516
+ font-size: 0.9rem;
517
+ color: var(--text-muted);
518
+ text-transform: uppercase;
519
+ letter-spacing: 1px;
520
+ }
521
+
522
+ .cards-container {
523
+ display: flex;
524
+ justify-content: center;
525
+ gap: 10px;
526
+ min-height: 100px;
527
+ flex-wrap: wrap;
528
+ }
529
+
530
+ .playing-card {
531
+ width: 60px;
532
+ height: 90px;
533
+ background: white;
534
+ border-radius: 6px;
535
+ color: black;
536
+ font-weight: bold;
537
+ font-size: 1.2rem;
538
+ display: flex;
539
+ flex-direction: column;
540
+ justify-content: space-between;
541
+ padding: 5px;
542
+ box-shadow: 0 2px 5px rgba(0,0,0,0.3);
543
+ position: relative;
544
+ user-select: none;
545
+ animation: dealCard 0.3s ease-out;
546
+ }
547
+
548
+ @keyframes dealCard {
549
+ from { transform: translateY(-50px) scale(0.5); opacity: 0; }
550
+ to { transform: translateY(0) scale(1); opacity: 1; }
551
+ }
552
+
553
+ .playing-card.red { color: #d00; }
554
+ .playing-card.black { color: #000; }
555
+
556
+ .card-center {
557
+ position: absolute;
558
+ top: 50%;
559
+ left: 50%;
560
+ transform: translate(-50%, -50%);
561
+ font-size: 1.8rem;
562
+ }
563
+
564
+ .card-corner-bottom {
565
+ transform: rotate(180deg);
566
+ }
567
+
568
+ .score-bubble {
569
+ background: rgba(0,0,0,0.6);
570
+ padding: 2px 8px;
571
+ border-radius: 10px;
572
+ font-size: 0.8rem;
573
+ color: white;
574
+ margin-top: 5px;
575
+ }
576
+
577
+ .hidden-card {
578
+ background: repeating-linear-gradient(
579
+ 45deg,
580
+ #606dbc,
581
+ #606dbc 10px,
582
+ #465298 10px,
583
+ #465298 20px
584
+ );
585
+ border: 2px solid white;
586
+ }
587
+
588
+ /* Responsive */
589
+ @media (max-width: 768px) {
590
+ .highlight-content { grid-template-columns: 1fr; }
591
+ .highlight-image { height: 250px; }
592
+ .highlight-image::after { background: linear-gradient(180deg, transparent 0%, var(--bg-panel) 100%); }
593
+ .nav-controls span { display: none; }
594
+ .daily-bonus-banner { flex-direction: column; text-align: center; }
595
+ .modal { width: 95%; padding: 20px; }
596
+ .playing-card { width: 50px; height: 75px; font-size: 1rem; }
597
+ .card-center { font-size: 1.5rem; }
598
+ }
599
+ </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
600
  </head>
601
+
602
  <body>
603
 
604
+ <!-- Header -->
605
+ <header>
606
+ <div class="container">
607
+ <nav>
608
+ <div class="logo">
609
+ <i class="fas fa-crown"></i>
610
+ ROYAL FORTUNE
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
611
  </div>
612
+ <div class="nav-controls">
613
+ <select id="languageSelect" class="lang-select">
614
+ <option value="en">EN</option>
615
+ <option value="es">ES</option>
616
+ <option value="fr">FR</option>
617
+ <option value="de">DE</option>
618
+ </select>
619
+ <div class="balance-display">
620
+ <i class="fas fa-coins"></i>
621
+ <span id="balanceAmount">1000</span>
622
+ </div>
623
+ <button class="btn btn-gold" id="topUpBtn">
624
+ <i class="fas fa-plus-circle"></i> <span data-i18n="topUp">Top Up</span>
625
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
626
  </div>
627
+ </nav>
628
  </div>
629
+ </header>
630
+
631
+ <main class="container">
632
 
633
+ <!-- Hero & Daily Bonus -->
634
+ <section class="hero">
635
+ <div class="daily-bonus-banner">
636
+ <div class="bonus-content">
637
+ <h3 data-i18n="dailyBonusTitle">🔥 Daily Deposit Bonus</h3>
638
+ <p id="dailyBonusText">Loading...</p>
 
 
 
 
 
 
 
 
 
 
 
 
639
  </div>
640
+ <button class="btn btn-outline" onclick="openTopUpModal()" data-i18n="claimNow">Claim Now</button>
641
+ </div>
642
+
643
+ <div class="game-highlight" id="highlightSection">
644
+ <div class="highlight-badge" data-i18n="gameOfDay">Game of the Day</div>
645
+ <div class="highlight-content">
646
+ <div class="highlight-image" id="highlightImage"></div>
647
+ <div class="highlight-text">
648
+ <h2 id="highlightTitle">Loading...</h2>
649
+ <p id="highlightDesc" style="color: var(--text-muted); margin: 15px 0;">Loading description...</p>
650
+ <button class="btn btn-gold" id="highlightPlayBtn">
651
+ <i class="fas fa-play"></i> <span data-i18n="playNow">Play Now</span>
652
+ </button>
653
+ </div>
654
+ </div>
655
+ </div>
656
+ </section>
657
+
658
+ <!-- Games Grid -->
659
+ <h2 class="section-title" data-i18n="ourGames">Our Games</h2>
660
+ <section class="games-grid" id="gamesGrid">
661
+ <!-- Games injected via JS -->
662
+ </section>
663
+
664
+ </main>
665
+
666
+ <footer style="text-align: center; padding: 40px; color: var(--text-muted); font-size: 0.8rem; border-top: 1px solid rgba(255,255,255,0.05); background: var(--bg-panel);">
667
+ <p>&copy; 2023 Royal Fortune Casino. All rights reserved.</p>
668
+ <p style="margin-top: 10px;">Please gamble responsibly. This is a demo application.</p>
669
+ <div style="margin-top: 20px;">
670
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: var(--primary-gold); font-weight: bold;">
671
+ Built with anycoder
672
+ </a>
673
  </div>
674
+ </footer>
675
+
676
+ <!-- TOP UP MODAL -->
677
+ <div class="modal-overlay" id="topUpModal">
678
+ <div class="modal">
679
+ <div class="modal-header">
680
+ <h3 data-i18n="addFunds">Add Funds</h3>
681
+ <button class="close-modal">&times;</button>
682
+ </div>
683
+ <div class="form-group">
684
+ <label class="form-label" data-i18n="amount">Amount</label>
685
+ <input type="number" id="topUpAmount" class="form-input" placeholder="Enter amount..." min="10">
686
+ </div>
687
+ <button class="btn btn-gold" id="confirmTopUp" style="width: 100%" data-i18n="confirm">Confirm</button>
688
+ </div>
689
+ </div>
690
+
691
+ <!-- GAME MODAL -->
692
+ <div class="modal-overlay" id="gameModal">
693
+ <div class="modal">
694
+ <div class="modal-header">
695
+ <h3 id="activeGameTitle">Game Title</h3>
696
+ <button class="close-modal">&times;</button>
697
+ </div>
698
+
699
+ <div class="game-area" id="gameArena">
700
+ <!-- Dynamic Game Content Here -->
701
+ </div>
702
+
703
+ <div class="game-controls" id="gameControls">
704
+ <!-- Dynamic Controls Here -->
705
+ </div>
706
+
707
+ <div style="text-align: center; margin-top: 15px; color: var(--text-muted); font-size: 0.9rem; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 15px;">
708
+ <span data-i18n="yourBet">Your Bet</span>:
709
+ <span id="currentBetDisplay" style="color: #fff; font-weight: bold; margin-left: 5px;">10</span>
710
+ <div style="margin-top: 10px;">
711
+ <button class="btn btn-outline" style="padding: 2px 10px; font-size: 0.8rem;" onclick="adjustBet(10)">+10</button>
712
+ <button class="btn btn-outline" style="padding: 2px 10px; font-size: 0.8rem;" onclick="adjustBet(-10)">-10</button>
713
+ </div>
714
+ </div>
715
+ </div>
716
+ </div>
717
+
718
+ <!-- Toast Container -->
719
+ <div class="toast-container" id="toastContainer"></div>
720
+
721
+ <script>
722
+ // --- DATA & STATE ---
723
+ const state = {
724
+ balance: 1000,
725
+ currentBet: 10,
726
+ lang: 'en',
727
+ activeGame: null
728
+ };
729
+
730
+ const translations = {
731
+ en: {
732
+ topUp: "Top Up",
733
+ dailyBonusTitle: "🔥 Daily Deposit Bonus",
734
+ claimNow: "Claim Now",
735
+ gameOfDay: "Game of the Day",
736
+ playNow: "Play Now",
737
+ ourGames: "Our Games",
738
+ addFunds: "Add Funds",
739
+ amount: "Amount",
740
+ confirm: "Confirm",
741
+ yourBet: "Your Bet",
742
+ spin: "Spin",
743
+ hit: "Hit",
744
+ stand: "Stand",
745
+ double: "Double",
746
+ pickColor: "Pick Color",
747
+ pickHigher: "Higher",
748
+ pickLower: "Lower",
749
+ flip: "Flip Coin",
750
+ red: "Red",
751
+ black: "Black",
752
+ green: "Green",
753
+ msgWin: "You Won!",
754
+ msgLose: "Dealer Wins",
755
+ msgPush: "Push (Tie)",
756
+ msgBust: "Bust! You Lose",
757
+ msgBlackjack: "BLACKJACK!",
758
+ msgInsufficient: "Insufficient funds!",
759
+ msgTopUpSuccess: "Funds added successfully!",
760
+ bonusText: "Get {value}% extra on every deposit today!",
761
+ dealer: "Dealer",
762
+ you: "You",
763
+ games: {
764
+ slots: { name: "Neon Slots", desc: "Match symbols to win big!" },
765
+ blackjack: { name: "Blackjack", desc: "Beat the dealer to 21." },
766
+ roulette: { name: "Mini Roulette", desc: "Pick your lucky color." },
767
+ highlow: { name: "High Low", desc: "Guess the next card." }
768
+ }
769
+ },
770
+ es: {
771
+ topUp: "Recargar",
772
+ dailyBonusTitle: "🔥 Bono Diario",
773
+ claimNow: "Reclamar",
774
+ gameOfDay: "Juego del Día",
775
+ playNow: "Jugar Ahora",
776
+ ourGames: "Nuestros Juegos",
777
+ addFunds: "Añadir Fondos",
778
+ amount: "Cantidad",
779
+ confirm: "Confirmar",
780
+ yourBet: "Tu Apuesta",
781
+ spin: "Girar",
782
+ hit: "Pedir",
783
+ stand: "Plantarse",
784
+ double: "Doblar",
785
+ pickColor: "Elige Color",
786
+ pickHigher: "Más Alto",
787
+ pickLower: "Más Bajo",
788
+ flip: "Lanzar",
789
+ red: "Rojo",
790
+ black: "Negro",
791
+ green: "Verde",
792
+ msgWin: "¡Ganaste!",
793
+ msgLose: "Gana la Casa",
794
+ msgPush: "Empate",
795
+ msgBust: "¡Te pasaste!",
796
+ msgBlackjack: "¡BLACKJACK!",
797
+ msgInsufficient: "¡Fondos insuficientes!",
798
+ msgTopUpSuccess: "¡Fondos añadidos con éxito!",
799
+ bonusText: "¡Obtén un {value}% extra en cada depósito hoy!",
800
+ dealer: "Croupier",
801
+ you: "Tú",
802
+ games: {
803
+ slots: { name: "Tragamonedas", desc: "¡Combina símbolos para ganar!" },
804
+ blackjack: { name: "Blackjack", desc: "Supera al croupier con 21." },
805
+ roulette: { name: "Ruleta Mini", desc: "Elige tu color de la suerte." },
806
+ highlow: { name: "Alto Bajo", desc: "Adivina la siguiente carta." }
807
+ }
808
+ },
809
+ fr: {
810
+ topUp: "Recharger",
811
+ dailyBonusTitle: "🔥 Bonus Quotidien",
812
+ claimNow: "Réclamer",
813
+ gameOfDay: "Jeu du Jour",
814
+ playNow: "Jouer",
815
+ ourGames: "Nos Jeux",
816
+ addFunds: "Ajouter des Fonds",
817
+ amount: "Montant",
818
+ confirm: "Confirmer",
819
+ yourBet: "Votre Mise",
820
+ spin: "Tourner",
821
+ hit: "Carte",
822
+ stand: "Servi",
823
+ double: "Doubler",
824
+ pickColor: "Choisir Couleur",
825
+ pickHigher: "Plus Haut",
826
+ pickLower: "Plus Bas",
827
+ flip: "Lancer",
828
+ red: "Rouge",
829
+ black: "Noir",
830
+ green: "Vert",
831
+ msgWin: "Vous avez gagné!",
832
+ msgLose: "La Maison Gagne",
833
+ msgPush: "Égalité",
834
+ msgBust: "Perdu!",
835
+ msgBlackjack: "BLACKJACK!",
836
+ msgInsufficient: "Fonds insuffisants!",
837
+ msgTopUpSuccess: "Fonds ajoutés avec succès!",
838
+ bonusText: "Obtenez {value}% de plus sur chaque dépôt aujourd'hui!",
839
+ dealer: "Croupier",
840
+ you: "Vous",
841
+ games: {
842
+ slots: { name: "Machine à Sous", desc: "Alignez les symboles!" },
843
+ blackjack: { name: "Blackjack", desc: "Battre le croupier." },
844
+ roulette: { name: "Mini Roulette", desc: "Choisissez votre couleur." },
845
+ highlow: { name: "Plus ou Moins", desc: "Devinez la carte suivante." }
846
+ }
847
+ },
848
+ de: {
849
+ topUp: "Aufladen",
850
+ dailyBonusTitle: "🔥 Tägliches Bonus",
851
+ claimNow: "Fordern",
852
+ gameOfDay: "Spiel des Tages",
853
+ playNow: "Jetzt Spielen",
854
+ ourGames: "Unsere Spiele",
855
+ addFunds: "Guthaben Aufladen",
856
+ amount: "Betrag",
857
+ confirm: "Bestätigen",
858
+ yourBet: "Dein Einsatz",
859
+ spin: "Drehen",
860
+ hit: "Karte",
861
+ stand: "Halten",
862
+ double: "Verdoppeln",
863
+ pickColor: "Farbe Wählen",
864
+ pickHigher: "Höher",
865
+ pickLower: "Niedriger",
866
+ flip: "Werfen",
867
+ red: "Rot",
868
+ black: "Schwarz",
869
+ green: "Grün",
870
+ msgWin: "Gewonnen!",
871
+ msgLose: "Bank Gewinnt",
872
+ msgPush: "Unentschieden",
873
+ msgBust: "Verloren!",
874
+ msgBlackjack: "BLACKJACK!",
875
+ msgInsufficient: "Nicht genug Guthaben!",
876
+ msgTopUpSuccess: "Guthaben erfolgreich aufgeladen!",
877
+ bonusText: "Erhalten Sie heute {value}% mehr auf jede Einzahlung!",
878
+ dealer: "Dealer",
879
+ you: "Sie",
880
+ games: {
881
+ slots: { name: "Automatenspiele", desc: "Symbole kombinieren!" },
882
+ blackjack: { name: "Blackjack", desc: "Schlagen Sie den Dealer." },
883
+ roulette: { name: "Mini Roulette", desc: "Wähle deine Glücksfarbe." },
884
+ highlow: { name: "Hoch Runter", desc: "Rate die nächste Karte." }
885
+ }
886
+ }
887
+ };
888
+
889
+ const gamesList = [
890
+ { id: 'blackjack', icon: 'fa-diamond', color: '#e74c3c' }, // Prioritized
891
+ { id: 'slots', icon: 'fa-dice', color: '#e74c3c' },
892
+ { id: 'roulette', icon: 'fa-circle-notch', color: '#2ecc71' },
893
+ { id: 'highlow', icon: 'fa-layer-group', color: '#9b59b6' }
894
+ ];
895
+
896
+ // --- CORE FUNCTIONS ---
897
+
898
+ function init() {
899
+ updateBalanceUI();
900
+ setupDailyFeatures();
901
+ renderGames();
902
+ setupEventListeners();
903
+ applyLanguage();
904
+ }
905
+
906
+ function t(key, sub = {}) {
907
+ let str = translations[state.lang][key] || key;
908
+ for (const [k, v] of Object.entries(sub)) {
909
+ str = str.replace(`{${k}}`, v);
910
+ }
911
+ return str;
912
+ }
913
+
914
+ function applyLanguage() {
915
+ document.querySelectorAll('[data-i18n]').forEach(el => {
916
+ const key = el.getAttribute('data-i18n');
917
+ el.textContent = t(key);
918
+ });
919
+ setupDailyFeatures();
920
+ renderGames();
921
+ }
922
+
923
+ function updateBalanceUI() {
924
+ document.getElementById('balanceAmount').textContent = state.balance;
925
+ }
926
+
927
+ function adjustBet(amount) {
928
+ state.currentBet += amount;
929
+ if (state.currentBet < 10) state.currentBet = 10;
930
+ document.getElementById('currentBetDisplay').textContent = state.currentBet;
931
+ }
932
+
933
+ function showToast(msg, type = 'info') {
934
+ const container = document.getElementById('toastContainer');
935
+ const toast = document.createElement('div');
936
+ toast.className = 'toast';
937
+ toast.style.borderLeftColor = type === 'error' ? 'var(--accent-red)' : (type === 'success' ? 'var(--accent-green)' : 'var(--primary-gold)');
938
+ toast.innerHTML = `<i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-info-circle'}"></i> <span>${msg}</span>`;
939
+ container.appendChild(toast);
940
+ setTimeout(() => toast.remove(), 3000);
941
+ }
942
+
943
+ // --- DAILY FEATURES ---
944
+
945
+ function setupDailyFeatures() {
946
+ const dayIndex = new Date().getDay();
947
+ const bonusPercent = (dayIndex + 1) * 10;
948
+ document.getElementById('dailyBonusText').textContent = t('bonusText', { value: bonusPercent });
949
+
950
+ const gameIndex = dayIndex % gamesList.length;
951
+ const highlightGame = gamesList[gameIndex];
952
+ const gameInfo = t('games')[highlightGame.id];
953
+
954
+ document.getElementById('highlightTitle').textContent = gameInfo.name;
955
+ document.getElementById('highlightDesc').textContent = gameInfo.desc;
956
+
957
+ const imgDiv = document.getElementById('highlightImage');
958
+ imgDiv.style.background = `linear-gradient(45deg, ${highlightGame.color}, #000)`;
959
+
960
+ const btn = document.getElementById('highlightPlayBtn');
961
+ btn.onclick = () => openGame(highlightGame.id);
962
+ }
963
+
964
+ // --- RENDER & EVENTS ---
965
+
966
+ function renderGames() {
967
+ const grid = document.getElementById('gamesGrid');
968
+ grid.innerHTML = '';
969
+ gamesList.forEach(game => {
970
+ const info = t('games')[game.id];
971
+ const card = document.createElement('div');
972
+ card.className = 'game-card';
973
+ card.innerHTML = `
974
  <div class="card-img" style="background: linear-gradient(135deg, ${game.color}, #111);">
975
  <div class="card-overlay">
976
  <button class="btn btn-gold play-trigger" data-id="${game.id}">${t('playNow')}</button>
 
982
  <p>${info.desc}</p>
983
  </div>
984
  `;
985
+ card.onclick = () => openGame(game.id);
986
+ grid.appendChild(card);
987
+ });
988
+ }
989
+
990
+ function setupEventListeners() {
991
+ document.getElementById('languageSelect').addEventListener('change', (e) => {
992
+ state.lang = e.target.value;
993
+ applyLanguage();
994
+ });
995
+
996
+ document.querySelectorAll('.close-modal').forEach(btn => {
997
+ btn.onclick = () => {
998
+ document.querySelectorAll('.modal-overlay').forEach(m => m.classList.remove('active'));
999
+ };
1000
+ });
1001
+
1002
+ document.getElementById('topUpBtn').onclick = openTopUpModal;
1003
+ document.getElementById('confirmTopUp').onclick = processTopUp;
1004
+ }
1005
+
1006
+ function openTopUpModal() {
1007
+ document.getElementById('topUpModal').classList.add('active');
1008
+ }
1009
+
1010
+ function processTopUp() {
1011
+ const amount = parseInt(document.getElementById('topUpAmount').value);
1012
+ if (!amount || amount <= 0) {
1013
+ showToast(t('msgInsufficient'), 'error');
1014
+ return;
1015
+ }
1016
+ const dayIndex = new Date().getDay();
1017
+ const bonusPercent = (dayIndex + 1) * 10;
1018
+ const bonus = Math.floor(amount * (bonusPercent / 100));
1019
+ const total = amount + bonus;
1020
+
1021
+ state.balance += total;
1022
+ updateBalanceUI();
1023
+ showToast(t('msgTopUpSuccess') + ` (+${bonus} bonus)`, 'success');
1024
+ document.getElementById('topUpModal').classList.remove('active');
1025
+ document.getElementById('topUpAmount').value = '';
1026
+ }
1027
+
1028
+ // --- GAME LOGIC ---
1029
+
1030
+ function openGame(gameId) {
1031
+ if (state.balance < state.currentBet) {
1032
+ showToast(t('msgInsufficient'), 'error');
1033
+ return;
1034
+ }
1035
+ state.activeGame = gameId;
1036
+ document.getElementById('activeGameTitle').textContent = t('games')[gameId].name;