nixies

README.md

@@ -51,5 +51,5 @@ To build it locally run `hugo build`.
 
 This website is auto deployed using a forgejo runner and forgejo actions. A
 testing step including a linter has been included to prevent the pipeline from
-deploying broken sites. If you changes do not deploy, please check the
+deploying broken sites. If your changes do not deploy, please check the
 actions tab.

assets/css/its.css

@@ -17,6 +17,75 @@ code {
 	padding: 5px 10px;
 }
 
+.menu-status {
+	margin-left: auto;
+	margin-right: 1rem;
+	display: flex;
+	align-items: center;
+}
+
+.menu__btn-title {
+	padding-bottom: 0;
+}
+
+.tube-box {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.tube-box-title {
+	margin-left: auto;
+}
+
+.tube {
+	padding: 0.5rem;
+	box-shadow: inset 0 0 25px 10px rgba(0,0,0,0.45);
+	color: orange;
+	border-radius: 10px 10px 0 0;
+	border: 0.15rem solid rgb(20, 20, 20);
+	position: relative;
+    overflow: hidden;
+}
+
+.tube::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
+    animation: flicker 2s infinite;
+    opacity: 0.5;
+}
+
+.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;
+    opacity: 1;
+    display: inline-block;
+    animation: glow 1s infinite;
+    transition: all 0.5s ease-in-out;
+}
+
+@keyframes flicker {
+    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
+        opacity: 0.99;
+    }
+    20%, 24%, 55% {
+        opacity: 0.4;
+    }
+}
+
+@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;
+    }
+    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;
+    }
+}
 
 /*** FONTS ***/
 @font-face {

assets/js/its.js

@@ -26,6 +26,25 @@ async function signalGlitch(minDelay, maxDelay) {
   }
 }
 
+/**
+ * used to display up to 6 letters or numbers in some neat looking nixie tubes.
+ * @param {string} content the content to be displayed in the nixie tubes.
+ */
+function setNixieContent(content) {
+	let tube_boxes = document.getElementsByClassName('tube-box');
+	Array.prototype.forEach.call(tube_boxes, (tube_box, index) => {
+		let tubes = tube_box.getElementsByClassName("tube");
+		Array.prototype.forEach.call(tubes, (tube, index) => {
+			const span = tube.querySelector('span');
+			if (index < content.length) {
+				span.textContent = content.split('')[index];
+			} else {
+				span.textContent = '';
+			}
+		});
+	});
+}
+
 window.onload = () => {
   fetch(spaceApiUrl)
     .then((response) => response.json()) // Parse the JSON from the response
@@ -43,7 +62,11 @@ window.onload = () => {
           `${coreHumidityValue} %`;
         document.getElementById("status-display").textContent =
           statusValue === false ? "CLOSED" : "OPEN";
-      }
+
+		// status nixie tubes!!
+		const content = statusValue ? "OPEN<3" : "CLOSED";
+		setNixieContent(content);
+	}
     })
     .catch((error) => {
       console.error("Error fetching SpaceAPI data:", error);

layouts/partials/widgets/nixie.html

@@ -0,0 +1,9 @@
+<div class="tube-box" id="status-tube">
+	<div class="tube"><span>C</span></div>
+	<div class="tube"><span>L</span></div>
+	<div class="tube"><span>O</span></div>
+	<div class="tube"><span>S</span></div>
+	<div class="tube"><span>E</span></div>
+	<div class="tube"><span>D</span></div>
+	<span class="tube-box-title">{{ . }}</span>
+</div>

themes/mainroad

@@ -1 +1 @@
-Subproject commit 563b95aab168de8c97160750b540d5321f4bcffa
+Subproject commit c5b32fe70c70755f47210c61d68fbdba12af44c0