diff --git a/stregsystem/static/stregsystem/gdpr.js b/stregsystem/static/stregsystem/gdpr.js
deleted file mode 100644
index 7ae4f4aa..00000000
--- a/stregsystem/static/stregsystem/gdpr.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
-Hides the username after 5 seconds of showing it.
-Simply replaces the letters with 'x'.
-*/
-
-var username_element = document.querySelectorAll(".username");
-
-if (username_element.length > 0) {
-  setTimeout(function () {
-    var username_element = document.querySelectorAll(".username");
-    for (var i = 0; i < username_element.length; i++) {
-      username_element[i].innerText = "xxxxxxxx";
-    }
-    var remainingbalance_element = document.querySelectorAll(".remainingbalance");
-    for (var i = 0; i < remainingbalance_element.length; i++) {
-      remainingbalance_element[i].innerText = "xx.xx";
-    }
-  }, 5000);
-}
\ No newline at end of file
diff --git a/stregsystem/templates/stregsystem/base.html b/stregsystem/templates/stregsystem/base.html
index bc454c6c..5e5d93bd 100644
--- a/stregsystem/templates/stregsystem/base.html
+++ b/stregsystem/templates/stregsystem/base.html
@@ -58,7 +58,6 @@ <h1>
 <script async src="{% static "/stregsystem/bat.js" %}"></script>
 <script async src="{% static "/stregsystem/snow.js" %}"></script>
 <script async src="{% static "/stregsystem/easter.js" %}"></script>
-<script async src="{% static "/stregsystem/gdpr.js" %}"></script>
 <script async src="{% static "/stregsystem/bober.js" %}"></script>
 <div class="bat-container"></div>
 <div class="snow-container"></div>
diff --git a/stregsystem/templates/stregsystem/gdpr.html b/stregsystem/templates/stregsystem/gdpr.html
new file mode 100644
index 00000000..db86102a
--- /dev/null
+++ b/stregsystem/templates/stregsystem/gdpr.html
@@ -0,0 +1,44 @@
+{% comment %}
+Hides sensitive user info after 5 seconds.
+This code is inlined to ensure that the page can never load without it.
+The JS removes the text outright from the page.
+The CSS visually hides the text, and also makes the whole thing look nice.
+If JS or CSS is disabled/broken, the other solution can still remove the information,
+which means this setup is much more likely to work even in weird browsers.
+{% endcomment %}
+<style>
+	.username,
+	.remainingbalance {
+		display: inline-block;
+		padding: 0;
+		transform-origin: 50% 60%;
+		transition: width 0.3s ease;
+		animation: gdpr-blur 0.3s ease 4.7s forwards;
+	}
+	@keyframes gdpr-blur {
+		0% {
+			min-width: 0px;
+		}
+		100% {
+			background-color: currentcolor;
+			-webkit-user-select: none;
+			user-select: none;
+			filter: blur(0.3em);
+			opacity: 0.4;
+			transform: scaleY(0.7);
+			border-radius: 0.5em;
+			min-width: 35px;
+		}
+	}
+</style>
+<script type="module">
+	setTimeout(() => {
+		for (const element of document.querySelectorAll(
+			".username, .remainingbalance",
+		)) {
+			const { width } = element.getBoundingClientRect();
+			element.style.width = `${width}px`;
+			element.innerText = "_";
+		}
+	}, 5000);
+</script>
diff --git a/stregsystem/templates/stregsystem/index_sale.html b/stregsystem/templates/stregsystem/index_sale.html
index dcc641cd..9eb395bf 100644
--- a/stregsystem/templates/stregsystem/index_sale.html
+++ b/stregsystem/templates/stregsystem/index_sale.html
@@ -2,6 +2,10 @@
 
 {% load stregsystem_extras %}
 
+{% block head %}
+{{ block.super }}
+{% include "stregsystem/gdpr.html" %}
+{% endblock %}
 
 {% block message %}
 <blink>