One-KVM/kvmd/web/index.html
2018-07-22 17:23:33 +03:00

165 lines
5.6 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/main.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="&pi;-kvm" /></li>
<li class="ctl-right-actions">
<div class="ctl-dropdown">
<a class="ctl-item" href="#" onclick="ui.toggleMenu(this);">
<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" style="display:none">
<button disabled id="stream-reset-button" onclick="stream.clickResetButton();">&bull; Reset stream</button>
</div>
</div>
</li>
<li class="ctl-right-actions">
<div class="ctl-dropdown">
<a class="ctl-item" href="#" onclick="ui.toggleMenu(this);">
<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" style="display:none">
<button disabled id="atx-power-button" onclick="atx.clickButton(this);">&bull; Click Power <sup><i>short</i></sup></button>
<button disabled id="atx-power-button-long" onclick="atx.clickButton(this);">&bull; Click Power <sup><i>long</i></sup></button>
<hr>
<button disabled id="atx-reset-button" onclick="atx.clickButton(this);">&bull; Click Reset</button>
</div>
</div>
</li>
<li class="ctl-right-actions">
<div class="ctl-dropdown">
<a class="ctl-item" href="#" onclick="ui.toggleMenu(this);">
<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" 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()" />
<button disabled id="msd-select-new-image-button" class="first" onclick="document.getElementById('msd-select-new-image-file').click();">Upload new image</button><button disabled id="msd-upload-new-image-button" class="second-half" onclick="msd.clickButton(this);">Start</button><button disabled id="msd-abort-uploading-button" class="second-half" onclick="msd.clickButton(this);">Abort</button>
<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>
<button disabled data-force-hide-menu id="msd-switch-to-kvm-button" class="first-bottom" onclick="msd.clickButton(this);">&bull; Switch drive to KVM</button><button disabled data-force-hide-menu id="msd-switch-to-server-button" class="second-bottom" onclick="msd.clickButton(this);">&bull; Switch drive to Server</button>
</div>
</div>
</li>
</ul>
<div class="centered">
<div id="stream-box">
<img src="/streamer/?action=stream" id="stream-image" class="stream-image-inactive" alt="Loading..." />
</div>
</div>
</body>
</html>