diff options
Diffstat (limited to 'web/kvm/index.html')
| -rw-r--r-- | web/kvm/index.html | 425 |
1 files changed, 217 insertions, 208 deletions
diff --git a/web/kvm/index.html b/web/kvm/index.html index d821f4a4..dae4b9c3 100644 --- a/web/kvm/index.html +++ b/web/kvm/index.html @@ -43,6 +43,7 @@ <link rel="stylesheet" href="../share/css/sliders.css"> <link rel="stylesheet" href="../share/css/switches.css"> <link rel="stylesheet" href="../share/css/progress.css"> + <link rel="stylesheet" href="../share/css/keypad.css"> <link rel="stylesheet" href="../share/css/kvm/stream.css"> <link rel="stylesheet" href="../share/css/kvm/hid.css"> <link rel="stylesheet" href="../share/css/kvm/msd.css"> @@ -52,6 +53,7 @@ <script src="../share/js/bb.js"></script> <script src="../share/js/tools.js"></script> <script src="../share/js/wm.js"></script> + <script src="../share/js/keypad.js"></script> <script src="../share/js/kvm/stream.js"></script> <script src="../share/js/kvm/atx.js"></script> <script src="../share/js/kvm/keyboard.js"></script> @@ -306,9 +308,16 @@ <div id="stream-box" class="stream-box-inactive"> <img id="stream-image" class="stream-image-inactive" src="../share/png/blank-stream.png" /> </div> - <div id="stream-mouse-buttons" class="buttons-row"> - <button data-mouse-button="left" class="row50">Left Click</button> - <button data-mouse-button="right" class="row50">Right Click</button> + <div id="stream-mouse-buttons" class="keypad" align="center"> + <div class="keypad-block"> + <div class="keypad-row"> + <div data-code="left" class="key wide-4 left small"><p>Mouse<br>Left</p></div> + <div data-code="left" class="modifier wide-2 left small"><p><b>•</b><br>← Hold</p></div> + <div class="empty-key" style="width:10px"></div> + <div data-code="right" class="modifier wide-2 right small"><p><b>•</b><br>Hold →</p></div> + <div data-code="right" class="key wide-4 right small"><p>Mouse<br>Right</p></div> + </div> + </div> </div> </div> @@ -317,231 +326,231 @@ <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 id="keyboard-desktop" class="keypad" align="center"> + <div class="keypad-block"> + <div class="keypad-row"> + <div data-code="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 data-code="F1" class="key small"><p>F1</p></div> + <div data-code="F2" class="key small"><p>F2</p></div> + <div data-code="F3" class="key small"><p>F3</p></div> + <div data-code="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 data-code="F5" class="key small"><p>F5</p></div> + <div data-code="F6" class="key small"><p>F6</p></div> + <div data-code="F7" class="key small"><p>F7</p></div> + <div data-code="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 data-code="F9" class="key small"><p>F9</p></div> + <div data-code="F10" class="key small"><p>F10</p></div> + <div data-code="F11" class="key small"><p>F11</p></div> + <div data-code="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 class="keypad-row"> + <div data-code="Backquote" class="key"><p>~<br>`</p></div> + <div data-code="Digit1" class="key"><p>!<br>1</p></div> + <div data-code="Digit2" class="key"><p>@<br>2</p></div> + <div data-code="Digit3" class="key"><p>#<br>3</p></div> + <div data-code="Digit4" class="key"><p>$<br>4</p></div> + <div data-code="Digit5" class="key"><p>%<br>5</p></div> + <div data-code="Digit6" class="key"><p>^<br>6</p></div> + <div data-code="Digit7" class="key"><p>&<br>7</p></div> + <div data-code="Digit8" class="key"><p>*<br>8</p></div> + <div data-code="Digit9" class="key"><p>(<br>9</p></div> + <div data-code="Digit0" class="key"><p>)<br>0</p></div> + <div data-code="Minus" class="key"><p>_<br>-</p></div> + <div data-code="Equal" class="key"><p>+<br>=</p></div> + <div data-code="Backspace" class="key wide-2 right"><p>↤</p></div> + </div> + <div class="keypad-row"> + <div data-code="Tab" class="key wide-2 left"><p>⇤<br>⇥</p></div> + <div data-code="KeyQ" class="key single"><p>Q</p></div> + <div data-code="KeyW" class="key single"><p>W</p></div> + <div data-code="KeyE" class="key single"><p>E</p></div> + <div data-code="KeyR" class="key single"><p>R</p></div> + <div data-code="KeyT" class="key single"><p>T</p></div> + <div data-code="KeyY" class="key single"><p>Y</p></div> + <div data-code="KeyU" class="key single"><p>U</p></div> + <div data-code="KeyI" class="key single"><p>I</p></div> + <div data-code="KeyO" class="key single"><p>O</p></div> + <div data-code="KeyP" class="key single"><p>P</p></div> + <div data-code="BracketLeft" class="key"><p>{<br>[</p></div> + <div data-code="BracketRight" class="key"><p>}<br>]</p></div> + <div data-code="Backslash" class="key"><p>|<br>\</p></div> + </div> + <div class="keypad-row"> + <div data-code="CapsLock" class="key wide-3 left small"><p>Caps Lock</p></div> + <div data-code="KeyA" class="key single"><p>A</p></div> + <div data-code="KeyS" class="key single"><p>S</p></div> + <div data-code="KeyD" class="key single"><p>D</p></div> + <div data-code="KeyF" class="key single"><p>F</p></div> + <div data-code="KeyG" class="key single"><p>G</p></div> + <div data-code="KeyH" class="key single"><p>H</p></div> + <div data-code="KeyJ" class="key single"><p>J</p></div> + <div data-code="KeyK" class="key single"><p>K</p></div> + <div data-code="KeyL" class="key single"><p>L</p></div> + <div data-code="Semicolon" class="key"><p>:<br>;</p></div> + <div data-code="Quote" class="key"><p>"<br>'</p></div> + <div data-code="Enter" class="key wide-3 right small"><p>Enter<br>↵</p></div> + </div> + <div class="keypad-row"> + <div data-code="ShiftLeft" class="modifier wide-4 left small"><p><b>•</b><br>Shift</p></div> + <div data-code="KeyZ" class="key single"><p>Z</p></div> + <div data-code="KeyX" class="key single"><p>X</p></div> + <div data-code="KeyC" class="key single"><p>C</p></div> + <div data-code="KeyV" class="key single"><p>V</p></div> + <div data-code="KeyB" class="key single"><p>B</p></div> + <div data-code="KeyN" class="key single"><p>N</p></div> + <div data-code="KeyM" class="key single"><p>M</p></div> + <div data-code="Comma" class="key"><p><<br>,</p></div> + <div data-code="Period" class="key"><p>><br>.</p></div> + <div data-code="Slash" class="key"><p>?<br>/</p></div> + <div data-code="ShiftRight" class="modifier wide-4 right small"><p><b>•</b><br>Shift</p></div> + </div> + <div class="keypad-row"> + <div data-code="ControlLeft" class="modifier wide-1 left small"><p><b>•</b><br>Ctrl</p></div> + <div data-code="MetaLeft" class="modifier wide-1 left small"><p><b>•</b><br>Win</p></div> + <div data-code="AltLeft" class="modifier wide-1 left small"><p><b>•</b><br>Alt</p></div> + <div data-code="Space" class="key wide-5"></div> + <div data-code="AltRight" class="modifier wide-1 right small"><p><b>•</b><br>Alt</p></div> + <div data-code="MetaRight" class="modifier wide-1 right small"><p><b>•</b><br>Win</p></div> + <div data-code="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 class="keypad-block"> + <div class="keypad-row"> + <div data-code="PrintScreen" class="modifier small"><p><b>•</b><br>Pt/Sq</p></div> + <div data-code="ScrollLock" class="key small"><p>ScrLk</p></div> + <div data-code="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="keypad-row"> + <div data-code="Insert" class="key small"><p>Ins</p></div> + <div data-code="Home" class="key small"><p>Home</p></div> + <div data-code="PageUp" class="key small"><p>PgUp</p></div> + </div> + <div class="keypad-row"> + <div data-code="Delete" class="key small"><p>Del</p></div> + <div data-code="End" class="key small"><p>End</p></div> + <div data-code="PageDown" class="key small"><p>PgDn</p></div> + </div> + <div class="keypad-row"></div> + <div class="keypad-row"> <div class="empty-key"></div> - <div data-key="ArrowUp" class="key"><p>↑</p></div> + <div data-code="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 class="keypad-row"> + <div data-code="ArrowLeft" class="key"><p>←</p></div> + <div data-code="ArrowDown" class="key"><p>↓</p></div> + <div data-code="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 id="keyboard-mobile" class="keypad" align="center"> + <div class="keypad-block"> + <div class="keypad-row"> + <div data-code="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 data-code="F1" class="key wide-0 margin-0 small"><p>F1</p></div> + <div data-code="F2" class="key wide-0 margin-0 small"><p>F2</p></div> + <div data-code="F3" class="key wide-0 margin-0 small"><p>F3</p></div> + <div data-code="F4" class="key wide-0 margin-0 small"><p>F4</p></div> + <div data-code="F5" class="key wide-0 margin-0 small"><p>F5</p></div> + <div data-code="F6" class="key wide-0 margin-0 small"><p>F6</p></div> + <div data-code="F7" class="key wide-0 margin-0 small"><p>F7</p></div> + <div data-code="F8" class="key wide-0 margin-0 small"><p>F8</p></div> + <div data-code="F9" class="key wide-0 margin-0 small"><p>F9</p></div> + <div data-code="F10" class="key wide-0 margin-0 small"><p>F10</p></div> + <div data-code="F11" class="key wide-0 margin-0 small"><p>F11</p></div> + <div data-code="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 data-code="PrintScreen" class="modifier margin-0 small"><p><b>•</b><br>Pt/Sq</p></div> + <div data-code="ScrollLock" class="key margin-0 small"><p>ScrLk</p></div> + <div data-code="Pause" class="key margin-0 small"><p>P/Brk</p></div> + <div data-code="Insert" class="key margin-0 small"><p>Ins</p></div> + <div data-code="Home" class="key margin-0 small"><p>Home</p></div> + <div data-code="End" class="key margin-0 small"><p>End</p></div> + <div data-code="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 class="keypad-row"> + <div data-code="Backquote" class="key"><p>~<br>`</p></div> + <div data-code="Digit1" class="key"><p>!<br>1</p></div> + <div data-code="Digit2" class="key"><p>@<br>2</p></div> + <div data-code="Digit3" class="key"><p>#<br>3</p></div> + <div data-code="Digit4" class="key"><p>$<br>4</p></div> + <div data-code="Digit5" class="key"><p>%<br>5</p></div> + <div data-code="Digit6" class="key"><p>^<br>6</p></div> + <div data-code="Digit7" class="key"><p>&<br>7</p></div> + <div data-code="Digit8" class="key"><p>*<br>8</p></div> + <div data-code="Digit9" class="key"><p>(<br>9</p></div> + <div data-code="Digit0" class="key"><p>)<br>0</p></div> + <div data-code="Minus" class="key"><p>_<br>-</p></div> + <div data-code="Equal" class="key"><p>+<br>=</p></div> + <div data-code="Backspace" class="key wide-3 right" style="width:101px"><p>↤</p></div> + </div> + <div class="keypad-row"> + <div data-code="Tab" class="key wide-2 left"><p>⇤<br>⇥</p></div> + <div data-code="KeyQ" class="key single"><p>Q</p></div> + <div data-code="KeyW" class="key single"><p>W</p></div> + <div data-code="KeyE" class="key single"><p>E</p></div> + <div data-code="KeyR" class="key single"><p>R</p></div> + <div data-code="KeyT" class="key single"><p>T</p></div> + <div data-code="KeyY" class="key single"><p>Y</p></div> + <div data-code="KeyU" class="key single"><p>U</p></div> + <div data-code="KeyI" class="key single"><p>I</p></div> + <div data-code="KeyO" class="key single"><p>O</p></div> + <div data-code="KeyP" class="key single"><p>P</p></div> + <div data-code="BracketLeft" class="key"><p>{<br>[</p></div> + <div data-code="BracketRight" class="key"><p>}<br>]</p></div> + <div data-code="Backslash" class="key wide-2 left" style="width:78px"><p>|<br>\</p></div> + </div> + <div class="keypad-row"> + <div data-code="CapsLock" class="key wide-3 left small"><p>Caps Lock</p></div> + <div data-code="KeyA" class="key single"><p>A</p></div> + <div data-code="KeyS" class="key single"><p>S</p></div> + <div data-code="KeyD" class="key single"><p>D</p></div> + <div data-code="KeyF" class="key single"><p>F</p></div> + <div data-code="KeyG" class="key single"><p>G</p></div> + <div data-code="KeyH" class="key single"><p>H</p></div> + <div data-code="KeyJ" class="key single"><p>J</p></div> + <div data-code="KeyK" class="key single"><p>K</p></div> + <div data-code="KeyL" class="key single"><p>L</p></div> + <div data-code="Semicolon" class="key"><p>:<br>;</p></div> + <div data-code="Quote" class="key"><p>"<br>'</p></div> + <div data-code="Enter" class="key wide-4 right small" style="width:116px"><p>Enter<br>↵</p></div> + </div> + <div class="keypad-row"> + <div data-code="ShiftLeft" class="modifier wide-4 left small"><p><b>•</b><br>Shift</p></div> + <div data-code="KeyZ" class="key single"><p>Z</p></div> + <div data-code="KeyX" class="key single"><p>X</p></div> + <div data-code="KeyC" class="key single"><p>C</p></div> + <div data-code="KeyV" class="key single"><p>V</p></div> + <div data-code="KeyB" class="key single"><p>B</p></div> + <div data-code="KeyN" class="key single"><p>N</p></div> + <div data-code="KeyM" class="key single"><p>M</p></div> + <div data-code="Comma" class="key"><p><<br>,</p></div> + <div data-code="Period" class="key"><p>><br>.</p></div> + <div data-code="Slash" class="key"><p>?<br>/</p></div> + <div data-code="PageUp" class="key small"><p>PgUp</p></div> + <div data-code="ArrowUp" class="key"><p>↑</p></div> + <div data-code="PageDown" class="key small"><p>PgDn</p></div> + </div> + <div class="keypad-row"> + <div data-code="ControlLeft" class="modifier wide-1 left small"><p><b>•</b><br>Ctrl</p></div> + <div data-code="MetaLeft" class="modifier wide-1 left small"><p><b>•</b><br>Win</p></div> + <div data-code="AltLeft" class="modifier wide-1 left small"><p><b>•</b><br>Alt</p></div> + <div data-code="Space" class="key" style="width:190px"></div> + <div data-code="AltRight" class="modifier right small"><p><b>•</b><br>Alt</p></div> + <div data-code="MetaRight" class="modifier right small"><p><b>•</b><br>Win</p></div> + <div data-code="ShiftRight" class="modifier right small"><p><b>•</b><br>Shift</p></div> + <div data-code="ControlRight" class="modifier right small"><p><b>•</b><br>Ctrl</p></div> + <div data-code="ArrowLeft" class="key"><p>←</p></div> + <div data-code="ArrowDown" class="key"><p>↓</p></div> + <div data-code="ArrowRight" class="key"><p>→</p></div> </div> </div> </div> |