Confirmation page and minor improvements to homepage and form messages

Basic redirect with flash messages for success and error messages

templates/confirm.html

@@ -0,0 +1,67 @@
+{% extends "base.html" %} {% block title %}zero2prod{% endblock %} {% block
+content %}
+<div class="min-h-[60vh] flex items-center justify-center">
+  <div class="max-w-md w-full space-y-8">
+    <div class="text-center">
+      <div
+        class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-green-100 mb-6"
+      >
+        <svg
+          class="h-8 w-8 text-green-600"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M5 13l4 4L19 7"
+          ></path>
+        </svg>
+      </div>
+
+      <h1 class="text-3xl font-bold text-gray-900 mb-4">
+        Subscription confirmed!
+      </h1>
+      <p class="text-lg text-gray-600 mb-8">
+        Your email has been confirmed. You're all set to receive our newsletter
+        updates.
+      </p>
+    </div>
+
+    <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
+      <div class="bg-green-50 border border-green-200 rounded-md p-4 mb-6">
+        <div class="flex">
+          <svg
+            class="h-5 w-5 text-green-400 mt-0.5"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+              clip-rule="evenodd"
+            />
+          </svg>
+          <div class="ml-3">
+            <p class="text-sm font-medium text-green-800">
+              Welcome to our newsletter! You'll receive quality content about
+              Rust backend development straight to your inbox.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="text-center">
+        <a
+          href="/"
+          class="text-sm text-blue-600 hover:text-blue-500 transition-colors"
+        >
+          ← Back to homepage
+        </a>
+      </div>
+    </div>
+  </div>
+  {% endblock %}
+</div>

templates/home.html

@@ -7,7 +7,7 @@ block content %}
     <div class="max-w-3xl">
       <h1 class="text-4xl font-bold mb-4">zero2prod</h1>
       <p class="text-xl text-blue-100 mb-6">
-        Welcome to my newsletter! Stay updated on my latest projects and
+        Welcome to our newsletter! Stay updated on our latest projects and
         thoughts. Unsubscribe at any time.
       </p>
       <div class="flex flex-col sm:flex-row gap-4">
@@ -28,7 +28,6 @@ block content %}
     </div>
   </div>
 
-  <!-- Feature Cards -->
   <div class="grid md:grid-cols-3 gap-6 mb-8">
     <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
       <div
@@ -113,15 +112,10 @@ block content %}
     <div class="max-w-2xl mx-auto text-center">
       <h2 class="text-2xl font-bold text-gray-900 mb-4">Stay updated</h2>
       <p class="text-gray-600 mb-6">
-        Subscribe to my newsletter to get the latest updates.
+        Subscribe to our newsletter to get the latest updates.
       </p>
 
-      <form
-        hx-post="/subscriptions"
-        hx-target="#subscription-result"
-        hx-swap="innerHTML"
-        class="max-w-md mx-auto"
-      >
+      <form action="/subscriptions" method="post" class="max-w-md mx-auto">
         <div class="flex flex-col sm:flex-row gap-3">
           <input
             type="email"
@@ -139,7 +133,7 @@ block content %}
         </div>
       </form>
 
-      <div id="subscription-result" class="mt-4"></div>
+      <div class="mt-4">{{ message }}</div>
     </div>
   </div>
 
@@ -159,12 +153,12 @@ block content %}
         </div>
       </div>
       <div>
-        <div class="text-2xl font-bold text-orange-600">0</div>
+        <div class="text-2xl font-bold text-green-600">0</div>
         <div class="text-sm text-gray-600">email opened</div>
       </div>
       <div>
-        <div class="text-2xl font-bold text-purple-600">~1ms</div>
-        <div class="text-sm text-gray-600">response time</div>
+        <div class="text-2xl font-bold text-purple-600">3</div>
+        <div class="text-sm text-gray-600">issues delivered</div>
       </div>
     </div>
   </div>

templates/login.html

@@ -5,7 +5,7 @@ block content %}
     <div class="text-center">
       <h2 class="text-3xl font-bold text-gray-900">Login</h2>
       <p class="mt-2 text-sm text-gray-600">
-        Sign in to access the admin dashboard
+        Sign in to access the admin dashboard.
       </p>
     </div>
 
@@ -53,7 +53,7 @@ block content %}
         </div>
       </form>
 
-      <div class="mt-4">{{ error_html }}</div>
+      <div class="mt-4 text-center">{{ error }}</div>
     </div>
 
     <div class="text-center">