-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (140 loc) · 6.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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en" style="height:100%;">
<meta property="og:image" content="https://webvm.io/assets/reddit.png"/>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linux Command Line Training Tool</title>
<meta name="description" content="Server-less virtual machine, networking included, running browser-side in HTML5/WebAssembly. Code in any programming language inside this Linux terminal.">
<!-- Apple iOS web clip compatibility tags -->
<meta name="application-name" content="CL-Bootcamp" />
<meta name="apple-mobile-web-app-title" content="CL-Bootcamp" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="shortcut icon" href="./favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" id="us-fonts-css" href="https://fonts.googleapis.com/css?family=Montserrat%3A300%2C400%2C500%2C600%2C700&display=swap&ver=6.0.2" media="all">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/xterm.css"> -->
<link rel="stylesheet" href="node_modules/xterm/css/xterm.css">
<link rel="stylesheet" href="./scrollbar.css" />
<link rel="stylesheet" href="main.css">
<style>.github-fork-ribbon:before { background-color: #ea1e69; }</style>
<!-- Serviceworker script that adds the COI and CORS headers to the response headers in cases where the server does not support it. -->
<!-- <script src="serviceWorker.js"></script> -->
<!-- <script src="./xterm/xterm.js"></script>
<script src="./xterm/xterm-addon-fit.js"></script>
<script src="network.js"></script>
<script defer src="script.js"></script> -->
</head>
<body style="margin:0;height:100%;background:black;color:white;overflow:hidden; display:flex; flex-direction: column; justify-content: space-between; height: 100%;">
<div class="split-screen">
<div class="left-pane">
<iframe id="guide" src="guide/rendered/markdown/index.html"></iframe>
</div>
<div class="right-pane">
<a class="github-fork-ribbon right-bottom" href="https://github.com/Pigrenok/command-line-bootcamp" target="_blank" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
<main style="display: flex; flex-direction: row; justify-content: space-between; margin: 5px; height: 100%;">
<div style="flex-grow:1; height:100%;display:inline-block;margin:0;" class="scrollbar" id="terminal">
</div>
</main>
</div>
</div>
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/xterm.min.js"></script> -->
<script src="node_modules/xterm/lib/xterm.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> -->
<!-- <script src="node_modules/@xterm/addon-fit/lib/addon-fit.js"></script> -->
<script src="stack.js"></script>
<script src="ws-delegate.js"></script>
<script src="coi-serviceworker.js"></script>
<script>
const xterm = new Terminal({rows: 50});
// const fitAddon = new FitAddon.FitAddon();
// xterm.loadAddon(fitAddon);
xterm.open(document.getElementById("terminal"));
// fitAddon.fit();
// Add an event listener for window resize
// window.addEventListener('resize', function() {
// console.debug('Window resized');
// fitAddon.fit();
// });
// xterm.write([
// "",
// " Welcome to Command line bootcamp.",
// " On the left you have tutorials that you can follow",
// " one by one to learn basics of Linux command line.",
// "",
// " You can then follow other tutorials using this virtual machine.",
// " It is all yours and runs on your computer.",
// " Even if you break it (which is tricky to do), just refresh page",
// " in your browser. You start from scratch.",
// ""
// ]);
const { master, slave } = openpty();
// slave.write([
// "",
// " Welcome to Command line bootcamp.",
// " On the left you have tutorials that you can follow",
// " one by one to learn basics of Linux command line.",
// "",
// " You can then follow other tutorials using this virtual machine.",
// " It is all yours and runs on your computer.",
// " Even if you break it (which is tricky to do), just refresh page",
// " in your browser. You start from scratch.",
// ""
// ]);
termios = slave.ioctl("TCGETS");
termios.iflag &= ~(/*IGNBRK | BRKINT | PARMRK |*/ ISTRIP | INLCR | IGNCR | ICRNL | IXON);
termios.oflag &= ~(OPOST);
termios.lflag &= ~(ECHO | ECHONL | ICANON | ISIG | IEXTEN);
//termios.cflag &= ~(CSIZE | PARENB);
//termios.cflag |= CS8;
slave.ioctl("TCSETS", new Termios(termios.iflag, termios.oflag, termios.cflag, termios.lflag, termios.cc));
xterm.loadAddon(master);
var worker;
if (location.search=="") {
worker = new Worker("./worker.js?net=browser");
} else {
worker = new Worker("./worker.js"+location.search);
}
var nwStack;
var netParam = getNetParam();
var workerImage = "cl-bootcamp-base.wasm";
if (netParam) {
if (netParam.mode == 'delegate') {
nwStack = delegate(worker, workerImage, netParam.param);
} else if (netParam.mode == 'browser') {
nwStack = newStack(worker, workerImage, new Worker("./stack-worker.js"+location.search), "c2w-net-proxy.wasm");
} else if (netParam.mode == 'nonetwork') {
console.log("Running without networking stack.")
}
} else {
nwStack = newStack(worker, workerImage, new Worker("./stack-worker.js?net=browser"), "c2w-net-proxy.wasm");
}
if (!nwStack) {
worker.postMessage({type: "init", imagename: workerImage});
}
new TtyServer(slave).start(worker, nwStack);
function getNetParam() {
var vars = location.search.substring(1).split('&');
for (var i = 0; i < vars.length; i++) {
var kv = vars[i].split('=');
if (decodeURIComponent(kv[0]) == 'net') {
console.debug({
mode: kv[1],
param: kv[2],
});
return {
mode: kv[1],
param: kv[2],
};
}
}
return null;
}
</script>
</body>
</html>