diff options
| -rw-r--r-- | app.py | 4 | ||||
| -rw-r--r-- | static/styles/join.css | 52 | ||||
| -rw-r--r-- | views/join.html | 30 |
3 files changed, 86 insertions, 0 deletions
@@ -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 |