From cb6c5293e1dfaf1fc00a69511187af2c40acd3c3 Mon Sep 17 00:00:00 2001
From: Leonetienne <leon@etiennes.de>
Date: Fri, 8 Apr 2022 21:25:02 +0200
Subject: [PATCH] Prettier login page

---
 authenticate.html | 68 ++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 65 insertions(+), 3 deletions(-)
diff --git a/authenticate.html b/authenticate.html
index 2831c2f..f3230a4 100644
--- a/authenticate.html
+++ b/authenticate.html
@@ -1,12 +1,74 @@
 <html>
   <head>
     <title>Authentication required</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+    <style>
+    body {
+      background-color: #d4f1fc;
+      font-family: sans-serif;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 70vh;
+    }
+
+    form {
+      background-color: white;
+      border-radius: 15px;
+      padding: 1.5em;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+    }
+
+    h1 {
+      font-size: 16pt;
+    }
+
+    form input {
+      border: none;
+      outline: none;
+      border-radius: 5px;
+      background-color: #d4f1fc;
+      margin-top: 5px;
+      transition: transform 0.25s ease;
+    }
+
+    form input:not([type="submit"]) {
+      padding: 0.5em 1.5em;
+      text-align: left;
+      width: 100%;
+    }
+
+    form input:not([type="submit"]):focus,
+    form input[type="submit"]:hover {
+      transform: scale(1.05);
+    }
+
+    form input[type="submit"] {
+      padding: 0.5em 1.5em;
+      margin-top: 2em;
+      align-self: flex-end;
+      cursor: pointer;
+    }
+
+    form label {
+      display: block;
+      font-size: 8pt;
+      text-align: left;
+    }
+    </style>
+
   </head>
   <body>
-    <h1>Authentication required</h1>
     <form action="/api--authenticate" method="POST">
-      <label for="password">Password</label>
-      <input type="password" id="password" name="password"></input>
+      <h1>Authentication required</h1>
+      <div>
+        <label for="password">Password</label>
+        <input type="password" id="password" name="password"></input>
+      </div>
       <input type="submit" value="Submit">
     </form>
   </body>
