mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2025-12-12 09:10: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">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Redirect</title>
|
||||
<meta http-equiv="refresh" content="0;/kvm/">
|
||||
<title>Pi-KVM Index</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="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>
|
||||
|
||||
<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>
|
||||
|
||||
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