<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Wallet & Earnings</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@500;700;900&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>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#7C3AED", // Violet-600
"primary-hover": "#6D28D9", // Violet-700
"accent-yellow": "#FACC15", // Yellow-400
"accent-green": "#10B981", // Emerald-500
"background-light": "#F3F4F6", // Gray-100
"background-dark": "#0F0720", // Very dark purple/black
"card-dark": "#1A1033", // Dark purple card bg
"card-hover": "#25164D",
"card-light": "#FFFFFF",
"text-light": "#1F2937", // Gray-800
"text-dark": "#F3F4F6", // Gray-100
"glass-dark": "rgba(255, 255, 255, 0.05)",
},
fontFamily: {
sans: ["Inter", "sans-serif"],
display: ["Outfit", "sans-serif"],
},
backgroundImage: {
'hero-gradient': 'radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.15) 0%, rgba(15, 7, 32, 0) 50%)',
'card-gradient': 'linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%)',
'glow': 'conic-gradient(from 180deg at 50% 50%, #2a8af6 0deg, #a853ba 180deg, #e92a67 360deg)',
}
},
},
};
</script>
<style type="text/tailwindcss">
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0F0720;
}
::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark font-sans transition-colors duration-300 antialiased selection:bg-primary selection:text-white">
<nav class="fixed top-0 w-full z-50 backdrop-blur-md bg-white/70 dark:bg-background-dark/80 border-b border-gray-200 dark:border-white/5">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex-shrink-0 flex items-center gap-2 cursor-pointer">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white">
<span class="material-symbols-outlined text-2xl">sports_esports</span>
</div>
<span class="font-display font-bold text-xl tracking-tight">QuizQuest</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a class="hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Dashboard</a>
<a class="text-primary bg-primary/10 px-3 py-2 rounded-md text-sm font-medium" href="#">Wallet</a>
<a class="hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Tournaments</a>
<a class="hover:text-primary transition-colors px-3 py-2 rounded-md text-sm font-medium" href="#">Leaderboard</a>
</div>
</div>
<div class="hidden md:flex items-center gap-4">
<div class="flex items-center gap-3 bg-white/5 px-4 py-2 rounded-full border border-white/10">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary to-purple-400 flex items-center justify-center text-xs font-bold text-white">JD</div>
<div class="text-sm font-medium hidden lg:block">John Doe</div>
<span class="material-symbols-outlined text-gray-400 text-sm">expand_more</span>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" type="button">
<span class="material-symbols-outlined">menu</span>
</button>
</div>
</div>
</div>
</nav>
<main class="relative pt-32 pb-20 overflow-hidden min-h-screen">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[500px] bg-hero-gradient pointer-events-none opacity-50"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-10">
<div>
<h1 class="font-display text-4xl font-bold mb-2">Wallet & Earnings</h1>
<p class="text-gray-400">Manage your rewards, withdrawals, and subscription status.</p>
</div>
<div class="flex gap-3">
<button class="flex items-center gap-2 px-4 py-2.5 rounded-lg bg-card-dark border border-white/10 hover:bg-white/5 transition-all text-sm font-medium text-gray-300">
<span class="material-symbols-outlined text-lg">download</span>
Statement
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
<div class="relative overflow-hidden bg-card-dark rounded-2xl p-8 border border-white/5 group hover:border-primary/30 transition-all duration-300">
<div class="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-[120px] text-primary">account_balance_wallet</span>
</div>
<div class="relative z-10">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary">
<span class="material-symbols-outlined">trophy</span>
</div>
<h3 class="text-gray-300 font-medium tracking-wide text-sm uppercase">Quiz Reward Balance</h3>
</div>
<div class="flex items-baseline gap-1 mb-8">
<span class="text-4xl sm:text-5xl font-display font-bold text-white">₹12,450</span>
<span class="text-gray-400 text-lg">.00</span>
</div>
<button class="bg-primary hover:bg-primary-hover text-white px-6 py-3 rounded-xl font-semibold w-full sm:w-auto flex items-center justify-center gap-2 transition-transform hover:scale-105 shadow-lg shadow-primary/20">
<span class="material-symbols-outlined">payments</span>
Withdraw Funds
</button>
</div>
</div>
<div class="relative overflow-hidden bg-card-dark rounded-2xl p-8 border border-white/5 group hover:border-accent-green/30 transition-all duration-300">
<div class="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-[120px] text-accent-green">savings</span>
</div>
<div class="relative z-10">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-full bg-accent-green/20 flex items-center justify-center text-accent-green">
<span class="material-symbols-outlined">group_add</span>
</div>
<h3 class="text-gray-300 font-medium tracking-wide text-sm uppercase">Affiliate Earnings</h3>
</div>
<div class="flex items-baseline gap-1 mb-8">
<span class="text-4xl sm:text-5xl font-display font-bold text-white">₹3,200</span>
<span class="text-gray-400 text-lg">.50</span>
</div>
<button class="bg-accent-green hover:bg-emerald-600 text-white px-6 py-3 rounded-xl font-semibold w-full sm:w-auto flex items-center justify-center gap-2 transition-transform hover:scale-105 shadow-lg shadow-accent-green/20">
<span class="material-symbols-outlined">currency_exchange</span>
Withdraw Earnings
</button>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="lg:col-span-2">
<div class="bg-card-dark rounded-2xl border border-white/5 overflow-hidden">
<div class="p-6 border-b border-white/5 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<h3 class="font-display font-bold text-xl">Transaction History</h3>
<div class="flex gap-2">
<select class="bg-background-dark border border-white/10 text-gray-300 text-sm rounded-lg focus:ring-primary focus:border-primary block p-2.5">
<option>All Types</option>
<option>Earnings</option>
<option>Claims</option>
<option>Subscriptions</option>
</select>
<select class="bg-background-dark border border-white/10 text-gray-300 text-sm rounded-lg focus:ring-primary focus:border-primary block p-2.5">
<option>This Month</option>
<option>Last Month</option>
<option>All Time</option>
</select>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm text-left text-gray-400">
<thead class="text-xs text-gray-500 uppercase bg-white/5">
<tr>
<th class="px-6 py-4" scope="col">Type</th>
<th class="px-6 py-4" scope="col">Date</th>
<th class="px-6 py-4" scope="col">Amount</th>
<th class="px-6 py-4 text-right" scope="col">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-white/5">
<tr class="hover:bg-white/[0.02] transition-colors">
<td class="px-6 py-4 font-medium text-white flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center text-primary">
<span class="material-symbols-outlined text-lg">emoji_events</span>
</div>
<div>
<div class="text-white font-medium">Tournament Prize</div>
<div class="text-xs text-gray-500">Weekly Champion League</div>
</div>
</td>
<td class="px-6 py-4">Oct 24, 2023</td>
<td class="px-6 py-4 text-accent-green font-semibold">+ ₹5,000</td>
<td class="px-6 py-4 text-right">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-500/10 text-green-500 border border-green-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span> Success
</span>
</td>
</tr>
<tr class="hover:bg-white/[0.02] transition-colors">
<td class="px-6 py-4 font-medium text-white flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-red-500/20 flex items-center justify-center text-red-400">
<span class="material-symbols-outlined text-lg">bolt</span>
</div>
<div>
<div class="text-white font-medium">Subscription Renewal</div>
<div class="text-xs text-gray-500">Pro Monthly Plan</div>
</div>
</td>
<td class="px-6 py-4">Oct 21, 2023</td>
<td class="px-6 py-4 text-white font-semibold">- ₹999</td>
<td class="px-6 py-4 text-right">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-500/10 text-green-500 border border-green-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span> Success
</span>
</td>
</tr>
<tr class="hover:bg-white/[0.02] transition-colors">
<td class="px-6 py-4 font-medium text-white flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-accent-yellow/20 flex items-center justify-center text-accent-yellow">
<span class="material-symbols-outlined text-lg">payments</span>
</div>
<div>
<div class="text-white font-medium">Withdrawal Request</div>
<div class="text-xs text-gray-500">Bank Transfer ending in 4421</div>
</div>
</td>
<td class="px-6 py-4">Oct 20, 2023</td>
<td class="px-6 py-4 text-white font-semibold">- ₹2,000</td>
<td class="px-6 py-4 text-right">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-yellow-500/10 text-yellow-500 border border-yellow-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-yellow-500 animate-pulse"></span> Pending
</span>
</td>
</tr>
<tr class="hover:bg-white/[0.02] transition-colors">
<td class="px-6 py-4 font-medium text-white flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center text-purple-400">
<span class="material-symbols-outlined text-lg">person_add</span>
</div>
<div>
<div class="text-white font-medium">Referral Bonus</div>
<div class="text-xs text-gray-500">User: GamerX99</div>
</div>
</td>
<td class="px-6 py-4">Oct 18, 2023</td>
<td class="px-6 py-4 text-accent-green font-semibold">+ ₹150</td>
<td class="px-6 py-4 text-right">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-500/10 text-green-500 border border-green-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span> Success
</span>
</td>
</tr>
<tr class="hover:bg-white/[0.02] transition-colors">
<td class="px-6 py-4 font-medium text-white flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center text-primary">
<span class="material-symbols-outlined text-lg">emoji_events</span>
</div>
<div>
<div class="text-white font-medium">Daily Quiz Reward</div>
<div class="text-xs text-gray-500">Science Trivia</div>
</div>
</td>
<td class="px-6 py-4">Oct 15, 2023</td>
<td class="px-6 py-4 text-accent-green font-semibold">+ ₹50</td>
<td class="px-6 py-4 text-right">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-500/10 text-green-500 border border-green-500/20">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span> Success
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="p-4 border-t border-white/5 flex items-center justify-center">
<button class="text-sm text-primary hover:text-primary-hover font-medium flex items-center gap-1">
View All Transactions <span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
</div>
</div>
</div>
<div class="lg:col-span-1">
<div class="bg-gradient-to-br from-card-dark to-[#25164D] rounded-2xl border border-white/10 p-6 h-full relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-primary/20 rounded-full blur-3xl -mr-10 -mt-10"></div>
<div class="relative z-10 flex flex-col h-full">
<div class="flex items-center justify-between mb-6">
<h3 class="font-display font-bold text-lg">Current Plan</h3>
<span class="px-3 py-1 bg-primary text-white text-xs font-bold rounded-full uppercase tracking-wider">Active</span>
</div>
<div class="mb-8 text-center py-6 bg-background-dark/30 rounded-xl border border-white/5">
<div class="w-16 h-16 mx-auto bg-gradient-to-br from-primary to-purple-400 rounded-2xl flex items-center justify-center text-white shadow-lg shadow-primary/30 mb-4">
<span class="material-symbols-outlined text-3xl">diamond</span>
</div>
<h4 class="text-2xl font-bold text-white mb-1">Pro Gamer</h4>
<p class="text-sm text-gray-400">Monthly Subscription</p>
</div>
<div class="space-y-4 mb-8">
<div class="flex justify-between items-center text-sm">
<span class="text-gray-400">Renewal Date</span>
<span class="text-white font-medium">Nov 21, 2023</span>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-gray-400">Amount</span>
<span class="text-white font-medium">₹999 / mo</span>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-gray-400">Auto-Pay</span>
<span class="text-green-400 font-medium flex items-center gap-1">
<span class="material-symbols-outlined text-sm">check_circle</span> Enabled
</span>
</div>
</div>
<div class="mt-auto space-y-3">
<button class="w-full py-3 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 text-white font-medium text-sm transition-colors">
Manage Subscription
</button>
<button class="w-full py-3 rounded-xl text-red-400 hover:text-red-300 hover:bg-red-500/5 text-sm font-medium transition-colors">
Cancel Plan
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-background-dark border-t border-white/5 py-8 mt-auto">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
<span class="material-symbols-outlined">sports_esports</span>
<span class="text-sm font-medium">QuizQuest © 2023</span>
</div>
<div class="flex items-center gap-8">
<a class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" href="#">Privacy</a>
<a class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" href="#">Terms</a>
<a class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" href="#">Support</a>
</div>
</div>
</footer>
</body></html>