Flesh out 'join' user flow

This commit splits the user flow when sending in an application to join
the guild into three staged:

1. Intro text
2. HTML form
3. Form submission feedback (aka. "yay it went through")

4 files changed, 46 insertions, 4 deletions

diff --git a/views/base.html b/views/base.html
index 9133090..cba0c5d 100644
--- a/views/base.html
+++ b/views/base.html
@@ -14,7 +14,7 @@
 			<ul class="navbar__links" role="navigation" aria-label="Main">
 				<li><a class="navbar__location" href="/index.html">About us</a></li>
 				<li><a class="navbar__location" href="/history.html">History</a></li>
-				<li><a class="navbar__location" href="/join.html">Join</a></li>
+				<li><a class="navbar__location" href="/join_intro.html">Join</a></li>
 				<li><a class="navbar__location" href="/battle">Log in</a></li>
 			</ul>
 		</header>
diff --git a/views/join.html b/views/join_form.html
index 784019c..0e06399 100644
--- a/views/join.html
+++ b/views/join_form.html
@@ -1,7 +1,8 @@
 {% extends "base.html" %}
 
 {% block head %}
-	<link rel="stylesheet" href="/styles/join.css">
+	<link rel="stylesheet" href="/styles/join_common.css">
+	<link rel="stylesheet" href="/styles/join_form.css">
 	<script type="module">
 		var dropdown = document.getElementById("preferredRole");
 		document.getElementById("applicationForm").addEventListener("submit", (event) => {
@@ -51,7 +52,7 @@
 			<textarea required class="signup__input" id="motivation" name="motivation" rows="20" placeholder="I would like to join because..."></textarea>
 		</div>
 		<div>
-			<button class="signup__submit" type="submit">Submit</button>
+			<button class="button" type="submit">Submit</button>
 		</div>
 	</form>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/views/join_intro.html b/views/join_intro.html
new file mode 100644
index 0000000..9ed93d5
--- /dev/null
+++ b/views/join_intro.html
@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+
+{% block head %}
+	<link rel="stylesheet" href="/styles/join_common.css">
+{% endblock %}
+
+{% block content %}
+	<h1>Joining the Blind Guild</h1>
+	<p>
+		So you want to join the Blind Guild.
+		Be warned,
+		we are a very exclusive club
+		and we aren't actively seeking new members.
+		However, if you're a skilled player
+		and feel like you could help elevate the Blind Guild,
+		feel free to send us an application!
+	</p>
+	<p>
+		Click the button below to go to the form
+		where you can submit your application.
+	</p>
+	<a class="button" href="/join_form.html">Apply</a>
+{% endblock %}
diff --git a/views/join_success.html b/views/join_success.html
new file mode 100644
index 0000000..7e9dace
--- /dev/null
+++ b/views/join_success.html
@@ -0,0 +1,18 @@
+{% extends "base.html" %}
+
+{% block head %}
+	<link rel="stylesheet" href="/styles/join_common.css">
+{% endblock %}
+
+{% block content %}
+	<h1>Application recieved</h1>
+	<p>
+		Your application was submitted successfully!
+		We'll review it and decide if you're cool enough to join our exclusive club.
+		Please note that it may take a few days for us to get to your application.
+	</p>
+	<p>
+		If you're accepted into our elite gang of high-tier gamers,
+		you'll receive an in-game invite to the Blind Guild.
+	</p>
+{% endblock %}