Add join form HTML

3 files changed, 86 insertions, 0 deletions

diff --git a/app.py b/app.py
index cfedee5..c58833c 100644
--- a/app.py
+++ b/app.py
@@ -8,6 +8,10 @@ app = Bottle()
 def index():
     return template("index")
 
[email protected]("/join.html")
+def join_form():
+    return template("join")
+
 @app.route("/<type:re:styles|images>/<filename>")
 def server_static(type, filename):
     return static_file(filename, root=f"./static/{type}/")
diff --git a/static/styles/join.css b/static/styles/join.css
new file mode 100644
index 0000000..102b797
--- /dev/null
+++ b/static/styles/join.css
@@ -0,0 +1,52 @@
+/*
+ * This file contains styles specific to the "join" view. The corresponding
+ * HTML/template file is `views/join.html`.
+ */
+
+main {
+	width: 100%;
+	max-width: 500px;
+	margin: 2rem auto;
+}
+
+.signup {
+
+}
+
+.signup__box {
+	margin-bottom: 1reM;
+}
+
+.signup__label {
+	font-weight: bold;
+}
+
+.signup__input {
+	width: 100%;
+}
+
+textarea.signup__input {
+	/* Remove UA's default monospace font */
+	font-family: inherit;
+
+	/* Horizontal resizing totally breaks our layout :( */
+	resize: vertical;
+}
+
+.signup__submit {
+	/* Horizontally center the element */
+	display: block;
+	margin-inline: auto;
+
+	/* Make it look dark and twisted */
+	background-color: #6e1818;
+	color: white;
+	border: none;
+	border-radius: 500px;
+	padding: 1rem;
+	font-size: large;
+}
+
+/* The usual dimming effect makes interaction feel more tactile */
+.signup__submit:hover { filter: brightness(90%); }
+.signup__submit:active { filter: brightness(60%); }
\ No newline at end of file
diff --git a/views/join.html b/views/join.html
new file mode 100644
index 0000000..1fb341b
--- /dev/null
+++ b/views/join.html
@@ -0,0 +1,30 @@
+{% extends "base.html" %}
+
+{% block head %}
+	<link rel="stylesheet" href="/styles/join.css">
+{% endblock %}
+
+{% block content %}
+	<form method="POST" class="signup">
+		<div class="signup__box">
+			<label class="signup__label" for="name">Name</label>
+			<p>
+				We use your username to connect you with your account later.
+				Please make sure it's spelled correclty.
+			</p>
+			<input class="signup__input" type="text" id="name" placeholder="PoopenFarten43">
+		</div>
+		<div class="signup__box">
+			<label class="signup__label" for="motivation">Motivation</label>
+			<p>
+				Write us a little post about why you'd like to join our guild.
+				Keep in mind that we get a lot of applications for our guild;
+				a simple "i like vidya" won't get you through the golden gates!
+			</p>
+			<textarea class="signup__input" id="motivation" rows="20" placeholder="I would like to join because..."></textarea>
+		</div>
+		<div>
+			<button class="signup__submit" type="submit">Submit</button>
+		</div>
+	</form>
+{% endblock %}
\ No newline at end of file