116 lines
5.6 KiB
HTML
116 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Affiliate Login | Plugin Compass</title>
|
|
<link rel="icon" type="image/png" href="/assets/Plugin.png">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = { theme: { extend: { fontFamily: { sans: ['Inter', 'sans-serif'] } } } };
|
|
</script>
|
|
|
|
<!-- PostHog Analytics -->
|
|
<script src="/posthog.js"></script>
|
|
</head>
|
|
<body class="bg-amber-50 text-gray-900 font-sans antialiased min-h-screen flex flex-col">
|
|
<div class="flex-1 flex items-center justify-center px-4 py-8">
|
|
<div class="w-full max-w-md">
|
|
<a href="/" class="flex items-center gap-2 mb-6 text-gray-700 hover:text-gray-900">
|
|
<img src="/assets/Plugin.png" alt="Plugin Compass" class="w-8 h-8 rounded-lg">
|
|
<span class="font-bold">Plugin<span class="text-green-700">Compass</span></span>
|
|
</a>
|
|
<div class="bg-white rounded-2xl shadow-sm border border-amber-200 p-8">
|
|
<h1 class="text-2xl font-bold mb-2">Affiliate Login</h1>
|
|
<p class="text-sm text-gray-600 mb-6">Access your dashboard to create tracking links and track earnings.</p>
|
|
<form id="login-form" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
|
|
<input type="email" name="email" required class="w-full rounded-lg border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-600">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
|
|
<input type="password" name="password" required class="w-full rounded-lg border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-600">
|
|
</div>
|
|
<div id="error" class="text-sm text-red-600 hidden"></div>
|
|
<button type="submit" class="w-full py-3 rounded-lg bg-green-700 text-white font-semibold hover:bg-green-600">Login</button>
|
|
</form>
|
|
<p class="text-sm text-gray-600 mt-4">New partner? <a class="text-green-700 font-semibold" href="/affiliate-signup">Join the program</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer class="bg-white border-t border-green-200 pt-16 pb-8">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-12 mb-16">
|
|
<div class="col-span-2 md:col-span-1">
|
|
<div class="flex items-center gap-2 mb-6">
|
|
<img src="/assets/Plugin.png" alt="Plugin Compass" class="w-8 h-8">
|
|
<span class="font-bold text-xl tracking-tight text-gray-800">Plugin<span
|
|
class="text-green-700">Compass</span></span>
|
|
</div>
|
|
<p class="text-gray-600 text-sm leading-relaxed">
|
|
The smart way for WordPress site owners to replace expensive plugin subscriptions with custom
|
|
solutions. Save thousands monthly.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-gray-900 mb-6">Product</h4>
|
|
<ul class="space-y-4 text-sm">
|
|
<li><a href="/features" class="text-gray-600 hover:text-green-700">Features</a></li>
|
|
<li><a href="/pricing" class="text-gray-600 hover:text-green-700">Pricing</a></li>
|
|
<li><a href="#" class="text-gray-600 hover:text-green-700">Templates</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-gray-900 mb-6">Resources</h4>
|
|
<ul class="space-y-4 text-sm">
|
|
<li><a href="/docs" class="text-gray-600 hover:text-green-700">Documentation</a></li>
|
|
<li><a href="/faq" class="text-gray-600 hover:text-green-700">FAQ</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-gray-900 mb-6">Legal</h4>
|
|
<ul class="space-y-4 text-sm">
|
|
<li><a href="/privacy.html" class="text-gray-600 hover:text-green-700">Privacy Policy</a></li>
|
|
<li><a href="/terms" class="text-gray-600 hover:text-green-700">Terms of Service</a></li>
|
|
<li><a href="/contact" class="text-gray-600 hover:text-green-700">Contact Us</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-gray-100 pt-8 flex justify-center">
|
|
<p class="text-gray-500 text-xs text-center">© 2026 Plugin Compass. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script>
|
|
const form = document.getElementById('login-form');
|
|
const errorBox = document.getElementById('error');
|
|
form.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
errorBox.classList.add('hidden');
|
|
const data = Object.fromEntries(new FormData(form).entries());
|
|
const res = await fetch('/api/affiliates/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data)
|
|
});
|
|
const json = await res.json().catch(() => ({}));
|
|
if (!res.ok) {
|
|
if (json.verificationRequired) {
|
|
window.location.href = '/affiliate-verification-sent';
|
|
return;
|
|
}
|
|
errorBox.textContent = json.error || 'Unable to login';
|
|
errorBox.classList.remove('hidden');
|
|
return;
|
|
}
|
|
window.location.href = '/affiliate-dashboard';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|