Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nioplay Wallet</title> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Poppins:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <!-- Styles & Libraries --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| fg: '#F5F5F5', | |
| muted: '#B8B8B8', | |
| orange: '#FF6A00', | |
| blue: '#00E4FF', | |
| success: '#3CE27A', | |
| warn: '#FEC84B', | |
| danger: '#FF4D4D', | |
| soft: '#111315', | |
| 'soft-border': 'rgba(255,255,255,0.08)', | |
| glass: 'rgba(255,255,255,0.05)', | |
| 'glass-border': 'rgba(255,255,255,0.12)' | |
| }, | |
| fontFamily: { | |
| orbitron: ['Orbitron', 'sans-serif'], | |
| poppins: ['Poppins', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%); | |
| color: theme('colors.fg'); | |
| font-family: theme('fontFamily.poppins'); | |
| min-height: 100vh; | |
| } | |
| .app-header { | |
| background: theme('colors.soft'); | |
| border: 1px solid theme('colors.soft-border'); | |
| } | |
| .soft-panel { | |
| background: theme('colors.soft'); | |
| border: 1px solid theme('colors.soft-border'); | |
| border-radius: 1rem; | |
| } | |
| .glass-panel { | |
| background: theme('colors.glass'); | |
| border: 1px solid theme('colors.glass-border'); | |
| border-radius: 1rem; | |
| backdrop-filter: blur(12px); | |
| } | |
| /* Progress bar */ | |
| .progress-container { | |
| height: 10px; | |
| background: rgba(255,255,255,0.08); | |
| border-radius: 9999px; | |
| overflow: hidden; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| border-radius: 9999px; | |
| transition: width 600ms ease; | |
| } | |
| .progress-orange { background: linear-gradient(90deg, #FF6A00 0%, #FF9E66 100%); } | |
| .progress-blue { background: linear-gradient(90deg, #00E4FF 0%, #88EFFF 100%); } | |
| /* NeoButton animation */ | |
| .neo-button { | |
| position: relative; | |
| overflow: hidden; | |
| border: none; | |
| border-radius: 9999px; | |
| transition: all 0.3s ease; | |
| padding-top: 0.5rem; | |
| padding-bottom: 0.5rem; | |
| font-weight: 500; | |
| letter-spacing: 0.5px; | |
| } | |
| .neo-button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); | |
| background-size: 200% 100%; | |
| z-index: -1; | |
| border-radius: 9999px; | |
| mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| mask-composite: exclude; | |
| padding: 2px; | |
| animation: buttonTrail 2.5s linear infinite; | |
| animation-play-state: paused; | |
| } | |
| @keyframes buttonTrail { | |
| 0% { background-position: 150% 0; } | |
| 100% { background-position: -50% 0; } | |
| } | |
| .neo-button:hover::before { | |
| animation-play-state: running; | |
| } | |
| .neo-button-orange { | |
| background: theme('colors.orange'); | |
| color: white; | |
| } | |
| .neo-button-blue { | |
| background: theme('colors.blue'); | |
| color: #0A1927; | |
| } | |
| .neo-button-ghost { | |
| background: transparent; | |
| color: theme('colors.fg'); | |
| border: 1px solid theme('colors.soft-border'); | |
| } | |
| /* Chips & Badges */ | |
| .playthrough-chip { | |
| border-width: 1px; | |
| border-radius: 9999px; | |
| padding: 0.15rem 0.5rem; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| letter-spacing: 0.5px; | |
| } | |
| .chip-1x { | |
| border-color: theme('colors.orange'); | |
| color: theme('colors.orange'); | |
| } | |
| .chip-5x { | |
| border-color: theme('colors.blue'); | |
| color: theme('colors.blue'); | |
| } | |
| .tooltip { | |
| position: relative; | |
| display: inline-flex; | |
| } | |
| .tooltip:hover .tooltip-content { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translate(-50%, 0); | |
| } | |
| .tooltip-content { | |
| position: absolute; | |
| bottom: 100%; | |
| left: 50%; | |
| transform: translate(-50%, -10px); | |
| background: rgba(30,30,30,0.95); | |
| border: 1px solid theme('colors.soft-border'); | |
| color: theme('colors.muted'); | |
| padding: 0.75rem; | |
| border-radius: 0.5rem; | |
| min-width: 220px; | |
| font-size: 0.875rem; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.2s ease; | |
| z-index: 10; | |
| pointer-events: none; | |
| } | |
| .container-style { | |
| max-width: 1280px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-left: 1.5rem; | |
| padding-right: 1.5rem; | |
| } | |
| /* Transactions table */ | |
| .transaction-row { | |
| height: 48px; | |
| border-bottom: 1px solid rgba(255,255,255,0.05); | |
| } | |
| .zebra-row:nth-child(even) { | |
| background: rgba(255,255,255,0.02); | |
| } | |
| /* Drawers & Modals */ | |
| .drawer { | |
| transform: translateX(100%); | |
| transition: transform 0.4s ease-out; | |
| } | |
| .drawer.open { | |
| transform: translateX(0); | |
| } | |
| .modal { | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| } | |
| .modal.open { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-fg"> | |
| <div class="container-style"> | |
| <!-- A) App Header --> | |
| <header class="app-header rounded-2xl px-6 py-4 mb-6"> | |
| <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3"> | |
| <div> | |
| <h1 class="text-2xl md:text-3xl font-bold font-orbitron">Wallet</h1> | |
| <p class="text-muted text-sm">Track balances, playthrough, and redeemables.</p> | |
| </div> | |
| <div class="flex flex-wrap gap-3"> | |
| <button class="neo-button neo-button-orange px-6" onclick="openDrawer('drawer-deposit')"> | |
| Deposit SC | |
| </button> | |
| <button class="neo-button neo-button-blue px-6" onclick="openDrawer('drawer-withdraw')"> | |
| Withdraw | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-4 mt-3 text-xs text-muted"> | |
| <a href="#drawer-payments" class="hover:text-fg cursor-pointer inline-flex items-center gap-1" | |
| onclick="openDrawer('drawer-payments')"> | |
| Payment Methods | |
| </a> | |
| <a href="#modal-terms" class="hover:text-fg cursor-pointer inline-flex items-center gap-1" | |
| onclick="openModal('modal-terms')"> | |
| Bonus Terms | |
| </a> | |
| <a href="#drawer-kyc" class="hover:text-fg cursor-pointer inline-flex items-center gap-1" | |
| onclick="openDrawer('drawer-kyc')"> | |
| KYC Status | |
| </a> | |
| </div> | |
| </header> | |
| <!-- Main Content Grid --> | |
| <div class="grid grid-cols-1 gap-6 mb-12"> | |
| <!-- B) Balance Overview --> | |
| <div class="soft-panel p-6"> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <!-- Purchase SC --> | |
| <div class="soft-panel p-5" id="card-purchase"> | |
| <div class="flex justify-between items-start"> | |
| <div class="playthrough-chip chip-1x">1×</div> | |
| <div class="tooltip cursor-pointer flex items-center justify-center w-4 h-4 rounded-full bg-opacity-30"> | |
| <i data-feather="info" class="w-3 h-3 text-muted"></i> | |
| <div class="tooltip-content"> | |
| Purchase SC (1×): Coins you bought; requires 1× wagering before withdrawal. | |
| </div> | |
| </div> | |
| </div> | |
| <p class="mt-3 font-orbitron text-3xl">18.74</p> | |
| <p class="text-xs text-muted mt-1">Required 18.74 | 64.5%</p> | |
| </div> | |
| <!-- Bonus SC --> | |
| <div class="soft-panel p-5" id="card-bonus"> | |
| <div class="flex justify-between items-start"> | |
| <div class="playthrough-chip chip-5x">5×</div> | |
| <div class="tooltip cursor-pointer flex items-center justify-center w-4 h-4 rounded-full bg-opacity-30"> | |
| <i data-feather="info" class="w-3 h-3 text-muted"></i> | |
| <div class="tooltip-content"> | |
| Bonus SC (5×): Promotional coins that require 5× wagering. | |
| </div> | |
| </div> | |
| </div> | |
| <p class="mt-3 font-orbitron text-3xl">0.30</p> | |
| <p class="text-xs text-muted mt-1">Required 1.50 | 0.0%</p> | |
| </div> | |
| <!-- Withdrawable SC --> | |
| <div class="soft-panel p-5" id="card-wsc"> | |
| <span class="bg-blue bg-opacity-10 text-blue text-xs px-2 py-1 rounded">Redeemable now</span> | |
| <p class="mt-3 font-orbitron text-3xl">6.64</p> | |
| <p class="text-xs text-muted mt-1">Ready to withdraw.</p> | |
| </div> | |
| <!-- Gold Coins --> | |
| <div class="soft-panel p-5" id="card-gc"> | |
| <span class="bg-muted bg-opacity-10 text-muted text-xs px-2 py-1 rounded">Gold Coins</span> | |
| <p class="mt-3 font-orbitron text-3xl">3,500</p> | |
| <p class="text-xs text-muted mt-1">For fun play.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- C) Playthrough Progress - Glass Panel 1 --> | |
| <div class="glass-panel p-6" data-aos="fade-up"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="font-orbitron font-semibold text-xl">Playthrough Progress</h3> | |
| <!-- Purchase SC Progress --> | |
| <div class="mt-5"> | |
| <div class="flex justify-between text-sm"> | |
| <span>Purchase SC (1×)</span> | |
| <span>12.10 / 18.74 (64.5%)</span> | |
| </div> | |
| <div class="progress-container mt-1.5 w-full"> | |
| <div class="progress-bar progress-orange" style="width: 64.5%"></div> | |
| </div> | |
| </div> | |
| <!-- Bonus SC Progress --> | |
| <div class="mt-5"> | |
| <div class="flex justify-between text-sm"> | |
| <span>Bonus SC (5×)</span> | |
| <span>0.00 / 1.50 (0.0%)</span> | |
| </div> | |
| <div class="progress-container mt-1.5 w-full"> | |
| <div class="progress-bar progress-blue" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-orbitron font-semibold text-xl">How your wagers count</h3> | |
| <button class="text-blue text-sm"> | |
| <i data-feather="chevron-down" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex justify-between"> | |
| <span>Slots</span> | |
| <span>100%</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span>Instant Win</span> | |
| <span>75%</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span>RNG Table</span> | |
| <span>25%</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span>Live Casino</span> | |
| <span>10%</span> | |
| </li> | |
| </ul> | |
| <p class="text-xs text-muted mt-4">Weights affect progress only, not redemption.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- D) Redeemables & Actions - Glass Panel 2 --> | |
| <div class="glass-panel p-6" data-aos="fade-up"> | |
| <h3 class="font-orbitron font-semibold text-xl">Redeemable Amounts</h3> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-5"> | |
| <div class="text-center"> | |
| <p class="text-muted text-sm">Redeemable Purchase SC (WSC)</p> | |
| <p id="redeemable-wsc" class="font-orbitron text-4xl mt-1">6.64</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-muted text-sm">Redeemable Bonus SC</p> | |
| <p id="redeemable-bonus" class="font-orbitron text-4xl mt-1">0.00</p> | |
| </div> | |
| </div> | |
| <!-- Buttons --> | |
| <div class="flex flex-wrap gap-3 mt-8"> | |
| <button class="neo-button neo-button-blue px-6" | |
| onclick="openDrawer('drawer-withdraw')">Withdraw to Wallet</button> | |
| <button class="neo-button neo-button-blue bg-opacity-5 text-blue px-6" | |
| onclick="openModal('modal-convert')">Convert to WSC</button> | |
| <button class="neo-button neo-button-ghost px-6" | |
| onclick="document.querySelector('#section-transactions').scrollIntoView({behavior: 'smooth'})"> | |
| View Transactions | |
| </button> | |
| </div> | |
| <!-- Warning Banner --> | |
| <div class="flex items-center gap-2 bg-blue bg-opacity-5 rounded-lg px-6 py-4 mt-6"> | |
| <span class="bg-blue rounded-full p-1"> | |
| <i data-feather="info" class="w-4 h-4 text-blue"></i> | |
| </span> | |
| <p class="flex-1 text-sm">For security reasons, withdraw requires KYC verification</p> | |
| <button class="text-blue text-sm font-medium" onclick="openDrawer('drawer-kyc')">Verify Account</button> | |
| </div> | |
| </div> | |
| <!-- E) Quick Actions Strip --> | |
| <div class="py-5 border-b border-border flex flex-wrap gap-6 justify-between"> | |
| <button class="flex items-center gap-2 group" onclick="openDrawer('drawer-deposit')"> | |
| <span class="bg-orange p-1.5 rounded-lg opacity-60 group-hover:opacity-100 transition"> | |
| <i data-feather="shopping-cart" class="w-4 h-4"></i> | |
| </span> | |
| <span class="text-sm group-hover:text-orange transition">Buy Packages</span> | |
| </button> | |
| <button class="flex items-center gap-2 group" onclick="openModal('modal-promo')"> | |
| <span class="bg-blue p-1.5 rounded-lg opacity-60 group-hover:opacity-100 transition"> | |
| <i data-feather="tag" class="w-4 h-4"></i> | |
| </span> | |
| <span class="text-sm group-hover:text-blue transition">Apply Promo Code</span> | |
| </button> | |
| <button class="flex items-center gap-2 group tooltip"> | |
| <span class="bg-green p-1.5 rounded-lg opacity-60 group-hover:opacity-100 transition"> | |
| <i data-feather="award" class="w-4 h-4"></i> | |
| </span> | |
| <span class="text-sm group-hover:text-green transition">VIP Snapshot</span> | |
| <div class="tooltip-content"> | |
| This month wagered 420.00 • VIP +12% | |
| </div> | |
| </button> | |
| <button class="flex items-center gap-2 group"> | |
| <span class="bg-yellow p-1.5 rounded-lg opacity-60 group-hover:opacity-100 transition"> | |
| <i data-feather="gift" class="w-4 h-4"></i> | |
| </span> | |
| <span class="text-sm group-hover:text-yellow transition">Jackpot Contribution: 8.40</span> | |
| </button> | |
| </div> | |
| <!-- F) Transaction History --> | |
| <div id="section-transactions" class="soft-panel p-6 mt-12"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-3"> | |
| <h3 class="font-orbitron font-semibold text-xl">Transactions</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <select class="text-sm bg-soft border border-muted border-opacity-20 rounded-lg px-3 py-1"> | |
| <option>All Types</option> | |
| <option>Deposit</option> | |
| <option>Withdraw</option> | |
| </select> | |
| <select class="text-sm bg-soft border border-muted border-opacity-20 rounded-lg px-3 py-1"> | |
| <option>Last 30 Days</option> | |
| <option>Last 90 Days</option> | |
| </select> | |
| <button class="text-xs neo-button-ghost px-3">Export CSV</button> | |
| <button class="text-xs neo-button-ghost px-3">Clear Filters</button> | |
| </div> | |
| </div> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="text-left text-sm text-muted border-b border-border"> | |
| <th class="py-2 px-4">Date/Time</th> | |
| <th class="py-2 px-4">Type</th> | |
| <th class="py-2 px-4">Amount</th> | |
| <th class="py-2 px-4">Balance</th> | |
| <th class="py-2 px-4">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody class="text-sm"> | |
| <!-- Row 1 --> | |
| <tr class="zebra-row transaction-row"> | |
| <td class="px-4">Jul 15, 19:23</td> | |
| <td class="px-4"> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="dollar-sign" class="w-4 h-4"></i> | |
| Deposit | |
| </div> | |
| </td> | |
| <td class="px-4">+10.00 SC</td> | |
| <td class="px-4">24.18 SC</td> | |
| <td class="px-4"> | |
| <span class="bg-success bg-opacity-10 text-success px-2 py-1 rounded text-xs"> | |
| Complete | |
| </span> | |
| </td> | |
| </tr> | |
| <!-- Row 2 --> | |
| <tr class="zebra-row transaction-row"> | |
| <td class="px-4">Jul 16, 14:15</td> | |
| <td class="px-4"> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="activity" class="w-4 h-4"></i> | |
| Wager | |
| </div> | |
| </td> | |
| <td class="px-4">-2.20 SC</td> | |
| <td class="px-4">21.98 SC</td> | |
| <td class="px-4"> | |
| <span class="bg-success bg-opacity-10 text-success px-2 py-1 rounded text-xs"> | |
| Complete | |
| </span> | |
| </td> | |
| </tr> | |
| <tr class="zebra-row transaction-row"> | |
| <td class="px-4">Jul 10, 10:08</td> | |
| <td class="px-4"> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="package" class="w-4 h-4"></i> | |
| Bonus Credit | |
| </div> | |
| </td> | |
| <td class="px-4">+0.30 BSC</td> | |
| <td class="px-4">0.30 BSC</td> | |
| <td class="px-4"> | |
| <span class="bg-success bg-opacity-10 text-success px-2 py-1 rounded text-xs"> | |
| Complete | |
| </span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- G) Education & Policy --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 py-10 border-b border-border"> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Understanding Playthrough</h4> | |
| <ul class="space-y-4 text-sm text-muted"> | |
| <li>Total amount you must wager before funds become withdrawable</li> | |
| <li>Purchased coins require 1× playthrough</li> | |
| <li>Bonus funds require 5× playthrough</li> | |
| <li>Wagers contribute differently across game types</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Tips to clear faster</h4> | |
| <ul class="space-y-4 text-sm text-muted"> | |
| <li>Slots contribute 100% towards playthrough</li> | |
| <li>Table games typically contribute at 10-25%</li> | |
| <li>Promotions can provide playthrough bonuses</li> | |
| <li>Higher variance slots clear playthrough faster statistically</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- H) Security Strip --> | |
| <div class="soft-panel mt-8"> | |
| <div class="flex flex-col sm:flex-row justify-between gap-4 p-5"> | |
| <div class="flex items-center gap-3"> | |
| <span class="px-3 py-1 rounded-full bg-danger bg-opacity-10 text-danger text-xs"> | |
| Not Verified | |
| </span> | |
| <p class="text-sm">Account security level: Basic</p> | |
| </div> | |
| <div class="flex gap-3"> | |
| <button class="neo-button neo-button-blue bg-opacity-5 text-blue px-4 text-sm" | |
| onclick="openDrawer('drawer-kyc')"> | |
| Complete KYC | |
| </button> | |
| <button class="neo-button neo-button-ghost px-4 text-sm" | |
| onclick="openDrawer('drawer-payments')"> | |
| Payment Methods | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Drawers and Modals Section --> | |
| <!-- Deposit Drawer --> | |
| <div id="drawer-deposit" class="drawer fixed inset-0 z-50 flex items-end justify-end"> | |
| <div class="bg-black bg-opacity-40 absolute inset-0" onclick="closeDrawer('drawer-deposit')"></div> | |
| <div class="bg-soft w-full max-w-md h-full relative z-10 overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h3 class="font-orbitron text-2xl">Purchase</h3> | |
| <button onclick="closeDrawer('drawer-deposit')"> | |
| <i data-feather="x" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <!-- Package Grid --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> | |
| <div class="soft-panel p-4 rounded-xl hover:border-orange border border-soft-border cursor-pointer"> | |
| <div class="flex justify-between"> | |
| <span class="font-medium">Starter</span> | |
| <span class="text-orange">$9.99</span> | |
| </div> | |
| <p class="font-orbitron text-2xl mt-2">500 GC + 50 SC</p> | |
| </div> | |
| <div class="soft-panel p-4 rounded-xl hover:border-orange border border-soft-border cursor-pointer border-orange"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <span class="font-medium">Standard</span> | |
| <span class="bg-orange rounded-full text-xs px-2 ml-2">Best Value</span> | |
| </div> | |
| <span class="text-orange">$19.99</span> | |
| </div> | |
| <p class="font-orbitron text-2xl mt-2">1,100 GC + 110 SC</p> | |
| </div> | |
| </div> | |
| <!-- Soft Panel --> | |
| <div class="soft-panel p-6 mt-8"> | |
| <h3 class="font-orbitron text-xl mb-4">You will receive</h3> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between pb-4 border-b border-soft-border"> | |
| <div> | |
| <p>Gold Coins (GC)</p> | |
| <span class="bg-muted bg-opacity-10 text-muted text-xs px-2 rounded">for fun play</span> | |
| </div> | |
| <p class="font-orbitron">1100</p> | |
| </div> | |
| <div class="flex justify-between pb-4 border-b border-soft-border"> | |
| <p>Sweepstakes Coins (SC)</p> | |
| <p class="font-orbitron">110</p> | |
| </div> | |
| <div class="flex justify-between mb-6"> | |
| <div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-muted">We cover payment fees.</p> | |
| <div class="grid grid-cols-2 gap-3 mt-6"> | |
| <div> | |
| <p class="text-sm text-muted mb-1">Currency</p> | |
| <div class="soft-panel px-4 py-2">USD <i class="float-right" data-feather="chevron-down"></i></div> | |
| </div> | |
| <div> | |
| <p class="text-sm text-muted mb-1">Method</p> | |
| <div class="soft-panel px-4 py-2">Debit <i class="float-right" data-feather="chevron-down"></i></div> | |
| </div> | |
| <div class="col-span-2"> | |
| <p class="text-sm text-muted mb-1">Payment Details</p> | |
| <div class="soft-panel px-4 py-2 flex justify-between"> | |
| <span class="truncate mr-2">Visa 0980</span> | |
| <button> | |
| <i data-feather="copy" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex gap-2 mt-6"> | |
| <button class="soft-panel font-medium py-3 text-center flex-1">Card</button> | |
| <button class="soft-panel py-3 text-center flex-1 text-muted">Other</button> | |
| </div> | |
| <div class="flex items-center gap-2 bg-danger bg-opacity-5 rounded-lg px-4 py-3 mt-6"> | |
| <i data-feather="alert-triangle" class="text-danger"></i> | |
| <p class="text-sm">All crypto deposits are UI mocks in staging.</p> | |
| </div> | |
| </div> | |
| <!-- CTA --> | |
| <button class="neo-button neo-button-orange w-full mt-8 py-4" | |
| onclick="closeDrawer('drawer-deposit')"> | |
| Confirm Payment | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Withdraw Drawer --> | |
| <div id="drawer-withdraw" class="drawer fixed inset-0 z-50 flex items-end justify-end"> | |
| <div class="bg-black bg-opacity-40 absolute inset-0" onclick="closeDrawer('drawer-withdraw')"></div> | |
| <div class="bg-soft w-full max-w-md h-full relative z-10 overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h3 class="font-orbitron text-2xl">Redeem</h3> | |
| <button onclick="closeDrawer('drawer-withdraw')"> | |
| <i data-feather="x" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <p class="mb-6">Redeemable SC: <span class="font-orbitron">6.64</span> • Daily limit: $500 • Pending: <span class="font-orbitron">0.00</span></p> | |
| <div class="soft-panel p-5 mb-4"> | |
| <label class="text-sm block mb-2">Amount (USD)</label> | |
| <input type="text" value="6.64" class="bg-transparent w-full text-xl py-3 border-b border-soft-border"> | |
| <p class="mt-2 text-sm text-muted">Minimum: $75.00</p> | |
| </div> | |
| <div class="soft-panel p-5 mb-8"> | |
| <label class="text-sm block mb-2">Payment Method</label> | |
| <select class="bg-transparent w-full py-3"> | |
| <option>Bank Account</option> | |
| <option>Bitcoin</option> | |
| </select> | |
| <label class="text-sm block mb-2 mt-6">Payment Information</label> | |
| <input type="password" class="bg-transparent w-full py-3 border-b border-soft-border" placeholder="••••"> | |
| </div> | |
| <button class="neo-button neo-button-blue w-full py-4" | |
| onclick="closeDrawer('drawer-withdraw')"> | |
| Submit Request | |
| </button> | |
| <p class="text-center mt-4"> | |
| <button class="text-blue underline text-sm" | |
| onclick="document.querySelector('#section-transactions').scrollIntoView({behavior: 'smooth'}); closeDrawer('drawer-withdraw')"> | |
| View history | |
| </button> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Modals - Terms --> | |
| <div id="modal-terms" class="modal fixed inset-0 flex items-center justify-center z-50 p-4"> | |
| <div class="bg-black bg-opacity-50 absolute inset-0" onclick="closeModal('modal-terms')"></div> | |
| <div class="bg-soft max-w-2xl rounded-xl relative z-10 w-full max-h-screen overflow-y-auto"> | |
| <div class="p-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-orbitron text-xl">Bonus Terms</h3> | |
| <button onclick="closeModal('modal-terms')"> | |
| <i data-feather="x" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-6"> | |
| <!-- TOC --> | |
| <div class="flex flex-wrap gap-2 pb-4 border-b border-soft-border"> | |
| <a href="#bonus-terms" class="text-blue underline">Contribution Rates</a> | |
| <a href="#limits" class="text-blue underline">Withdrawal Limits</a> | |
| </div> | |
| <!-- Contribution table --> | |
| <div id="bonus-terms"> | |
| <h4 class="font-bold mb-3">Contribution Weights</h4> | |
| <p class="text-sm mb-4">Different games contribute differently toward playthrough requirements.</p> | |
| <div class="soft-panel p-4"> | |
| <ul class="space-y-4 text-sm"> | |
| <li class="flex justify-between"> | |
| <span>Slots</span> | |
| <span>100%</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span>Instant Win</span> | |
| <span>75%</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span>RNG Table</span> | |
| <span>25%</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span>Live Casino</span> | |
| <span>10%</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <p class="text-xs text-muted mt-4 italic">* Weights affect playthrough progress only, not redemption amounts.</p> | |
| </div> | |
| <!-- Limits --> | |
| <div id="limits" class="pt-6 border-t border-soft-border"> | |
| <h4 class="font-bold mb-3">Withdrawal Limits</h4> | |
| <div class="soft-panel p-4"> | |
| <div class="flex justify-between py-2"> | |
| <span class="text-sm">Daily Limit</span> | |
| <span class="font-orbitron">$500 USD</span> | |
| </div> | |
| <div class="flex justify-between py-2"> | |
| <span class="text-sm">Processing Time</span> | |
| <span>24-48 Hours</span> | |
| </div> | |
| <div class="flex justify-between py-2"> | |
| <span class="text-sm">KYC Required</span> | |
| <span>Above $1000</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Initialize --> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| AOS.init({duration: 600}); | |
| }); | |
| function openDrawer(id) { | |
| document.getElementById(id).classList.add('open'); | |
| document.body.classList.add('overflow-hidden'); | |
| } | |
| function closeDrawer(id) { | |
| document.getElementById(id).classList.remove('open'); | |
| document.body.classList.remove('overflow-hidden'); | |
| } | |
| function openModal(id) { | |
| document.getElementById(id).classList.add('open'); | |
| } | |
| function closeModal(id) { | |
| document.getElementById(id).classList.remove('open'); | |
| } | |
| </script> | |
| </body> | |
| </html> | |
| </body> | |
| </html> | |