From 7bfe11502bd7a9e4548b9a26f8bcff300beb9ef4 Mon Sep 17 00:00:00 2001
From: qnpati <qnpati@escpe.net>
Date: Tue, 4 Feb 2025 17:42:14 +0100
Subject: [PATCH] added eastereggs. spoilers beware
---
.gitattributes | 1 +
assets/css/its.css | 56 +++-
assets/js/its.js | 380 +++++++++++++++++++++++++
layouts/partials/widgets/nixie.html | 1 +
static/images/eastereggs/nyancat.gif | 3 +
static/images/eastereggs/pacman.gif | 3 +
static/videos/eastereggs/guesswhat.mp4 | 3 +
7 files changed, 443 insertions(+), 4 deletions(-)
create mode 100644 static/images/eastereggs/nyancat.gif
create mode 100644 static/images/eastereggs/pacman.gif
create mode 100644 static/videos/eastereggs/guesswhat.mp4
diff --git a/.gitattributes b/.gitattributes
index 808b975..7629dc9 100644
--- a/.gitattributes
+++ b/.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
diff --git a/assets/css/its.css b/assets/css/its.css
index d4f85df..7eecd59 100644
--- a/assets/css/its.css
+++ b/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';
diff --git a/assets/js/its.js b/assets/js/its.js
index 3f1d7d3..2691835 100644
--- a/assets/js/its.js
+++ b/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
diff --git a/layouts/partials/widgets/nixie.html b/layouts/partials/widgets/nixie.html
index 613872d..8d0c5f5 100644
--- a/layouts/partials/widgets/nixie.html
+++ b/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>
diff --git a/static/images/eastereggs/nyancat.gif b/static/images/eastereggs/nyancat.gif
new file mode 100644
index 0000000..f31cafa
--- /dev/null
+++ b/static/images/eastereggs/nyancat.gif
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6de2edc432d67a20a0d05382ff4672468de9c5bc689c4bebf1c868c9d37dd726
+size 50119
diff --git a/static/images/eastereggs/pacman.gif b/static/images/eastereggs/pacman.gif
new file mode 100644
index 0000000..afc6808
--- /dev/null
+++ b/static/images/eastereggs/pacman.gif
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:47541e4507ccb1a056fd3b78243840728445c2ebba9723a9b7c0f0fccce14bf2
+size 1860
diff --git a/static/videos/eastereggs/guesswhat.mp4 b/static/videos/eastereggs/guesswhat.mp4
new file mode 100644
index 0000000..79cc6c0
--- /dev/null
+++ b/static/videos/eastereggs/guesswhat.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:10b7fc32395f116ada31c429a94a3ae81107fc8d6bb93e15da44046e2d3ca44a
+size 83667231