<!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 - QuizQuest</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;700;900&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": "#6366f1",
"accent": "#facc15",
"background-dark": "#0a0a0c",
"surface-dark": "#16161e",
"surface-highlight": "#1f1f2b",
"neon-purple": "#a855f7",
},
fontFamily: {
"sans": ["Inter", "sans-serif"],
"display": ["Orbitron", "sans-serif"]
},
borderRadius: {
"DEFAULT": "0.75rem",
"lg": "1.25rem",
"xl": "2rem",
"full": "9999px"
},
},
},
}
</script>
<style type="text/tailwindcss">
:root {
--primary-glow: rgba(99, 102, 241, 0.3);
--neon-glow: rgba(168, 85, 247, 0.4);
}
body {
font-family: 'Inter', sans-serif;
background-color: #0a0a0c;
}
.font-orbitron {
font-family: 'Orbitron', sans-serif;
}
.glass-panel {
background: rgba(22, 22, 30, 0.8);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.neon-border {
border: 1px solid rgba(168, 85, 247, 0.3);
box-shadow: 0 0 15px rgba(168, 85, 247, 0.1);
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-background-dark text-slate-100 antialiased overflow-hidden">
<div class="flex h-screen w-full overflow-hidden">
<aside class="hidden w-72 flex-col justify-between border-r border-white/5 bg-background-dark/50 p-6 lg:flex">
<div class="flex flex-col gap-8">
<div class="flex items-center gap-3 px-2">
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-white shadow-[0_0_20px_rgba(99,102,241,0.4)]">
<span class="material-symbols-outlined font-bold">stadia_controller</span>
</div>
<div>
<h1 class="text-xl font-black font-display tracking-tight text-white uppercase">QuizQuest</h1>
<p class="text-[10px] font-bold tracking-widest text-primary uppercase">Affiliate Pro</p>
</div>
</div>
<nav class="flex flex-col gap-1.5">
<a class="flex items-center gap-3 rounded-xl bg-white/5 px-4 py-3 text-white border border-white/10 shadow-lg" 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-xl px-4 py-3 text-slate-400 transition-all hover:bg-white/5 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-xl px-4 py-3 text-slate-400 transition-all hover:bg-white/5 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-xl px-4 py-3 text-slate-400 transition-all hover:bg-white/5 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-xl px-4 py-3 text-slate-400 transition-all hover:bg-white/5 hover:text-white" href="#">
<span class="material-symbols-outlined text-[20px]">help</span>
<span class="text-sm font-medium">Support</span>
</a>
</nav>
</div>
<div class="flex flex-col gap-2">
<a class="flex items-center gap-3 rounded-xl px-4 py-3 text-slate-400 transition-colors hover:bg-red-500/10 hover:text-red-400" href="#">
<span class="material-symbols-outlined text-[20px]">logout</span>
<span class="text-sm font-medium">Sign Out</span>
</a>
</div>
</aside>
<main class="flex flex-1 flex-col overflow-y-auto bg-[#0a0a0c]">
<header class="sticky top-0 z-20 flex w-full items-center justify-between border-b border-white/5 bg-background-dark/60 px-6 py-4 backdrop-blur-xl 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-lg bg-primary text-white">
<span class="material-symbols-outlined text-sm">stadia_controller</span>
</div>
</div>
<div class="hidden lg:block">
<h2 class="text-lg font-bold font-display tracking-wide text-white">VENDOR DASHBOARD</h2>
</div>
<div class="flex items-center gap-5">
<button class="flex h-10 w-10 items-center justify-center rounded-xl bg-white/5 text-slate-400 transition-colors hover:text-white hover:bg-white/10">
<span class="material-symbols-outlined text-[22px]">notifications</span>
</button>
<div class="h-6 w-px bg-white/10"></div>
<div class="flex items-center gap-3">
<div class="text-right hidden sm:block">
<p class="text-sm font-bold text-white">Alex Gaming</p>
<p class="text-[10px] font-bold text-primary uppercase tracking-tighter leading-none">Pro Tier</p>
</div>
<div class="flex h-10 w-10 overflow-hidden rounded-xl border border-white/20">
<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>
</div>
</header>
<div class="flex flex-col gap-8 p-6 lg:p-10 max-w-7xl mx-auto w-full">
<section class="grid grid-cols-1 gap-8 xl:grid-cols-3">
<div class="flex flex-col justify-center xl:col-span-2">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 w-fit mb-4">
<span class="h-2 w-2 rounded-full bg-primary animate-pulse"></span>
<span class="text-[10px] font-bold text-primary uppercase tracking-widest">Active Vendor</span>
</div>
<h1 class="text-4xl font-black leading-tight text-white md:text-5xl font-display">
Level Up Your <span class="text-primary italic">Fortune</span>.
</h1>
<p class="mt-4 text-slate-400 text-lg max-w-xl">
Track your referrals and dominate the leaderboard. Your journey to Platinum begins here.
</p>
<div class="mt-8 flex flex-col gap-3">
<label class="text-xs font-bold text-slate-500 uppercase tracking-widest">Your Unique Referral Link</label>
<div class="flex flex-col gap-3 sm:flex-row sm:items-center">
<div class="relative flex flex-1 items-center rounded-2xl bg-white/5 border border-white/10 p-1.5 pr-1.5 focus-within:border-primary/50 transition-all">
<div class="absolute left-4 flex items-center text-primary">
<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://quizquest.io/ref/alex-gamer-99"/>
<button class="flex h-10 items-center justify-center gap-2 rounded-xl bg-primary px-6 text-sm font-bold text-white transition-all hover:bg-indigo-500 hover:shadow-[0_0_20px_rgba(99,102,241,0.4)]">
<span>COPY</span>
</button>
</div>
</div>
</div>
</div>
<div class="relative overflow-hidden rounded-2xl glass-panel p-8 border border-white/5 flex flex-col justify-between">
<div class="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-primary/20 blur-[80px]"></div>
<div class="relative z-10">
<div class="flex items-start justify-between">
<div>
<p class="text-[10px] font-black uppercase tracking-[0.2em] text-primary">Current Rank</p>
<h3 class="text-3xl font-black text-white font-display mt-1">GOLD TIER</h3>
</div>
<div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-accent/10 border border-accent/20 text-accent">
<span class="material-symbols-outlined text-3xl font-bold">emoji_events</span>
</div>
</div>
<div class="mt-8 flex flex-col gap-2">
<div class="flex justify-between text-[11px] font-bold uppercase tracking-wider">
<span class="text-slate-400">Next: Platinum</span>
<span class="text-white">425 / 500 XP</span>
</div>
<div class="h-4 w-full overflow-hidden rounded-full bg-black/40 border border-white/5">
<div class="h-full w-[85%] rounded-full bg-gradient-to-r from-primary to-neon-purple shadow-[0_0_15px_rgba(168,85,247,0.3)]"></div>
</div>
<p class="text-xs text-slate-400 mt-2 font-medium">
Only <span class="text-white font-bold">75 XP</span> to unlock <span class="text-primary font-bold">+5%</span> commission!
</p>
</div>
</div>
<button class="mt-6 w-full py-3 rounded-xl bg-white/5 border border-white/10 text-xs font-bold uppercase tracking-widest text-white hover:bg-white/10 transition-all">View Perks</button>
</div>
</section>
<section class="grid grid-cols-1 gap-6 sm:grid-cols-3">
<div class="group flex flex-col justify-between rounded-2xl glass-panel p-6 border border-white/5 hover:border-white/20 transition-all">
<div class="flex items-center justify-between mb-6">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-white/5 text-slate-400 group-hover:text-primary transition-colors">
<span class="material-symbols-outlined text-2xl">group_add</span>
</div>
<div class="px-2 py-1 rounded-md bg-emerald-500/10 text-emerald-400 text-[10px] font-bold">
+12%
</div>
</div>
<div>
<p class="text-[10px] font-black uppercase tracking-widest text-slate-500">Total Referrals</p>
<p class="text-4xl font-black text-white font-display mt-1">1,240</p>
</div>
</div>
<div class="group flex flex-col justify-between rounded-2xl glass-panel p-6 border border-white/5 hover:border-white/20 transition-all">
<div class="flex items-center justify-between mb-6">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-white/5 text-slate-400 group-hover:text-primary transition-colors">
<span class="material-symbols-outlined text-2xl">stars</span>
</div>
<div class="px-2 py-1 rounded-md bg-emerald-500/10 text-emerald-400 text-[10px] font-bold">
+5%
</div>
</div>
<div>
<p class="text-[10px] font-black uppercase tracking-widest text-slate-500">Active Subs</p>
<p class="text-4xl font-black text-white font-display mt-1">850</p>
</div>
</div>
<div class="group flex flex-col justify-between rounded-2xl bg-gradient-to-br from-primary/10 to-transparent p-6 border border-primary/30 shadow-[0_0_30px_rgba(99,102,241,0.1)]">
<div class="flex items-center justify-between mb-6">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-primary text-white shadow-[0_0_15px_rgba(99,102,241,0.4)]">
<span class="material-symbols-outlined text-2xl font-bold">payments</span>
</div>
<div class="px-2 py-1 rounded-md bg-emerald-500/10 text-emerald-400 text-[10px] font-bold">
+18%
</div>
</div>
<div>
<p class="text-[10px] font-black uppercase tracking-widest text-primary/80">Total Commission</p>
<p class="text-4xl font-black text-white font-display mt-1">$4,250<span class="text-xl">.00</span></p>
</div>
</div>
</section>
<section class="flex flex-col gap-6 rounded-2xl glass-panel p-8 border border-white/5">
<div class="flex flex-wrap items-center justify-between gap-4">
<div>
<h3 class="text-xl font-black text-white font-display">RECENT REGISTRATIONS</h3>
<p class="text-sm text-slate-400 mt-1">Latest status of your gaming army.</p>
</div>
<button class="flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-white hover:bg-white/10 transition-all">
<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-white/5 text-[10px] font-black uppercase tracking-[0.2em] text-slate-500">
<th class="px-4 py-5">User</th>
<th class="px-4 py-5">Joined Date</th>
<th class="px-4 py-5">Active Plan</th>
<th class="px-4 py-5">Commission</th>
<th class="px-4 py-5">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-white/5 text-sm">
<tr class="group hover:bg-white/[0.02] transition-colors">
<td class="px-4 py-5">
<div class="flex items-center gap-3">
<div class="h-9 w-9 overflow-hidden rounded-xl border border-white/10">
<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-bold text-white tracking-tight">Sarah Jenkins</span>
</div>
</td>
<td class="px-4 py-5 text-slate-400 font-medium">Oct 24, 2023</td>
<td class="px-4 py-5">
<span class="rounded-lg bg-primary/10 px-3 py-1.5 text-[10px] font-black uppercase tracking-widest text-primary border border-primary/20">Pro Gamer</span>
</td>
<td class="px-4 py-5 font-bold text-white">$12.50</td>
<td class="px-4 py-5">
<span class="inline-flex items-center gap-1.5 rounded-lg bg-accent/10 px-3 py-1.5 text-[10px] font-black uppercase tracking-widest text-accent border border-accent/20">
<span class="h-1.5 w-1.5 rounded-full bg-accent animate-pulse"></span>
Pending
</span>
</td>
</tr>
<tr class="group hover:bg-white/[0.02] transition-colors">
<td class="px-4 py-5">
<div class="flex items-center gap-3">
<div class="h-9 w-9 overflow-hidden rounded-xl border border-white/10">
<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-bold text-white tracking-tight">Michael Chen</span>
</div>
</td>
<td class="px-4 py-5 text-slate-400 font-medium">Oct 23, 2023</td>
<td class="px-4 py-5">
<span class="rounded-lg bg-neon-purple/10 px-3 py-1.5 text-[10px] font-black uppercase tracking-widest text-neon-purple border border-neon-purple/20">Elite Squad</span>
</td>
<td class="px-4 py-5 font-bold text-white">$25.00</td>
<td class="px-4 py-5">
<span class="inline-flex items-center gap-1.5 rounded-lg bg-emerald-500/10 px-3 py-1.5 text-[10px] font-black uppercase tracking-widest text-emerald-400 border border-emerald-500/20">
<span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
Paid
</span>
</td>
</tr>
<tr class="group hover:bg-white/[0.02] transition-colors">
<td class="px-4 py-5">
<div class="flex items-center gap-3">
<div class="h-9 w-9 overflow-hidden rounded-xl border border-white/10">
<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-bold text-white tracking-tight">Jessica Wong</span>
</div>
</td>
<td class="px-4 py-5 text-slate-400 font-medium">Oct 22, 2023</td>
<td class="px-4 py-5">
<span class="rounded-lg bg-white/5 px-3 py-1.5 text-[10px] font-black uppercase tracking-widest text-slate-400 border border-white/10">Basic</span>
</td>
<td class="px-4 py-5 font-bold text-white">$5.00</td>
<td class="px-4 py-5">
<span class="inline-flex items-center gap-1.5 rounded-lg bg-emerald-500/10 px-3 py-1.5 text-[10px] font-black uppercase tracking-widest text-emerald-400 border border-emerald-500/20">
<span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
Paid
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="pt-4 border-t border-white/5 flex items-center justify-center">
<button class="text-xs font-black uppercase tracking-[0.2em] text-primary hover:text-white transition-colors">Load More History</button>
</div>
</section>
<section class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-primary to-neon-purple p-10 shadow-2xl">
<div class="absolute inset-0 pointer-events-none">
<div class="absolute right-0 top-0 h-[300px] w-[300px] translate-x-1/4 -translate-y-1/4 rounded-full bg-white opacity-10 blur-[80px]"></div>
<div class="absolute left-0 bottom-0 h-[200px] w-[200px] -translate-x-1/4 translate-y-1/4 rounded-full bg-black opacity-20 blur-[60px]"></div>
</div>
<div class="relative z-10 flex flex-col items-center justify-between gap-8 md:flex-row">
<div class="max-w-2xl text-center md:text-left">
<div class="inline-flex items-center gap-2 text-white/90 bg-white/10 px-4 py-1.5 rounded-full border border-white/20 mb-4">
<span class="material-symbols-outlined text-sm font-bold">rocket_launch</span>
<span class="text-[10px] font-black uppercase tracking-widest">Seasonal Challenge</span>
</div>
<h3 class="text-3xl font-black text-white font-display leading-tight">Refer 10 more users this week to unlock the <span class="text-accent underline underline-offset-4 decoration-accent/50">"Super Vendor"</span> Badge!</h3>
<p class="mt-4 text-white/70 font-medium">Super Vendors gain priority 24h payouts and exclusive branded assets for social media.</p>
</div>
<button class="flex items-center gap-3 whitespace-nowrap rounded-xl bg-white px-8 py-4 text-xs font-black uppercase tracking-widest text-primary shadow-xl transition-all hover:scale-105 active:scale-95">
Claim Challenge
<span class="material-symbols-outlined font-bold text-[18px]">arrow_forward</span>
</button>
</div>
</section>
</div>
<footer class="mt-auto border-t border-white/5 bg-background-dark/80 px-10 py-8">
<div class="flex flex-col md:flex-row justify-between items-center gap-6 max-w-7xl mx-auto w-full">
<div class="flex items-center gap-2">
<div class="h-6 w-6 rounded bg-primary flex items-center justify-center">
<span class="material-symbols-outlined text-xs text-white">stadia_controller</span>
</div>
<p class="text-xs font-bold text-slate-500 uppercase tracking-widest">QuizQuest © 2024</p>
</div>
<div class="flex gap-8">
<a class="text-[10px] font-black uppercase tracking-widest text-slate-500 hover:text-white transition-colors" href="#">Privacy</a>
<a class="text-[10px] font-black uppercase tracking-widest text-slate-500 hover:text-white transition-colors" href="#">Terms</a>
<a class="text-[10px] font-black uppercase tracking-widest text-slate-500 hover:text-white transition-colors" href="#">API Status</a>
<a class="text-[10px] font-black uppercase tracking-widest text-slate-500 hover:text-white transition-colors" href="#">Support</a>
</div>
</div>
</footer>
</main>
</div>
</body></html>