feat: blurb on login page

src/web/auth.rs

@@ -92,6 +92,7 @@ mod get {
             }
             body hx-ext="response-targets" {
                 h1 { "Entretien" }
+                main {
                     form hx-post=(post_url) hx-target-error="#error" x-data=(json!({"user": state.autologin_user, "pass": state.autologin_pass, "htmx": false})) "x-on:htmx:load.document"="htmx = true" hx-trigger=(if state.autologin_pass.is_empty() { "submit" } else { "load" }) {
                         label for="username" { "username" }
                         input name="username" #username autofocus x-model="user" x-cloak;
@@ -101,6 +102,12 @@ mod get {
                         input type="submit" value="login" x-bind:disabled="!(user.length && pass.length && htmx)" hx-disabled-elt;
                         #error {}
                     }
+                    #blurb {
+                        p { "Task manager for repeating tasks like home maintenance." }
+                        p { "Try " code { "demo" } " for both username and password to try it out." }
+                        p { "Contact me if you want an account!" }
+                    }
+                }
             }
             }
         }

static/login.css

@@ -1,11 +1,16 @@
 body {
   padding-top: 2em;
   font-family: sans-serif;
+  max-width: 600px;
+  margin: auto;
 }
 
 form {
   display: flex;
   flex-direction: column;
+  height: fit-content;
+  padding: 1em;
+  width: 60%;
 
 }
 
@@ -18,3 +23,30 @@ h1 {
   font-weight: bold;
   margin-bottom: 2em;
 }
+
+main {
+  display: flex;
+  flex-direction: row;
+  gap: 1em;
+
+  height: fit-content;
+}
+
+#blurb {
+  border: 1px solid var(--line-color);
+  border-radius: var(--input-border-radius);
+  padding: 1em;
+
+  display: flex;
+  flex-direction: column;
+
+  justify-content: space-between;
+  gap: 1.5em;
+  height: fit-content;
+  width: 40%;
+
+  code {
+    font-family: monospace;
+    font-size: 115%;
+  }
+}