projects / tricorder.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (initial)
add an initial version of tricorder app
authorRobert Kaiser <robert@widebook.box.kairo.at>
Mon, 19 Nov 2012 01:43:45 +0000 (02:43 +0100)
committerRobert Kaiser <robert@widebook.box.kairo.at>
Mon, 19 Nov 2012 01:43:45 +0000 (02:43 +0100)
index.html [new file with mode: 0644] patch | blob
js/tricorder.js [new file with mode: 0644] patch | blob
style/tilex32.png [new file with mode: 0644] patch | blob
style/tricorder.css [new file with mode: 0644] patch | blob

diff --git a/index.html b/index.html
new file mode 100644 (file)
index 0000000..1b1eea6
--- /dev/null
+++ b/index.html
@@ -0,0 +1,59 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public\r
+   - License, v. 2.0. If a copy of the MPL was not distributed with this file,\r
+   - You can obtain one at http://mozilla.org/MPL/2.0/.  -->\r
+\r
+<!DOCTYPE html>\r
+<html manifest="manifest.appcache">\r
+<head>\r
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">\r
+  <!-- try to counts default scaling on mobile, see \r
+       https://developer.mozilla.org/en/Mobile/Viewport_meta_tag -->\r
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=.6667, maximum-scale=.6667">\r
+  <title>Tricorder</title>\r
+  <script src="js/tricorder.js"></script>\r
+  <link rel="stylesheet" href="style/tricorder.css">\r
+  <link rel="shortcut icon" href="style/tilex32.png" type="image/png">\r
+</head>\r
+<body>\r
+<h1>Tricorder</h1>\r
+\r
+<div id="sidebar">\r
+<div id="sideTop">\r
+<div id="stardate">[74]</div>\r
+</div>\r
+\r
+<div id="sideSepTop">\r
+<div id="sideSepTopInsert"></div>\r
+</div>\r
+\r
+<div id="sideSepBottom">\r
+<div id="sideSepBottomInsert"></div>\r
+</div>\r
+\r
+<div id="sideBottom">\r
+<ul id="navlist">\r
+<li id="navPos"><a href="#">Position</a></li>\r
+<li id="navGrav"><a href="#">Gravity</a></li>\r
+<li id="navAcou"><a href="#">Acoustics</a></li>\r
+</ul>\r
+</div>\r
+\r
+<div id="sideRemark">\r
+<a href="http://www.startrek.com/">STAR TREK</a> and related items are trademarks of <a href="http://www.paramount.com/">Paramount Pictures</a>.\r
+</div>\r
+</div>\r
+\r
+<div id="mainarea">\r
+<div id="mainHeader">\r
+Web Tricorder\r
+</div>\r
+\r
+<div id="mainSepTop"></div>\r
+<div id="mainSepBottom"></div>\r
+\r
+<div id="mainContent">\r
+<p>This is the main area for tricorder output.</p>\r
+</div>\r
+\r
+</body>\r
+</html>
\ No newline at end of file
diff --git a/js/tricorder.js b/js/tricorder.js
new file mode 100644 (file)
index 0000000..b04ac12
--- /dev/null
+++ b/js/tricorder.js
@@ -0,0 +1,24 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+var gStardate, gSDBase;
+
+window.onload = function() {
+  setTimeout(updateStardate, 0);
+}
+
+function updateStardate() {
+  if (!gStardate)
+    gStardate = document.getElementById("stardate");
+
+  var curDate = new Date();
+
+  if (!gSDBase)
+    gSDBase = new Date("September 8, 1966 20:00:00 EST");
+
+  var sdateval = (curDate - gSDBase) / (86400 * 365.2425);
+  gStardate.textContent = sdateval.toFixed(1);
+
+  setTimeout(updateStardate, 5*60*1000);
+}
\ No newline at end of file
diff --git a/style/tilex32.png b/style/tilex32.png
new file mode 100644 (file)
index 0000000..d4027db
Binary files /dev/null and b/style/tilex32.png differ
diff --git a/style/tricorder.css b/style/tricorder.css
new file mode 100644 (file)
index 0000000..891e0e3
--- /dev/null
+++ b/style/tricorder.css
@@ -0,0 +1,200 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+html {
+  background-color: #000000;
+  height: 100%;
+}
+
+body {
+  border: 0px solid #9C9CFF;
+  font-size: 16px;
+  margin: 0px;
+  height: 100%;
+  background-color: #000000;
+  color: #FF9F00;
+  position: relative;
+  font-family: Arial,Helvetica,sans-serif;
+}
+
+h1 {
+  display: none;
+}
+
+a:link { color: #FF9F00; }
+a:visited { color: #8050B0; }
+a:hover, a:active { color: #FFCF00; }
+
+#sidebar {
+  position: absolute;
+  top: 3px; 
+  bottom: 3px;
+  left: 3px;
+  right: auto;
+  width: 140px;
+ height: auto;
+  padding: 0px;
+  margin: 0px 0px 0px 0px;
+  border: 0px;
+  overflow: hidden;
+}
+
+#sideTop {
+  background-color: #6080F0;
+  color: #000000;
+  width: 120px;
+  height: 80px;
+  margin-bottom: 3px;
+}
+
+#stardate {
+  background-color: #A06060;
+  color: #000000;
+  padding: 3px 3px 10px;
+  font-weight: bold;
+  text-align: right;
+  border-bottom: 3px solid black;
+}
+
+#sideSepTop {
+  background-color: #808090;
+  width: 140px;
+  height: 20px;
+  margin-bottom: 3px;
+  padding-bottom: 10px;
+  border-radius: 0px 0px 0px 15px;
+}
+#sideSepTopInsert {
+  background-color: #000000;
+  width: 20px;
+  height: 100%;
+  margin-left: 120px;
+  border-radius: 0px 0px 0px 15px;
+}
+#sideSepBottom {
+  background-color: #008484;
+  width: 140px;
+  height: 50px;
+  margin-bottom: 3px;
+  padding-top: 10px;
+  border-radius: 15px 0px 0px 0px;
+}
+#sideSepBottomInsert {
+  background-color: #000000;
+  width: 20px;
+  height: 100%;
+  margin-left: 120px;
+  border-radius: 15px 0px 0px 0px;
+}
+
+#sideBottom {
+  background-color: #9C9CFF;
+  color: #000000;
+  width: 120px;
+  margin-bottom: 3px;
+  position: absolute;
+  top: 179px;
+  bottom: 40px;
+  height: auto;
+}
+
+#navlist {
+  list-style-type: none;
+  margin: 0 0 1em;
+  padding: 0 0 0.2em;
+}
+#navlist > li {
+  margin: 0;
+  padding: 0 0.2em 0;
+  border-bottom: 3px solid #000000;
+  font-weight: bold;
+}
+#navlist > li > a {
+  display: block;
+  text-decoration: none;
+  width: 100%;
+  padding: 0.3em 0;
+}
+#navlist > li:hover,
+#navlist > li:active,
+#navlist > li:hover > a,
+#navlist li:active > a,
+#navlist > li > a:hover,
+#navlist > li > a:active {
+  background-color: #FFCF00;
+  color: #000000;
+}
+
+#navPos, #navPos > a {
+  background-color: #FF9F00;
+  color: #000000;
+}
+#navGrav, #navGrav > a {
+  background-color: #C09070;
+  color: #000000;
+}
+#navAcou, #navAcou > a {
+  background-color: #6000CF;
+  color: #000000;
+}
+
+#sideRemark {
+  background-color: #E7ADE7;
+  color: #000000;
+  width: 120px;
+  font-size: 10px;
+  text-align: center;
+  position: absolute;
+  bottom: 0px;
+  height: 40px;
+}
+#sideRemark a:link, #sideRemark a:visited { color: #000000; }
+#sideRemark a:hover, #sideRemark a:active { color: #008484; }
+
+#mainarea {
+  position: absolute;
+  top: 3px;
+  bottom: 3px;
+  left: 145px;
+  right: 3px;
+  width: auto;
+  padding: 1px;
+  min-height: 35em;
+  overflow: none;
+  border: none;
+}
+
+#mainHeader {
+  color: #FFCF00;
+  font-size: 3em;
+  font-weight: bold;
+  height: 102px;
+  text-align: center;
+}
+
+#mainSepTop {
+  background-color: #E7ADE7;
+  font-size: 1px;
+  height: 10px;
+  margin-bottom: 3px;
+}
+#mainSepBottom {
+  background-color: #A09090;
+  font-size: 1px;
+  height: 10px;
+  margin-bottom: 3px;
+}
+
+#mainContent {
+  position: absolute;
+  top: 129px;
+  bottom: 0px;
+  left: 0px;
+  right: 1px;
+  width: auto;
+  padding: 1px;
+  height: auto;
+  overflow: auto;
+  border: none;
+}
Web Tricorder - display device sensor data in Star Trek style!