PiZeroWebSerialConsole/PiZeroWebSerialConsole.html at main · chirimen-oh/PiZeroWebSerialConsole · GitHub

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
<!doctype html>
<html lang="ja">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>Web Serial Console (ESM Version)</title>
		<link rel="stylesheet" href="https://unpkg.com/xterm@4.0.0/css/xterm.css" />
		<link rel="stylesheet" href="./css/style.css" />
		<script src="https://unpkg.com/xterm@4.0.0/lib/xterm.js"></script>
		<script src="https://unpkg.com/xterm-addon-fit@0.3.0/lib/xterm-addon-fit.js"></script>
	</head>
	<body>
		<header id="appHeader">
			<h1 id="appTitle">Web Serial Raspberry Pi Zero USB OTG Serial Console</h1>
			<a href="https://github.com/chirimen-oh" target="_blank" id="projectLink">
				<img src="https://avatars.githubusercontent.com/u/18115652" alt="CHIRIMEN Logo" id="projectIcon" />
				<span>by chirimen-oh project</span>
			</a>
		</header>

		<div id="controls">
			<button id="connectBtn">Connect and Login PiZero</button>
			<span id="cmdBtns" style="display: none">
				<button id="closeBtn">Close Connection</button>
				<button id="homeBtn">HOME</button>
				<button id="lsBtn">ls -al</button>
				<button id="wifiBtn">wifi panel</button>
				<button id="chirimenBtn">CHIRIMEN panel</button>
				<label class="upload-box">
					upload: <input type="file" id="fileUpl" />
				</label>
				<span id="progress"></span>
				<button id="createTxtBtn">createNewText</button>
				<span id="fileNameInputUI" style="display: none">
					<input type="text" id="fileNameInput" />
					<button id="createTxtExecBtn">create</button>
					<button id="createTxtCancelBtn">cancel</button>
				</span>
				<!--<span id="currentDirSpan" style="font-size: 11px"></span>-->
			</span>
		</div>

		<div id="mainContainer">
			<div id="terminalContainer">
				<div id="terminal"></div>
			</div>
			<div id="fileListContainer">
				<div id="currentDirSpan"></div>
				<div id="fileListTable" class="filelistdiv"></div>
			</div>
		</div>

		<script type="module" src="./js/main.js"></script>
	</body>
</html>