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

centered

Browse source
This commit is contained in:
randogoth 2025-10-26 17:28:14 +02:00
parent 8f8779fee1
commit 4044d21182
1 changed files with 45 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

61
scripts/dos-httpd
View file

@ -47,6 +47,7 @@ HTML_PAGE = """<!DOCTYPE html>
display: flex;
flex-direction: column;
font-family: "DOSVGA", "Fira Code", "Cascadia Mono", "Hack", monospace;
line-height: 1;
}
header {
padding: 0.6rem 1rem;
@ -55,45 +56,73 @@ HTML_PAGE = """<!DOCTYPE html>
letter-spacing: 0.04em;
text-transform: uppercase;
}
#terminal {
#workspace {
flex: 1 1 auto;
min-height: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 32px 24px 40px;
box-sizing: border-box;
}
#terminal {
display: inline-flex;
background: #000;
border: 1px solid #2b2b2b;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
padding: 12px;
width: auto;
height: auto;
box-sizing: content-box;
}
#terminal .xterm {
width: auto !important;
height: auto !important;
}
#terminal .xterm-viewport {
background-color: #000;
background-color: #000 !important;
overflow: hidden !important;
width: auto !important;
}
#terminal .xterm-rows,
#terminal .xterm-scroll-area {
width: auto !important;
height: auto !important;
}
#terminal .xterm-screen {
width: auto !important;
height: auto !important;
}
#terminal .xterm .xterm-helper-textarea {
width: 0 !important;
height: 0 !important;
}
</style>
</head>
<body>
<header>SvarBox DOS Console</header>
<div id="terminal"></div>
<main id="workspace">
<div id="terminal"></div>
</main>
<script type="module">
import { Terminal } from "https://cdn.jsdelivr.net/npm/xterm@5.3.0/+esm";
import { FitAddon } from "https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/+esm";
const INITIAL_COLS = 80;
const INITIAL_ROWS = 25;
const term = new Terminal({
cursorBlink: true,
convertEol: true,
fontFamily: "DOSVGA, Fira Code, Cascadia Mono, Hack, monospace",
fontSize: 16,
cols: INITIAL_COLS,
rows: INITIAL_ROWS,
theme: {
background: "#000000",
foreground: "#f5f5f5"
},
});
const fitAddon = new FitAddon();
term.loadAddon(fitAddon);
term.open(document.getElementById("terminal"));
function fitLater() {
requestAnimationFrame(() => fitAddon.fit());
}
fitLater();
window.addEventListener("resize", fitLater);
const wsProtocol = window.location.protocol === "https:" ? "wss" : "ws";
const socket = new WebSocket(`${wsProtocol}://${window.location.host}/ws`);
const textDecoder = new TextDecoder("utf-8", { fatal: false });
@ -108,7 +137,7 @@ HTML_PAGE = """<!DOCTYPE html>
}
socket.addEventListener("open", () => {
fitLater();
socket.send(JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows }));
term.focus();
});