Update confirmation page

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')

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;
+        padding: 40px 32px;
-        background: white;
+        background: #ffffff;
-        border-radius: 8px;
+        border-radius: 12px;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        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;
+        font-size: 15px;
-        color: #2ecc71;
+        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>
+      {{#brandLogo}}<img class="logo" src="{{brandLogo}}" alt="{{brandName}}" />{{/brandLogo}}
-      <div class="message">
+      <div class="brand">{{brandName}}</div>
-        Your alert has been successfully confirmed. You will now receive notifications.
+      <h1 class="title">Email confirmed</h1>
-      </div>
+      <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>