mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2025-12-12 17:20:30 +08:00
index
This commit is contained in:
Devaev Maxim
parent
d3073b9d7e
commit
97d8d6ea4c
84
web/css/index/index.css
Normal file
84
web/css/index/index.css
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
div#start-box {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#start {
|
||||||
|
text-align: left;
|
||||||
|
outline: none;
|
||||||
|
word-wrap: break-word;
|
||||||
|
max-width: 800px;
|
||||||
|
border: var(--border-dark-thin);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
box-shadow: var(--shadow-big);
|
||||||
|
background-color: var(--bg-color-light);
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#start div#apps-box {
|
||||||
|
display: table;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#start div#apps-box ul#apps {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#start div#apps-box ul#apps li {
|
||||||
|
float: left;
|
||||||
|
margin-left: 5px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#start div#apps-box ul#apps li div.app {
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: var(--bg-color-normal);
|
||||||
|
box-shadow: var(--shadow-micro);
|
||||||
|
border: var(--border-dark-thin);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#start div#apps-box ul#apps li div:hover.app {
|
||||||
|
border: var(--border-intensive-thin);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#start div#apps-box ul#apps li div.app img {
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
height: 50px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#start div#apps-box ul#apps li div.app a {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#start td.logo {
|
||||||
|
padding-right: 25px;
|
||||||
|
}
|
||||||
|
div#start td.title {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
div#start td.copyright {
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
div#start tr.server {
|
||||||
|
font-size: 1.4em;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
@ -2,7 +2,93 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Redirect</title>
|
<title>Pi-KVM Index</title>
|
||||||
<meta http-equiv="refresh" content="0;/kvm/">
|
|
||||||
|
<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="manifest" href="/site.webmanifest">
|
||||||
|
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
|
||||||
|
<meta name="msapplication-TileColor" content="#2b5797">
|
||||||
|
<meta name="theme-color" content="#ffffff">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/vars.css">
|
||||||
|
<link rel="stylesheet" href="css/main.css">
|
||||||
|
<link rel="stylesheet" href="css/modals.css">
|
||||||
|
<link rel="stylesheet" href="css/index/index.css">
|
||||||
|
|
||||||
|
<script src="js/bb.js"></script>
|
||||||
|
<script src="js/tools.js"></script>
|
||||||
|
<script src="js/index/main.js"></script>
|
||||||
|
|
||||||
|
<script>window.onload = main;</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="bad-browser-modal" class="modal">
|
||||||
|
<div class="modal-window">
|
||||||
|
<div class="modal-content">
|
||||||
|
Hello. You are using an incompatible or legacy browser.<br>
|
||||||
|
Please use one of the following browsers:
|
||||||
|
<hr>
|
||||||
|
<ul>
|
||||||
|
<li><a target="_blank" href="https://google.com/chrome">Google Chrome</a> <sup><i>recommended</i></sup></li>
|
||||||
|
<li><a target="_blank" href="https://chromium.org/Home">Chromium</a> <sup><i>recommended</i></sup></li>
|
||||||
|
<li><a target="_blank" href="https://mozilla.org/firefox">Mozilla Firefox</a></li>
|
||||||
|
<li><a target="_blank" href="https://apple.com/safari">Apple Safari</a></li>
|
||||||
|
<li><a target="_blank" href="https://opera.com">Opera</a></li>
|
||||||
|
<li><a target="_blank" href="https://vivaldi.com">Vivaldi</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="start-box">
|
||||||
|
<div id="start">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td valign="top" class="logo">
|
||||||
|
<img class="svg-gray" src="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>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<hr>
|
||||||
|
<table>
|
||||||
|
<tr class="server">
|
||||||
|
<td>Server:</td>
|
||||||
|
<td><a id="kvmd-meta-server-host" target="_blank" href="/kvmd/info"></a></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<hr>
|
||||||
|
<div id="apps-box">
|
||||||
|
<ul id="apps"></ul>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<p class="text">
|
||||||
|
Please note that when you are working with a KVM session or another application that captures the keyboard,
|
||||||
|
you can't use some keyboard shortcuts such as Ctrl+Alt+Del (which will be caught by your OS) or Ctrl+W (caught by your browser).
|
||||||
|
</p>
|
||||||
|
<p class="text">
|
||||||
|
To override this limitation you can use <a target="_blank" href="https://google.com/chrome">Google Chrome</a>
|
||||||
|
or <a target="_blank" href="https://chromium.org/Home">Chromium</a> in application mode.
|
||||||
|
</p>
|
||||||
|
<div id="app-text" class="code"></div>
|
||||||
|
<hr>
|
||||||
|
<p class="text">
|
||||||
|
Full documentation, source code, hardware schematics and legal information
|
||||||
|
can be found in our <a target="_blank" href="https://github.com/pi-kvm">official website</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
58
web/js/index/main.js
Normal file
58
web/js/index/main.js
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
function main() {
|
||||||
|
__setAppText();
|
||||||
|
__loadKvmdInfo();
|
||||||
|
}
|
||||||
|
|
||||||
|
function __setAppText() {
|
||||||
|
var url = window.location.href;
|
||||||
|
$("app-text").innerHTML = `
|
||||||
|
<span class="code-comment"># On Linux using Chromium/Chrome via any terminal:<br>
|
||||||
|
$</span> \which chromium 2>/dev/null || which chrome 2>/dev/null\ --app="${url}"<br>
|
||||||
|
<br>
|
||||||
|
<span class="code-comment"># On MacOS using Terminal application:<br>
|
||||||
|
$</span> /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --app="${url}"<br>
|
||||||
|
<br>
|
||||||
|
<span class="code-comment"># On Windows via cmd.exe:<br>
|
||||||
|
C:\></span> start chrome --app="${url}"
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function __loadKvmdInfo() {
|
||||||
|
var http = tools.makeRequest("GET", "/kvmd/info", function() {
|
||||||
|
if (http.readyState === 4) {
|
||||||
|
if (http.status === 200) {
|
||||||
|
var info = JSON.parse(http.responseText).result;
|
||||||
|
|
||||||
|
var apps = Object.values(info.extras).sort(function(a, b) {
|
||||||
|
if (a["place"] < b["place"]) {
|
||||||
|
return -1;
|
||||||
|
} else if (a["place"] > b["place"]) {
|
||||||
|
return 1;
|
||||||
|
} else {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
apps.forEach(function(app) {
|
||||||
|
$("apps").innerHTML += `
|
||||||
|
<li>
|
||||||
|
<div class="app">
|
||||||
|
<a href="${app.path}">
|
||||||
|
<div>
|
||||||
|
<img class="svg-gray" src="${app.icon}">
|
||||||
|
${app.name}
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (info.meta && info.meta.server && info.meta.server.host) {
|
||||||
|
$("kvmd-meta-server-host").innerHTML = info.meta.server.host;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setTimeout(__loadKvmdInfo, 1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user