centered
This commit is contained in:
parent
8f8779fee1
commit
4044d21182
1 changed files with 45 additions and 16 deletions
|
|
@ -47,6 +47,7 @@ HTML_PAGE = """<!DOCTYPE html>
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
font-family: "DOSVGA", "Fira Code", "Cascadia Mono", "Hack", monospace;
|
font-family: "DOSVGA", "Fira Code", "Cascadia Mono", "Hack", monospace;
|
||||||
|
line-height: 1;
|
||||||
}
|
}
|
||||||
header {
|
header {
|
||||||
padding: 0.6rem 1rem;
|
padding: 0.6rem 1rem;
|
||||||
|
|
@ -55,45 +56,73 @@ HTML_PAGE = """<!DOCTYPE html>
|
||||||
letter-spacing: 0.04em;
|
letter-spacing: 0.04em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
#terminal {
|
#workspace {
|
||||||
flex: 1 1 auto;
|
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 {
|
#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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>SvarBox DOS Console</header>
|
<header>SvarBox DOS Console</header>
|
||||||
<div id="terminal"></div>
|
<main id="workspace">
|
||||||
|
<div id="terminal"></div>
|
||||||
|
</main>
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import { Terminal } from "https://cdn.jsdelivr.net/npm/xterm@5.3.0/+esm";
|
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({
|
const term = new Terminal({
|
||||||
cursorBlink: true,
|
cursorBlink: true,
|
||||||
convertEol: true,
|
convertEol: true,
|
||||||
fontFamily: "DOSVGA, Fira Code, Cascadia Mono, Hack, monospace",
|
fontFamily: "DOSVGA, Fira Code, Cascadia Mono, Hack, monospace",
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
|
cols: INITIAL_COLS,
|
||||||
|
rows: INITIAL_ROWS,
|
||||||
theme: {
|
theme: {
|
||||||
background: "#000000",
|
background: "#000000",
|
||||||
foreground: "#f5f5f5"
|
foreground: "#f5f5f5"
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const fitAddon = new FitAddon();
|
|
||||||
|
|
||||||
term.loadAddon(fitAddon);
|
|
||||||
term.open(document.getElementById("terminal"));
|
term.open(document.getElementById("terminal"));
|
||||||
|
|
||||||
function fitLater() {
|
|
||||||
requestAnimationFrame(() => fitAddon.fit());
|
|
||||||
}
|
|
||||||
|
|
||||||
fitLater();
|
|
||||||
window.addEventListener("resize", fitLater);
|
|
||||||
|
|
||||||
const wsProtocol = window.location.protocol === "https:" ? "wss" : "ws";
|
const wsProtocol = window.location.protocol === "https:" ? "wss" : "ws";
|
||||||
const socket = new WebSocket(`${wsProtocol}://${window.location.host}/ws`);
|
const socket = new WebSocket(`${wsProtocol}://${window.location.host}/ws`);
|
||||||
const textDecoder = new TextDecoder("utf-8", { fatal: false });
|
const textDecoder = new TextDecoder("utf-8", { fatal: false });
|
||||||
|
|
@ -108,7 +137,7 @@ HTML_PAGE = """<!DOCTYPE html>
|
||||||
}
|
}
|
||||||
|
|
||||||
socket.addEventListener("open", () => {
|
socket.addEventListener("open", () => {
|
||||||
fitLater();
|
socket.send(JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows }));
|
||||||
term.focus();
|
term.focus();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue