From 97d8d6ea4c2ce88e6045f89461ac0ca8caff0830 Mon Sep 17 00:00:00 2001 From: Devaev Maxim Date: Fri, 23 Nov 2018 09:35:01 +0300 Subject: index --- web/css/index/index.css | 84 +++++++++++++++++++++++++++++++++++++++++++++ web/index.html | 90 +++++++++++++++++++++++++++++++++++++++++++++++-- web/js/index/main.js | 58 +++++++++++++++++++++++++++++++ 3 files changed, 230 insertions(+), 2 deletions(-) create mode 100644 web/css/index/index.css create mode 100644 web/js/index/main.js (limited to 'web') 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 @@ - Redirect - + Pi-KVM Index + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + +
+ + + + + + + +
Open Source & Open Hardware IP-KVM
Copyright © 2018 Pi-KVM Developers Team
+
+
+ + + + + +
Server:
+
+
+
    +
    +
    +

    + 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). +

    +

    + To override this limitation you can use Google Chrome + or Chromium in application mode. +

    +
    +
    +

    + Full documentation, source code, hardware schematics and legal information + can be found in our official website. +

    +
    +
    + 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 = ` + # On Linux using Chromium/Chrome via any terminal:
    + $     \which chromium 2>/dev/null || which chrome 2>/dev/null\ --app="${url}"
    +
    + # On MacOS using Terminal application:
    + $     /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --app="${url}"
    +
    + # On Windows via cmd.exe:
    + C:\>     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 += ` +
  • +
    + +
    + + ${app.name} +
    +     +
    +
    • + `; + }); + + if (info.meta && info.meta.server && info.meta.server.host) { + $("kvmd-meta-server-host").innerHTML = info.meta.server.host; + } + } else { + setTimeout(__loadKvmdInfo, 1000); + } + } + }); +} -- cgit v1.2.3