<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>User Financial Wallet Dashboard</title>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#6D28D9","primary-glow": "#8b5cf6",
"gold": "#FFC107",
"gold-glow": "#FDB913",
"background-light": "#f6f6f8",
"background-dark": "#0B0A10","surface-dark": "#15131D",
"surface-highlight": "#1E1B29",
"accent-purple": "#5b13ec",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "1.5rem",
"xl": "2.5rem",
"full": "9999px"
},
backgroundImage: {
'purple-gradient': 'linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%)',
'gold-gradient': 'linear-gradient(135deg, #713f12 0%, #eab308 100%)',
}
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.neon-glow-purple {
box-shadow: 0 0 20px rgba(109, 40, 217, 0.3);
}
.neon-glow-gold {
box-shadow: 0 0 20px rgba(255, 193, 7, 0.2);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 antialiased overflow-hidden">
<div class="flex h-screen w-full overflow-hidden">
<aside class="hidden w-72 flex-col justify-between border-r border-surface-highlight bg-surface-dark p-6 lg:flex z-20">
<div class="flex flex-col gap-6">
<div class="flex items-center gap-3 px-2">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-white shadow-[0_0_15px_rgba(109,40,217,0.5)]">
<span class="material-symbols-outlined">sports_esports</span>
</div>
<div>
<h1 class="text-lg font-bold leading-tight text-white">QuizQuest</h1>
<p class="text-xs font-medium text-slate-400">Player Portal</p>
</div>
</div>
<nav class="flex flex-col gap-2">
<a class="flex items-center gap-3 rounded-full px-4 py-3 text-slate-400 transition-colors hover:bg-surface-highlight hover:text-white" href="#">
<span class="material-symbols-outlined text-[20px]">dashboard</span>
<span class="text-sm font-medium">Dashboard</span>
</a>
<a class="flex items-center gap-3 rounded-full px-4 py-3 text-slate-400 transition-colors hover:bg-surface-highlight hover:text-white" href="#">
<span class="material-symbols-outlined text-[20px]">sports_score</span>
<span class="text-sm font-medium">My Quizzes</span>
</a>
<a class="flex items-center gap-3 rounded-full bg-surface-highlight px-4 py-3 text-white shadow-sm transition-colors" href="#">
<span class="material-symbols-outlined text-[20px] text-primary-glow">account_balance_wallet</span>
<span class="text-sm font-semibold">Wallet</span>
</a>
<a class="flex items-center gap-3 rounded-full px-4 py-3 text-slate-400 transition-colors hover:bg-surface-highlight hover:text-white" href="#">
<span class="material-symbols-outlined text-[20px]">emoji_events</span>
<span class="text-sm font-medium">Leaderboard</span>
</a>
<a class="flex items-center gap-3 rounded-full px-4 py-3 text-slate-400 transition-colors hover:bg-surface-highlight hover:text-white" href="#">
<span class="material-symbols-outlined text-[20px]">person</span>
<span class="text-sm font-medium">Profile</span>
</a>
</nav>
</div>
<div class="flex flex-col gap-2">
<a class="flex items-center gap-3 rounded-full px-4 py-3 text-slate-400 transition-colors hover:bg-surface-highlight hover:text-red-400" href="#">
<span class="material-symbols-outlined text-[20px]">logout</span>
<span class="text-sm font-medium">Log Out</span>
</a>
</div>
</aside>
<main class="flex flex-1 flex-col overflow-y-auto bg-background-dark relative">
<div class="absolute top-0 right-0 w-[500px] h-[500px] bg-primary/20 rounded-full blur-[120px] pointer-events-none z-0"></div>
<header class="sticky top-0 z-30 flex w-full items-center justify-between border-b border-surface-highlight bg-background-dark/80 px-6 py-4 backdrop-blur-md lg:px-10">
<div class="flex items-center gap-4 lg:hidden">
<button class="text-white">
<span class="material-symbols-outlined">menu</span>
</button>
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-white">
<span class="material-symbols-outlined text-sm">sports_esports</span>
</div>
</div>
<div class="hidden lg:block">
<h2 class="text-xl font-bold text-white">Financial Overview</h2>
</div>
<div class="flex items-center gap-4">
<div class="hidden md:flex items-center gap-2 rounded-full bg-surface-highlight px-3 py-1.5 border border-surface-highlight">
<span class="material-symbols-outlined text-yellow-500 text-sm">token</span>
<span class="text-xs font-bold text-white">450 Credits</span>
</div>
<button class="flex h-10 w-10 items-center justify-center rounded-full bg-surface-highlight text-white transition-colors hover:bg-surface-highlight/80 hover:text-primary">
<span class="material-symbols-outlined text-[20px]">notifications</span>
</button>
<div class="flex h-10 w-10 overflow-hidden rounded-full border-2 border-primary/50">
<img alt="User Profile Picture" class="h-full w-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzViL4lc0jczPZTmPDaDclgDRrxY-CoEIhF3LrBitMVCMLnouJJA--yIsKtsNPGtyE4LuMlV4PivDdBDmhCWNkAPTwNpqZHpr1VrBXiZOIQLMV0tqcbN5rlhT8PNPhuitdvbjjJ__KSKmqFbL6C2lgx2_ML9AOeX7zoh0HyaInm8BK6ktedzykYbw63mLopcHpNBH3DhZY7GvRiCGp3eF8zx4jWMXr9ac6huaPlWFvpnlBfg6kuKr1_BJAeuC6YEIKGKuRym9DR1lN"/>
</div>
</div>
</header>
<div class="flex flex-col gap-8 p-6 lg:p-10 relative z-10">
<section class="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
<div>
<h1 class="text-3xl font-bold leading-tight text-white md:text-4xl">Your Wallet ⚡</h1>
<p class="mt-2 text-slate-400">Manage your winnings, subscriptions, and entry fees securely.</p>
</div>
<div class="flex gap-3">
<button class="flex items-center gap-2 rounded-full bg-surface-highlight px-5 py-2.5 text-sm font-bold text-white transition-all hover:bg-surface-highlight/80 border border-white/5">
<span class="material-symbols-outlined text-[18px]">history</span>
Statements
</button>
</div>
</section>
<section class="grid grid-cols-1 gap-6 md:grid-cols-2">
<div class="relative overflow-hidden rounded-xl bg-purple-gradient p-8 shadow-lg neon-glow-purple group">
<div class="absolute -right-6 -top-6 h-32 w-32 rounded-full bg-white/10 blur-2xl group-hover:bg-white/20 transition-all duration-500"></div>
<div class="relative z-10 flex flex-col h-full justify-between gap-6">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm">
<span class="material-symbols-outlined">trophy</span>
</div>
<span class="font-medium text-white/90">Quiz Rewards</span>
</div>
<span class="material-symbols-outlined text-white/50">more_horiz</span>
</div>
<div>
<h3 class="text-4xl font-black text-white tracking-tight">$1,450.00</h3>
<p class="text-sm text-purple-200 mt-1">Available to withdraw</p>
</div>
<div class="flex gap-3 mt-2">
<button class="flex-1 rounded-full bg-white py-2.5 text-sm font-bold text-primary transition-transform hover:scale-105 shadow-lg active:scale-95">
Withdraw Funds
</button>
</div>
</div>
</div>
<div class="relative overflow-hidden rounded-xl bg-surface-highlight border border-yellow-500/20 p-8 shadow-lg neon-glow-gold group">
<div class="absolute inset-0 bg-gradient-to-br from-yellow-500/5 to-transparent"></div>
<div class="absolute right-0 bottom-0 h-40 w-40 translate-x-10 translate-y-10 rounded-full bg-yellow-500/10 blur-3xl"></div>
<div class="relative z-10 flex flex-col h-full justify-between gap-6">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-yellow-500/20 text-yellow-400 backdrop-blur-sm border border-yellow-500/30">
<span class="material-symbols-outlined">paid</span>
</div>
<span class="font-medium text-slate-200">Referral Bonus</span>
</div>
<span class="material-symbols-outlined text-slate-500">trending_up</span>
</div>
<div>
<h3 class="text-4xl font-black text-white tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-yellow-200 to-yellow-500">$320.50</h3>
<p class="text-sm text-slate-400 mt-1">Lifetime earnings</p>
</div>
<div class="flex gap-3 mt-2">
<button class="flex-1 rounded-full bg-gradient-to-r from-yellow-600 to-yellow-500 py-2.5 text-sm font-bold text-white shadow-lg shadow-yellow-500/20 transition-transform hover:scale-105 active:scale-95">
Transfer to Wallet
</button>
</div>
</div>
</div>
</section>
<section class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="md:col-span-2 rounded-xl bg-surface-highlight border border-surface-highlight p-1 flex items-center justify-between">
<div class="flex items-center gap-4 px-4 py-3">
<div class="h-10 w-10 flex items-center justify-center rounded-full bg-emerald-500/10 text-emerald-400">
<span class="material-symbols-outlined">confirmation_number</span>
</div>
<div>
<h4 class="font-bold text-white text-sm">Need a Pass?</h4>
<p class="text-xs text-slate-400">Get the Standard Entry Pass for ₹99</p>
</div>
</div>
<button class="mr-2 rounded-lg bg-primary px-4 py-2 text-xs font-bold text-white hover:bg-primary-glow transition-colors">
Buy Entry Pass
</button>
</div>
<div class="rounded-xl bg-surface-highlight border border-surface-highlight p-4 flex flex-col justify-center items-center text-center">
<p class="text-xs text-slate-400 uppercase font-bold tracking-wider">Next Payout</p>
<p class="text-white font-mono mt-1 text-lg">Nov 01, 2023</p>
</div>
</section>
<section class="flex flex-col gap-4 rounded-xl bg-surface-dark border border-surface-highlight p-6">
<div class="flex flex-wrap items-center justify-between gap-4">
<div>
<h3 class="text-lg font-bold text-white">Transaction History</h3>
<p class="text-sm text-slate-400">Detailed log of winnings, payouts, and fees.</p>
</div>
<div class="flex gap-2">
<button class="flex items-center gap-2 rounded-full border border-slate-700 bg-transparent px-3 py-1.5 text-xs font-medium text-slate-300 transition-colors hover:bg-slate-800 hover:text-white">
<span class="material-symbols-outlined text-[16px]">calendar_today</span>
Date
</button>
<button class="flex items-center gap-2 rounded-full border border-slate-700 bg-transparent px-3 py-1.5 text-xs font-medium text-slate-300 transition-colors hover:bg-slate-800 hover:text-white">
<span class="material-symbols-outlined text-[16px]">filter_list</span>
Type
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full min-w-[700px] table-auto text-left border-collapse">
<thead>
<tr class="border-b border-surface-highlight text-xs font-bold uppercase tracking-wider text-slate-500">
<th class="px-4 py-4">Transaction ID</th>
<th class="px-4 py-4">Date</th>
<th class="px-4 py-4">Description</th>
<th class="px-4 py-4 text-right">Amount</th>
<th class="px-4 py-4 text-center">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-surface-highlight text-sm">
<tr class="group hover:bg-surface-highlight/50 transition-colors">
<td class="px-4 py-4 text-slate-400 font-mono text-xs">#TRX-8902</td>
<td class="px-4 py-4 text-slate-300">Oct 24, 2023</td>
<td class="px-4 py-4">
<div class="flex items-center gap-3">
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-purple-500/10 text-purple-400">
<span class="material-symbols-outlined text-[16px]">emoji_events</span>
</div>
<div>
<p class="font-medium text-white">Quiz Winnings</p>
<p class="text-xs text-slate-500">Place #1 - General Knowledge</p>
</div>
</div>
</td>
<td class="px-4 py-4 font-bold text-emerald-400 text-right">+$150.00</td>
<td class="px-4 py-4 text-center">
<span class="inline-flex items-center rounded-full bg-emerald-500/10 px-2 py-1 text-xs font-medium text-emerald-400 ring-1 ring-inset ring-emerald-500/20">Completed</span>
</td>
</tr>
<tr class="group hover:bg-surface-highlight/50 transition-colors">
<td class="px-4 py-4 text-slate-400 font-mono text-xs">#TRX-8894</td>
<td class="px-4 py-4 text-slate-300">Oct 23, 2023</td>
<td class="px-4 py-4">
<div class="flex items-center gap-3">
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-blue-500/10 text-blue-400">
<span class="material-symbols-outlined text-[16px]">subscriptions</span>
</div>
<div>
<p class="font-medium text-white">Standard Entry Pass</p>
<p class="text-xs text-slate-500">Monthly Subscription</p>
</div>
</div>
</td>
<td class="px-4 py-4 font-bold text-white text-right">-$99.00</td>
<td class="px-4 py-4 text-center">
<span class="inline-flex items-center rounded-full bg-emerald-500/10 px-2 py-1 text-xs font-medium text-emerald-400 ring-1 ring-inset ring-emerald-500/20">Completed</span>
</td>
</tr>
<tr class="group hover:bg-surface-highlight/50 transition-colors">
<td class="px-4 py-4 text-slate-400 font-mono text-xs">#TRX-8721</td>
<td class="px-4 py-4 text-slate-300">Oct 21, 2023</td>
<td class="px-4 py-4">
<div class="flex items-center gap-3">
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-yellow-500/10 text-yellow-400">
<span class="material-symbols-outlined text-[16px]">person_add</span>
</div>
<div>
<p class="font-medium text-white">Referral Bonus</p>
<p class="text-xs text-slate-500">User: Alex99</p>
</div>
</div>
</td>
<td class="px-4 py-4 font-bold text-emerald-400 text-right">+$25.00</td>
<td class="px-4 py-4 text-center">
<span class="inline-flex items-center rounded-full bg-emerald-500/10 px-2 py-1 text-xs font-medium text-emerald-400 ring-1 ring-inset ring-emerald-500/20">Completed</span>
</td>
</tr>
<tr class="group hover:bg-surface-highlight/50 transition-colors">
<td class="px-4 py-4 text-slate-400 font-mono text-xs">#TRX-8650</td>
<td class="px-4 py-4 text-slate-300">Oct 20, 2023</td>
<td class="px-4 py-4">
<div class="flex items-center gap-3">
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-red-500/10 text-red-400">
<span class="material-symbols-outlined text-[16px]">account_balance</span>
</div>
<div>
<p class="font-medium text-white">Withdrawal</p>
<p class="text-xs text-slate-500">To Bank Account ****4521</p>
</div>
</div>
</td>
<td class="px-4 py-4 font-bold text-white text-right">-$500.00</td>
<td class="px-4 py-4 text-center">
<span class="inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-400 ring-1 ring-inset ring-yellow-500/20">Processing</span>
</td>
</tr>
<tr class="group hover:bg-surface-highlight/50 transition-colors">
<td class="px-4 py-4 text-slate-400 font-mono text-xs">#TRX-8500</td>
<td class="px-4 py-4 text-slate-300">Oct 18, 2023</td>
<td class="px-4 py-4">
<div class="flex items-center gap-3">
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-purple-500/10 text-purple-400">
<span class="material-symbols-outlined text-[16px]">emoji_events</span>
</div>
<div>
<p class="font-medium text-white">Quiz Winnings</p>
<p class="text-xs text-slate-500">Place #3 - Daily Rapid Fire</p>
</div>
</div>
</td>
<td class="px-4 py-4 font-bold text-emerald-400 text-right">+$50.00</td>
<td class="px-4 py-4 text-center">
<span class="inline-flex items-center rounded-full bg-emerald-500/10 px-2 py-1 text-xs font-medium text-emerald-400 ring-1 ring-inset ring-emerald-500/20">Completed</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-2 flex items-center justify-center border-t border-surface-highlight pt-4">
<button class="text-sm font-medium text-primary-glow hover:text-primary transition-colors">View All Transactions</button>
</div>
</section>
</div>
</main>
</div>
</body></html>