diff options
| -rw-r--r-- | configs/nginx/apps/.gitignore (renamed from configs/nginx/ext.d/.gitignore) | 0 | ||||
| -rw-r--r-- | configs/nginx/apps/kvm/manifest.json | 6 | ||||
| -rw-r--r-- | configs/nginx/nginx.conf | 27 | ||||
| -rw-r--r-- | web/apps/.gitignore | 0 | ||||
| -rw-r--r-- | web/index.html | 602 | ||||
| -rw-r--r-- | web/js/kvm/session.js | 2 | ||||
| -rw-r--r-- | web/kvm.html | 606 |
7 files changed, 628 insertions, 615 deletions
diff --git a/configs/nginx/ext.d/.gitignore b/configs/nginx/apps/.gitignore index e69de29b..e69de29b 100644 --- a/configs/nginx/ext.d/.gitignore +++ b/configs/nginx/apps/.gitignore diff --git a/configs/nginx/apps/kvm/manifest.json b/configs/nginx/apps/kvm/manifest.json new file mode 100644 index 00000000..710af6f0 --- /dev/null +++ b/configs/nginx/apps/kvm/manifest.json @@ -0,0 +1,6 @@ +{ + "name": "KVM", + "description": "Open KVM session in a web browser", + "path": "/kvm.html", + "place": 0 +} diff --git a/configs/nginx/nginx.conf b/configs/nginx/nginx.conf index ce4b5799..22271d20 100644 --- a/configs/nginx/nginx.conf +++ b/configs/nginx/nginx.conf @@ -6,7 +6,7 @@ worker_processes 4; # error_log /tmp/nginx.error.log; error_log stderr; -include /etc/nginx/ext.d/*/main-ctx.conf; +include /etc/nginx/apps/*/main-ctx.conf; events { worker_connections 1024; @@ -40,7 +40,7 @@ http { server 127.0.0.1:8082 fail_timeout=0s max_fails=0; } - include /etc/nginx/ext.d/*/http-ctx.conf; + include /etc/nginx/apps/*/http-ctx.conf; lua_shared_dict WS_TOKENS 10m; init_by_lua_block { @@ -49,14 +49,16 @@ http { local cjson = require("cjson"); local io = require("io"); - EXTENSIONS = {}; - local extensions_dir_path = "/etc/nginx/ext.d"; - for extension in io.popen("ls " .. extensions_dir_path):lines() do - local manifest_file = assert(io.open(extensions_dir_path .. "/" .. extension .. "/manifest.json", "r")); + local apps = {}; + local apps_dir_path = "/etc/nginx/apps"; + for app in io.popen("ls " .. apps_dir_path):lines() do + local manifest_file = assert(io.open(apps_dir_path .. "/" .. app .. "/manifest.json", "r")); local manifest = cjson.decode(manifest_file:read("*all")); manifest_file:close(); - EXTENSIONS[manifest["name"]] = manifest; + apps[app] = manifest; end + + APPS_JSON = cjson.encode(apps); } #PROD server { @@ -84,7 +86,7 @@ http { index index.html; } - location /wsauth { + location /ws_auth { # Workaround for Safari: https://bugs.webkit.org/show_bug.cgi?id=80362 #PROD access_by_lua_block { #PROD local token = ngx.encode_base64(ngx.sha1_bin(ngx.var.http_Authorization)); @@ -96,11 +98,10 @@ http { } } - location /extensions { + location /get_apps { default_type "application/json"; content_by_lua_block { - local cjson = require("cjson"); - ngx.say(cjson.encode(EXTENSIONS)); + ngx.say(APPS_JSON); } } @@ -110,7 +111,7 @@ http { #PROD local token = ngx.var.cookie_WS_ACCESS_TOKEN; #PROD local value, _ = ngx.shared.WS_TOKENS:get(token); #PROD if value == nil then -#PROD ngx.exec("/wsauth"); +#PROD ngx.exec("/ws_auth"); #PROD end #PROD } rewrite ^/kvmd/ws$ /ws break; @@ -164,6 +165,6 @@ http { proxy_ignore_headers X-Accel-Buffering; } - include /etc/nginx/ext.d/*/server-ctx.conf; + include /etc/nginx/apps/*/server-ctx.conf; } } diff --git a/web/apps/.gitignore b/web/apps/.gitignore new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/web/apps/.gitignore diff --git a/web/index.html b/web/index.html index d8de279f..64ecdab0 100644 --- a/web/index.html +++ b/web/index.html @@ -1,606 +1,6 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="utf-8" /> - <title>Pi-KVM / Session</title> - - <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> - <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> - <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> - <link rel="manifest" href="/site.webmanifest"> - <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> - <meta name="msapplication-TileColor" content="#2b5797"> - <meta name="theme-color" content="#ffffff"> - - <link rel="stylesheet" href="css/vars.css"> - <link rel="stylesheet" href="css/main.css"> - <link rel="stylesheet" href="css/menu.css"> - <link rel="stylesheet" href="css/windows.css"> - <link rel="stylesheet" href="css/modals.css"> - <link rel="stylesheet" href="css/leds.css"> - <link rel="stylesheet" href="css/sliders.css"> - <link rel="stylesheet" href="css/switches.css"> - <link rel="stylesheet" href="css/progress.css"> - <link rel="stylesheet" href="css/kvm/stream.css"> - <link rel="stylesheet" href="css/kvm/hid.css"> - <link rel="stylesheet" href="css/kvm/msd.css"> - <link rel="stylesheet" href="css/kvm/keyboard.css"> - <link rel="stylesheet" href="css/kvm/about.css"> - - <script src="js/bb.js"></script> - <script src="js/tools.js"></script> - <script src="js/ui.js"></script> - <script src="js/kvm/stream.js"></script> - <script src="js/kvm/atx.js"></script> - <script src="js/kvm/keyboard.js"></script> - <script src="js/kvm/mouse.js"></script> - <script src="js/kvm/hid.js"></script> - <script src="js/kvm/msd.js"></script> - <script src="js/kvm/session.js"></script> - <script src="js/kvm/main.js"></script> - - <script>window.onload = main;</script> + <meta http-equiv="refresh" content="0;kvm.html"> </head> - -<body> - <div id="bad-browser-modal" class="modal"> - <div class="modal-window"> - <div class="modal-content"> - Hello. You are using an incompatible or legacy browser.<br> - Please use one of the following browsers: - <hr> - <ul> - <li><a target="_blank" href="https://google.com/chrome">Google Chrome</a> <sup><i>recommended</i></sup></li> - <li><a target="_blank" href="https://chromium.org/Home">Chromium</a> <sup><i>recommended</i></sup></li> - <li><a target="_blank" href="https://mozilla.org/firefox">Mozilla Firefox</a></li> - <li><a target="_blank" href="https://apple.com/safari">Apple Safari</a></li> - <li><a target="_blank" href="https://opera.com">Opera</a></li> - <li><a target="_blank" href="https://vivaldi.com">Vivaldi</a></li> - </ul> - </div> - </div> - </div> - - <ul id="menu" class="menu"> - <li class="menu-logo"> - <img class="svg-gray" src="svg/logo.svg" alt="π-kvm" /> - </li> - - <li class="menu-right-actions"> - <div class="menu-dropdown"> - <a class="menu-item" href="#"> - <img data-dont-hide-menu id="link-led" class="led-gray" src="svg/link-led.svg" /> - <img data-dont-hide-menu id="stream-led" class="led-gray" src="svg/stream-led.svg" /> - <img data-dont-hide-menu id="hid-keyboard-led" class="led-gray" src="svg/hid-keyboard-led.svg" /> - <img data-dont-hide-menu id="hid-mouse-led" class="led-gray" src="svg/hid-mouse-led.svg" /> - System ↴ - </a> - <div data-dont-hide-menu class="menu-dropdown-content"> - <div class="menu-dropdown-content-buttons"> - <button disabled data-force-hide-menu id="stream-screenshot-button">• Take a screenshot</button> - <hr> - <button data-force-hide-menu id="show-stream-button">• Show stream</button> - <button data-force-hide-menu id="show-keyboard-button">• Show keyboard</button> - <button data-force-hide-menu id="show-about-button">• Show about</button> - </div> - <hr> - <div class="menu-dropdown-content-text"> - Stream quality: <span id="stream-quality-value">80%</span> - <div class="stream-slider-box"> - <input disabled type="range" id="stream-quality-slider" class="slider" /> - </div> - </div> - <hr> - <div class="menu-dropdown-content-text"> - Stream FPS: <span id="stream-desired-fps-value">30</span> - <div class="stream-slider-box"> - <input disabled type="range" id="stream-desired-fps-slider" class="slider" /> - </div> - </div> - <hr> - <div class="menu-dropdown-content-text"> - Stream size: <span id="stream-size-value">100%</span> - <div class="stream-slider-box"> - <input type="range" id="stream-size-slider" class="slider" /> - </div> - </div> - <hr> - <div class="menu-dropdown-content-text"> - <table id="stream-auto-resize-box"><tr> - <td>Auto-resize stream:</td> - <td align="right"> - <div class="switch-box"> - <input type="checkbox" id="stream-auto-resize-checkbox" class="switch-checkbox" checked /> - <label class="switch-label" for="stream-auto-resize-checkbox"> - <span class="switch-inner"></span> - <span class="switch"></span> - </label> - </div> - </td> - </tr></table> - </div> - <div class="menu-dropdown-content-buttons"> - <hr> - <button disabled data-force-hide-menu id="stream-reset-button">• Reset stream</button> - <button disabled data-force-hide-menu id="hid-reset-button">• Reset keyboard & mouse</button> - <button disabled data-force-hide-menu id="msd-reset-button">• Reset mass storage</button> - </div> - <hr> - <div class="menu-dropdown-content-buttons"> - <button data-force-hide-menu id="open-log-button">• Open log</button> - </div> - </div> - </div> - </li> - - <li class="menu-right-actions"> - <div class="menu-dropdown"> - <a class="menu-item" href="#"> - <img data-dont-hide-menu id="atx-power-led" class="led-gray" src="svg/atx-power-led.svg" /> - <img data-dont-hide-menu id="atx-hdd-led" class="led-gray" src="svg/atx-hdd-led.svg" /> - ATX ↴ - </a> - <div class="menu-dropdown-content menu-dropdown-content-buttons"> - <button disabled id="atx-power-button">• Click Power <sup><i>short</i></sup></button> - <button disabled id="atx-power-button-long">• Click Power <sup><i>long</i></sup></button> - <hr> - <button disabled id="atx-reset-button">• Click Reset</button> - </div> - </div> - </li> - - <li class="menu-right-actions"> - <div class="menu-dropdown"> - <a class="menu-item" href="#"> - <img data-dont-hide-menu id="msd-led" class="led-gray" src="svg/msd-led.svg" /> - Mass Storage ↴ - </a> - <div data-dont-hide-menu id="msd-menu" class="menu-dropdown-content"> - <div id="msd-not-in-operate" class="msd-message"> - <div class="menu-dropdown-content-text"> - <table> - <tr> - <td><img src="svg/warning.svg" /></td> - <td><b>Mass Storage Device is not operational</b></td> - </tr> - </table> - </div> - <hr> - </div> - - <div id="msd-current-image-broken" class="msd-message"> - <div class="menu-dropdown-content-text"> - <table> - <tr> - <td><img src="svg/warning.svg" /></td> - <td><b>Current image is broken!</b><br><sub>Perhaps uploading was interrupted</sub></td> - </tr> - </table> - </div> - <hr> - </div> - - <div id="msd-another-another-user-uploads" class="msd-message"> - <div class="menu-dropdown-content-text"> - <table> - <tr> - <td><img src="svg/info.svg" /></td> - <td><b>Another user uploads an image</b></td> - </tr> - </table> - </div> - <hr> - </div> - - <table class="msd-info"> - <tr> - <td>Status: </td> - <td id="msd-status" class="msd-info-value"></td> - </tr> - </table> - <hr> - - <table class="msd-info"> - <tr> - <td>Current image:</td> - <td id="msd-current-image-name" class="msd-info-value"></td> - </tr> - <tr> - <td>Image size:</td> - <td id="msd-current-image-size" class="msd-info-value"></td> - </tr> - <tr> - <td>Storage size:</td> - <td id="msd-storage-size" class="msd-info-value"></td> - </tr> - </table> - <hr> - - <input type="file" id="msd-select-new-image-file" class="msd-message" /> - <div class="menu-dropdown-content-buttons buttons-row"> - <button disabled id="msd-select-new-image-button" class="row50">Upload new image</button> - <button disabled id="msd-upload-new-image-button" class="row25">Start</button> - <button disabled id="msd-abort-uploading-button" class="row25">Abort</button> - </div> - <hr> - - <div id="msd-new-image" class="msd-message"> - <table class="msd-info"> - <tr> - <td>New name:</td> - <td id="msd-new-image-name" class="msd-info-value"></td> - </tr> - <tr> - <td>Upload size:</td> - <td id="msd-new-image-size" class="msd-info-value"></td> - </tr> - </table> - <hr> - <div class="menu-dropdown-content-text"> - <div id="msd-progress" class="progress"> - <span id="msd-progress-value" class="progress-value"></span> - </div> - </div> - <hr> - </div> - - <div class="menu-dropdown-content-buttons buttons-row"> - <button disabled data-force-hide-menu id="msd-switch-to-kvm-button" class="row50">• Switch drive to KVM</button> - <button disabled data-force-hide-menu id="msd-switch-to-server-button" class="row50">• Switch drive to Server</button> - </div> - </div> - </div> - </li> - - <li class="menu-right-actions"> - <div class="menu-dropdown"> - <a class="menu-item" href="#"> - <img data-dont-hide-menu id="hid-pak-led" class="led-gray" src="svg/gear-led.svg" /> - Shortcuts ↴ - </a> - <div data-dont-hide-menu class="menu-dropdown-content"> - <div class="menu-dropdown-content-buttons"> - <textarea id="hid-pak-text" placeholder="Paste your text here"></textarea> - <hr> - <button disabled data-force-hide-menu id="hid-pak-button">• ↑ Paste-as-Keys <sup><i>ascii-only</i></sup></button> - <hr> - <div class="buttons-row"> - <button data-force-hide-menu data-shortcut="CapsLock" class="row50">• CapsLock</button> - <button data-force-hide-menu data-shortcut="MetaLeft" class="row50">• Left Win</button> - </div> - <hr> - <button data-force-hide-menu data-shortcut="AltLeft ShiftLeft">• Alt+Shift</button> - <button data-force-hide-menu data-shortcut="ControlLeft ShiftLeft">• Ctrl+Shift</button> - <button data-force-hide-menu data-shortcut="ShiftLeft ShiftRight">• Shift+Shift</button> - <button data-force-hide-menu data-shortcut="MetaLeft Space">• Win+Space</button> - <hr> - <button data-force-hide-menu data-shortcut="ControlLeft KeyW">• Ctrl+W</button> - <button data-force-hide-menu data-shortcut="AltLeft Tab">• Alt+Tab</button> - <button data-force-hide-menu data-shortcut="AltLeft Enter">• Alt+Enter</button> - <button data-force-hide-menu data-shortcut="AltLeft F4">• Alt+F4</button> - <hr> - <button data-force-hide-menu data-shortcut="ControlLeft AltLeft Delete">• Ctrl+Alt+Del</button> - </div> - <hr> - <div class="menu-dropdown-content-text"> - ↓ Alt+SysRq+... <sup><i>linux magic (<a target="_blank" href="https://www.kernel.org/doc/html/latest/admin-guide/sysrq.html">help</a>)</i></sup> - </div> - <hr> - <div class="menu-dropdown-content-buttons buttons-row"> - <button data-shortcut="AltLeft PrintScreen KeyR" class="row16">R</button> - <button data-shortcut="AltLeft PrintScreen KeyE" class="row16">E</button> - <button data-shortcut="AltLeft PrintScreen KeyI" class="row16">I</button> - <button data-shortcut="AltLeft PrintScreen KeyS" class="row16">S</button> - <button data-shortcut="AltLeft PrintScreen KeyU" class="row16">U</button> - <button data-shortcut="AltLeft PrintScreen KeyB" class="row16">B</button> - </div> - </div> - </div> - </li> - </ul> - - <div id="stream-window" class="window" style="z-index: 1" tabindex="0"> - <div id="stream-window-header" class="window-header"><div class="window-grab">Stream</div></div> - <div id="stream-info"></div> - <div id="stream-box" class="stream-box-inactive"> - <img id="stream-image" class="stream-image-inactive" src="png/blank-stream.png" /> - </div> - <div id="stream-mouse-buttons"> - <button data-mouse-button="left" class="row50">Left Click</button> - <button data-mouse-button="right" class="row50">Right Click</button> - </div> - </div> - - <div id="keyboard-window" class="window" tabindex="0"> - <div id="keyboard-window-header" class="window-header"> - <div class="window-grab">Virtual Keyboard</div> - <button class="window-button-close">×</button> - </div> - <div id="keyboard-desktop" class="keyboard" align="center"> - <div class="keyboard-block"> - <div class="keyboard-row"> - <div data-key="Escape" class="key small"><p>Esc</p></div> - <div class="empty-key" style="width:24px"></div> - <div data-key="F1" class="key small"><p>F1</p></div> - <div data-key="F2" class="key small"><p>F2</p></div> - <div data-key="F3" class="key small"><p>F3</p></div> - <div data-key="F4" class="key small"><p>F4</p></div> - <div class="empty-key" style="width:10px"></div> - <div data-key="F5" class="key small"><p>F5</p></div> - <div data-key="F6" class="key small"><p>F6</p></div> - <div data-key="F7" class="key small"><p>F7</p></div> - <div data-key="F8" class="key small"><p>F8</p></div> - <div class="empty-key" style="width:10px"></div> - <div data-key="F9" class="key small"><p>F9</p></div> - <div data-key="F10" class="key small"><p>F10</p></div> - <div data-key="F11" class="key small"><p>F11</p></div> - <div data-key="F12" class="key small"><p>F12</p></div> - </div> - <hr> - <div class="keyboard-row"> - <div data-key="Backquote" class="key"><p>~<br>`</p></div> - <div data-key="Digit1" class="key"><p>!<br>1</p></div> - <div data-key="Digit2" class="key"><p>@<br>2</p></div> - <div data-key="Digit3" class="key"><p>#<br>3</p></div> - <div data-key="Digit4" class="key"><p>$<br>4</p></div> - <div data-key="Digit5" class="key"><p>%<br>5</p></div> - <div data-key="Digit6" class="key"><p>^<br>6</p></div> - <div data-key="Digit7" class="key"><p>&<br>7</p></div> - <div data-key="Digit8" class="key"><p>*<br>8</p></div> - <div data-key="Digit9" class="key"><p>(<br>9</p></div> - <div data-key="Digit0" class="key"><p>)<br>0</p></div> - <div data-key="Minus" class="key"><p>_<br>-</p></div> - <div data-key="Equal" class="key"><p>+<br>=</p></div> - <div data-key="Backspace" class="key wide-2 right"><p>↤</p></div> - </div> - <div class="keyboard-row"> - <div data-key="Tab" class="key wide-2 left"><p>⇤<br>⇥</p></div> - <div data-key="KeyQ" class="key single"><p>Q</p></div> - <div data-key="KeyW" class="key single"><p>W</p></div> - <div data-key="KeyE" class="key single"><p>E</p></div> - <div data-key="KeyR" class="key single"><p>R</p></div> - <div data-key="KeyT" class="key single"><p>T</p></div> - <div data-key="KeyY" class="key single"><p>Y</p></div> - <div data-key="KeyU" class="key single"><p>U</p></div> - <div data-key="KeyI" class="key single"><p>I</p></div> - <div data-key="KeyO" class="key single"><p>O</p></div> - <div data-key="KeyP" class="key single"><p>P</p></div> - <div data-key="BracketLeft" class="key"><p>{<br>[</p></div> - <div data-key="BracketRight" class="key"><p>}<br>]</p></div> - <div data-key="Backslash" class="key"><p>|<br>\</p></div> - </div> - <div class="keyboard-row"> - <div data-key="CapsLock" class="key wide-3 left small"><p>Caps Lock</p></div> - <div data-key="KeyA" class="key single"><p>A</p></div> - <div data-key="KeyS" class="key single"><p>S</p></div> - <div data-key="KeyD" class="key single"><p>D</p></div> - <div data-key="KeyF" class="key single"><p>F</p></div> - <div data-key="KeyG" class="key single"><p>G</p></div> - <div data-key="KeyH" class="key single"><p>H</p></div> - <div data-key="KeyJ" class="key single"><p>J</p></div> - <div data-key="KeyK" class="key single"><p>K</p></div> - <div data-key="KeyL" class="key single"><p>L</p></div> - <div data-key="Semicolon" class="key"><p>:<br>;</p></div> - <div data-key="Quote" class="key"><p>"<br>'</p></div> - <div data-key="Enter" class="key wide-3 right small"><p>Enter<br>↵</p></div> - </div> - <div class="keyboard-row"> - <div data-key="ShiftLeft" class="modifier wide-4 left small"><p><b>•</b><br>Shift</p></div> - <div data-key="KeyZ" class="key single"><p>Z</p></div> - <div data-key="KeyX" class="key single"><p>X</p></div> - <div data-key="KeyC" class="key single"><p>C</p></div> - <div data-key="KeyV" class="key single"><p>V</p></div> - <div data-key="KeyB" class="key single"><p>B</p></div> - <div data-key="KeyN" class="key single"><p>N</p></div> - <div data-key="KeyM" class="key single"><p>M</p></div> - <div data-key="Comma" class="key"><p><<br>,</p></div> - <div data-key="Period" class="key"><p>><br>.</p></div> - <div data-key="Slash" class="key"><p>?<br>/</p></div> - <div data-key="ShiftRight" class="modifier wide-4 right small"><p><b>•</b><br>Shift</p></div> - </div> - <div class="keyboard-row"> - <div data-key="ControlLeft" class="modifier wide-1 left small"><p><b>•</b><br>Ctrl</p></div> - <div data-key="MetaLeft" class="modifier wide-1 left small"><p><b>•</b><br>Win</p></div> - <div data-key="AltLeft" class="modifier wide-1 left small"><p><b>•</b><br>Alt</p></div> - <div data-key="Space" class="key wide-5"></div> - <div data-key="AltRight" class="modifier wide-1 right small"><p><b>•</b><br>Alt</p></div> - <div data-key="MetaRight" class="modifier wide-1 right small"><p><b>•</b><br>Win</p></div> - <div data-key="ControlRight" class="modifier wide-1 right small"><p><b>•</b><br>Ctrl</p></div> - </div> - </div> - <div class="keyboard-block"> - <div class="keyboard-row"> - <div data-key="PrintScreen" class="modifier small"><p><b>•</b><br>Pt/Sq</p></div> - <div data-key="ScrollLock" class="key small"><p>ScrLk</p></div> - <div data-key="Pause" class="key small"><p>P/Brk</p></div> - </div> - <hr> - <div class="keyboard-row"> - <div data-key="Insert" class="key small"><p>Ins</p></div> - <div data-key="Home" class="key small"><p>Home</p></div> - <div data-key="PageUp" class="key small"><p>PgUp</p></div> - </div> - <div class="keyboard-row"> - <div data-key="Delete" class="key small"><p>Del</p></div> - <div data-key="End" class="key small"><p>End</p></div> - <div data-key="PageDown" class="key small"><p>PgDn</p></div> - </div> - <div class="keyboard-row"></div> - <div class="keyboard-row"> - <div class="empty-key"></div> - <div data-key="ArrowUp" class="key"><p>↑</p></div> - <div class="empty-key"></div> - </div> - <div class="keyboard-row"> - <div data-key="ArrowLeft" class="key"><p>←</p></div> - <div data-key="ArrowDown" class="key"><p>↓</p></div> - <div data-key="ArrowRight" class="key"><p>→</p></div> - </div> - </div> - </div> - - <div id="keyboard-mobile" class="keyboard" align="center"> - <div class="keyboard-block"> - <div class="keyboard-row"> - <div data-key="Escape" class="key margin-0 small"><p>Esc</p></div> - <div class="empty-key" style="width:4px"></div> - <div data-key="F1" class="key wide-0 margin-0 small"><p>F1</p></div> - <div data-key="F2" class="key wide-0 margin-0 small"><p>F2</p></div> - <div data-key="F3" class="key wide-0 margin-0 small"><p>F3</p></div> - <div data-key="F4" class="key wide-0 margin-0 small"><p>F4</p></div> - <div data-key="F5" class="key wide-0 margin-0 small"><p>F5</p></div> - <div data-key="F6" class="key wide-0 margin-0 small"><p>F6</p></div> - <div data-key="F7" class="key wide-0 margin-0 small"><p>F7</p></div> - <div data-key="F8" class="key wide-0 margin-0 small"><p>F8</p></div> - <div data-key="F9" class="key wide-0 margin-0 small"><p>F9</p></div> - <div data-key="F10" class="key wide-0 margin-0 small"><p>F10</p></div> - <div data-key="F11" class="key wide-0 margin-0 small"><p>F11</p></div> - <div data-key="F12" class="key wide-0 margin-0 small"><p>F12</p></div> - <div class="empty-key" style="width:5px"></div> - <div data-key="PrintScreen" class="modifier margin-0 small"><p><b>•</b><br>Pt/Sq</p></div> - <div data-key="ScrollLock" class="key margin-0 small"><p>ScrLk</p></div> - <div data-key="Pause" class="key margin-0 small"><p>P/Brk</p></div> - <div data-key="Insert" class="key margin-0 small"><p>Ins</p></div> - <div data-key="Home" class="key margin-0 small"><p>Home</p></div> - <div data-key="End" class="key margin-0 small"><p>End</p></div> - <div data-key="Delete" class="key margin-0 small"><p>Del</p></div> - </div> - <hr> - <div class="keyboard-row"> - <div data-key="Backquote" class="key"><p>~<br>`</p></div> - <div data-key="Digit1" class="key"><p>!<br>1</p></div> - <div data-key="Digit2" class="key"><p>@<br>2</p></div> - <div data-key="Digit3" class="key"><p>#<br>3</p></div> - <div data-key="Digit4" class="key"><p>$<br>4</p></div> - <div data-key="Digit5" class="key"><p>%<br>5</p></div> - <div data-key="Digit6" class="key"><p>^<br>6</p></div> - <div data-key="Digit7" class="key"><p>&<br>7</p></div> - <div data-key="Digit8" class="key"><p>*<br>8</p></div> - <div data-key="Digit9" class="key"><p>(<br>9</p></div> - <div data-key="Digit0" class="key"><p>)<br>0</p></div> - <div data-key="Minus" class="key"><p>_<br>-</p></div> - <div data-key="Equal" class="key"><p>+<br>=</p></div> - <div data-key="Backspace" class="key wide-3 right" style="width:101px"><p>↤</p></div> - </div> - <div class="keyboard-row"> - <div data-key="Tab" class="key wide-2 left"><p>⇤<br>⇥</p></div> - <div data-key="KeyQ" class="key single"><p>Q</p></div> - <div data-key="KeyW" class="key single"><p>W</p></div> - <div data-key="KeyE" class="key single"><p>E</p></div> - <div data-key="KeyR" class="key single"><p>R</p></div> - <div data-key="KeyT" class="key single"><p>T</p></div> - <div data-key="KeyY" class="key single"><p>Y</p></div> - <div data-key="KeyU" class="key single"><p>U</p></div> - <div data-key="KeyI" class="key single"><p>I</p></div> - <div data-key="KeyO" class="key single"><p>O</p></div> - <div data-key="KeyP" class="key single"><p>P</p></div> - <div data-key="BracketLeft" class="key"><p>{<br>[</p></div> - <div data-key="BracketRight" class="key"><p>}<br>]</p></div> - <div data-key="Backslash" class="key wide-2 left" style="width:78px"><p>|<br>\</p></div> - </div> - <div class="keyboard-row"> - <div data-key="CapsLock" class="key wide-3 left small"><p>Caps Lock</p></div> - <div data-key="KeyA" class="key single"><p>A</p></div> - <div data-key="KeyS" class="key single"><p>S</p></div> - <div data-key="KeyD" class="key single"><p>D</p></div> - <div data-key="KeyF" class="key single"><p>F</p></div> - <div data-key="KeyG" class="key single"><p>G</p></div> - <div data-key="KeyH" class="key single"><p>H</p></div> - <div data-key="KeyJ" class="key single"><p>J</p></div> - <div data-key="KeyK" class="key single"><p>K</p></div> - <div data-key="KeyL" class="key single"><p>L</p></div> - <div data-key="Semicolon" class="key"><p>:<br>;</p></div> - <div data-key="Quote" class="key"><p>"<br>'</p></div> - <div data-key="Enter" class="key wide-4 right small" style="width:116px"><p>Enter<br>↵</p></div> - </div> - <div class="keyboard-row"> - <div data-key="ShiftLeft" class="modifier wide-4 left small"><p><b>•</b><br>Shift</p></div> - <div data-key="KeyZ" class="key single"><p>Z</p></div> - <div data-key="KeyX" class="key single"><p>X</p></div> - <div data-key="KeyC" class="key single"><p>C</p></div> - <div data-key="KeyV" class="key single"><p>V</p></div> - <div data-key="KeyB" class="key single"><p>B</p></div> - <div data-key="KeyN" class="key single"><p>N</p></div> - <div data-key="KeyM" class="key single"><p>M</p></div> - <div data-key="Comma" class="key"><p><<br>,</p></div> - <div data-key="Period" class="key"><p>><br>.</p></div> - <div data-key="Slash" class="key"><p>?<br>/</p></div> - <div data-key="PageUp" class="key small"><p>PgUp</p></div> - <div data-key="ArrowUp" class="key"><p>↑</p></div> - <div data-key="PageDown" class="key small"><p>PgDn</p></div> - </div> - <div class="keyboard-row"> - <div data-key="ControlLeft" class="modifier wide-1 left small"><p><b>•</b><br>Ctrl</p></div> - <div data-key="MetaLeft" class="modifier wide-1 left small"><p><b>•</b><br>Win</p></div> - <div data-key="AltLeft" class="modifier wide-1 left small"><p><b>•</b><br>Alt</p></div> - <div data-key="Space" class="key" style="width:190px"></div> - <div data-key="AltRight" class="modifier right small"><p><b>•</b><br>Alt</p></div> - <div data-key="MetaRight" class="modifier right small"><p><b>•</b><br>Win</p></div> - <div data-key="ShiftRight" class="modifier right small"><p><b>•</b><br>Shift</p></div> - <div data-key="ControlRight" class="modifier right small"><p><b>•</b><br>Ctrl</p></div> - <div data-key="ArrowLeft" class="key"><p>←</p></div> - <div data-key="ArrowDown" class="key"><p>↓</p></div> - <div data-key="ArrowRight" class="key"><p>→</p></div> - </div> - </div> - </div> - </div> - - <div id="about-window" class="window" tabindex="0"> - <div class="window-header"> - <div class="window-grab">About</div> - <button class="window-button-close">×</button> - </div> - <div id="about"> - <table> - <tr> - <td valign="top" class="logo"> - <img class="svg-gray" src="svg/logo.svg" alt="Open Source Hardware" height="40" /> - </td> - <td valign="top"> - <table> - <tr> - <td colspan="2" class="title">Open Source & Open Hardware IP-KVM</td> - </tr> - <tr> - <td colspan="2" class="copyright">Copyright © 2018 Pi-KVM Developers Team</td> - </tr> - <tr> - <td><br></td> - </tr> - <tr class="version"> - <td>KVMD:</td> - <td id="about-version-kvmd"></td> - </tr> - <tr class="version"> - <td>Streamer:</td> - <td id="about-version-streamer"></td> - </tr> - </table> - </td> - </tr> - </table> - <hr> - This is a web interface for KVMD. For better experience<br> - we recommend you to use a fresh version of one<br> - of the following browsers:<br> - <ul> - <li><a target="_blank" href="https://google.com/chrome">Google Chrome</a> <sup><i>recommended</i></sup></li> - <li><a target="_blank" href="https://chromium.org/Home">Chromium</a> <sup><i>recommended</i></sup></li> - <li><a target="_blank" href="https://mozilla.org/firefox">Mozilla Firefox</a></li> - <li><a target="_blank" href="https://apple.com/safari">Apple Safari</a></li> - <li><a target="_blank" href="https://opera.com">Opera</a></li> - <li><a target="_blank" href="https://vivaldi.com">Vivaldi</a></li> - </ul> - <hr> - Please visit our site <a target="_blank" href="https://github.com/pi-kvm">https://github.com/pi-kvm</a> to get documentation,<br> - source codes, hardware schematics and legal information.<br> - </div> - </div> - - <ul class="footer"> - <li id="kvmd-version" class="footer-left"></li> - <li class="footer-right"><a target="_blank" href="https://github.com/pi-kvm">Pi-KVM Project</a></li> - </ul> -</body> </html> diff --git a/web/js/kvm/session.js b/web/js/kvm/session.js index 5a89813a..386c781c 100644 --- a/web/js/kvm/session.js +++ b/web/js/kvm/session.js @@ -39,7 +39,7 @@ function Session() { var __startPoller = function() { $("link-led").className = "led-yellow"; $("link-led").title = "Connecting..."; - var http = tools.makeRequest("GET", "/wsauth", function() { + var http = tools.makeRequest("GET", "/ws_auth", function() { if (http.readyState === 4) { if (http.status === 200) { __ws = new WebSocket((location.protocol === "https:" ? "wss" : "ws") + "://" + location.host + "/kvmd/ws"); diff --git a/web/kvm.html b/web/kvm.html new file mode 100644 index 00000000..d8de279f --- /dev/null +++ b/web/kvm.html @@ -0,0 +1,606 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8" /> + <title>Pi-KVM / Session</title> + + <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> + <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> + <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> + <link rel="manifest" href="/site.webmanifest"> + <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> + <meta name="msapplication-TileColor" content="#2b5797"> + <meta name="theme-color" content="#ffffff"> + + <link rel="stylesheet" href="css/vars.css"> + <link rel="stylesheet" href="css/main.css"> + <link rel="stylesheet" href="css/menu.css"> + <link rel="stylesheet" href="css/windows.css"> + <link rel="stylesheet" href="css/modals.css"> + <link rel="stylesheet" href="css/leds.css"> + <link rel="stylesheet" href="css/sliders.css"> + <link rel="stylesheet" href="css/switches.css"> + <link rel="stylesheet" href="css/progress.css"> + <link rel="stylesheet" href="css/kvm/stream.css"> + <link rel="stylesheet" href="css/kvm/hid.css"> + <link rel="stylesheet" href="css/kvm/msd.css"> + <link rel="stylesheet" href="css/kvm/keyboard.css"> + <link rel="stylesheet" href="css/kvm/about.css"> + + <script src="js/bb.js"></script> + <script src="js/tools.js"></script> + <script src="js/ui.js"></script> + <script src="js/kvm/stream.js"></script> + <script src="js/kvm/atx.js"></script> + <script src="js/kvm/keyboard.js"></script> + <script src="js/kvm/mouse.js"></script> + <script src="js/kvm/hid.js"></script> + <script src="js/kvm/msd.js"></script> + <script src="js/kvm/session.js"></script> + <script src="js/kvm/main.js"></script> + + <script>window.onload = main;</script> +</head> + +<body> + <div id="bad-browser-modal" class="modal"> + <div class="modal-window"> + <div class="modal-content"> + Hello. You are using an incompatible or legacy browser.<br> + Please use one of the following browsers: + <hr> + <ul> + <li><a target="_blank" href="https://google.com/chrome">Google Chrome</a> <sup><i>recommended</i></sup></li> + <li><a target="_blank" href="https://chromium.org/Home">Chromium</a> <sup><i>recommended</i></sup></li> + <li><a target="_blank" href="https://mozilla.org/firefox">Mozilla Firefox</a></li> + <li><a target="_blank" href="https://apple.com/safari">Apple Safari</a></li> + <li><a target="_blank" href="https://opera.com">Opera</a></li> + <li><a target="_blank" href="https://vivaldi.com">Vivaldi</a></li> + </ul> + </div> + </div> + </div> + + <ul id="menu" class="menu"> + <li class="menu-logo"> + <img class="svg-gray" src="svg/logo.svg" alt="π-kvm" /> + </li> + + <li class="menu-right-actions"> + <div class="menu-dropdown"> + <a class="menu-item" href="#"> + <img data-dont-hide-menu id="link-led" class="led-gray" src="svg/link-led.svg" /> + <img data-dont-hide-menu id="stream-led" class="led-gray" src="svg/stream-led.svg" /> + <img data-dont-hide-menu id="hid-keyboard-led" class="led-gray" src="svg/hid-keyboard-led.svg" /> + <img data-dont-hide-menu id="hid-mouse-led" class="led-gray" src="svg/hid-mouse-led.svg" /> + System ↴ + </a> + <div data-dont-hide-menu class="menu-dropdown-content"> + <div class="menu-dropdown-content-buttons"> + <button disabled data-force-hide-menu id="stream-screenshot-button">• Take a screenshot</button> + <hr> + <button data-force-hide-menu id="show-stream-button">• Show stream</button> + <button data-force-hide-menu id="show-keyboard-button">• Show keyboard</button> + <button data-force-hide-menu id="show-about-button">• Show about</button> + </div> + <hr> + <div class="menu-dropdown-content-text"> + Stream quality: <span id="stream-quality-value">80%</span> + <div class="stream-slider-box"> + <input disabled type="range" id="stream-quality-slider" class="slider" /> + </div> + </div> + <hr> + <div class="menu-dropdown-content-text"> + Stream FPS: <span id="stream-desired-fps-value">30</span> + <div class="stream-slider-box"> + <input disabled type="range" id="stream-desired-fps-slider" class="slider" /> + </div> + </div> + <hr> + <div class="menu-dropdown-content-text"> + Stream size: <span id="stream-size-value">100%</span> + <div class="stream-slider-box"> + <input type="range" id="stream-size-slider" class="slider" /> + </div> + </div> + <hr> + <div class="menu-dropdown-content-text"> + <table id="stream-auto-resize-box"><tr> + <td>Auto-resize stream:</td> + <td align="right"> + <div class="switch-box"> + <input type="checkbox" id="stream-auto-resize-checkbox" class="switch-checkbox" checked /> + <label class="switch-label" for="stream-auto-resize-checkbox"> + <span class="switch-inner"></span> + <span class="switch"></span> + </label> + </div> + </td> + </tr></table> + </div> + <div class="menu-dropdown-content-buttons"> + <hr> + <button disabled data-force-hide-menu id="stream-reset-button">• Reset stream</button> + <button disabled data-force-hide-menu id="hid-reset-button">• Reset keyboard & mouse</button> + <button disabled data-force-hide-menu id="msd-reset-button">• Reset mass storage</button> + </div> + <hr> + <div class="menu-dropdown-content-buttons"> + <button data-force-hide-menu id="open-log-button">• Open log</button> + </div> + </div> + </div> + </li> + + <li class="menu-right-actions"> + <div class="menu-dropdown"> + <a class="menu-item" href="#"> + <img data-dont-hide-menu id="atx-power-led" class="led-gray" src="svg/atx-power-led.svg" /> + <img data-dont-hide-menu id="atx-hdd-led" class="led-gray" src="svg/atx-hdd-led.svg" /> + ATX ↴ + </a> + <div class="menu-dropdown-content menu-dropdown-content-buttons"> + <button disabled id="atx-power-button">• Click Power <sup><i>short</i></sup></button> + <button disabled id="atx-power-button-long">• Click Power <sup><i>long</i></sup></button> + <hr> + <button disabled id="atx-reset-button">• Click Reset</button> + </div> + </div> + </li> + + <li class="menu-right-actions"> + <div class="menu-dropdown"> + <a class="menu-item" href="#"> + <img data-dont-hide-menu id="msd-led" class="led-gray" src="svg/msd-led.svg" /> + Mass Storage ↴ + </a> + <div data-dont-hide-menu id="msd-menu" class="menu-dropdown-content"> + <div id="msd-not-in-operate" class="msd-message"> + <div class="menu-dropdown-content-text"> + <table> + <tr> + <td><img src="svg/warning.svg" /></td> + <td><b>Mass Storage Device is not operational</b></td> + </tr> + </table> + </div> + <hr> + </div> + + <div id="msd-current-image-broken" class="msd-message"> + <div class="menu-dropdown-content-text"> + <table> + <tr> + <td><img src="svg/warning.svg" /></td> + <td><b>Current image is broken!</b><br><sub>Perhaps uploading was interrupted</sub></td> + </tr> + </table> + </div> + <hr> + </div> + + <div id="msd-another-another-user-uploads" class="msd-message"> + <div class="menu-dropdown-content-text"> + <table> + <tr> + <td><img src="svg/info.svg" /></td> + <td><b>Another user uploads an image</b></td> + </tr> + </table> + </div> + <hr> + </div> + + <table class="msd-info"> + <tr> + <td>Status: </td> + <td id="msd-status" class="msd-info-value"></td> + </tr> + </table> + <hr> + + <table class="msd-info"> + <tr> + <td>Current image:</td> + <td id="msd-current-image-name" class="msd-info-value"></td> + </tr> + <tr> + <td>Image size:</td> + <td id="msd-current-image-size" class="msd-info-value"></td> + </tr> + <tr> + <td>Storage size:</td> + <td id="msd-storage-size" class="msd-info-value"></td> + </tr> + </table> + <hr> + + <input type="file" id="msd-select-new-image-file" class="msd-message" /> + <div class="menu-dropdown-content-buttons buttons-row"> + <button disabled id="msd-select-new-image-button" class="row50">Upload new image</button> + <button disabled id="msd-upload-new-image-button" class="row25">Start</button> + <button disabled id="msd-abort-uploading-button" class="row25">Abort</button> + </div> + <hr> + + <div id="msd-new-image" class="msd-message"> + <table class="msd-info"> + <tr> + <td>New name:</td> + <td id="msd-new-image-name" class="msd-info-value"></td> + </tr> + <tr> + <td>Upload size:</td> + <td id="msd-new-image-size" class="msd-info-value"></td> + </tr> + </table> + <hr> + <div class="menu-dropdown-content-text"> + <div id="msd-progress" class="progress"> + <span id="msd-progress-value" class="progress-value"></span> + </div> + </div> + <hr> + </div> + + <div class="menu-dropdown-content-buttons buttons-row"> + <button disabled data-force-hide-menu id="msd-switch-to-kvm-button" class="row50">• Switch drive to KVM</button> + <button disabled data-force-hide-menu id="msd-switch-to-server-button" class="row50">• Switch drive to Server</button> + </div> + </div> + </div> + </li> + + <li class="menu-right-actions"> + <div class="menu-dropdown"> + <a class="menu-item" href="#"> + <img data-dont-hide-menu id="hid-pak-led" class="led-gray" src="svg/gear-led.svg" /> + Shortcuts ↴ + </a> + <div data-dont-hide-menu class="menu-dropdown-content"> + <div class="menu-dropdown-content-buttons"> + <textarea id="hid-pak-text" placeholder="Paste your text here"></textarea> + <hr> + <button disabled data-force-hide-menu id="hid-pak-button">• ↑ Paste-as-Keys <sup><i>ascii-only</i></sup></button> + <hr> + <div class="buttons-row"> + <button data-force-hide-menu data-shortcut="CapsLock" class="row50">• CapsLock</button> + <button data-force-hide-menu data-shortcut="MetaLeft" class="row50">• Left Win</button> + </div> + <hr> + <button data-force-hide-menu data-shortcut="AltLeft ShiftLeft">• Alt+Shift</button> + <button data-force-hide-menu data-shortcut="ControlLeft ShiftLeft">• Ctrl+Shift</button> + <button data-force-hide-menu data-shortcut="ShiftLeft ShiftRight">• Shift+Shift</button> + <button data-force-hide-menu data-shortcut="MetaLeft Space">• Win+Space</button> + <hr> + <button data-force-hide-menu data-shortcut="ControlLeft KeyW">• Ctrl+W</button> + <button data-force-hide-menu data-shortcut="AltLeft Tab">• Alt+Tab</button> + <button data-force-hide-menu data-shortcut="AltLeft Enter">• Alt+Enter</button> + <button data-force-hide-menu data-shortcut="AltLeft F4">• Alt+F4</button> + <hr> + <button data-force-hide-menu data-shortcut="ControlLeft AltLeft Delete">• Ctrl+Alt+Del</button> + </div> + <hr> + <div class="menu-dropdown-content-text"> + ↓ Alt+SysRq+... <sup><i>linux magic (<a target="_blank" href="https://www.kernel.org/doc/html/latest/admin-guide/sysrq.html">help</a>)</i></sup> + </div> + <hr> + <div class="menu-dropdown-content-buttons buttons-row"> + <button data-shortcut="AltLeft PrintScreen KeyR" class="row16">R</button> + <button data-shortcut="AltLeft PrintScreen KeyE" class="row16">E</button> + <button data-shortcut="AltLeft PrintScreen KeyI" class="row16">I</button> + <button data-shortcut="AltLeft PrintScreen KeyS" class="row16">S</button> + <button data-shortcut="AltLeft PrintScreen KeyU" class="row16">U</button> + <button data-shortcut="AltLeft PrintScreen KeyB" class="row16">B</button> + </div> + </div> + </div> + </li> + </ul> + + <div id="stream-window" class="window" style="z-index: 1" tabindex="0"> + <div id="stream-window-header" class="window-header"><div class="window-grab">Stream</div></div> + <div id="stream-info"></div> + <div id="stream-box" class="stream-box-inactive"> + <img id="stream-image" class="stream-image-inactive" src="png/blank-stream.png" /> + </div> + <div id="stream-mouse-buttons"> + <button data-mouse-button="left" class="row50">Left Click</button> + <button data-mouse-button="right" class="row50">Right Click</button> + </div> + </div> + + <div id="keyboard-window" class="window" tabindex="0"> + <div id="keyboard-window-header" class="window-header"> + <div class="window-grab">Virtual Keyboard</div> + <button class="window-button-close">×</button> + </div> + <div id="keyboard-desktop" class="keyboard" align="center"> + <div class="keyboard-block"> + <div class="keyboard-row"> + <div data-key="Escape" class="key small"><p>Esc</p></div> + <div class="empty-key" style="width:24px"></div> + <div data-key="F1" class="key small"><p>F1</p></div> + <div data-key="F2" class="key small"><p>F2</p></div> + <div data-key="F3" class="key small"><p>F3</p></div> + <div data-key="F4" class="key small"><p>F4</p></div> + <div class="empty-key" style="width:10px"></div> + <div data-key="F5" class="key small"><p>F5</p></div> + <div data-key="F6" class="key small"><p>F6</p></div> + <div data-key="F7" class="key small"><p>F7</p></div> + <div data-key="F8" class="key small"><p>F8</p></div> + <div class="empty-key" style="width:10px"></div> + <div data-key="F9" class="key small"><p>F9</p></div> + <div data-key="F10" class="key small"><p>F10</p></div> + <div data-key="F11" class="key small"><p>F11</p></div> + <div data-key="F12" class="key small"><p>F12</p></div> + </div> + <hr> + <div class="keyboard-row"> + <div data-key="Backquote" class="key"><p>~<br>`</p></div> + <div data-key="Digit1" class="key"><p>!<br>1</p></div> + <div data-key="Digit2" class="key"><p>@<br>2</p></div> + <div data-key="Digit3" class="key"><p>#<br>3</p></div> + <div data-key="Digit4" class="key"><p>$<br>4</p></div> + <div data-key="Digit5" class="key"><p>%<br>5</p></div> + <div data-key="Digit6" class="key"><p>^<br>6</p></div> + <div data-key="Digit7" class="key"><p>&<br>7</p></div> + <div data-key="Digit8" class="key"><p>*<br>8</p></div> + <div data-key="Digit9" class="key"><p>(<br>9</p></div> + <div data-key="Digit0" class="key"><p>)<br>0</p></div> + <div data-key="Minus" class="key"><p>_<br>-</p></div> + <div data-key="Equal" class="key"><p>+<br>=</p></div> + <div data-key="Backspace" class="key wide-2 right"><p>↤</p></div> + </div> + <div class="keyboard-row"> + <div data-key="Tab" class="key wide-2 left"><p>⇤<br>⇥</p></div> + <div data-key="KeyQ" class="key single"><p>Q</p></div> + <div data-key="KeyW" class="key single"><p>W</p></div> + <div data-key="KeyE" class="key single"><p>E</p></div> + <div data-key="KeyR" class="key single"><p>R</p></div> + <div data-key="KeyT" class="key single"><p>T</p></div> + <div data-key="KeyY" class="key single"><p>Y</p></div> + <div data-key="KeyU" class="key single"><p>U</p></div> + <div data-key="KeyI" class="key single"><p>I</p></div> + <div data-key="KeyO" class="key single"><p>O</p></div> + <div data-key="KeyP" class="key single"><p>P</p></div> + <div data-key="BracketLeft" class="key"><p>{<br>[</p></div> + <div data-key="BracketRight" class="key"><p>}<br>]</p></div> + <div data-key="Backslash" class="key"><p>|<br>\</p></div> + </div> + <div class="keyboard-row"> + <div data-key="CapsLock" class="key wide-3 left small"><p>Caps Lock</p></div> + <div data-key="KeyA" class="key single"><p>A</p></div> + <div data-key="KeyS" class="key single"><p>S</p></div> + <div data-key="KeyD" class="key single"><p>D</p></div> + <div data-key="KeyF" class="key single"><p>F</p></div> + <div data-key="KeyG" class="key single"><p>G</p></div> + <div data-key="KeyH" class="key single"><p>H</p></div> + <div data-key="KeyJ" class="key single"><p>J</p></div> + <div data-key="KeyK" class="key single"><p>K</p></div> + <div data-key="KeyL" class="key single"><p>L</p></div> + <div data-key="Semicolon" class="key"><p>:<br>;</p></div> + <div data-key="Quote" class="key"><p>"<br>'</p></div> + <div data-key="Enter" class="key wide-3 right small"><p>Enter<br>↵</p></div> + </div> + <div class="keyboard-row"> + <div data-key="ShiftLeft" class="modifier wide-4 left small"><p><b>•</b><br>Shift</p></div> + <div data-key="KeyZ" class="key single"><p>Z</p></div> + <div data-key="KeyX" class="key single"><p>X</p></div> + <div data-key="KeyC" class="key single"><p>C</p></div> + <div data-key="KeyV" class="key single"><p>V</p></div> + <div data-key="KeyB" class="key single"><p>B</p></div> + <div data-key="KeyN" class="key single"><p>N</p></div> + <div data-key="KeyM" class="key single"><p>M</p></div> + <div data-key="Comma" class="key"><p><<br>,</p></div> + <div data-key="Period" class="key"><p>><br>.</p></div> + <div data-key="Slash" class="key"><p>?<br>/</p></div> + <div data-key="ShiftRight" class="modifier wide-4 right small"><p><b>•</b><br>Shift</p></div> + </div> + <div class="keyboard-row"> + <div data-key="ControlLeft" class="modifier wide-1 left small"><p><b>•</b><br>Ctrl</p></div> + <div data-key="MetaLeft" class="modifier wide-1 left small"><p><b>•</b><br>Win</p></div> + <div data-key="AltLeft" class="modifier wide-1 left small"><p><b>•</b><br>Alt</p></div> + <div data-key="Space" class="key wide-5"></div> + <div data-key="AltRight" class="modifier wide-1 right small"><p><b>•</b><br>Alt</p></div> + <div data-key="MetaRight" class="modifier wide-1 right small"><p><b>•</b><br>Win</p></div> + <div data-key="ControlRight" class="modifier wide-1 right small"><p><b>•</b><br>Ctrl</p></div> + </div> + </div> + <div class="keyboard-block"> + <div class="keyboard-row"> + <div data-key="PrintScreen" class="modifier small"><p><b>•</b><br>Pt/Sq</p></div> + <div data-key="ScrollLock" class="key small"><p>ScrLk</p></div> + <div data-key="Pause" class="key small"><p>P/Brk</p></div> + </div> + <hr> + <div class="keyboard-row"> + <div data-key="Insert" class="key small"><p>Ins</p></div> + <div data-key="Home" class="key small"><p>Home</p></div> + <div data-key="PageUp" class="key small"><p>PgUp</p></div> + </div> + <div class="keyboard-row"> + <div data-key="Delete" class="key small"><p>Del</p></div> + <div data-key="End" class="key small"><p>End</p></div> + <div data-key="PageDown" class="key small"><p>PgDn</p></div> + </div> + <div class="keyboard-row"></div> + <div class="keyboard-row"> + <div class="empty-key"></div> + <div data-key="ArrowUp" class="key"><p>↑</p></div> + <div class="empty-key"></div> + </div> + <div class="keyboard-row"> + <div data-key="ArrowLeft" class="key"><p>←</p></div> + <div data-key="ArrowDown" class="key"><p>↓</p></div> + <div data-key="ArrowRight" class="key"><p>→</p></div> + </div> + </div> + </div> + + <div id="keyboard-mobile" class="keyboard" align="center"> + <div class="keyboard-block"> + <div class="keyboard-row"> + <div data-key="Escape" class="key margin-0 small"><p>Esc</p></div> + <div class="empty-key" style="width:4px"></div> + <div data-key="F1" class="key wide-0 margin-0 small"><p>F1</p></div> + <div data-key="F2" class="key wide-0 margin-0 small"><p>F2</p></div> + <div data-key="F3" class="key wide-0 margin-0 small"><p>F3</p></div> + <div data-key="F4" class="key wide-0 margin-0 small"><p>F4</p></div> + <div data-key="F5" class="key wide-0 margin-0 small"><p>F5</p></div> + <div data-key="F6" class="key wide-0 margin-0 small"><p>F6</p></div> + <div data-key="F7" class="key wide-0 margin-0 small"><p>F7</p></div> + <div data-key="F8" class="key wide-0 margin-0 small"><p>F8</p></div> + <div data-key="F9" class="key wide-0 margin-0 small"><p>F9</p></div> + <div data-key="F10" class="key wide-0 margin-0 small"><p>F10</p></div> + <div data-key="F11" class="key wide-0 margin-0 small"><p>F11</p></div> + <div data-key="F12" class="key wide-0 margin-0 small"><p>F12</p></div> + <div class="empty-key" style="width:5px"></div> + <div data-key="PrintScreen" class="modifier margin-0 small"><p><b>•</b><br>Pt/Sq</p></div> + <div data-key="ScrollLock" class="key margin-0 small"><p>ScrLk</p></div> + <div data-key="Pause" class="key margin-0 small"><p>P/Brk</p></div> + <div data-key="Insert" class="key margin-0 small"><p>Ins</p></div> + <div data-key="Home" class="key margin-0 small"><p>Home</p></div> + <div data-key="End" class="key margin-0 small"><p>End</p></div> + <div data-key="Delete" class="key margin-0 small"><p>Del</p></div> + </div> + <hr> + <div class="keyboard-row"> + <div data-key="Backquote" class="key"><p>~<br>`</p></div> + <div data-key="Digit1" class="key"><p>!<br>1</p></div> + <div data-key="Digit2" class="key"><p>@<br>2</p></div> + <div data-key="Digit3" class="key"><p>#<br>3</p></div> + <div data-key="Digit4" class="key"><p>$<br>4</p></div> + <div data-key="Digit5" class="key"><p>%<br>5</p></div> + <div data-key="Digit6" class="key"><p>^<br>6</p></div> + <div data-key="Digit7" class="key"><p>&<br>7</p></div> + <div data-key="Digit8" class="key"><p>*<br>8</p></div> + <div data-key="Digit9" class="key"><p>(<br>9</p></div> + <div data-key="Digit0" class="key"><p>)<br>0</p></div> + <div data-key="Minus" class="key"><p>_<br>-</p></div> + <div data-key="Equal" class="key"><p>+<br>=</p></div> + <div data-key="Backspace" class="key wide-3 right" style="width:101px"><p>↤</p></div> + </div> + <div class="keyboard-row"> + <div data-key="Tab" class="key wide-2 left"><p>⇤<br>⇥</p></div> + <div data-key="KeyQ" class="key single"><p>Q</p></div> + <div data-key="KeyW" class="key single"><p>W</p></div> + <div data-key="KeyE" class="key single"><p>E</p></div> + <div data-key="KeyR" class="key single"><p>R</p></div> + <div data-key="KeyT" class="key single"><p>T</p></div> + <div data-key="KeyY" class="key single"><p>Y</p></div> + <div data-key="KeyU" class="key single"><p>U</p></div> + <div data-key="KeyI" class="key single"><p>I</p></div> + <div data-key="KeyO" class="key single"><p>O</p></div> + <div data-key="KeyP" class="key single"><p>P</p></div> + <div data-key="BracketLeft" class="key"><p>{<br>[</p></div> + <div data-key="BracketRight" class="key"><p>}<br>]</p></div> + <div data-key="Backslash" class="key wide-2 left" style="width:78px"><p>|<br>\</p></div> + </div> + <div class="keyboard-row"> + <div data-key="CapsLock" class="key wide-3 left small"><p>Caps Lock</p></div> + <div data-key="KeyA" class="key single"><p>A</p></div> + <div data-key="KeyS" class="key single"><p>S</p></div> + <div data-key="KeyD" class="key single"><p>D</p></div> + <div data-key="KeyF" class="key single"><p>F</p></div> + <div data-key="KeyG" class="key single"><p>G</p></div> + <div data-key="KeyH" class="key single"><p>H</p></div> + <div data-key="KeyJ" class="key single"><p>J</p></div> + <div data-key="KeyK" class="key single"><p>K</p></div> + <div data-key="KeyL" class="key single"><p>L</p></div> + <div data-key="Semicolon" class="key"><p>:<br>;</p></div> + <div data-key="Quote" class="key"><p>"<br>'</p></div> + <div data-key="Enter" class="key wide-4 right small" style="width:116px"><p>Enter<br>↵</p></div> + </div> + <div class="keyboard-row"> + <div data-key="ShiftLeft" class="modifier wide-4 left small"><p><b>•</b><br>Shift</p></div> + <div data-key="KeyZ" class="key single"><p>Z</p></div> + <div data-key="KeyX" class="key single"><p>X</p></div> + <div data-key="KeyC" class="key single"><p>C</p></div> + <div data-key="KeyV" class="key single"><p>V</p></div> + <div data-key="KeyB" class="key single"><p>B</p></div> + <div data-key="KeyN" class="key single"><p>N</p></div> + <div data-key="KeyM" class="key single"><p>M</p></div> + <div data-key="Comma" class="key"><p><<br>,</p></div> + <div data-key="Period" class="key"><p>><br>.</p></div> + <div data-key="Slash" class="key"><p>?<br>/</p></div> + <div data-key="PageUp" class="key small"><p>PgUp</p></div> + <div data-key="ArrowUp" class="key"><p>↑</p></div> + <div data-key="PageDown" class="key small"><p>PgDn</p></div> + </div> + <div class="keyboard-row"> + <div data-key="ControlLeft" class="modifier wide-1 left small"><p><b>•</b><br>Ctrl</p></div> + <div data-key="MetaLeft" class="modifier wide-1 left small"><p><b>•</b><br>Win</p></div> + <div data-key="AltLeft" class="modifier wide-1 left small"><p><b>•</b><br>Alt</p></div> + <div data-key="Space" class="key" style="width:190px"></div> + <div data-key="AltRight" class="modifier right small"><p><b>•</b><br>Alt</p></div> + <div data-key="MetaRight" class="modifier right small"><p><b>•</b><br>Win</p></div> + <div data-key="ShiftRight" class="modifier right small"><p><b>•</b><br>Shift</p></div> + <div data-key="ControlRight" class="modifier right small"><p><b>•</b><br>Ctrl</p></div> + <div data-key="ArrowLeft" class="key"><p>←</p></div> + <div data-key="ArrowDown" class="key"><p>↓</p></div> + <div data-key="ArrowRight" class="key"><p>→</p></div> + </div> + </div> + </div> + </div> + + <div id="about-window" class="window" tabindex="0"> + <div class="window-header"> + <div class="window-grab">About</div> + <button class="window-button-close">×</button> + </div> + <div id="about"> + <table> + <tr> + <td valign="top" class="logo"> + <img class="svg-gray" src="svg/logo.svg" alt="Open Source Hardware" height="40" /> + </td> + <td valign="top"> + <table> + <tr> + <td colspan="2" class="title">Open Source & Open Hardware IP-KVM</td> + </tr> + <tr> + <td colspan="2" class="copyright">Copyright © 2018 Pi-KVM Developers Team</td> + </tr> + <tr> + <td><br></td> + </tr> + <tr class="version"> + <td>KVMD:</td> + <td id="about-version-kvmd"></td> + </tr> + <tr class="version"> + <td>Streamer:</td> + <td id="about-version-streamer"></td> + </tr> + </table> + </td> + </tr> + </table> + <hr> + This is a web interface for KVMD. For better experience<br> + we recommend you to use a fresh version of one<br> + of the following browsers:<br> + <ul> + <li><a target="_blank" href="https://google.com/chrome">Google Chrome</a> <sup><i>recommended</i></sup></li> + <li><a target="_blank" href="https://chromium.org/Home">Chromium</a> <sup><i>recommended</i></sup></li> + <li><a target="_blank" href="https://mozilla.org/firefox">Mozilla Firefox</a></li> + <li><a target="_blank" href="https://apple.com/safari">Apple Safari</a></li> + <li><a target="_blank" href="https://opera.com">Opera</a></li> + <li><a target="_blank" href="https://vivaldi.com">Vivaldi</a></li> + </ul> + <hr> + Please visit our site <a target="_blank" href="https://github.com/pi-kvm">https://github.com/pi-kvm</a> to get documentation,<br> + source codes, hardware schematics and legal information.<br> + </div> + </div> + + <ul class="footer"> + <li id="kvmd-version" class="footer-left"></li> + <li class="footer-right"><a target="_blank" href="https://github.com/pi-kvm">Pi-KVM Project</a></li> + </ul> +</body> +</html> |