<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Vendor Commission Tracking Panel - 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/icon?family=Material+Icons" rel="stylesheet"/>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: "#6d28d9", // Purple from the CTA button
secondary: "#facc15", // Yellow accent
"background-light": "#f3f4f6",
"background-dark": "#0f0c18", // Deep dark background like the image
"card-dark": "#181524", // Slightly lighter dark for cards
"card-hover": "#201c30",
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
display: ['Inter', 'sans-serif'],
},
borderRadius: {
DEFAULT: "0.5rem",
"xl": "1rem",
"2xl": "1.5rem",
},
},
},
};
</script>
<style>
body {
font-family: 'Inter', sans-serif;
}
.glass-panel {
background: rgba(24, 21, 36, 0.7);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.gradient-text {
background: linear-gradient(to right, #ffffff, #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.glow-purple {
box-shadow: 0 0 40px -10px rgba(109, 40, 217, 0.3);
}::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #0f0c18;
}
::-webkit-scrollbar-thumb {
background: #332d4a;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #4c436e;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-gray-900 dark:text-gray-100 min-h-screen transition-colors duration-200 dark">
<nav class="w-full glass-panel sticky top-0 z-50 border-b 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 items-center gap-3">
<div class="bg-primary p-1.5 rounded-lg">
<span class="material-icons text-white">sports_esports</span>
</div>
<span class="font-bold text-xl tracking-tight text-white">QuizQuest</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors" href="#">Dashboard</a>
<a class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors" href="#">Campaigns</a>
<a class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors" href="#">Payouts</a>
<a class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors" href="#">Settings</a>
</div>
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2">
<div class="h-8 w-8 rounded-full bg-gradient-to-tr from-primary to-purple-400 flex items-center justify-center text-xs font-bold text-white border border-white/10">
JD
</div>
<span class="text-sm font-medium text-gray-300 hidden sm:block">John Doe</span>
</div>
</div>
</div>
</div>
</nav>
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div class="mb-10 flex flex-col md:flex-row md:items-end justify-between gap-6">
<div>
<div class="flex items-center gap-2 mb-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-500/10 text-yellow-400 border border-yellow-500/20">
<span class="w-1.5 h-1.5 bg-yellow-400 rounded-full mr-1.5 animate-pulse"></span>
VENDOR PORTAL
</span>
</div>
<h1 class="text-4xl md:text-5xl font-bold text-white mb-2">
Track Your <span class="text-secondary">Empire</span>
</h1>
<p class="text-gray-400 text-lg max-w-2xl">Monitor your referrals, track commissions, and optimize your earnings in real-time.</p>
</div>
<div class="bg-card-dark border border-white/10 rounded-2xl p-5 w-full md:w-auto min-w-[350px] shadow-lg glow-purple relative overflow-hidden group">
<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">
<p class="text-sm text-gray-400 mb-2 font-medium">Your Unique Referral Link</p>
<div class="flex items-center gap-2 bg-black/40 rounded-lg p-1 pr-2 border border-white/5">
<div class="bg-white/5 px-3 py-2 rounded text-gray-300 text-sm font-mono truncate max-w-[200px] select-all">
quizquest.io/r/johndoe88
</div>
<button class="ml-auto bg-primary hover:bg-primary/90 text-white p-2 rounded-md transition-all flex items-center justify-center group-hover:scale-105 active:scale-95">
<span class="material-icons text-sm">content_copy</span>
</button>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
<div class="bg-card-dark border border-white/5 rounded-2xl p-6 relative overflow-hidden group hover:border-primary/30 transition-all duration-300">
<div class="absolute -right-6 -top-6 w-24 h-24 bg-blue-500/10 rounded-full blur-xl group-hover:bg-blue-500/20 transition-all"></div>
<div class="flex items-start justify-between mb-4">
<div class="p-3 bg-blue-500/10 rounded-xl">
<span class="material-icons text-blue-400">groups</span>
</div>
<span class="text-green-400 text-sm font-medium flex items-center bg-green-400/10 px-2 py-1 rounded-full border border-green-400/20">
<span class="material-icons text-xs mr-1">trending_up</span> +12%
</span>
</div>
<h3 class="text-gray-400 text-sm font-medium mb-1">Total Referrals</h3>
<p class="text-3xl font-bold text-white">1,248</p>
</div>
<div class="bg-card-dark border border-white/5 rounded-2xl p-6 relative overflow-hidden group hover:border-primary/30 transition-all duration-300">
<div class="absolute -right-6 -top-6 w-24 h-24 bg-primary/10 rounded-full blur-xl group-hover:bg-primary/20 transition-all"></div>
<div class="flex items-start justify-between mb-4">
<div class="p-3 bg-primary/10 rounded-xl">
<span class="material-icons text-primary">payments</span>
</div>
<span class="text-green-400 text-sm font-medium flex items-center bg-green-400/10 px-2 py-1 rounded-full border border-green-400/20">
<span class="material-icons text-xs mr-1">trending_up</span> +24%
</span>
</div>
<h3 class="text-gray-400 text-sm font-medium mb-1">Commission Earned</h3>
<p class="text-3xl font-bold text-white">₹45,290</p>
</div>
<div class="bg-card-dark border border-white/5 rounded-2xl p-6 relative overflow-hidden group hover:border-primary/30 transition-all duration-300">
<div class="absolute -right-6 -top-6 w-24 h-24 bg-yellow-500/10 rounded-full blur-xl group-hover:bg-yellow-500/20 transition-all"></div>
<div class="flex items-start justify-between mb-4">
<div class="p-3 bg-yellow-500/10 rounded-xl">
<span class="material-icons text-yellow-400">verified</span>
</div>
<span class="text-gray-500 text-sm font-medium flex items-center bg-white/5 px-2 py-1 rounded-full border border-white/5">
Active Now
</span>
</div>
<h3 class="text-gray-400 text-sm font-medium mb-1">Active Subscriptions</h3>
<p class="text-3xl font-bold text-white">856</p>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2 bg-card-dark border border-white/5 rounded-2xl overflow-hidden flex flex-col">
<div class="p-6 border-b border-white/5 flex items-center justify-between">
<h2 class="text-xl font-bold text-white">Recent Registrations</h2>
<button class="text-sm text-primary hover:text-white transition-colors">View All</button>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-white/5 text-gray-400 text-xs uppercase tracking-wider">
<th class="p-4 font-semibold">User</th>
<th class="p-4 font-semibold">Plan</th>
<th class="p-4 font-semibold">Date</th>
<th class="p-4 font-semibold text-right">Commission</th>
<th class="p-4 font-semibold text-center">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-white/5 text-sm">
<tr class="hover:bg-white/5 transition-colors group">
<td class="p-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-xs font-bold text-white">
MK
</div>
<div>
<p class="font-medium text-white">Mike K.</p>
<p class="text-xs text-gray-500">UID: #8829</p>
</div>
</div>
</td>
<td class="p-4 text-gray-300">Standard Pass</td>
<td class="p-4 text-gray-400">Oct 24, 2023</td>
<td class="p-4 text-right font-medium text-secondary">₹250</td>
<td class="p-4 text-center">
<span class="inline-block w-2 h-2 bg-green-500 rounded-full shadow-[0_0_8px_rgba(34,197,94,0.6)]"></span>
</td>
</tr>
<tr class="hover:bg-white/5 transition-colors group">
<td class="p-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center text-xs font-bold text-white">
SJ
</div>
<div>
<p class="font-medium text-white">Sarah J.</p>
<p class="text-xs text-gray-500">UID: #9012</p>
</div>
</div>
</td>
<td class="p-4 text-gray-300">Premium Quest</td>
<td class="p-4 text-gray-400">Oct 23, 2023</td>
<td class="p-4 text-right font-medium text-secondary">₹500</td>
<td class="p-4 text-center">
<span class="inline-block w-2 h-2 bg-green-500 rounded-full shadow-[0_0_8px_rgba(34,197,94,0.6)]"></span>
</td>
</tr>
<tr class="hover:bg-white/5 transition-colors group">
<td class="p-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-teal-400 to-emerald-600 flex items-center justify-center text-xs font-bold text-white">
AT
</div>
<div>
<p class="font-medium text-white">Alex T.</p>
<p class="text-xs text-gray-500">UID: #7734</p>
</div>
</div>
</td>
<td class="p-4 text-gray-300">Standard Pass</td>
<td class="p-4 text-gray-400">Oct 23, 2023</td>
<td class="p-4 text-right font-medium text-secondary">₹250</td>
<td class="p-4 text-center">
<span class="inline-block w-2 h-2 bg-yellow-500 rounded-full shadow-[0_0_8px_rgba(234,179,8,0.6)]" title="Pending"></span>
</td>
</tr>
<tr class="hover:bg-white/5 transition-colors group">
<td class="p-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-blue-600 flex items-center justify-center text-xs font-bold text-white">
DR
</div>
<div>
<p class="font-medium text-white">David R.</p>
<p class="text-xs text-gray-500">UID: #6521</p>
</div>
</div>
</td>
<td class="p-4 text-gray-300">Mega League</td>
<td class="p-4 text-gray-400">Oct 22, 2023</td>
<td class="p-4 text-right font-medium text-secondary">₹1,200</td>
<td class="p-4 text-center">
<span class="inline-block w-2 h-2 bg-green-500 rounded-full shadow-[0_0_8px_rgba(34,197,94,0.6)]"></span>
</td>
</tr>
<tr class="hover:bg-white/5 transition-colors group">
<td class="p-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-orange-400 to-red-500 flex items-center justify-center text-xs font-bold text-white">
PL
</div>
<div>
<p class="font-medium text-white">Priya L.</p>
<p class="text-xs text-gray-500">UID: #5590</p>
</div>
</div>
</td>
<td class="p-4 text-gray-300">Standard Pass</td>
<td class="p-4 text-gray-400">Oct 21, 2023</td>
<td class="p-4 text-right font-medium text-secondary">₹250</td>
<td class="p-4 text-center">
<span class="inline-block w-2 h-2 bg-green-500 rounded-full shadow-[0_0_8px_rgba(34,197,94,0.6)]"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="bg-card-dark border border-white/5 rounded-2xl p-6 flex flex-col relative overflow-hidden">
<div class="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full blur-3xl -mr-20 -mt-20 pointer-events-none"></div>
<h2 class="text-xl font-bold text-white mb-6 relative z-10">Commission Breakdown</h2>
<div class="flex-1 flex flex-col justify-center items-center relative z-10 mb-6">
<div class="relative w-48 h-48 rounded-full bg-gradient-to-br from-primary via-purple-600 to-blue-600 p-4 shadow-[0_0_30px_rgba(109,40,217,0.4)]">
<div class="absolute inset-0 rounded-full bg-card-dark m-6 z-10 flex flex-col items-center justify-center">
<span class="text-gray-400 text-xs uppercase tracking-wider">Total</span>
<span class="text-2xl font-bold text-white">₹45k</span>
</div>
<div class="absolute inset-0 rounded-full border-[24px] border-transparent border-t-secondary border-r-secondary/80 transform rotate-45 opacity-90"></div>
</div>
</div>
<div class="space-y-4 relative z-10">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-primary"></span>
<span class="text-gray-300 text-sm">Standard Referrals</span>
</div>
<span class="text-white font-medium">65%</span>
</div>
<div class="w-full bg-white/5 rounded-full h-1.5">
<div class="bg-primary h-1.5 rounded-full" style="width: 65%"></div>
</div>
<div class="flex items-center justify-between mt-2">
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-secondary"></span>
<span class="text-gray-300 text-sm">Bonus Tier</span>
</div>
<span class="text-white font-medium">25%</span>
</div>
<div class="w-full bg-white/5 rounded-full h-1.5">
<div class="bg-secondary h-1.5 rounded-full" style="width: 25%"></div>
</div>
<div class="flex items-center justify-between mt-2">
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-blue-500"></span>
<span class="text-gray-300 text-sm">League Passes</span>
</div>
<span class="text-white font-medium">10%</span>
</div>
<div class="w-full bg-white/5 rounded-full h-1.5">
<div class="bg-blue-500 h-1.5 rounded-full" style="width: 10%"></div>
</div>
</div>
<button class="mt-8 w-full py-3 rounded-xl bg-white/5 border border-white/10 hover:bg-white/10 text-white font-medium transition-all text-sm flex items-center justify-center gap-2 group">
<span class="material-icons text-gray-400 group-hover:text-white transition-colors text-lg">download</span>
Download Monthly Report
</button>
</div>
</div>
<div class="mt-10 relative rounded-2xl overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-primary to-purple-900 opacity-90"></div>
<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4xKSIvPjwvc3ZnPg==')] opacity-30"></div>
<div class="relative z-10 p-8 md:p-10 flex flex-col md:flex-row items-center justify-between gap-6">
<div class="max-w-xl">
<h3 class="text-2xl font-bold text-white mb-2">Boost your earnings with the Super Affiliate League!</h3>
<p class="text-purple-200">Top 10 affiliates this month win an extra ₹50,000 cash bonus. You are currently ranked #42.</p>
</div>
<button class="px-6 py-3 bg-white text-primary font-bold rounded-xl shadow-lg hover:shadow-xl hover:scale-105 transition-all whitespace-nowrap">
View Leaderboard
</button>
</div>
</div>
</main>
<footer class="border-t border-white/5 py-8 mt-10 bg-background-dark/50">
<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-4">
<div class="flex items-center gap-2 opacity-50">
<span class="material-icons text-white text-lg">sports_esports</span>
<span class="text-gray-400 text-sm">QuizQuest © 2023</span>
</div>
<div class="flex gap-6 text-sm text-gray-500">
<a class="hover:text-white transition-colors" href="#">Vendor Terms</a>
<a class="hover:text-white transition-colors" href="#">Privacy</a>
<a class="hover:text-white transition-colors" href="#">Support</a>
</div>
</div>
</footer>
</body></html>