multipleof4/lynchmark
1
0
Fork 0
mirror of https://github.com/multipleof4/lynchmark.git synced 2026-01-13 16:17:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Add unsubscribe page

Browse Source
This commit is contained in:
multipleof4
2025-12-03 17:15:05 -08:00
parent 64fd241080
commit 9be60958e8
1 changed files with 49 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
unsubscribe.html Normal file
View File

@@ -0,0 +1,49 @@
<!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>