main
1<!DOCTYPE html>
2<html lang="en" class="noVNC_loading">
3<head>
4
5 <!--
6 noVNC example: simple example using default UI
7 Copyright (C) 2019 The noVNC authors
8 noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
9 This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
10
11 Connect parameters are provided in query string:
12 http://example.com/?host=HOST&port=PORT&encrypt=1
13 or the fragment:
14 http://example.com/#host=HOST&port=PORT&encrypt=1
15 -->
16 <title>noVNC</title>
17
18 <link rel="icon" type="image/x-icon" href="app/images/icons/novnc.ico">
19 <meta name="theme-color" content="#313131">
20
21 <!-- Apple iOS Safari settings -->
22 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
23 <meta name="apple-mobile-web-app-capable" content="yes">
24 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
25
26 <!-- @2x -->
27 <link rel="apple-touch-icon" sizes="40x40" type="image/png" href="app/images/icons/novnc-ios-40.png">
28 <link rel="apple-touch-icon" sizes="58x58" type="image/png" href="app/images/icons/novnc-ios-58.png">
29 <link rel="apple-touch-icon" sizes="80x80" type="image/png" href="app/images/icons/novnc-ios-80.png">
30 <link rel="apple-touch-icon" sizes="120x120" type="image/png" href="app/images/icons/novnc-ios-120.png">
31 <link rel="apple-touch-icon" sizes="152x152" type="image/png" href="app/images/icons/novnc-ios-152.png">
32 <link rel="apple-touch-icon" sizes="167x167" type="image/png" href="app/images/icons/novnc-ios-167.png">
33 <!-- @3x -->
34 <link rel="apple-touch-icon" sizes="60x60" type="image/png" href="app/images/icons/novnc-ios-60.png">
35 <link rel="apple-touch-icon" sizes="87x87" type="image/png" href="app/images/icons/novnc-ios-87.png">
36 <link rel="apple-touch-icon" sizes="120x120" type="image/png" href="app/images/icons/novnc-ios-120.png">
37 <link rel="apple-touch-icon" sizes="180x180" type="image/png" href="app/images/icons/novnc-ios-180.png">
38
39 <!-- Stylesheets -->
40 <link rel="stylesheet" href="app/styles/constants.css">
41 <link rel="stylesheet" href="app/styles/base.css">
42 <link rel="stylesheet" href="app/styles/input.css">
43
44 <!-- Images that will later appear via CSS -->
45 <link rel="preload" as="image" href="app/images/info.svg">
46 <link rel="preload" as="image" href="app/images/error.svg">
47 <link rel="preload" as="image" href="app/images/warning.svg">
48
49 <script type="module" crossorigin="anonymous" src="app/error-handler.js"></script>
50
51 <script type="module">
52 import UI from "./app/ui.js";
53 import * as Log from './core/util/logging.js';
54
55 let response;
56
57 let defaults = {};
58 let mandatory = {};
59
60 // Default settings will be loaded from defaults.json. Mandatory
61 // settings will be loaded from mandatory.json, which the user
62 // cannot change.
63
64 try {
65 response = await fetch('./defaults.json');
66 if (!response.ok) {
67 throw Error("" + response.status + " " + response.statusText);
68 }
69
70 defaults = await response.json();
71 } catch (err) {
72 Log.Error("Couldn't fetch defaults.json: " + err);
73 }
74
75 try {
76 response = await fetch('./mandatory.json');
77 if (!response.ok) {
78 throw Error("" + response.status + " " + response.statusText);
79 }
80
81 mandatory = await response.json();
82 } catch (err) {
83 Log.Error("Couldn't fetch mandatory.json: " + err);
84 }
85
86 // You can also override any defaults you need here:
87 //
88 // defaults['host'] = 'vnc.example.com';
89
90 // Or force a specific setting, preventing the user from
91 // changing it:
92 //
93 // mandatory['view_only'] = true;
94
95 // See docs/EMBEDDING.md for a list of possible settings.
96
97 UI.start({ settings: { defaults: defaults,
98 mandatory: mandatory } });
99 </script>
100</head>
101
102<body>
103
104 <div id="noVNC_fallback_error" class="noVNC_center">
105 <div>
106 <div>noVNC encountered an error:</div>
107 <br>
108 <div id="noVNC_fallback_errormsg"></div>
109 </div>
110 </div>
111
112 <!-- noVNC control bar -->
113 <div id="noVNC_control_bar_anchor" class="noVNC_vcenter">
114
115 <div id="noVNC_control_bar">
116 <div id="noVNC_control_bar_handle" title="Hide/Show the control bar"><div></div></div>
117
118 <div class="noVNC_scroll">
119
120 <h1 class="noVNC_logo" translate="no"><span>no</span><br>VNC</h1>
121
122 <hr>
123
124 <!-- Drag/Pan the viewport -->
125 <input type="image" alt="Drag" src="app/images/drag.svg"
126 id="noVNC_view_drag_button" class="noVNC_button noVNC_hidden"
127 title="Move/Drag viewport">
128
129 <!--noVNC touch device only buttons-->
130 <div id="noVNC_mobile_buttons">
131 <input type="image" alt="Keyboard" src="app/images/keyboard.svg"
132 id="noVNC_keyboard_button" class="noVNC_button" title="Show keyboard">
133 </div>
134
135 <!-- Extra manual keys -->
136 <input type="image" alt="Extra keys" src="app/images/toggleextrakeys.svg"
137 id="noVNC_toggle_extra_keys_button" class="noVNC_button"
138 title="Show extra keys">
139 <div class="noVNC_vcenter">
140 <div id="noVNC_modifiers" class="noVNC_panel">
141 <input type="image" alt="Ctrl" src="app/images/ctrl.svg"
142 id="noVNC_toggle_ctrl_button" class="noVNC_button"
143 title="Toggle Ctrl">
144 <input type="image" alt="Alt" src="app/images/alt.svg"
145 id="noVNC_toggle_alt_button" class="noVNC_button"
146 title="Toggle Alt">
147 <input type="image" alt="Windows" src="app/images/windows.svg"
148 id="noVNC_toggle_windows_button" class="noVNC_button"
149 title="Toggle Windows">
150 <input type="image" alt="Tab" src="app/images/tab.svg"
151 id="noVNC_send_tab_button" class="noVNC_button"
152 title="Send Tab">
153 <input type="image" alt="Esc" src="app/images/esc.svg"
154 id="noVNC_send_esc_button" class="noVNC_button"
155 title="Send Escape">
156 <input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.svg"
157 id="noVNC_send_ctrl_alt_del_button" class="noVNC_button"
158 title="Send Ctrl-Alt-Del">
159 </div>
160 </div>
161
162 <!-- Shutdown/Reboot -->
163 <input type="image" alt="Shutdown/Reboot" src="app/images/power.svg"
164 id="noVNC_power_button" class="noVNC_button"
165 title="Shutdown/Reboot...">
166 <div class="noVNC_vcenter">
167 <div id="noVNC_power" class="noVNC_panel">
168 <div class="noVNC_heading">
169 <img alt="" src="app/images/power.svg"> Power
170 </div>
171 <input type="button" id="noVNC_shutdown_button" value="Shutdown">
172 <input type="button" id="noVNC_reboot_button" value="Reboot">
173 <input type="button" id="noVNC_reset_button" value="Reset">
174 </div>
175 </div>
176
177 <!-- Clipboard -->
178 <input type="image" alt="Clipboard" src="app/images/clipboard.svg"
179 id="noVNC_clipboard_button" class="noVNC_button"
180 title="Clipboard">
181 <div class="noVNC_vcenter">
182 <div id="noVNC_clipboard" class="noVNC_panel">
183 <div class="noVNC_heading">
184 <img alt="" src="app/images/clipboard.svg"> Clipboard
185 </div>
186 <p class="noVNC_subheading">
187 Edit clipboard content in the textarea below.
188 </p>
189 <textarea id="noVNC_clipboard_text" rows=5></textarea>
190 </div>
191 </div>
192
193 <!-- Toggle fullscreen -->
194 <input type="image" alt="Full screen" src="app/images/fullscreen.svg"
195 id="noVNC_fullscreen_button" class="noVNC_button noVNC_hidden"
196 title="Full screen">
197
198 <!-- Settings -->
199 <input type="image" alt="Settings" src="app/images/settings.svg"
200 id="noVNC_settings_button" class="noVNC_button"
201 title="Settings">
202 <div class="noVNC_vcenter">
203 <div id="noVNC_settings" class="noVNC_panel">
204 <div class="noVNC_heading">
205 <img alt="" src="app/images/settings.svg"> Settings
206 </div>
207 <ul>
208 <li>
209 <label>
210 <input id="noVNC_setting_shared" type="checkbox"
211 class="toggle">
212 Shared mode
213 </label>
214 </li>
215 <li>
216 <label>
217 <input id="noVNC_setting_view_only" type="checkbox"
218 class="toggle">
219 View only
220 </label>
221 </li>
222 <li><hr></li>
223 <li>
224 <label>
225 <input id="noVNC_setting_view_clip" type="checkbox"
226 class="toggle">
227 Clip to window
228 </label>
229 </li>
230 <li>
231 <label for="noVNC_setting_resize">Scaling mode:</label>
232 <select id="noVNC_setting_resize" name="vncResize">
233 <option value="off">None</option>
234 <option value="scale">Local scaling</option>
235 <option value="remote">Remote resizing</option>
236 </select>
237 </li>
238 <li><hr></li>
239 <li>
240 <div class="noVNC_expander">Advanced</div>
241 <div><ul>
242 <li>
243 <label for="noVNC_setting_quality">Quality:</label>
244 <input id="noVNC_setting_quality" type="range" min="0" max="9" value="6">
245 </li>
246 <li>
247 <label for="noVNC_setting_compression">Compression level:</label>
248 <input id="noVNC_setting_compression" type="range" min="0" max="9" value="2">
249 </li>
250 <li><hr></li>
251 <li>
252 <label for="noVNC_setting_repeaterID">Repeater ID:</label>
253 <input id="noVNC_setting_repeaterID" type="text" value="">
254 </li>
255 <li>
256 <div class="noVNC_expander">WebSocket</div>
257 <div><ul>
258 <li>
259 <label>
260 <input id="noVNC_setting_encrypt" type="checkbox"
261 class="toggle">
262 Encrypt
263 </label>
264 </li>
265 <li>
266 <label for="noVNC_setting_host">Host:</label>
267 <input id="noVNC_setting_host">
268 </li>
269 <li>
270 <label for="noVNC_setting_port">Port:</label>
271 <input id="noVNC_setting_port" type="number">
272 </li>
273 <li>
274 <label for="noVNC_setting_path">Path:</label>
275 <input id="noVNC_setting_path" type="text" value="websockify">
276 </li>
277 </ul></div>
278 </li>
279 <li><hr></li>
280 <li>
281 <label>
282 <input id="noVNC_setting_reconnect" type="checkbox"
283 class="toggle">
284 Automatic reconnect
285 </label>
286 </li>
287 <li>
288 <label for="noVNC_setting_reconnect_delay">Reconnect delay (ms):</label>
289 <input id="noVNC_setting_reconnect_delay" type="number">
290 </li>
291 <li><hr></li>
292 <li>
293 <label>
294 <input id="noVNC_setting_show_dot" type="checkbox"
295 class="toggle">
296 Show dot when no cursor
297 </label>
298 </li>
299 <li>
300 <label>
301 <input id="noVNC_setting_keep_device_awake" type="checkbox"
302 class="toggle">
303 Keep client display awake while connected
304 </label>
305 </li>
306 <li><hr></li>
307 <!-- Logging selection dropdown -->
308 <li>
309 <label>Logging:
310 <select id="noVNC_setting_logging" name="vncLogging">
311 </select>
312 </label>
313 </li>
314 </ul></div>
315 </li>
316 <li class="noVNC_version_separator"><hr></li>
317 <li class="noVNC_version_wrapper">
318 <span>Version:</span>
319 <span class="noVNC_version"></span>
320 </li>
321 </ul>
322 </div>
323 </div>
324
325 <!-- Connection controls -->
326 <input type="image" alt="Disconnect" src="app/images/disconnect.svg"
327 id="noVNC_disconnect_button" class="noVNC_button"
328 title="Disconnect">
329
330 </div>
331 </div>
332
333 </div> <!-- End of noVNC_control_bar -->
334
335 <div id="noVNC_hint_anchor" class="noVNC_vcenter">
336 <div id="noVNC_control_bar_hint">
337 </div>
338 </div>
339
340 <!-- Status dialog -->
341 <div id="noVNC_status"></div>
342
343 <!-- Connect button -->
344 <div class="noVNC_center">
345 <div id="noVNC_connect_dlg">
346 <p class="noVNC_logo" translate="no"><span>no</span>VNC</p>
347 <div>
348 <button id="noVNC_connect_button">
349 <img alt="" src="app/images/connect.svg"> Connect
350 </button>
351 </div>
352 </div>
353 </div>
354
355 <!-- Server key verification dialog -->
356 <div class="noVNC_center noVNC_connect_layer">
357 <div id="noVNC_verify_server_dlg" class="noVNC_panel"><form>
358 <div class="noVNC_heading">
359 Server identity
360 </div>
361 <div>
362 The server has provided the following identifying information:
363 </div>
364 <div id="noVNC_fingerprint_block">
365 Fingerprint:
366 <span id="noVNC_fingerprint"></span>
367 </div>
368 <div>
369 Please verify that the information is correct and press
370 "Approve". Otherwise press "Reject".
371 </div>
372 <div class="button_row">
373 <input id="noVNC_approve_server_button" type="submit" value="Approve">
374 <input id="noVNC_reject_server_button" type="button" value="Reject">
375 </div>
376 </form></div>
377 </div>
378
379 <!-- Password dialog -->
380 <div class="noVNC_center noVNC_connect_layer">
381 <div id="noVNC_credentials_dlg" class="noVNC_panel"><form>
382 <div class="noVNC_heading">
383 Credentials
384 </div>
385 <div id="noVNC_username_block">
386 <label for="noVNC_username_input">Username:</label>
387 <input id="noVNC_username_input">
388 </div>
389 <div id="noVNC_password_block">
390 <label for="noVNC_password_input">Password:</label>
391 <input id="noVNC_password_input" type="password">
392 </div>
393 <div class="button_row">
394 <input id="noVNC_credentials_button" type="submit" value="Send credentials">
395 </div>
396 </form></div>
397 </div>
398
399 <!-- Transition screens -->
400 <div id="noVNC_transition">
401 <div id="noVNC_transition_text"></div>
402 <div>
403 <input type="button" id="noVNC_cancel_reconnect_button" value="Cancel">
404 </div>
405 <div class="noVNC_spinner"></div>
406 </div>
407
408 <!-- This is where the RFB elements will attach -->
409 <div id="noVNC_container">
410 <!-- Note that Google Chrome on Android doesn't respect any of these,
411 html attributes which attempt to disable text suggestions on the
412 on-screen keyboard. Let's hope Chrome implements the ime-mode
413 style for example -->
414 <textarea id="noVNC_keyboardinput" autocapitalize="off"
415 autocomplete="off" spellcheck="false" tabindex="-1"></textarea>
416 </div>
417
418 <audio id="noVNC_bell">
419 <source src="app/sounds/bell.oga" type="audio/ogg">
420 <source src="app/sounds/bell.mp3" type="audio/mpeg">
421 </audio>
422 </body>
423</html>