Remove "VIP & Jackpot" Section - Follow Up Deployment

index.html

@@ -218,10 +218,10 @@
                 <div class="flex flex-col items-end">
                     <div class="flex gap-3">
                         <button id="btn-deposit" class="pill-button pill-button-primary">
-                            <span>Deposit SC</span>
+                            <span>Purchase</span>
                         </button>
                         <button id="btn-withdraw" class="pill-button pill-button-secondary">
-                            <span>Withdraw</span>
+                            <span>Redeem</span>
                         </button>
                     </div>
                     <div class="flex gap-4 mt-2 text-xs text-[#B8B8B8]">
@@ -252,7 +252,7 @@
                 <!-- Card A: Purchase SC -->
                 <div class="glass-card p-5" id="card-purchase-sc" data-aos="fade-up">
                     <div class="flex justify-between items-start">
-                        <span class="chip border border-[#FF6A00] text-[#FF6A00]">1× Playthrough</span>
+                        <span class="chip border border-[#FF6A00] text-[#FF6A00]">Standard</span>
                         <div class="tooltip-wrapper">
                             <i data-feather="info" class="w-4 h-4 text-[#B8B8B8]"></i>
                             <div class="tooltip-content">
@@ -267,7 +267,7 @@
                 <!-- Card B: Bonus SC -->
                 <div class="glass-card p-5" id="card-bonus-sc" data-aos="fade-up" data-aos-delay="50">
                     <div class="flex justify-between items-start">
-                        <span class="chip border border-[#00E4FF] text-[#00E4FF]">5× Playthrough</span>
+                        <span class="chip border border-[#00E4FF] text-[#00E4FF]">Bonus</span>
                         <div class="tooltip-wrapper">
                             <i data-feather="info" class="w-4 h-4 text-[#B8B8B8]"></i>
                             <div class="tooltip-content">
@@ -314,7 +314,7 @@
                     
                     <div class="mb-5" id="bar-purchase">
                         <div class="flex justify-between mb-2">
-                            <span class="font-medium flex items-center text-sm"><span class="inline-block w-2 h-2 rounded-full bg-[#FF6A00] mr-2"></span> Purchase SC</span>
+                            <span class="font-medium flex items-center text-sm"><span class="inline-block w-2 h-2 rounded-full bg-[#FF6A00] mr-2"></span> Standard</span>
                             <div class="text-sm"><span class="font-medium">12.10</span> / <span class="text-[#B8B8B8]">18.74</span> • <span class="text-[#FF6A00]">64.5%</span></div>
                         </div>
                         <div class="progress-track">
@@ -335,57 +335,10 @@
                     </div>
                 </div>
                 
-                <!-- Right Card: Game Contributions -->
-                <div class="glass-card p-6" data-aos="fade-left" data-aos-delay="100">
-                    <div class="flex justify-between items-center mb-4">
-                        <h3 class="text-lg font-medium font-['Orbitron']">How your wagers count</h3>
-                        <button class="rounded-full hover:bg-[rgba(255,255,255,0.1)] p-1" aria-label="Collapse">
-                            <i data-feather="chevron-down" class="w-5 h-5 text-[#B8B8B8]"></i>
-                        </button>
-                    </div>
-                    
-                    <div>
-                        <div class="flex justify-between py-3 border-b border-[rgba(255,255,255,0.1)]">
-                            <div class="flex items-center">
-                                <i data-feather="sliders" class="w-4 h-4 text-[#FF6A00] mr-3"></i>
-                                <span>Slots</span>
-                            </div>
-                            <span class="font-medium text-[#3CE27A]">100%</span>
-                        </div>
-                        
-                        <div class="flex justify-between py-3 border-b border-[rgba(255,255,255,0.1)]">
-                            <div class="flex items-center">
-                                <i data-feather="gift" class="w-4 h-4 text-[#00E4FF] mr-3"></i>
-                                <span>Instant Win</span>
-                            </div>
-                            <span class="font-medium text-[#3CE27A]">75%</span>
-                        </div>
-                        
-                        <div class="flex justify-between py-3 border-b border-[rgba(255,255,255,0.1)]">
-                            <div class="flex items-center">
-                                <i data-feather="grid" class="w-4 h-4 text-[#FEC84B] mr-3"></i>
-                                <span>RNG Table</span>
-                            </div>
-                            <span class="font-medium text-[#FEC84B]">25%</span>
-                        </div>
-                        
-                        <div class="flex justify-between py-3">
-                            <div class="flex items-center">
-                                <i data-feather="video" class="w-4 h-4 text-[#FF4D4D] mr-3"></i>
-                                <span>Live Casino</span>
-                            </div>
-                            <span class="font-medium text-[#FF4D4D]">10%</span>
-                        </div>
-                    </div>
-                    
-                    <div class="mt-4 text-xs text-[#B8B8B8] flex items-start">
-                        <i data-feather="alert-circle" class="w-4 h-4 mr-2 text-[#FF4D4D] mt-0.5"></i>
-                        <span>Weights affect progress only, not redemption math. Example: $100 on Live Casino → $10 progress.</span>
-                    </div>
-                </div>
             </div>
         </section>
         
+
         <!-- Redeemables -->
         <section class="mb-10" data-aos="fade-up">
             <div class="glass-card p-6">
@@ -535,96 +488,7 @@
             </div>
         </section>
         
-        <!-- Store & Promos -->
-        <section class="mb-10">
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
-                <div class="glass-card p-6" id="store-card" data-aos="fade-up">
-                    <div class="flex justify-between items-center mb-5">
-                        <h3 class="text-lg font-medium font-['Orbitron']">Buy Packages</h3>
-                    </div>
-                    
-                    <div class="grid grid-cols-2 gap-3 mb-6">
-                        <div class="bg-[rgba(255,106,0,0.05)] border border-[rgba(255,106,0,0.15)] rounded-xl p-4">
-                            <div class="text-2xl font-bold font-['Orbitron'] text-[#FF6A00]">10 SC</div>
-                            <div class="text-sm text-[#B8B8B8]">$10.00</div>
-                        </div>
-                        <div class="border-2 border-[#3CE27A] bg-[rgba(60,226,122,0.05)] rounded-xl p-4 relative">
-                            <span class="absolute -top-2 right-3 bg-[#3CE27A] text-[#0a0a0a] text-xs px-2 py-1 rounded-full">Best Value</span>
-                            <div class="text-2xl font-bold font-['Orbitron'] text-[#3CE27A]">50 SC</div>
-                            <div class="text-sm text-[#B8B8B8]">+10 Bonus SC $45.00</div>
-                        </div>
-                    </div>
-                    
-                    <button class="w-full py-3 rounded-xl bg-[rgba(255,255,255,0.05)] border border-[rgba(255,255,255,0.15)] hover:bg-[rgba(255,106,0,0.1)] hover:border-[#FF6A00] transition font-medium">Go to Store</button>
-                </div>
-                
-                <div class="glass-card p-6" id="promos-card" data-aos="fade-up" data-aos-delay="100">
-                    <div class="flex justify-between items-center mb-5">
-                        <h3 class="text-lg font-medium font-['Orbitron']">Active Bonuses & Codes</h3>
-                    </div>
-                    
-                    <div class="mb-6">
-                        <div class="mb-4 p-4 bg-[rgba(255,255,255,0.05)] rounded-lg">
-                            <div class="flex justify-between mb-2">
-                                <div class="flex items-center">
-                                    <span class="font-medium text-[#00E4FF]">WELCOME100</span>
-                                    <span class="ml-3 text-xs bg-[rgba(0,228,255,0.15)] text-[#00E4FF] px-2 py-1 rounded-full">Active</span>
-                                </div>
-                                <div class="text-sm text-[#FEC84B]">24h 32m left</div>
-                            </div>
-                            <p class="text-sm text-[#B8B8B8] mb-3">Get 100% bonus on first deposit, up to $100</p>
-                        </div>
-                        
-                        <div class="mb-4 p-4 bg-[rgba(255,255,255,0.05)] rounded-lg">
-                            <div class="flex justify-between mb-2">
-                                <div class="flex items-center">
-                                    <span class="font-medium text-[#FF6A00]">SPIN25</span>
-                                    <span class="ml-3 text-xs bg-[rgba(255,106,0,0.15)] text-[#FF6A00] px-2 py-1 rounded-full">Active</span>
-                                </div>
-                                <div class="text-sm text-[#B8B8B8]">3 days left</div>
-                            </div>
-                            <p class="text-sm text-[#B8B8B8]">25 Free Spins on Pharaoh's Fortune</p>
-                        </div>
-                    </div>
-                    
-                    <div>
-                        <div class="flex gap-2">
-                            <input type="text" placeholder="Have a code?" class="flex-grow bg-[rgba(255,255,255,0.05)] px-4 py-2 rounded-lg border border-[rgba(255,255,255,0.15)]">
-                            <button class="px-4 py-2 rounded-lg bg-[rgba(0,228,255,0.15)] text-[#00E4FF] font-medium">Apply</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
         
-        <!-- VIP & Jackpot -->
-        <section class="mb-10">
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
-                <div class="glass-card p-5" id="vip-card" data-aos="fade-up">
-                    <div class="flex items-center gap-3 mb-4">
-                        <i data-feather="star" class="w-5 h-5 text-[#FEC84B]"></i>
-                        <h3 class="text-md font-medium font-['Orbitron']">VIP Snapshot</h3>
-                    </div>
-                    <div class="text-sm mb-2">This month wagered: <span class="font-medium">420.00</span></div>
-                    <div class="progress-track mb-4">
-                        <div class="progress-fill" style="width: 12%; background: linear-gradient(90deg, #FEC84B, #FF9800);"></div>
-                    </div>
-                    <div class="text-sm text-[#FEC84B]">VIP Progress +12%</div>
-                </div>
-                
-                <div class="glass-card p-5" id="jackpot-card" data-aos="fade-up" data-aos-delay="100">
-                    <div class="flex items-center gap-3 mb-4">
-                        <i data-feather="award" class="w-5 h-5 text-[#FF6A00]"></i>
-                        <h3 class="text-md font-medium font-['Orbitron']">Jackpot Contribution</h3>
-                    </div>
-                    <div class="text-sm mb-4">You've contributed <span class="font-medium">8.40</span> to the pool.</div>
-                    <a href="#" class="flex items-center gap-2 text-[#00E4FF] group">
-                        <span>View Jackpots</span>
-                        <i data-feather="chevron-right" class="w-4 h-4 transform transition group-hover:translate-x-1"></i>
-                    </a>
-                </div>
-            </div>
-        </section>
         
         <!-- Security & Settings -->
         <section class="mb-10" data-aos="fade-up">

prompts.txt

