From 091f4d53e9ebdacf023bdc75c1fb0433c1c62dfe Mon Sep 17 00:00:00 2001 From: randogoth Date: Sun, 26 Oct 2025 21:51:57 +0200 Subject: [PATCH] CRT --- scripts/dos-httpd | 51 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/scripts/dos-httpd b/scripts/dos-httpd index 4ea79f1..d3f70cd 100644 --- a/scripts/dos-httpd +++ b/scripts/dos-httpd @@ -73,6 +73,55 @@ HTML_PAGE = """ transform-origin: center center; position: relative; box-sizing: content-box; + overflow: hidden; + } + .crt-display { + filter: saturate(1.1) contrast(1.12) brightness(0.85); + --crt-line-step: 1; + } + .crt-display::before { + content: ""; + position: absolute; + inset: 0; + pointer-events: none; + background-image: + repeating-linear-gradient( + to bottom, + rgba(255, 255, 255, 0.1) 0px, + rgba(255, 255, 255, 0.1) calc(var(--crt-line-step) * 1px), + rgba(0, 0, 0, 0) calc(var(--crt-line-step) * 1px), + rgba(0, 0, 0, 0) calc(var(--crt-line-step) * 2px) + ), + repeating-linear-gradient( + to right, + rgba(255, 255, 255, 0.04) 0px, + rgba(255, 255, 255, 0.04) calc(var(--crt-line-step) * 1px), + rgba(0, 0, 0, 0) calc(var(--crt-line-step) * 1px), + rgba(0, 0, 0, 0) calc(var(--crt-line-step) * 2px) + ); + mix-blend-mode: screen; + opacity: 0.4; + animation: crt-scan 6s linear infinite; + } + .crt-display::after { + content: ""; + position: absolute; + inset: -8%; + pointer-events: none; + background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.45) 70%, rgba(0, 0, 0, 0.75) 100%); + mix-blend-mode: multiply; + animation: crt-flicker 3s infinite; + } + @keyframes crt-scan { + 0% { transform: translateY(-2%); } + 100% { transform: translateY(2%); } + } + @keyframes crt-flicker { + 0%, 100% { opacity: 0.35; } + 45% { opacity: 0.45; } + 50% { opacity: 0.3; } + 55% { opacity: 0.4; } + 90% { opacity: 0.33; } } #terminal .xterm { width: 100% !important; @@ -151,6 +200,7 @@ HTML_PAGE = """ if (screen) { screen.style.width = `${VIEWPORT_WIDTH}px`; screen.style.height = `${VIEWPORT_HEIGHT}px`; + screen.classList.add("crt-display"); } const rows = terminalHost.querySelector(".xterm-rows"); @@ -179,6 +229,7 @@ HTML_PAGE = """ const scaleForHeight = maxHeight / rect.height; const uniformScale = Math.min(scaleForWidth, scaleForHeight); + terminalHost.style.setProperty('--crt-line-step', (1 / uniformScale).toString()); terminalHost.style.transform = `scale(${uniformScale}) scaleY(${BASE_VERTICAL_STRETCH})`; }