added eastereggs. spoilers beware

.gitattributes

@@ -6,3 +6,4 @@
 *.ttf filter=lfs diff=lfs merge=lfs -text
 *.woff filter=lfs diff=lfs merge=lfs -text
 *.woff2 filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text

assets/css/its.css

@@ -1,3 +1,9 @@
+:root {
+	--nixie-orange: orange;
+	--nixie-orange-glow: #ffa500;
+	--nixie-green: #17e129;
+}
+
 .sensor-table * {
 	border: none;
 }
@@ -40,8 +46,10 @@ code {
 
 .tube {
 	padding: 0.5rem;
+	width: 1.8rem;
+	text-align: center;
 	box-shadow: inset 0 0 25px 10px rgba(0,0,0,0.45);
-	color: orange;
+	color: var(--nixie-orange);
 	border-radius: 10px 10px 0 0;
 	border: 0.15rem solid rgb(20, 20, 20);
 	position: relative;
@@ -62,7 +70,7 @@ code {
 
 .tube > span {
     color: #FAE48E;
-    text-shadow: 2px 0 3px #ffa500, -2px 0 3px #ffa500, 0 2px 3px #ffa500, 0 -2px 3px #ffa500, 0 0 1rem #ffa500, 0 0 2rem #ffa500, 0 0 2rem #ffa500, 0 0 3rem #ffa500;
+    text-shadow: 2px 0 3px var(--nixie-orange), -2px 0 3px var(--nixie-orange), 0 2px 3px var(--nixie-orange), 0 -2px 3px var(--nixie-orange), 0 0 1rem var(--nixie-orange), 0 0 2rem var(--nixie-orange), 0 0 2rem var(--nixie-orange), 0 0 3rem var(--nixie-orange);
     opacity: 1;
     display: inline-block;
     animation: glow 1s infinite;
@@ -80,13 +88,53 @@ code {
 
 @keyframes glow {
     0%, 100% {
-        text-shadow: 2px 0 3px #ffa500, -2px 0 3px #ffa500, 0 2px 3px #ffa500, 0 -2px 3px #ffa500, 0 0 1rem #ffa500, 0 0 2rem #ffa500, 0 0 2rem #ffa500, 0 0 3rem #ffa500;
+        text-shadow: 2px 0 3px var(--nixie-orange), -2px 0 3px var(--nixie-orange), 0 2px 3px var(--nixie-orange), 0 -2px 3px var(--nixie-orange), 0 0 1rem var(--nixie-orange), 0 0 2rem var(--nixie-orange), 0 0 2rem var(--nixie-orange), 0 0 3rem var(--nixie-orange);
     }
     50% {
-        text-shadow: 2px 0 4px #ffa500, -2px 0 4px #ffa500, 0 2px 4px #ffa500, 0 -2px 4px #ffa500, 0 0 1.5rem #ffa500, 0 0 3rem #ffa500, 0 0 3rem #ffa500, 0 0 4rem #ffa500;
+        text-shadow: 2px 0 4px var(--nixie-orange), -2px 0 4px var(--nixie-orange), 0 2px 4px var(--nixie-orange), 0 -2px 4px var(--nixie-orange), 0 0 1.5rem var(--nixie-orange), 0 0 3rem var(--nixie-orange), 0 0 3rem var(--nixie-orange), 0 0 4rem var(--nixie-orange);
     }
 }
 
+#nyan-cat {
+    position: fixed;
+    top: 50%;
+    left: -200px; /* Start off-screen */
+    transform: translateY(-50%);
+    animation: nyanFly 10s linear infinite;
+}
+
+@keyframes nyanFly {
+    0% {
+        left: -200px;
+    }
+    100% {
+        left: 100%;
+    }
+}
+
+#pac-man {
+	position: absolute;
+	top: 23.5%;
+	left: -100px; /* Start off-screen */
+	z-index: 100;
+	transform: translateY(-50%);
+	transform: rotate(180deg);
+	animation: pacManMove 10s linear forwards;
+}
+
+#pac-man img {
+	width: 50px;
+}
+
+@keyframes pacManMove {
+	0% {
+		left: -100px;
+	}
+	100% {
+		left: 100%;
+	}
+}
+
 /*** FONTS ***/
 @font-face {
   font-family: 'Perfect DOS VGA437';

assets/js/its.js

@@ -31,6 +31,7 @@ async function signalGlitch(minDelay, maxDelay) {
  * @param {string} content the content to be displayed in the nixie tubes.
  */
 function setNixieContent(content) {
+	content = content.toUpperCase();
 	let tube_boxes = document.getElementsByClassName("tube-box");
 	Array.prototype.forEach.call(tube_boxes, (tube_box, index) => {
 		let tubes = tube_box.getElementsByClassName("tube");
@@ -45,6 +46,385 @@ function setNixieContent(content) {
 	});
 }
 
+/**
+ * changes the colors of the nixies.
+ * @param {string} color can be a variable or hexcode.
+ */
+function setNixieColor(color) {
+	document.documentElement.style.setProperty('--nixie-orange', color);
+}
+
+// The Easter Egg Section. Beware of spoilers!
+// the variable names are bad on purpose to prevent spoilers ;)
+/* ദ്ദി •⩊• )
+⠀⠀⠀⠀⠀⠀⠀⠀⢀⣶⣿⣷⣶⣶⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⣿⣿⣿⣿⣿⣿⣿⣷⣤⣤⣴⣶⣶⣶⣶⣶⣶⣶⣶⣶⣦⣤⣤⣀⡀⠀⠀⠀⠀⠀⠀⢀⣀⣀⣤⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣾⣿⣿⣿⡿⢛⣿⣿⠿⠟⠋⠉⠁⡀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠉⠙⠛⠿⠿⣶⣦⣄⣀⣴⣿⣿⣿⣿⣿⣧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⣠⣾⣿⣿⣿⣿⣿⣾⠿⠋⠁⠀⠀⠀⠠⠛⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠻⢿⣿⣿⣿⣿⣿⣿⣿⣷⡀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⢀⣴⣿⣿⣿⣿⣿⣿⠟⠁⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢦⡄⠀⠻⣿⣿⣿⣿⣿⣿⣿⣷⡄⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⣴⣿⣿⣿⣿⣿⣿⡟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢤⡀⠀⠀⠀⠀⠀⠀⠀⠙⢷⡀⠈⢿⣿⣿⣿⣿⣿⣿⣿⣄⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⢾⣿⣿⣿⣿⣿⣿⠏⠀⠀⠀⠀⡀⠀⠀⠀⢠⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⣆⠀⠀⠀⠀⠀⠀⠀⠈⠻⣦⣾⣿⣿⠿⢿⣿⣿⣿⣿⣆⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠻⣿⣿⣿⣿⠃⠀⠀⠀⠀⣠⠂⠀⠀⠀⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣧⡀⠀⠀⠀⠀⠀⠀⠀⠹⣿⣿⣿⣧⠘⢿⣿⣿⣿⣿⣆⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠙⣿⣿⠇⠀⠀⠀⠀⢠⡟⠀⠀⢀⣴⣿⡇⠀⠀⠀⠀⠀⠀⣴⡄⠀⠀⠀⠀⠀⠘⣷⡀⠀⠀⠀⠀⠀⠀⠀⠹⣿⣿⣿⣇⠘⢿⣿⣿⣿⣿⣆⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⢰⣿⡟⠀⠀⠀⠀⠀⣼⠃⠀⢠⣾⠋⠸⣿⠀⡄⠀⠀⠀⠀⣿⣿⣄⠀⠀⢠⡀⠀⠸⣷⡀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⡄⢘⣿⣿⣿⣿⣿⠂⠀⠀
+⠀⠀⠀⠀⠀⠀⣿⣿⣷⠄⠀⠀⠀⢰⣿⠀⣰⡿⠧⠤⣤⣿⡆⣷⠀⠀⠀⠀⣿⠉⢿⣦⠀⠘⣿⣦⡀⢻⣷⡀⠀⠀⠀⠀⠀⠀⢹⣿⣿⣿⣷⣿⣿⣿⣿⡿⠁⠀⠀⠀
+⠀⠀⠀⠀⠀⢸⣿⣿⣿⠀⠀⠀⠀⢸⣿⣰⡿⠁⠀⠀⠀⠘⣿⣿⣇⠀⠀⠀⣿⠀⠠⣿⣷⡶⣿⡿⢿⣮⣿⣇⠀⠀⠀⠀⠀⠀⠸⣿⣿⣿⣿⣿⣿⣿⣿⡂⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⣾⡿⢿⣿⠀⠀⠀⠀⣸⣿⣿⣷⣿⣷⣦⣄⠀⣹⣿⣿⡄⠀⠀⣿⠀⠀⠀⠘⠿⣿⣧⠈⠻⣿⣿⡀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⠏⠘⣿⣇⠀⠀⠀⠀
+⠀⠀⠀⠀⢀⣿⠇⢸⡿⢾⡄⠀⠀⣿⣿⠋⢱⣿⣿⣿⣿⣷⡟⢻⣿⣷⡀⠀⣿⡀⢠⣤⢀⣠⣬⣿⣤⣄⡘⢿⡇⠀⠀⠀⢸⡀⠀⢿⣿⣿⣿⣇⠀⠀⢿⣿⠀⠀⠀⠀
+⠀⠀⠀⠀⢸⣿⠀⢸⡇⢸⡇⠀⠀⣿⣿⠀⣿⣿⣿⣿⣯⣉⣿⠀⠹⣿⣿⡄⢹⡇⢈⣴⣿⣿⣿⣿⣿⡿⣿⣿⣇⠀⠀⠀⢸⡇⠀⢸⣿⣿⣿⣿⠀⠀⢸⣿⠂⠀⠀⠀
+⠀⠀⠀⠀⣿⡏⠀⣸⡇⣸⣿⡀⠀⣿⣷⠀⢻⣿⠛⠉⠻⣿⡇⠀⠀⠈⢿⣿⣼⣿⠘⣿⣿⣿⣿⣏⣹⡇⠘⣿⣿⠀⠀⠀⣾⡇⠀⢸⣇⣿⣿⣿⡀⠀⠈⣿⡇⠀⠀⠀
+⠀⠀⠀⢀⣿⠇⠀⣿⣿⣿⣿⣇⠀⣿⡇⠀⠀⠙⠳⠶⠾⠋⠀⠀⠀⠀⠀⠙⠿⣿⣇⢻⣿⠛⠛⠻⣿⡇⠰⣿⡿⠀⠀⢠⣿⣿⣦⡀⣿⣿⣿⣿⡇⠀⠀⣿⣷⠀⠀⠀
+⠀⠀⠀⣸⣿⠀⠀⣿⣿⣿⣿⣿⡄⢹⣿⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠋⠀⠻⠷⠴⠾⠋⠀⠀⣸⡇⠀⠀⣾⣿⣿⡿⢿⣿⣿⣿⣿⡇⠀⠀⢹⣿⠀⠀⠀
+⠀⠀⠀⣿⡇⣴⠀⣿⣿⣿⡏⠹⣿⣾⣿⣿⣧⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⠃⢀⣾⣿⣿⣿⠁⠀⠀⣿⣿⣿⡇⠀⠀⢸⣿⠁⠀⠀
+⠀⠀⢀⣿⠃⣿⢸⣿⣿⣿⡇⠀⠘⢿⣿⣿⣿⣿⡻⢶⣤⣀⡀⠀⠐⠶⠤⠴⠆⠀⠀⠀⠀⠀⠀⢀⣠⣴⣾⡏⣠⣿⣿⣿⡿⠃⠀⠀⠀⢻⣿⣿⡇⠀⠀⠈⣿⡇⠀⠀
+⠀⠀⣸⣿⠀⣿⢸⣿⣿⣿⠀⠀⠀⠈⠻⠟⠻⣿⣿⣿⣿⣿⣿⣿⡷⢶⣶⣶⣦⣶⣶⣶⣶⣶⣿⠿⢟⣿⣿⣾⠟⠉⠉⠉⠀⠀⠀⠀⠀⢸⣿⣿⣿⠀⠀⠀⣿⣇⠀⠀
+⠀⠀⣿⡇⠀⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠈⠛⠿⢿⣿⣟⡹⣷⣴⡿⣿⣅⣰⣿⠋⠙⣿⣄⠀⠸⠿⠛⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⠀⠀⠀⢿⣿⠀⠀
+⠀⢸⣿⠀⠀⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣿⣿⣿⠃⠈⢹⣷⣾⠋⠉⢷⡄⢶⣾⣿⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⠀⠀⠀⢸⣿⠀⠀
+⠀⣾⡏⠀⠀⣿⣿⣿⣿⡏⠀⠀⠀⠀⠀⠀⠀⢀⣼⣿⣿⣿⣿⢠⠀⣼⢧⣿⠉⢉⠹⣿⣾⣿⣿⣿⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⠀⠀⠀⠸⣿⡄⠀
+⢠⣿⠇⠀⠀⢻⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⣠⣿⣿⣿⣿⣿⣿⢸⢀⣿⠀⣿⠀⠀⠀⠈⢿⣿⣿⣿⣿⣧⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⠀⠀⠀⠀⣿⡇⠀
+⢸⣿⠀⠀⠀⢸⣿⣿⣿⡇⠀⠀⠀⠀⣠⣾⣿⣿⣿⣿⣿⣫⡿⡆⢸⣿⡆⣿⠀⠀⠀⠀⣾⣿⣿⣿⣿⣿⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣿⣿⣿⠀⠀⠀⠀⣿⣷⠀
+⢸⣿⡄⠀⠀⠈⣿⣿⣿⣧⠀⠀⠀⢠⣿⣿⣿⣿⣿⣿⣻⡟⡹⠁⣼⡟⠃⣿⡀⢸⡄⠀⠘⣿⣿⣿⣿⣿⣿⣿⣦⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⡇⠀⠀⠀⠀⢹⣿⡄
+⢸⣿⣧⠀⠀⠀⢹⣿⣿⣿⠀⠀⠀⢸⣇⣈⣿⣿⣿⣿⣟⡘⠁⠀⣹⣷⣶⣟⠁⠀⢳⣀⣀⣘⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⠃⠀⢰⠀⠀⠘⣿⡇
+⢸⣿⣿⡄⠀⠀⠈⣿⣿⣿⠀⠀⠀⠀⠛⠛⠛⢉⣼⣿⣿⣿⣧⣴⣿⣿⣿⣿⣆⢠⣶⣿⣿⣿⣿⣿⣿⣿⣿⡿⢿⣇⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⠀⠀⣿⠀⠀⠀⣿⣧
+⠘⣿⣿⣷⡀⠀⠀⠸⣿⣿⡆⠀⠀⠀⠀⠀⠀⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣤⣾⡟⠀⠀⠀⠀⠀⠀⠀⣿⣿⠇⠀⢠⣿⠀⠀⠀⣿⣧
+⠀⢻⣿⣿⣷⣄⠀⠀⢻⣿⣷⠀⠀⠀⠀⠀⠀⠀⠙⠿⣿⣿⣟⣻⣿⣿⣿⣿⣿⣿⣟⣻⣿⣿⣷⡿⠟⠁⠀⠉⠀⠀⠀⠀⠀⠀⠀⠀⢠⣿⡟⠀⠀⣾⣿⠀⠀⠀⣿⡏
+⠀⠀⠹⣿⣿⣿⣷⣄⠀⢿⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⠈⢹⣯⣭⣿⣿⣿⣿⢻⣛⣉⣉⣁⣰⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣼⡿⠁⠀⣼⣿⡏⠀⠀⣼⣿⠁
+⠀⠀⠀⠘⢿⣿⣿⣿⣷⣾⣿⣿⣆⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⣿⠃⢀⣾⣿⣿⠃⢀⣼⣿⠋⠀
+⠀⠀⠀⠀⠀⠙⠻⣿⣿⣿⣿⣿⣿⣦⠀⠀⠀⠀⠀⠀⠀⠈⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣴⡿⢃⣴⣿⣿⣿⣟⣴⣿⡿⠁⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠈⠙⠛⠛⠛⠿⠿⠃⠀⠀⠀⠀⠀⠀⠀⢹⣿⣿⣿⣿⣿⡿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⠟⠋⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⣿⣿⠀⣿⣿⣿⣿⣿⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠻⠿⠿⠿⠟⠛⠛⠛⠋⠁⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠛⠿⠟⠛⠁⠀⢿⣿⣿⣿⡿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+*/
+// cause everything is better with rainbows.
+function nixieRainbow() {
+	const tubeSpans = document.querySelectorAll('.tube>span');
+	const numberOfSpans = tubeSpans.length;
+	
+	tubeSpans.forEach((span, index) => {
+		const hue = Math.floor((360 / numberOfSpans) * index);
+		const color = `hsl(${hue}, 100%, 50%)`;
+		span.style.color = color;
+		span.style.textShadow = `2px 0 3px ${color}, 
+									-2px 0 3px ${color}, 
+									0 2px 3px ${color}, 
+									0 -2px 3px ${color}, 
+									0 0 1rem ${color}, 
+									0 0 2rem ${color}, 
+									0 0 2rem ${color}, 
+									0 0 3rem ${color}`;
+		span.style.animation = 'none';
+	});
+}
+
+function resetNixieRainbow() {
+    const tubeSpans = document.querySelectorAll('.tube>span');
+    
+    tubeSpans.forEach((span) => {
+        span.style.color = '';
+        span.style.textShadow = '';
+        span.style.animation = '';
+    });
+}
+
+function handleInput(event) {
+	let typedText = event.target.value;
+
+	setNixieContent(typedText);
+	inputCodeCheck(typedText);
+}
+
+function inputCodeCheck(typedText) {
+	switch(typedText.toLowerCase()) {
+		case "(){:;}":
+			shellShock();
+			break;
+		case "matrix":
+			matrix();
+			break;
+		case "barrel":
+			barrel();
+			break;
+		case "astley":
+			astley();
+			break;
+		case "kawaii":
+			nyan_cat();
+			break;
+		case "pacman":
+			pacman();
+			break;
+		case "gamble":
+			gamble();
+			break;
+		case "drkhsh":
+			drkhsh();
+			break;
+	}
+}
+
+const code = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
+const code_two = [48, 49, 49, 56, 57, 57, 57, 56, 56, 49, 57, 57, 57, 49, 49, 57, 55, 50, 53, 51];
+
+let currentStepOne = 0;
+let currentStepTwo = 0;
+let codeEntered = false;
+
+// Function to check the key sequence
+function checkSequence(e) {
+	if (!codeEntered) {
+		if (e.keyCode === code[currentStepOne]) {
+			currentStepOne++;
+			if (currentStepOne === code.length) {
+				codeEntered = true;
+				currentStepOne = 0;
+				setNixieColor('var(--nixie-green)');
+				setNixieContent("ITCRWD");
+				let search_field = document.getElementsByClassName("widget-search__field")[0];
+				search_field.placeholder = 'Emergency Services';
+			}
+		} else {
+			currentStepOne = 0;
+		}
+	} else {
+		if (e.keyCode === code_two[currentStepTwo]) {
+			currentStepTwo++;
+			if (currentStepTwo === code_two.length) {
+				nixieRainbow();
+				let search_field = document.getElementsByClassName("widget-search__field")[0];
+				search_field.placeholder = 'user@it-syndikat:~$';
+				setTimeout(() => {
+					search_field.value = '';
+					search_field.blur();
+					setNixieContent('UNLCKD');
+				}, 0);
+				search_field.addEventListener('input', handleInput);
+				currentStepTwo = 0;
+				codeEntered = false;
+			}
+		} else {
+			currentStepTwo = 0;
+		}
+	}
+}
+
+// Add event listener for keydown events
+window.addEventListener('keydown', checkSequence);
+
+function shuffleArray(array) {
+	for (let i = array.length - 1; i > 0; i--) {
+		const j = Math.floor(Math.random() * (i + 1));
+		[array[i], array[j]] = [array[j], array[i]];
+	}
+	return array;
+}
+
+function shuffleString(inputString, charSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+[]{}|;:,.<>?') {
+    let characters = inputString.split('');
+
+    for (let i = 0; i < inputString.length; i++) {
+        characters.push(charSet[Math.floor(Math.random() * charSet.length)]);
+    }
+
+    for (let i = characters.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [characters[i], characters[j]] = [characters[j], characters[i]];
+    }
+
+    return characters.join('');
+}
+
+function shellShock() {
+	resetNixieRainbow();
+	setNixieColor('red');
+	let all = document.body.querySelectorAll('*');
+	const shuffledElements = shuffleArray(Array.from(all));
+
+	shuffledElements.forEach((element, index) => {
+		setTimeout(() => {
+			element.style.display = 'none';
+			if (index === shuffledElements.length - 1) {
+				setTimeout(() => {
+					document.body.innerText = "But nobody came.";
+				}, 100);
+			}
+		}, index * 100);
+	});
+}
+
+function matrix() {
+	resetNixieRainbow();
+	setNixieColor('var(--nixie-green)');
+	setInterval(() => {
+		setNixieContent(shuffleString('matrix'));
+	}, 100);
+}
+
+function barrel() {
+	document.body.style.transition = 'transform 5s';
+	document.body.style.transform = 'rotate(360deg)';
+  
+	setTimeout(() => {
+	  document.body.style.transition = '';
+	  document.body.style.transform = '';
+	}, 5000);
+}
+
+function astley() {
+	let primary = document.querySelector('.primary');
+	let sidebar = document.querySelector('.sidebar');
+	primary.style.display = 'none';
+	sidebar.style.display = 'none';
+	let wrapper = document.querySelector('.wrapper.flex');
+	const div = document.createElement('div');
+    div.innerHTML = `
+		<video width="560" height="315" autoplay><source src="/videos/eastereggs/guesswhat.mp4" type="video/mp4"></video>`;
+	wrapper.appendChild(div);
+}
+
+function nyan_cat() {
+    const nyanCatDiv = document.createElement('div');
+    nyanCatDiv.id = 'nyan-cat';
+    
+    const nyanCatImg = document.createElement('img');
+    nyanCatImg.src = '/images/eastereggs/nyancat.gif';
+    nyanCatImg.alt = 'Nyan Cat';
+    
+    nyanCatDiv.appendChild(nyanCatImg);
+    
+    document.body.appendChild(nyanCatDiv);
+}
+
+function pacman() {
+	resetNixieRainbow();
+	setNixieColor('yellow');
+    const pacManDiv = document.createElement('div');
+    pacManDiv.id = 'pac-man';
+    pacManDiv.innerHTML = `
+        <img src="/images/eastereggs/pacman.gif" alt="Pac-Man">
+    `;
+
+    document.body.appendChild(pacManDiv);
+	
+    const elements = document.querySelectorAll('.menu__item, .tube, .tube>span');
+    
+	function checkCollision() {
+        const rect1 = pacManDiv.getBoundingClientRect();
+
+        elements.forEach((element) => {
+            const rect2 = element.getBoundingClientRect();
+
+            if (
+                rect1.left < rect2.left + rect2.width &&
+                rect1.left + rect1.width > rect2.left &&
+                rect1.top < rect2.top + rect2.height &&
+                rect1.top + rect1.height > rect2.top
+            ) {
+				if (element.nodeName === "LI") {
+					element.style.visibility = 'hidden';
+				} else {
+					element.style.display = 'none';
+				}
+            }
+        });
+
+        // Continue checking for collisions
+        requestAnimationFrame(checkCollision);
+    }
+	
+	// Continue checking for collisions
+	requestAnimationFrame(checkCollision);
+}
+
+function gamble() {
+	// make lever
+	let tubeBoxes = document.querySelectorAll('.tube-box');
+    tubeBoxes.forEach(tubeBox => {
+	let lever = document.createElement('button');
+	lever.textContent = 'Go';
+	lever.classList.add('btn');
+	lever.addEventListener('click', startSlotMachine);
+	tubeBox.prepend(lever);
+	// amount display
+	let amountSpan = document.createElement('span');
+	amountSpan.textContent = "1337€";
+	amountSpan.id = "score";
+	tubeBox.insertBefore(amountSpan, lever);
+    });
+}
+
+let intervalId;
+
+function startSlotMachine() {
+	intervalId = setInterval(() => {
+		setNixieContent(shuffleString('gamble'));
+	}, 100);
+
+	setTimeout(stopSlotMachine, 2000);
+}
+
+function stopSlotMachine() {
+	clearInterval(intervalId);
+	// evaluate
+	let matches = countMatches();
+	let score = evaluateScore(matches);
+	applyScore(score);
+}
+
+function countMatches() {
+	let tubes = document.querySelectorAll('.tube>span');
+
+	let symbols = Array.from(tubes).map(tube => tube.textContent);
+	symbols.splice(-6);
+
+	const symbolCounts = symbols.reduce((acc, symbol) => {
+	  acc[symbol] = (acc[symbol] || 0) + 1;
+	  return acc;
+	}, {});
+
+	return Math.max(...Object.values(symbolCounts));
+}
+
+function evaluateScore(matches) {
+	let score;
+	switch (matches) {
+        case 6:
+          score = 1337;
+          break;
+        case 5:
+          score = 420;
+          break;
+        case 4:
+          score = 69;
+          break;
+        case 3:
+          score = 13;
+          break;
+        case 2:
+          score = 5;
+          break;
+        default:
+          score = -25; // No matches or only 1 match
+      }
+	return score;
+}
+
+function applyScore(score) {
+	// ik this is hacky, but it works
+	let scoreSpan = document.querySelectorAll('#score')[1];
+	let scoreNum = parseFloat(scoreSpan.textContent);
+	scoreNum += score;
+	scoreSpan.textContent = `${scoreNum}€`;
+	if(scoreNum <= 0) {
+		setNixieColor('red');
+		setNixieContent('DEATH💀')
+	}
+}
+
+function drkhsh() {
+	resetNixieRainbow();
+	setNixieColor('#a507b5');
+}
+
 window.onload = () => {
 	fetch(spaceApiUrl)
 		.then((response) => response.json()) // Parse the JSON from the response

layouts/partials/widgets/nixie.html

@@ -1,4 +1,5 @@
 <div class="tube-box" id="status-tube">
+	<!-- Playing Contra and I need more lives -->
 	<div class="tube"><span>?</span></div>
 	<div class="tube"><span>!</span></div>
 	<div class="tube"><span>?</span></div>