diff options
| -rw-r--r-- | web/css/index/index.css | 84 | ||||
| -rw-r--r-- | web/index.html | 90 | ||||
| -rw-r--r-- | web/js/index/main.js | 58 |
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 & 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> 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> \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); + } + } + }); +} |