Spaces:
Running
Running
Design a production-ready Wallet Page for a neon-casino theme. Use Nioplay’s established system:
c73fee9
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Neon Casino Wallet</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| orbitron: ['Orbitron', 'sans-serif'], | |
| poppins: ['Poppins', 'sans-serif'] | |
| }, | |
| colors: { | |
| 'neon-orange': '#FF6A00', | |
| 'neon-blue': '#00E4FF', | |
| 'success': '#3CE27A', | |
| 'warning': '#FEC84B', | |
| 'danger': '#FF4D4D', | |
| }, | |
| boxShadow: { | |
| 'glow-orange': '0 0 10px rgba(255, 106, 0, 0.5)', | |
| 'glow-blue': '0 0 10px rgba(0, 228, 255, 0.5)', | |
| 'card': '0 8px 32px rgba(0, 0, 0, 0.25)' | |
| }, | |
| backdropBlur: { | |
| 'glass': '12px', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style type="text/css"> | |
| body { | |
| background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000 100%); | |
| color: #F5F5F5; | |
| font-family: 'Poppins', sans-serif; | |
| min-height: 100vh; | |
| padding: 0 1rem; | |
| overflow-x: hidden; | |
| } | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| backdrop-filter: blur(12px); | |
| border-radius: 16px; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .glass-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"); | |
| opacity: 0.4; | |
| pointer-events: none; | |
| } | |
| .glow-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .glow-hover:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .border-trail-btn { | |
| position: relative; | |
| overflow: hidden; | |
| z-index: 1; | |
| transition: all 0.3s ease; | |
| } | |
| .border-trail-btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: -2px; | |
| left: -2px; | |
| right: -2px; | |
| bottom: -2px; | |
| z-index: -1; | |
| background: linear-gradient(90deg, transparent, currentColor, transparent); | |
| background-size: 250%; | |
| animation: border-trail 2.5s linear infinite; | |
| border-radius: 24px; | |
| } | |
| @keyframes border-trail { | |
| 0% { background-position: -150% 0; } | |
| 100% { background-position: 150% 0; } | |
| } | |
| .pill-label { | |
| border-radius: 24px; | |
| padding: 4px 12px; | |
| border: 1px solid; | |
| display: inline-block; | |
| font-size: 12px; | |
| font-weight: 500; | |
| } | |
| .progress-bar-container { | |
| height: 8px; | |
| background: rgba(255,255,255,0.12); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| border-radius: 4px; | |
| transition: width 0.6s ease; | |
| } | |
| .stats-large { | |
| font-size: 32px; | |
| font-weight: 700; | |
| line-height: 1.2; | |
| margin-top: 4px; | |
| } | |
| .icon-small { | |
| display: inline-flex; | |
| margin-left: 6px; | |
| opacity: 0.7; | |
| } | |
| .balance-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 16px; | |
| } | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip .tooltip-content { | |
| position: absolute; | |
| bottom: 125%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: rgba(0,0,0,0.8); | |
| padding: 8px 12px; | |
| border-radius: 8px; | |
| width: 220px; | |
| font-size: 12px; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s; | |
| z-index: 10; | |
| border: 1px solid rgba(255,255,255,0.15); | |
| } | |
| .tooltip:hover .tooltip-content { | |
| opacity: 1; | |
| } | |
| .info-table th { | |
| text-align: left; | |
| padding: 8px 0; | |
| opacity: 0.7; | |
| width: 60%; | |
| } | |
| .info-table td { | |
| text-align: right; | |
| padding: 8px 0; | |
| font-weight: 600; | |
| } | |
| @media (max-width: 1023px) { | |
| .balance-grid { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .progress-cards { | |
| flex-direction: column; | |
| } | |
| .tab-scroll { | |
| overflow-x: auto; | |
| padding-bottom: 8px; | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .tab-scroll::-webkit-scrollbar { | |
| display: none; | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .balance-grid { | |
| display: flex; | |
| overflow-x: auto; | |
| padding-bottom: 16px; | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .balance-grid::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .balance-grid .glass-card { | |
| min-width: 260px; | |
| margin-right: 16px; | |
| } | |
| .button-group { | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased"> | |
| <!-- Navigation Header --> | |
| <header class="py-4 px-6 glass-card mt-6 lg:mt-8"> | |
| <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center"> | |
| <div class="mb-4 lg:mb-0"> | |
| <h1 class="text-2xl lg:text-3xl font-bold text-neon-orange mb-1">Wallet</h1> | |
| <p class="text-gray-300 text-base">Track balances, playthrough progress, and redeemables.</p> | |
| </div> | |
| <div class="flex flex-col"> | |
| <div class="flex space-x-3 mb-2"> | |
| <button id="btn-deposit" class="inline-flex items-center px-6 py-3 font-orbitron font-bold rounded-full border-trail-btn | |
| bg-gradient-to-r from-neon-orange/70 to-orange-700/30 text-white hover:text-white relative overflow-hidden"> | |
| <span class="relative z-10">Deposit SC</span> | |
| </button> | |
| <button id="btn-withdraw" class="inline-flex items-center px-6 py-3 font-orbitron font-bold rounded-full border-trail-btn | |
| border-0 bg-gradient-to-r from-neon-blue/70 to-blue-700/30 text-white hover:text-white relative"> | |
| <span class="relative z-10">Withdraw</span> | |
| </button> | |
| </div> | |
| <div class="flex space-x-4 text-xs text-gray-400"> | |
| <a href="#" class="hover:text-neon-blue transition">Payment Methods</a> | |
| <a href="#" class="hover:text-neon-blue transition">Withdrawal Policy</a> | |
| <a href="#" class="hover:text-neon-blue transition">KYC Status</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="py-6 lg:py-8 max-w-6xl mx-auto"> | |
| <!-- Balance Overview --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl lg:text-2xl font-bold mb-4">Balance Overview</h2> | |
| <div class="balance-grid"> | |
| <!-- Card A: Purchase SC --> | |
| <div id="card-purchase-sc" class="glass-card p-6 glow-hover"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-gray-300">Purchase SC</p> | |
| <div class="pill-label border-neon-orange text-neon-orange mt-2">1× Playthrough</div> | |
| </div> | |
| <div class="tooltip"> | |
| <i class="icon-small" data-feather="info"></i> | |
| <div class="tooltip-content"> | |
| Purchase SC requires 1× wagering before withdrawal. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stats-large mt-3">18.74</div> | |
| <p class="text-xs text-gray-400 mt-2">Required: 18.74 | Progress: 64.5%</p> | |
| </div> | |
| <!-- Card B: Bonus SC --> | |
| <div id="card-bonus-sc" class="glass-card p-6 glow-hover"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-gray-300">Bonus SC</p> | |
| <div class="pill-label border-neon-blue text-neon-blue mt-2">5× Playthrough</div> | |
| </div> | |
| <div class="tooltip"> | |
| <i class="icon-small" data-feather="info"></i> | |
| <div class="tooltip-content"> | |
| Bonus SC requires 5× wagering. Table & live games may count less. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stats-large mt-3">0.30</div> | |
| <p class="text-xs text-gray-400 mt-2">Required: 1.50 | Progress: 0.0%</p> | |
| </div> | |
| <!-- Card C: Withdrawable SC --> | |
| <div id="card-wsc" class="glass-card p-6 bg-gradient-to-br from-black/20 to-green-900/10 glow-hover"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-300">Withdrawable SC (WSC)</p> | |
| <div class="pill-label border-success text-success mt-2">Redeemable Now</div> | |
| </div> | |
| </div> | |
| <div class="stats-large mt-3 text-success">6.64</div> | |
| <p class="text-xs text-gray-400 mt-2">Ready to withdraw.</p> | |
| </div> | |
| <!-- Card D: Gold Coins --> | |
| <div id="card-gc" class="glass-card p-6 glow-hover"> | |
| <div> | |
| <p class="text-sm text-gray-300">Gold Coins</p> | |
| <div class="pill-label border-warning text-warning mt-2">Gold Coins</div> | |
| </div> | |
| <div class="stats-large mt-3">3,500</div> | |
| <p class="text-xs text-gray-400 mt-2">For fun play.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Playthrough Progress --> | |
| <section class="mb-8"> | |
| <div class="progress-cards flex gap-6 flex-col lg:flex-row"> | |
| <!-- Playthrough Bars --> | |
| <div class="glass-card p-6 glow-hover w-full lg:w-1/2"> | |
| <h3 class="text-lg font-bold mb-4">Playthrough Progress</h3> | |
| <div class="mb-6"> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span>Purchase SC (1×)</span> | |
| <span>12.10 / 18.74 (64.5%)</span> | |
| </div> | |
| <div class="progress-bar-container"> | |
| <div id="bar-purchase" class="progress-bar" style="width: 64.5%; background: linear-gradient(90deg, #FF6A00, #3CE27A)"></div> | |
| </div> | |
| <div class="flex justify-between mt-1 text-xs text-gray-400"> | |
| <span>0</span> | |
| <span>18.74</span> | |
| </div> | |
| </div> | |
| <div class="pt-4 border-t border-gray-800"> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span>Bonus SC (5×)</span> | |
| <span>0.00 / 1.50 (0.0%)</span> | |
| </div> | |
| <div class="progress-bar-container"> | |
| <div id="bar-bonus" class="progress-bar" style="width: 0%; background: linear-gradient(90deg, #00E4FF, #FF6A00)"></div> | |
| </div> | |
| <div class="flex justify-between mt-1 text-xs text-gray-400"> | |
| <span>0</span> | |
| <span>1.50</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Contribution Weights --> | |
| <div class="glass-card p-6 glow-hover w-full lg:w-1/2"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="text-lg font-bold">How your wagers count</h3> | |
| <button class="bg-gray-700/50 rounded-lg p-2 hover:bg-gray-600" aria-label="Collapse"> | |
| <i data-feather="chevron-down"></i> | |
| </button> | |
| </div> | |
| <table class="info-table w-full mt-4"> | |
| <tbody> | |
| <tr> | |
| <th class="flex items-center"><i data-feather="sliders" class="mr-2"></i> Slots</th> | |
| <td class="text-success">100%</td> | |
| </tr> | |
| <tr> | |
| <th class="flex items-center"><i data-feather="zap" class="mr-2"></i> Instant Win</th> | |
| <td>75%</td> | |
| </tr> | |
| <tr> | |
| <th class="flex items-center"><i data-feather="grid" class="mr-2"></i> RNG Table</th> | |
| <td>25%</td> | |
| </tr> | |
| <tr> | |
| <th class="flex items-center"><i data-feather="video" class="mr-2"></i> Live Casino</th> | |
| <td>10%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <p class="text-xs text-gray-400 mt-6"> | |
| <span class="tooltip"> | |
| <span class="text-gray-300">Weights affect progress only, not redemption math.</span> | |
| <span class="tooltip-content"> | |
| For example: $100 on Live Casino → $10 progress | |
| </span> | |
| </span> | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Redeemables & Actions --> | |
| <section class="mb-8"> | |
| <div class="glass-card p-6 glow-hover"> | |
| <h3 class="text-lg lg:text-xl font-bold mb-4">Redeemable Amounts</h3> | |
| <div class="flex flex-wrap md:flex-nowrap gap-6"> | |
| <div class="w-full md:w-1/2 lg:w-1/4 bg-gray-900/40 rounded-xl p-5"> | |
| <p class="text-gray-400 mb-1">Redeemable Purchase SC</p> | |
| <div id="redeemable-wsc" class="text-3xl font-bold text-success">6.64</div> | |
| </div> | |
| <div class="w-full md:w-1/2 lg:w-1/4 bg-gray-900/40 rounded-xl p-5"> | |
| <p class="text-gray-400 mb-1">Redeemable Bonus SC</p> | |
| <div id="redeemable-bonus-sc" class="text-3xl font-bold">0.00</div> | |
| </div> | |
| <div class="w-full mt-4 md:mt-0 md:w-full lg:w-1/2"> | |
| <p class="text-gray-300 text-sm max-w-prose"> | |
| Bonus SC becomes redeemable as you clear its playthrough. | |
| <span class="tooltip"> | |
| <span class="text-neon-blue">WSC</span> | |
| <span class="tooltip-content"> | |
| Withdrawable Sweepstakes Coins you can cash out. | |
| </span> | |
| </span> | |
| </p> | |
| <div class="button-group flex gap-4 mt-4 flex-wrap"> | |
| <button class="px-5 py-3 bg-transparent border border-success text-white rounded-full hover:bg-success/5"> | |
| Withdraw to Wallet | |
| </button> | |
| <button id="btn-convert" class="px-5 py-3 bg-neon-orange text-white rounded-full hover:bg-orange-600"> | |
| Convert to WSC | |
| </button> | |
| <button class="px-5 py-3 bg-transparent border border-gray-600 text-white rounded-full hover:bg-gray-700/50"> | |
| View Withdrawal History | |
| </button> | |
| </div> | |
| <div class="mt-4 bg-warning/10 border border-warning/30 text-warning px-4 py-3 rounded-lg text-sm"> | |
| <span class="font-medium">KYC verification incomplete.</span> Required for withdrawals. | |
| </div> | |
| <p class="text-gray-400 text-xs mt-4">Processing time: 24–48h after KYC.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Transaction History --> | |
| <section class="mb-8"> | |
| <div class="glass-card p-4 sm:p-6"> | |
| <div class="flex justify-between flex-wrap"> | |
| <h3 class="text-lg lg:text-xl font-bold mb-4">Transaction History</h3> | |
| <button id="tx-export" class="px-4 py-2 border border-gray-600 rounded-lg hover:bg-gray-700/50 flex items-center gap-2 h-10 mt-1"> | |
| <i data-feather="download"></i> | |
| Export CSV | |
| </button> | |
| </div> | |
| <div id="tx-filter" class="flex flex-wrap gap-4 mb-6"> | |
| <div class="flex items-center gap-2"> | |
| <select class="bg-gray-900/50 border border-gray-700 rounded-lg px-3 py-2 text-sm"> | |
| <option>Last 7 Days</option> | |
| <option selected>Last 30 Days</option> | |
| <option>All Time</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <select class="bg-gray-900/50 border border-gray-700 rounded-lg px-3 py-2 text-sm"> | |
| <option disabled>Amount Range</option> | |
| <option>0 - 10</option> | |
| <option>10 - 100</option> | |
| <option>100+</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <select class="bg-gray-900/50 border border-gray-700 rounded-lg px-3 py-2 text-sm"> | |
| <option disabled>Status</option> | |
| <option>Completed</option> | |
| <option>Pending</option> | |
| <option>Failed</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="tab-scroll"> | |
| <div class="flex space-x-4 mb-6"> | |
| <button class="px-4 py-2 bg-white text-black rounded-lg font-medium">All</button> | |
| <button class="px-4 py-2 hover:bg-gray-800 rounded-lg">Deposits</button> | |
| <button class="px-4 py-2 hover:bg-gray-800 rounded-lg">Withdrawals</button> | |
| <button class="px-4 py-2 hover:bg-gray-800 rounded-lg">Bonuses</button> | |
| <button class="px-4 py-2 hover:bg-gray-800 rounded-lg">Wagers</button> | |
| <button class="px-4 py-2 hover:bg-gray-800 rounded-lg">Adjustments</button> | |
| </div> | |
| </div> | |
| <div id="tx-table" class="relative"> | |
| <table class="w-full text-sm"> | |
| <thead class="text-gray-400 border-b border-gray-800"> | |
| <tr> | |
| <th class="pb-3 text-left">Date/Time</th> | |
| <th class="pb-3 text-left">Type</th> | |
| <th class="pb-3 text-left">Description</th> | |
| <th class="pb-3 text-right">Amount</th> | |
| <th class="pb-3">Currency</th> | |
| <th class="pb-3 text-right">Status</th> | |
| <th class="pb-3 text-right">Ref ID</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <!-- Empty Table State --> | |
| <tr> | |
| <td colspan="7" class="py-12 text-center"> | |
| <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23525052' stroke-linecap='round' stroke-width='1.5' d='M12 11v6m0 0l-2.5-2.5M12 17l2.5-2.5'/%3E%3C/svg%3E" class="inline-block mb-4 opacity-50" /> | |
| <p class="text-gray-500">No transactions yet. Top up your wallet to get started.</p> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Store & Promos --> | |
| <section class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <!-- Buy Packages --> | |
| <div id="store-card" class="glass-card p-6 glow-hover"> | |
| <h3 class="text-lg font-bold mb-4">Buy Packages</h3> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6"> | |
| <div class="bg-gradient-to-br from-black/40 to-orange-900/20 p-4 rounded-xl border border-orange-500/30 relative"> | |
| <div class="absolute top-2 right-2 bg-warning/20 text-warning text-xs px-2 py-1 rounded">Best Value</div> | |
| <p class="text-lg font-bold">5 SC + 25GC</p> | |
| <p class="text-neon-orange mt-1">$5.99</p> | |
| <div class="text-xs mt-2 text-gray-400">+ 5 Free Spins</div> | |
| </div> | |
| <div class="bg-gray-800/40 p-4 rounded-xl border border-gray-700"> | |
| <p class="text-lg font-bold">15 SC + 75GC</p> | |
| <p class="text-gray-300 mt-1">$14.99</p> | |
| </div> | |
| </div> | |
| <button class="w-full py-3 rounded-full bg-gradient-to-r from-neon-orange to-orange-700 font-bold hover:opacity-90">Go to Store</button> | |
| </div> | |
| <!-- Active Bonuses --> | |
| <div id="promos-card" class="glass-card p-6 glow-hover"> | |
| <h3 class="text-lg font-bold mb-4">Active Bonuses & Codes</h3> | |
| <ul class="space-y-3 mb-6"> | |
| <li class="flex justify-between items-center pb-2 border-b border-gray-800/50"> | |
| <div> | |
| <p class="font-medium">Welcome Bonus</p> | |
| <div class="text-xs text-gray-400">Exp: 48h remaining</div> | |
| </div> | |
| <div class="bg-gray-800/50 rounded-lg px-2 py-1 text-xs border border-success/20">Active</div> | |
| </li> | |
| </ul> | |
| <div class="flex gap-3"> | |
| <input type="text" placeholder="Have a code?" class="bg-gray-900/50 border border-gray-700 rounded-lg px-4 py-2 flex-1"> | |
| <button class="px-5 py-2 bg-gradient-to-r from-neon-blue to-blue-700 rounded-lg font-medium">Apply</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- VIP & Jackpot Tie-ins --> | |
| <section class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <!-- VIP Snapshot --> | |
| <div id="vip-card" class="glass-card p-6 glow-hover flex flex-col"> | |
| <h3 class="text-lg font-bold mb-4">VIP Snapshot</h3> | |
| <div class="mt-auto"> | |
| <p class="text-gray-400 text-sm">This month wagered:</p> | |
| <div class="text-xl mt-1">420.00 SC</div> | |
| <div class="flex items-center mt-4 py-4 border-t border-gray-800/50"> | |
| <div class="w-full bg-gray-800/50 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-blue-400 to-neon-blue h-2 rounded-full" style="width:12%"></div> | |
| </div> | |
| <span class="text-sm ml-4">+12%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Jackpot Contribution --> | |
| <div id="jackpot-card" class="glass-card p-6 glow-hover flex flex-col"> | |
| <h3 class="text-lg font-bold mb-4">Jackpot Contribution</h3> | |
| <div class="mt-auto"> | |
| <div class="text-xl text-neon-orange mt-1">8.40 SC</div> | |
| <p class="text-gray-400 mt-2 text-sm">You've contributed to the pool</p> | |
| <button class="mt-6 text-neon-orange font-medium">View Jackpots →</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Security & Settings --> | |
| <section class="mb-12"> | |
| <div class="glass-card p-6"> | |
| <h3 class="text-xl font-bold mb-4">Security & Settings</h3> | |
| <div id="security-accordion" class="space-y-4"> | |
| <!-- Payment Methods --> | |
| <div class="bg-gray-900/40 p-4 rounded-lg cursor-pointer hover:bg-gray-900/60 bounce-once"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center gap-3"> | |
| <i data-feather="credit-card"></i> | |
| <span>Payment Methods</span> | |
| </div> | |
| <i data-feather="chevron-right"></i> | |
| </div> | |
| </div> | |
| <!-- Withdraw PIN --> | |
| <div class="bg-gray-900/40 p-4 rounded-lg cursor-pointer hover:bg-gray-900/60 bounce-once"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center gap-3"> | |
| <i data-feather="lock"></i> | |
| <span>Set Withdrawal PIN</span> | |
| </div> | |
| <i data-feather="chevron-right"></i> | |
| </div> | |
| </div> | |
| <!-- KYC Status --> | |
| <div class="bg-gradient-to-r from-black/40 to-warning/10 p-4 rounded-lg cursor-pointer hover:opacity-90 bounce-once border border-warning/30"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center gap-3"> | |
| <i data-feather="shield" class="text-yellow-300"></i> | |
| <span> | |
| KYC Verification | |
| <span class="ml-2 text-xs bg-warning/20 text-warning px-2 py-1 rounded-full">Pending</span> | |
| </span> | |
| </div> | |
| <i data-feather="chevron-right" class="text-warning"></i> | |
| </div> | |
| </div> | |
| <!-- Alerts --> | |
| <div class="bg-gray-900/40 p-4 rounded-lg cursor-pointer hover:bg-gray-900/60 bounce-once"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center gap-3"> | |
| <i data-feather="bell"></i> | |
| <span>Notification Preferences</span> | |
| </div> | |
| <i data-feather="chevron-right"></i> | |
| </div> | |
| </div> | |
| <!-- Responsible Gaming --> | |
| <div class="bg-gray-900/40 p-4 rounded-lg cursor-pointer hover:bg-gray-900/60 bounce-once"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center gap-3"> | |
| <i data-feather="heart"></i> | |
| <span>Responsible Gaming Tools</span> | |
| </div> | |
| <i data-feather="chevron-right"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Scripts --> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out' | |
| }); | |
| // Tooltip hover positions | |
| document.querySelectorAll('.tooltip').forEach(tt => { | |
| tt.addEventListener('mouseenter', function() { | |
| const content = this.querySelector('.tooltip-content'); | |
| if (window.innerWidth - this.getBoundingClientRect().right < 200) { | |
| content.style.left = 'auto'; | |
| content.style.right = '0'; | |
| content.style.transform = 'none'; | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |