mirror of
https://github.com/multipleof4/lynchmark.git
synced 2026-01-13 16:17:54 +00:00
50 lines
2.6 KiB
HTML
50 lines
2.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>Unsubscribe - Lynchmark</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
@font-face{font-family:"Stain";src:url("https://cdn.jsdelivr.net/gh/multipleof4/stain.otf@master/dist/Stain.otf") format("opentype")}
|
|
body{font-family:"Stain",sans-serif}
|
|
.mono{font-family:"IBM Plex Mono",monospace}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 text-gray-800">
|
|
<main class="max-w-xl mx-auto flex flex-col min-h-screen p-6 lg:p-8 justify-center">
|
|
<article class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
|
|
<header class="bg-gray-50 px-8 py-10 border-b border-gray-200 text-center">
|
|
<h1 class="text-3xl font-bold text-gray-900 mb-2">Unsubscribe</h1>
|
|
<p class="text-gray-600">Enter your email to be removed from the list.</p>
|
|
</header>
|
|
<div class="p-8 space-y-6">
|
|
<form id="unsub-form" class="space-y-4">
|
|
<input type="email" id="email" required placeholder="you@example.com" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none mono text-sm">
|
|
<button type="submit" class="w-full px-6 py-3 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 transition">Unsubscribe</button>
|
|
</form>
|
|
<p id="msg" class="text-center text-sm hidden"></p>
|
|
</div>
|
|
</article>
|
|
<footer class="mt-12 text-center text-xs text-gray-500 mono">
|
|
<a href="/" class="hover:underline">Lynchmark</a>
|
|
</footer>
|
|
</main>
|
|
<script>
|
|
const form=document.getElementById('unsub-form'),msg=document.getElementById('msg');
|
|
form.onsubmit=async e=>{
|
|
e.preventDefault();
|
|
msg.className='text-center text-sm text-gray-500';
|
|
msg.textContent='Processing...';
|
|
msg.classList.remove('hidden');
|
|
try{
|
|
const r=await fetch('/api/unsubscribe',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:document.getElementById('email').value})});
|
|
const d=await r.json();
|
|
if(d.ok){msg.textContent='✓ Unsubscribed';msg.className='text-center text-sm text-green-600';}
|
|
else{msg.textContent=d.error||'Error';msg.className='text-center text-sm text-red-600';}
|
|
}catch{msg.textContent='Network error';msg.className='text-center text-sm text-red-600';}
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|