feat: enhance user request flow with styled form

Updated the `request.html` page to include a more user-friendly form, prompting users for their email to request a Planka account. The accompanying `style.css` was enriched with styles for inputs and buttons, ensuring a coherent and accessible design. This change aims to streamline the account request process, improving user experience by guiding them through an intuitive email verification system. Enhanced styling for focus and hover states also improves accessibility and user interaction cues.

static/style.css

@@ -162,4 +162,35 @@ footer p {
 footer a {
     color: #5d5d5d;
     font-weight: 700;
+}
+
+input {
+    padding: 10px;
+    margin: 10px 0;
+    width: 100%;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+button {
+    padding: 10px;
+    margin: 10px 0;
+    width: 100%;
+    font-size: 16px;
+    border: none;
+    background-color: #333;
+    color: #fff;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+button:hover {
+    background-color: #5d5d5d;
+}
+
+input:focus, button:focus {
+    outline: none;
+    border-color: #5d5d5d;
+    box-shadow: 0 0 0 2px rgba(93,93,93,0.5);
 }

templates/request.html

@@ -1,14 +1,15 @@
-{% extends "base.html" %}
-
-{% block content %}
-    <h1>Request</h1>
-    <p>Request method: {{ request.method }}</p>
-    <p>Request path: {{ request.path }}</p>
-    <p>Request query string: {{ request.query_string }}</p>
-    <p>Request headers:</p>
-    <ul>
-        {% for key, value in request.headers.items() %}
-            <li>{{ key }}: {{ value }}</li>
-        {% endfor %}
-    </ul>
-{% endblock %}
+{% extends "base.html" %} {% block content %}
+<main>
+  <div class="container">
+    <p>Please enter your email address to request a Planka account.</p>
+    <p>
+      You will receive an email with a verification link, where you can complete
+      your registration.
+    </p>
+    <form>
+      <input type="email" name="email" placeholder="Email address" required />
+      <button type="submit">Request</button>
+    </form>
+  </div>
+</main>
+{% endblock %}