<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest - Affiliate Dashboard</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&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",
"surface-dark-3": "#2D2A42",
},
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%);
}
</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="sticky top-0 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 shadow-lg shadow-purple-900/20">
<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-primary dark:text-white font-semibold transition border-b-2 border-primary" href="#">Affiliates</a>
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-white font-medium transition" href="#">Wallet</a>
<a class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-white font-medium transition" href="#">Settings</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-3 pl-4 border-l border-gray-200 dark:border-gray-700">
<div class="text-right hidden sm:block">
<p class="text-sm font-bold text-gray-900 dark:text-white">Alex Gamer</p>
<p class="text-xs text-green-500 font-medium">Lvl 12 Elite</p>
</div>
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 p-0.5">
<div class="w-full h-full bg-surface-dark rounded-full flex items-center justify-center overflow-hidden">
<span class="material-symbols-outlined text-white">person</span>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<main class="flex-grow py-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
<div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 bg-primary opacity-10 blur-[128px] rounded-full pointer-events-none"></div>
<div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 bg-blue-600 opacity-10 blur-[128px] rounded-full pointer-events-none"></div>
<div class="max-w-6xl mx-auto relative z-10">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 gap-4">
<div>
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Affiliate Dashboard</h1>
<p class="text-gray-500 dark:text-gray-400">Track your referrals and earn passive income from every quest.</p>
</div>
<button class="bg-surface-light dark:bg-surface-dark-2 text-gray-900 dark:text-white px-5 py-2.5 rounded-xl font-medium border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-surface-dark-3 transition flex items-center gap-2 shadow-sm">
<span class="material-symbols-outlined text-sm">download</span>
Export Report
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
<div class="md:col-span-3 lg:col-span-1 bg-gradient-to-br from-primary to-purple-800 rounded-2xl p-6 text-white shadow-xl shadow-purple-900/20 relative overflow-hidden group">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<i class="fas fa-share-alt text-8xl transform rotate-12"></i>
</div>
<div class="relative z-10">
<h3 class="text-purple-100 font-medium mb-1 flex items-center gap-2">
<span class="material-symbols-outlined text-lg">link</span> Your Referral Link
</h3>
<p class="text-xs text-purple-200 mb-6">Share this link to earn 10% of every entry fee.</p>
<div class="bg-white/10 backdrop-blur-md rounded-xl p-1.5 flex items-center border border-white/20">
<input class="bg-transparent border-none text-white text-sm w-full focus:ring-0 px-3 truncate font-mono" readonly="" type="text" value="quizquest.io/r/alexgamer"/>
<button class="bg-white text-primary p-2 rounded-lg hover:bg-gray-100 transition shadow-lg active:scale-95" title="Copy Link">
<span class="material-symbols-outlined text-sm font-bold">content_copy</span>
</button>
</div>
<div class="mt-6 flex gap-3">
<button class="flex-1 bg-white/10 hover:bg-white/20 py-2 rounded-lg text-sm font-medium transition border border-white/10 flex items-center justify-center gap-2">
<i class="fab fa-twitter"></i> Tweet
</button>
<button class="flex-1 bg-white/10 hover:bg-white/20 py-2 rounded-lg text-sm font-medium transition border border-white/10 flex items-center justify-center gap-2">
<i class="fab fa-whatsapp"></i> Share
</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-surface-dark rounded-2xl p-6 border border-gray-200 dark:border-gray-800 shadow-sm flex flex-col justify-between">
<div class="flex justify-between items-start mb-4">
<div class="p-3 bg-blue-100 dark:bg-blue-900/30 rounded-xl text-blue-600 dark:text-blue-400">
<span class="material-symbols-outlined">group_add</span>
</div>
<span class="text-xs font-semibold text-green-500 bg-green-100 dark:bg-green-900/30 px-2 py-1 rounded-full flex items-center gap-1">
<span class="material-symbols-outlined text-xs">trending_up</span> +12%
</span>
</div>
<div>
<p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Total Referrals</p>
<h3 class="text-3xl font-bold text-gray-900 dark:text-white mt-1">1,248</h3>
<p class="text-xs text-gray-400 mt-2">Active users in last 30 days</p>
</div>
</div>
<div class="bg-white dark:bg-surface-dark rounded-2xl p-6 border border-gray-200 dark:border-gray-800 shadow-sm flex flex-col justify-between">
<div class="flex justify-between items-start mb-4">
<div class="p-3 bg-accent/20 rounded-xl text-accent">
<span class="material-symbols-outlined">paid</span>
</div>
<span class="text-xs font-semibold text-green-500 bg-green-100 dark:bg-green-900/30 px-2 py-1 rounded-full flex items-center gap-1">
<span class="material-symbols-outlined text-xs">trending_up</span> +8%
</span>
</div>
<div>
<p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Passive Earnings</p>
<h3 class="text-3xl font-bold text-gray-900 dark:text-white mt-1">₹12,450</h3>
<p class="text-xs text-gray-400 mt-2">Available for withdrawal</p>
</div>
</div>
</div>
<div class="bg-white 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 sm:items-center justify-between gap-4">
<h2 class="text-xl font-bold text-gray-900 dark:text-white">Referred Users</h2>
<div class="flex items-center gap-3">
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-2.5 text-gray-400 text-lg">search</span>
<input class="pl-10 pr-4 py-2 bg-gray-50 dark:bg-surface-dark-2 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:ring-primary focus:border-primary text-gray-900 dark:text-white w-full sm:w-64" placeholder="Search user..." type="text"/>
</div>
<button class="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-surface-dark-2 rounded-lg border border-gray-200 dark:border-gray-700 transition">
<span class="material-symbols-outlined">filter_list</span>
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-gray-50 dark:bg-surface-dark-2 text-xs uppercase text-gray-500 dark:text-gray-400 font-semibold tracking-wider">
<th class="px-6 py-4 rounded-tl-lg">User</th>
<th class="px-6 py-4">Date Joined</th>
<th class="px-6 py-4">Status</th>
<th class="px-6 py-4">Subscription</th>
<th class="px-6 py-4 text-right rounded-tr-lg">Earnings</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-800">
<tr class="group hover:bg-gray-50 dark:hover:bg-surface-dark-2/50 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 font-bold text-sm">
JD
</div>
<div>
<p class="font-medium text-gray-900 dark:text-white">John Doe</p>
<p class="text-xs text-gray-500">@johndoe_99</p>
</div>
</div>
</td>
<td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
Oct 24, 2023
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span> Active
</span>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-yellow-500 text-lg">star</span>
<span class="text-sm text-gray-700 dark:text-gray-300">Premium Pass</span>
</div>
</td>
<td class="px-6 py-4 text-right font-medium text-gray-900 dark:text-white">
₹450.00
</td>
</tr>
<tr class="group hover:bg-gray-50 dark:hover:bg-surface-dark-2/50 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400 font-bold text-sm">
SM
</div>
<div>
<p class="font-medium text-gray-900 dark:text-white">Sarah Miller</p>
<p class="text-xs text-gray-500">@sarah_plays</p>
</div>
</div>
</td>
<td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
Oct 22, 2023
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span> Active
</span>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-gray-400 text-lg">workspace_premium</span>
<span class="text-sm text-gray-700 dark:text-gray-300">Free Tier</span>
</div>
</td>
<td class="px-6 py-4 text-right font-medium text-gray-900 dark:text-white">
₹0.00
</td>
</tr>
<tr class="group hover:bg-gray-50 dark:hover:bg-surface-dark-2/50 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-pink-100 dark:bg-pink-900/30 flex items-center justify-center text-pink-600 dark:text-pink-400 font-bold text-sm">
MR
</div>
<div>
<p class="font-medium text-gray-900 dark:text-white">Mike Ross</p>
<p class="text-xs text-gray-500">@mike_r</p>
</div>
</div>
</td>
<td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
Oct 20, 2023
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400">
<span class="w-1.5 h-1.5 rounded-full bg-gray-400"></span> Inactive
</span>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-yellow-500 text-lg">star</span>
<span class="text-sm text-gray-700 dark:text-gray-300">Premium Pass</span>
</div>
</td>
<td class="px-6 py-4 text-right font-medium text-gray-900 dark:text-white">
₹120.00
</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">
<p class="text-sm text-gray-500 dark:text-gray-400">Showing <span class="font-medium">1-3</span> of <span class="font-medium">248</span> results</p>
<div class="flex gap-2">
<button class="p-2 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-surface-dark-2 disabled:opacity-50 transition" disabled="">
<span class="material-symbols-outlined text-lg">chevron_left</span>
</button>
<button class="p-2 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-surface-dark-2 transition">
<span class="material-symbols-outlined text-lg">chevron_right</span>
</button>
</div>
</div>
</div>
<div class="mt-8 grid md:grid-cols-2 gap-6">
<div class="bg-surface-light dark:bg-surface-dark p-6 rounded-2xl border border-gray-200 dark:border-gray-800">
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">Invite via Email</h3>
<form class="space-y-4">
<div>
<label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1 uppercase">Email Addresses</label>
<input class="w-full bg-gray-50 dark:bg-surface-dark-2 border border-gray-200 dark:border-gray-700 rounded-xl px-4 py-3 text-sm focus:ring-primary focus:border-primary dark:text-white" placeholder="friend@example.com, gamer@test.com" type="email"/>
</div>
<button class="w-full bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-bold py-3 rounded-xl hover:opacity-90 transition" type="button">
Send Invites
</button>
</form>
</div>
<div class="bg-gradient-to-r from-indigo-900 to-purple-900 p-6 rounded-2xl border border-indigo-800 relative overflow-hidden flex flex-col justify-center">
<div class="absolute right-0 top-0 w-32 h-32 bg-purple-500 rounded-full blur-[60px] opacity-20"></div>
<div class="relative z-10">
<h3 class="text-xl font-bold text-white mb-2">Boost your earnings!</h3>
<p class="text-indigo-200 text-sm mb-6 max-w-xs">Share your unique link on social media and get a <span class="text-yellow-400 font-bold">5% bonus</span> this week.</p>
<div class="flex gap-3">
<button class="w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition backdrop-blur-sm">
<i class="fab fa-facebook-f"></i>
</button>
<button class="w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition backdrop-blur-sm">
<i class="fab fa-discord"></i>
</button>
<button class="w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition backdrop-blur-sm">
<i class="fab fa-telegram-plane"></i>
</button>
<button class="w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition backdrop-blur-sm">
<i class="fab fa-instagram"></i>
</button>
</div>
</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>