From 629c12143f6045ef27d1f6da5f4f345a695f467f Mon Sep 17 00:00:00 2001
From: Anton <dev@atjn.dk>
Date: Wed, 25 Dec 2024 10:54:38 +0100
Subject: [PATCH] Make popup qr codes for external links (#541)

---
 .../stregsystem/external_link_qrs/code.svg    | 15 ++++++
 .../stregsystem/external_link_qrs/tos.svg     | 15 ++++++
 .../static/stregsystem/stregsystem.css        | 47 +++++++++++++++----
 stregsystem/templates/stregsystem/base.html   |  4 +-
 stregsystem/templates/stregsystem/cross.html  | 13 +++++
 .../templates/stregsystem/external_link.html  | 11 +++++
 6 files changed, 95 insertions(+), 10 deletions(-)
 create mode 100644 stregsystem/static/stregsystem/external_link_qrs/code.svg
 create mode 100644 stregsystem/static/stregsystem/external_link_qrs/tos.svg
 create mode 100644 stregsystem/templates/stregsystem/cross.html
 create mode 100644 stregsystem/templates/stregsystem/external_link.html

diff --git a/stregsystem/static/stregsystem/external_link_qrs/code.svg b/stregsystem/static/stregsystem/external_link_qrs/code.svg
new file mode 100644
index 00000000..87472928
--- /dev/null
+++ b/stregsystem/static/stregsystem/external_link_qrs/code.svg
@@ -0,0 +1,15 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	version="1.1"
+	viewBox="0 0 296 296"
+	width="296"
+	height="296"
+	style="color-scheme: light dark"
+>
+	<title>https://github.com/f-klubben/stregsystemet</title>
+	<path
+		fill="currentcolor"
+		d="M32 32h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 48h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm8-224h8v8h-8zm0 48h8v8h-8zm0 32h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 48h8v8h-8zm0 48h8v8h-8zm8-224h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 32h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm8-224h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm8-224h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm8-224h8v8h-8zm0 48h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 32h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 32h8v8h-8zm0 48h8v8h-8zm8-224h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm8-160h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 48h8v8h-8zm8-152h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm8-216h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 32h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 32h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 40h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm8-208h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 24h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 32h8v8h-8zm0 8h8v8h-8zm0 40h8v8h-8zm0 8h8v8h-8zm8-216h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 32h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 40h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm8-168h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 32h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm8-200h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 32h8v8h-8zm0 56h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 40h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm8-208h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 48h8v8h-8zm0 32h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm8-200h8v8h-8zm0 8h8v8h-8zm0 32h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm8-216h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 32h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 40h8v8h-8zm0 56h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm8-200h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 24h8v8h-8zm0 24h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm8-208h8v8h-8zm0 16h8v8h-8zm0 32h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 32h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm8-192h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 32h8v8h-8zm8-200h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 32h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm8-160h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 24h8v8h-8zm0 16h8v8h-8zm0 32h8v8h-8zm0 32h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm8-208h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 40h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 40h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm8-224h8v8h-8zm0 48h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 40h8v8h-8zm0 32h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm8-216h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm8-224h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 40h8v8h-8zm0 16h8v8h-8zm0 24h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 24h8v8h-8zm8-216h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 48h8v8h-8zm0 8h8v8h-8zm8-216h8v8h-8zm0 48h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 32h8v8h-8zm0 32h8v8h-8zm0 24h8v8h-8zm0 32h8v8h-8zm0 16h8v8h-8zm8-208h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 56h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8z"
+	/>
+</svg>
diff --git a/stregsystem/static/stregsystem/external_link_qrs/tos.svg b/stregsystem/static/stregsystem/external_link_qrs/tos.svg
new file mode 100644
index 00000000..497dad83
--- /dev/null
+++ b/stregsystem/static/stregsystem/external_link_qrs/tos.svg
@@ -0,0 +1,15 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	version="1.1"
+	viewBox="0 0 264 264"
+	width="264"
+	height="264"
+	style="color-scheme: light dark"
+>
+	<title>https://fklub.dk/tos</title>
+	<path
+		fill="currentcolor"
+		d="M32 32h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 16h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm8-192h8v8h-8zm0 48h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 48h8v8h-8zm8-192h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm8-192h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 32h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm8-192h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 24h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm8-192h8v8h-8zm0 48h8v8h-8zm0 24h8v8h-8zm0 24h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 48h8v8h-8zm8-192h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm8-128h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm8-128h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm8-184h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm8-152h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 32h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 48h8v8h-8zm8-176h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 32h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 64h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm8-192h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 32h8v8h-8zm0 24h8v8h-8zm0 56h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm8-184h8v8h-8zm0 24h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 32h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 40h8v8h-8zm0 8h8v8h-8zm8-184h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 40h8v8h-8zm0 24h8v8h-8zm0 16h8v8h-8zm8-192h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 24h8v8h-8zm0 40h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm8-184h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm8-120h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 32h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm8-192h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 32h8v8h-8zm8-192h8v8h-8zm0 48h8v8h-8zm0 64h8v8h-8zm0 16h8v8h-8zm0 32h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm8-192h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 56h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm8-184h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 32h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm8-184h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 32h8v8h-8zm0 56h8v8h-8zm8-168h8v8h-8zm0 48h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm8-192h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 8h8v8h-8zm0 8h8v8h-8zm0 24h8v8h-8zm0 8h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8zm0 16h8v8h-8z"
+	/>
+</svg>
diff --git a/stregsystem/static/stregsystem/stregsystem.css b/stregsystem/static/stregsystem/stregsystem.css
index adc73782..4f484f34 100644
--- a/stregsystem/static/stregsystem/stregsystem.css
+++ b/stregsystem/static/stregsystem/stregsystem.css
@@ -69,16 +69,47 @@ ol span {
     font-weight: normal;
 }
 
-button.linkalike {
-  background: none;
-  border: none;
+button {
   cursor: pointer;
-  font: inherit;
-  text-decoration: underline;
-  color: LinkText;
 
-  &:active{
-    color: ActiveText;
+    &.linkalike {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    text-decoration: underline;
+    color: LinkText;
+
+    &:active{
+      color: ActiveText;
+    }
+  }
+}
+
+.external-link-popover {
+  font-size: 1.5em;
+  padding: 1em;
+
+  & p {
+    margin: 0;
+  }
+  & button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: .1em;
+    background: none;
+    border: none;
+
+    & svg {
+      width: 2.2em;
+      height: 2.2em;
+    }
+  }
+  & img {
+    width: 100vw;
+    max-width: 40vmin;
+    max-height: 40vmin;
   }
 }
 
diff --git a/stregsystem/templates/stregsystem/base.html b/stregsystem/templates/stregsystem/base.html
index 4995a244..2a977cb4 100644
--- a/stregsystem/templates/stregsystem/base.html
+++ b/stregsystem/templates/stregsystem/base.html
@@ -53,8 +53,8 @@ <h1>
   </div>
   <ul id="footer-notes">
     <li>Skabt med ☕ og 🖤 af Fklubben</li>
-    <li><a target="_blank" href="https://fklub.dk/tos">Terms of Service</a></li>
-    <li><a target="_blank" href="https://github.com/f-klubben/stregsystemet">Se koden</a></li>
+    <li>{% include "./external_link.html" with id="tos" href="https://fklub.dk/tos" text="Terms of Service" %}</li>
+    <li>{% include "./external_link.html" with id="code" href="https://github.com/f-klubben/stregsystemet" text="Se koden" %}</li>
   </ul>
 </footer>
 {% theme_content %}
diff --git a/stregsystem/templates/stregsystem/cross.html b/stregsystem/templates/stregsystem/cross.html
new file mode 100644
index 00000000..156ae2f2
--- /dev/null
+++ b/stregsystem/templates/stregsystem/cross.html
@@ -0,0 +1,13 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	version="1.1"
+	viewBox="0 -960 960 960"
+	width="24"
+	height="24"
+>
+	<title>{{ title }}</title>
+	<path
+		fill="currentcolor"
+		d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"
+	/>
+</svg>
diff --git a/stregsystem/templates/stregsystem/external_link.html b/stregsystem/templates/stregsystem/external_link.html
new file mode 100644
index 00000000..62794620
--- /dev/null
+++ b/stregsystem/templates/stregsystem/external_link.html
@@ -0,0 +1,11 @@
+{% load static %}
+
+<button class="external-link" popovertarget="external-link-popover-{{ id }}">
+	{{ text }}
+</button>
+<div popover id="external-link-popover-{{ id }}" class="external-link-popover">
+	<p>{{ text }}</p>
+	<button autofocus popovertarget="external-link-popover-{{ id }}">{% include "./cross.html" with title="Luk" %}</button>
+	<img alt="" src="{% static "/stregsystem/external_link_qrs/" %}{{ id }}.svg"/>
+	<p>{{ href }}</p>
+</div>