mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2026-01-29 09:01:54 +08:00
refactoring
This commit is contained in:
110
web/index.html
110
web/index.html
@@ -14,29 +14,29 @@
|
||||
|
||||
<link rel="stylesheet" href="css/vars.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<link rel="stylesheet" href="css/menu.css">
|
||||
<link rel="stylesheet" href="css/windows.css">
|
||||
<link rel="stylesheet" href="css/modals.css">
|
||||
<link rel="stylesheet" href="css/leds.css">
|
||||
<link rel="stylesheet" href="css/sliders.css">
|
||||
<link rel="stylesheet" href="css/switches.css">
|
||||
<link rel="stylesheet" href="css/progress.css">
|
||||
<link rel="stylesheet" href="css/stream.css">
|
||||
<link rel="stylesheet" href="css/hid.css">
|
||||
<link rel="stylesheet" href="css/msd.css">
|
||||
<link rel="stylesheet" href="css/keyboard.css">
|
||||
<link rel="stylesheet" href="css/about.css">
|
||||
<link rel="stylesheet" href="css/mobile.css">
|
||||
<link rel="stylesheet" href="css/kvm/stream.css">
|
||||
<link rel="stylesheet" href="css/kvm/hid.css">
|
||||
<link rel="stylesheet" href="css/kvm/msd.css">
|
||||
<link rel="stylesheet" href="css/kvm/keyboard.css">
|
||||
<link rel="stylesheet" href="css/kvm/about.css">
|
||||
|
||||
<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 src="js/kvm/stream.js"></script>
|
||||
<script src="js/kvm/atx.js"></script>
|
||||
<script src="js/kvm/keyboard.js"></script>
|
||||
<script src="js/kvm/mouse.js"></script>
|
||||
<script src="js/kvm/hid.js"></script>
|
||||
<script src="js/kvm/msd.js"></script>
|
||||
<script src="js/kvm/session.js"></script>
|
||||
<script src="js/kvm/main.js"></script>
|
||||
|
||||
<script>window.onload = main;</script>
|
||||
</head>
|
||||
@@ -60,20 +60,22 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul id="ctl">
|
||||
<li class="ctl-logo"><img id="logo" class="svg-gray" src="svg/logo.svg" alt="π-kvm" /></li>
|
||||
<ul id="menu" class="menu">
|
||||
<li class="menu-logo">
|
||||
<img class="svg-gray" src="svg/logo.svg" alt="π-kvm" />
|
||||
</li>
|
||||
|
||||
<li class="ctl-right-actions">
|
||||
<div class="ctl-dropdown">
|
||||
<a class="ctl-item" href="#">
|
||||
<li class="menu-right-actions">
|
||||
<div class="menu-dropdown">
|
||||
<a class="menu-item" href="#">
|
||||
<img data-dont-hide-menu id="link-led" class="led-gray" src="svg/link-led.svg" />
|
||||
<img data-dont-hide-menu id="stream-led" class="led-gray" src="svg/stream-led.svg" />
|
||||
<img data-dont-hide-menu id="hid-keyboard-led" class="led-gray" src="svg/hid-keyboard-led.svg" />
|
||||
<img data-dont-hide-menu id="hid-mouse-led" class="led-gray" src="svg/hid-mouse-led.svg" />
|
||||
System ↴
|
||||
</a>
|
||||
<div data-dont-hide-menu class="ctl-dropdown-content">
|
||||
<div class="ctl-dropdown-content-buttons">
|
||||
<div data-dont-hide-menu class="menu-dropdown-content">
|
||||
<div class="menu-dropdown-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>
|
||||
@@ -81,28 +83,28 @@
|
||||
<button data-force-hide-menu id="show-about-button">• Show about</button>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="ctl-dropdown-content-text">
|
||||
<div class="menu-dropdown-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="ctl-dropdown-content-text">
|
||||
<div class="menu-dropdown-content-text">
|
||||
Stream FPS: <span id="stream-desired-fps-value">30</span>
|
||||
<div class="stream-slider-box">
|
||||
<input disabled type="range" id="stream-desired-fps-slider" class="slider" />
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="ctl-dropdown-content-text">
|
||||
<div class="menu-dropdown-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="ctl-dropdown-content-text">
|
||||
<div class="menu-dropdown-content-text">
|
||||
<table id="stream-auto-resize-box"><tr>
|
||||
<td>Auto-resize stream:</td>
|
||||
<td align="right">
|
||||
@@ -116,28 +118,28 @@
|
||||
</td>
|
||||
</tr></table>
|
||||
</div>
|
||||
<div class="ctl-dropdown-content-buttons">
|
||||
<div class="menu-dropdown-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">• Reset mass storage</button>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="ctl-dropdown-content-buttons">
|
||||
<div class="menu-dropdown-content-buttons">
|
||||
<button data-force-hide-menu id="open-log-button">• Open log</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="ctl-right-actions">
|
||||
<div class="ctl-dropdown">
|
||||
<a class="ctl-item" href="#">
|
||||
<li class="menu-right-actions">
|
||||
<div class="menu-dropdown">
|
||||
<a class="menu-item" href="#">
|
||||
<img data-dont-hide-menu id="atx-power-led" class="led-gray" src="svg/atx-power-led.svg" />
|
||||
<img data-dont-hide-menu id="atx-hdd-led" class="led-gray" src="svg/atx-hdd-led.svg" />
|
||||
ATX ↴
|
||||
</a>
|
||||
<div class="ctl-dropdown-content ctl-dropdown-content-buttons">
|
||||
<div class="menu-dropdown-content menu-dropdown-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>
|
||||
@@ -146,15 +148,15 @@
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="ctl-right-actions">
|
||||
<div class="ctl-dropdown">
|
||||
<a class="ctl-item" href="#">
|
||||
<li class="menu-right-actions">
|
||||
<div class="menu-dropdown">
|
||||
<a class="menu-item" href="#">
|
||||
<img data-dont-hide-menu id="msd-led" class="led-gray" src="svg/msd-led.svg" />
|
||||
Mass Storage ↴
|
||||
</a>
|
||||
<div data-dont-hide-menu id="msd-menu" class="ctl-dropdown-content">
|
||||
<div id="msd-not-in-operate">
|
||||
<div class="ctl-dropdown-content-text">
|
||||
<div data-dont-hide-menu id="msd-menu" class="menu-dropdown-content">
|
||||
<div id="msd-not-in-operate" class="msd-message">
|
||||
<div class="menu-dropdown-content-text">
|
||||
<table>
|
||||
<tr>
|
||||
<td><img src="svg/warning.svg" /></td>
|
||||
@@ -165,8 +167,8 @@
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div id="msd-current-image-broken">
|
||||
<div class="ctl-dropdown-content-text">
|
||||
<div id="msd-current-image-broken" class="msd-message">
|
||||
<div class="menu-dropdown-content-text">
|
||||
<table>
|
||||
<tr>
|
||||
<td><img src="svg/warning.svg" /></td>
|
||||
@@ -177,8 +179,8 @@
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div id="msd-another-another-user-uploads">
|
||||
<div class="ctl-dropdown-content-text">
|
||||
<div id="msd-another-another-user-uploads" class="msd-message">
|
||||
<div class="menu-dropdown-content-text">
|
||||
<table>
|
||||
<tr>
|
||||
<td><img src="svg/info.svg" /></td>
|
||||
@@ -213,15 +215,15 @@
|
||||
</table>
|
||||
<hr>
|
||||
|
||||
<input type="file" id="msd-select-new-image-file" />
|
||||
<div class="ctl-dropdown-content-buttons buttons-row">
|
||||
<input type="file" id="msd-select-new-image-file" class="msd-message" />
|
||||
<div class="menu-dropdown-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-new-image">
|
||||
<div id="msd-new-image" class="msd-message">
|
||||
<table class="msd-info">
|
||||
<tr>
|
||||
<td>New name:</td>
|
||||
@@ -233,7 +235,7 @@
|
||||
</tr>
|
||||
</table>
|
||||
<hr>
|
||||
<div class="ctl-dropdown-content-text">
|
||||
<div class="menu-dropdown-content-text">
|
||||
<div id="msd-progress" class="progress">
|
||||
<span id="msd-progress-value" class="progress-value"></span>
|
||||
</div>
|
||||
@@ -241,7 +243,7 @@
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div class="ctl-dropdown-content-buttons buttons-row">
|
||||
<div class="menu-dropdown-content-buttons buttons-row">
|
||||
<button disabled data-force-hide-menu id="msd-switch-to-kvm-button" class="row50">• Switch drive to KVM</button>
|
||||
<button disabled data-force-hide-menu id="msd-switch-to-server-button" class="row50">• Switch drive to Server</button>
|
||||
</div>
|
||||
@@ -249,14 +251,14 @@
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="ctl-right-actions">
|
||||
<div class="ctl-dropdown">
|
||||
<a class="ctl-item" href="#">
|
||||
<li class="menu-right-actions">
|
||||
<div class="menu-dropdown">
|
||||
<a class="menu-item" href="#">
|
||||
<img data-dont-hide-menu id="hid-pak-led" class="led-gray" src="svg/gear-led.svg" />
|
||||
Shortcuts ↴
|
||||
</a>
|
||||
<div data-dont-hide-menu class="ctl-dropdown-content">
|
||||
<div class="ctl-dropdown-content-buttons">
|
||||
<div data-dont-hide-menu class="menu-dropdown-content">
|
||||
<div class="menu-dropdown-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>
|
||||
@@ -279,11 +281,11 @@
|
||||
<button data-force-hide-menu data-shortcut="ControlLeft AltLeft Delete">• Ctrl+Alt+Del</button>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="ctl-dropdown-content-text">
|
||||
<div class="menu-dropdown-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="ctl-dropdown-content-buttons buttons-row">
|
||||
<div class="menu-dropdown-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>
|
||||
@@ -595,7 +597,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul id="footer">
|
||||
<ul class="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>
|
||||
|
||||
Reference in New Issue
Block a user