summaryrefslogtreecommitdiff
path: root/web
diff options
context:
space:
mode:
authorDevaev Maxim <[email protected]>2018-11-23 09:35:01 +0300
committerDevaev Maxim <[email protected]>2018-11-23 09:35:01 +0300
commit97d8d6ea4c2ce88e6045f89461ac0ca8caff0830 (patch)
tree7e16f43ef246060f30fb48198d1368158cb83347 /web
parentd3073b9d7e479b979e98043b4f878da306adae6a (diff)
index
Diffstat (limited to 'web')
-rw-r--r--web/css/index/index.css84
-rw-r--r--web/index.html90
-rw-r--r--web/js/index/main.js58
3 files changed, 230 insertions, 2 deletions
diff --git a/web/css/index/index.css b/web/css/index/index.css
new file mode 100644
index 00000000..6a34448c
--- /dev/null
+++ b/web/css/index/index.css
@@ -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;
+}
diff --git a/web/index.html b/web/index.html
index 0874c1f4..ed0447eb 100644
--- a/web/index.html
+++ b/web/index.html
@@ -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 &amp; Open Hardware IP-KVM</td>
+ </tr>
+ <tr>
+ <td colspan="2" class="copyright">Copyright &copy; 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>
diff --git a/web/js/index/main.js b/web/js/index/main.js
new file mode 100644
index 00000000..b3e9317c
--- /dev/null
+++ b/web/js/index/main.js
@@ -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> &bsol;which chromium 2>/dev/null || which chrome 2>/dev/null&bsol; --app="${url}"<br>
+ <br>
+ <span class="code-comment"># On MacOS using Terminal application:<br>
+ $</span> /Applications/Google&bsol; Chrome.app/Contents/MacOS/Google&bsol; Chrome --app="${url}"<br>
+ <br>
+ <span class="code-comment"># On Windows via cmd.exe:<br>
+ C:&bsol;&gt;</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);
+ }
+ }
+ });
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 18:53:46 +0000