<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>QuizQuest: Affiliate & Referral Hub</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk: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"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#a413ec",
"secondary": "#FFD700",
"accent-green": "#39FF14",
"background-light": "#f7f6f8",
"background-dark": "#0a0a0a",
"surface-dark": "#1c1022",
"border-dark": "#332839",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"]
},
borderRadius: {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
backgroundImage: {
"grid-pattern": "linear-gradient(to right, #332839 1px, transparent 1px), linear-gradient(to bottom, #332839 1px, transparent 1px)",
}
},
},
}
</script>
<style>
body {
font-family: 'Space Grotesk', sans-serif;
}
.neon-glow-primary {
box-shadow: 0 0 15px rgba(164, 19, 236, 0.4);
}
.neon-glow-primary:hover {
box-shadow: 0 0 25px rgba(164, 19, 236, 0.6);
}
.neon-glow-secondary {
box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.glass-panel {
backdrop-filter: blur(12px);
background: rgba(28, 16, 34, 0.8);
}
.metallic-gold {
background: linear-gradient(135deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
}
.bg-grid {
background-size: 40px 40px;
mask-image: linear-gradient(to bottom, transparent, 10%, white, 90%, transparent);
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 min-h-screen">
<div class="relative flex h-auto min-h-screen w-full flex-col group/design-root overflow-x-hidden">
<div class="fixed inset-0 z-0 pointer-events-none opacity-20 bg-grid-pattern bg-grid"></div>
<div class="layout-container flex h-full grow flex-col z-10 relative">
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-border-dark px-10 py-4 glass-panel sticky top-0 z-50">
<div class="flex items-center gap-8">
<div class="flex items-center gap-4 text-primary">
<div class="size-8">
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M39.475 21.6262C40.358 21.4363 40.6863 21.5589 40.7581 21.5934C40.7876 21.655 40.8547 21.857 40.8082 22.3336C40.7408 23.0255 40.4502 24.0046 39.8572 25.2301C38.6799 27.6631 36.5085 30.6631 33.5858 33.5858C30.6631 36.5085 27.6632 38.6799 25.2301 39.8572C24.0046 40.4502 23.0255 40.7407 22.3336 40.8082C21.8571 40.8547 21.6551 40.7875 21.5934 40.7581C21.5589 40.6863 21.4363 40.358 21.6262 39.475C21.8562 38.4054 22.4689 36.9657 23.5038 35.2817C24.7575 33.2417 26.5497 30.9744 28.7621 28.762C30.9744 26.5497 33.2417 24.7574 35.2817 23.5037C36.9657 22.4689 38.4054 21.8562 39.475 21.6262ZM4.41189 29.2403L18.7597 43.5881C19.8813 44.7097 21.4027 44.9179 22.7217 44.7893C24.0585 44.659 25.5148 44.1631 26.9723 43.4579C29.9052 42.0387 33.2618 39.5667 36.4142 36.4142C39.5667 33.2618 42.0387 29.9052 43.4579 26.9723C44.1631 25.5148 44.659 24.0585 44.7893 22.7217C44.9179 21.4027 44.7097 19.8813 43.5881 18.7597L29.2403 4.41187C27.8527 3.02428 25.8765 3.02573 24.2861 3.36776C22.6081 3.72863 20.7334 4.58419 18.8396 5.74801C16.4978 7.18716 13.9881 9.18353 11.5858 11.5858C9.18354 13.988 7.18717 16.4978 5.74802 18.8396C4.58421 20.7334 3.72865 22.6081 3.36778 24.2861C3.02574 25.8765 3.02429 27.8527 4.41189 29.2403Z" fill="currentColor" fill-rule="evenodd"></path>
</svg>
</div>
<h2 class="text-slate-100 text-xl font-bold leading-tight tracking-tight">QuizQuest</h2>
</div>
<nav class="hidden md:flex items-center gap-6">
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-medium" href="#">Dashboard</a>
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-medium" href="#">Quizzes</a>
<a class="text-slate-400 hover:text-primary transition-colors text-sm font-medium" href="#">Leaderboard</a>
<a class="text-primary transition-colors text-sm font-bold relative" href="#">
Affiliates
<span class="absolute -bottom-6 left-0 w-full h-1 bg-primary rounded-t-full shadow-[0_0_10px_rgba(164,19,236,0.8)]"></span>
</a>
</nav>
</div>
<div class="flex flex-1 justify-end gap-6 items-center">
<div class="flex items-center gap-2 px-3 py-1 bg-surface-dark border border-border-dark rounded-full">
<span class="material-symbols-outlined text-secondary text-sm">monetization_on</span>
<span class="text-slate-200 text-sm font-mono font-bold">2,450 XP</span>
</div>
<div class="size-10 rounded-full border-2 border-primary overflow-hidden cursor-pointer hover:scale-105 transition-transform">
<img class="w-full h-full object-cover" data-alt="User profile avatar with neon purple border" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCpGqq6rSUuUL1mNwvakxxZM-Qq8evGRaW_yyBUfoHO-Kcz779tFX15o-IZhA7QKLKSZ6cArlH2x0Vrpya3iZhS8_7uaH73QeXuue4tTBw8AKDKuBB5e1gcoBXuqAlX1AAoKjmYixsTKji5vAE6xnU_XMw2oqlB33w0RZ3NFjNl5lp2nyPJc-eqzrRwpPEK-qzR6CE3p4xCfo7yP3uoEOyOUUDbZyLIG8lAmmKWci72p2QPJGScoWA616f00p707coG0dCyYumOu4VZ"/>
</div>
</div>
</header>
<main class="max-w-[1200px] mx-auto w-full p-8 space-y-12">
<section class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
<div class="lg:col-span-7 space-y-6">
<div class="inline-flex items-center gap-2 px-3 py-1 bg-primary/20 text-primary border border-primary/30 rounded-full text-xs font-bold uppercase tracking-widest animate-pulse">
<span class="material-symbols-outlined text-sm">stars</span>
Level 5 Affiliate
</div>
<h1 class="text-5xl font-black text-slate-100 tracking-tighter leading-tight">
Recruit Allies. <br/>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-purple-400">Earn Legendary Loot.</span>
</h1>
<p class="text-slate-400 text-lg max-w-xl">
Share your unique quantum code. For every ally that completes their first quiz, you earn <strong>500 XP</strong> and a chance at the weekly jackpot.
</p>
<div class="bg-surface-dark border border-border-dark p-6 rounded-2xl shadow-2xl relative overflow-hidden group">
<div class="absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>
<label class="text-xs text-slate-500 font-mono uppercase tracking-widest mb-2 block">Your Unique Referral Link</label>
<div class="flex flex-col sm:flex-row gap-3">
<div class="relative flex-grow">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-primary text-xl">link</span>
<input class="w-full bg-background-dark/80 border-border-dark rounded-lg pl-10 pr-4 py-3 text-slate-100 font-mono text-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all" readonly="" value="https://quizquest.gg/r/CYBER-NINJA-99"/>
</div>
<button class="px-6 py-3 bg-primary text-white font-bold rounded-lg neon-glow-primary hover:brightness-110 active:scale-95 transition-all flex items-center justify-center gap-2 whitespace-nowrap">
<span class="material-symbols-outlined">content_copy</span>
COPY LINK
</button>
</div>
</div>
</div>
<div class="lg:col-span-5 flex flex-col justify-center h-full">
<div class="bg-surface-dark/50 border border-border-dark p-8 rounded-2xl backdrop-blur-sm">
<h3 class="text-xl font-bold text-white mb-6 flex items-center gap-2">
<span class="material-symbols-outlined text-secondary">share</span>
Instant Transmission
</h3>
<div class="grid grid-cols-1 gap-4">
<button class="w-full py-3 px-4 bg-[#25D366]/10 border border-[#25D366]/30 hover:bg-[#25D366]/20 text-[#25D366] rounded-xl flex items-center justify-center gap-3 transition-all group">
<span class="font-bold text-lg">WhatsApp</span>
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">send</span>
</button>
<button class="w-full py-3 px-4 bg-[#0088cc]/10 border border-[#0088cc]/30 hover:bg-[#0088cc]/20 text-[#0088cc] rounded-xl flex items-center justify-center gap-3 transition-all group">
<span class="font-bold text-lg">Telegram</span>
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">send</span>
</button>
<button class="w-full py-3 px-4 bg-white/5 border border-white/10 hover:bg-white/10 text-slate-200 rounded-xl flex items-center justify-center gap-3 transition-all group">
<span class="font-bold text-lg">X / Twitter</span>
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">send</span>
</button>
</div>
</div>
</div>
</section>
<section class="space-y-6">
<div class="flex items-center justify-between">
<h2 class="text-2xl font-bold flex items-center gap-3 text-white">
<span class="material-symbols-outlined text-primary">filter_alt</span>
Earnings Funnel
</h2>
<span class="text-sm text-slate-500 font-mono">UPDATED: JUST NOW</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-surface-dark border-b-4 border-primary p-6 rounded-t-xl rounded-b-sm shadow-lg relative group">
<div class="absolute top-4 right-4 p-2 bg-primary/10 rounded-lg text-primary">
<span class="material-symbols-outlined">group_add</span>
</div>
<p class="text-slate-400 text-sm font-medium uppercase tracking-wider mb-2">Total Clicks</p>
<h3 class="text-4xl font-black text-white group-hover:scale-105 transition-transform origin-left">1,248</h3>
<div class="mt-4 w-full bg-background-dark h-1.5 rounded-full overflow-hidden">
<div class="bg-primary h-full w-full"></div>
</div>
<p class="mt-2 text-xs text-primary font-mono">+12% this week</p>
</div>
<div class="bg-surface-dark border-b-4 border-purple-400 p-6 rounded-t-xl rounded-b-sm shadow-lg relative group">
<div class="absolute top-4 right-4 p-2 bg-purple-400/10 rounded-lg text-purple-400">
<span class="material-symbols-outlined">person_play</span>
</div>
<p class="text-slate-400 text-sm font-medium uppercase tracking-wider mb-2">Active Recruits</p>
<h3 class="text-4xl font-black text-white group-hover:scale-105 transition-transform origin-left">86</h3>
<div class="mt-4 w-full bg-background-dark h-1.5 rounded-full overflow-hidden">
<div class="bg-purple-400 h-full w-[45%]"></div>
</div>
<p class="mt-2 text-xs text-purple-400 font-mono">6.8% Conversion Rate</p>
</div>
<div class="bg-surface-dark border-b-4 border-secondary p-6 rounded-t-xl rounded-b-sm shadow-lg relative group">
<div class="absolute top-4 right-4 p-2 bg-secondary/10 rounded-lg text-secondary">
<span class="material-symbols-outlined">payments</span>
</div>
<p class="text-slate-400 text-sm font-medium uppercase tracking-wider mb-2">Points Earned</p>
<h3 class="text-4xl font-black text-secondary group-hover:scale-105 transition-transform origin-left">42,500</h3>
<div class="mt-4 w-full bg-background-dark h-1.5 rounded-full overflow-hidden">
<div class="bg-secondary h-full w-[88%]"></div>
</div>
<p class="mt-2 text-xs text-secondary font-mono">Ready to redeem</p>
</div>
</div>
</section>
<section class="space-y-6">
<h2 class="text-2xl font-bold flex items-center gap-3 text-white">
<span class="material-symbols-outlined text-primary">table_rows</span>
Recently Joined Allies
</h2>
<div class="bg-surface-dark/50 border border-border-dark rounded-xl overflow-hidden backdrop-blur-sm">
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-white/5 border-b border-border-dark text-slate-400 text-xs uppercase tracking-widest font-mono">
<th class="p-4 font-semibold">Username</th>
<th class="p-4 font-semibold">Date Joined</th>
<th class="p-4 font-semibold">Status</th>
<th class="p-4 font-semibold">Your Earnings</th>
<th class="p-4 font-semibold text-right">Action</th>
</tr>
</thead>
<tbody class="divide-y divide-border-dark">
<tr class="hover:bg-white/5 transition-colors group">
<td class="p-4">
<div class="flex items-center gap-3">
<div class="size-8 rounded bg-gradient-to-br from-blue-500 to-cyan-400 flex items-center justify-center text-white font-bold text-xs">KD</div>
<span class="font-bold text-white group-hover:text-primary transition-colors">KaiDrifter</span>
</div>
</td>
<td class="p-4 text-slate-400 text-sm">Oct 24, 2023</td>
<td class="p-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-accent-green/10 text-accent-green border border-accent-green/20">
<span class="size-1.5 rounded-full bg-accent-green animate-pulse"></span>
Active
</span>
</td>
<td class="p-4 font-mono font-bold text-secondary">500 XP</td>
<td class="p-4 text-right">
<button class="text-xs text-slate-500 hover:text-white transition-colors">View Profile</button>
</td>
</tr>
<tr class="hover:bg-white/5 transition-colors group">
<td class="p-4">
<div class="flex items-center gap-3">
<div class="size-8 rounded bg-gradient-to-br from-primary to-purple-600 flex items-center justify-center text-white font-bold text-xs">NX</div>
<span class="font-bold text-white group-hover:text-primary transition-colors">NeonX_99</span>
</div>
</td>
<td class="p-4 text-slate-400 text-sm">Oct 23, 2023</td>
<td class="p-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-accent-green/10 text-accent-green border border-accent-green/20">
<span class="size-1.5 rounded-full bg-accent-green animate-pulse"></span>
Active
</span>
</td>
<td class="p-4 font-mono font-bold text-secondary">1,200 XP</td>
<td class="p-4 text-right">
<button class="text-xs text-slate-500 hover:text-white transition-colors">View Profile</button>
</td>
</tr>
<tr class="hover:bg-white/5 transition-colors group">
<td class="p-4">
<div class="flex items-center gap-3">
<div class="size-8 rounded bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center text-white font-bold text-xs">VP</div>
<span class="font-bold text-white group-hover:text-primary transition-colors">ViperPilot</span>
</div>
</td>
<td class="p-4 text-slate-400 text-sm">Oct 22, 2023</td>
<td class="p-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-yellow-500/10 text-yellow-500 border border-yellow-500/20">
<span class="size-1.5 rounded-full bg-yellow-500"></span>
Pending
</span>
</td>
<td class="p-4 font-mono font-bold text-slate-500">0 XP</td>
<td class="p-4 text-right">
<button class="text-xs text-primary hover:text-primary/80 transition-colors font-bold">Nudge</button>
</td>
</tr>
<tr class="hover:bg-white/5 transition-colors group">
<td class="p-4">
<div class="flex items-center gap-3">
<div class="size-8 rounded bg-gradient-to-br from-slate-600 to-slate-800 flex items-center justify-center text-white font-bold text-xs">G0</div>
<span class="font-bold text-white group-hover:text-primary transition-colors">Ghost_001</span>
</div>
</td>
<td class="p-4 text-slate-400 text-sm">Oct 20, 2023</td>
<td class="p-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-red-500/10 text-red-500 border border-red-500/20">
<span class="size-1.5 rounded-full bg-red-500"></span>
Inactive
</span>
</td>
<td class="p-4 font-mono font-bold text-secondary">250 XP</td>
<td class="p-4 text-right">
<button class="text-xs text-slate-500 hover:text-white transition-colors">View Profile</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="p-4 border-t border-border-dark flex justify-center">
<button class="text-sm text-primary hover:text-white font-bold transition-colors flex items-center gap-1">
View All Referrals
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
</div>
</div>
</section>
<section class="mt-8 rounded-xl relative overflow-hidden bg-primary/20 border border-primary/40 p-10 text-center">
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-primary/10 to-transparent animate-pulse"></div>
<h3 class="text-2xl font-bold text-white relative z-10 mb-2">Reach Gold Rank?</h3>
<p class="text-slate-300 relative z-10 mb-6 max-w-2xl mx-auto">Refer 14 more allies this month to unlock the exclusive "Cyber Samurai" skin and a 5,000 XP bonus.</p>
<div class="w-full max-w-md mx-auto h-3 bg-surface-dark rounded-full overflow-hidden relative z-10 mb-2 border border-border-dark">
<div class="bg-gradient-to-r from-primary to-secondary h-full w-[72%]"></div>
</div>
<div class="flex justify-between max-w-md mx-auto text-xs font-mono text-slate-400 relative z-10">
<span>36 Recruits</span>
<span>Target: 50</span>
</div>
</section>
</main>
<footer class="border-t border-border-dark py-10 flex flex-col items-center gap-6 bg-surface-dark/30 mt-auto">
<div class="flex gap-6 text-slate-500 text-sm font-medium">
<a class="hover:text-primary transition-colors" href="#">Terms of Service</a>
<a class="hover:text-primary transition-colors" href="#">Affiliate Policy</a>
<a class="hover:text-primary transition-colors" href="#">Support</a>
</div>
<div class="text-slate-600 text-xs">
© 2024 QuizQuest Gaming Portal. All rights reserved.
</div>
</footer>
</div>
</div>
</body></html>