mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2025-12-12 01:00:29 +08:00
685 lines
33 KiB
HTML
685 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<!-- =========================================================================
|
|
# #
|
|
# KVMD - The main Pi-KVM daemon. #
|
|
# #
|
|
# Copyright (C) 2018 Maxim Devaev <mdevaev@gmail.com> #
|
|
# #
|
|
# This program is free software: you can redistribute it and/or modify #
|
|
# it under the terms of the GNU General Public License as published by #
|
|
# the Free Software Foundation, either version 3 of the License, or #
|
|
# (at your option) any later version. #
|
|
# #
|
|
# This program is distributed in the hope that it will be useful, #
|
|
# but WITHOUT ANY WARRANTY; without even the implied warranty of #
|
|
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the #
|
|
# GNU General Public License for more details. #
|
|
# #
|
|
# You should have received a copy of the GNU General Public License #
|
|
# along with this program. If not, see <https://www.gnu.org/licenses/>. #
|
|
# #
|
|
========================================================================== -->
|
|
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Pi-KVM Session</title>
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/share/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/share/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/share/favicon-16x16.png">
|
|
<link rel="manifest" href="/share/site.webmanifest">
|
|
<link rel="mask-icon" href="/share/safari-pinned-tab.svg" color="#5bbad5">
|
|
<meta name="msapplication-TileColor" content="#2b5797">
|
|
<meta name="theme-color" content="#ffffff">
|
|
|
|
<link rel="stylesheet" href="../share/css/vars.css">
|
|
<link rel="stylesheet" href="../share/css/main.css">
|
|
<link rel="stylesheet" href="../share/css/menu.css">
|
|
<link rel="stylesheet" href="../share/css/window.css">
|
|
<link rel="stylesheet" href="../share/css/modal.css">
|
|
<link rel="stylesheet" href="../share/css/led.css">
|
|
<link rel="stylesheet" href="../share/css/slider.css">
|
|
<link rel="stylesheet" href="../share/css/switch.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">
|
|
<link rel="stylesheet" href="../share/css/kvm/keyboard.css">
|
|
<link rel="stylesheet" href="../share/css/kvm/about.css">
|
|
|
|
<script type="module">
|
|
import {main} from "/share/js/kvm/main.js";
|
|
main();
|
|
</script>
|
|
</head>
|
|
|
|
<body class="body-no-select">
|
|
<ul id="menu">
|
|
<li class="menu-left-items">
|
|
<a id="menu-logo" href="/">
|
|
←
|
|
<img class="svg-gray" src="../share/svg/logo.svg" alt="π-kvm" />
|
|
</a>
|
|
</li>
|
|
|
|
<li class="menu-right-items">
|
|
<a class="menu-item" href="#">
|
|
<img data-dont-hide-menu id="link-led" class="led-gray" src="../share/svg/led-link.svg" />
|
|
<img data-dont-hide-menu id="stream-led" class="led-gray" src="../share/svg/led-stream.svg" />
|
|
<img data-dont-hide-menu id="hid-keyboard-led" class="led-gray" src="../share/svg/led-hid-keyboard.svg" />
|
|
<img data-dont-hide-menu id="hid-mouse-led" class="led-gray" src="../share/svg/led-hid-mouse.svg" />
|
|
System ↴
|
|
</a>
|
|
<div data-dont-hide-menu class="menu-item-content">
|
|
<div class="menu-item-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-item-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-item-content-text">
|
|
Stream FPS: <span id="stream-desired-fps-value">0</span>
|
|
<div class="stream-slider-box">
|
|
<input disabled type="range" id="stream-desired-fps-slider" class="slider" />
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="menu-item-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-item-content-text">
|
|
<table class="one-line-switch"><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-item-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" class="feature-disabled">• Reset mass storage</button>
|
|
</div>
|
|
<hr>
|
|
<div class="menu-item-content-buttons">
|
|
<button data-force-hide-menu id="open-log-button">• Open log</button>
|
|
</div>
|
|
<div id="wol" class="menu-item-content-buttons feature-disabled">
|
|
<hr>
|
|
<button disabled id="wol-wakeup-button">• Wake on LAN server</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li id="atx-dropdown" class="menu-right-items feature-disabled">
|
|
<a class="menu-item" href="#">
|
|
<img data-dont-hide-menu id="atx-power-led" class="led-gray" src="../share/svg/led-atx-power.svg" />
|
|
<img data-dont-hide-menu id="atx-hdd-led" class="led-gray" src="../share/svg/led-atx-hdd.svg" />
|
|
ATX ↴
|
|
</a>
|
|
<div class="menu-item-content menu-item-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>
|
|
</li>
|
|
|
|
<li id="msd-dropdown" class="menu-right-items feature-disabled">
|
|
<a class="menu-item" href="#">
|
|
<img data-dont-hide-menu id="msd-led" class="led-gray" src="../share/svg/led-msd.svg" />
|
|
Mass Storage ↴
|
|
</a>
|
|
<div data-dont-hide-menu id="msd-menu" class="menu-item-content">
|
|
<div id="msd-message-offline" class="msd-message">
|
|
<div class="menu-item-content-text">
|
|
<table>
|
|
<tr>
|
|
<td><img class="sign" src="../share/svg/warning.svg" /></td>
|
|
<td><b>Mass Storage Device is offline</b></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<hr>
|
|
</div>
|
|
<div id="msd-message-image-broken" class="msd-message">
|
|
<div class="menu-item-content-text">
|
|
<table>
|
|
<tr>
|
|
<td><img class="sign" src="../share/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-message-too-big-for-cdrom" class="msd-message">
|
|
<div class="menu-item-content-text">
|
|
<table>
|
|
<tr>
|
|
<td><img class="sign" src="../share/svg/warning.svg" /></td>
|
|
<td><b>Current image is too big for CD-ROM!</b><br><sub>The device filesystem will be truncated to 2.2GiB</sub></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<hr>
|
|
</div>
|
|
<div id="msd-message-out-of-storage" class="msd-message">
|
|
<div class="menu-item-content-text">
|
|
<table>
|
|
<tr>
|
|
<td><img class="sign" src="../share/svg/info.svg" /></td>
|
|
<td><b>Current image is out of storage</b><br><sub>This image was connected manually using <b>kvmd-otgmsd</b></sub></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<hr>
|
|
</div>
|
|
<div id="msd-message-another-user-uploads" class="msd-message">
|
|
<div class="menu-item-content-text">
|
|
<table>
|
|
<tr>
|
|
<td><img class="sign" src="../share/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 msd-single-storage feature-disabled">
|
|
<tr>
|
|
<td>Current image:</td>
|
|
<td id="msd-image-name" class="msd-info-value"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Image size:</td>
|
|
<td id="msd-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>
|
|
<table class="msd-info msd-multi-storage feature-disabled">
|
|
<tr>
|
|
<td>Image:</td>
|
|
<td width="100%"><select disabled id="msd-image-selector"></select></td>
|
|
<td><button disabled id="msd-remove-image">Remove</button></td>
|
|
</tr>
|
|
</table>
|
|
<table class="msd-info msd-multi-storage feature-disabled">
|
|
<tr class="msd-cdrom-emulation feature-disabled">
|
|
<td>Emulate CD-ROM drive:</td>
|
|
<td>
|
|
<div class="switch-box msd-cdrom-switch-box">
|
|
<input type="checkbox" id="msd-emulate-cdrom-checkbox" class="switch-checkbox" checked />
|
|
<label class="switch-label" for="msd-emulate-cdrom-checkbox">
|
|
<span class="switch-inner"></span>
|
|
<span class="switch"></span>
|
|
</label>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<hr>
|
|
|
|
<div class="msd-multi-storage feature-disabled">
|
|
<div class="menu-item-content-text">
|
|
<div id="msd-storage-progress" class="progress">
|
|
<span id="msd-storage-progress-value" class="progress-value"></span>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
</div>
|
|
|
|
<input type="file" id="msd-select-new-image-file" class="msd-message" />
|
|
<div class="menu-item-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-submenu-new-image" class="msd-message">
|
|
<table class="msd-info">
|
|
<tr>
|
|
<td>New image:</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-item-content-text">
|
|
<div id="msd-uploading-progress" class="progress">
|
|
<span id="msd-uploading-progress-value" class="progress-value"></span>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
</div>
|
|
|
|
<div class="menu-item-content-buttons buttons-row">
|
|
<button disabled data-force-hide-menu id="msd-connect-button" class="row50">• Connect drive to Server</button>
|
|
<button disabled data-force-hide-menu id="msd-disconnect-button" class="row50">• Disconnect drive</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="menu-right-items">
|
|
<a class="menu-item" href="#">
|
|
Shortcuts ↴
|
|
</a>
|
|
<div data-dont-hide-menu class="menu-item-content">
|
|
<div class="menu-item-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">
|
|
•
|
|
Caps Lock
|
|
<img class="inline-lamp hid-keyboard-caps-led led-gray" src="../share/svg/led-square.svg" />
|
|
</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-item-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-item-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>
|
|
</li>
|
|
</ul>
|
|
|
|
<div id="stream-window" class="window" style="z-index: 1">
|
|
<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="../share/png/blank-stream.png" />
|
|
</div>
|
|
<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"><span>Mouse<br>Left</span></div>
|
|
<div data-code="left" class="modifier wide-2 left small"><span><b>•</b><br>← Hold</span></div>
|
|
<div class="empty-key" style="width:10px"></div>
|
|
<div data-code="middle" class="key wide-2 left small"><span>Mouse<br>Middle</span></div>
|
|
<div data-code="middle" class="modifier wide-2 left small"><span><b>•</b><br>← Hold</span></div>
|
|
<div class="empty-key" style="width:10px"></div>
|
|
<div data-code="right" class="modifier wide-2 right small"><span><b>•</b><br>Hold →</span></div>
|
|
<div data-code="right" class="key wide-4 right small"><span>Mouse<br>Right</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="keyboard-window" class="window">
|
|
<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="keypad" align="center">
|
|
<div class="keypad-block">
|
|
<div class="keypad-row">
|
|
<div data-code="Escape" class="key small"><div class="label">Esc</div></div>
|
|
<div class="empty-key" style="width:24px"></div>
|
|
<div data-code="F1" class="key small"><div class="label">F1</div></div>
|
|
<div data-code="F2" class="key small"><div class="label">F2</div></div>
|
|
<div data-code="F3" class="key small"><div class="label">F3</div></div>
|
|
<div data-code="F4" class="key small"><div class="label">F4</div></div>
|
|
<div class="empty-key" style="width:10px"></div>
|
|
<div data-code="F5" class="key small"><div class="label">F5</div></div>
|
|
<div data-code="F6" class="key small"><div class="label">F6</div></div>
|
|
<div data-code="F7" class="key small"><div class="label">F7</div></div>
|
|
<div data-code="F8" class="key small"><div class="label">F8</div></div>
|
|
<div class="empty-key" style="width:10px"></div>
|
|
<div data-code="F9" class="key small"><div class="label">F9</div></div>
|
|
<div data-code="F10" class="key small"><div class="label">F10</div></div>
|
|
<div data-code="F11" class="key small"><div class="label">F11</div></div>
|
|
<div data-code="F12" class="key small"><div class="label">F12</div></div>
|
|
</div>
|
|
<hr>
|
|
<div class="keypad-row">
|
|
<div data-code="Backquote" class="key"><div class="label">~<br>`</div></div>
|
|
<div data-code="Digit1" class="key"><div class="label">!<br>1</div></div>
|
|
<div data-code="Digit2" class="key"><div class="label">@<br>2</div></div>
|
|
<div data-code="Digit3" class="key"><div class="label">#<br>3</div></div>
|
|
<div data-code="Digit4" class="key"><div class="label">$<br>4</div></div>
|
|
<div data-code="Digit5" class="key"><div class="label">%<br>5</div></div>
|
|
<div data-code="Digit6" class="key"><div class="label">^<br>6</div></div>
|
|
<div data-code="Digit7" class="key"><div class="label">&<br>7</div></div>
|
|
<div data-code="Digit8" class="key"><div class="label">*<br>8</div></div>
|
|
<div data-code="Digit9" class="key"><div class="label">(<br>9</div></div>
|
|
<div data-code="Digit0" class="key"><div class="label">)<br>0</div></div>
|
|
<div data-code="Minus" class="key"><div class="label">_<br>-</div></div>
|
|
<div data-code="Equal" class="key"><div class="label">+<br>=</div></div>
|
|
<div data-code="Backspace" class="key wide-2 right"><div class="label">↤</div></div>
|
|
</div>
|
|
<div class="keypad-row">
|
|
<div data-code="Tab" class="key wide-2 left"><div class="label">⇤<br>⇥</div></div>
|
|
<div data-code="KeyQ" class="key single"><div class="label">Q</div></div>
|
|
<div data-code="KeyW" class="key single"><div class="label">W</div></div>
|
|
<div data-code="KeyE" class="key single"><div class="label">E</div></div>
|
|
<div data-code="KeyR" class="key single"><div class="label">R</div></div>
|
|
<div data-code="KeyT" class="key single"><div class="label">T</div></div>
|
|
<div data-code="KeyY" class="key single"><div class="label">Y</div></div>
|
|
<div data-code="KeyU" class="key single"><div class="label">U</div></div>
|
|
<div data-code="KeyI" class="key single"><div class="label">I</div></div>
|
|
<div data-code="KeyO" class="key single"><div class="label">O</div></div>
|
|
<div data-code="KeyP" class="key single"><div class="label">P</div></div>
|
|
<div data-code="BracketLeft" class="key"><div class="label">{<br>[</div></div>
|
|
<div data-code="BracketRight" class="key"><div class="label">}<br>]</div></div>
|
|
<div data-code="Backslash" class="key"><div class="label">|<br>\</div></div>
|
|
</div>
|
|
<div class="keypad-row">
|
|
<div data-code="CapsLock" class="key wide-3 left small">
|
|
<div class="label">
|
|
<img class="inline-lamp hid-keyboard-caps-led led-gray" src="../share/svg/led-square.svg" />
|
|
<br>
|
|
Caps Lock
|
|
</div>
|
|
</div>
|
|
<div data-code="KeyA" class="key single"><div class="label">A</div></div>
|
|
<div data-code="KeyS" class="key single"><div class="label">S</div></div>
|
|
<div data-code="KeyD" class="key single"><div class="label">D</div></div>
|
|
<div data-code="KeyF" class="key single"><div class="label">F</div></div>
|
|
<div data-code="KeyG" class="key single"><div class="label">G</div></div>
|
|
<div data-code="KeyH" class="key single"><div class="label">H</div></div>
|
|
<div data-code="KeyJ" class="key single"><div class="label">J</div></div>
|
|
<div data-code="KeyK" class="key single"><div class="label">K</div></div>
|
|
<div data-code="KeyL" class="key single"><div class="label">L</div></div>
|
|
<div data-code="Semicolon" class="key"><div class="label">:<br>;</div></div>
|
|
<div data-code="Quote" class="key"><div class="label">"<br>'</div></div>
|
|
<div data-code="Enter" class="key wide-3 right small"><div class="label">Enter<br>↵</div></div>
|
|
</div>
|
|
<div class="keypad-row">
|
|
<div data-code="ShiftLeft" class="modifier wide-4 left small"><div class="label"><b>•</b><br>Shift</div></div>
|
|
<div data-code="KeyZ" class="key single"><div class="label">Z</div></div>
|
|
<div data-code="KeyX" class="key single"><div class="label">X</div></div>
|
|
<div data-code="KeyC" class="key single"><div class="label">C</div></div>
|
|
<div data-code="KeyV" class="key single"><div class="label">V</div></div>
|
|
<div data-code="KeyB" class="key single"><div class="label">B</div></div>
|
|
<div data-code="KeyN" class="key single"><div class="label">N</div></div>
|
|
<div data-code="KeyM" class="key single"><div class="label">M</div></div>
|
|
<div data-code="Comma" class="key"><div class="label"><<br>,</div></div>
|
|
<div data-code="Period" class="key"><div class="label">><br>.</div></div>
|
|
<div data-code="Slash" class="key"><div class="label">?<br>/</div></div>
|
|
<div data-code="ShiftRight" class="modifier wide-4 right small"><div class="label"><b>•</b><br>Shift</div></div>
|
|
</div>
|
|
<div class="keypad-row">
|
|
<div data-code="ControlLeft" class="modifier wide-1 left small"><div class="label"><b>•</b><br>Ctrl</div></div>
|
|
<div data-code="MetaLeft" class="modifier wide-1 left small"><div class="label"><b>•</b><br>Win</div></div>
|
|
<div data-code="AltLeft" class="modifier wide-1 left small"><div class="label"><b>•</b><br>Alt</div></div>
|
|
<div data-code="Space" class="key wide-5"></div>
|
|
<div data-code="AltRight" class="modifier wide-1 right small"><div class="label"><b>•</b><br>Alt</div></div>
|
|
<div data-code="MetaRight" class="modifier wide-1 right small"><div class="label"><b>•</b><br>Win</div></div>
|
|
<div data-code="ControlRight" class="modifier wide-1 right small"><div class="label"><b>•</b><br>Ctrl</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="keypad-block">
|
|
<div class="keypad-row">
|
|
<div data-code="PrintScreen" class="modifier small"><div class="label"><b>•</b><br>Pt/Sq</div></div>
|
|
<div data-code="ScrollLock" class="key small">
|
|
<div class="label">
|
|
<img class="inline-lamp hid-keyboard-scroll-led led-gray" src="../share/svg/led-square.svg" />
|
|
<br>
|
|
ScrLk
|
|
</div>
|
|
</div>
|
|
<div data-code="Pause" class="key small"><div class="label">P/Brk</div></div>
|
|
</div>
|
|
<hr>
|
|
<div class="keypad-row">
|
|
<div data-code="Insert" class="key small"><div class="label">Ins</div></div>
|
|
<div data-code="Home" class="key small"><div class="label">Home</div></div>
|
|
<div data-code="PageUp" class="key small"><div class="label">PgUp</div></div>
|
|
</div>
|
|
<div class="keypad-row">
|
|
<div data-code="Delete" class="key small"><div class="label">Del</div></div>
|
|
<div data-code="End" class="key small"><div class="label">End</div></div>
|
|
<div data-code="PageDown" class="key small"><div class="label">PgDn</div></div>
|
|
</div>
|
|
<div class="keypad-row"></div>
|
|
<div class="keypad-row">
|
|
<div class="empty-key"></div>
|
|
<div data-code="ArrowUp" class="key"><div class="label">↑</div></div>
|
|
<div class="empty-key"></div>
|
|
</div>
|
|
<div class="keypad-row">
|
|
<div data-code="ArrowLeft" class="key"><div class="label">←</div></div>
|
|
<div data-code="ArrowDown" class="key"><div class="label">↓</div></div>
|
|
<div data-code="ArrowRight" class="key"><div class="label">→</div></div>
|
|
</div>
|
|
</div>
|
|
</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"><div class="label">Esc</div></div>
|
|
<div class="empty-key" style="width:4px"></div>
|
|
<div data-code="F1" class="key wide-0 margin-0 small"><div class="label">F1</div></div>
|
|
<div data-code="F2" class="key wide-0 margin-0 small"><div class="label">F2</div></div>
|
|
<div data-code="F3" class="key wide-0 margin-0 small"><div class="label">F3</div></div>
|
|
<div data-code="F4" class="key wide-0 margin-0 small"><div class="label">F4</div></div>
|
|
<div data-code="F5" class="key wide-0 margin-0 small"><div class="label">F5</div></div>
|
|
<div data-code="F6" class="key wide-0 margin-0 small"><div class="label">F6</div></div>
|
|
<div data-code="F7" class="key wide-0 margin-0 small"><div class="label">F7</div></div>
|
|
<div data-code="F8" class="key wide-0 margin-0 small"><div class="label">F8</div></div>
|
|
<div data-code="F9" class="key wide-0 margin-0 small"><div class="label">F9</div></div>
|
|
<div data-code="F10" class="key wide-0 margin-0 small"><div class="label">F10</div></div>
|
|
<div data-code="F11" class="key wide-0 margin-0 small"><div class="label">F11</div></div>
|
|
<div data-code="F12" class="key wide-0 margin-0 small"><div class="label">F12</div></div>
|
|
<div class="empty-key" style="width:5px"></div>
|
|
<div data-code="PrintScreen" class="modifier margin-0 small"><div class="label"><b>•</b><br>Pt/Sq</div></div>
|
|
<div data-code="ScrollLock" class="key margin-0 small">
|
|
<div class="label">
|
|
<img class="inline-lamp hid-keyboard-scroll-led led-gray" src="../share/svg/led-square.svg" />
|
|
<br>
|
|
ScrLk
|
|
</div>
|
|
</div>
|
|
<div data-code="Pause" class="key margin-0 small"><div class="label">P/Brk</div></div>
|
|
<div data-code="Insert" class="key margin-0 small"><div class="label">Ins</div></div>
|
|
<div data-code="Home" class="key margin-0 small"><div class="label">Home</div></div>
|
|
<div data-code="End" class="key margin-0 small"><div class="label">End</div></div>
|
|
<div data-code="Delete" class="key margin-0 small"><div class="label">Del</div></div>
|
|
</div>
|
|
<hr>
|
|
<div class="keypad-row">
|
|
<div data-code="Backquote" class="key"><div class="label">~<br>`</div></div>
|
|
<div data-code="Digit1" class="key"><div class="label">!<br>1</div></div>
|
|
<div data-code="Digit2" class="key"><div class="label">@<br>2</div></div>
|
|
<div data-code="Digit3" class="key"><div class="label">#<br>3</div></div>
|
|
<div data-code="Digit4" class="key"><div class="label">$<br>4</div></div>
|
|
<div data-code="Digit5" class="key"><div class="label">%<br>5</div></div>
|
|
<div data-code="Digit6" class="key"><div class="label">^<br>6</div></div>
|
|
<div data-code="Digit7" class="key"><div class="label">&<br>7</div></div>
|
|
<div data-code="Digit8" class="key"><div class="label">*<br>8</div></div>
|
|
<div data-code="Digit9" class="key"><div class="label">(<br>9</div></div>
|
|
<div data-code="Digit0" class="key"><div class="label">)<br>0</div></div>
|
|
<div data-code="Minus" class="key"><div class="label">_<br>-</div></div>
|
|
<div data-code="Equal" class="key"><div class="label">+<br>=</div></div>
|
|
<div data-code="Backspace" class="key wide-3 right" style="width:101px"><div class="label">↤</div></div>
|
|
</div>
|
|
<div class="keypad-row">
|
|
<div data-code="Tab" class="key wide-2 left"><div class="label">⇤<br>⇥</div></div>
|
|
<div data-code="KeyQ" class="key single"><div class="label">Q</div></div>
|
|
<div data-code="KeyW" class="key single"><div class="label">W</div></div>
|
|
<div data-code="KeyE" class="key single"><div class="label">E</div></div>
|
|
<div data-code="KeyR" class="key single"><div class="label">R</div></div>
|
|
<div data-code="KeyT" class="key single"><div class="label">T</div></div>
|
|
<div data-code="KeyY" class="key single"><div class="label">Y</div></div>
|
|
<div data-code="KeyU" class="key single"><div class="label">U</div></div>
|
|
<div data-code="KeyI" class="key single"><div class="label">I</div></div>
|
|
<div data-code="KeyO" class="key single"><div class="label">O</div></div>
|
|
<div data-code="KeyP" class="key single"><div class="label">P</div></div>
|
|
<div data-code="BracketLeft" class="key"><div class="label">{<br>[</div></div>
|
|
<div data-code="BracketRight" class="key"><div class="label">}<br>]</div></div>
|
|
<div data-code="Backslash" class="key wide-2 left" style="width:78px"><div class="label">|<br>\</div></div>
|
|
</div>
|
|
<div class="keypad-row">
|
|
<div data-code="CapsLock" class="key wide-3 left small">
|
|
<div class="label">
|
|
<img class="inline-lamp hid-keyboard-caps-led led-gray" src="../share/svg/led-square.svg" />
|
|
<br>
|
|
Caps Lock
|
|
</div>
|
|
</div>
|
|
<div data-code="KeyA" class="key single"><div class="label">A</div></div>
|
|
<div data-code="KeyS" class="key single"><div class="label">S</div></div>
|
|
<div data-code="KeyD" class="key single"><div class="label">D</div></div>
|
|
<div data-code="KeyF" class="key single"><div class="label">F</div></div>
|
|
<div data-code="KeyG" class="key single"><div class="label">G</div></div>
|
|
<div data-code="KeyH" class="key single"><div class="label">H</div></div>
|
|
<div data-code="KeyJ" class="key single"><div class="label">J</div></div>
|
|
<div data-code="KeyK" class="key single"><div class="label">K</div></div>
|
|
<div data-code="KeyL" class="key single"><div class="label">L</div></div>
|
|
<div data-code="Semicolon" class="key"><div class="label">:<br>;</div></div>
|
|
<div data-code="Quote" class="key"><div class="label">"<br>'</div></div>
|
|
<div data-code="Enter" class="key wide-4 right small" style="width:116px"><div class="label">Enter<br>↵</div></div>
|
|
</div>
|
|
<div class="keypad-row">
|
|
<div data-code="ShiftLeft" class="modifier wide-4 left small"><div class="label"><b>•</b><br>Shift</div></div>
|
|
<div data-code="KeyZ" class="key single"><div class="label">Z</div></div>
|
|
<div data-code="KeyX" class="key single"><div class="label">X</div></div>
|
|
<div data-code="KeyC" class="key single"><div class="label">C</div></div>
|
|
<div data-code="KeyV" class="key single"><div class="label">V</div></div>
|
|
<div data-code="KeyB" class="key single"><div class="label">B</div></div>
|
|
<div data-code="KeyN" class="key single"><div class="label">N</div></div>
|
|
<div data-code="KeyM" class="key single"><div class="label">M</div></div>
|
|
<div data-code="Comma" class="key"><div class="label"><<br>,</div></div>
|
|
<div data-code="Period" class="key"><div class="label">><br>.</div></div>
|
|
<div data-code="Slash" class="key"><div class="label">?<br>/</div></div>
|
|
<div data-code="PageUp" class="key small"><div class="label">PgUp</div></div>
|
|
<div data-code="ArrowUp" class="key"><div class="label">↑</div></div>
|
|
<div data-code="PageDown" class="key small"><div class="label">PgDn</div></div>
|
|
</div>
|
|
<div class="keypad-row">
|
|
<div data-code="ControlLeft" class="modifier wide-1 left small"><div class="label"><b>•</b><br>Ctrl</div></div>
|
|
<div data-code="MetaLeft" class="modifier wide-1 left small"><div class="label"><b>•</b><br>Win</div></div>
|
|
<div data-code="AltLeft" class="modifier wide-1 left small"><div class="label"><b>•</b><br>Alt</div></div>
|
|
<div data-code="Space" class="key" style="width:190px"></div>
|
|
<div data-code="AltRight" class="modifier right small"><div class="label"><b>•</b><br>Alt</div></div>
|
|
<div data-code="MetaRight" class="modifier right small"><div class="label"><b>•</b><br>Win</div></div>
|
|
<div data-code="ShiftRight" class="modifier right small"><div class="label"><b>•</b><br>Shift</div></div>
|
|
<div data-code="ControlRight" class="modifier right small"><div class="label"><b>•</b><br>Ctrl</div></div>
|
|
<div data-code="ArrowLeft" class="key"><div class="label">←</div></div>
|
|
<div data-code="ArrowDown" class="key"><div class="label">↓</div></div>
|
|
<div data-code="ArrowRight" class="key"><div class="label">→</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="about-window" class="window">
|
|
<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="../share/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>
|
|
<div id="about-meta" class="code">
|
|
<span class="code-comment">No data</span>
|
|
</div>
|
|
<hr>
|
|
<p class="text">
|
|
Full documentation, source code, hardware schematics and legal information
|
|
can be found in our <a target="_blank" href="https://pikvm.org">official website</a>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="footer">
|
|
<li id="kvmd-meta-server-host" class="footer-left"></li>
|
|
<li class="footer-right"><a target="_blank" href="https://pikvm.org">Pi-KVM Project</a></li>
|
|
</ul>
|
|
</body>
|
|
</html>
|