From b9e0177c982b25af68778124519f25d350eeb826 Mon Sep 17 00:00:00 2001
From: Mark Hoekveen <mark@hoekveen.net>
Date: Fri, 23 Feb 2024 23:32:15 +0100
Subject: [PATCH] BSOD En het lekkerste recept voor suikerbrood

---
 playlist/static/bsod.css      | 46 +++++++++++++++++++++++++++++++++++
 playlist/static/style.css     |  2 +-
 playlist/templates/Login.html | 32 +++++++++++++++++++++++-
 3 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 playlist/static/bsod.css

diff --git a/playlist/static/bsod.css b/playlist/static/bsod.css
new file mode 100644
index 0000000..0431c82
--- /dev/null
+++ b/playlist/static/bsod.css
@@ -0,0 +1,46 @@
+/* Based on https://codepen.io/agalliat/pen/mdedZYK */
+.window {
+	display: none;
+}
+
+body {
+	display: block;
+	background-color: #000084;
+	font-family: "Pixelated MS Sans Serif", Arial;
+	margin: 10px;
+    color: #bbb;
+    font-size: 1rem;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+	font-weight: bold;
+}
+
+#bsod {
+	display: block;
+	width: 70vw;
+	flex-shrink: 1;
+	gap: 1rem;
+    display: flex;
+	flex-flow: column nowrap;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+
+#bsod h1 {
+	font-size: 1rem;
+    background-color: #bbb;
+	color: #000084;
+	padding: 1rem;
+	box-shadow: 1rem 1rem black;
+	margin: 1rem;
+	text-align: center;
+	align-self: center;
+}
+
+#bsod .continue {
+	text-align: center;
+	font-size: 1.5rem;
+}
\ No newline at end of file
diff --git a/playlist/static/style.css b/playlist/static/style.css
index 0dc0441..fcc40d0 100644
--- a/playlist/static/style.css
+++ b/playlist/static/style.css
@@ -30,7 +30,7 @@ input[type=submit] {
 	filter: contrast(1);
 }
 
-.hide {
+#bsod, .hide {
 	display: none;
 }
 
diff --git a/playlist/templates/Login.html b/playlist/templates/Login.html
index c7037df..5b7bfb0 100644
--- a/playlist/templates/Login.html
+++ b/playlist/templates/Login.html
@@ -26,11 +26,41 @@
                     <form action="{% url 'oidc_authentication_init' %}" method="get">
                       <input type="submit" value="Inloggen" class="default">
                     </form>
-                    <button>Annuleren</button>
+                    <button onclick="bsod()">Annuleren</button>
+                    <script>
+                      function bsod() {
+                        var css = document.createElement("link")
+                        css.setAttribute("rel", "stylesheet")
+                        css.setAttribute("type", "text/css")
+                        css.setAttribute("href", "{% static 'bsod.css' %}")
+                        document.getElementsByTagName("head")[0].appendChild(css)
+                      }
+                    </script>
                   </div>
                 </div>
             </div>
         </div>
     </div>
+    <div id="bsod">
+      <h1>Lekkerste recept voor suikerbrood</h1>
+      <div>* 500 gram bloem</div>
+      <div>* 1 zakje gist</div>
+      <div>* 1 theelepel kaneeel</div>
+      <div>* 3 eetlepels gembersiroop</div>
+      <div>* 200 ml melk</div>
+      <div>* 250 gram kandijsuiker</div>
+      <div>
+        Neem je bloem en zakje gist en meng dit samen met je kaneel in een kom.
+        Maak een kuiltje in het midden en schenk er gembersiroop in en lauwwarme, niet te hete, melk.
+        Meng dit tot deeg, voeg een snufje zout toe en laat dat 15 minuten staan.
+        Kneed het deeg tot een bal en laat het een uur rijzen onder een vochtige theedoek.
+        Maak van het gerezen deeg een dikke lap en verdeel er je suiker over.
+        Rol het geheel weer op en doe het over de lengte in een ingeboterde en ingesuikerde cakevorm.
+        Laat het nog een uurtje rijzen.
+        Bak het in ongeveer 30 minuten in een voorverwarmde oven op 200 graden.
+        Voilà. Suikerbrood. Eet smakelijk.
+      </div>
+      <div class="continue">Druk op F5 om verder te gaan..</div>
+    </div>
   </body>
 </html>