Hugging Face's logo

Spaces:
ar08
/
train
Paused

App Files Community
ar08 commited on
Commit
1d8dca3
·
verified ·
1 Parent(s): bdd1992

Update pyxtermjs/index.html

Browse files
Files changed (1) hide show
  1. pyxtermjs/index.html +144 -120
pyxtermjs/index.html CHANGED
@@ -1,143 +1,167 @@
 
1
  <html lang="en">
2
- <head>
3
  <meta charset="utf-8" />
4
-
 
 
5
  <style>
6
- html {
7
- font-family: arial;
8
- }
9
- body{
10
- background-color: black; /* Set background color to black */
11
- color: white; /* Set text color to white */
12
- margin: 0; /* Remove default margin */
13
- padding: 0;
14
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  </style>
16
- <link
17
- rel="stylesheet"
18
- href="https://unpkg.com/xterm@4.11.0/css/xterm.css"
19
- />
20
- </head>
21
- <body>
22
-
23
-
24
- <span style="font-size: small"
25
- >status:
26
- <span style="font-size: small" id="status">connecting...</span></span
27
- >
28
-
29
- <div style="width: 100%; height: calc(100% - 50px)" id="terminal"></div>
30
-
31
- <p style="text-align: right; font-size: small">
32
- Get Rickrolled <a href="https://www.youtube.com/watch?v=o-YBDTqX_ZU"></a>
33
- <a href="https://www.youtube.com/watch?v=o-YBDTqX_ZU">GitHub</a>
34
- </p>
35
- <!-- xterm -->
36
  <script src="https://unpkg.com/xterm@4.11.0/lib/xterm.js"></script>
37
  <script src="https://unpkg.com/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.js"></script>
38
  <script src="https://unpkg.com/xterm-addon-web-links@0.4.0/lib/xterm-addon-web-links.js"></script>
39
- <script src="https://unpkg.com/xterm-addon-search@0.8.0/lib/xterm-addon-sear
40
- ch.js"></script>
41
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script>
42
-
43
  <script>
44
- const term = new Terminal({
45
- cursorBlink: true,
46
- macOptionIsMeta: true,
47
- scrollback: true,
48
- });
49
- term.attachCustomKeyEventHandler(customKeyEventHandler);
50
- //
51
- const fit = new FitAddon.FitAddon();
52
- term.loadAddon(fit);
53
- term.loadAddon(new WebLinksAddon.WebLinksAddon());
54
- term.loadAddon(new SearchAddon.SearchAddon());
55
 
56
- term.open(document.getElementById("terminal"));
57
- fit.fit();
58
- term.resize(15, 50);
59
- console.log(`size: ${term.cols} columns, ${term.rows} rows`);
60
- fit.fit();
61
- term.writeln("Welcome to AR-server");
62
- term.writeln("");
63
- term.writeln('')
64
- term.writeln("You can copy with ctrl+shift+x");
65
- term.writeln("You can paste with ctrl+shift+v");
66
- term.writeln('')
67
- term.onData((data) => {
68
- console.log("browser terminal received new data:", data);
69
- socket.emit("pty-input", { input: data });
70
- });
71
 
72
- const socket = io.connect("/pty");
73
- const status = document.getElementById("status");
 
 
74
 
75
- socket.on("pty-output", function (data) {
76
- console.log("new output received from server:", data.output);
77
- term.write(data.output);
78
- });
79
 
80
- socket.on("connect", () => {
81
- fitToscreen();
82
- status.innerHTML =
83
- '<span style="background-color: lightgreen;">connected</span>';
84
- });
85
 
86
- socket.on("disconnect", () => {
87
- status.innerHTML =
88
- '<span style="background-color: #ff8383;">disconnected</span>';
89
- });
90
 
91
- function fitToscreen() {
92
- fit.fit();
93
- const dims = { cols: term.cols, rows: term.rows };
94
- console.log("sending new dimensions to server's pty", dims);
95
- socket.emit("resize", dims);
96
- }
97
 
98
- function debounce(func, wait_ms) {
99
- let timeout;
100
- return function (...args) {
101
- const context = this;
102
- clearTimeout(timeout);
103
- timeout = setTimeout(() => func.apply(context, args), wait_ms);
104
- };
105
- }
106
 
107
- /**
108
- * Handle copy and paste events
109
- */
110
- function customKeyEventHandler(e) {
111
- if (e.type !== "keydown") {
112
- return true;
 
113
  }
114
- if (e.ctrlKey && e.shiftKey) {
115
- const key = e.key.toLowerCase();
116
- if (key === "v") {
117
- // ctrl+shift+v: paste whatever is in the clipboard
118
- navigator.clipboard.readText().then((toPaste) => {
119
- term.writeText(toPaste);
120
- });
121
- return false;
122
- } else if (key === "c" || key === "x") {
123
- // ctrl+shift+x: copy whatever is highlighted to clipboard
124
 
125
- // 'x' is used as an alternate to 'c' because ctrl+c is taken
126
- // by the terminal (SIGINT) and ctrl+shift+c is taken by the browser
127
- // (open devtools).
128
- // I'm not aware of ctrl+shift+x being used by anything in the terminal
129
- // or browser
130
- const toCopy = term.getSelection();
131
- navigator.clipboard.writeText(toCopy);
132
- term.focus();
133
- return false;
134
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
135
  }
136
- return true;
137
- }
138
 
139
- const wait_ms = 50;
140
- window.onresize = debounce(fitToscreen, wait_ms);
 
141
  </script>
142
- </body>
143
  </html>
 
1
+ <!DOCTYPE html>
2
  <html lang="en">
3
+ <head>
4
  <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Enhanced Terminal</title>
7
+ <link rel="stylesheet" href="https://unpkg.com/xterm@4.11.0/css/xterm.css" />
8
  <style>
9
+ html {
10
+ font-family: Arial, sans-serif;
11
+ }
12
+ body {
13
+ background-color: #1e1e1e; /* Dark grey background */
14
+ color: white;
15
+ margin: 0;
16
+ padding: 0;
17
+ display: flex;
18
+ flex-direction: column;
19
+ height: 100vh;
20
+ }
21
+ #status-bar {
22
+ background-color: #333; /* Darker background for status bar */
23
+ color: #fff;
24
+ padding: 5px 10px;
25
+ display: flex;
26
+ justify-content: space-between;
27
+ align-items: center;
28
+ font-size: small;
29
+ }
30
+ #terminal-container {
31
+ flex: 1;
32
+ display: flex;
33
+ flex-direction: column;
34
+ padding: 10px;
35
+ }
36
+ #terminal {
37
+ flex: 1;
38
+ width: 100%;
39
+ height: 100%;
40
+ border: 1px solid #444; /* Border around terminal */
41
+ border-radius: 5px; /* Rounded corners */
42
+ overflow: hidden; /* Hide overflow */
43
+ }
44
+ .link-container {
45
+ text-align: right;
46
+ font-size: small;
47
+ margin-top: 5px;
48
+ }
49
+ .link-container a {
50
+ color: #1e90ff; /* Link color */
51
+ text-decoration: none;
52
+ }
53
+ .link-container a:hover {
54
+ text-decoration: underline;
55
+ }
56
  </style>
