<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - User Wallet</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&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"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#6D28D9", // Vibrant Purple
accent: "#FBBF24", // Gold
"background-light": "#F3F4F6",
"background-dark": "#0F0E17",
"surface-light": "#FFFFFF",
"surface-dark": "#1E1B2E",
"surface-dark-2": "#262338",
"gold-glow": "rgba(251, 191, 36, 0.5)",
},
fontFamily: {
display: ["Inter", "sans-serif"],
sans: ["Inter", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.75rem",
},
},
},
};
// Check for saved user preference, if any, on load of the website
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
function toggleTheme() {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.theme = 'light';
} else {
document.documentElement.classList.add('dark');
localStorage.theme = 'dark';
}
}
</script>
<style>
.gradient-text {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(to right, #FBBF24, #F59E0B);
}
.hero-glow {
background: radial-gradient(circle at center, rgba(109, 40, 217, 0.4) 0%, rgba(15, 14, 23, 0) 70%);
}
.card-glow-gold {
box-shadow: 0 0 20px -5px var(--tw-colors-gold-glow);
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-gray-900 dark:text-white font-sans transition-colors duration-300 min-h-screen flex flex-col">
<nav class="fixed w-full z-50 bg-background-light/90 dark:bg-background-dark/90 backdrop-blur-sm border-b border-gray-200 dark:border-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-20 items-center">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white text-xl">
<i class="fas fa-gamepad"></i>
</div>
<span class="font-bold text-xl tracking-tight">QuizQuest</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-white font-medium transition" href="#">Dashboard</a>
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-white font-medium transition" href="#">My Quests</a>
<a class="text-primary dark:text-white font-bold transition border-b-2 border-primary" href="#">Wallet</a>
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-white font-medium transition" href="#">Profile</a>
</div>
<div class="flex items-center gap-4">
<button class="p-2 rounded-lg text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800 transition" onclick="toggleTheme()">
<i class="fas fa-moon dark:hidden"></i>
<i class="fas fa-sun hidden dark:inline text-yellow-400"></i>
</button>
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-full bg-gradient-to-tr from-primary to-blue-500 p-[2px]">
<img alt="User" class="rounded-full bg-surface-dark w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBK59dJs_jqKFQMeKm9fZgvdJyvNVTtVPeScqVfiZ80nfqQv55igfTqiHVLldmlVdze4NbdQvFSh9-NdaTrv8kIJ3kcF4t01o567nQQnmFzI8G-wDJME-c8LZgobmkjSVNq4SNZORqV00DuYeS_WIHsFY5l5eS8EumYP1ySQD_Equ_CbO-E7hFzJa4l8bMNgs_6yOyh7fEf7yi487qOxFvqwSHLguxsLxXXHyajk0v9UoPbRLdqerVlT3pAEFPqWM7NSYLK7-X3"/>
</div>
<span class="hidden md:block font-medium text-sm">Alex</span>
</div>
</div>
</div>
</div>
</nav>
<main class="flex-grow pt-28 pb-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-6xl mx-auto space-y-8">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<div>
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">My Wallet</h1>
<p class="text-gray-500 dark:text-gray-400 text-sm mt-1">Manage your earnings and transactions</p>
</div>
<div class="flex gap-3">
<button class="px-5 py-2.5 rounded-xl bg-surface-light dark:bg-surface-dark-2 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-200 font-medium hover:bg-gray-50 dark:hover:bg-surface-dark transition flex items-center gap-2">
<span class="material-symbols-outlined text-[20px]">account_balance_wallet</span>
Withdraw
</button>
<button class="px-5 py-2.5 rounded-xl bg-primary hover:bg-purple-700 text-white font-medium transition shadow-lg shadow-purple-900/20 flex items-center gap-2">
<span class="material-symbols-outlined text-[20px]">redeem</span>
Claim Prize
</button>
</div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-[#1E1B2E] to-[#2D2A45] p-6 border border-gray-800 shadow-xl group">
<div class="absolute top-0 right-0 p-4 opacity-10">
<i class="fas fa-trophy text-9xl text-yellow-500 transform rotate-12 translate-x-4 -translate-y-4"></i>
</div>
<div class="relative z-10 flex flex-col h-full justify-between min-h-[160px]">
<div class="flex justify-between items-start">
<div>
<h3 class="text-gray-400 text-sm font-medium uppercase tracking-wider mb-1">Quiz Reward Points</h3>
<div class="flex items-baseline gap-1">
<span class="text-4xl font-bold text-white tracking-tight">2,450</span>
<span class="text-yellow-500 font-bold text-sm">QP</span>
</div>
</div>
<div class="bg-yellow-500/10 p-2 rounded-lg">
<i class="fas fa-coins text-yellow-500 text-xl"></i>
</div>
</div>
<div class="mt-6 flex items-center gap-2 text-sm text-green-400 bg-green-900/20 w-fit px-3 py-1 rounded-full border border-green-900/30">
<i class="fas fa-arrow-up text-xs"></i>
<span>+450 this week</span>
</div>
</div>
<div class="absolute -bottom-10 -left-10 w-32 h-32 bg-yellow-500 blur-[80px] opacity-20 group-hover:opacity-30 transition duration-500"></div>
</div>
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-[#1E1B2E] to-[#2D2A45] p-6 border border-gray-800 shadow-xl group">
<div class="absolute top-0 right-0 p-4 opacity-10">
<i class="fas fa-users text-9xl text-purple-500 transform rotate-12 translate-x-4 -translate-y-4"></i>
</div>
<div class="relative z-10 flex flex-col h-full justify-between min-h-[160px]">
<div class="flex justify-between items-start">
<div>
<h3 class="text-gray-400 text-sm font-medium uppercase tracking-wider mb-1">Affiliate Earnings</h3>
<div class="flex items-baseline gap-1">
<span class="text-4xl font-bold text-white tracking-tight">₹850</span>
<span class="text-gray-400 font-medium text-sm">INR</span>
</div>
</div>
<div class="bg-purple-500/10 p-2 rounded-lg">
<i class="fas fa-share-nodes text-purple-500 text-xl"></i>
</div>
</div>
<div class="mt-6 flex items-center justify-between">
<div class="flex items-center gap-2 text-sm text-gray-400">
<span>Pending: ₹120</span>
</div>
<a class="text-sm text-primary hover:text-purple-400 font-medium flex items-center gap-1 transition" href="#">
View Details <i class="fas fa-chevron-right text-xs"></i>
</a>
</div>
</div>
<div class="absolute -top-10 -right-10 w-32 h-32 bg-purple-600 blur-[80px] opacity-20 group-hover:opacity-30 transition duration-500"></div>
</div>
</div>
<div class="bg-surface-light dark:bg-surface-dark rounded-2xl border border-gray-200 dark:border-gray-800 shadow-sm overflow-hidden">
<div class="p-6 border-b border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row justify-between items-center gap-4">
<h2 class="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
<i class="fas fa-history text-gray-400"></i>
Transaction History
</h2>
<div class="flex items-center gap-3">
<select class="bg-gray-50 dark:bg-surface-dark-2 border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 text-sm rounded-lg focus:ring-primary focus:border-primary block p-2">
<option>All Transactions</option>
<option>Rewards</option>
<option>Withdrawals</option>
<option>Affiliate</option>
</select>
<button class="p-2 text-gray-400 hover:text-white transition">
<i class="fas fa-download"></i>
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm text-left">
<thead class="text-xs text-gray-500 dark:text-gray-400 uppercase bg-gray-50 dark:bg-surface-dark-2/50 border-b border-gray-200 dark:border-gray-800">
<tr>
<th class="px-6 py-4 font-semibold" scope="col">Transaction ID</th>
<th class="px-6 py-4 font-semibold" scope="col">Description</th>
<th class="px-6 py-4 font-semibold" scope="col">Date</th>
<th class="px-6 py-4 font-semibold" scope="col">Amount</th>
<th class="px-6 py-4 font-semibold" scope="col">Status</th>
<th class="px-6 py-4 font-semibold text-right" scope="col">Action</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-800">
<tr class="bg-white dark:bg-surface-dark hover:bg-gray-50 dark:hover:bg-surface-dark-2/30 transition-colors">
<td class="px-6 py-4 font-mono text-gray-500">#TRX-89201</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center text-yellow-600 dark:text-yellow-400">
<i class="fas fa-trophy text-xs"></i>
</div>
<div>
<p class="font-medium text-gray-900 dark:text-white">Won "Cosmic Trivia Blast"</p>
<p class="text-xs text-gray-500">Rank #4 Reward</p>
</div>
</div>
</td>
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">Oct 24, 2023</td>
<td class="px-6 py-4 font-bold text-green-600 dark:text-green-400">+500 QP</td>
<td class="px-6 py-4">
<span class="bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs px-2.5 py-1 rounded-full font-medium border border-green-200 dark:border-green-800">
Success
</span>
</td>
<td class="px-6 py-4 text-right">
<button class="text-gray-400 hover:text-primary transition">
<i class="fas fa-ellipsis-v"></i>
</button>
</td>
</tr>
<tr class="bg-white dark:bg-surface-dark hover:bg-gray-50 dark:hover:bg-surface-dark-2/30 transition-colors">
<td class="px-6 py-4 font-mono text-gray-500">#TRX-89155</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400">
<i class="fas fa-gamepad text-xs"></i>
</div>
<div>
<p class="font-medium text-gray-900 dark:text-white">Entry Fee "Speed Run"</p>
<p class="text-xs text-gray-500">Ticket Purchase</p>
</div>
</div>
</td>
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">Oct 23, 2023</td>
<td class="px-6 py-4 font-bold text-gray-600 dark:text-gray-400">-50 QP</td>
<td class="px-6 py-4">
<span class="bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs px-2.5 py-1 rounded-full font-medium border border-green-200 dark:border-green-800">
Success
</span>
</td>
<td class="px-6 py-4 text-right">
<button class="text-gray-400 hover:text-primary transition">
<i class="fas fa-ellipsis-v"></i>
</button>
</td>
</tr>
<tr class="bg-white dark:bg-surface-dark hover:bg-gray-50 dark:hover:bg-surface-dark-2/30 transition-colors">
<td class="px-6 py-4 font-mono text-gray-500">#WDR-22011</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center text-red-600 dark:text-red-400">
<i class="fas fa-arrow-down text-xs"></i>
</div>
<div>
<p class="font-medium text-gray-900 dark:text-white">Bank Withdrawal</p>
<p class="text-xs text-gray-500">To HDFC Bank **** 4492</p>
</div>
</div>
</td>
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">Oct 21, 2023</td>
<td class="px-6 py-4 font-bold text-gray-900 dark:text-white">₹2,000</td>
<td class="px-6 py-4">
<span class="bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 text-xs px-2.5 py-1 rounded-full font-medium border border-yellow-200 dark:border-yellow-800">
Pending
</span>
</td>
<td class="px-6 py-4 text-right">
<button class="text-gray-400 hover:text-primary transition">
<i class="fas fa-ellipsis-v"></i>
</button>
</td>
</tr>
<tr class="bg-white dark:bg-surface-dark hover:bg-gray-50 dark:hover:bg-surface-dark-2/30 transition-colors">
<td class="px-6 py-4 font-mono text-gray-500">#AFF-00342</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400">
<i class="fas fa-user-plus text-xs"></i>
</div>
<div>
<p class="font-medium text-gray-900 dark:text-white">Referral Bonus</p>
<p class="text-xs text-gray-500">User: @CyberNinja joined</p>
</div>
</div>
</td>
<td class="px-6 py-4 text-gray-500 dark:text-gray-400">Oct 20, 2023</td>
<td class="px-6 py-4 font-bold text-green-600 dark:text-green-400">+₹50</td>
<td class="px-6 py-4">
<span class="bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs px-2.5 py-1 rounded-full font-medium border border-green-200 dark:border-green-800">
Success
</span>
</td>
<td class="px-6 py-4 text-right">
<button class="text-gray-400 hover:text-primary transition">
<i class="fas fa-ellipsis-v"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="px-6 py-4 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between">
<span class="text-sm text-gray-500 dark:text-gray-400">
Showing <span class="font-semibold text-gray-900 dark:text-white">1-4</span> of <span class="font-semibold text-gray-900 dark:text-white">24</span> transactions
</span>
<div class="flex gap-2">
<button class="px-3 py-1 rounded border border-gray-200 dark:border-gray-700 text-gray-500 hover:bg-gray-100 dark:hover:bg-surface-dark-2 transition text-sm disabled:opacity-50" disabled="">Previous</button>
<button class="px-3 py-1 rounded border border-gray-200 dark:border-gray-700 text-gray-500 hover:bg-gray-100 dark:hover:bg-surface-dark-2 transition text-sm">Next</button>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-white dark:bg-[#050505] py-8 border-t border-gray-200 dark:border-gray-900 mt-auto">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-2 text-gray-400">
<i class="fas fa-gamepad"></i>
<span class="text-sm font-medium">QuizQuest © 2023</span>
</div>
<div class="flex gap-8 text-sm text-gray-500 dark:text-gray-400">
<a class="hover:text-primary transition" href="#">Privacy</a>
<a class="hover:text-primary transition" href="#">Terms</a>
<a class="hover:text-primary transition" href="#">Support</a>
</div>
</div>
</footer>
</body></html>