Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>Fortuna Royale - Ultimate Casino Suite</title> | |
| <!-- Phosphor Icons --> | |
| <script src="https://unpkg.com/@phosphor-icons/web"></script> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Playfair+Display:wght@700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-dark: #0f1115; | |
| --bg-panel: #181b21; | |
| --bg-card: #232730; | |
| --primary: #ffd700; /* Gold */ | |
| --primary-glow: rgba(255, 215, 0, 0.4); | |
| --accent: #7c3aed; /* Purple */ | |
| --danger: #ef4444; | |
| --success: #10b981; | |
| --text-main: #ffffff; | |
| --text-muted: #9ca3af; | |
| --border: #2d3342; | |
| --radius-md: 12px; | |
| --radius-lg: 20px; | |
| --nav-height: 70px; | |
| --header-height: 60px; | |
| --font-main: 'Inter', sans-serif; | |
| --font-display: 'Playfair Display', serif; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background-color: var(--bg-dark); | |
| color: var(--text-main); | |
| font-family: var(--font-main); | |
| height: 100vh; | |
| overflow: hidden; /* App-like feel */ | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* --- Utilities --- */ | |
| .hidden { display: none ; } | |
| .flex { display: flex; } | |
| .flex-col { flex-direction: column; } | |
| .items-center { align-items: center; } | |
| .justify-between { justify-content: space-between; } | |
| .justify-center { justify-content: center; } | |
| .gap-2 { gap: 0.5rem; } | |
| .gap-4 { gap: 1rem; } | |
| .w-full { width: 100%; } | |
| .text-center { text-align: center; } | |
| button { | |
| border: none; | |
| outline: none; | |
| cursor: pointer; | |
| font-family: inherit; | |
| transition: all 0.2s ease; | |
| } | |
| .btn { | |
| padding: 10px 20px; | |
| border-radius: var(--radius-md); | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%); | |
| color: #000; | |
| box-shadow: 0 4px 15px var(--primary-glow); | |
| } | |
| .btn-primary:active { transform: scale(0.96); } | |
| .btn-secondary { | |
| background: var(--bg-card); | |
| color: var(--text-main); | |
| border: 1px solid var(--border); | |
| } | |
| .btn-secondary:active { background: var(--border); } | |
| .btn-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: var(--bg-card); | |
| color: var(--text-main); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.2rem; | |
| } | |
| /* --- Layout --- */ | |
| #app-container { | |
| flex: 1; | |
| position: relative; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| scroll-behavior: smooth; | |
| padding-bottom: calc(var(--nav-height) + 20px); | |
| } | |
| header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 50; | |
| height: var(--header-height); | |
| background: rgba(15, 17, 21, 0.9); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 16px; | |
| } | |
| .logo { | |
| font-family: var(--font-display); | |
| font-size: 1.4rem; | |
| color: var(--primary); | |
| text-shadow: 0 0 10px var(--primary-glow); | |
| } | |
| .wallet-pill { | |
| background: var(--bg-card); | |
| padding: 6px 12px; | |
| border-radius: 20px; | |
| border: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| } | |
| /* --- Bottom Nav --- */ | |
| nav { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: var(--nav-height); | |
| background: rgba(24, 27, 33, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| justify-content: space-around; | |
| align-items: center; | |
| z-index: 100; | |
| padding-bottom: env(safe-area-inset-bottom); | |
| } | |
| .nav-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 4px; | |
| color: var(--text-muted); | |
| font-size: 0.75rem; | |
| background: none; | |
| } | |
| .nav-item i { | |
| font-size: 1.5rem; | |
| margin-bottom: 2px; | |
| } | |
| .nav-item.active { | |
| color: var(--primary); | |
| } | |
| /* --- Screens --- */ | |
| .screen { | |
| padding: 20px; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* --- Home Screen --- */ | |
| .hero-banner { | |
| background: linear-gradient(45deg, var(--bg-card), var(--accent)); | |
| border-radius: var(--radius-lg); | |
| padding: 20px; | |
| margin-bottom: 24px; | |
| position: relative; | |
| overflow: hidden; | |
| border: 1px solid rgba(124, 58, 237, 0.3); | |
| } | |
| .hero-banner::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjIiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wNSkiLz48L3N2Zz4='); | |
| opacity: 0.3; | |
| } | |
| .hero-title { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: 8px; } | |
| .hero-desc { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 16px; } | |
| .section-title { | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| margin: 24px 0 16px 0; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .section-title a { font-size: 0.8rem; color: var(--accent); text-decoration: none; } | |
| .category-scroll { | |
| display: flex; | |
| gap: 12px; | |
| overflow-x: auto; | |
| padding-bottom: 10px; | |
| scrollbar-width: none; | |
| } | |
| .category-scroll::-webkit-scrollbar { display: none; } | |
| .cat-chip { | |
| background: var(--bg-card); | |
| padding: 8px 16px; | |
| border-radius: 20px; | |
| white-space: nowrap; | |
| border: 1px solid var(--border); | |
| font-size: 0.85rem; | |
| } | |
| .cat-chip.active { background: var(--accent); border-color: var(--accent); color: white; } | |
| .game-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 16px; | |
| } | |
| .game-card { | |
| background: var(--bg-card); | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| border: 1px solid var(--border); | |
| position: relative; | |
| } | |
| .game-card-img { | |
| width: 100%; | |
| aspect-ratio: 1; | |
| object-fit: cover; | |
| background: #2d3342; | |
| } | |
| .game-card-info { | |
| padding: 12px; | |
| } | |
| .game-card-title { | |
| font-weight: 600; | |
| font-size: 0.95rem; | |
| margin-bottom: 4px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .game-card-rtp { | |
| font-size: 0.75rem; | |
| color: var(--success); | |
| } | |
| /* --- Wallet Screen --- */ | |
| .wallet-card { | |
| background: linear-gradient(135deg, #1e293b, #0f172a); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 24px; | |
| text-align: center; | |
| margin-bottom: 20px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.3); | |
| } | |
| .balance-amount { | |
| font-size: 2.5rem; | |
| font-weight: 800; | |
| font-family: var(--font-display); | |
| color: var(--primary); | |
| margin: 10px 0; | |
| } | |
| .action-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 16px; | |
| margin-bottom: 24px; | |
| } | |
| .quick-action { | |
| background: var(--bg-card); | |
| padding: 16px; | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| border: 1px solid var(--border); | |
| } | |
| .quick-action i { font-size: 1.5rem; color: var(--primary); } | |
| .quick-action span { font-size: 0.9rem; font-weight: 600; } | |
| .history-list { | |
| background: var(--bg-card); | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| } | |
| .history-item { | |
| padding: 16px; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .history-item:last-child { border-bottom: none; } | |
| .tx-type { font-weight: 600; } | |
| .tx-amount { font-weight: 700; } | |
| .tx-amount.win { color: var(--success); } | |
| .tx-amount.loss { color: var(--danger); } | |
| /* --- Game Screen (The Engine) --- */ | |
| #game-screen { | |
| position: fixed; | |
| top: 0; left: 0; width: 100%; height: 100%; | |
| background: #000; | |
| z-index: 200; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .game-header { | |
| padding: 10px 16px; | |
| background: rgba(0,0,0,0.8); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .game-canvas-container { | |
| flex: 1; | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| } | |
| .game-controls { | |
| padding: 20px; | |
| background: rgba(15, 17, 21, 0.95); | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| /* --- Slots Specific --- */ | |
| .slot-machine { | |
| background: #2a2a2a; | |
| padding: 20px; | |
| border-radius: var(--radius-md); | |
| border: 4px solid #444; | |
| box-shadow: inset 0 0 20px #000; | |
| width: 100%; | |
| max-width: 400px; | |
| } | |
| .reels-container { | |
| display: flex; | |
| gap: 10px; | |
| overflow: hidden; | |
| height: 120px; | |
| position: relative; | |
| } | |
| .reel { | |
| flex: 1; | |
| background: #fff; | |
| border-radius: 8px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 3rem; | |
| box-shadow: inset 0 0 10px rgba(0,0,0,0.2); | |
| position: relative; | |
| } | |
| .reel::before, .reel::after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; right: 0; height: 30px; | |
| background: linear-gradient(to bottom, #fff, transparent); | |
| z-index: 2; | |
| } | |
| .reel::after { top: 100%; transform: translateY(-100%); background: linear-gradient(to top, #fff, transparent); } | |
| .payline-indicator { | |
| position: absolute; | |
| top: 50%; left: 0; right: 0; | |
| height: 2px; | |
| background: rgba(255, 0, 0, 0.5); | |
| transform: translateY(-50%); | |
| z-index: 10; | |
| pointer-events: none; | |
| } | |
| /* --- Modal --- */ | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; left: 0; width: 100%; height: 100%; | |
| background: rgba(0,0,0,0.8); | |
| z-index: 300; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s; | |
| } | |
| .modal-overlay.open { opacity: 1; pointer-events: all; } | |
| .modal { | |
| background: var(--bg-panel); | |
| border-radius: var(--radius-lg); | |
| width: 100%; | |
| max-width: 400px; | |
| border: 1px solid var(--border); | |
| transform: scale(0.9); | |
| transition: transform 0.3s; | |
| } | |
| .modal-overlay.open .modal { transform: scale(1); } | |
| .modal-header { | |
| padding: 16px; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-weight: 700; | |
| } | |
| .modal-body { padding: 20px; } | |
| .modal-footer { | |
| padding: 16px; | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 10px; | |
| } | |
| .input-group { margin-bottom: 15px; } | |
| .input-group label { display: block; margin-bottom: 8px; font-size: 0.9rem; color: var(--text-muted); } | |
| .input-field { | |
| width: 100%; | |
| background: var(--bg-dark); | |
| border: 1px solid var(--border); | |
| color: white; | |
| padding: 12px; | |
| border-radius: var(--radius-md); | |
| font-size: 1rem; | |
| } | |
| /* --- Toast Notification --- */ | |
| #toast-container { | |
| position: fixed; | |
| top: 80px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| z-index: 400; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| width: 90%; | |
| max-width: 350px; | |
| } | |
| .toast { | |
| background: rgba(30, 30, 30, 0.95); | |
| color: white; | |
| padding: 12px 16px; | |
| border-radius: var(--radius-md); | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.5); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| animation: slideDown 0.3s ease; | |
| border-left: 4px solid var(--primary); | |
| } | |
| .toast.success { border-left-color: var(--success); } | |
| .toast.error { border-left-color: var(--danger); } | |
| @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } | |
| /* --- Responsive Tweaks --- */ | |
| @media (min-width: 768px) { | |
| .game-grid { grid-template-columns: repeat(4, 1fr); } | |
| #app-container { max-width: 600px; margin: 0 auto; border-left: 1px solid var(--border); border-right: 1px solid var(--border); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="logo">Fortuna</div> | |
| <div class="wallet-pill" onclick="app.router.navigate('wallet')"> | |
| <i class="ph ph-wallet"></i> | |
| <span id="header-balance">$0.00</span> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main id="app-container"> | |
| <!-- HOME SCREEN --> | |
| <section id="home-screen" class="screen"> | |
| <div class="hero-banner"> | |
| <h2 class="hero-title">Welcome Back!</h2> | |
| <p class="hero-desc">Claim your 500 Free Coins bonus now.</p> | |
| <button class="btn btn-primary" onclick="app.games.slots.open()">Play Now</button> | |
| </div> | |
| <div class="section-title"> | |
| <span>Categories</span> | |
| </div> | |
| <div class="category-scroll"> | |
| <div class="cat-chip active">All</div> | |
| <div class="cat-chip">Slots</div> | |
| <div class="cat-chip">Poker</div> | |
| <div class="cat-chip">Blackjack</div> | |
| <div class="cat-chip">Roulette</div> | |
| </div> | |
| <div class="section-title"> | |
| <span>Featured Games</span> | |
| <a href="#">View All</a> | |
| </div> | |
| <div class="game-grid"> | |
| <!-- Game Card 1 --> | |
| <div class="game-card" onclick="app.games.slots.open()"> | |
| <img src="https://picsum.photos/seed/slots1/200/200" class="game-card-img" alt="Slot Game"> | |
| <div class="game-card-info"> | |
| <div class="game-card-title">Mega Fortune</div> | |
| <div class="game-card-rtp">RTP: 96.5%</div> | |
| </div> | |
| </div> | |
| <!-- Game Card 2 --> | |
| <div class="game-card" onclick="app.games.poker.open()"> | |
| <img src="https://picsum.photos/seed/poker1/200/200" class="game-card-img" alt="Poker Game"> | |
| <div class="game-card-info"> | |
| <div class="game-card-title">Royal Hold'em</div> | |
| <div class="game-card-rtp">RTP: 98.0%</div> | |
| </div> | |
| </div> | |
| <!-- Game Card 3 --> | |
| <div class="game-card" onclick="app.games.blackjack.open()"> | |
| <img src="https://picsum.photos/seed/blackjack1/200/200" class="game-card-img" alt="Blackjack"> | |
| <div class="game-card-info"> | |
| <div class="game-card-title">VIP Blackjack</div> | |
| <div class="game-card-rtp">RTP: 99.5%</div> | |
| </div> | |
| </div> | |
| <!-- Game Card 4 --> | |
| <div class="game-card" onclick="app.games.roulette.open()"> | |
| <img src="https://picsum.photos/seed/roulette1/200/200" class="game-card-img" alt="Roulette"> | |
| <div class="game-card-info"> | |
| <div class="game-card-title">European Roulette</div> | |
| <div class="game-card-rtp">RTP: 97.3%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- WALLET SCREEN --> | |
| <section id="wallet-screen" class="screen hidden"> | |
| <div class="wallet-card"> | |
| <div style="color: var(--text-muted); font-size: 0.9rem;">Total Balance</div> | |
| <div class="balance-amount" id="wallet-balance-display">$0.00</div> | |
| <div style="display: flex; gap: 10px; justify-content: center;"> | |
| <button class="btn btn-primary" onclick="app.ui.openDepositModal()">Deposit</button> | |
| <button class="btn btn-secondary" onclick="app.ui.openWithdrawModal()">Withdraw</button> | |
| </div> | |
| </div> | |
| <div class="action-grid"> | |
| <div class="quick-action"> | |
| <i class="ph ph-clock-counter-clockwise"></i> | |
| <span>Session Limit</span> | |
| </div> | |
| <div class="quick-action"> | |
| <i class="ph ph-shield-check"></i> | |
| <span>Self-Exclusion</span> | |
| </div> | |
| </div> | |
| <div class="section-title"> | |
| <span>Transaction History</span> | |
| </div> | |
| <div class="history-list" id="history-list"> | |
| <!-- JS Injected --> | |
| </div> | |
| </section> | |
| <!-- LEADERBOARD SCREEN --> | |
| <section id="leaderboard-screen" class="screen hidden"> | |
| <div class="section-title"> | |
| <span>Global Leaderboard</span> | |
| <span style="font-size: 0.8rem; color: var(--text-muted);">Weekly</span> | |
| </div> | |
| <div style="background: var(--bg-card); padding: 16px; border-radius: var(--radius-md); margin-bottom: 20px;"> | |
| <div style="display: flex; align-items: center; gap: 12px;"> | |
| <img src="https://picsum.photos/seed/me/50/50" style="border-radius: 50%; width: 40px; height: 40px;"> | |
| <div> | |
| <div style="font-weight: 700;">You</div> | |
| <div style="font-size: 0.8rem; color: var(--text-muted);">Rank #4,291</div> | |
| </div> | |
| <div style="margin-left: auto; font-weight: 700; color: var(--primary);">12,450 XP</div> | |
| </div> | |
| </div> | |
| <div class="history-list"> | |
| <div class="history-item"> | |
| <div style="display: flex; align-items: center; gap: 10px;"> | |
| <span style="color: #666; font-weight: 700;">1</span> | |
| <img src="https://picsum.photos/seed/p1/30/30" style="border-radius: 50%;"> | |
| <div>KingSlayer</div> | |
| </div> | |
| <div style="color: var(--primary); font-weight: 700;">45,200 XP</div> | |
| </div> | |
| <div class="history-item"> | |
| <div style="display: flex; align-items: center; gap: 10px;"> | |
| <span style="color: #666; font-weight: 700;">2</span> | |
| <img src="https://picsum.photos/seed/p2/30/30" style="border-radius: 50%;"> | |
| <div>LuckyCharm</div> | |
| </div> | |
| <div style="color: var(--primary); font-weight: 700;">42,100 XP</div> | |
| </div> | |
| <div class="history-item"> | |
| <div style="display: flex; align-items: center; gap: 10px;"> | |
| <span style="color: #666; font-weight: 700;">3</span> | |
| <img src="https://picsum.photos/seed/p3/30/30" style="border-radius: 50%;"> | |
| <div>HighRoller</div> | |
| </div> | |
| <div style="color: var(--primary); font-weight: 700;">38,950 XP</div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Bottom Navigation --> | |
| <nav> | |
| <button class="nav-item active" onclick="app.router.navigate('home')"> | |
| <i class="ph ph-house"></i> | |
| <span>Home</span> | |
| </button> | |
| <button class="nav-item" onclick="app.router.navigate('wallet')"> | |
| <i class="ph ph-wallet"></i> | |
| <span>Wallet</span> | |
| </button> | |
| <button class="nav-item" onclick="app.router.navigate('leaderboard')"> | |
| <i class="ph ph-trophy"></i> | |
| <span>Ranks</span> | |
| </button> | |
| <button class="nav-item" onclick="app.ui.showSupport()"> | |
| <i class="ph ph-lifebuoy"></i> | |
| <span>Support</span> | |
| </button> | |
| </nav> | |
| <!-- GAME ENGINE OVERLAY --> | |
| <div id="game-screen" class="hidden"> | |
| <div class="game-header"> | |
| <button class="btn-icon" onclick="app.games.slots.close()"><i class="ph ph-arrow-left"></i></button> | |
| <div style="font-weight: 700;">Mega Fortune Slots</div> | |
| <button class="btn-icon" onclick="app.ui.showHelp()"><i class="ph ph-question"></i></button> | |
| </div> | |
| <div class="game-canvas-container"> | |
| <div class="payline-indicator"></div> | |
| <div class="slot-machine"> | |
| <div class="reels-container"> | |
| <div class="reel" id="reel-1">🍒</div> | |
| <div class="reel" id="reel-2">🍋</div> | |
| <div class="reel" id="reel-3">💎</div> | |
| </div> | |
| <div style="text-align: center; margin-top: 15px; font-size: 1.2rem; font-weight: bold; color: var(--primary);" id="slot-result"> | |
| READY TO SPIN | |
| </div> | |
| </div> | |
| </div> | |
| <div class="game-controls"> | |
| <div> | |
| <div style="font-size: 0.8rem; color: var(--text-muted);">Bet Amount</div> | |
| <div style="font-weight: 700;" id="current-bet">$10.00</div> | |
| </div> | |
| <button class="btn btn-primary" style="padding: 12px 30px; font-size: 1.1rem;" onclick="app.games.slots.spin()"> | |
| SPIN | |
| </button> | |
| <div style="text-align: right;"> | |
| <div style="font-size: 0.8rem; color: var(--text-muted);">Last Win</div> | |
| <div style="font-weight: 700; color: var(--success);" id="last-win">$0.00</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- DEPOSIT MODAL --> | |
| <div class="modal-overlay" id="deposit-modal"> | |
| <div class="modal"> | |
| <div class="modal-header"> | |
| <span>Deposit Funds</span> | |
| <button class="btn-icon" onclick="app.ui.closeModals()" style="width: 30px; height: 30px; font-size: 1rem;"><i class="ph ph-x"></i></button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="input-group"> | |
| <label>Amount ($)</label> | |
| <input type="number" class="input-field" id="deposit-amount" placeholder="100"> | |
| </div> | |
| <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;"> | |
| <button class="btn btn-secondary" onclick="app.wallet.deposit(50)">$50</button> | |
| <button class="btn btn-secondary" onclick="app.wallet.deposit(100)">$100</button> | |
| <button class="btn btn-secondary" onclick="app.wallet.deposit(500)">$500</button> | |
| <button class="btn btn-secondary" onclick="app.wallet.deposit(1000)">$1,000</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- WITHDRAW MODAL --> | |
| <div class="modal-overlay" id="withdraw-modal"> | |
| <div class="modal"> | |
| <div class="modal-header"> | |
| <span>Withdraw Funds</span> | |
| <button class="btn-icon" onclick="app.ui.closeModals()" style="width: 30px; height: 30px; font-size: 1rem;"><i class="ph ph-x"></i></button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="input-group"> | |
| <label>Available: <span id="withdraw-available">$0.00</span></label> | |
| </div> | |
| <div class="input-group"> | |
| <label>Amount ($)</label> | |
| <input type="number" class="input-field" id="withdraw-amount" placeholder="100"> | |
| </div> | |
| <button class="btn btn-primary w-full" onclick="app.wallet.withdraw()">Request Withdrawal</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- TOAST CONTAINER --> | |
| <div id="toast-container"></div> | |
| <script> | |
| /** | |
| * FORTUNA ROYALE - CASINO APP ENGINE | |
| * Single File Architecture | |
| */ | |
| const app = { | |
| state: { | |
| balance: 500.00, | |
| currentGame: null, | |
| history: [ | |
| { type: 'deposit', amount: 500, date: '2023-10-24', desc: 'Initial Bonus' }, | |
| { type: 'win', amount: 50, date: '2023-10-24', desc: 'Slots Jackpot' } | |
| ] | |
| }, | |
| // --- Core System --- | |
| init: function() { | |
| this.router.init(); | |
| this.wallet.render(); | |
| this.ui.toast('Welcome to Fortuna Royale!', 'success'); | |
| }, | |
| // --- Router --- | |
| router: { | |
| screens: ['home', 'wallet', 'leaderboard'], | |
| init: function() { | |
| this.navigate('home'); | |
| }, | |
| navigate: function(screenId) { | |
| // Update Nav UI | |
| document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active')); | |
| const navIndex = this.screens.indexOf(screenId); | |
| if (navIndex >= 0) { | |
| document.querySelectorAll('.nav-item')[navIndex].classList.add('active'); | |
| } | |
| // Show Screen | |
| document.querySelectorAll('.screen').forEach(el => el.classList.add('hidden')); | |
| const target = document.getElementById(screenId + '-screen'); | |
| if (target) target.classList.remove('hidden'); | |
| // Scroll to top | |
| document.getElementById('app-container').scrollTop = 0; | |
| } | |
| }, | |
| // --- Wallet System --- | |
| wallet: { | |
| render: function() { | |
| const el = document.getElementById('wallet-balance-display'); | |
| const headerEl = document.getElementById('header-balance'); | |
| el.innerText = '$' + this.format(app.state.balance); | |
| headerEl.innerText = '$' + this.format(app.state.balance); | |
| // Render History | |
| const list = document.getElementById('history-list'); | |
| list.innerHTML = ''; | |
| app.state.history.forEach(tx => { | |
| const isWin = tx.type === 'win'; | |
| const colorClass = isWin ? 'win' : (tx.type === 'loss' ? 'loss' : ''); | |
| const icon = tx.type === 'deposit' ? 'ph-arrow-down-left' : (isWin ? 'ph-trend-up' : 'ph-trend-down'); | |
| list.innerHTML += ` | |
| <div class="history-item"> | |
| <div style="display:flex; flex-direction:column;"> | |
| <span class="tx-type">${tx.desc}</span> | |
| <span style="font-size:0.75rem; color:#666;">${tx.date}</span> | |
| </div> | |
| <div style="text-align:right;"> | |
| <div class="tx-amount ${colorClass}">${isWin ? '+' : ''}$${tx.amount}</div> | |
| </div> | |
| </div> | |
| `; | |
| }); | |
| }, | |
| deposit: function(amount) { | |
| app.state.balance += amount; | |
| app.state.history.unshift({ | |
| type: 'deposit', | |
| amount: amount, | |
| date: new Date().toLocaleDateString(), | |
| desc: 'Deposit' | |
| }); | |
| this.render(); | |
| app.ui.closeModals(); | |
| app.ui.toast(`Deposited $${amount}`, 'success'); | |
| }, | |
| withdraw: function() { | |
| const input = document.getElementById('withdraw-amount'); | |
| const amount = parseFloat(input.value); | |
| if (!amount || amount <= 0) return app.ui.toast('Invalid amount', 'error'); | |
| if (amount > app.state.balance) return app.ui.toast('Insufficient funds', 'error'); | |
| app.state.balance -= amount; | |
| app.state.history.unshift({ | |
| type: 'loss', // treated as expense | |
| amount: amount, | |
| date: new Date().toLocaleDateString(), | |
| desc: 'Withdrawal' | |
| }); | |
| this.render(); | |
| app.ui.closeModals(); | |
| app.ui.toast(`Withdrawal of $${amount} processed`, 'success'); | |
| }, | |
| format: function(num) { | |
| return num.toFixed(2); | |
| } | |
| }, | |
| // --- UI Utilities --- | |
| ui: { | |
| openDepositModal: function() { | |
| document.getElementById('deposit-modal').classList.add('open'); | |
| }, | |
| openWithdrawModal: function() { | |
| document.getElementById('withdraw-available').innerText = '$' + app.format(app.state.balance); | |
| document.getElementById('withdraw-modal').classList.add('open'); | |
| }, | |
| closeModals: function() { | |
| document.querySelectorAll('.modal-overlay').forEach(el => el.classList.remove('open')); | |
| }, | |
| toast: function(msg, type = 'info') { | |
| const container = document.getElementById('toast-container'); | |
| const el = document.createElement('div'); | |
| el.className = `toast ${type}`; | |
| el.innerHTML = `<i class="ph ${type === 'success' ? 'ph-check-circle' : (type === 'error' ? 'ph-warning-circle' : 'ph-info')}"></i> ${msg}`; | |
| container.appendChild(el); | |
| setTimeout(() => el.remove(), 3000); | |
| }, | |
| showSupport: function() { | |
| this.toast('Support ticket system coming soon.', 'info'); | |
| }, | |
| showHelp: function() { | |
| this.toast('Match 3 symbols on the center line to win!', 'info'); | |
| } | |
| }, | |
| // --- Games Module --- | |
| games: { | |
| currentEngine: null, | |
| // Slots Engine | |
| slots: { | |
| isOpen: false, | |
| symbols: ['🍒', '🍋', '🍇', '💎', '7️⃣', '🔔'], | |
| isSpinning: false, | |
| open: function() { | |
| document.getElementById('game-screen').classList.remove('hidden'); | |
| this.isOpen = true; | |
| this.isSpinning = false; | |
| this.reset(); | |
| }, | |
| close: function() { | |
| document.getElementById('game-screen').classList.add('hidden'); | |
| this.isOpen = false; | |
| }, | |
| reset: function() { | |
| document.getElementById('slot-result').innerText = "READY TO SPIN"; | |
| document.getElementById('slot-result').style.color = "var(--primary)"; | |
| document.getElementById('last-win').innerText = "$0.00"; | |
| }, | |
| spin: function() { | |
| if (this.isSpinning) return; | |
| // Check Balance | |
| const bet = 10; | |
| if (app.state.balance < bet) { | |
| app.ui.toast('Insufficient funds! Deposit more.', 'error'); | |
| return; | |
| } | |
| // Deduct Balance | |
| app.state.balance -= bet; | |
| app.wallet.render(); | |
| app.state.history.unshift({ | |
| type: 'loss', | |
| amount: bet, | |
| date: new Date().toLocaleDateString(), | |
| desc: 'Slots Spin' | |
| }); | |
| this.isSpinning = true; | |
| document.getElementById('slot-result').innerText = "SPINNING..."; | |
| document.getElementById('last-win').innerText = "$0.00"; | |
| // Animation Logic | |
| const reels = [ | |
| document.getElementById('reel-1'), | |
| document.getElementById('reel-2'), | |
| document.getElementById('reel-3') | |
| ]; | |
| let results = []; | |
| reels.forEach((reel, index) => { | |
| // Random stop time | |
| const stopTime = 1000 + (index * 500) + Math.random() * 500; | |
| // Rapidly cycle symbols | |
| const interval = setInterval(() => { | |
| reel.innerText = this.symbols[Math.floor(Math.random() * this.symbols.length)]; | |
| }, 100); | |
| setTimeout(() => { | |
| clearInterval(interval); | |
| // Final result | |
| const finalSym = this.symbols[Math.floor(Math.random() * this.symbols.length)]; | |
| reel.innerText = finalSym; | |
| results[index] = finalSym; | |
| // Check if last reel stopped | |
| if (index === 2) { | |
| this.checkWin(results); | |
| } | |
| }, stopTime); | |
| }); | |
| }, | |
| checkWin: function(results) { | |
| this.isSpinning = false; | |
| const [r1, r2, r3] = results; | |
| // Logic: 3 match = Big Win, 2 match = Small Win | |
| let multiplier = 0; | |
| let msg = "TRY AGAIN"; | |
| if (r1 === r2 && r2 === r3) { | |
| // 3 Match | |
| if (r1 === '7️⃣') { multiplier = 50; msg = "JACKPOT!"; } | |
| else if (r1 === '💎') { multiplier = 20; msg = "BIG WIN!"; } | |
| else { multiplier = 10; msg = "WIN!"; } | |
| } else if (r1 === r2 || r2 === r3 || r1 === r3) { | |
| // 2 Match | |
| multiplier = 2; | |
| msg = "GOOD MATCH"; | |
| } | |
| if (multiplier > 0) { | |
| const winAmount = 10 * multiplier; | |
| app.state.balance += winAmount; | |
| app.state.history.unshift({ | |
| type: 'win', | |
| amount: winAmount, | |
| date: new Date().toLocaleDateString(), | |
| desc: 'Slots Win' | |
| }); | |
| app.wallet.render(); | |
| document.getElementById('slot-result').innerText = msg; | |
| document.getElementById('slot-result').style.color = "var(--success)"; | |
| document.getElementById('last-win').innerText = "$" + winAmount.toFixed(2); | |
| app.ui.toast(`You won $${winAmount}!`, 'success'); | |
| } else { | |
| document.getElementById('slot-result').style.color = "var(--danger)"; | |
| } | |
| } | |
| }, | |
| // Placeholder for other game engines | |
| poker: { open: () => app.ui.toast('Poker module loading...', 'info') }, | |
| blackjack: { open: () => app.ui.toast('Blackjack module loading...', 'info') }, | |
| roulette: { open: () => app.ui.toast('Roulette module loading...', 'info') } | |
| } | |
| }; | |
| // Initialize App | |
| document.addEventListener('DOMContentLoaded', () => { | |
| app.init(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |