Hugging Face's logo

Spaces:
ProjectGenesis
/
wallet-ui
Running

App Files Community
ProjectGenesis commited on
Commit
c73fee9
·
verified ·
1 Parent(s): b8c3e88

Design a production-ready Wallet Page for a neon-casino theme. Use Nioplay’s established system:

Browse files

- 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. - Initial Deployment

Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +694 -18
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Wallet Ui
3
- emoji: 🐢
4
- colorFrom: gray
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: wallet-ui
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,695 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Neon Casino Wallet</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <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">
9
+ <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <script>
14
+ tailwind.config = {
15
+ theme: {
16
+ extend: {
17
+ fontFamily: {
18
+ orbitron: ['Orbitron', 'sans-serif'],
19
+ poppins: ['Poppins', 'sans-serif']
20
+ },
21
+ colors: {
22
+ 'neon-orange': '#FF6A00',
23
+ 'neon-blue': '#00E4FF',
24
+ 'success': '#3CE27A',
25
+ 'warning': '#FEC84B',
26
+ 'danger': '#FF4D4D',
27
+ },
28
+ boxShadow: {
29
+ 'glow-orange': '0 0 10px rgba(255, 106, 0, 0.5)',
30
+ 'glow-blue': '0 0 10px rgba(0, 228, 255, 0.5)',
31
+ 'card': '0 8px 32px rgba(0, 0, 0, 0.25)'
32
+ },
33
+ backdropBlur: {
34
+ 'glass': '12px',
35
+ }
36
+ }
37
+ }
38
+ }
39
+ </script>
40
+ <style type="text/css">
41
+ body {
42
+ background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000 100%);
43
+ color: #F5F5F5;
44
+ font-family: 'Poppins', sans-serif;
45
+ min-height: 100vh;
46
+ padding: 0 1rem;
47
+ overflow-x: hidden;
48
+ }
49
+
50
+ .glass-card {
51
+ background: rgba(255, 255, 255, 0.05);
52
+ border: 1px solid rgba(255, 255, 255, 0.12);
53
+ backdrop-filter: blur(12px);
54
+ border-radius: 16px;
55
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
56
+ position: relative;
57
+ overflow: hidden;
58
+ }
59
+
60
+ .glass-card::before {
61
+ content: '';
62
+ position: absolute;
63
+ top: 0;
64
+ left: 0;
65
+ width: 100%;
66
+ height: 100%;
67
+ 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");
68
+ opacity: 0.4;
69
+ pointer-events: none;
70
+ }
71
+
72
+ .glow-hover {
73
+ transition: all 0.3s ease;
74
+ }
75
+
76
+ .glow-hover:hover {
77
+ transform: translateY(-4px);
78
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
79
+ }
80
+
81
+ h1, h2, h3, h4 {
82
+ font-family: 'Orbitron', sans-serif;
83
+ }
84
+
85
+ .border-trail-btn {
86
+ position: relative;
87
+ overflow: hidden;
88
+ z-index: 1;
89
+ transition: all 0.3s ease;
90
+ }
91
+
92
+ .border-trail-btn::before {
93
+ content: '';
94
+ position: absolute;
95
+ top: -2px;
96
+ left: -2px;
97
+ right: -2px;
98
+ bottom: -2px;
99
+ z-index: -1;
100
+ background: linear-gradient(90deg, transparent, currentColor, transparent);
101
+ background-size: 250%;
102
+ animation: border-trail 2.5s linear infinite;
103
+ border-radius: 24px;
104
+ }
105
+
106
+ @keyframes border-trail {
107
+ 0% { background-position: -150% 0; }
108
+ 100% { background-position: 150% 0; }
109
+ }
110
+
111
+ .pill-label {
112
+ border-radius: 24px;
113
+ padding: 4px 12px;
114
+ border: 1px solid;
115
+ display: inline-block;
116
+ font-size: 12px;
117
+ font-weight: 500;
118
+ }
119
+
120
+ .progress-bar-container {
121
+ height: 8px;
122
+ background: rgba(255,255,255,0.12);
123
+ border-radius: 4px;
124
+ overflow: hidden;
125
+ }
126
+
127
+ .progress-bar {
128
+ height: 100%;
129
+ border-radius: 4px;
130
+ transition: width 0.6s ease;
131
+ }
132
+
133
+ .stats-large {
134
+ font-size: 32px;
135
+ font-weight: 700;
136
+ line-height: 1.2;
137
+ margin-top: 4px;
138
+ }
139
+
140
+ .icon-small {
141
+ display: inline-flex;
142
+ margin-left: 6px;
143
+ opacity: 0.7;
144
+ }
145
+
146
+ .balance-grid {
147
+ display: grid;
148
+ grid-template-columns: repeat(4, 1fr);
149
+ gap: 16px;
150
+ }
151
+
152
+ .tooltip {
153
+ position: relative;
154
+ }
155
+
156
+ .tooltip .tooltip-content {
157
+ position: absolute;
158
+ bottom: 125%;
159
+ left: 50%;
160
+ transform: translateX(-50%);
161
+ background: rgba(0,0,0,0.8);
162
+ padding: 8px 12px;
163
+ border-radius: 8px;
164
+ width: 220px;
165
+ font-size: 12px;
166
+ opacity: 0;
167
+ pointer-events: none;
168
+ transition: opacity 0.3s;
169
+ z-index: 10;
170
+ border: 1px solid rgba(255,255,255,0.15);
171
+ }
172
+
173
+ .tooltip:hover .tooltip-content {
174
+ opacity: 1;
175
+ }
176
+
177
+ .info-table th {
178
+ text-align: left;
179
+ padding: 8px 0;
180
+ opacity: 0.7;
181
+ width: 60%;
182
+ }
183
+
184
+ .info-table td {
185
+ text-align: right;
186
+ padding: 8px 0;
187
+ font-weight: 600;
188
+ }
189
+
190
+ @media (max-width: 1023px) {
191
+ .balance-grid {
192
+ grid-template-columns: 1fr 1fr;
193
+ }
194
+
195
+ .progress-cards {
196
+ flex-direction: column;
197
+ }
198
+
199
+ .tab-scroll {
200
+ overflow-x: auto;
201
+ padding-bottom: 8px;
202
+ -ms-overflow-style: none;
203
+ scrollbar-width: none;
204
+ }
205
+
206
+ .tab-scroll::-webkit-scrollbar {
207
+ display: none;
208
+ }
209
+ }
210
+
211
+ @media (max-width: 640px) {
212
+ .balance-grid {
213
+ display: flex;
214
+ overflow-x: auto;
215
+ padding-bottom: 16px;
216
+ -ms-overflow-style: none;
217
+ scrollbar-width: none;
218
+ }
219
+
220
+ .balance-grid::-webkit-scrollbar {
221
+ display: none;
222
+ }
223
+
224
+ .balance-grid .glass-card {
225
+ min-width: 260px;
226
+ margin-right: 16px;
227
+ }
228
+
229
+ .button-group {
230
+ flex-wrap: wrap;
231
+ gap: 8px;
232
+ }
233
+ }
234
+ </style>
235
+ </head>
236
+ <body class="antialiased">
237
+ <!-- Navigation Header -->
238
+ <header class="py-4 px-6 glass-card mt-6 lg:mt-8">
239
+ <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center">
240
+ <div class="mb-4 lg:mb-0">
241
+ <h1 class="text-2xl lg:text-3xl font-bold text-neon-orange mb-1">Wallet</h1>
242
+ <p class="text-gray-300 text-base">Track balances, playthrough progress, and redeemables.</p>
243
+ </div>
244
+
245
+ <div class="flex flex-col">
246
+ <div class="flex space-x-3 mb-2">
247
+ <button id="btn-deposit" class="inline-flex items-center px-6 py-3 font-orbitron font-bold rounded-full border-trail-btn
248
+ bg-gradient-to-r from-neon-orange/70 to-orange-700/30 text-white hover:text-white relative overflow-hidden">
249
+ <span class="relative z-10">Deposit SC</span>
250
+ </button>
251
+
252
+ <button id="btn-withdraw" class="inline-flex items-center px-6 py-3 font-orbitron font-bold rounded-full border-trail-btn
253
+ border-0 bg-gradient-to-r from-neon-blue/70 to-blue-700/30 text-white hover:text-white relative">
254
+ <span class="relative z-10">Withdraw</span>
255
+ </button>
256
+ </div>
257
+
258
+ <div class="flex space-x-4 text-xs text-gray-400">
259
+ <a href="#" class="hover:text-neon-blue transition">Payment Methods</a>
260
+ <a href="#" class="hover:text-neon-blue transition">Withdrawal Policy</a>
261
+ <a href="#" class="hover:text-neon-blue transition">KYC Status</a>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </header>
266
+
267
+ <main class="py-6 lg:py-8 max-w-6xl mx-auto">
268
+ <!-- Balance Overview -->
269
+ <section class="mb-8">
270
+ <h2 class="text-xl lg:text-2xl font-bold mb-4">Balance Overview</h2>
271
+ <div class="balance-grid">
272
+ <!-- Card A: Purchase SC -->
273
+ <div id="card-purchase-sc" class="glass-card p-6 glow-hover">
274
+ <div class="flex justify-between items-start">
275
+ <div>
276
+ <p class="text-sm text-gray-300">Purchase SC</p>
277
+ <div class="pill-label border-neon-orange text-neon-orange mt-2">1× Playthrough</div>
278
+ </div>
279
+ <div class="tooltip">
280
+ <i class="icon-small" data-feather="info"></i>
281
+ <div class="tooltip-content">
282
+ Purchase SC requires 1× wagering before withdrawal.
283
+ </div>
284
+ </div>
285
+ </div>
286
+ <div class="stats-large mt-3">18.74</div>
287
+ <p class="text-xs text-gray-400 mt-2">Required: 18.74 | Progress: 64.5%</p>
288
+ </div>
289
+
290
+ <!-- Card B: Bonus SC -->
291
+ <div id="card-bonus-sc" class="glass-card p-6 glow-hover">
292
+ <div class="flex justify-between items-start">
293
+ <div>
294
+ <p class="text-sm text-gray-300">Bonus SC</p>
295
+ <div class="pill-label border-neon-blue text-neon-blue mt-2">5× Playthrough</div>
296
+ </div>
297
+ <div class="tooltip">
298
+ <i class="icon-small" data-feather="info"></i>
299
+ <div class="tooltip-content">
300
+ Bonus SC requires 5× wagering. Table & live games may count less.
301
+ </div>
302
+ </div>
303
+ </div>
304
+ <div class="stats-large mt-3">0.30</div>
305
+ <p class="text-xs text-gray-400 mt-2">Required: 1.50 | Progress: 0.0%</p>
306
+ </div>
307
+
308
+ <!-- Card C: Withdrawable SC -->
309
+ <div id="card-wsc" class="glass-card p-6 bg-gradient-to-br from-black/20 to-green-900/10 glow-hover">
310
+ <div class="flex justify-between">
311
+ <div>
312
+ <p class="text-sm text-gray-300">Withdrawable SC (WSC)</p>
313
+ <div class="pill-label border-success text-success mt-2">Redeemable Now</div>
314
+ </div>
315
+ </div>
316
+ <div class="stats-large mt-3 text-success">6.64</div>
317
+ <p class="text-xs text-gray-400 mt-2">Ready to withdraw.</p>
318
+ </div>
319
+
320
+ <!-- Card D: Gold Coins -->
321
+ <div id="card-gc" class="glass-card p-6 glow-hover">
322
+ <div>
323
+ <p class="text-sm text-gray-300">Gold Coins</p>
324
+ <div class="pill-label border-warning text-warning mt-2">Gold Coins</div>
325
+ </div>
326
+ <div class="stats-large mt-3">3,500</div>
327
+ <p class="text-xs text-gray-400 mt-2">For fun play.</p>
328
+ </div>
329
+ </div>
330
+ </section>
331
+
332
+ <!-- Playthrough Progress -->
333
+ <section class="mb-8">
334
+ <div class="progress-cards flex gap-6 flex-col lg:flex-row">
335
+ <!-- Playthrough Bars -->
336
+ <div class="glass-card p-6 glow-hover w-full lg:w-1/2">
337
+ <h3 class="text-lg font-bold mb-4">Playthrough Progress</h3>
338
+
339
+ <div class="mb-6">
340
+ <div class="flex justify-between text-sm mb-2">
341
+ <span>Purchase SC (1×)</span>
342
+ <span>12.10 / 18.74 (64.5%)</span>
343
+ </div>
344
+ <div class="progress-bar-container">
345
+ <div id="bar-purchase" class="progress-bar" style="width: 64.5%; background: linear-gradient(90deg, #FF6A00, #3CE27A)"></div>
346
+ </div>
347
+ <div class="flex justify-between mt-1 text-xs text-gray-400">
348
+ <span>0</span>
349
+ <span>18.74</span>
350
+ </div>
351
+ </div>
352
+
353
+ <div class="pt-4 border-t border-gray-800">
354
+ <div class="flex justify-between text-sm mb-2">
355
+ <span>Bonus SC (5×)</span>
356
+ <span>0.00 / 1.50 (0.0%)</span>
357
+ </div>
358
+ <div class="progress-bar-container">
359
+ <div id="bar-bonus" class="progress-bar" style="width: 0%; background: linear-gradient(90deg, #00E4FF, #FF6A00)"></div>
360
+ </div>
361
+ <div class="flex justify-between mt-1 text-xs text-gray-400">
362
+ <span>0</span>
363
+ <span>1.50</span>
364
+ </div>
365
+ </div>
366
+ </div>
367
+
368
+ <!-- Game Contribution Weights -->
369
+ <div class="glass-card p-6 glow-hover w-full lg:w-1/2">
370
+ <div class="flex justify-between items-center">
371
+ <h3 class="text-lg font-bold">How your wagers count</h3>
372
+ <button class="bg-gray-700/50 rounded-lg p-2 hover:bg-gray-600" aria-label="Collapse">
373
+ <i data-feather="chevron-down"></i>
374
+ </button>
375
+ </div>
376
+
377
+ <table class="info-table w-full mt-4">
378
+ <tbody>
379
+ <tr>
380
+ <th class="flex items-center"><i data-feather="sliders" class="mr-2"></i> Slots</th>
381
+ <td class="text-success">100%</td>
382
+ </tr>
383
+ <tr>
384
+ <th class="flex items-center"><i data-feather="zap" class="mr-2"></i> Instant Win</th>
385
+ <td>75%</td>
386
+ </tr>
387
+ <tr>
388
+ <th class="flex items-center"><i data-feather="grid" class="mr-2"></i> RNG Table</th>
389
+ <td>25%</td>
390
+ </tr>
391
+ <tr>
392
+ <th class="flex items-center"><i data-feather="video" class="mr-2"></i> Live Casino</th>
393
+ <td>10%</td>
394
+ </tr>
395
+ </tbody>
396
+ </table>
397
+
398
+ <p class="text-xs text-gray-400 mt-6">
399
+ <span class="tooltip">
400
+ <span class="text-gray-300">Weights affect progress only, not redemption math.</span>
401
+ <span class="tooltip-content">
402
+ For example: $100 on Live Casino → $10 progress
403
+ </span>
404
+ </span>
405
+ </p>
406
+ </div>
407
+ </div>
408
+ </section>
409
+
410
+ <!-- Redeemables & Actions -->
411
+ <section class="mb-8">
412
+ <div class="glass-card p-6 glow-hover">
413
+ <h3 class="text-lg lg:text-xl font-bold mb-4">Redeemable Amounts</h3>
414
+
415
+ <div class="flex flex-wrap md:flex-nowrap gap-6">
416
+ <div class="w-full md:w-1/2 lg:w-1/4 bg-gray-900/40 rounded-xl p-5">
417
+ <p class="text-gray-400 mb-1">Redeemable Purchase SC</p>
418
+ <div id="redeemable-wsc" class="text-3xl font-bold text-success">6.64</div>
419
+ </div>
420
+
421
+ <div class="w-full md:w-1/2 lg:w-1/4 bg-gray-900/40 rounded-xl p-5">
422
+ <p class="text-gray-400 mb-1">Redeemable Bonus SC</p>
423
+ <div id="redeemable-bonus-sc" class="text-3xl font-bold">0.00</div>
424
+ </div>
425
+
426
+ <div class="w-full mt-4 md:mt-0 md:w-full lg:w-1/2">
427
+ <p class="text-gray-300 text-sm max-w-prose">
428
+ Bonus SC becomes redeemable as you clear its playthrough.
429
+ <span class="tooltip">
430
+ <span class="text-neon-blue">WSC</span>
431
+ <span class="tooltip-content">
432
+ Withdrawable Sweepstakes Coins you can cash out.
433
+ </span>
434
+ </span>
435
+ </p>
436
+
437
+ <div class="button-group flex gap-4 mt-4 flex-wrap">
438
+ <button class="px-5 py-3 bg-transparent border border-success text-white rounded-full hover:bg-success/5">
439
+ Withdraw to Wallet
440
+ </button>
441
+ <button id="btn-convert" class="px-5 py-3 bg-neon-orange text-white rounded-full hover:bg-orange-600">
442
+ Convert to WSC
443
+ </button>
444
+ <button class="px-5 py-3 bg-transparent border border-gray-600 text-white rounded-full hover:bg-gray-700/50">
445
+ View Withdrawal History
446
+ </button>
447
+ </div>
448
+
449
+ <div class="mt-4 bg-warning/10 border border-warning/30 text-warning px-4 py-3 rounded-lg text-sm">
450
+ <span class="font-medium">KYC verification incomplete.</span> Required for withdrawals.
451
+ </div>
452
+
453
+ <p class="text-gray-400 text-xs mt-4">Processing time: 24–48h after KYC.</p>
454
+ </div>
455
+ </div>
456
+ </div>
457
+ </section>
458
+
459
+ <!-- Transaction History -->
460
+ <section class="mb-8">
461
+ <div class="glass-card p-4 sm:p-6">
462
+ <div class="flex justify-between flex-wrap">
463
+ <h3 class="text-lg lg:text-xl font-bold mb-4">Transaction History</h3>
464
+ <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">
465
+ <i data-feather="download"></i>
466
+ Export CSV
467
+ </button>
468
+ </div>
469
+
470
+ <div id="tx-filter" class="flex flex-wrap gap-4 mb-6">
471
+ <div class="flex items-center gap-2">
472
+ <select class="bg-gray-900/50 border border-gray-700 rounded-lg px-3 py-2 text-sm">
473
+ <option>Last 7 Days</option>
474
+ <option selected>Last 30 Days</option>
475
+ <option>All Time</option>
476
+ </select>
477
+ </div>
478
+
479
+ <div class="flex items-center gap-2">
480
+ <select class="bg-gray-900/50 border border-gray-700 rounded-lg px-3 py-2 text-sm">
481
+ <option disabled>Amount Range</option>
482
+ <option>0 - 10</option>
483
+ <option>10 - 100</option>
484
+ <option>100+</option>
485
+ </select>
486
+ </div>
487
+
488
+ <div class="flex items-center gap-2">
489
+ <select class="bg-gray-900/50 border border-gray-700 rounded-lg px-3 py-2 text-sm">
490
+ <option disabled>Status</option>
491
+ <option>Completed</option>
492
+ <option>Pending</option>
493
+ <option>Failed</option>
494
+ </select>
495
+ </div>
496
+ </div>
497
+
498
+ <div class="tab-scroll">
499
+ <div class="flex space-x-4 mb-6">
500
+ <button class="px-4 py-2 bg-white text-black rounded-lg font-medium">All</button>
501
+ <button class="px-4 py-2 hover:bg-gray-800 rounded-lg">Deposits</button>
502
+ <button class="px-4 py-2 hover:bg-gray-800 rounded-lg">Withdrawals</button>
503
+ <button class="px-4 py-2 hover:bg-gray-800 rounded-lg">Bonuses</button>
504
+ <button class="px-4 py-2 hover:bg-gray-800 rounded-lg">Wagers</button>
505
+ <button class="px-4 py-2 hover:bg-gray-800 rounded-lg">Adjustments</button>
506
+ </div>
507
+ </div>
508
+
509
+ <div id="tx-table" class="relative">
510
+ <table class="w-full text-sm">
511
+ <thead class="text-gray-400 border-b border-gray-800">
512
+ <tr>
513
+ <th class="pb-3 text-left">Date/Time</th>
514
+ <th class="pb-3 text-left">Type</th>
515
+ <th class="pb-3 text-left">Description</th>
516
+ <th class="pb-3 text-right">Amount</th>
517
+ <th class="pb-3">Currency</th>
518
+ <th class="pb-3 text-right">Status</th>
519
+ <th class="pb-3 text-right">Ref ID</th>
520
+ </tr>
521
+ </thead>
522
+ <tbody>
523
+ <!-- Empty Table State -->
524
+ <tr>
525
+ <td colspan="7" class="py-12 text-center">
526
+ <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" />
527
+ <p class="text-gray-500">No transactions yet. Top up your wallet to get started.</p>
528
+ </td>
529
+ </tr>
530
+ </tbody>
531
+ </table>
532
+ </div>
533
+ </div>
534
+ </section>
535
+
536
+ <!-- Store & Promos -->
537
+ <section class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
538
+ <!-- Buy Packages -->
539
+ <div id="store-card" class="glass-card p-6 glow-hover">
540
+ <h3 class="text-lg font-bold mb-4">Buy Packages</h3>
541
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
542
+ <div class="bg-gradient-to-br from-black/40 to-orange-900/20 p-4 rounded-xl border border-orange-500/30 relative">
543
+ <div class="absolute top-2 right-2 bg-warning/20 text-warning text-xs px-2 py-1 rounded">Best Value</div>
544
+ <p class="text-lg font-bold">5 SC + 25GC</p>
545
+ <p class="text-neon-orange mt-1">$5.99</p>
546
+ <div class="text-xs mt-2 text-gray-400">+ 5 Free Spins</div>
547
+ </div>
548
+ <div class="bg-gray-800/40 p-4 rounded-xl border border-gray-700">
549
+ <p class="text-lg font-bold">15 SC + 75GC</p>
550
+ <p class="text-gray-300 mt-1">$14.99</p>
551
+ </div>
552
+ </div>
553
+ <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>
554
+ </div>
555
+
556
+ <!-- Active Bonuses -->
557
+ <div id="promos-card" class="glass-card p-6 glow-hover">
558
+ <h3 class="text-lg font-bold mb-4">Active Bonuses & Codes</h3>
559
+ <ul class="space-y-3 mb-6">
560
+ <li class="flex justify-between items-center pb-2 border-b border-gray-800/50">
561
+ <div>
562
+ <p class="font-medium">Welcome Bonus</p>
563
+ <div class="text-xs text-gray-400">Exp: 48h remaining</div>
564
+ </div>
565
+ <div class="bg-gray-800/50 rounded-lg px-2 py-1 text-xs border border-success/20">Active</div>
566
+ </li>
567
+ </ul>
568
+
569
+ <div class="flex gap-3">
570
+ <input type="text" placeholder="Have a code?" class="bg-gray-900/50 border border-gray-700 rounded-lg px-4 py-2 flex-1">
571
+ <button class="px-5 py-2 bg-gradient-to-r from-neon-blue to-blue-700 rounded-lg font-medium">Apply</button>
572
+ </div>
573
+ </div>
574
+ </section>
575
+
576
+ <!-- VIP & Jackpot Tie-ins -->
577
+ <section class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
578
+ <!-- VIP Snapshot -->
579
+ <div id="vip-card" class="glass-card p-6 glow-hover flex flex-col">
580
+ <h3 class="text-lg font-bold mb-4">VIP Snapshot</h3>
581
+ <div class="mt-auto">
582
+ <p class="text-gray-400 text-sm">This month wagered:</p>
583
+ <div class="text-xl mt-1">420.00 SC</div>
584
+ <div class="flex items-center mt-4 py-4 border-t border-gray-800/50">
585
+ <div class="w-full bg-gray-800/50 rounded-full h-2">
586
+ <div class="bg-gradient-to-r from-blue-400 to-neon-blue h-2 rounded-full" style="width:12%"></div>
587
+ </div>
588
+ <span class="text-sm ml-4">+12%</span>
589
+ </div>
590
+ </div>
591
+ </div>
592
+
593
+ <!-- Jackpot Contribution -->
594
+ <div id="jackpot-card" class="glass-card p-6 glow-hover flex flex-col">
595
+ <h3 class="text-lg font-bold mb-4">Jackpot Contribution</h3>
596
+ <div class="mt-auto">
597
+ <div class="text-xl text-neon-orange mt-1">8.40 SC</div>
598
+ <p class="text-gray-400 mt-2 text-sm">You've contributed to the pool</p>
599
+ <button class="mt-6 text-neon-orange font-medium">View Jackpots →</button>
600
+ </div>
601
+ </div>
602
+ </section>
603
+
604
+ <!-- Security & Settings -->
605
+ <section class="mb-12">
606
+ <div class="glass-card p-6">
607
+ <h3 class="text-xl font-bold mb-4">Security & Settings</h3>
608
+
609
+ <div id="security-accordion" class="space-y-4">
610
+ <!-- Payment Methods -->
611
+ <div class="bg-gray-900/40 p-4 rounded-lg cursor-pointer hover:bg-gray-900/60 bounce-once">
612
+ <div class="flex justify-between items-center">
613
+ <div class="flex items-center gap-3">
614
+ <i data-feather="credit-card"></i>
615
+ <span>Payment Methods</span>
616
+ </div>
617
+ <i data-feather="chevron-right"></i>
618
+ </div>
619
+ </div>
620
+
621
+ <!-- Withdraw PIN -->
622
+ <div class="bg-gray-900/40 p-4 rounded-lg cursor-pointer hover:bg-gray-900/60 bounce-once">
623
+ <div class="flex justify-between items-center">
624
+ <div class="flex items-center gap-3">
625
+ <i data-feather="lock"></i>
626
+ <span>Set Withdrawal PIN</span>
627
+ </div>
628
+ <i data-feather="chevron-right"></i>
629
+ </div>
630
+ </div>
631
+
632
+ <!-- KYC Status -->
633
+ <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">
634
+ <div class="flex justify-between items-center">
635
+ <div class="flex items-center gap-3">
636
+ <i data-feather="shield" class="text-yellow-300"></i>
637
+ <span>
638
+ KYC Verification
639
+ <span class="ml-2 text-xs bg-warning/20 text-warning px-2 py-1 rounded-full">Pending</span>
640
+ </span>
641
+ </div>
642
+ <i data-feather="chevron-right" class="text-warning"></i>
643
+ </div>
644
+ </div>
645
+
646
+ <!-- Alerts -->
647
+ <div class="bg-gray-900/40 p-4 rounded-lg cursor-pointer hover:bg-gray-900/60 bounce-once">
648
+ <div class="flex justify-between items-center">
649
+ <div class="flex items-center gap-3">
650
+ <i data-feather="bell"></i>
651
+ <span>Notification Preferences</span>
652
+ </div>
653
+ <i data-feather="chevron-right"></i>
654
+ </div>
655
+ </div>
656
+
657
+ <!-- Responsible Gaming -->
658
+ <div class="bg-gray-900/40 p-4 rounded-lg cursor-pointer hover:bg-gray-900/60 bounce-once">
659
+ <div class="flex justify-between items-center">
660
+ <div class="flex items-center gap-3">
661
+ <i data-feather="heart"></i>
662
+ <span>Responsible Gaming Tools</span>
663
+ </div>
664
+ <i data-feather="chevron-right"></i>
665
+ </div>
666
+ </div>
667
+ </div>
668
+ </div>
669
+ </section>
670
+ </main>
671
+
672
+ <!-- Scripts -->
673
+ <script>
674
+ document.addEventListener('DOMContentLoaded', function() {
675
+ feather.replace();
676
+ AOS.init({
677
+ duration: 800,
678
+ easing: 'ease-in-out'
679
+ });
680
+
681
+ // Tooltip hover positions
682
+ document.querySelectorAll('.tooltip').forEach(tt => {
683
+ tt.addEventListener('mouseenter', function() {
684
+ const content = this.querySelector('.tooltip-content');
685
+ if (window.innerWidth - this.getBoundingClientRect().right < 200) {
686
+ content.style.left = 'auto';
687
+ content.style.right = '0';
688
+ content.style.transform = 'none';
689
+ }
690
+ });
691
+ });
692
+ });
693
+ </script>
694
+ </body>
695
  </html>