57
+ </head>
58
+ <body>
59
+ <div id="status-bar">
60
+ <span>Status: <span id="status">connecting...</span></span>
61
+ <span id="resize-status"></span>
62
+ </div>
63
+ <div id="terminal-container">
64
+ <div id="terminal"></div>
65
+ <div class="link-container">
66
+ <a href="https://www.youtube.com/watch?v=o-YBDTqX_ZU">Get Rickrolled</a> |
67
+ <a href="https://github.com">GitHub</a>
68
+ </div>
69
+ </div>
 
 
 
 
 
 
 
70
  <script src="https://unpkg.com/xterm@4.11.0/lib/xterm.js"></script>
71
  <script src="https://unpkg.com/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.js"></script>
72
  <script src="https://unpkg.com/xterm-addon-web-links@0.4.0/lib/xterm-addon-web-links.js"></script>
73
+ <script src="https://unpkg.com/xterm-addon-search@0.8.0/lib/xterm-addon-search.js"></script>
 
74
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script>
 
75
  <script>
76
+ const term = new Terminal({
77
+ cursorBlink: true,
78
+ macOptionIsMeta: true,
79
+ scrollback: true,
80
+ });
81
+ const fit = new FitAddon.FitAddon();
82
+ term.loadAddon(fit);
83
+ term.loadAddon(new WebLinksAddon.WebLinksAddon());
84
+ term.loadAddon(new SearchAddon.SearchAddon());
 
 
85
 
