<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Vendor Affiliate Dashboard</title>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&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://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#5b13ec",
"background-light": "#f6f6f8",
"background-dark": "#131118",
"surface-dark": "#1d1924",
"surface-highlight": "#2e2839",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
},
},
}
</script>
<style>
body {
font-family: 'Spline Sans', sans-serif;
}
/* Custom scrollbar for table container if needed */
.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-slate-900 dark:text-slate-100 antialiased overflow-hidden">
<div class="flex h-screen w-full overflow-hidden">
<!-- Sidebar -->
<aside class="hidden w-72 flex-col justify-between border-r border-surface-highlight bg-background-dark p-6 lg:flex">
<div class="flex flex-col gap-6">
<!-- Logo Area -->
<div class="flex items-center gap-3 px-2">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-white shadow-[0_0_15px_rgba(91,19,236,0.5)]">
<span class="material-symbols-outlined">stadia_controller</span>
</div>
<div>
<h1 class="text-lg font-bold leading-tight text-white">QuizPortal</h1>
<p class="text-xs font-medium text-slate-400">Vendor Panel</p>
</div>
</div>
<!-- Navigation -->
<nav class="flex flex-col gap-2">
<a class="flex items-center gap-3 rounded-full bg-surface-highlight px-4 py-3 text-white shadow-sm transition-colors hover:bg-surface-highlight/80" href="#">
<span class="material-symbols-outlined text-[20px] text-primary">dashboard</span>
<span class="text-sm font-semibold">Dashboard</span>
</a>
<a class="flex items-center gap-3 rounded-full px-4 py-3 text-slate-400 transition-colors hover:bg-surface-highlight hover:text-white" href="#">
<span class="material-symbols-outlined text-[20px]">account_balance_wallet</span>
<span class="text-sm font-medium">Payouts</span>
</a>
<a class="flex items-center gap-3 rounded-full px-4 py-3 text-slate-400 transition-colors hover:bg-surface-highlight hover:text-white" href="#">
<span class="material-symbols-outlined text-[20px]">campaign</span>
<span class="text-sm font-medium">Marketing Assets</span>
</a>
<a class="flex items-center gap-3 rounded-full px-4 py-3 text-slate-400 transition-colors hover:bg-surface-highlight hover:text-white" href="#">
<span class="material-symbols-outlined text-[20px]">settings</span>
<span class="text-sm font-medium">Settings</span>
</a>
<a class="flex items-center gap-3 rounded-full px-4 py-3 text-slate-400 transition-colors hover:bg-surface-highlight hover:text-white" href="#">
<span class="material-symbols-outlined text-[20px]">help</span>
<span class="text-sm font-medium">Support</span>
</a>
</nav>
</div>
<!-- Bottom Actions -->
<div class="flex flex-col gap-2">
<a class="flex items-center gap-3 rounded-full px-4 py-3 text-slate-400 transition-colors hover:bg-surface-highlight hover:text-red-400" href="#">
<span class="material-symbols-outlined text-[20px]">logout</span>
<span class="text-sm font-medium">Log Out</span>
</a>
</div>
</aside>
<!-- Main Content -->
<main class="flex flex-1 flex-col overflow-y-auto bg-background-dark">
<!-- Header -->
<header class="sticky top-0 z-20 flex w-full items-center justify-between border-b border-surface-highlight bg-background-dark/80 px-6 py-4 backdrop-blur-md lg:px-10">
<div class="flex items-center gap-4 lg:hidden">
<button class="text-white">
<span class="material-symbols-outlined">menu</span>
</button>
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-white">
<span class="material-symbols-outlined text-sm">stadia_controller</span>
</div>
</div>
<div class="hidden lg:block">
<h2 class="text-xl font-bold text-white">Overview</h2>
</div>
<div class="flex items-center gap-4">
<button class="flex h-10 w-10 items-center justify-center rounded-full bg-surface-highlight text-white transition-colors hover:bg-surface-highlight/80">
<span class="material-symbols-outlined text-[20px]">notifications</span>
</button>
<div class="flex h-10 w-10 overflow-hidden rounded-full border-2 border-surface-highlight">
<img alt="Vendor Profile Picture" class="h-full w-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzViL4lc0jczPZTmPDaDclgDRrxY-CoEIhF3LrBitMVCMLnouJJA--yIsKtsNPGtyE4LuMlV4PivDdBDmhCWNkAPTwNpqZHpr1VrBXiZOIQLMV0tqcbN5rlhT8PNPhuitdvbjjJ__KSKmqFbL6C2lgx2_ML9AOeX7zoh0HyaInm8BK6ktedzykYbw63mLopcHpNBH3DhZY7GvRiCGp3eF8zx4jWMXr9ac6huaPlWFvpnlBfg6kuKr1_BJAeuC6YEIKGKuRym9DR1lN"/>
</div>
</div>
</header>
<div class="flex flex-col gap-8 p-6 lg:p-10">
<!-- Welcome & Rank Section -->
<section class="grid grid-cols-1 gap-6 xl:grid-cols-3">
<!-- Welcome Text -->
<div class="flex flex-col justify-center xl:col-span-2">
<h1 class="text-3xl font-bold leading-tight text-white md:text-4xl">Welcome back, Alex! 👋</h1>
<p class="mt-2 text-slate-400">Track your gaming referrals and boost your earnings. You're doing great!</p>
<!-- Referral Link Component -->
<div class="mt-6 flex flex-col gap-2 sm:flex-row sm:items-center">
<div class="relative flex flex-1 items-center rounded-full bg-surface-highlight p-1 pr-1">
<div class="absolute left-4 flex items-center text-slate-400">
<span class="material-symbols-outlined text-[20px]">link</span>
</div>
<input class="h-10 w-full bg-transparent pl-12 pr-4 text-sm font-medium text-white placeholder-slate-500 focus:outline-none focus:ring-0 border-none" readonly="" type="text" value="https://quizportal.com/ref/alex-gamer-99"/>
<button class="flex h-10 items-center justify-center gap-2 rounded-full bg-primary px-5 text-sm font-bold text-white transition-all hover:bg-primary/90 hover:shadow-[0_0_10px_rgba(91,19,236,0.4)]">
<span>Copy</span>
</button>
</div>
<span class="hidden text-xs text-slate-500 sm:block">Share this link to earn XP & Cash!</span>
</div>
</div>
<!-- Rank Card -->
<div class="relative overflow-hidden rounded-xl bg-surface-highlight p-6 xl:col-span-1">
<!-- Decorative bg -->
<div class="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-primary/20 blur-3xl"></div>
<div class="relative z-10 flex flex-col gap-4">
<div class="flex items-start justify-between">
<div>
<p class="text-xs font-semibold uppercase tracking-wider text-primary">Current Rank</p>
<h3 class="text-2xl font-black text-white">Gold Tier</h3>
</div>
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-yellow-500/20 text-yellow-500">
<span class="material-symbols-outlined">emoji_events</span>
</div>
</div>
<div class="flex flex-col gap-1">
<div class="flex justify-between text-xs font-medium">
<span class="text-white">Progress to Platinum</span>
<span class="text-slate-400">425 / 500 XP</span>
</div>
<div class="h-3 w-full overflow-hidden rounded-full bg-background-dark">
<div class="h-full w-[85%] rounded-full bg-gradient-to-r from-primary to-purple-400"></div>
</div>
<p class="text-xs text-slate-400 mt-1">Only <strong>75 XP</strong> needed to unlock 5% higher commissions!</p>
</div>
</div>
</div>
</section>
<!-- Metrics Grid -->
<section class="grid grid-cols-1 gap-4 sm:grid-cols-3">
<!-- Metric 1 -->
<div class="group flex flex-col justify-between rounded-xl bg-surface-highlight p-6 transition-transform hover:-translate-y-1">
<div class="mb-4 flex items-center gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-surface-dark text-slate-300 group-hover:bg-primary group-hover:text-white transition-colors">
<span class="material-symbols-outlined">group_add</span>
</div>
<span class="text-sm font-medium text-slate-300">Total Referrals</span>
</div>
<div>
<p class="text-3xl font-bold text-white tracking-tight">1,240</p>
<div class="mt-1 flex items-center gap-1 text-xs font-medium text-emerald-400">
<span class="material-symbols-outlined text-[16px]">trending_up</span>
<span>+12% this month</span>
</div>
</div>
</div>
<!-- Metric 2 -->
<div class="group flex flex-col justify-between rounded-xl bg-surface-highlight p-6 transition-transform hover:-translate-y-1">
<div class="mb-4 flex items-center gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-surface-dark text-slate-300 group-hover:bg-primary group-hover:text-white transition-colors">
<span class="material-symbols-outlined">stars</span>
</div>
<span class="text-sm font-medium text-slate-300">Active Subscriptions</span>
</div>
<div>
<p class="text-3xl font-bold text-white tracking-tight">850</p>
<div class="mt-1 flex items-center gap-1 text-xs font-medium text-emerald-400">
<span class="material-symbols-outlined text-[16px]">trending_up</span>
<span>+5% this month</span>
</div>
</div>
</div>
<!-- Metric 3 -->
<div class="group flex flex-col justify-between rounded-xl bg-gradient-to-br from-surface-highlight to-surface-highlight/50 p-6 border border-primary/20 transition-transform hover:-translate-y-1 shadow-[0_0_20px_rgba(91,19,236,0.15)]">
<div class="mb-4 flex items-center gap-3">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-surface-dark text-primary group-hover:bg-primary group-hover:text-white transition-colors">
<span class="material-symbols-outlined">payments</span>
</div>
<span class="text-sm font-medium text-slate-300">Total Commission</span>
</div>
<div>
<p class="text-3xl font-bold text-white tracking-tight drop-shadow-[0_0_10px_rgba(91,19,236,0.5)]">$4,250.00</p>
<div class="mt-1 flex items-center gap-1 text-xs font-medium text-emerald-400">
<span class="material-symbols-outlined text-[16px]">trending_up</span>
<span>+18% this month</span>
</div>
</div>
</div>
</section>
<!-- Recent Registrations Table -->
<section class="flex flex-col gap-4 rounded-xl bg-surface-highlight p-6">
<div class="flex flex-wrap items-center justify-between gap-4">
<div>
<h3 class="text-lg font-bold text-white">Recent Registrations</h3>
<p class="text-sm text-slate-400">Overview of your latest referred users.</p>
</div>
<button class="flex items-center gap-2 rounded-full border border-slate-600 bg-transparent px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-700">
<span class="material-symbols-outlined text-[18px]">filter_list</span>
Filter
</button>
</div>
<div class="overflow-x-auto">
<table class="w-full min-w-[700px] table-auto text-left">
<thead>
<tr class="border-b border-surface-dark text-xs font-medium uppercase tracking-wider text-slate-400">
<th class="px-4 py-4">User</th>
<th class="px-4 py-4">Date</th>
<th class="px-4 py-4">Plan</th>
<th class="px-4 py-4">Commission</th>
<th class="px-4 py-4">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-surface-dark text-sm">
<tr class="group hover:bg-surface-dark/50 transition-colors">
<td class="px-4 py-4">
<div class="flex items-center gap-3">
<div class="h-8 w-8 overflow-hidden rounded-full bg-slate-700">
<img alt="User Avatar" class="h-full w-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAspyNd1K0WlTL9T2hBBlxZ_V1PLtG9Bl1gn7jESEVPOzg5iAZZR9_tBf2nY89WyNBbYoqNnr7wgL97jmY0CwSmQxIRyitYqI13_YqsHvv3-cVzAXJbZTpJ7YG9VH5jtMJDh0kzmqdbqJDJvACnpl2qDhQiNwaaeuyCuf6GAJjQB109IkdWrh3c_XcfSrD4XHb5FWGPFhWqIV2TCJxFd1g_8KsisFsTd4S55IyvuQWMSPv42uFB7B3eH8BvDB71HoZYLy23kFifLdWl"/>
</div>
<span class="font-semibold text-white">Sarah Jenkins</span>
</div>
</td>
<td class="px-4 py-4 text-slate-300">Oct 24, 2023</td>
<td class="px-4 py-4">
<span class="rounded-full bg-blue-500/10 px-2.5 py-1 text-xs font-medium text-blue-400">Pro Gamer</span>
</td>
<td class="px-4 py-4 font-medium text-white">$12.50</td>
<td class="px-4 py-4">
<span class="flex w-fit items-center gap-1.5 rounded-full bg-yellow-500/10 px-2.5 py-1 text-xs font-medium text-yellow-400">
<span class="h-1.5 w-1.5 rounded-full bg-yellow-400"></span>
Pending
</span>
</td>
</tr>
<tr class="group hover:bg-surface-dark/50 transition-colors">
<td class="px-4 py-4">
<div class="flex items-center gap-3">
<div class="h-8 w-8 overflow-hidden rounded-full bg-slate-700">
<img alt="User Avatar" class="h-full w-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB6RuLCmWb95hgO5Is3hiMS0_FVI_JLOq3mJAUXYg7uKBbIPBTmaoF9WxMBSqqQt1cHoRoJZvrY_BVIZIMURAhdyK3rtci_Be7NXoI67-fYV-BXCAZbz8OChqnwnixiAWA6hhV9SaY_wiFaU-hEmkJ5Vrk7ve6y2qCC-ldXdD66bX0P0EMbeTgrg1rHVDexU_orguvgpPp2saemcwl9E3GDtoVAskruFuVhKbnSbqsG1soXQW6rubBXx5qEJx9b1NXaOJA9AvrF3voZ"/>
</div>
<span class="font-semibold text-white">Michael Chen</span>
</div>
</td>
<td class="px-4 py-4 text-slate-300">Oct 23, 2023</td>
<td class="px-4 py-4">
<span class="rounded-full bg-purple-500/10 px-2.5 py-1 text-xs font-medium text-purple-400">Elite Squad</span>
</td>
<td class="px-4 py-4 font-medium text-white">$25.00</td>
<td class="px-4 py-4">
<span class="flex w-fit items-center gap-1.5 rounded-full bg-emerald-500/10 px-2.5 py-1 text-xs font-medium text-emerald-400">
<span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
Paid
</span>
</td>
</tr>
<tr class="group hover:bg-surface-dark/50 transition-colors">
<td class="px-4 py-4">
<div class="flex items-center gap-3">
<div class="h-8 w-8 overflow-hidden rounded-full bg-slate-700">
<img alt="User Avatar" class="h-full w-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB4BvJeSkFEj5nLJuhlyXRzb7wTEAaLOnCtRiqE94WD36FRVEKBCDFLyVWOIPVSt3Ev85PNh-Y8jNk-6RgPQjLsE4QFzz0744_biTKt5smk1tSDtuhHxj9OJJqeEaJAn_Pxv5de_ipngAatw1o89PbZqS3p-raYQi4mzkZp1ubYCALYdTl1MrZ5o7wHUuujeOzm_dSnAGJ6zNJV-YUoox2G7THWRLAEsN49znJscTyiWCbUAJLt0KpeneJvqebNPT57eYO55h38JhJX"/>
</div>
<span class="font-semibold text-white">Jessica Wong</span>
</div>
</td>
<td class="px-4 py-4 text-slate-300">Oct 22, 2023</td>
<td class="px-4 py-4">
<span class="rounded-full bg-slate-700 px-2.5 py-1 text-xs font-medium text-slate-300">Basic</span>
</td>
<td class="px-4 py-4 font-medium text-white">$5.00</td>
<td class="px-4 py-4">
<span class="flex w-fit items-center gap-1.5 rounded-full bg-emerald-500/10 px-2.5 py-1 text-xs font-medium text-emerald-400">
<span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
Paid
</span>
</td>
</tr>
<tr class="group hover:bg-surface-dark/50 transition-colors">
<td class="px-4 py-4">
<div class="flex items-center gap-3">
<div class="h-8 w-8 overflow-hidden rounded-full bg-slate-700">
<img alt="User Avatar" class="h-full w-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCRgALt99ALcnM5iBoXJ8j6gF3yYDTVxb91gQ-0mJ4crIuGJHBbI_nWB9L1Y__1vaI2poB4uEa82j3Wxj-nYdNZA8_z2AttOU_fpOnOAPvKd9zgsZP-zf5gmihsl33FqzzSLDBuui0UzGkNHodXn-oGJezBwFDUBadcsJ4wxjYm6aeUNbZvTTZK0BEIWy4PTZ-uJe3r8EuT-xNhmV6WFnf5uP5xnO6ReliaFKywrvgZcayQsR5JI-S9gc2k3cJskb8kUqgdxWu5XrD9"/>
</div>
<span class="font-semibold text-white">David Miller</span>
</div>
</td>
<td class="px-4 py-4 text-slate-300">Oct 21, 2023</td>
<td class="px-4 py-4">
<span class="rounded-full bg-blue-500/10 px-2.5 py-1 text-xs font-medium text-blue-400">Pro Gamer</span>
</td>
<td class="px-4 py-4 font-medium text-white">$12.50</td>
<td class="px-4 py-4">
<span class="flex w-fit items-center gap-1.5 rounded-full bg-emerald-500/10 px-2.5 py-1 text-xs font-medium text-emerald-400">
<span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
Paid
</span>
</td>
</tr>
<tr class="group hover:bg-surface-dark/50 transition-colors">
<td class="px-4 py-4">
<div class="flex items-center gap-3">
<div class="h-8 w-8 overflow-hidden rounded-full bg-slate-700">
<img alt="User Avatar" class="h-full w-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAGICbDtuAOyPXGcTlkrOYqYvjPcy4J2GVnFdpILTxS49ufE8g3c5FzYTNUfDbebG7yC2vohf7lkCq_6aw60O1qQV1VJYkJtU2qiXmTqekUZFq5NmtiIohRJ0Ach1bWouse2aPLTwwvX7DtavBnfkw9FfkuWJraxX7XsUIAydE7gQoCM6dsZQNcXzeK6flzwZv2cuIJBBhuybtnpAC2rs2QNWeUBqyO_9nkfDddtjSLhnRy3giJ80TL8dXr7rhdZu24gi4ZRPJqSPzo"/>
</div>
<span class="font-semibold text-white">Kevin Hart</span>
</div>
</td>
<td class="px-4 py-4 text-slate-300">Oct 20, 2023</td>
<td class="px-4 py-4">
<span class="rounded-full bg-purple-500/10 px-2.5 py-1 text-xs font-medium text-purple-400">Elite Squad</span>
</td>
<td class="px-4 py-4 font-medium text-white">$25.00</td>
<td class="px-4 py-4">
<span class="flex w-fit items-center gap-1.5 rounded-full bg-emerald-500/10 px-2.5 py-1 text-xs font-medium text-emerald-400">
<span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
Paid
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-2 flex items-center justify-center">
<button class="text-sm font-medium text-primary hover:text-primary/80">View All Registrations</button>
</div>
</section>
<!-- Bottom Promotion Banner (Additional Gamification Element) -->
<section class="relative overflow-hidden rounded-xl bg-gradient-to-r from-primary to-purple-600 p-8 shadow-lg">
<div class="absolute inset-0 z-0">
<!-- Abstract Pattern -->
<div class="absolute right-0 top-0 h-64 w-64 translate-x-10 translate-y-[-50%] rounded-full bg-white opacity-10 blur-3xl"></div>
<div class="absolute bottom-0 left-0 h-40 w-40 translate-x-[-20%] translate-y-[20%] rounded-full bg-black opacity-20 blur-2xl"></div>
</div>
<div class="relative z-10 flex flex-col items-start justify-between gap-6 md:flex-row md:items-center">
<div class="max-w-xl">
<div class="flex items-center gap-2 text-white/80">
<span class="material-symbols-outlined text-sm">rocket_launch</span>
<span class="text-xs font-bold uppercase tracking-widest">Seasonal Challenge</span>
</div>
<h3 class="mt-2 text-2xl font-bold text-white">Refer 10 more users this week to unlock the "Super Vendor" Badge!</h3>
<p class="mt-2 text-white/80">Super Vendors get priority payouts and exclusive marketing assets.</p>
</div>
<button class="flex items-center gap-2 whitespace-nowrap rounded-full bg-white px-6 py-3 text-sm font-bold text-primary shadow-lg transition-transform hover:scale-105">
Check Challenge Details
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
</button>
</div>
</section>
</div>
</main>
</div>
</body></html>