summaryrefslogtreecommitdiff
path: root/web/index.html
diff options
context:
space:
mode:
authorDevaev Maxim <[email protected]>2018-09-26 02:57:24 +0300
committerDevaev Maxim <[email protected]>2018-09-26 02:57:24 +0300
commit81a5311349564a1016c4af2bf18ae872b650e85b (patch)
treed01fd027948494e22ae2c14334b98c1515e5e8a4 /web/index.html
parentf3946f102fc167efdc53c73412b2c0d6ac6c72c5 (diff)
moved kvmd to the root
Diffstat (limited to 'web/index.html')
-rw-r--r--web/index.html534
1 files changed, 534 insertions, 0 deletions
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 00000000..90fbd11e
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,534 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8" />
+ <title>Pi-KVM</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="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+
+ <link rel="stylesheet" href="css/vars.css">
+ <link rel="stylesheet" href="css/main.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/stream.css">
+ <link rel="stylesheet" href="css/msd.css">
+ <link rel="stylesheet" href="css/keyboard.css">
+ <link rel="stylesheet" href="css/about.css">
+ <link rel="stylesheet" href="css/mobile.css">
+
+ <script src="js/tools.js"></script>
+ <script src="js/stream.js"></script>
+ <script src="js/atx.js"></script>
+ <script src="js/keyboard.js"></script>
+ <script src="js/mouse.js"></script>
+ <script src="js/hid.js"></script>
+ <script src="js/msd.js"></script>
+ <script src="js/session.js"></script>
+ <script src="js/ui.js"></script>
+ <script src="js/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://www.google.com/chrome">Google Chrome</a> <sup><i>recommended</i></sup></li>
+ <li><a target="_blank" href="https://www.chromium.org/Home">Chromium</a> <sup><i>recommended</i></sup></li>
+ <li><a target="_blank" href="https://www.mozilla.org/firefox">Mozilla Firefox</a></li>
+ <li><a target="_blank" href="https://www.apple.com/safari">Apple Safari</a></li>
+ <li><a target="_blank" href="https://www.opera.com">Opera</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <ul id="ctl">
+ <li class="ctl-logo"><img id="logo" src="svg/logo.svg" alt="&pi;-kvm" /></li>
+
+ <li class="ctl-right-actions">
+ <div class="ctl-dropdown">
+ <a class="ctl-item" href="#">
+ <img data-dont-hide-menu id="link-led" class="led-off" src="svg/link-led.svg" />
+ <img data-dont-hide-menu id="stream-led" class="led-off" src="svg/stream-led.svg" />
+ <img data-dont-hide-menu id="hid-keyboard-led" class="led-off" src="svg/hid-keyboard-led.svg" />
+ <img data-dont-hide-menu id="hid-mouse-led" class="led-off" src="svg/hid-mouse-led.svg" />
+ System &#8628;
+ </a>
+ <div class="ctl-dropdown-content">
+ <div class="ctl-dropdown-content-buttons">
+ <button id="show-about-button">&bull; Show about</button>
+ <hr>
+ <button id="show-keyboard-button">&bull; Show keyboard</button>
+ <hr>
+ <button id="show-stream-button">&bull; Show stream</button>
+ <button disabled id="stream-reset-button">&bull; Reset stream</button>
+ </div>
+ <hr>
+ <div data-dont-hide-menu class="ctl-dropdown-content-text">
+ Quality:
+ <select disabled id="stream-quality-select">
+ <option>80%</option>
+ </select>
+ </div>
+ <hr>
+ <div data-dont-hide-menu class="ctl-dropdown-content-text">
+ Stream size: <span id="stream-size-value">100%</span>
+ <div id="stream-size-slider-box">
+ <input id="stream-size-slider" type="range" min="50" max="150" value="100" step="10" />
+ </div>
+ </div>
+ </div>
+ </div>
+ </li>
+
+ <li class="ctl-right-actions">
+ <div class="ctl-dropdown">
+ <a class="ctl-item" href="#">
+ <img data-dont-hide-menu id="atx-power-led" class="led-off" src="svg/atx-power-led.svg" />
+ <img data-dont-hide-menu id="atx-hdd-led" class="led-off" src="svg/atx-hdd-led.svg" />
+ ATX &#8628;
+ </a>
+ <div class="ctl-dropdown-content ctl-dropdown-content-buttons">
+ <button disabled id="atx-power-button">&bull; Click Power <sup><i>short</i></sup></button>
+ <button disabled id="atx-power-button-long">&bull; Click Power <sup><i>long</i></sup></button>
+ <hr>
+ <button disabled id="atx-reset-button">&bull; Click Reset</button>
+ </div>
+ </div>
+ </li>
+
+ <li class="ctl-right-actions">
+ <div class="ctl-dropdown">
+ <a class="ctl-item" href="#">
+ <img data-dont-hide-menu id="msd-led" class="led-off" src="svg/msd-led.svg" />
+ Mass Storage &#8628;
+ </a>
+ <div data-dont-hide-menu id="msd-menu" class="ctl-dropdown-content">
+ <div id="msd-not-in-operate">
+ <div class="ctl-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">
+ <div class="ctl-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">
+ <div class="ctl-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"></td>
+ </tr>
+ </table>
+ <hr>
+
+ <table class="msd-info">
+ <tr>
+ <td>Current image:</td>
+ <td id="msd-current-image-name"></td>
+ </tr>
+ <tr>
+ <td>Image size:</td>
+ <td id="msd-current-image-size"></td>
+ </tr>
+ <tr>
+ <td>Storage size:</td>
+ <td id="msd-storage-size"></td>
+ </tr>
+ </table>
+ <hr>
+
+ <input type="file" id="msd-select-new-image-file" />
+ <div class="ctl-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">
+ <table class="msd-info">
+ <tr>
+ <td>New name:</td>
+ <td id="msd-new-image-name"></td>
+ </tr>
+ <tr>
+ <td>Upload size:</td>
+ <td id="msd-new-image-size"></td>
+ </tr>
+ </table>
+ <hr>
+ <div class="ctl-dropdown-content-text">
+ <div id="msd-progress">
+ <span id="msd-progress-value"></span>
+ </div>
+ </div>
+ <hr>
+ </div>
+
+ <div class="ctl-dropdown-content-buttons buttons-row">
+ <button disabled data-force-hide-menu id="msd-switch-to-kvm-button" class="row50">&bull; Switch drive to KVM</button>
+ <button disabled data-force-hide-menu id="msd-switch-to-server-button" class="row50">&bull; Switch drive to Server</button>
+ </div>
+ </div>
+ </div>
+ </li>
+
+ <li class="ctl-right-actions">
+ <div class="ctl-dropdown">
+ <a class="ctl-item" href="#">
+ <img data-dont-hide-menu id="pak-led" class="led-off" src="svg/gear-led.svg" />
+ Shortcuts &#8628;
+ </a>
+ <div class="ctl-dropdown-content ctl-dropdown-content-buttons">
+ <button disabled id="pak-button">&bull; Paste-as-Keys <sup><i>ascii-only</i></sup></button>
+ <hr>
+ <button data-shortcut="ControlLeft AltLeft Delete">&bull; Ctrl+Alt+Del</button>
+ <hr>
+ <button data-shortcut="ControlLeft KeyW">&bull; Ctrl+W</button>
+ <button data-shortcut="ControlLeft Escape">&bull; Ctrl+Esc</button>
+ <button data-shortcut="AltLeft Tab">&bull; Alt+Tab</button>
+ <button data-shortcut="AltLeft Escape">&bull; Alt+Escape</button>
+ <button data-shortcut="AltLeft Space">&bull; Alt+Space</button>
+ <button data-shortcut="AltLeft Enter">&bull; Alt+Enter</button>
+ <button data-shortcut="AltLeft F4">&bull; Alt+F4</button>
+ <hr>
+ <button data-shortcut="AltLeft PrintScreen">&bull; Alt+PrtSc</button>
+ <button data-shortcut="PrintScreen">&bull; PrtSc</button>
+ <hr>
+ <button data-shortcut="AltLeft PrintScreen KeyR">&bull; Alt+SysRq+R</button>
+ <button data-shortcut="AltLeft PrintScreen KeyE">&bull; Alt+SysRq+E</button>
+ <button data-shortcut="AltLeft PrintScreen KeyI">&bull; Alt+SysRq+I</button>
+ <button data-shortcut="AltLeft PrintScreen KeyS">&bull; Alt+SysRq+S</button>
+ <button data-shortcut="AltLeft PrintScreen KeyU">&bull; Alt+SysRq+U</button>
+ <button data-shortcut="AltLeft PrintScreen KeyB">&bull; Alt+SysRq+B</button>
+ </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-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">&times;</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>&amp;<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>&#8612;</p></div>
+ </div>
+ <div class="keyboard-row">
+ <div data-key="Tab" class="key wide-2 left"><p>&#8676;<br>&#8677;</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>&crarr;</p></div>
+ </div>
+ <div class="keyboard-row">
+ <div data-key="ShiftLeft" class="modifier wide-4 left small"><p><b>&bull;</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>&lt;<br>,</p></div>
+ <div data-key="Period" class="key"><p>&gt;<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>&bull;</b><br>Shift</p></div>
+ </div>
+ <div class="keyboard-row">
+ <div data-key="ControlLeft" class="modifier wide-1 left small"><p><b>&bull;</b><br>Ctrl</p></div>
+ <div data-key="MetaLeft" class="modifier wide-1 left small"><p><b>&bull;</b><br>Win</p></div>
+ <div data-key="AltLeft" class="modifier wide-1 left small"><p><b>&bull;</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>&bull;</b><br>Alt</p></div>
+ <div data-key="MetaRight" class="modifier wide-1 right small"><p><b>&bull;</b><br>Win</p></div>
+ <div data-key="ControlRight" class="modifier wide-1 right small"><p><b>&bull;</b><br>Ctrl</p></div>
+ </div>
+ </div>
+ <div class="keyboard-block">
+ <div class="keyboard-row">
+ <div data-key="PrintScreen" class="modifier small"><p><b>&bull;</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>&uarr;</p></div>
+ <div class="empty-key"></div>
+ </div>
+ <div class="keyboard-row">
+ <div data-key="ArrowLeft" class="key"><p>&larr;</p></div>
+ <div data-key="ArrowDown" class="key"><p>&darr;</p></div>
+ <div data-key="ArrowRight" class="key"><p>&rarr;</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>&bull;</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>&amp;<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>&#8612;</p></div>
+ </div>
+ <div class="keyboard-row">
+ <div data-key="Tab" class="key wide-2 left"><p>&#8676;<br>&#8677;</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>&crarr;</p></div>
+ </div>
+ <div class="keyboard-row">
+ <div data-key="ShiftLeft" class="modifier wide-4 left small"><p><b>&bull;</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>&lt;<br>,</p></div>
+ <div data-key="Period" class="key"><p>&gt;<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>&uarr;</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>&bull;</b><br>Ctrl</p></div>
+ <div data-key="MetaLeft" class="modifier wide-1 left small"><p><b>&bull;</b><br>Win</p></div>
+ <div data-key="AltLeft" class="modifier wide-1 left small"><p><b>&bull;</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>&bull;</b><br>Alt</p></div>
+ <div data-key="MetaRight" class="modifier right small"><p><b>&bull;</b><br>Win</p></div>
+ <div data-key="ShiftRight" class="modifier right small"><p><b>&bull;</b><br>Shift</p></div>
+ <div data-key="ControlRight" class="modifier right small"><p><b>&bull;</b><br>Ctrl</p></div>
+ <div data-key="ArrowLeft" class="key"><p>&larr;</p></div>
+ <div data-key="ArrowDown" class="key"><p>&darr;</p></div>
+ <div data-key="ArrowRight" class="key"><p>&rarr;</p></div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div id="about-window" class="window" tabindex="0">
+ <div class="window-header">
+ <div class="window-grab">About Pi-KVM</div>
+ <button class="window-button-close">&times;</button>
+ </div>
+ <div id="about">
+ <table>
+ <tr>
+ <td>Kvmd:</td>
+ <td id="about-version-kvmd"></td>
+ </tr>
+ <tr>
+ <td>Python:</td>
+ <td id="about-version-python"></td>
+ </tr>
+ <tr>
+ <td>Platform:</td>
+ <td id="about-version-platform"></td>
+ </tr>
+ </table>
+ <p>
+ This program is free software: you can redistribute it and/or modify<br>
+ it under the terms of the GNU General Public License as published by<br>
+ the Free Software Foundation, either version 3 of the License, or<br>
+ (at your option) any later version.<br>
+ <br>
+ This program is distributed in the hope that it will be useful,<br>
+ but WITHOUT ANY WARRANTY; without even the implied warranty of<br>
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the<br>
+ GNU General Public License for more details.<br>
+ <br>
+ You should have received a copy of the GNU General Public License<br>
+ along with this program. If not, see <a target="_blank" href="https://www.gnu.org/licenses">https://www.gnu.org/licenses</a>.
+ </p>
+ </div>
+ </div>
+
+ <ul id="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>