94 lines
2.2 KiB
HTML
94 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>not xterm</title>
|
|
<meta charset="utf8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<!--
|
|
<link rel="stylesheet" href="/xterm/xterm.css" />
|
|
<script src="/xterm/xterm.js"></script>
|
|
<script src="/xterm/xterm-addon-attach.js"></script>
|
|
<style>
|
|
/* body, html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
background: #111111;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#terminal {
|
|
box-sizing: border-box;
|
|
border-right: solid #242424 1em;
|
|
}
|
|
|
|
.xterm .xterm-viewport {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.xterm .xterm-viewport::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
</style>
|
|
-->
|
|
</head>
|
|
<body>
|
|
<!--
|
|
<div id="terminal"></div>
|
|
<script defer>
|
|
const theme = {
|
|
background: "#242424",
|
|
foreground: "#DADADA",
|
|
red: "#FF6666",
|
|
green: "#87D96C",
|
|
yellow: "#FFCC66",
|
|
blue: "#80BFFF",
|
|
magenta: "#D2A6FF",
|
|
cyan: "#5CCFE6",
|
|
brightRed: "#F27983",
|
|
brightGreen: "#D5FF80",
|
|
brightYellow: "#FFD173",
|
|
brightBlue: "#73D0FF",
|
|
brightMagenta: "#DFBFFF",
|
|
brightCyan: "#95E6CB",
|
|
};
|
|
const ws = new WebSocket(`wss://${location.host}/xterm/live`)
|
|
const term = new Terminal();
|
|
const attach = new AttachAddon.AttachAddon(ws);
|
|
term.loadAddon(attach);
|
|
term.setOption("tabStopWidth", 4);
|
|
term.setOption("theme", theme);
|
|
term.open(document.getElementById('terminal'));
|
|
term.resize(80, 26);
|
|
term.onBell(shake);
|
|
term.onTitleChange((title) => document.title = title);
|
|
term.attachCustomKeyEventHandler((e) => {
|
|
if (term.hasSelection() && e.ctrlKey && e.code === "KeyC" && e.type === "keydown") {
|
|
e.preventDefault();
|
|
document.execCommand("copy");
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
|
|
async function shake() {
|
|
for(let i = 8; i >= 0; i--) {
|
|
document.body.style.transform = `translate(${Math.random() * i}px, ${Math.random() * i}px)`;
|
|
await new Promise((res) => setTimeout(res, 30));
|
|
}
|
|
}
|
|
|
|
setInterval(() => ws.send(""), 1000 * 10);
|
|
</script>
|
|
-->
|
|
<pre>this is dead</pre>
|
|
</body>
|
|
</html>
|
|
|