<!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 Wallet & Transactions | Quiz Portal</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<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 id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#5b13ec",
"background-light": "#f6f6f8",
"background-dark": "#0a0812",
"card-dark": "#161022",
"accent-gold": "#fbbf24",
"accent-purple": "#8b5cf6",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}
.glass-card {
background: rgba(22, 16, 34, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.gradient-purple {
background: linear-gradient(135deg, #5b13ec 0%, #8b5cf6 100%);
}
.gradient-gold {
background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen">
<div class="relative flex h-auto min-h-screen w-full flex-col overflow-x-hidden">
<div class="layout-container flex h-full grow flex-col">
<!-- Top Navigation Bar -->
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-primary/20 px-6 lg:px-20 py-4 bg-white dark:bg-card-dark/50 sticky top-0 z-50 backdrop-blur-md">
<div class="flex items-center gap-12">
<div class="flex items-center gap-3 text-primary">
<div class="size-8 bg-primary rounded-lg flex items-center justify-center text-white">
<span class="material-symbols-outlined text-2xl">extension</span>
</div>
<h2 class="text-slate-900 dark:text-white text-xl font-bold leading-tight tracking-tight">QuizPortal</h2>
</div>
<nav class="hidden md:flex items-center gap-8">
<a class="text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-primary transition-colors text-sm font-medium" href="#">Dashboard</a>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-primary transition-colors text-sm font-medium" href="#">Quizzes</a>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary dark:hover:text-primary transition-colors text-sm font-medium" href="#">Leaderboard</a>
<a class="text-primary text-sm font-bold border-b-2 border-primary pb-1" href="#">Wallet</a>
</nav>
</div>
<div class="flex items-center gap-6">
<div class="hidden sm:flex items-center bg-slate-100 dark:bg-primary/10 rounded-full px-4 py-2 border border-transparent focus-within:border-primary/50 transition-all">
<span class="material-symbols-outlined text-slate-400 text-xl">search</span>
<input class="bg-transparent border-none focus:ring-0 text-sm w-40 lg:w-60 placeholder:text-slate-500" placeholder="Search transactions..." type="text"/>
</div>
<button class="relative p-2 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-primary/20 rounded-full transition-all">
<span class="material-symbols-outlined">notifications</span>
<span class="absolute top-2 right-2 size-2 bg-red-500 rounded-full border-2 border-white dark:border-card-dark"></span>
</button>
<div class="h-10 w-10 rounded-full border-2 border-primary/30 p-0.5 overflow-hidden">
<img class="w-full h-full object-cover rounded-full" data-alt="User profile avatar circular portrait" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAC5FA_AcYHodRVrJG-G_BQ0yvs_d04k-NdrxMUfe7eps-W8h7yKN48a7zetMkNl43UNj0MlE4IAuXyU7VxvaOkdvqIzOjo7FuskOfhopwN_H7rF8c3pICAP0HNWtFcKkWv7TRh_vwPt30fuCnirOTgX9-GSTbwohL-jEEUonBoyVLVSyHzN5e7ZJs16tkARwLp-ZaHCFRjyc0dd-uxEWXV8pusUi9fqVvAazEvufuxFcNQMyBrj_noz_R-J1vogdGwJmVD2_1VTGqi"/>
</div>
</div>
</header>
<main class="flex-1 flex flex-col max-w-[1200px] mx-auto w-full px-6 py-8 gap-8">
<!-- Wallet Header Section -->
<div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
<div class="space-y-1">
<h1 class="text-4xl font-bold tracking-tight text-slate-900 dark:text-white">My Wallet</h1>
<p class="text-slate-500 dark:text-slate-400">Track your earnings, manage withdrawals, and view activity.</p>
</div>
<div class="flex gap-3 w-full md:w-auto">
<button class="flex-1 md:flex-none px-6 py-3 bg-slate-200 dark:bg-primary/10 text-slate-900 dark:text-white rounded-full font-bold hover:bg-slate-300 dark:hover:bg-primary/20 transition-all flex items-center justify-center gap-2">
<span class="material-symbols-outlined text-lg">download</span>
Export CSV
</button>
<button class="flex-1 md:flex-none px-6 py-3 bg-primary text-white rounded-full font-bold shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all flex items-center justify-center gap-2">
<span class="material-symbols-outlined text-lg">account_balance_wallet</span>
Withdraw Funds
</button>
</div>
</div>
<!-- Balance Summary Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Quiz Rewards Card -->
<div class="relative overflow-hidden rounded-xl p-8 flex flex-col justify-between min-h-[220px] gradient-purple group cursor-default">
<div class="absolute -right-10 -top-10 size-40 bg-white/10 rounded-full blur-3xl group-hover:scale-110 transition-transform"></div>
<div class="flex justify-between items-start relative z-10">
<div class="p-3 bg-white/20 rounded-xl">
<span class="material-symbols-outlined text-white text-3xl">emoji_events</span>
</div>
<div class="text-right">
<span class="text-white/70 text-sm font-medium uppercase tracking-wider">Quiz Rewards</span>
<div class="text-white text-4xl font-black mt-1">$2,450.80</div>
</div>
</div>
<div class="flex items-end justify-between relative z-10">
<div>
<p class="text-white/80 text-sm">Performance Score</p>
<p class="text-white font-bold text-lg">Top 2% Globally</p>
</div>
<div class="bg-white/20 px-3 py-1 rounded-full text-white text-xs font-bold border border-white/30">
+12.5% this month
</div>
</div>
</div>
<!-- Affiliate Earnings Card -->
<div class="relative overflow-hidden rounded-xl p-8 flex flex-col justify-between min-h-[220px] gradient-gold group cursor-default">
<div class="absolute -right-10 -top-10 size-40 bg-black/5 rounded-full blur-3xl group-hover:scale-110 transition-transform"></div>
<div class="flex justify-between items-start relative z-10">
<div class="p-3 bg-black/10 rounded-xl">
<span class="material-symbols-outlined text-black/70 text-3xl">groups</span>
</div>
<div class="text-right">
<span class="text-black/60 text-sm font-medium uppercase tracking-wider">Affiliate Earnings</span>
<div class="text-slate-900 text-4xl font-black mt-1">$842.15</div>
</div>
</div>
<div class="flex items-end justify-between relative z-10">
<div>
<p class="text-black/60 text-sm">Active Referrals</p>
<p class="text-slate-900 font-bold text-lg">48 Users Invited</p>
</div>
<div class="bg-black/10 px-3 py-1 rounded-full text-slate-900 text-xs font-bold border border-black/10">
4 Pending Payouts
</div>
</div>
</div>
</div>
<!-- Transaction History Section -->
<div class="flex flex-col gap-6 bg-white dark:bg-card-dark rounded-xl p-6 border border-slate-200 dark:border-primary/10 shadow-xl shadow-black/5">
<div class="flex flex-col md:flex-row justify-between items-center gap-4">
<h2 class="text-xl font-bold text-slate-900 dark:text-white">Transaction History</h2>
<!-- Filter Tabs -->
<div class="flex bg-slate-100 dark:bg-primary/5 p-1 rounded-full overflow-x-auto max-w-full">
<button class="px-6 py-2 bg-white dark:bg-primary text-slate-900 dark:text-white rounded-full text-sm font-bold shadow-sm whitespace-nowrap">All Activity</button>
<button class="px-6 py-2 text-slate-500 dark:text-slate-400 hover:text-primary transition-colors text-sm font-bold whitespace-nowrap">Quiz Entries</button>
<button class="px-6 py-2 text-slate-500 dark:text-slate-400 hover:text-primary transition-colors text-sm font-bold whitespace-nowrap">Referral Bonuses</button>
<button class="px-6 py-2 text-slate-500 dark:text-slate-400 hover:text-primary transition-colors text-sm font-bold whitespace-nowrap">Payouts</button>
</div>
</div>
<!-- Table List -->
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="text-slate-400 text-xs font-bold uppercase tracking-wider border-b border-slate-100 dark:border-primary/10">
<th class="px-4 py-4">Transaction</th>
<th class="px-4 py-4">Category</th>
<th class="px-4 py-4">Date</th>
<th class="px-4 py-4">Status</th>
<th class="px-4 py-4 text-right">Amount</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100 dark:divide-primary/5">
<!-- Row 1 -->
<tr class="hover:bg-slate-50 dark:hover:bg-primary/5 transition-colors group">
<td class="px-4 py-5">
<div class="flex items-center gap-3">
<div class="size-10 bg-emerald-100 dark:bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 rounded-lg flex items-center justify-center">
<span class="material-symbols-outlined text-xl">payments</span>
</div>
<div>
<div class="font-bold text-slate-900 dark:text-white">Referral Bonus</div>
<div class="text-xs text-slate-500 font-medium">Invited: @johndoe_99</div>
</div>
</div>
</td>
<td class="px-4 py-5 text-sm text-slate-600 dark:text-slate-400">Affiliate</td>
<td class="px-4 py-5 text-sm text-slate-600 dark:text-slate-400">Oct 24, 2023</td>
<td class="px-4 py-5">
<span class="px-3 py-1 bg-emerald-100 dark:bg-emerald-500/20 text-emerald-700 dark:text-emerald-400 text-[10px] font-black uppercase rounded-full">Success</span>
</td>
<td class="px-4 py-5 text-right font-black text-emerald-600 dark:text-emerald-400">+$25.00</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-slate-50 dark:hover:bg-primary/5 transition-colors">
<td class="px-4 py-5">
<div class="flex items-center gap-3">
<div class="size-10 bg-primary/10 text-primary rounded-lg flex items-center justify-center">
<span class="material-symbols-outlined text-xl">psychology</span>
</div>
<div>
<div class="font-bold text-slate-900 dark:text-white">Quiz Entry: Science Pro</div>
<div class="text-xs text-slate-500 font-medium">Entry Fee - Tournament #452</div>
</div>
</div>
</td>
<td class="px-4 py-5 text-sm text-slate-600 dark:text-slate-400">Quiz Fee</td>
<td class="px-4 py-5 text-sm text-slate-600 dark:text-slate-400">Oct 23, 2023</td>
<td class="px-4 py-5">
<span class="px-3 py-1 bg-emerald-100 dark:bg-emerald-500/20 text-emerald-700 dark:text-emerald-400 text-[10px] font-black uppercase rounded-full">Success</span>
</td>
<td class="px-4 py-5 text-right font-black text-slate-400">-$5.00</td>
</tr>
<!-- Row 3 -->
<tr class="hover:bg-slate-50 dark:hover:bg-primary/5 transition-colors">
<td class="px-4 py-5">
<div class="flex items-center gap-3">
<div class="size-10 bg-accent-purple/20 text-accent-purple rounded-lg flex items-center justify-center">
<span class="material-symbols-outlined text-xl">star_rate</span>
</div>
<div>
<div class="font-bold text-slate-900 dark:text-white">Subscription Payout</div>
<div class="text-xs text-slate-500 font-medium">Monthly Creator Share</div>
</div>
</div>
</td>
<td class="px-4 py-5 text-sm text-slate-600 dark:text-slate-400">Creator</td>
<td class="px-4 py-5 text-sm text-slate-600 dark:text-slate-400">Oct 21, 2023</td>
<td class="px-4 py-5">
<span class="px-3 py-1 bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-400 text-[10px] font-black uppercase rounded-full">Pending</span>
</td>
<td class="px-4 py-5 text-right font-black text-slate-900 dark:text-white">+$142.50</td>
</tr>
<!-- Row 4 -->
<tr class="hover:bg-slate-50 dark:hover:bg-primary/5 transition-colors">
<td class="px-4 py-5">
<div class="flex items-center gap-3">
<div class="size-10 bg-primary/20 text-primary rounded-lg flex items-center justify-center">
<span class="material-symbols-outlined text-xl">trophy</span>
</div>
<div>
<div class="font-bold text-slate-900 dark:text-white">First Place Reward</div>
<div class="text-xs text-slate-500 font-medium">History Buff Challenge</div>
</div>
</div>
</td>
<td class="px-4 py-5 text-sm text-slate-600 dark:text-slate-400">Reward</td>
<td class="px-4 py-5 text-sm text-slate-600 dark:text-slate-400">Oct 19, 2023</td>
<td class="px-4 py-5">
<span class="px-3 py-1 bg-emerald-100 dark:bg-emerald-500/20 text-emerald-700 dark:text-emerald-400 text-[10px] font-black uppercase rounded-full">Success</span>
</td>
<td class="px-4 py-5 text-right font-black text-emerald-600 dark:text-emerald-400">+$500.00</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="flex items-center justify-between pt-4 border-t border-slate-100 dark:border-primary/10">
<div class="text-sm text-slate-500 dark:text-slate-400">Showing 1-10 of 240 transactions</div>
<div class="flex gap-2">
<button class="p-2 border border-slate-200 dark:border-primary/20 rounded-lg hover:bg-slate-100 dark:hover:bg-primary/10 disabled:opacity-50 transition-colors">
<span class="material-symbols-outlined text-xl">chevron_left</span>
</button>
<button class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-bold shadow-md shadow-primary/20">1</button>
<button class="px-4 py-2 border border-slate-200 dark:border-primary/20 rounded-lg text-sm font-bold hover:bg-slate-100 dark:hover:bg-primary/10 transition-colors">2</button>
<button class="px-4 py-2 border border-slate-200 dark:border-primary/20 rounded-lg text-sm font-bold hover:bg-slate-100 dark:hover:bg-primary/10 transition-colors">3</button>
<button class="p-2 border border-slate-200 dark:border-primary/20 rounded-lg hover:bg-slate-100 dark:hover:bg-primary/10 transition-colors">
<span class="material-symbols-outlined text-xl">chevron_right</span>
</button>
</div>
</div>
</div>
<!-- Gamification / Next Milestone Card -->
<div class="bg-gradient-to-r from-background-dark to-primary/20 rounded-xl p-8 border border-primary/20 flex flex-col lg:flex-row items-center justify-between gap-6">
<div class="flex flex-col gap-2 text-center lg:text-left">
<h3 class="text-2xl font-bold text-white">Unlock Affiliate Platinum</h3>
<p class="text-slate-400">Invite 2 more users to earn a permanent 5% bonus on all referral commissions.</p>
<div class="w-full bg-primary/10 rounded-full h-3 mt-4 overflow-hidden">
<div class="bg-primary h-full rounded-full w-[80%]" style="box-shadow: 0 0 15px rgba(91, 19, 236, 0.5)"></div>
</div>
<div class="flex justify-between text-xs font-bold uppercase tracking-widest text-primary mt-2">
<span>48 Referrals</span>
<span>50 Needed</span>
</div>
</div>
<button class="px-8 py-4 bg-white text-primary rounded-full font-black text-sm uppercase tracking-widest hover:bg-slate-100 transition-all transform hover:scale-105 active:scale-95 whitespace-nowrap">
Invite Friends Now
</button>
</div>
</main>
<!-- Footer Section -->
<footer class="mt-auto border-t border-slate-200 dark:border-primary/10 py-10 px-6 lg:px-20 bg-white dark:bg-card-dark/20">
<div class="max-w-[1200px] mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-2 text-slate-400">
<span class="material-symbols-outlined text-xl">verified_user</span>
<span class="text-sm">Secure transactions powered by Stripe & Web3 Wallet</span>
</div>
<div class="flex gap-8">
<a class="text-sm text-slate-500 hover:text-primary transition-colors" href="#">Help Center</a>
<a class="text-sm text-slate-500 hover:text-primary transition-colors" href="#">Privacy Policy</a>
<a class="text-sm text-slate-500 hover:text-primary transition-colors" href="#">Terms of Service</a>
</div>
</div>
</footer>
</div>
</div>
</body></html>