-
Notifications
You must be signed in to change notification settings - Fork 37
/
index.html
59 lines (55 loc) · 1.84 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Python in a Box</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/css/xterm.css"
crossorigin="anonymous"
/>
<style>
body {
margin: 20px;
}
</style>
</head>
<body>
<p>
<a href="https://github.com/radian-software/python-in-a-box"
>Python in a Box</a
>
</p>
<div id="terminal"></div>
<p style="margin-top: 10px">
Note: if the terminal has frozen, reload the page. This happens because
the frontend does not have any logic to automatically reconnect when the
websocket connection is broken, which happens frequently in modern
browsers when you switch to a different tab.
</p>
<script src="https://unpkg.com/[email protected]/lib/xterm.js"></script>
<script src="https://unpkg.com/[email protected]/lib/xterm-addon-attach.js"></script>
<script src="https://unpkg.com/[email protected]/lib/xterm-addon-fit.js"></script>
<script>
const term = new Terminal();
const socket = new WebSocket(
`${document.location.protocol === "http:" ? "ws" : "wss"}://${
document.location.host
}/ws`
);
const websocketAddon = new AttachAddon.AttachAddon(socket);
const resizeAddon = new FitAddon.FitAddon();
term.loadAddon(websocketAddon);
term.loadAddon(resizeAddon);
term.open(document.getElementById("terminal"));
resizeAddon.fit();
window.addEventListener("resize", () => resizeAddon.fit());
</script>
</body>
</html>