86
+ term.open(document.getElementById("terminal"));
87
+ fit.fit();
88
+ term.resize(15, 50);
89
+ console.log(`size: ${term.cols} columns, ${term.rows} rows`);
90
+ fit.fit();
91
+ term.writeln("Welcome to AR-server");
92
+ term.writeln("");
93
+ term.writeln("You can copy with ctrl+shift+x");
94
+ term.writeln("You can paste with ctrl+shift+v");
95
+ term.writeln('');
 
 
 
 
 
96
 
97
+ term.onData((data) => {
98
+ console.log("browser terminal received new data:", data);
99
+ socket.emit("pty-input", { input: data });
100
+ });
101
 
102
+ const socket = io.connect("/pty");
103
+ const status = document.getElementById("status");
 
 
104
 
105
+ socket.on("pty-output", function (data) {
106
+ console.log("new output received from server:", data.output);
107
+ term.write(data.output);
108
+ });
 
109
 
110
+ socket.on("connect", () => {
111
+ fitToscreen();
112
+ status.innerHTML = '<span style="background-color: lightgreen; padding: 2px 4px; border-radius: 3px;">connected</span>';
113
+ });
114
 
115
+ socket.on("disconnect", () => {
116
+ status.innerHTML = '<span style="background-color: #ff8383; padding: 2px 4px; border-radius: 3px;">disconnected</span>';
117
+ });
 
 
 
118
 
119
+ function fitToscreen() {
120
+ fit.fit();
121
+ const dims = { cols: term.cols, rows: term.rows };
122
+ console.log("sending new dimensions to server's pty", dims);
123
+ socket.emit("resize", dims);
124
+ document.getElementById("resize-status").textContent = `Resized to: ${dims.cols}x${dims.rows}`;
125
+ }
 
126
 
127
+ function debounce(func, wait_ms) {
128
+ let timeout;
129
+ return function (...args) {
130
+ const context = this;
131
+ clearTimeout(timeout);
132
+ timeout = setTimeout(() => func.apply(context, args), wait_ms);
133
+ };
134
  }
 
 
 
 
 
 
 
 
 
 
135
 
136
+ /**
137
+ * Handle copy and paste events
138
+ */
139
+ function customKeyEventHandler(e) {
140
+ if (e.type !== "keydown") {
141
+ return true;
142
+ }
143
+ if (e.ctrlKey && e.shiftKey) {
144
+ const key = e.key.toLowerCase();
145
+ if (key === "v") {
146
+ // ctrl+shift+v: paste whatever is in the clipboard
147
+ navigator.clipboard.readText().then((toPaste) => {
148
+ term.write(toPaste);
149
+ });
150
+ return false;
151
+ } else if (key === "c" || key === "x") {
152
+ // ctrl+shift+x: copy whatever is highlighted to clipboard
153
+ const toCopy = term.getSelection();
154
+ navigator.clipboard.writeText(toCopy);
155
+ term.focus();
156
+ return false;
157
+ }
158
+ }
159
+ return true;
160
  }
 
 
161
 
162
+ const wait_ms = 50;
163
+ window.onresize = debounce(fitToscreen, wait_ms);
164
+ term.attachCustomKeyEventHandler(customKeyEventHandler);
165
  </script>
166
+ </body>
167
  </html>