@@ -0,0 +1,188 @@
+Design a production-ready Wallet Page for a neon-casino theme. Use Nioplay’s established system:
+- Background: radial gradient (black → warm dark orange/brown).
+- Glassmorphism cards (transparent, frosted, subtle noise), limited so layout breathes.
+- Neon accents: orange #FF6A00, blue #00E4FF. Fonts: Orbitron (headings), Poppins (body).
+- Modern pill buttons with seamless border-trail animation (continuous loop, no visible reset).
+- Clean grid, large readable numbers, dense tooltips.
+
+DO NOT implement any wallet math or API logic. Values are placeholders. Focus on layout, states, and components.
+
+GLOBAL STYLE TOKENS:
+- Background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%)
+- Text: #F5F5F5 primary, #B8B8B8 secondary
+- Accent: Neon Orange #FF6A00, Neon Blue #00E4FF, Success #3CE27A, Warning #FEC84B, Danger #FF4D4D
+- Glass card: rgba(255,255,255,0.05) bg, 1px border rgba(255,255,255,0.12), backdrop-blur(10–14px), rounded-2xl, shadow-xl
+- Icon style: thin line + soft glow
+- Progress bar: inner glow, smooth 0.6s ease, rounded-full
+
+LAYOUT HIERARCHY:
+
+(1) PAGE HEADER (full-width, glass card)
+- Title: “Wallet”
+- Sub: “Track balances, playthrough progress, and redeemables.”
+- Right side: 2 CTA pills:
+  - [Deposit SC] (primary, neon orange, border-trail)
+  - [Withdraw] (secondary, neon blue, border-trail)
+- Small links under CTAs: “Payment Methods”, “Withdrawal Policy”, “KYC Status”
+
+(2) BALANCE OVERVIEW (4-card grid, responsive 1×4 → 2×2 on tablet → 1×4 scroll on mobile)
+Card A — Purchase SC (1×)
+  - Label chip: “1× Playthrough”
+  - Big number: {{purchase_sc}}
+  - Mini stat: “Required: {{purchase_required}} | Progress: {{purchase_progress_pct}}%”
+  - Tiny info icon (hover): “Purchase SC requires 1× wagering before withdrawal.”
+
+Card B — Bonus SC (5×)
+  - Label chip: “5× Playthrough”
+  - Big number: {{bonus_sc}}
+  - Mini stat: “Required: {{bonus_required}} | Progress: {{bonus_progress_pct}}%”
+  - Info hover: “Bonus SC requires 5× wagering. Table & live games may count less.”
+
+Card C — Withdrawable SC (WSC)
+  - Label chip: “Redeemable Now”
+  - Big number: {{wsc}}
+  - Subtext: “Ready to withdraw.”
+
+Card D — Gold Coins (GC)
+  - Label chip: “Gold Coins”
+  - Big number: {{gc}}
+  - Subtext: “For fun play.”
+
+(3) PLAYTHROUGH PROGRESS (two half-width glass cards side-by-side; stack on mobile)
+
+Left Card — Playthrough Bars
+  Section title: “Playthrough Progress”
+  - Row 1: Purchase SC (1×)
+      • Bar with endpoints: 0 → {{purchase_required}}
+      • Inline numbers: “{{purchase_wagered}} / {{purchase_required}}” and “{{purchase_progress_pct}}%”
+      • Color: gradient from #FF6A00 → #3CE27A near completion
+  - Divider
+  - Row 2: Bonus SC (5×)
+      • Bar with endpoints: 0 → {{bonus_required}}
+      • Inline: “{{bonus_wagered}} / {{bonus_required}}” and “{{bonus_progress_pct}}%”
+      • Color: gradient #00E4FF → #FF6A00
+
+Right Card — Game Contribution Weights (collapsible)
+  Title row: “How your wagers count”
+  List with icons + weights:
+    • Slots — 100%
+    • Instant Win — 75%
+    • RNG Table — 25%
+    • Live Casino — 10%
+  Footnote text: “Weights affect progress only, not redemption math.”
+  (Add “ⓘ” tooltips explaining examples: “$100 on Live Casino → $10 progress.”)
+
+(4) REDEEMABLES & ACTIONS (full-width glass card)
+- Title: “Redeemable Amounts”
+- Two numeric tiles:
+    • Redeemable Purchase SC (WSC): {{redeemable_wsc}}
+    • Redeemable Bonus SC: {{redeemable_bonus_sc}}
+- Helper text: “Bonus SC becomes redeemable as you clear its playthrough.”
+- Action buttons:
+    [Withdraw to Wallet]  [Convert to WSC]  [View Withdrawal History]
+- Small alert banners (optional states):
+    • Warning if KYC incomplete.
+    • Info if withdrawal limit per day reached.
+- Microcopy under buttons: “Processing time: 24–48h after KYC.”
+
+(5) TRANSACTION HISTORY (glass card, full width)
+- Tabs: All | Deposits | Withdrawals | Bonuses | Wagers | Adjustments
+- Filters: Date range picker; Amount min/max; Status
+- Table columns:
+  Date/Time | Type | Description | Amount | Balance Type (SC/GC/BSC/WSC) | Status | Ref ID
+- Empty state with illustration + “No transactions yet. Top up your wallet to get started.”
+- Button: [Export CSV] (ghost)
+
+(6) STORE & PROMOS STRIP (two cards)
+Left: “Buy Packages”
+  - Featured package tiles with price, bonus badge, “Best Value” tag.
+  - CTA: [Go to Store]
+
+Right: “Active Bonuses & Codes”
+  - List of active promo balances with expiry timers and progress bars.
+  - Input: “Have a code?” [Apply]
+
+(7) VIP & JACKPOT TIE-INS (two mini cards)
+- VIP Snapshot: “This month wagered: {{monthly_wagered}} → VIP +{{vip_progress_pct}}%”
+- Jackpot Contribution: “You’ve contributed {{jackpot_contrib}} to the pool.” Link: [View Jackpots]
+
+(8) SECURITY & SETTINGS (accordion list)
+- Payment Methods (cards on file)
+- Set Withdrawal PIN
+- KYC / Verification status + steps
+- Notification preferences (wallet alerts)
+- Responsible play links
+
+(9) CONTEXTUAL TOOLTIP COPY (use exactly as hover content)
+- “Playthrough Requirement”: “The total amount you must wager before funds are withdrawable.”
+- “Contribution Weights”: “Different games count differently toward playthrough.”
+- “WSC”: “Withdrawable Sweepstakes Coins you can cash out.”
+- “Bonus SC”: “Promotional coins with 5× playthrough.”
+- “Purchase SC”: “Coins bought by you; 1× playthrough.”
+
+COMPONENT/ID MAP (for dev handoff & future binding)
+- #btn-deposit, #btn-withdraw, #btn-convert
+- #card-purchase-sc, #card-bonus-sc, #card-wsc, #card-gc
+- #bar-purchase, #bar-bonus
+- #redeemable-wsc, #redeemable-bonus
+- #tx-table, #tx-filter, #tx-export
+- #store-card, #promos-card
+- #vip-card, #jackpot-card
+- #security-accordion
+
+ANIMATIONS (exact instructions)
+- Button border-trail (continuous, no pause):
+  • Create an absolutely positioned gradient border layer that animates background-position from 0%→100% with linear infinite 2.5s.
+  • Use mask-composite to reveal only the 2px border.
+  • Ensure animation loops seamlessly by using a repeating conic or linear-gradient with matching start/end colors (avoid hard stops).
+- Progress bars:
+  • Animate width from previous value to new value with 600ms ease; add subtle outer glow.
+- Hover:
+  • Cards lift 4px, border alpha +0.08, glow of accent color.
+
+RESPONSIVE RULES
+- ≥1280px: 12-col grid; Overview (4 cols each), Progress (6/6), History full-width.
+- 1024–1279: 12-col; Overview 6/6; Progress stack.
+- <1024: Stack everything; sticky subheader with [Deposit], [Withdraw].
+
+ACCESSIBILITY
+- Min text 14px body, 18–22px numbers; 28–36px for big balances.
+- Focus rings visible (accent blue).
+- Tooltips accessible on keyboard (aria-describedby).
+- Color contrast ≥ 4.5:1 for body.
+
+PLACEHOLDER DATA (bind these to numbers for mock):
+{
+  "purchase_sc": "18.74",
+  "purchase_required": "18.74",
+  "purchase_wagered": "12.10",
+  "purchase_progress_pct": "64.5",
+  "bonus_sc": "0.30",
+  "bonus_required": "1.50",
+  "bonus_wagered": "0.00",
+  "bonus_progress_pct": "0.0",
+  "wsc": "6.64",
+  "gc": "3,500",
+  "redeemable_wsc": "6.64",
+  "redeemable_bonus_sc": "0.00",
+  "monthly_wagered": "420.00",
+  "vip_progress_pct": "12",
+  "jackpot_contrib": "8.40"
+}
+
+VISUAL NOTES
+- Purchase SC chip is orange outline with “1×”.
+- Bonus SC chip is blue outline with “5×”.
+- “Total Redeemable Now” should be visually emphasized near the top (mirrors WSC).
+- Keep white space; limit glass cards to these sections to avoid clutter.
+
+DELIVERABLES
+- One responsive page with all sections above.
+- Include a style block (or component CSS) for the seamless border-trail button and progress bars.
+- Provide semantic HTML structure ready for data-binding.
+- No external logic; values populated from placeholders.
+Remove "Store & Promo" Section.
+Move the "Right Card: Game Contributions" section to the bottom of the page
+Remove
+Remove
+Remove "VIP & Jackpot" Section