<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Vendor Affiliate Dashboard - QuizQuest</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:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#6B21F3", // Vivid purple from the button
"primary-hover": "#561AC6",
"accent": "#FFD700", // Gold from the 'Fortune' text
"background-light": "#F3F4F6", // Light grey for light mode
"background-dark": "#0A0A0E", // Deep almost black for dark mode
"card-dark": "#13131F", // Slightly lighter dark for cards
"card-border": "#28283C",
},
fontFamily: {
display: ["Inter", "sans-serif"],
body: ["Inter", "sans-serif"],
},
borderRadius: {
DEFAULT: "0.75rem",
'xl': "1rem",
'2xl': "1.5rem",
},
},
},
};
</script>
<style>
body {
font-family: 'Inter', sans-serif;
}
.gradient-text {
background: linear-gradient(to right, #ffffff, #a5a6f6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.glass-panel {
background: rgba(19, 19, 31, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
}::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #0A0A0E;
}
::-webkit-scrollbar-thumb {
background: #28283C;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #3F3F5A;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-gray-800 dark:text-gray-200 transition-colors duration-200 min-h-screen flex flex-col font-body">
<nav class="sticky top-0 z-50 w-full glass-panel dark:border-b dark:border-white/5 border-b border-gray-200 bg-white/80 dark:bg-[#0A0A0E]/80">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-20">
<div class="flex items-center gap-3">
<div class="bg-primary p-2 rounded-xl text-white">
<span class="material-symbols-outlined">sports_esports</span>
</div>
<span class="text-xl font-bold dark:text-white tracking-tight">QuizQuest</span>
</div>
<div class="hidden md:flex space-x-8 text-sm font-medium text-gray-500 dark:text-gray-400">
<a class="text-gray-900 dark:text-white hover:text-primary transition" href="#">Dashboard</a>
<a class="hover:text-primary transition" href="#">Commissions</a>
<a class="hover:text-primary transition" href="#">Campaigns</a>
<a class="hover:text-primary transition" href="#">Settings</a>
</div>
<div class="flex items-center gap-4">
<div class="hidden sm:flex flex-col items-end mr-2">
<span class="text-sm font-semibold dark:text-white">Alex Venture</span>
<span class="text-xs text-gray-500 dark:text-gray-400">Super Affiliate</span>
</div>
<div class="h-10 w-10 rounded-full bg-gradient-to-tr from-primary to-purple-400 p-[2px]">
<img alt="Profile" class="rounded-full h-full w-full object-cover border-2 border-background-dark" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA5Cr8tf4rh5k2VVxTlyhkAyzndhANMCibiIzt2D3LcgahfwTsx8mB5SLmGe31wgkn4XD1mtsGfokaORBKg6U-kaMbQDxcqIOQPjCkDu0QYSuC-Z9X1BEkAe5Ja0sSQorZ1-6RtG9_V-VtfPiWjkcEzDJw6fmgek846sAxxYeqo7_asAfE3DuwlwsII5AeG0b4_VnTjlCUa4ICi5MWC-L2BL_7GnBqLo3Wrq7OZbCEnXSG9W-6z1xE4HAGAv7D-KRgMhG7l32ip3H-F"/>
</div>
</div>
</div>
</div>
</nav>
<main class="flex-grow p-6 lg:p-8 max-w-7xl mx-auto w-full">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
<div>
<h1 class="text-3xl font-bold dark:text-white mb-1">Affiliate Dashboard</h1>
<p class="text-gray-500 dark:text-gray-400 text-sm">Track your growth and commission earnings in real-time.</p>
</div>
<div class="flex gap-3">
<button class="px-4 py-2.5 rounded-xl border border-gray-300 dark:border-white/10 text-sm font-medium hover:bg-gray-100 dark:hover:bg-white/5 transition flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">download</span>
Export Report
</button>
<button class="px-4 py-2.5 rounded-xl bg-primary hover:bg-primary-hover text-white text-sm font-medium transition shadow-lg shadow-primary/25 flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">add</span>
Create Campaign
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-white dark:bg-card-dark rounded-2xl p-6 border border-gray-200 dark:border-white/5 shadow-sm relative overflow-hidden group">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-6xl text-primary">group_add</span>
</div>
<div class="flex justify-between items-start mb-4">
<div class="p-3 bg-purple-100 dark:bg-primary/20 rounded-xl text-primary">
<span class="material-symbols-outlined">group</span>
</div>
<span class="flex items-center text-green-500 text-sm font-semibold bg-green-500/10 px-2 py-1 rounded-lg">
<span class="material-symbols-outlined text-base mr-1">trending_up</span>
+12.5%
</span>
</div>
<div>
<h3 class="text-gray-500 dark:text-gray-400 text-sm font-medium mb-1">Total Referrals</h3>
<p class="text-3xl font-bold text-gray-900 dark:text-white">1,248</p>
</div>
</div>
<div class="bg-white dark:bg-card-dark rounded-2xl p-6 border border-gray-200 dark:border-white/5 shadow-sm relative overflow-hidden group">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-6xl text-blue-500">subscriptions</span>
</div>
<div class="flex justify-between items-start mb-4">
<div class="p-3 bg-blue-100 dark:bg-blue-500/20 rounded-xl text-blue-600 dark:text-blue-400">
<span class="material-symbols-outlined">stars</span>
</div>
<span class="flex items-center text-green-500 text-sm font-semibold bg-green-500/10 px-2 py-1 rounded-lg">
<span class="material-symbols-outlined text-base mr-1">trending_up</span>
+8.2%
</span>
</div>
<div>
<h3 class="text-gray-500 dark:text-gray-400 text-sm font-medium mb-1">Active Subscriptions</h3>
<p class="text-3xl font-bold text-gray-900 dark:text-white">856</p>
</div>
</div>
<div class="bg-white dark:bg-card-dark rounded-2xl p-6 border border-gray-200 dark:border-white/5 shadow-sm relative overflow-hidden group">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-6xl text-accent">account_balance_wallet</span>
</div>
<div class="flex justify-between items-start mb-4">
<div class="p-3 bg-yellow-100 dark:bg-accent/20 rounded-xl text-yellow-700 dark:text-accent">
<span class="material-symbols-outlined">payments</span>
</div>
<button class="text-xs font-medium text-primary hover:text-white hover:bg-primary border border-primary/30 px-3 py-1.5 rounded-lg transition">
Withdraw
</button>
</div>
<div>
<h3 class="text-gray-500 dark:text-gray-400 text-sm font-medium mb-1">Commission Balance</h3>
<p class="text-3xl font-bold text-gray-900 dark:text-white">₹45,200</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
<div class="lg:col-span-2 bg-white dark:bg-card-dark rounded-2xl p-6 border border-gray-200 dark:border-white/5 shadow-sm">
<div class="flex justify-between items-center mb-6">
<h3 class="font-bold text-lg dark:text-white">Commission Earnings</h3>
<select class="bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 text-gray-700 dark:text-gray-300 text-sm rounded-lg focus:ring-primary focus:border-primary block p-2">
<option>Last 7 Days</option>
<option selected="">Last 30 Days</option>
<option>This Year</option>
</select>
</div>
<div class="relative h-72 w-full">
<canvas id="commissionChart"></canvas>
</div>
</div>
<div class="bg-gradient-to-b from-primary to-[#4a148c] rounded-2xl p-6 shadow-lg text-white relative overflow-hidden flex flex-col justify-between">
<div class="absolute top-[-50px] right-[-50px] w-32 h-32 bg-accent opacity-20 rounded-full blur-3xl"></div>
<div class="absolute bottom-[-20px] left-[-20px] w-24 h-24 bg-blue-500 opacity-20 rounded-full blur-2xl"></div>
<div>
<div class="flex items-center gap-2 mb-4">
<span class="material-symbols-outlined bg-white/20 p-2 rounded-lg">campaign</span>
<h3 class="font-bold text-lg">Referral Toolkit</h3>
</div>
<p class="text-white/80 text-sm mb-6">Share your unique link to invite friends. Earn 10% commission on every paid entry.</p>
<div class="space-y-4">
<div>
<label class="text-xs font-semibold text-white/60 uppercase tracking-wider mb-1 block">Your Unique Link</label>
<div class="flex bg-black/20 backdrop-blur-sm rounded-xl p-1 border border-white/10">
<input class="bg-transparent border-none text-white text-sm w-full focus:ring-0 px-3 py-2" readonly="" type="text" value="quizquest.io/r/alexv88"/>
<button class="bg-white text-primary hover:bg-gray-100 font-medium px-4 py-2 rounded-lg text-sm transition shadow-sm">
Copy
</button>
</div>
</div>
<div class="flex items-center gap-3">
<div class="bg-white p-2 rounded-lg">
<img alt="QR Code" class="w-16 h-16 object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCa9KO1vkQ0FuYhHzAl4h4f1WfQXFj5y_OAeAEHwoXW_oRvRtqDpUNtPoJQti2UHelGvuGyU7RX8BuxCMYoGx3qeofQJVjdnqWYRuHMU1jV57Zui11MjRZzk6cDAhoWYreuM2JXNKsWzeWRHjiW5vm60shMMPv11puolmCFSm_i4GyMHog6-EUucOWLYYnNHDMh1uTIdr3Vtle2ek2BGxo9bk5uZTSgMebK4VCEA6vk_CHRhZBk_NlQU_Ryn6kltf7G5WRAWGVG6ReV"/>
</div>
<div class="flex flex-col gap-2">
<button class="text-xs font-medium bg-white/10 hover:bg-white/20 border border-white/10 rounded-lg px-3 py-1.5 transition flex items-center gap-1">
<span class="material-symbols-outlined text-[14px]">download</span> Download QR
</button>
<button class="text-xs font-medium bg-white/10 hover:bg-white/20 border border-white/10 rounded-lg px-3 py-1.5 transition flex items-center gap-1">
<span class="material-symbols-outlined text-[14px]">share</span> Share Link
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white dark:bg-card-dark rounded-2xl border border-gray-200 dark:border-white/5 shadow-sm overflow-hidden">
<div class="p-6 border-b border-gray-200 dark:border-white/5 flex justify-between items-center">
<h3 class="font-bold text-lg dark:text-white">Recently Joined Users</h3>
<a class="text-sm text-primary hover:text-primary-hover font-medium" href="#">View All</a>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="bg-gray-50 dark:bg-white/5 text-gray-500 dark:text-gray-400 text-xs uppercase tracking-wider">
<th class="px-6 py-4 font-semibold">User</th>
<th class="px-6 py-4 font-semibold">Date Joined</th>
<th class="px-6 py-4 font-semibold">Plan</th>
<th class="px-6 py-4 font-semibold">Status</th>
<th class="px-6 py-4 font-semibold text-right">Commission</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-white/5 text-sm">
<tr class="hover:bg-gray-50 dark:hover:bg-white/5 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="h-8 w-8 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-xs">JD</div>
<div>
<p class="font-medium text-gray-900 dark:text-white">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">john@example.com</p>
</div>
</div>
</td>
<td class="px-6 py-4 text-gray-600 dark:text-gray-300">Oct 24, 2023</td>
<td class="px-6 py-4 text-gray-600 dark:text-gray-300">Standard Pass</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
Active
</span>
</td>
<td class="px-6 py-4 text-right font-medium text-gray-900 dark:text-white">+ ₹99.00</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-white/5 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="h-8 w-8 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-xs">SM</div>
<div>
<p class="font-medium text-gray-900 dark:text-white">Sarah Miller</p>
<p class="text-xs text-gray-500 dark:text-gray-400">sarah.m@test.com</p>
</div>
</div>
</td>
<td class="px-6 py-4 text-gray-600 dark:text-gray-300">Oct 23, 2023</td>
<td class="px-6 py-4 text-gray-600 dark:text-gray-300">Pro Bundle</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
Active
</span>
</td>
<td class="px-6 py-4 text-right font-medium text-gray-900 dark:text-white">+ ₹249.00</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-white/5 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="h-8 w-8 rounded-full bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center text-orange-600 dark:text-orange-400 font-bold text-xs">MW</div>
<div>
<p class="font-medium text-gray-900 dark:text-white">Mike Wilson</p>
<p class="text-xs text-gray-500 dark:text-gray-400">mike.wilson@demo.com</p>
</div>
</div>
</td>
<td class="px-6 py-4 text-gray-600 dark:text-gray-300">Oct 23, 2023</td>
<td class="px-6 py-4 text-gray-600 dark:text-gray-300">Free Trial</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
Trial
</span>
</td>
<td class="px-6 py-4 text-right font-medium text-gray-400 dark:text-gray-500">₹0.00</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-white/5 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="h-8 w-8 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-xs">EL</div>
<div>
<p class="font-medium text-gray-900 dark:text-white">Emma Lee</p>
<p class="text-xs text-gray-500 dark:text-gray-400">emma.l@mail.com</p>
</div>
</div>
</td>
<td class="px-6 py-4 text-gray-600 dark:text-gray-300">Oct 22, 2023</td>
<td class="px-6 py-4 text-gray-600 dark:text-gray-300">Standard Pass</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
Cancelled
</span>
</td>
<td class="px-6 py-4 text-right font-medium text-gray-400 dark:text-gray-500">Refunded</td>
</tr>
</tbody>
</table>
</div>
<div class="px-6 py-4 border-t border-gray-200 dark:border-white/5 flex items-center justify-between">
<span class="text-sm text-gray-500 dark:text-gray-400">Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">24</span> results</span>
<div class="flex gap-2">
<button class="px-3 py-1 text-sm border border-gray-200 dark:border-white/10 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5 disabled:opacity-50" disabled="">Previous</button>
<button class="px-3 py-1 text-sm border border-gray-200 dark:border-white/10 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5">Next</button>
</div>
</div>
</div>
</main>
<footer class="mt-auto py-8 text-center text-gray-500 dark:text-gray-600 text-sm">
<div class="flex items-center justify-center gap-2 mb-2">
<span class="material-symbols-outlined text-gray-400">sports_esports</span>
<span class="font-semibold text-gray-600 dark:text-gray-500">QuizQuest</span>
</div>
© 2023 QuizQuest. All rights reserved.
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
const ctx = document.getElementById('commissionChart').getContext('2d');
// Detect theme for chart colors
const isDark = document.documentElement.classList.contains('dark') ||
window.matchMedia('(prefers-color-scheme: dark)').matches;
const gridColor = isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)';
const textColor = isDark ? '#9CA3AF' : '#6B7280';
// Gradient fill
const gradient = ctx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(0, 'rgba(107, 33, 243, 0.5)'); // primary color with opacity
gradient.addColorStop(1, 'rgba(107, 33, 243, 0.0)');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'Earnings (₹)',
data: [1500, 2300, 1800, 3200, 2900, 4500, 3800],
borderColor: '#6B21F3', // primary color
backgroundColor: gradient,
borderWidth: 3,
pointBackgroundColor: '#6B21F3',
pointBorderColor: '#ffffff',
pointBorderWidth: 2,
pointRadius: 4,
pointHoverRadius: 6,
tension: 0.4, // Smooth curve
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
backgroundColor: isDark ? '#1F2937' : '#FFFFFF',
titleColor: isDark ? '#F3F4F6' : '#111827',
bodyColor: isDark ? '#D1D5DB' : '#4B5563',
borderColor: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)',
borderWidth: 1,
padding: 10,
displayColors: false,
callbacks: {
label: function(context) {
return '₹ ' + context.parsed.y;
}
}
}
},
scales: {
y: {
beginAtZero: true,
grid: {
color: gridColor,
borderDash: [5, 5]
},
ticks: {
color: textColor,
font: {
family: "'Inter', sans-serif",
size: 11
},
callback: function(value) {
return '₹' + value;
}
}
},
x: {
grid: {
display: false
},
ticks: {
color: textColor,
font: {
family: "'Inter', sans-serif",
size: 11
}
}
}
}
}
});
});
</script>
</body></html>