new darkmode, disbales/hidden min games

static/about.js

@@ -0,0 +1,184 @@
+  const toggle = document.getElementById('toggle');
+  const track  = document.getElementById('track');
+  const knob   = document.getElementById('knob');
+  const rays   = document.getElementById('rays');
+  const stateLabel = document.getElementById('state-label');
+  const themeRoot  = document.getElementById('themeRoot');
+
+  let isDay = true;
+
+  const RAY_COUNT = 8;
+  for (let i = 0; i < RAY_COUNT; i++) {
+    const r = document.createElement('div');
+    r.className = 'ray';
+    r.style.transform = `rotate(${i * (360/RAY_COUNT)}deg)`;
+    rays.appendChild(r);
+  }
+
+  function applyState() {
+    if (isDay) {
+      track.className      = 'track day';
+      knob.className       = 'knob day';
+      toggle.setAttribute('aria-checked', 'true');
+      themeRoot.classList.remove('night');
+    } else {
+      track.className = 'track night';
+      knob.className  = 'knob night';
+      toggle.setAttribute('aria-checked', 'false');
+      themeRoot.classList.add('night');
+    }
+  }
+
+  toggle.addEventListener('click', () => { isDay = !isDay; applyState(); });
+  toggle.addEventListener('keydown', e => {
+    if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); isDay = !isDay; applyState(); }
+  });
+
+  function copyClass() {
+    navigator.clipboard.writeText(classOut.textContent).catch(() => {});
+  }
+// just some fun.
+  console.log("%c👀 hi there!", "font-size:20px")
+
+
+  function draculaClick() {
+    const el = document.getElementById('interest');
+    if (!el) return; // el is a DOM node, never a string
+    el.textContent = '🦇 interest 🦇';
+
+    setTimeout(() => {
+      el.textContent = "interest";
+    }, 5000);
+  }
+
+  
+  function matrixClick() {
+    const sub = document.getElementById('interest-sub');
+    const col = sub.color
+    sub.textContent = `Do not try and bend the spoon. That's impossible. Instead... only try to realize the truth.`
+    
+    sub.style.color = "green"
+    setTimeout(() => {
+      sub.textContent = "Fav lists"
+      sub.style.color = "#6b6560" 
+    }, 15000);
+  }
+
+
+  function bladerunnerClick() {
+    if (document.getElementById('rain-canvas')) return; // already running, do nothing
+
+    const el = document.getElementById('interest');
+    el.textContent = 'tears in rain';
+
+    startRain();
+
+    setTimeout(() => {
+      el.textContent = "interest";
+      stopRain();
+    }, 10000);
+  }
+
+  let rainCanvas, rainCtx, rainInterval;
+
+  function startRain() {
+    rainCanvas = document.createElement('canvas');
+    rainCanvas.id = 'rain-canvas';
+    rainCanvas.width = window.innerWidth;
+    rainCanvas.height = window.innerHeight;
+    document.body.appendChild(rainCanvas);
+    rainCtx = rainCanvas.getContext('2d');
+
+    requestAnimationFrame(() => { rainCanvas.style.opacity = '1'; });
+
+    const drops = Array.from({ length: 120 }, () => ({
+      x: Math.random() * rainCanvas.width,
+      y: Math.random() * rainCanvas.height,
+      speed: 8 + Math.random() * 7,
+      length: 12 + Math.random() * 20,
+      opacity: 0.2 + Math.random() * 0.4
+    }));
+
+    rainInterval = setInterval(() => {
+      rainCtx.clearRect(0, 0, rainCanvas.width, rainCanvas.height);
+      drops.forEach(drop => {
+        rainCtx.beginPath();
+        rainCtx.moveTo(drop.x, drop.y);
+        rainCtx.lineTo(drop.x - 2, drop.y + drop.length);
+        rainCtx.strokeStyle = `rgba(174, 214, 241, ${drop.opacity})`;
+        rainCtx.lineWidth = 3;
+        rainCtx.stroke();
+
+        drop.y += drop.speed;
+        if (drop.y > rainCanvas.height) {
+          drop.y = -drop.length;
+          drop.x = Math.random() * rainCanvas.width;
+        }
+      });
+    }, 30);
+  }
+
+  function stopRain() {
+    if (!rainCanvas) return;
+    rainCanvas.style.opacity = '0';
+    setTimeout(() => {
+      clearInterval(rainInterval);
+      rainCanvas.remove();
+      rainCanvas = null;
+    }, 800);
+  }
+
+  function unhideGame() {
+    const alicegameSection = document.getElementById('alice');
+    const gameSection = document.getElementById('tetris');
+    if (alicegameSection.style.display == 'none') {
+      alicegameSection.style.display = 'block';  
+    } else {
+      alicegameSection.style.display = 'none';
+    }
+    gameSection.style.display = 'none';  
+   
+  }
+
+  function unhideTetris() {
+    const alicegameSection = document.getElementById('alice');
+    const gameSection = document.getElementById('tetris');
+    if (gameSection.style.display == 'none') {
+      gameSection.style.display = 'block';  
+    } else {
+      gameSection.style.display = 'none';  
+    }
+    alicegameSection.style.display = 'none';  
+  }
+function dragonClick() {
+  const existing = document.getElementById('dragon-grid');
+  if (existing) { existing.remove(); return; }
+
+  const grid = document.createElement('canvas');
+  grid.id = 'dragon-grid';
+  grid.width = window.innerWidth;
+  grid.height = window.innerHeight;
+  grid.style.transition = 'opacity 1s ease';
+  document.body.appendChild(grid);
+
+  const ctx = grid.getContext('2d');
+  const img = new Image();
+  img.src = '/static/images/dragon.png';
+
+  img.onload = () => {
+    const size = 250;
+    const cols = Math.ceil(grid.width / size);
+    const rows = Math.ceil(grid.height / size);
+
+    for (let r = 0; r < rows; r++) {
+      for (let c = 0; c < cols; c++) {
+        ctx.drawImage(img, c * size, r * size, size, size);
+      }
+    }
+
+    setTimeout(() => {
+      grid.style.opacity = '0';
+      setTimeout(() => grid.remove(), 1000);
+    }, 300);
+  };
+}