Spaces:
Running
Running
Design a production-ready Wallet Page for a neon-casino theme. Use Nioplay’s established system:
191d5ff
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Neon Wallet - Nioplay</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;700&display=swap" rel="stylesheet"> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <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 src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'neon-orange': '#FF6A00', | |
| 'neon-blue': '#00E4FF', | |
| 'neon-success': '#3CE27A', | |
| 'neon-warning': '#FEC84B', | |
| 'neon-danger': '#FF4D4D', | |
| 'glass-bg': 'rgba(255,255,255,0.05)', | |
| 'glass-border': 'rgba(255,255,255,0.12)', | |
| 'secondary-text': '#B8B8B8' | |
| }, | |
| backgroundImage: { | |
| 'global': 'radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%)' | |
| }, | |
| fontFamily: { | |
| 'orbitron': ['Orbitron', 'sans-serif'], | |
| 'poppins': ['Poppins', 'sans-serif'] | |
| }, | |
| backdropBlur: { | |
| 'sm': '10px', | |
| 'md': '14px' | |
| }, | |
| boxShadow: { | |
| 'glass': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)', | |
| 'glow-orange': '0 0 10px rgba(255, 106, 0, 0.5)', | |
| 'glow-blue': '0 0 10px rgba(0, 228, 255, 0.5)' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style type="text/css"> | |
| body { | |
| background-image: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%); | |
| color: #F5F5F5; | |
| font-family: 'Poppins', sans-serif; | |
| min-height: 100vh; | |
| } | |
| h1, h2, h3, h4, h5 { | |
| font-family: 'Orbitron', sans-serif; | |
| letter-spacing: 0.025em; | |
| } | |
| .glass-card { | |
| background: rgba(255,255,255,0.05); | |
| border: 1px solid rgba(255,255,255,0.12); | |
| backdrop-filter: blur(14px); | |
| border-radius: 1rem; | |
| box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .glass-card::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E"); | |
| z-index: -1; | |
| opacity: 0.5; | |
| } | |
| .glass-card:hover { | |
| border-color: rgba(255,255,255,0.2); | |
| transform: translateY(-3px); | |
| transition: all 0.2s ease-out; | |
| } | |
| .btn-trail { | |
| position: relative; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 9999px; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| text-align: center; | |
| overflow: hidden; | |
| z-index: 1; | |
| } | |
| .btn-trail::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 200%; | |
| height: 100%; | |
| background: linear-gradient( | |
| 115deg, | |
| transparent, | |
| rgba(255, 106, 0, 0.5), | |
| #FF6A00, | |
| rgba(255, 106, 0, 0.5), | |
| transparent | |
| ); | |
| background-size: 50% 100%; | |
| animation: borderTrail 2.5s linear infinite; | |
| z-index: -1; | |
| } | |
| .btn-orange-trail::before { | |
| background: linear-gradient( | |
| 115deg, | |
| transparent, | |
| rgba(255, 106, 0, 0.5), | |
| #FF6A00, | |
| rgba(255, 106, 0, 0.5), | |
| transparent | |
| ); | |
| } | |
| .btn-blue-trail::before { | |
| background: linear-gradient( | |
| 115deg, | |
| transparent, | |
| rgba(0, 228, 255, 0.5), | |
| #00E4FF, | |
| rgba(0, 228, 255, 0.5), | |
| transparent | |
| ); | |
| } | |
| .btn-trail span { | |
| position: relative; | |
| z-index: 2; | |
| background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%); | |
| padding: 0.5rem 1.25rem; | |
| border-radius: 9999px; | |
| width: calc(100% - 4px); | |
| height: calc(100% - 4px); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| @keyframes borderTrail { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| .big-number { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| font-family: 'Orbitron', sans-serif; | |
| letter-spacing: 0.025em; | |
| text-shadow: 0 0 8px rgba(255, 255, 255, 0.2); | |
| } | |
| .chip-label { | |
| border-radius: 9999px; | |
| border-width: 1px; | |
| padding: 0.25rem 0.75rem; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| } | |
| .progress-track { | |
| height: 12px; | |
| background: rgba(255,255,255,0.1); | |
| border-radius: 9999px; | |
| overflow: hidden; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| border-radius: 9999px; | |
| transition: width 0.6s ease; | |
| position: relative; | |
| } | |
| .progress-bar::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| box-shadow: inset 0 0 8px rgba(255,255,255,0.5); | |
| border-radius: 9999px; | |
| } | |
| .tooltip-container { | |
| position: relative; | |
| display: inline-flex; | |
| margin-left: 0.25rem; | |
| } | |
| .tooltip { | |
| visibility: hidden; | |
| width: 200px; | |
| background: rgba(10,10,10,0.95); | |
| color: #F5F5F5; | |
| border: 1px solid rgba(255,255,255,0.15); | |
| padding: 12px; | |
| border-radius: 8px; | |
| position: absolute; | |
| bottom: 125%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| font-size: 0.85rem; | |
| font-weight: 400; | |
| z-index: 10; | |
| backdrop-filter: blur(4px); | |
| } | |
| .tooltip-container:hover .tooltip { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| @media (min-width: 768px) { | |
| .overview-grid { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .overview-grid { | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| } | |
| .progress-grid { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .overview-grid { | |
| grid-template-columns: repeat(1, minmax(0, 1fr)); | |
| overflow-x: auto; | |
| } | |
| .big-number { | |
| font-size: 1.75rem; | |
| } | |
| } | |
| .accordion-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.2s ease-out; | |
| } | |
| input:focus, button:focus { | |
| outline: 2px solid #00E4FF; | |
| outline-offset: 2px; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col bg-cover"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- HEADER --> | |
| <header class="glass-card mb-8 py-4 px-6" data-aos="fade-down"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> | |
| <div> | |
| <h1 class="text-2xl md:text-3xl font-bold text-white">Wallet</h1> | |
| <p class="text-sm text-secondary-text mt-1">Track balances, playthrough progress, and redeemables.</p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <div class="flex gap-3"> | |
| <button id="btn-deposit" class="btn-trail btn-orange-trail"> | |
| <span>Deposit SC</span> | |
| </button> | |
| <button id="btn-withdraw" class="btn-trail btn-blue-trail"> | |
| <span>Withdraw</span> | |
| </button> | |
| </div> | |
| <div class="flex gap-3 mt-2 justify-center md:justify-end"> | |
| <a href="#" class="text-xs text-secondary-text hover:text-neon-blue">Payment Methods</a> | |
| <a href="#" class="text-xs text-secondary-text hover:text-neon-blue">Withdrawal Policy</a> | |
| <a href="#" class="text-xs text-secondary-text hover:text-neon-blue">KYC Status</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- BALANCE OVERVIEW --> | |
| <section class="mb-8"> | |
| <div class="overview-grid grid gap-4"> | |
| <!-- Purchase SC Card --> | |
| <div id="card-purchase-sc" class="glass-card p-5" data-aos="fade-right"> | |
| <div class="flex justify-between"> | |
| <div class="flex items-center gap-1 mb-2"> | |
| <div class="chip-label border-neon-orange text-neon-orange"> | |
| 1× | |
| </div> | |
| <p class="text-sm font-semibold">Purchase SC</p> | |
| </div> | |
| <div class="tooltip-container"> | |
| <i data-feather="info" class="w-4 h-4 text-secondary-text"></i> | |
| <div class="tooltip">Purchase SC requires 1× wagering before withdrawal.</div> | |
| </div> | |
| </div> | |
| <p class="big-number text-white">18.74</p> | |
| <p class="text-xs text-secondary-text mt-2">Required: 18.74 | Progress: 64.5%</p> | |
| </div> | |
| <!-- Bonus SC Card --> | |
| <div id="card-bonus-sc" class="glass-card p-5" data-aos="fade-right" data-aos-delay="50"> | |
| <div class="flex justify-between"> | |
| <div class="flex items-center gap-1 mb-2"> | |
| <div class="chip-label border-neon-blue text-neon-blue"> | |
| 5× | |
| </div> | |
| <p class="text-sm font-semibold">Bonus SC</p> | |
| </div> | |
| <div class="tooltip-container"> | |
| <i data-feather="info" class="w-4 h-4 text-secondary-text"></i> | |
| <div class="tooltip">Bonus SC requires 5× wagering. Table & live games may count less.</div> | |
| </div> | |
| </div> | |
| <p class="big-number text-white">0.30</p> | |
| <p class="text-xs text-secondary-text mt-2">Required: 1.50 | Progress: 0.0%</p> | |
| </div> | |
| <!-- WSC Card --> | |
| <div id="card-wsc" class="glass-card p-5" data-aos="fade-right" data-aos-delay="100"> | |
| <div class="flex justify-between"> | |
| <div class="flex items-center gap-1 mb-2"> | |
| <div class="chip-label border-neon-success text-neon-success"> | |
| Redeemable Now | |
| </div> | |
| <p class="text-sm font-semibold">Withdrawable SC</p> | |
| </div> | |
| <div class="tooltip-container"> | |
| <i data-feather="info" class="w-4 h-4 text-secondary-text"></i> | |
| <div class="tooltip">Withdrawable Sweepstakes Coins you can cash out.</div> | |
| </div> | |
| </div> | |
| <p class="big-number text-white">6.64</p> | |
| <p class="text-sm text-secondary-text mt-1">Ready to withdraw.</p> | |
| </div> | |
| <!-- GC Card --> | |
| <div id="card-gc" class="glass-card p-5" data-aos="fade-right" data-aos-delay="150"> | |
| <div class="flex justify-between"> | |
| <div class="flex items-center gap-1 mb-2"> | |
| <div class="chip-label border-secondary-text text-secondary-text"> | |
| Gold Coins | |
| </div> | |
| <p class="text-sm font-semibold">Gold Coins</p> | |
| </div> | |
| <div class="tooltip-container"> | |
| <i data-feather="info" class="w-4 h-4 text-secondary-text"></i> | |
| <div class="tooltip">For fun play only, no cash value.</div> | |
| </div> | |
| </div> | |
| <p class="big-number text-white">3,500</p> | |
| <p class="text-sm text-secondary-text mt-1">For fun play.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- PLAYTHROUGH PROGRESS --> | |
| <section class="mb-8"> | |
| <div class="progress-grid grid gap-6"> | |
| <div id="bar-purchase" class="glass-card p-5" data-aos="fade-up"> | |
| <h3 class="text-lg font-semibold mb-4">Playthrough Progress</h3> | |
| <div class="mb-5"> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <div> | |
| <span class="text-secondary-text">Purchase SC (1×)</span> | |
| <span class="text-white ml-1">64.5%</span> | |
| </div> | |
| <div class="flex gap-1"> | |
| <span class="text-secondary-text">12.10 /</span> | |
| <span>18.74</span> | |
| </div> | |
| </div> | |
| <div class="progress-track"> | |
| <div class="progress-bar" style="width: 64.5%; background: linear-gradient(to right, #FF6A00, #3CE27A);"></div> | |
| </div> | |
| <div class="flex justify-between text-xs mt-1"> | |
| <span>0</span> | |
| <span>Required: 18.74</span> | |
| </div> | |
| </div> | |
| <div class="pt-2 border-t border-white/10"></div> | |
| <div class="mt-5"> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <div> | |
| <span class="text-secondary-text">Bonus SC (5×)</span> | |
| <span class="text-white ml-1">0.0%</span> | |
| </div> | |
| <div class="flex gap-1"> | |
| <span class="text-secondary-text">0.00 /</span> | |
| <span>1.50</span> | |
| </div> | |
| </div> | |
| <div class="progress-track"> | |
| <div class="progress-bar" style="width: 0%; background: linear-gradient(to right, #00E4FF, #FF6A00);"></div> | |
| </div> | |
| <div class="flex justify-between text-xs mt-1"> | |
| <span>0</span> | |
| <span>Required: 1.50</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="game-weights" class="glass-card p-5" data-aos="fade-up" data-aos-delay="50"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold">How your wagers count</h3> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="grid" class="w-4 h-4"></i> | |
| <span>Slots</span> | |
| </div> | |
| <span>100%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="target" class="w-4 h-4"></i> | |
| <span>Instant Win</span> | |
| </div> | |
| <span>75%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="sliders" class="w-4 h-4"></i> | |
| <span>RNG Table</span> | |
| </div> | |
| <span>25%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="users" class="w-4 h-4"></i> | |
| <span>Live Casino</span> | |
| <div class="tooltip-container ml-1"> | |
| <i data-feather="info" class="w-4 h-4 text-secondary-text"></i> | |
| <div class="tooltip">$100 on Live Casino → $10 progress</div> | |
| </div> | |
| </div> | |
| <span>10%</span> | |
| </div> | |
| </div> | |
| <p class="text-xs text-secondary-text mt-4"> | |
| Weights affect progress only, not redemption math. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- REDEEMABLES SECTION --> | |
| <section class="mb-8"> | |
| <div class="glass-card p-5" data-aos="zoom-in"> | |
| <h3 class="text-lg font-semibold mb-4">Redeemable Amounts</h3> | |
| <div class="flex flex-wrap gap-4 mb-4"> | |
| <div class="flex-1 min-w-[150px] glass-card p-4"> | |
| <p class="text-sm text-secondary-text mb-1">Redeemable WSC</p> | |
| <p id="redeemable-wsc" class="text-xl font-semibold">6.64</p> | |
| </div> | |
| <div class="flex-1 min-w-[150px] glass-card p-4"> | |
| <p class="text-sm text-secondary-text mb-1">Redeemable Bonus SC</p> | |
| <p id="redeemable-bonus" class="text-xl font-semibold">0.00</p> | |
| </div> | |
| </div> | |
| <p class="text-xs text-secondary-text mb-3">Bonus SC becomes redeemable as you clear its playthrough.</p> | |
| <div class="flex flex-wrap gap-2 mt-4"> | |
| <button id="btn-withdraw-action" class="px-4 py-2 rounded-lg bg-neon-orange font-medium">Withdraw to Wallet</button> | |
| <button id="btn-convert" class="px-4 py-2 rounded-lg bg-glass-bg border border-glass-border font-medium">Convert to WSC</button> | |
| <button class="px-4 py-2 rounded-lg bg-glass-bg border border-glass-border font-medium">View Withdrawal History</button> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="px-4 py-2 rounded-lg bg-glass-bg border border-glass-border flex items-start"> | |
| <i data-feather="clock" class="w-4 h-4 mr-2 text-secondary-text flex-shrink-0 mt-0.5"></i> | |
| <span class="text-sm">Processing time: 24–48h after KYC verification</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- TRANSACTION HISTORY --> | |
| <section class="mb-8" data-aos="fade-up"> | |
| <div class="glass-card p-5"> | |
| <div class="flex justify-between items-center mb-5 flex-wrap gap-3"> | |
| <h3 class="text-lg font-semibold">Transaction History</h3> | |
| <div class="flex gap-2 flex-wrap"> | |
| <button id="tx-export" class="px-3 py-1.5 text-sm rounded-lg bg-glass-bg border border-glass-border">Export CSV</button> | |
| <select class="px-3 py-1.5 text-sm rounded-lg bg-glass-bg border border-glass-border"> | |
| <option>All Status</option> | |
| <option>Pending</option> | |
| <option>Completed</option> | |
| </select> | |
| <input type="date" class="px-3 py-1.5 text-sm rounded-lg bg-glass-bg border border-glass-border" placeholder="Date"> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table id="tx-table" class="w-full"> | |
| <thead> | |
| <tr class="text-left text-sm text-secondary-text"> | |
| <th class="pb-3">Date/Time</th> | |
| <th class="pb-3">Type</th> | |
| <th class="pb-3">Description</th> | |
| <th class="pb-3">Amount</th> | |
| <th class="pb-3">Balance Type</th> | |
| <th class="pb-3">Status</th> | |
| <th class="pb-3">Ref ID</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-white/10"> | |
| <tr> | |
| <td class="py-3">-</td> | |
| <td class="py-3">-</td> | |
| <td class="py-3">-</td> | |
| <td class="py-3">-</td> | |
| <td class="py-3">-</td> | |
| <td class="py-3">-</td> | |
| <td class="py-3">-</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div id="empty-state" class="py-12 text-center"> | |
| <i data-feather="database" class="w-16 h-16 mx-auto text-secondary-text"></i> | |
| <h4 class="mt-4 text-lg font-medium">No transactions yet</h4> | |
| <p class="text-sm text-secondary-text max-w-md mx-auto mt-2"> | |
| Top up your wallet to get started with casino play | |
| </p> | |
| </div> | |
| <div class="border-t border-white/10 mt-4 pt-4"> | |
| <ul class="flex flex-wrap gap-3 justify-center"> | |
| <li class="text-sm"><button>All</button></li> | |
| <li class="text-sm"><button>Deposits</button></li> | |
| <li class="text-sm"><button>Withdrawals</button></li> | |
| <li class="text-sm"><button>Bonuses</button></li> | |
| <li class="text-sm"><button>Wagers</button></li> | |
| <li class="text-sm"><button>Adjustments</button></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- BOTTOM CARDS --> | |
| <section class="mb-8 grid md:grid-cols-2 gap-6"> | |
| <div id="store-card" class="glass-card p-5" data-aos="fade-right"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold">Buy Packages</h3> | |
| <button class="px-4 py-1.5 text-sm rounded-lg bg-glass-bg border border-glass-border">Go to Store</button> | |
| </div> | |
| <div class="grid grid-cols-3 gap-3 mt-5"> | |
| <div class="glass-card p-3"> | |
| <p class="text-sm font-medium">$10</p> | |
| <p class="text-xs text-secondary-text mt-1">10 SC + 50 GC</p> | |
| </div> | |
| <div class="glass-card p-3 relative"> | |
| <div class="absolute top-2 right-2 text-xs bg-neon-blue px-1.5 py-0.5 rounded">Best</div> | |
| <p class="text-sm font-medium">$25</p> | |
| <p class="text-xs text-secondary-text mt-1">25 SC + 250 GC</p> | |
| </div> | |
| <div class="glass-card p-3"> | |
| <p class="text-sm font-medium">$50</p> | |
| <p class="text-xs text-secondary-text mt-1">50 SC + 1500 GC</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="promos-card" class="glass-card p-5" data-aos="fade-left"> | |
| <h3 class="text-lg font-semibold mb-4">Active Bonuses & Codes</h3> | |
| <div class="space-y-3"> | |
| <div class="glass-card p-3"> | |
| <div class="flex justify-between"> | |
| <p class="text-sm font-medium">Welcome Bonus</p> | |
| <span class="text-xs">2 days left</span> | |
| </div> | |
| <div class="progress-track mt-2"> | |
| <div class="progress-bar" style="width: 15%; background: #00E4FF;"></div> | |
| </div> | |
| </div> | |
| <div class="glass-card p-3"> | |
| <div class="flex justify-between"> | |
| <p class="text-sm font-medium">Weekly Reload</p> | |
| <span class="text-xs">6 days left</span> | |
| </div> | |
| <div class="progress-track mt-2"> | |
| <div class="progress-bar" style="width: 65%; background: #FF6A00;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex mt-5"> | |
| <input type="text" placeholder="Have a code?" class="px-3 py-2 text-sm rounded-l-lg bg-glass-bg border border-glass-border w-full"> | |
| <button class="px-4 py-2 text-sm rounded-r-lg bg-glass-bg border border-glass-border font-medium">Apply</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ADDITIONAL CARDS --> | |
| <section class="mb-8 grid md:grid-cols-2 gap-6"> | |
| <div id="vip-card" class="glass-card p-5" data-aos="fade-right"> | |
| <h3 class="text-lg font-semibold mb-3">VIP Snapshot</h3> | |
| <p class="text-sm"> | |
| This month wagered: <span class="font-semibold">420.00</span> → VIP +<span class="font-semibold">12%</span> | |
| </p> | |
| <button class="mt-3 text-sm text-neon-blue hover:underline">View VIP benefits</button> | |
| </div> | |
| <div id="jackpot-card" class="glass-card p-5" data-aos="fade-left"> | |
| <h3 class="text-lg font-semibold mb-3">Jackpot Contribution</h3> | |
| <p class="text-sm"> | |
| You've contributed <span class="font-semibold">8.40</span> to the pool | |
| </p> | |
| <button class="mt-3 text-sm text-neon-blue hover:underline">View Jackpots</button> | |
| </div> | |
| </section> | |
| <!-- SECURITY & SETTINGS --> | |
| <section class="glass-card p-5" data-aos="fade-up"> | |
| <h3 class="text-lg font-semibold mb-4">Security & Settings</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <button class="w-full text-left py-3 flex justify-between items-center"> | |
| <span>Payment Methods</span> | |
| <i data-feather="chevron-down" class="w-5 h-5"></i> | |
| </button> | |
| <div class="accordion-content"> | |
| <div class="pb-4 pl-2"> | |
| <p class="text-sm">Visa ending in 1234</p> | |
| <p class="text-sm">Mastercard ending in 5678</p> | |
| <button class="mt-3 text-sm text-neon-blue hover:underline">Add New Method</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-white/10 pt-3"> | |
| <button class="w-full text-left py-3 flex justify-between items-center"> | |
| <span>Set Withdrawal PIN</span> | |
| <i data-feather="chevron-down" class="w-5 h-5"></i> | |
| </button> | |
| <div class="accordion-content"> | |
| <div class="pb-4 pl-2"> | |
| <div class="flex gap-2 max-w-md"> | |
| <input type="password" placeholder="New 4-digit PIN" class="px-3 py-2 text-sm rounded-lg bg-glass-bg border border-glass-border w-full"> | |
| <button class="px-4 py-2 text-sm rounded-lg bg-glass-bg border border-glass-border font-medium">Set</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-white/10 pt-3"> | |
| <button class="w-full text-left py-3 flex justify-between items-center"> | |
| <span>KYC / Verification</span> | |
| <i data-feather="chevron-down" class="w-5 h-5"></i> | |
| </button> | |
| <div class="accordion-content"> | |
| <div class="pb-4 pl-2"> | |
| <div class="flex items-center gap-2 text-sm mb-2"> | |
| <div class="w-3 h-3 rounded-full bg-neon-success"></div> | |
| <span>Email Verified</span> | |
| </div> | |
| <div class="flex items-center gap-2 text-sm"> | |
| <div class="w-3 h-3 rounded-full bg-neon-warning"></div> | |
| <span>ID Verification: Pending</span> | |
| <button class="ml-2 text-sm text-neon-blue hover:underline">Upload</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-white/10 pt-3"> | |
| <button class="w-full text-left py-3 flex justify-between items-center"> | |
| <span>Notification Preferences</span> | |
| <i data-feather="chevron-down" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <div class="border-t border-white/10 pt-3"> | |
| <a href="#" class="flex justify-between items-center py-3 text-neon-blue"> | |
| Responsible Play Guide | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <script> | |
| AOS.init({ | |
| duration: 600, | |
| easing: 'ease-out-sine', | |
| once: true | |
| }); | |
| feather.replace(); | |
| // Button hover effects | |
| const buttons = document.querySelectorAll('.btn-trail'); | |
| buttons.forEach(btn => { | |
| btn.addEventListener('mouseenter', () => { | |
| const type = btn.classList.contains('btn-orange-trail') ? 'glow-orange' : 'glow-blue'; | |
| btn.style.boxShadow = `0 0 15px rgba(var(--tw-${type.split('-')[1]} / 0.5))`; | |
| }); | |
| btn.addEventListener('mouseleave', () => { | |
| btn.style.boxShadow = 'none'; | |
| }); | |
| }); | |
| // Tooltip init | |
| document.querySelectorAll('.tooltip-container').forEach(el => { | |
| const tooltip = el.querySelector('.tooltip'); | |
| el.addEventListener('mouseenter', () => { | |
| tooltip.style.opacity = '1'; | |
| tooltip.style.visibility = 'visible'; | |
| }); | |
| el.addEventListener('mouseleave', () => { | |
| tooltip.style.opacity = '0'; | |
| tooltip.style.visibility = 'hidden'; | |
| }); | |
| }); | |
| // Accordion functionality | |
| document.querySelectorAll('.accordion').forEach(acc => { | |
| acc.addEventListener('click', function() { | |
| const panel = this.nextElementSibling; | |
| panel.style.maxHeight = panel.style.maxHeight ? null : `${panel.scrollHeight}px`; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |