From 3a0aff2f30466e5750f47f4f0f5a6d72ac79392b Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@users.noreply.github.com>
Date: Thu, 27 Aug 2026 15:23:18 -0400
Subject: [PATCH] Update confirmation page

---
 script/render-preview.mjs      |  1 +
 src/pages/confirm-success.html | 54 +++++++++++++++++++++++++---------
 2 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/script/render-preview.mjs b/script/render-preview.mjs
index 1e88abc..c74d6ea 100644
--- a/script/render-preview.mjs
+++ b/script/render-preview.mjs
@@ -39,6 +39,7 @@ const sample = {
     },
   ],
   unsubscribeUrl: 'https://app.flotilla.social/unsubscribe?token=abc123',
+  settingsUrl: 'https://app.flotilla.social/settings/alerts',
 }
 
 const source = readFileSync(templatePath, 'utf8')
diff --git a/src/pages/confirm-success.html b/src/pages/confirm-success.html
index ce4c7e2..844237e 100644
--- a/src/pages/confirm-success.html
+++ b/src/pages/confirm-success.html
@@ -1,36 +1,62 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Confirmation Successful</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Email Confirmed</title>
     <style>
+      * { box-sizing: border-box; }
       body {
-        font-family: system-ui, sans-serif;
+        font-family: 'Inter', system-ui, -apple-system, sans-serif;
         display: flex;
         align-items: center;
         justify-content: center;
         min-height: 100vh;
         margin: 0;
-        background: #f5f5f5;
+        background: #f0f2f5;
+        color: #1e293b;
       }
       .container {
+        width: 100%;
+        max-width: 480px;
+        margin: 16px;
         text-align: center;
-        padding: 2rem;
-        background: white;
-        border-radius: 8px;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        padding: 40px 32px;
+        background: #ffffff;
+        border-radius: 12px;
+        border: 1px solid #e2e8f0;
+      }
+      .logo { height: 40px; width: auto; margin: 0 auto 16px; display: block; }
+      .brand {
+        font-size: 24px;
+        font-weight: 700;
+        margin: 0 0 28px;
+        color: {{brandAccent}};
+      }
+      .title {
+        font-size: 20px;
+        font-weight: 700;
+        margin: 0 0 12px;
+        color: #1e293b;
       }
       .message {
-        margin-top: 1rem;
-        color: #2ecc71;
+        font-size: 15px;
+        line-height: 1.6;
+        color: #64748b;
+        margin: 0;
       }
+      .message a { color: {{brandAccent}}; text-decoration: none; font-weight: 600; }
     </style>
   </head>
   <body>
     <div class="container">
-      <h2>Email Alert Confirmed</h2>
-      <div class="message">
-        Your alert has been successfully confirmed. You will now receive notifications.
-      </div>
+      {{#brandLogo}}<img class="logo" src="{{brandLogo}}" alt="{{brandName}}" />{{/brandLogo}}
+      <div class="brand">{{brandName}}</div>
+      <h1 class="title">Email confirmed</h1>
+      <p class="message">
+        Your email has been successfully confirmed. You will start receiving notifications shortly.
+        Visit <a href="{{settingsUrl}}">{{brandName}}</a> to manage your notification settings.
+      </p>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file