mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2025-12-12 01:00:29 +08:00
381 lines
16 KiB
HTML
381 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<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/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">
|
|
</head>
|
|
|
|
<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>
|
|
|
|
<body>
|
|
<ul id="ctl">
|
|
<li class="ctl-logo"><img id="logo" src="svg/logo.svg" alt="π-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 ↴
|
|
</a>
|
|
<div class="ctl-dropdown-content" style="display:none">
|
|
<button onclick="ui.showWindow('keyboard-window')">• Show keyboard</button>
|
|
<button onclick="ui.showWindow('stream-window')">• Show stream</button>
|
|
<button onclick="ui.showWindow('about-window')">• Show about</button>
|
|
<hr>
|
|
<button disabled id="stream-reset-button" onclick="stream.clickResetButton();">• Reset stream</button>
|
|
</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 ↴
|
|
</a>
|
|
<div class="ctl-dropdown-content" style="display:none">
|
|
<button disabled id="atx-power-button" onclick="atx.clickButton(this);">• Click Power <sup><i>short</i></sup></button>
|
|
<button disabled id="atx-power-button-long" onclick="atx.clickButton(this);">• Click Power <sup><i>long</i></sup></button>
|
|
<hr>
|
|
<button disabled id="atx-reset-button" onclick="atx.clickButton(this);">• 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 ↴
|
|
</a>
|
|
<div data-dont-hide-menu id="msd-menu" class="ctl-dropdown-content" style="display:none">
|
|
<div id="msd-not-in-operate" style="display:none">
|
|
<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" style="display:none">
|
|
<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" style="display:none">
|
|
<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 id="msd-info">
|
|
<tr>
|
|
<td>Status: </td>
|
|
<td id="msd-status"></td>
|
|
</tr>
|
|
</table>
|
|
<hr>
|
|
|
|
<table id="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>
|
|
<td>Storage size:</td>
|
|
<td id="msd-storage-size"></td>
|
|
</tr>
|
|
</table>
|
|
<hr>
|
|
|
|
<input type="file" id="msd-select-new-image-file" style="display:none;" onchange="msd.selectNewImageFile()" />
|
|
<div class="buttons-row">
|
|
<button disabled id="msd-select-new-image-button" class="row50" onclick="document.getElementById('msd-select-new-image-file').click();">Upload new image</button>
|
|
<button disabled id="msd-upload-new-image-button" class="row25" onclick="msd.clickButton(this);">Start</button>
|
|
<button disabled id="msd-abort-uploading-button" class="row25" onclick="msd.clickButton(this);">Abort</button>
|
|
</div>
|
|
<hr>
|
|
|
|
<div id="msd-new-image" style="display:none">
|
|
<table id="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="buttons-row">
|
|
<button disabled data-force-hide-menu id="msd-switch-to-kvm-button" class="row50" onclick="msd.clickButton(this);">• Switch drive to KVM</button>
|
|
<button disabled data-force-hide-menu id="msd-switch-to-server-button" class="row50" onclick="msd.clickButton(this);">• Switch drive to Server</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="ctl-right-actions">
|
|
<div class="ctl-dropdown">
|
|
<a class="ctl-item" href="#">
|
|
Shortcuts ↴
|
|
</a>
|
|
<div class="ctl-dropdown-content" style="display:none">
|
|
<button onclick="hid.emitShortcut('ControlLeft', 'AltLeft', 'Delete');">• Ctrl+Alt+Del</button>
|
|
<hr>
|
|
<button onclick="hid.emitShortcut('ControlLeft', 'KeyW');">• Ctrl+W</button>
|
|
<button onclick="hid.emitShortcut('ControlLeft', 'Escape');">• Ctrl+Esc</button>
|
|
<button onclick="hid.emitShortcut('AltLeft', 'Tab');">• Alt+Tab</button>
|
|
<button onclick="hid.emitShortcut('AltLeft', 'Escape');">• Alt+Escape</button>
|
|
<button onclick="hid.emitShortcut('AltLeft', 'Space');">• Alt+Space</button>
|
|
<button onclick="hid.emitShortcut('AltLeft', 'Enter');">• Alt+Enter</button>
|
|
<button onclick="hid.emitShortcut('AltLeft', 'F4');">• Alt+F4</button>
|
|
<hr>
|
|
<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen');">• Alt+PrtSc</button>
|
|
<button onclick="hid.emitShortcut('PrintScreen');">• PrtSc</button>
|
|
<hr>
|
|
<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen', 'KeyR');">• Alt+SysRq+R</button>
|
|
<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen', 'KeyE');">• Alt+SysRq+E</button>
|
|
<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen', 'KeyI');">• Alt+SysRq+I</button>
|
|
<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen', 'KeyS');">• Alt+SysRq+S</button>
|
|
<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen', 'KeyU');">• Alt+SysRq+U</button>
|
|
<button onclick="hid.emitShortcut('AltLeft', 'PrintScreen', 'KeyB');">• Alt+SysRq+B</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<div id="stream-window" class="window" style="z-index: 1" tabindex="0">
|
|
<div class="window-header"><div class="window-grab">Stream</div></div>
|
|
<img id="stream-image" class="stream-image-inactive" alt="Loading..." src="/streamer/?action=stream"/>
|
|
</div>
|
|
|
|
<div id="keyboard-window" class="window" style="display:none" tabindex="0">
|
|
<div class="window-header">
|
|
<div class="window-grab">Virtual Keyboard</div>
|
|
<button class="window-button-close">×</button>
|
|
</div>
|
|
<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="modifier wide-4 left small"><p><b>•</b><br>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="modifier wide-4 right small"><p><b>•</b><br>Shift</p></div>
|
|
</div>
|
|
<div class="keyboard-row">
|
|
<div id="ControlLeft" class="modifier wide-1 left small"><p><b>•</b><br>Ctrl</p></div>
|
|
<div id="MetaLeft" class="modifier wide-1 left small"><p><b>•</b><br>Win</p></div>
|
|
<div id="AltLeft" class="modifier wide-1 left small"><p><b>•</b><br>Alt</p></div>
|
|
<div id="Space" class="key wide-5"></div>
|
|
<div id="AltRight" class="modifier wide-1 right small"><p><b>•</b><br>Alt</p></div>
|
|
<div id="MetaRight" class="modifier wide-1 right small"><p><b>•</b><br>Win</p></div>
|
|
<div id="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 id="PrintScreen" class="modifier small"><p><b>•</b><br>Pt/Sq</p></div>
|
|
<div id="ScrollLock" class="key small"><p>ScrLk</p></div>
|
|
<div id="Pause" class="key small"><p>P/Brk</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>
|
|
|
|
<div id="about-window" class="window" style="display:none" tabindex="0">
|
|
<div class="window-header">
|
|
<div class="window-grab">About Pi-KVM</div>
|
|
<button class="window-button-close">×</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>
|