From 9be60958e844b3d0b7dd7e79e7058d2ac0768009 Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Wed, 3 Dec 2025 17:15:05 -0800
Subject: [PATCH] Feat: Add unsubscribe page

---
 unsubscribe.html | 49 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 unsubscribe.html
diff --git a/unsubscribe.html b/unsubscribe.html
new file mode 100644
index 0000000..115002f
--- /dev/null
+++ b/unsubscribe.html
@@ -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>
