From 82b954af2e9fd2c693b139a8ad93ad145c9ff969 Mon Sep 17 00:00:00 2001
From: Lucas Schumacher <technolucas@protonmail.com>
Date: Thu, 1 Aug 2024 22:40:41 -0400
Subject: [PATCH] Add css to signup page

---
 templates/signup.gohtml | 47 +++++++++++++++++++++++++++++------------
 1 file changed, 34 insertions(+), 13 deletions(-)
diff --git a/templates/signup.gohtml b/templates/signup.gohtml
index 7b20d15..fc7145f 100644
--- a/templates/signup.gohtml
+++ b/templates/signup.gohtml
@@ -1,21 +1,42 @@
 <!doctype html>
 <html>
-  <body>
+  {{template "head" .}}
+  <body class="min-h-screen bg-gray-100">
     {{template "header".}}
     <main class="px-6">
-      <form action="/signup" method="post">
-        <div>
-          <label for="signupEmail">Email Address</label>
-          <input name="email" id="signupEmail" type="email" placeholder="Email address" required autocomplete="email"/>
+      <div class="py-12 flex justify-center">
+        <div class="px-8 py-8 bg-white rounded shadow">
+          <h1 class="pt-4 pb-8 text-center text-3xl font-bold text-gray-900">
+            Sign Up!
+          </h1>
+          <form action="/signup" method="post">
+            <div>
+              <label for="signupEmail" class="text-sm font-semibold text-gray-800">Email Address</label>
+              <input name="email" id="signupEmail" type="email" placeholder="Email address" required autocomplete="email" 
+                class="w-full px-3 py-2 boarder boarder-gray-300 placeholder-gray-500 text-gray-800 rounded"
+              />
+            </div>
+            <div>
+              <label for="signupPassword" class="text-sm font-semibold text-gray-800">Password</label>
+              <input name="password" id="signupPassword" type="password" placeholder="password" required
+                class="w-full px-3 py-2 boarder boarder-gray-300 placeholder-gray-500 text-gray-800 rounded"
+              />
+            </div>
+            <div>
+              <button type="submit" class="w-full py-4 px-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded font-bold text-lg">Sign up</button>
+            </div>
+            <div class="py-2 w-full flex justify-between">
+              <p class="text-xs text-gray-500">
+                Already have an account?
+                <a href="/signin" class="underline">Sign in</a>
+              </p>
+              <p class="text-xs text-gray-500">
+                <a href="/reset-pw" class="underline">Forgot your password?</a>
+              </p>
+            </div>
+          </form>
         </div>
-        <div>
-          <label for="signupPassword">Password</label>
-          <input name="password" id="signupPassword" type="password" placeholder="password" required/>
-        </div>
-        <div>
-          <button type="submit">Sign up</button>
-        </div>
-      </form>
+      </div>
     </main>
     {{template "footer" .}}
   </body>
