randogoth/svarbox
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CRT

Browse source
This commit is contained in:
randogoth 2025-10-26 21:51:57 +02:00
parent dee3737858
commit 091f4d53e9
1 changed files with 51 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

51
scripts/dos-httpd
View file

@ -73,6 +73,55 @@ HTML_PAGE = """<!DOCTYPE html>
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 = """<!DOCTYPE html>
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 = """<!DOCTYPE html>
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})`;
}