Spaces:
Running
Running
Design a production-ready Wallet Page for a neon-casino theme. Use Nioplay’s established system:
2010cb9
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nioplay Wallet</title> | |
| <!-- External Styles --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <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"> | |
| <!-- External Scripts --> | |
| <script src="https://unpkg.com/feather-icons"></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/aos@2.3.1/dist/aos.js"></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' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%); | |
| color: #F5F5F5; | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| /* Glass card styles */ | |
| .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 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2); | |
| overflow: hidden; | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .glass-card:hover { | |
| transform: translateY(-4px); | |
| border-color: rgba(255, 255, 255, 0.2); | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); | |
| } | |
| .glass-card::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E"); | |
| background-size: 200px; | |
| pointer-events: none; | |
| mix-blend-mode: overlay; | |
| opacity: 0.05; | |
| } | |
| /* Border trailer animation for buttons */ | |
| .btn-trail-anim { | |
| position: relative; | |
| z-index: 1; | |
| overflow: hidden; | |
| border-radius: 9999px; | |
| isolation: isolate; | |
| } | |
| .btn-trail-anim::before { | |
| content: ''; | |
| position: absolute; | |
| z-index: -1; | |
| width: 300%; | |
| height: 300%; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%) rotate(0deg); | |
| background: conic-gradient( | |
| transparent, | |
| rgba(255, 106, 0, 0.6), | |
| rgba(0, 228, 255, 0.6), | |
| transparent 70% | |
| ); | |
| animation: border-trail 2.5s linear infinite; | |
| } | |
| .btn-trail-anim::after { | |
| content: ''; | |
| position: absolute; | |
| top: 2px; | |
| left: 2px; | |
| right: 2px; | |
| bottom: 2px; | |
| background: radial-gradient(circle at center, #1a0d00 0%, #0a0a0a 40%); | |
| border-radius: 9999px; | |
| } | |
| @keyframes border-trail { | |
| 0% { transform: translate(-50%, -50%) rotate(0deg); } | |
| 100% { transform: translate(-50%, -50%) rotate(360deg); } | |
| } | |
| /* Progress bar styles */ | |
| .progress-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| overflow: hidden; | |
| } | |
| .progress-bar-inner { | |
| height: 100%; | |
| border-radius: 4px; | |
| transition: width 0.6s ease; | |
| position: relative; | |
| } | |
| .progress-bar-inner::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| right: -1px; | |
| bottom: 0; | |
| width: 8px; | |
| background: rgba(255, 255, 255, 0.5); | |
| filter: blur(3px); | |
| opacity: 0.6; | |
| } | |
| /* Tooltip styles */ | |
| .tt-wrapper { | |
| display: inline-flex; | |
| position: relative; | |
| } | |
| .tt-trigger:hover + .tt-content { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translate(-50%, 10px); | |
| } | |
| .tt-content { | |
| position: absolute; | |
| top: 100%; | |
| left: 50%; | |
| transform: translate(-50%, 5px); | |
| background: rgba(31, 25, 17, 0.95); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 8px; | |
| padding: 10px 12px; | |
| min-width: 200px; | |
| max-width: 280px; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); | |
| backdrop-filter: blur(10px); | |
| font-size: 13px; | |
| opacity: 0; | |
| visibility: hidden; | |
| z-index: 50; | |
| transition: all 0.2s ease; | |
| pointer-events: none; | |
| font-weight: 300; | |
| } | |
| /* Type labels */ | |
| .type-label { | |
| display: inline-flex; | |
| padding: 2px 12px; | |
| border-radius: 100px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| line-height: 20px; | |
| border-width: 1px; | |
| } | |
| .flex-basis-40 { | |
| flex-basis: 40%; | |
| } | |
| .section-title { | |
| font-weight: 600; | |
| letter-spacing: 0.5px; | |
| font-size: 20px; | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| /* Value displays */ | |
| .big-number { | |
| font-size: 38px; | |
| line-height: 1.2; | |
| font-weight: 700; | |
| font-family: 'Orbitron', sans-serif; | |
| letter-spacing: -0.5px; | |
| background: linear-gradient(to bottom, #F5F5F5, #B8B8B8); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| /* Status banners */ | |
| .alert-banner { | |
| padding: 10px 16px; | |
| border-radius: 12px; | |
| font-size: 14px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| /* Animations */ | |
| [data-aos="animate-scale"] { | |
| transform: scale(0.95); | |
| opacity: 0; | |
| transition-property: transform, opacity; | |
| } | |
| [data-aos="animate-scale"].aos-animate { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen antialiased"> | |
| <!-- Layout container --> | |
| <div class="mx-auto px-4 py-6 max-w-8xl"> | |
| <!-- Page Header --> | |
| <header class="glass-card px-6 py-5 mb-6 md:px-8 md:py-6"> | |
| <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 font-bold text-white font-orbitron">Wallet</h1> | |
| <p class="text-secondary-200 mt-1">Track balances, playthrough progress, and redeemables.</p> | |
| </div> | |
| <div class="lg:text-right"> | |
| <div class="flex space-x-4 mt-2 mb-3"> | |
| <button id="btn-deposit" class="btn-trail-anim px-8 py-3 relative rounded-full bg-white/5 text-white font-semibold flex items-center font-orbitron"> | |
| <span class="relative z-10 flex items-center"> | |
| <i data-feather="plus" class="mr-2 w-4 h-4"></i> | |
| Deposit SC | |
| </span> | |
| </button> | |
| <button id="btn-withdraw" class="btn-trail-anim px-8 py-3 relative rounded-full bg-white/5 text-neon-blue font-semibold flex items-center font-orbitron" style="--before-bg: linear-gradient(transparent, rgba(0, 228, 255, 0.6), transparent);"> | |
| <span class="relative z-10 flex items-center"> | |
| <i data-feather="download" class="mr-2 w-4 h-4"></i> | |
| Withdraw | |
| </span> | |
| </button> | |
| </div> | |
| <div class="flex flex-wrap justify-center lg:justify-end gap-x-5 gap-y-2 text-sm"> | |
| <a href="#" class="text-secondary-300 hover:text-neon-blue transition-colors flex items-center"> | |
| <i data-feather="credit-card" class="w-3 h-3 mr-1"></i> Payment Methods | |
| </a> | |
| <a href="#" class="text-secondary-300 hover:text-neon-blue transition-colors flex items-center"> | |
| <i data-feather="clipboard" class="w-3 h-3 mr-1"></i> Withdrawal Policy | |
| </a> | |
| <a href="#" class="text-secondary-300 hover:text-neon-orange transition-colors flex items-center"> | |
| <i data-feather="user-check" class="w-3 h-3 mr-1"></i> KYC Status | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Balance Overview Grid --> | |
| <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8"> | |
| <!-- Purchase SC Card --> | |
| <div id="card-purchase-sc" class="glass-card p-6 flex flex-col"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="type-label border-neon-orange text-neon-orange"> | |
| 1× Playthrough | |
| </div> | |
| <div class="tt-wrapper"> | |
| <div class="tt-trigger cursor-pointer text-secondary-400"> | |
| <i data-feather="info" class="w-4 h-4 stroke-current"></i> | |
| </div> | |
| <div class="tt-content"> | |
| Purchase SC requires 1× wagering before withdrawal. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="big-number">18.74</div> | |
| <div class="mt-2 text-secondary-300 text-sm"> | |
| Required: <span>18.74</span> | Progress: <span class="text-neon-orange">64.5%</span> | |
| </div> | |
| </div> | |
| <!-- Bonus SC Card --> | |
| <div id="card-bonus-sc" class="glass-card p-6 flex flex-col"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="type-label border-neon-blue text-neon-blue"> | |
| 5× Playthrough | |
| </div> | |
| <div class="tt-wrapper"> | |
| <div class="tt-trigger cursor-pointer text-secondary-400"> | |
| <i data-feather="info" class="w-4 h-4 stroke-current"></i> | |
| </div> | |
| <div class="tt-content"> | |
| Bonus SC requires 5× wagering. Table & live games may count less. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="big-number">0.30</div> | |
| <div class="mt-2 text-secondary-300 text-sm"> | |
| Required: <span>1.50</span> | Progress: <span class="text-neon-blue">0.0%</span> | |
| </div> | |
| </div> | |
| <!-- WSC Card --> | |
| <div id="card-wsc" class="glass-card p-6 flex flex-col bg-gradient-to-br from-black/30 to-[#331400]/50 relative"> | |
| <span class="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-r from-transparent to-[#FF6A00]/30"></span> | |
| <div class="relative z-10"> | |
| <div class="type-label border-success text-success bg-success/10 border-success/30 mb-4"> | |
| Redeemable Now | |
| </div> | |
| <div class="big-number text-success drop-shadow-[0_0_8px_rgba(60,226,122,0.3)]"> | |
| 6.64 | |
| </div> | |
| <div class="mt-2 text-success/80"> | |
| Ready to withdraw. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gold Coins Card --> | |
| <div id="card-gc" class="glass-card p-6 flex flex-col"> | |
| <div class="type-label border-warning text-warning bg-warning/10 border-warning/30 mb-4"> | |
| Gold Coins | |
| </div> | |
| <div class="big-number text-warning">3,500</div> | |
| <div class="mt-2 text-secondary-300"> | |
| For fun play. | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Playthrough Progress + Contribution --> | |
| <section class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-8"> | |
| <!-- Left Card - Progress Bars --> | |
| <div id="progress-container" class="glass-card p-6" data-aos="fade-right"> | |
| <h2 class="text-xl section-title mb-5">Playthrough Progress</h2> | |
| <!-- Purchase SC Progress --> | |
| <div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">Purchase SC (1×)</span> | |
| <span class="text-sm">12.10 / 18.74 | <span class="text-neon-orange">64.5%</span></span> | |
| </div> | |
| <div class="progress-bar mb-6"> | |
| <div id="bar-purchase" class="progress-bar-inner w-[64.5%]" style="background: linear-gradient(to right, #FF6A00 0%, #FF6A00 70%, #3CE27A 100%);"></div> | |
| </div> | |
| </div> | |
| <!-- Bonus SC Progress --> | |
| <div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">Bonus SC (5×)</span> | |
| <span class="text-sm">0.00 / 1.50 | <span class="text-neon-blue">0.0%</span></span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div id="bar-bonus" class="progress-bar-inner w-[0%]" style="background: linear-gradient(to right, #00E4FF 0%, #00E4FF 0%, #FF6A00 100%);"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Card - Contribution Weights --> | |
| <div class="glass-card p-6" data-aos="fade-left"> | |
| <div class="flex justify-between items-center mb-5"> | |
| <h2 class="text-xl section-title">How your wagers count</h2> | |
| <button class="text-neon-blue hover:text-white transition-colors"> | |
| <i data-feather="chevron-down"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 mr-3 rounded-lg bg-success/10 flex items-center justify-center"> | |
| <i data-feather="sliders" class="text-success w-4 h-4"></i> | |
| </div> | |
| <span>Slots</span> | |
| </div> | |
| <span class="px-3 py-1 bg-green-900/40 rounded-md">100%</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 mr-3 rounded-lg bg-warning/10 flex items-center justify-center"> | |
| <i data-feather="gift" class="text-warning w-4 h-4"></i> | |
| </div> | |
| <span>Instant Win</span> | |
| </div> | |
| <span class="px-3 py-1 bg-yellow-900/40 rounded-md">75%</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 mr-3 rounded-lg bg-secondary-500/10 flex items-center justify-center"> | |
| <i data-feather="layers" class="text-secondary-300 w-4 h-4"></i> | |
| </div> | |
| <span>RNG Table</span> | |
| </div> | |
| <span class="px-3 py-1 bg-blue-900/40 rounded-md">25%</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 mr-3 rounded-lg bg-danger/10 flex items-center justify-center"> | |
| <i data-feather="tv" class="text-danger w-4 h-4"></i> | |
| </div> | |
| <span>Live Casino</span> | |
| </div> | |
| <span class="px-3 py-1 bg-red-900/40 rounded-md">10%</span> | |
| </div> | |
| </div> | |
| <div class="border-t border-white/10 mt-4 pt-4 text-secondary-300 text-sm flex"> | |
| <i data-feather="info" class="w-4 h-4 mr-2 text-neon-blue"></i> | |
| Weights affect progress only, not redemption math. | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Redeemables & Actions --> | |
| <section class="glass-card p-6 mb-8" data-aos="zoom-in"> | |
| <div class="flex flex-col md:flex-row md:justify-between md:items-start"> | |
| <div class="md:w-2/3 mb-6 md:mb-0"> | |
| <h2 class="text-xl section-title mb-4">Redeemable Amounts</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="flex flex-col"> | |
| <label class="text-secondary-300 text-sm mb-1">Redeemable Purchase SC (WSC)</label> | |
| <div id="redeemable-wsc" class="text-2xl font-semibold font-orbitron">6.64</div> | |
| </div> | |
| <div class="flex flex-col"> | |
| <label class="text-secondary-300 text-sm mb-1">Redeemable Bonus SC</label> | |
| <div id="redeemable-bonus" class="text-2xl font-semibold font-orbitron">0.00</div> | |
| </div> | |
| </div> | |
| <p class="text-secondary-300 text-sm mt-4"> | |
| Bonus SC becomes redeemable as you clear its playthrough. | |
| </p> | |
| <div class="flex flex-wrap gap-2 mt-6"> | |
| <button class="px-6 py-3 bg-neon-orange/10 hover:bg-neon-orange/20 border border-neon-orange/30 text-neon-orange rounded-full transition-colors font-semibold font-orbitron"> | |
| Withdraw to Wallet | |
| </button> | |
| <button id="btn-convert" class="px-6 py-3 bg-neon-blue/10 hover:bg-neon-blue/20 border border-neon-blue/30 text-neon-blue rounded-full transition-colors font-semibold font-orbitron"> | |
| Convert to WSC | |
| </button> | |
| <button class="px-6 py-3 bg-white/5 hover:bg-white/10 border border-white/10 text-white rounded-full transition-colors"> | |
| View Withdrawal History | |
| </button> | |
| </div> | |
| <!-- Alert banners --> | |
| <div class="mt-4 space-y-2"> | |
| <div class="alert-banner bg-warning/10 text-warning border border-warning/20"> | |
| <i data-feather="alert-circle" class="mr-2 w-5 h-5"></i> | |
| KYC verification required to withdraw funds | |
| </div> | |
| </div> | |
| <div class="text-secondary-300 text-sm mt-4 italic flex items-center"> | |
| <i data-feather="clock" class="w-4 h-4 mr-2"></i> | |
| Processing time: 24–48h after KYC | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Transaction History --> | |
| <section class="glass-card p-6 mb-8" data-aos="animate-scale"> | |
| <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-6"> | |
| <h2 class="text-xl section-title">Transaction History</h2> | |
| <div class="flex mt-4 md:mt-0 gap-3 flex-wrap"> | |
| <select class="bg-black/20 border border-white/10 text-white rounded-lg px-3 py-2 text-sm"> | |
| <option>All</option> | |
| <option>Deposits</option> | |
| <option>Withdrawals</option> | |
| <option>Bonuses</option> | |
| <option>Wagers</option> | |
| <option>Adjustments</option> | |
| </select> | |
| <button class="bg-black/20 border border-white/10 text-white px-3 py-2 rounded-lg text-sm flex items-center"> | |
| <i data-feather="filter" class="w-4 h-4 mr-2"></i> | |
| Filters | |
| </button> | |
| <button id="tx-export" class="bg-black/20 border border-white/10 text-white px-3 py-2 rounded-lg text-sm flex items-center"> | |
| <i data-feather="download" class="w-4 h-4 mr-2"></i> | |
| Export CSV | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Table --> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full text-left text-sm"> | |
| <thead class="text-secondary-300 border-b border-white/10"> | |
| <tr> | |
| <th class="pb-3">Date/Time</th> | |
| <th class="pb-3">Type</th> | |
| <th class="pb-3">Description</th> | |
| <th class="pb-3 text-right">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> | |
| <tr class="border-b border-white/5 last:border-0"> | |
| <td class="py-4 text-white">Jan 14, 09:32</td> | |
| <td class="py-4"> | |
| <span class="px-2 py-1 bg-green-900/30 rounded-md text-success">Deposit</span> | |
| </td> | |
| <td class="py-4">Coin package purchase</td> | |
| <td class="py-4 text-success text-right">+$10.00</td> | |
| <td class="py-4">SC</td> | |
| <td class="py-4"> | |
| <span class="text-success flex items-center"> | |
| <span class="w-2 h-2 bg-success rounded-full mr-2"></span> | |
| Completed | |
| </span> | |
| </td> | |
| <td class="py-4">#TX98765</td> | |
| </tr> | |
| <tr class="border-b border-white/5 last:border-0"> | |
| <td class="py-4 text-white">Jan 13, 18:45</td> | |
| <td class="py-4"> | |
| <span class="px-2 py-1 bg-blue-900/30 rounded-md text-neon-blue">Wager</span> | |
| </td> | |
| <td class="py-4">Fortune Tiger spin</td> | |
| <td class="py-4 text-danger text-right">-$5.00</td> | |
| <td class="py-4">SC</td> | |
| <td class="py-4"> | |
| <span class="text-neon-blue flex items-center"> | |
| <span class="w-2 h-2 bg-neon-blue rounded-full mr-2"></span> | |
| Processed | |
| </span> | |
| </td> | |
| <td class="py-4">#TX98764</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <!-- Empty State --> | |
| <div class="py-16 text-center"> | |
| <div class="w-24 h-24 bg-gradient-to-b from-black to-[#331400]/40 border border-white/10 rounded-full flex items-center justify-center mx-auto"> | |
| <i data-feather="file" class="w-12 h-12 text-secondary-300"></i> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="text-xl font-semibold">No transactions yet</div> | |
| <p class="mt-2 text-secondary-300 max-w-md mx-auto"> | |
| Top up your wallet to get started with exciting games and features | |
| </p> | |
| <button class="mt-4 px-6 py-3 bg-neon-orange hover:bg-[#FF7A19] text-white font-semibold rounded-full transition-colors"> | |
| Deposit Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Double Card Row - Package Store & Promos --> | |
| <section class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-8"> | |
| <!-- Left: Buy Packages --> | |
| <div id="store-card" class="glass-card p-6 flex flex-col"> | |
| <h2 class="text-xl section-title flex items-center mb-5"> | |
| Buy Packages | |
| <span class="ml-3 text-xs px-2 py-1 bg-red-500/30 text-danger rounded-md">Hot Deals</span> | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-6"> | |
| <!-- Package 1 --> | |
| <div class="border border-white/10 rounded-xl p-4 bg-gradient-to-b from-[#0c0801] to-[#321d00]/30"> | |
| <div class="text-center mb-3"> | |
| <div class="big-number">50.00</div> | |
| <div class="text-secondary-300">+1500 GC</div> | |
| </div> | |
| <button class="w-full mt-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 text-white rounded-lg transition-colors"> | |
| $12.99 | |
| </button> | |
| </div> | |
| <!-- Package 2 (Best Value) --> | |
| <div class="border border-warning/30 rounded-xl p-4 bg-gradient-to-b from-[#2d1900] to-[#774000]/20 relative"> | |
| <span class="absolute -top-2 left-0 right-0 mx-auto text-xs px-2 py-1 bg-warning/10 text-warning rounded-md">Best Value</span> | |
| <div class="text-center mb-3"> | |
| <div class="big-number">120.00</div> | |
| <div class="text-secondary-300">+5000 GC</div> | |
| <div class="text-warning mt-1">+Bonus 20 SC</div> | |
| </div> | |
| <button class="w-full mt-2 px-4 py-2 bg-warning/10 hover:bg-warning/20 border border-warning/20 text-warning rounded-lg transition-colors"> | |
| $29.99 | |
| </button> | |
| </div> | |
| <!-- Package 3 --> | |
| <div class="border border-white/10 rounded-xl p-4 bg-gradient-to-b from-[#0c0801] to-[#0d1230]"> | |
| <div class="text-center mb-3"> | |
| <div class="big-number">250.00</div> | |
| <div class="text-secondary-300">+15000 GC</div> | |
| <div class="text-green-500 mt-1">+Bonus 65 SC</div> | |
| </div> | |
| <button class="w-full mt-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 text-white rounded-lg transition-colors"> | |
| $59.99 | |
| </button> | |
| </div> | |
| </div> | |
| <button class="btn-trail-anim px-6 py-3 relative rounded-full bg-neon-orange/5 text-white font-semibold flex items-center justify-center font-orbitron mx-auto"> | |
| <span class="relative z-10 flex items-center"> | |
| <i data-feather="shopping-cart" class="mr-2 w-4 h-4"></i> | |
| Go to Store | |
| </span> | |
| </button> | |
| </div> | |
| <!-- Right: Active Promos --> | |
| <div id="promos-card" class="glass-card p-6"> | |
| <h2 class="text-xl section-title mb-5">Active Bonuses & Codes</h2> | |
| <div class="space-y-4"> | |
| <!-- Promo 1 --> | |
| <div class="border border-white/10 rounded-xl p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="text-lg font-semibold">Saturday Fiesta</div> | |
| <div class="text-xs px-2 py-1 bg-danger/10 text-danger rounded-md">12h left</div> | |
| </div> | |
| <div class="text-secondary-300 text-sm mb-3"> | |
| 20 Bonus SC after $10 Deposit | |
| </div> | |
| <div class="progress-bar mb-1"> | |
| <div class="progress-bar-inner w-[65%]" style="background: linear-gradient(to right, #00E4FF, #FF6A00);"></div> | |
| </div> | |
| <div class="text-xs text-secondary-300 flex justify-between"> | |
| <span>$6.50 / $10.00</span> | |
| <span>65%</span> | |
| </div> | |
| </div> | |
| <!-- Promo 2 --> | |
| <div class="border border-white/10 rounded-xl p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div class="text-lg font-semibold">Lucky Streak</div> | |
| <div class="text-xs px-2 py-1 bg-neon-blue/10 text-neon-blue rounded-md">2d left</div> | |
| </div> | |
| <div class="text-secondary-300 text-sm mb-3"> | |
| 200 Free Spins on deposit of $20+ | |
| </div> | |
| <div class="progress-bar mb-1"> | |
| <div class="progress-bar-inner w-[30%]" style="background: linear-gradient(to right, #00E4FF, #FF6A00);"></div> | |
| </div> | |
| <div class="text-xs text-secondary-300 flex justify-between"> | |
| <span>$6.00 / $20.00</span> | |
| <span>30%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex"> | |
| <input type="text" placeholder="Have a code?" class="w-full bg-white/5 border-y border-l border-white/10 text-white rounded-l-lg px-4 py-2.5 focus:outline-none"> | |
| <button class="whitespace-nowrap bg-neon-orange hover:bg-[#FF7A19] text-white px-5 rounded-r-lg transition-colors"> | |
| Apply | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Mini Cards - VIP & Jackpots --> | |
| <section class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8"> | |
| <!-- VIP Snapshot --> | |
| <div id="vip-card" class="glass-card p-5" data-aos="zoom-in" data-aos-duration="400"> | |
| <h3 class="section-title flex items-center text-lg"> | |
| <i data-feather="award" class="text-warning mr-2 w-4 h-4"></i> | |
| VIP Snapshot | |
| </h3> | |
| <div class="mt-3 text-secondary-300 text-sm"> | |
| This month wagered: <span class="text-warning font-bold">420.00</span> | |
| → VIP <span class="text-success">+12%</span> | |
| </div> | |
| <div class="mt-5 border-t border-white/5 pt-3"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>VIP Bronze</span> | |
| <span>VIP Silver</span> | |
| </div> | |
| <div class="progress-bar h-1.5"> | |
| <div class="progress-bar-inner w-[12%]" style="background: #FEC84B;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Jackpot Contribution --> | |
| <div id="jackpot-card" class="glass-card p-5" data-aos="zoom-in" data-aos-duration="400" data-aos-delay="100"> | |
| <h3 class="section-title flex items-center text-lg"> | |
| <i data-feather="alert-octagon" class="text-danger mr-2 w-4 h-4"></i> | |
| Jackpot Contribution | |
| </h3> | |
| <div class="mt-3"> | |
| <div class="text-secondary-300 text-sm mb-1"> | |
| You've contributed <span class="text-neon-orange underline">8.40</span> to the pool | |
| </div> | |
| <div class="text-xs flex items-center text-secondary-400"> | |
| <i data-feather="lock" class="w-3 h-3 mr-1"></i> | |
| 17 hours to next draw • $58,471 total pool | |
| </div> | |
| </div> | |
| <a href="#" class="inline-block mt-4 bg-white/5 hover:bg-white/10 rounded-lg px-4 py-2 text-sm"> | |
| View Jackpots | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Security & Settings --> | |
| <section class="glass-card p-6 mb-8" data-aos="zoom-in-up"> | |
| <h2 class="text-xl section-title mb-5">Security & Settings</h2> | |
| <div id="security-accordion" class="space-y-3"> | |
| <!-- Accordion Item 1 --> | |
| <div class="border border-white/10 rounded-xl overflow-hidden"> | |
| <button class="w-full p-4 flex justify-between items-center text-left bg-white/5"> | |
| <div class="flex items-center"> | |
| <i data-feather="credit-card" class="w-5 h-5 mr-3 text-neon-blue"></i> | |
| Payment Methods | |
| </div> | |
| <i data-feather="chevron-down" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <!-- Accordion Item 2 --> | |
| <div class="border border-white/10 rounded-xl overflow-hidden"> | |
| <button class="w-full p-4 flex justify-between items-center text-left bg-white/5"> | |
| <div class="flex items-center"> | |
| <i data-feather="lock" class="w-5 h-5 mr-3 text-warning"></i> | |
| Set Withdrawal PIN | |
| </div> | |
| <i data-feather="chevron-down" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <!-- Accordion Item 3 --> | |
| <div class="border border-white/10 rounded-xl overflow-hidden"> | |
| <button class="w-full p-4 flex justify-between items-center text-left bg-white/5"> | |
| <div class="flex items-center"> | |
| <i data-feather="file-text" class="w-5 h-5 mr-3 text-success"></i> | |
| KYC / Verification | |
| </div> | |
| <span class="bg-danger/30 text-danger text-xs font-medium py-1 px-2 rounded-md">Action required</span> | |
| </button> | |
| </div> | |
| <!-- Accordion Item 4 --> | |
| <div class="border border-white/10 rounded-xl overflow-hidden"> | |
| <button class="w-full p-4 flex justify-between items-center text-left bg-white/5"> | |
| <div class="flex items-center"> | |
| <i data-feather="bell" class="w-5 h-5 mr-3"></i> | |
| Notification preferences | |
| </div> | |
| <i data-feather="chevron-down" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <!-- Accordion Item 5 --> | |
| <div class="border border-white/10 rounded-xl overflow-hidden"> | |
| <button class="w-full p-4 flex justify-between items-center text-left bg-white/5"> | |
| <div class="flex items-center"> | |
| <i data-feather="shield" class="w-5 h-5 mr-3 text-warning"></i> | |
| Responsible Play | |
| </div> | |
| <i data-feather="chevron-down" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Script initialization --> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| feather.replace(); | |
| AOS.init({ | |
| duration: 800, | |
| offset: 20, | |
| easing: 'ease-out-quad' | |
| }); | |
| // Initial progress animations | |
| anime({ | |
| targets: '.progress-bar-inner', | |
| opacity: [0, 1], | |
| scaleX: [0, 1], | |
| easing: 'easeOutElastic(1, .8)', | |
| duration: 1500, | |
| delay: 200 | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |