From 0f0c72e705fd5c48a625f9c6f14a01706d042b1d Mon Sep 17 00:00:00 2001 From: samantha42 Date: Sat, 23 May 2026 11:52:02 +0200 Subject: [PATCH] new darkmode, disbales/hidden min games --- day_night_toggle_scoped.html | 184 +++++ static/about.html | 216 ++---- static/about.js | 184 +++++ static/cinema.html | 2 +- static/cyber.html | 2 +- static/engine.html | 2 +- static/finance.html | 2 +- static/images/rabbit.svg | 4 + static/infra.html | 2 +- static/posters/matrix.jpg | Bin 0 -> 638550 bytes static/scripts/game.js | 77 +++ static/scripts/tetris.js | 0 static/style/game.css | 57 ++ static/{ => style}/styles.css | 0 static/{ => style}/styles2.css | 233 ++++++- static/styles.css.old | 1153 -------------------------------- 16 files changed, 771 insertions(+), 1347 deletions(-) create mode 100644 day_night_toggle_scoped.html create mode 100644 static/about.js create mode 100644 static/images/rabbit.svg create mode 100644 static/posters/matrix.jpg create mode 100644 static/scripts/game.js create mode 100644 static/scripts/tetris.js create mode 100644 static/style/game.css rename static/{ => style}/styles.css (100%) rename static/{ => style}/styles2.css (67%) delete mode 100644 static/styles.css.old diff --git a/day_night_toggle_scoped.html b/day_night_toggle_scoped.html new file mode 100644 index 0000000..b03bc14 --- /dev/null +++ b/day_night_toggle_scoped.html @@ -0,0 +1,184 @@ + + +
+
+

Day and night toggle with scoped theme tokens

+ +
+

Sample card

+ Tokens update on toggle
+ surface2 · dim · border2 +
+ +
+ Night +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Day +
+ + Day mode +
+
+ + diff --git a/static/about.html b/static/about.html index a06e2b0..98c27c2 100644 --- a/static/about.html +++ b/static/about.html @@ -6,9 +6,10 @@ Samantha Vero Friis - + + - +
@@ -127,14 +163,6 @@
-
-

languages

-
- Danish - English -
-
-

interests

@@ -188,7 +216,7 @@

interests

- Fav lists + Fav lists

Movie/Show Top list

@@ -203,9 +231,9 @@ A Cure of Wellness

A Cure of Wellness

-
- Fight Club -

Fight Club

+
+ matrix +

The Matrix

Dracula: A Love Tale @@ -246,38 +274,28 @@

Lunix rice

-
- +
+

I love my custom Linux setup. I use Hyprland, which automatically arranges app windows on my screen so everything stays organized without dragging things around. I also use Quickshell, which lets me customize menus, shortcuts, and system controls to work exactly how I want. -My system is based on Arch Linux or Manjaro Linux, which are versions of Linux that give you more control and customization than a typical computer setup. The result is a clean, fast, and super efficient desktop that’s hard to go back from.

+ My system is based on Arch Linux or Manjaro Linux, which are versions of Linux that give you more control and customization than a typical computer setup. The result is a clean, fast, and super efficient desktop that’s hard to go back from. + Git repo +

-
@@ -290,116 +308,6 @@ My system is based on Arch Linux or Manjaro Linux, which are versions of Linux t
© 2026 — all rights reserved
- + \ No newline at end of file diff --git a/static/about.js b/static/about.js new file mode 100644 index 0000000..e4613be --- /dev/null +++ b/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); + }; +} diff --git a/static/cinema.html b/static/cinema.html index 1c1a40c..c1729ed 100644 --- a/static/cinema.html +++ b/static/cinema.html @@ -8,7 +8,7 @@ href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap" rel="stylesheet" /> - +
diff --git a/static/cyber.html b/static/cyber.html index 0972a1f..ea52f0b 100644 --- a/static/cyber.html +++ b/static/cyber.html @@ -8,7 +8,7 @@ href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap" rel="stylesheet" /> - +
diff --git a/static/engine.html b/static/engine.html index e901ed0..80c2771 100644 --- a/static/engine.html +++ b/static/engine.html @@ -6,7 +6,7 @@ FP&A Budgeting Engine — Samantha Vero Friis - +