Join Page

src/beesite/modules/redirects/controllers.py

@@ -3,14 +3,17 @@
 from flask import Blueprint
 from flask import redirect
 from flask import request
+from flask import render_template
 
 bp_redirects = Blueprint("redirects", __name__)
 
 
 @bp_redirects.route("/join/<string:id>")
 def page_join(id):
     server = util.get_server(id)
-    return redirect("byond://{}:{}".format(server["host"], server["port"]))
+    if server is None:
+        return abort(404)
+    return render_template("join.html", server_name=server["name"], server_nickname=server["nickname"], server_url="byond://{}:{}".format(server["host"], server["port"]))
 
 
 @bp_redirects.route("/rules")

src/beesite/templates/join.html

@@ -0,0 +1,140 @@
+{% extends "layout_minimal.html" %}
+{% block title %}Join {{ server_nickname }}{% endblock %}
+
+{% block head %}
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta property="og:title" content="BeeStation - Join {{ server_nickname }}" />
+<style>
+	button {
+		background-color: black;
+		padding: 0.25rem 0.3rem;
+		border-radius: 0;
+		transition: background-color 0.1s linear;
+		color: #e8e8e8;
+		border: 1px solid #5a5a5a;
+	}
+	button:hover {
+		background-color: #3a3a3a;
+	}
+	button svg {
+		fill: #e8e8e8;
+	}
+	body {
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	#container {
+		max-width: 800px;
+	}
+	@media screen and (max-width: 900px) {
+		#container {
+			max-width: 95%;
+		}
+	}
+	#content {
+		padding: 3rem;
+		margin: 0;
+		font-size: 1.5rem;
+		text-align: center;
+	}
+	#server-url {
+		line-height: calc(1.5rem + 0.6rem);
+		font-size: 1.5rem;
+	}
+	#server-url svg {
+		width: 1.5rem;
+		height: 1.5rem;
+	}
+	#byond-notice {
+		font-size: 1.1rem;
+		margin-top: 3rem;
+	}
+	.secondary-mirror {
+		font-size: 0.8rem;
+	}
+	#loading {
+		background: conic-gradient(
+			from var(--rotation) at 50% 250%,
+			#fff 0%,
+			#888 50%,
+			#fff 100%
+		);
+		background-clip: text;
+		animation: 2s rotate infinite;
+		color: transparent;
+	}
+	@property --rotation {
+		syntax: "<angle>";
+		initial-value: 0deg;
+		inherits: false;
+	}
+	@keyframes rotate {
+		0% {
+			--rotation: 0deg;
+		}
+		50% {
+			--rotation: 180deg;
+		}
+		100% {
+			--rotation: 360deg;
+		}
+	}
+</style>
+<script>
+	location.href = "{{ server_url }}";
+</script>
+{% endblock %}
+
+{% block content %}
+<h2><span id="loading">Now Joining...</span></h2>
+<h2 class="site-title">{{ server_name }}</h2>
+
+<div>
+	<p>
+		Having trouble loading BYOND? Press Ctrl+O to open a guest connection
+		prompt, and paste this URL.
+	</p>
+	<p id="server-url">
+		<strong><a href="{{ server_url }}">{{ server_url }}</a></strong>
+		<button onclick="navigator.clipboard.writeText('{{ server_url }}')">
+			<svg x="0px" y="0px" viewBox="0 0 115.77 122.88">
+				<g>
+					<path
+						d="M89.62,13.96v7.73h12.19h0.01v0.02c3.85,0.01,7.34,1.57,9.86,4.1c2.5,2.51,4.06,5.98,4.07,9.82h0.02v0.02 v73.27v0.01h-0.02c-0.01,3.84-1.57,7.33-4.1,9.86c-2.51,2.5-5.98,4.06-9.82,4.07v0.02h-0.02h-61.7H40.1v-0.02 c-3.84-0.01-7.34-1.57-9.86-4.1c-2.5-2.51-4.06-5.98-4.07-9.82h-0.02v-0.02V92.51H13.96h-0.01v-0.02c-3.84-0.01-7.34-1.57-9.86-4.1 c-2.5-2.51-4.06-5.98-4.07-9.82H0v-0.02V13.96v-0.01h0.02c0.01-3.85,1.58-7.34,4.1-9.86c2.51-2.5,5.98-4.06,9.82-4.07V0h0.02h61.7 h0.01v0.02c3.85,0.01,7.34,1.57,9.86,4.1c2.5,2.51,4.06,5.98,4.07,9.82h0.02V13.96L89.62,13.96z M79.04,21.69v-7.73v-0.02h0.02 c0-0.91-0.39-1.75-1.01-2.37c-0.61-0.61-1.46-1-2.37-1v0.02h-0.01h-61.7h-0.02v-0.02c-0.91,0-1.75,0.39-2.37,1.01 c-0.61,0.61-1,1.46-1,2.37h0.02v0.01v64.59v0.02h-0.02c0,0.91,0.39,1.75,1.01,2.37c0.61,0.61,1.46,1,2.37,1v-0.02h0.01h12.19V35.65 v-0.01h0.02c0.01-3.85,1.58-7.34,4.1-9.86c2.51-2.5,5.98-4.06,9.82-4.07v-0.02h0.02H79.04L79.04,21.69z M105.18,108.92V35.65v-0.02 h0.02c0-0.91-0.39-1.75-1.01-2.37c-0.61-0.61-1.46-1-2.37-1v0.02h-0.01h-61.7h-0.02v-0.02c-0.91,0-1.75,0.39-2.37,1.01 c-0.61,0.61-1,1.46-1,2.37h0.02v0.01v73.27v0.02h-0.02c0,0.91,0.39,1.75,1.01,2.37c0.61,0.61,1.46,1,2.37,1v-0.02h0.01h61.7h0.02 v0.02c0.91,0,1.75-0.39,2.37-1.01c0.61-0.61,1-1.46,1-2.37h-0.02V108.92L105.18,108.92z"
+					/>
+				</g>
+			</svg>
+		</button>
+	</p>
+	<p id="byond-notice">
+		Don't have BYOND?
+		<a
+			href="https://www.byond.com/download/"
+			target="_blank"
+			rel="noopener noreferrer"
+		>
+			Download it here
+		</a>
+		<br />
+		<a
+			href="https://web.archive.org/web/20250603195450/https://www.byond.com/download/build/515/515.1647_byond.exe"
+			target="_blank"
+			rel="noopener noreferrer"
+			class="secondary-mirror"
+		>
+			515.1647 (Mirrored)
+		</a>
+		<br />
+		<a
+			href="https://spacestation13.github.io/byond-builds/"
+			target="_blank"
+			rel="noopener noreferrer"
+			class="secondary-mirror"
+		>
+			Unofficial BYOND Mirror
+		</a>
+	</p>
+</div>
+{% endblock %}

src/beesite/templates/layout_minimal.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta property="og:type"  content="website" />
+    <meta property="og:image" content="http://beestation13.com/static/img/logo.png" />
+    <meta property="og:url" content="{{ request.url }}" />
+    <meta name="description"  content="{{ cfg.WEBSITE["description"] }}"/>
+    <meta property="og:description" content="{{ cfg.WEBSITE["description"] }}" />
+
+    {% block head %}
+
+    {% endblock %}
+
+    <link   rel="stylesheet" href="/static/css/main.css">
+
+    <title>BeeStation - {% block title %}{% endblock %}</title>
+    <style>#ac-{% block active %}{% endblock %} {border-bottom: solid var(--bee-yellow) var(--bee-border-thick) !important;}</style>
+  </head>
+
+
+  <body>
+  <div id="container">
+    <div id="content">
+      {% block content %}{% endblock %}
+    </div>
+  </div>
+  </body>
+</html>