diff options
Diffstat (limited to 'kvmd/web/index.html')
| -rw-r--r-- | kvmd/web/index.html | 141 |
1 files changed, 137 insertions, 4 deletions
diff --git a/kvmd/web/index.html b/kvmd/web/index.html index 23efd902..05507b07 100644 --- a/kvmd/web/index.html +++ b/kvmd/web/index.html @@ -9,7 +9,13 @@ <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/leds.css"> + <link rel="stylesheet" href="css/stream.css"> + <link rel="stylesheet" href="css/msd.css"> + <link rel="stylesheet" href="css/keyboard.css"> </head> <script src="js/tools.js"></script> @@ -162,14 +168,141 @@ </li> </ul> - <div class="window"> + <div class="window" style="left:50%; top:70px"> <div class="window-header">Stream</div> + <!-- <hr class="window-sep"> --> <img id="stream-image" class="stream-image-inactive" alt="Loading..." src="/streamer/?action=stream"/> </div> - <ul id="bottom"> - <li id="kvmd-version" class="bottom-left"></li> - <li class="bottom-right"><a target="_blank" href="https://github.com/mdevaev/pi-kvm">Pi-KVM Project</a></li> + <div class="window" style="left:75%; top:60%"> + <div class="window-header">Virtual Keyboard</div> + <hr class="window-sep"> + <div id="keyboard"> + <div class="keyboard-block"> + <div class="keyboard-row"> + <div id="Escape" class="key small"><p>Esc</p></div> + <div class="empty-key" style="width:24px"></div> + <div id="F1" class="key small"><p>F1</p></div> + <div id="F2" class="key small"><p>F2</p></div> + <div id="F3" class="key small"><p>F3</p></div> + <div id="F4" class="key small"><p>F4</p></div> + <div class="empty-key" style="width:10px"></div> + <div id="F5" class="key small"><p>F5</p></div> + <div id="F6" class="key small"><p>F6</p></div> + <div id="F7" class="key small"><p>F7</p></div> + <div id="F8" class="key small"><p>F8</p></div> + <div class="empty-key" style="width:10px"></div> + <div id="F9" class="key small"><p>F9</p></div> + <div id="F10" class="key small"><p>F10</p></div> + <div id="F11" class="key small"><p>F11</p></div> + <div id="F12" class="key small"><p>F12</p></div> + </div> + <div class="keyboard-row"> + <div id="Backquote" class="key"><p>~<br>`</p></div> + <div id="Digit1" class="key"><p>!<br>1</p></div> + <div id="Digit2" class="key"><p>@<br>2</p></div> + <div id="Digit3" class="key"><p>#<br>3</p></div> + <div id="Digit4" class="key"><p>$<br>4</p></div> + <div id="Digit5" class="key"><p>%<br>5</p></div> + <div id="Digit6" class="key"><p>^<br>6</p></div> + <div id="Digit7" class="key"><p>&<br>7</p></div> + <div id="Digit8" class="key"><p>*<br>8</p></div> + <div id="Digit9" class="key"><p>(<br>9</p></div> + <div id="Digit0" class="key"><p>)<br>0</p></div> + <div id="Minus" class="key"><p>_<br>-</p></div> + <div id="Equal" class="key"><p>+<br>=</p></div> + <div id="Backspace" class="key wide-2 right"><p>↤</p></div> + </div> + <div class="keyboard-row"> + <div id="Tab" class="key wide-2 left"><p>⇤<br>⇥</p></div> + <div id="KeyQ" class="key single"><p>Q</p></div> + <div id="KeyW" class="key single"><p>W</p></div> + <div id="KeyE" class="key single"><p>E</p></div> + <div id="KeyR" class="key single"><p>R</p></div> + <div id="KeyT" class="key single"><p>T</p></div> + <div id="KeyY" class="key single"><p>Y</p></div> + <div id="KeyU" class="key single"><p>U</p></div> + <div id="KeyI" class="key single"><p>I</p></div> + <div id="KeyO" class="key single"><p>O</p></div> + <div id="KeyP" class="key single"><p>P</p></div> + <div id="BracketLeft" class="key"><p>{<br>[</p></div> + <div id="BracketRight" class="key"><p>}<br>]</p></div> + <div id="Backslash" class="key"><p>|<br>\</p></div> + </div> + <div class="keyboard-row"> + <div id="CapsLock" class="key wide-3 left small"><p>Caps Lock</p></div> + <div id="KeyA" class="key single"><p>A</p></div> + <div id="KeyS" class="key single"><p>S</p></div> + <div id="KeyD" class="key single"><p>D</p></div> + <div id="KeyF" class="key single"><p>F</p></div> + <div id="KeyG" class="key single"><p>G</p></div> + <div id="KeyH" class="key single"><p>H</p></div> + <div id="KeyJ" class="key single"><p>J</p></div> + <div id="KeyK" class="key single"><p>K</p></div> + <div id="KeyL" class="key single"><p>L</p></div> + <div id="Semicolon" class="key"><p>:<br>;</p></div> + <div id="Quote" class="key"><p>"<br>'</p></div> + <div id="Enter" class="key wide-3 right small"><p>Enter<br>↵</p></div> + </div> + <div class="keyboard-row"> + <div id="ShiftLeft" class="key wide-4 left small"><p>Shift</p></div> + <div id="KeyZ" class="key single"><p>Z</p></div> + <div id="KeyX" class="key single"><p>X</p></div> + <div id="KeyC" class="key single"><p>C</p></div> + <div id="KeyV" class="key single"><p>V</p></div> + <div id="KeyB" class="key single"><p>B</p></div> + <div id="KeyN" class="key single"><p>N</p></div> + <div id="KeyM" class="key single"><p>M</p></div> + <div id="Comma" class="key"><p><<br>,</p></div> + <div id="Period" class="key"><p>><br>.</p></div> + <div id="Slash" class="key"><p>?<br>/</p></div> + <div id="ShiftRight" class="key wide-4 right small"><p>Shift</p></div> + </div> + <div class="keyboard-row"> + <div id="ControlLeft" class="key wide-1 left small"><p>Ctrl</p></div> + <div id="MetaLeft" class="key wide-1 left small"><p>Win</p></div> + <div id="AltLeft" class="key wide-1 left small"><p>Alt</p></div> + <div id="Space" class="key wide-5"></div> + <div id="AltRight" class="key wide-1 right small"><p>Alt</p></div> + <div id="MetaRight" class="key wide-1 right small"><p>Win</p></div> + <div id="ControlRight" class="key wide-1 right small"><p>Ctrl</p></div> + </div> + </div> + <div class="keyboard-block"> + <div class="keyboard-row"> + <div class="empty-key"></div> + <div class="empty-key"></div> + <div id="PrintScreen" class="key small"><p>PrtSc</p></div> + </div> + <div class="keyboard-row"> + <div id="Insert" class="key small"><p>Ins</p></div> + <div id="Home" class="key small"><p>Home</p></div> + <div id="PageUp" class="key small"><p>PgUp</p></div> + </div> + <div class="keyboard-row"> + <div id="Delete" class="key small"><p>Del</p></div> + <div id="End" class="key small"><p>End</p></div> + <div id="PageDown" class="key small"><p>PgDn</p></div> + </div> + <div class="keyboard-row"> + </div> + <div class="keyboard-row"> + <div class="empty-key"></div> + <div id="ArrowUp" class="key"><p>↑</p></div> + <div class="empty-key"></div> + </div> + <div class="keyboard-row"> + <div id="ArrowLeft" class="key"><p>←</p></div> + <div id="ArrowDown" class="key"><p>↓</p></div> + <div id="ArrowRight" class="key"><p>→</p></div> + </div> + </div> + </div> + </div> + + <ul id="footer"> + <li id="kvmd-version" class="footer-left"></li> + <li class="footer-right"><a target="_blank" href="https://github.com/mdevaev/pi-kvm">Pi-KVM Project</a></li> </ul> </body> </html> |