From f6a27eec59b2da4d198c5e65e8e191678e65a906 Mon Sep 17 00:00:00 2001
From: Aelita4 <kontakt@mikorosa.pl>
Date: Fri, 13 Dec 2024 17:16:16 +0100
Subject: [PATCH] (tmp) Prettify login and register forms

---
 src/pages/login.astro    | 50 +++++++++++++++++++++++++++++++-----
 src/pages/register.astro | 55 +++++++++++++++++++++++++++++++++-------
 2 files changed, 90 insertions(+), 15 deletions(-)

diff --git a/src/pages/login.astro b/src/pages/login.astro
index 10a83d0..952ee58 100644
--- a/src/pages/login.astro
+++ b/src/pages/login.astro
@@ -80,10 +80,48 @@ if(Astro.request.method === "POST") {
 
 <Layout title="Login">
     <NavBar loggedIn="false" active="login" />
-    <form method="POST">
-        <input type="text" name="username" placeholder="username" /><br />
-        <input type="password" name="password" placeholder="password" /><br />
-        <input type="submit" value="login" />
-        { error !== "" ? <p style="color: red;">{error}</p> : "" }
+    <form method="POST" class="login-form">
+        <input class="login-input" type="text" name="username" placeholder="username" /><br />
+        <input class="login-input" type="password" name="password" placeholder="password" /><br />
+        <input class="login-submit" type="submit" value="login" />
+        <p style="color: red;">{error}</p>
     </form>
-</Layout>
\ No newline at end of file
+</Layout>
+<style>
+.login-form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 50px;
+    background: linear-gradient(
+        to bottom right,
+        red,
+        blue
+    );
+    padding: 30px;
+    text-align: center;
+    width: 300px;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 10px;
+}
+
+.login-input {
+    margin: 5px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    width: 100%;
+    padding: 10px;
+}
+
+.login-submit {
+    margin: 5px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    width: 100%;
+    padding: 10px;
+    background-color: #4CAF50;
+    color: white;
+    cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/register.astro b/src/pages/register.astro
index 891aad6..286f254 100644
--- a/src/pages/register.astro
+++ b/src/pages/register.astro
@@ -103,15 +103,52 @@ if(Astro.request.method === "POST") {
     }
 }
 ---
-
 <Layout title="Register">
     <NavBar loggedIn="false" active="register" />
-    <form method="POST">
-        <input type="text" name="username" placeholder="username" /><br />
-        <input type="email" name="email" placeholder="email" /><br />
-        <input type="password" name="password" placeholder="password" /><br />
-        <input type="password" name="password2" placeholder="password2" /><br />
-        <input type="submit" value="register" />
-        { error !== "" ? <p style="color: red;">{error}</p> : "" }
+    <form method="POST" class="register-form">
+        <input class="register-input" type="text" name="username" placeholder="username" /><br />
+        <input class="register-input" type="email" name="email" placeholder="email" /><br />
+        <input class="register-input" type="password" name="password" placeholder="password" /><br />
+        <input class="register-input" type="password" name="password2" placeholder="password2" /><br />
+        <input class="register-submit" type="submit" value="register" />
+        <p style="color: red;">{error}</p>
     </form>
-</Layout>
\ No newline at end of file
+</Layout>
+<style>
+.register-form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 50px;
+    background: linear-gradient(
+        to bottom right,
+        blue,
+        red
+    );
+    padding: 30px;
+    text-align: center;
+    width: 300px;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 10px;
+}
+
+.register-input {
+    margin: 5px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    width: 100%;
+    padding: 10px;
+}
+
+.register-submit {
+    margin: 5px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    width: 100%;
+    padding: 10px;
+    background-color: #4CAF50;
+    color: white;
+    cursor: pointer;
+}
+</style>
\ No newline at end of file