Adding cityscape and junk

assets/js/cityscape.js

@@ -0,0 +1,76 @@
+// Configuration
+const config = {
+  buildingsFar: { count: [10, 15], windows: [10, 30] },
+  buildingsMid: { count: [6, 10], windows: [20, 40] },
+  buildingsNear: { count: [5, 10], windows: [4, 8] },
+};
+
+// Helper function to get random integer between min and max (inclusive)
+function randomInt(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+// Function to create a building with random windows
+function createBuilding(minWindows, maxWindows) {
+  const building = document.createElement("div");
+  building.className = "building";
+
+  const windowsContainer = document.createElement("div");
+  windowsContainer.className = "building-windows";
+
+  const numWindows = randomInt(minWindows, maxWindows);
+
+  for (let i = 0; i < numWindows; i++) {
+    const window = document.createElement("div");
+    window.className = "window-light";
+    windowsContainer.appendChild(window);
+  }
+
+  building.appendChild(windowsContainer);
+  return building;
+}
+
+// Function to populate a layer with buildings
+function populateLayer(layerName, numBuildings, windowRange) {
+  const layer = document.querySelector(`.${layerName}`);
+  if (!layer) {
+    console.warn(`Layer ${layerName} not found`);
+    return;
+  }
+
+  // Clear existing buildings
+  layer.innerHTML = "";
+
+  for (let i = 0; i < numBuildings; i++) {
+    const building = createBuilding(windowRange[0], windowRange[1]);
+    layer.appendChild(building);
+  }
+}
+
+// Initialize all layers
+function initializeCityscape() {
+  populateLayer(
+    "buildings-far",
+    randomInt(...config.buildingsFar.count),
+    config.buildingsFar.windows,
+  );
+
+  populateLayer(
+    "buildings-mid",
+    randomInt(...config.buildingsMid.count),
+    config.buildingsMid.windows,
+  );
+
+  populateLayer(
+    "buildings-near",
+    randomInt(...config.buildingsNear.count),
+    config.buildingsNear.windows,
+  );
+}
+
+// Run when DOM is ready
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initializeCityscape);
+} else {
+  initializeCityscape();
+}

assets/js/nav_time.js

@@ -0,0 +1,85 @@
+// Time display with glitch effect
+(function () {
+  const timeDisplay = document.querySelector(".time-display");
+  if (!timeDisplay) return;
+
+  const lcdText = timeDisplay.querySelector(".lcd-text");
+  if (!lcdText) return;
+
+  let isHovered = false;
+  let timeInterval;
+
+  // Format time as hh:mm:ss
+  function getFormattedTime() {
+    const now = new Date();
+    const hours = String(now.getHours()).padStart(2, "0");
+    const minutes = String(now.getMinutes()).padStart(2, "0");
+    const seconds = String(now.getSeconds()).padStart(2, "0");
+    return `${hours}:${minutes}:${seconds}`;
+  }
+
+  // Update time display
+  function updateTime() {
+    if (!isHovered) {
+      lcdText.textContent = getFormattedTime();
+    }
+  }
+
+  // Glitch characters for effect
+  const glitchChars = [
+    "█",
+    "▓",
+    "▒",
+    "░",
+    "▀",
+    "▄",
+    "▌",
+    "▐",
+    "■",
+    "□",
+    "▪",
+    "▫",
+    "_",
+    "-",
+    "|",
+  ];
+
+  // Create glitch effect
+  function glitchEffect(callback) {
+    let glitchCount = 0;
+    const maxGlitches = 5;
+
+    const glitchInterval = setInterval(() => {
+      // Generate random glitchy text
+      const glitchText = Array(8)
+        .fill(0)
+        .map(() => glitchChars[Math.floor(Math.random() * glitchChars.length)])
+        .join("");
+
+      lcdText.textContent = glitchText;
+      glitchCount++;
+
+      if (glitchCount >= maxGlitches) {
+        clearInterval(glitchInterval);
+        lcdText.textContent = "_N:OW:__";
+        if (callback) callback();
+      }
+    }, 50);
+  }
+
+  // Mouse over handler
+  timeDisplay.addEventListener("mouseenter", () => {
+    isHovered = true;
+    glitchEffect();
+  });
+
+  // Mouse out handler
+  timeDisplay.addEventListener("mouseleave", () => {
+    isHovered = false;
+    updateTime();
+  });
+
+  // Start time updates
+  updateTime();
+  timeInterval = setInterval(updateTime, 1000);
+})();

assets/js/pages/audio.js

@@ -1,25 +1,21 @@
 if (document.getElementById("starfield")) {
   let starfield = document.getElementById("starfield");
-  let numStars = 200;
+  let numStars = parseInt(starfield.dataset.stars) || 200;
 
   // Create static twinkling stars
   for (let i = 0; i < numStars; i++) {
     const star = document.createElement("div");
     star.className = "star";
-
     // Random size
     const sizeClass =
       Math.random() < 0.7 ? "small" : Math.random() < 0.9 ? "medium" : "large";
     star.classList.add(sizeClass);
-
     // Random position
     star.style.left = Math.random() * 100 + "%";
     star.style.top = Math.random() * 100 + "%";
-
     // Random animation duration (2-6 seconds) and delay
     star.style.animationDuration = 2 + Math.random() * 4 + "s";
     star.style.animationDelay = Math.random() * 5 + "s";
-
     starfield.appendChild(star);
   }
 }