From 3964b153145b21a4f566aa0ec745d6d72b2f36ff Mon Sep 17 00:00:00 2001
From: Abner Coimbre <abner@terminal.click>
Date: Sat, 28 Mar 2026 11:53:31 -0700
Subject: [PATCH] Hub for Community Chat

---
 .../english/transactional/invite-success.md   |  6 ++-
 layouts/_default/chat.html                    | 26 ++++++++++++
 layouts/_default/invite.html                  | 42 +++++++++++++------
 layouts/_default/revolt.html                  |  2 +-
 4 files changed, 61 insertions(+), 15 deletions(-)
 create mode 100644 layouts/_default/chat.html

diff --git a/content/english/transactional/invite-success.md b/content/english/transactional/invite-success.md
index 45436cd..679a034 100644
--- a/content/english/transactional/invite-success.md
+++ b/content/english/transactional/invite-success.md
@@ -7,6 +7,8 @@ main_image=""
 
 #### Congrats!
 
-If you've met in meatspace they'll get a [Verified Human](https://guide.handmadecities.com/docs/chat/#verified-human-badge) badge, which grants *them* the power of invites. Ready to [send another](/invite)? 
+You've invited a fellow human to our Handmade Revolt. If necessary, ask them to check the junk folder and mark us as safe!
 
-⚠️  We use an invite tree [inspired](https://lobste.rs/about#invitations) by the Lobsters community. The **TL;DR** is YOU are responsible for the users you invite, plus any users they've invited (and so on.)
+Ready to [send another](/invite)?
+
+⚠️  We use an invite tree [inspired](https://lobste.rs/about#invitations) by the Lobsters community: YOU are responsible for the users you invite, plus any users they've invited (and so on.)
diff --git a/layouts/_default/chat.html b/layouts/_default/chat.html
new file mode 100644
index 0000000..26c86fb
--- /dev/null
+++ b/layouts/_default/chat.html
@@ -0,0 +1,26 @@
+{{ define "main" }}
+<section class="section">
+  <div class="container max-w-xl">
+    <h1 class="mb-4 text-3xl font-bold">{{ .Title }}</h1>
+    <p class="mb-8">Join our community chat or help it grow by inviting someone you trust.</p>
+
+    <div class="space-y-6">
+
+      <a href="/revolt/" class="block rounded border border-gray-300 p-6 hover:border-blue-500 hover:shadow-md transition">
+        <h2 class="text-xl font-semibold text-gray-900">Apply to Join</h2>
+        <p class="mt-2">
+          New to the community? Submit an application to join our Revolt chat server.
+        </p>
+      </a>
+
+      <a href="/invite/" class="block rounded border border-gray-300 p-6 hover:border-blue-500 hover:shadow-md transition">
+        <h2 class="text-xl font-semibold text-gray-900">Invite Someone</h2>
+        <p class="mt-2">
+          Already a member? Vouch for someone you know and send them an invite code.
+        </p>
+      </a>
+
+    </div>
+  </div>
+</section>
+{{ end }}
diff --git a/layouts/_default/invite.html b/layouts/_default/invite.html
index aa5dbe3..f8d8c2a 100644
--- a/layouts/_default/invite.html
+++ b/layouts/_default/invite.html
@@ -2,7 +2,7 @@
 <section class="section">
   <div class="container max-w-xl">
     <h1 class="mb-8 text-3xl font-bold">{{ .Title }}</h1>
-    <img src="/images/hmc/revolt-preview.png">
+    <img src="/images/hmc/revolt-preview.png" style="border-radius: 20px;">
     <p><strong>Give them full access to <a href="https://chat.handmadecities.com">chat.handmadecities.com</a></strong></p>
     <br>
 
@@ -10,20 +10,34 @@
 
       <div>
         <label for="invite-email" class="mb-2 block font-semibold">Email to Send Invite to<span class="text-red-500">*</span></label>
-        <input type="email" id="invite-email" name="invite_email" required
-               class="w-full rounded border border-gray-300 px-4 py-2 focus:border-blue-500 focus:outline-none" />
+               <input type="email" id="invite-email" name="invite_email" required
+       class="w-full rounded border border-gray-300 px-4 py-2 text-gray-900 focus:border-blue-500 focus:outline-none" />
       </div>
 
+      <hr>
+
       <div>
         <label for="revolt-email" class="mb-2 block font-semibold">Your Revolt Email <span class="text-red-500">*</span></label>
         <input type="email" id="revolt-email" name="revolt_email" required
-               class="w-full rounded border border-gray-300 px-4 py-2 focus:border-blue-500 focus:outline-none" />
+        class="w-full rounded border border-gray-300 px-4 py-2 text-gray-900 focus:border-blue-500 focus:outline-none" />
       </div>
 
       <div>
         <label for="revolt-password" class="mb-2 block font-semibold">Your Revolt Password <span class="text-red-500">*</span></label>
         <input type="password" id="revolt-password" name="revolt_password" required
-               class="w-full rounded border border-gray-300 px-4 py-2 focus:border-blue-500 focus:outline-none" />
+        class="w-full rounded border border-gray-300 px-4 py-2 text-gray-900 focus:border-blue-500 focus:outline-none" />
+      </div>
+
+      <div class="flex items-center gap-2 mt-1">
+      <input type="checkbox" id="show-password" class="h-4 w-4" />
+      <label for="show-password">Show password</label>
+      </div>
+
+      <div>
+        <label for="notes" class="mb-2 block font-semibold">Additional Notes (Optional)</label>
+        <textarea id="notes" name="notes" rows="4"
+          placeholder='"I am inviting my college roommate who is interested in Handmade software!"'
+          class="w-full rounded border border-gray-300 px-4 py-2 text-gray-900 focus:border-blue-500 focus:outline-none"></textarea>
       </div>
 
       <div class="flex items-center gap-2">
@@ -31,12 +45,8 @@
                class="h-4 w-4" />
         <label for="meatspace">Have you met this person in meatspace?</label>
       </div>
-
-      <div>
-        <label for="notes" class="mb-2 block font-semibold">Additional Notes (Optional)</label>
-        <textarea id="notes" name="notes" rows="4"
-          placeholder='"I am inviting my college roommate who is interested in Handmade software!"'
-          class="w-full rounded border border-gray-300 px-4 py-2 focus:border-blue-500 focus:outline-none"></textarea>
+      <div id="meatspace-note" style="display: none;">
+      This person will be granted a <a href="https://guide.handmadecities.com/docs/chat/#verified-human-badge" class="text-blue-600 underline">Verified Human</a> badge.
       </div>
 
       <button type="submit"
@@ -45,9 +55,17 @@
       </button>
 
       <p class="text-sm text-gray-500">
-        You're vouching for the human identity of this new user. Bots or alternate personas are <strong>prohibited.</strong>
+        You're vouching for the human identity of this new user. Bots or alternate personas are <strong>forbidden.</strong>
       </p>
     </form>
   </div>
+  <script>
+  document.getElementById("meatspace").addEventListener("change", function() {
+    document.getElementById("meatspace-note").style.display = this.checked ? "block" : "none";
+  });
+  document.getElementById("show-password").addEventListener("change", function() {
+    document.getElementById("revolt-password").type = this.checked ? "text" : "password";
+  });
+</script>
 </section>
 {{ end }}
diff --git a/layouts/_default/revolt.html b/layouts/_default/revolt.html
index 74663a0..3ee5da5 100644
--- a/layouts/_default/revolt.html
+++ b/layouts/_default/revolt.html
@@ -2,7 +2,7 @@
 <section class="revolt-form-section">
   <div class="container">
     <h1>{{ .Title }}</h1>
-    <img src="/images/hmc/revolt-promotion.png" style="border-radius: 10px;">
+    <img src="/images/hmc/revolt-promotion.png" style="border-radius: 20px;">
     <p>We now run our server at <strong><a href="https://chat.handmadecities.com">chat.handmadecities.com</a></strong>. Real humans only!</p>
 
     <form action="https://register.handmadecities.com" method="POST" class="revolt-form">