Webbox

From f939d19e9bcb0cc0cf048aa0c8037f1f9c5a8c8b Mon Sep 17 00:00:00 2001 From: Roland Stigge Date: Fri, 5 Jan 2018 21:03:31 +0100 Subject: Initial commit, basic working webbox (WIP), see TODO --- html/index.html | 57 ++++++++ html/webbox.css | 138 ++++++++++++++++++ html/webbox.js | 446 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 641 insertions(+) create mode 100644 html/index.html create mode 100644 html/webbox.css create mode 100644 html/webbox.js (limited to 'html') diff --git a/html/index.html b/html/index.html new file mode 100644 index 0000000..023b8bc --- /dev/null +++ b/html/index.html @@ -0,0 +1,57 @@ + + + + + Webbox + + + + +

+ + + + + + + + + + + + + +

+ +

+ + + + + + + + + + + + + + + diff --git a/html/webbox.css b/html/webbox.css new file mode 100644 index 0000000..39551e0 --- /dev/null +++ b/html/webbox.css @@ -0,0 +1,138 @@ +div, td, h1 { + font-family: "sans-serif"; +} + +.title { + font-size: 16pt; +} + +.greyout { + opacity: 0.7; + background-color: #FFFFFF; + z-index: 9; /* behind dialog window which is 10 */ +} + +.button { + background-color: #303060; + border: none; + color: white; + padding: 18px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 2px 2px; + border-radius: 6px; +} + +.leftbutton { + position: absolute; + left: 20px; + bottom: 20px; +} + +.rightbutton { + position: absolute; + right: 20px; + bottom: 20px; +} + +.dialogwindow { + position: fixed; + top: 50%; + left: 50%; + width: 400px; + height: 400px; + margin-top: -200px; + margin-left: -200px; + background-color: #FFFFFF; + opacity: 1; + z-index: 10; + border-width: 3px; + border-style: solid; + border-color: #808080; + padding: 10pt; +} + +.dialog { + /*width: 100%;*/ +} + +.textinput { + width: calc(100% - 20px); +} + +.fullscreen { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; +} + +div.footer { + font-size: 8pt; + padding-top: 30pt; + text-align: center; +} + +table.menu { + width: 100%; + border: 0; /* 1px solid #000000; */ + border-collapse: collapse; + margin: 0; + padding: 0; + table-layout: fixed; +} + +table.menu tr { + border: 0; /* 1px solid #000000; */ + margin: 0; + padding: 0; +} + +table.menu td.firsttd { + width: 100%; + border: 0; /* 1px solid #000000; */ + color: #FFFFFF; + background-color: #404070; + margin: 0; + padding: 0 5px 0 5px; +} + +table.menu td.entry { + width: 60px; + border: 0; /* 1px solid #000000; */ + color: #FFFFFF; + background-color: #404070; + padding: 9px; + margin: 0; + cursor: pointer; +} + +table.list { + width: 100%; + border: 0; /* 1px solid #000000; */ + cursor: pointer; + background-color: #FFFFFF; +} + +table.list tr { + background-color: #FFFFFF; +} + +table.list tr.selectedrow { + background-color: #CCCCFF; +} + +table.list td.type { + width: 50px; + border: 0; /* 1px solid #000000; */ +} + +table.list td.name { + width: 100%; + border: 0; /* 1px solid #000000; */ + color: #0000FF; +} diff --git a/html/webbox.js b/html/webbox.js new file mode 100644 index 0000000..3bcbf8d --- /dev/null +++ b/html/webbox.js @@ -0,0 +1,446 @@ +var currentDir = "/"; +var listElements; +var numberOfSelectedRows = 0; + +function loadContents(dir) { + numberOfSelectedRows = 0; + + var xhr = new XMLHttpRequest(); + + xhr.onreadystatechange = function() { + if (this.readyState != 4 || this.status != 200) { + return; + } + + var list = xhr.responseXML; + listElements = list.getElementsByTagName("listentry"); + + var result = ""; + + if (listElements.length == 0) { + result += ""; + } else { + for (var i = 0; i < listElements.length; i++) { + var type = listElements[i].getAttribute("type"); + + result += ""; + } + } + + result += "

	(empty)
" + type + "	" + listElements[i].childNodes[0].nodeValue + "