<link rel="stylesheet" href="style/tricorder.css">\r
<link rel="shortcut icon" href="style/tilex32.png" type="image/png">\r
</head>\r
-<body>\r
+<body id="body">\r
<h1>Tricorder</h1>\r
\r
<div id="sidebar">\r
\r
<div id="sideBottom">\r
<ul id="navlist">\r
-<li id="navPos"><a href="#" onclick="switchModule('Pos');">Position</a></li>\r
-<li id="navGrav"><a href="#" onclick="switchModule('Grav');">Gravity</a></li>\r
-<li id="navAcou"><a href="#" onclick="switchModule('Acou');">Acoustics</a></li>\r
+<li id="navPos" onclick="switchModule('Pos');">Position</li>\r
+<li id="navGrav" onclick="switchModule('Grav');">Gravity</li>\r
+<li id="navAcou" onclick="switchModule('Acou');">Acoustics</li>\r
</ul>\r
</div>\r
\r
-<div id="sideRemark">\r
-<a href="http://www.startrek.com/">STAR TREK</a> and related items are\r
-trademarks of <a href="http://www.paramount.com/">Paramount Pictures</a>.\r
-</div>\r
+<ul id="sideRemark">\r
+<li onclick="toggleFullscreen();">Full Screen</li>\r
+</ul>\r
</div>\r
\r
<div id="mainarea">\r
* You can obtain one at http://mozilla.org/MPL/2.0/. */
var gStardate, gSDBase;
+var gSounds = {};
window.onload = function() {
setTimeout(updateStardate, 0);
+ gSounds.scan = new Audio("sound/scan.opus");
+ gSounds.scan.loop = true;
+ gSounds.launch = new Audio("sound/launch.opus");
+ gSounds.shutdown = new Audio("sound/shutdown.opus");
+ gSounds.keyaction = new Audio("sound/key-action.opus");
+ gSounds.keypress = new Audio("sound/key-press.opus");
+
+ gSounds.launch.play();
+ window.addEventListener("beforeunload", function( event ) {
+ gSounds.shutdown.play();
+ }, false);
}
function updateStardate() {
setTimeout(updateStardate, 5*60*1000);
}
+function toggleFullscreen() {
+ gSounds.keyaction.play();
+ if ((document.fullScreenElement && document.fullScreenElement !== null) ||
+ (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
+ (document.webkitFullScreenElement && document.webkitFullScreenElement !== null)) {
+ if (document.cancelFullScreen) {
+ document.cancelFullScreen();
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen();
+ } else if (document.webkitCancelFullScreen) {
+ document.webkitCancelFullScreen();
+ }
+ }
+ else {
+ var elem = document.getElementById("body");
+ if (elem.requestFullScreen) {
+ elem.requestFullScreen();
+ } else if (elem.mozRequestFullScreen) {
+ elem.mozRequestFullScreen();
+ } else if (elem.webkitRequestFullScreen) {
+ elem.webkitRequestFullScreen();
+ }
+ }
+}
+
function switchModule(modname) {
+ gSounds.keyaction.play();
var sections = document.getElementsByTagName('section');
for (var i = 0; i <= sections.length - 1; i++) {
if (sections[i].classList.contains("active")) {
var gModPos = {
activate: function() {
if (navigator.geolocation) {
+ gSounds.scan.play();
document.getElementById("posunavail").style.display = "none";
document.getElementById("posavail").style.display = "block";
this.watchID = navigator.geolocation.watchPosition(
}
},
deactivate: function() {
+ gSounds.scan.pause();
if (this.watchID) {
navigator.geolocation.clearWatch(this.watchID);
}
var gModGrav = {
activate: function() {
+ gSounds.scan.play();
document.getElementById("gravunavail").style.display = "none";
document.getElementById("gravavail").style.display = "block";
window.addEventListener("deviceorientation", this.orientEvent, true);
window.addEventListener("devicemotion", this.motionEvent, true);
},
deactivate: function() {
+ gSounds.scan.pause();
window.removeEventListener("deviceorientation", this.orientEvent, true);
window.removeEventListener("devicemotion", this.motionEvent, true);
document.getElementById("gravunavail").style.display = "block";
}
var gModAcou = {
- activate: function() {},
- deactivate: function() {},
+ activate: function() {
+ //gSounds.scan.play();
+ },
+ deactivate: function() {
+ gSounds.scan.pause();
+ },
}
var gModNull = {
- activate: function() {},
- deactivate: function() {},
+ activate: function() {
+ //gSounds.scan.play();
+ },
+ deactivate: function() {
+ gSounds.scan.pause();
+ },
}
--- /dev/null
+Copyright (c) <dates>, <Copyright Holder> (<URL|email>),\r
+with Reserved Font Name <Reserved Font Name>.\r
+Copyright (c) <dates>, <additional Copyright Holder> (<URL|email>),\r
+with Reserved Font Name <additional Reserved Font Name>.\r
+Copyright (c) <dates>, <additional Copyright Holder> (<URL|email>).\r
+\r
+This Font Software is licensed under the SIL Open Font License, Version 1.1.\r
+This license is copied below, and is also available with a FAQ at:\r
+http://scripts.sil.org/OFL\r
+\r
+\r
+-----------------------------------------------------------\r
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007\r
+-----------------------------------------------------------\r
+\r
+PREAMBLE\r
+The goals of the Open Font License (OFL) are to stimulate worldwide\r
+development of collaborative font projects, to support the font creation\r
+efforts of academic and linguistic communities, and to provide a free and\r
+open framework in which fonts may be shared and improved in partnership\r
+with others.\r
+\r
+The OFL allows the licensed fonts to be used, studied, modified and\r
+redistributed freely as long as they are not sold by themselves. The\r
+fonts, including any derivative works, can be bundled, embedded, \r
+redistributed and/or sold with any software provided that any reserved\r
+names are not used by derivative works. The fonts and derivatives,\r
+however, cannot be released under any other type of license. The\r
+requirement for fonts to remain under this license does not apply\r
+to any document created using the fonts or their derivatives.\r
+\r
+DEFINITIONS\r
+"Font Software" refers to the set of files released by the Copyright\r
+Holder(s) under this license and clearly marked as such. This may\r
+include source files, build scripts and documentation.\r
+\r
+"Reserved Font Name" refers to any names specified as such after the\r
+copyright statement(s).\r
+\r
+"Original Version" refers to the collection of Font Software components as\r
+distributed by the Copyright Holder(s).\r
+\r
+"Modified Version" refers to any derivative made by adding to, deleting,\r
+or substituting -- in part or in whole -- any of the components of the\r
+Original Version, by changing formats or by porting the Font Software to a\r
+new environment.\r
+\r
+"Author" refers to any designer, engineer, programmer, technical\r
+writer or other person who contributed to the Font Software.\r
+\r
+PERMISSION & CONDITIONS\r
+Permission is hereby granted, free of charge, to any person obtaining\r
+a copy of the Font Software, to use, study, copy, merge, embed, modify,\r
+redistribute, and sell modified and unmodified copies of the Font\r
+Software, subject to the following conditions:\r
+\r
+1) Neither the Font Software nor any of its individual components,\r
+in Original or Modified Versions, may be sold by itself.\r
+\r
+2) Original or Modified Versions of the Font Software may be bundled,\r
+redistributed and/or sold with any software, provided that each copy\r
+contains the above copyright notice and this license. These can be\r
+included either as stand-alone text files, human-readable headers or\r
+in the appropriate machine-readable metadata fields within text or\r
+binary files as long as those fields can be easily viewed by the user.\r
+\r
+3) No Modified Version of the Font Software may use the Reserved Font\r
+Name(s) unless explicit written permission is granted by the corresponding\r
+Copyright Holder. This restriction only applies to the primary font name as\r
+presented to the users.\r
+\r
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font\r
+Software shall not be used to promote, endorse or advertise any\r
+Modified Version, except to acknowledge the contribution(s) of the\r
+Copyright Holder(s) and the Author(s) or with their explicit written\r
+permission.\r
+\r
+5) The Font Software, modified or unmodified, in part or in whole,\r
+must be distributed entirely under this license, and must not be\r
+distributed under any other license. The requirement for fonts to\r
+remain under this license does not apply to any document created\r
+using the Font Software.\r
+\r
+TERMINATION\r
+This license becomes null and void if any of the above conditions are\r
+not met.\r
+\r
+DISCLAIMER\r
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,\r
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF\r
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT\r
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE\r
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\r
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL\r
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\r
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM\r
+OTHER DEALINGS IN THE FONT SOFTWARE.\r
* 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/. */
-@font-face {
- font-family: DVSC; /* Original in Star Trek is Helvetica Ultra Condensed */
- src: url("DejaVuSansCondensed.ttf");
-}
+/* The original LCARS font in Star Trek is Helvetica Ultra Condensed.
+ * We try to use open stuff here, so we use OSP-DIN from
+ * http://openfontlibrary.org/en/font/osp-din, which is licensed under the
+ * SIL OFL - http://scripts.sil.org/OFL */
@font-face {
- font-family: DVSC;
- src: url("DejaVuSansCondensed-Bold.ttf");
- font-weight: bold;
+ font-family: OSPDIN;
+ src: url('OSPDIN.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
}
html {
background-color: #000000;
color: #FF9F00;
position: relative;
- font-family: DVSC,"DejaVu Sans",Arial,Helvetica,sans-serif;
+ font-family: OSPDIN,sans-serif;
}
h1 {
bottom: 3px;
left: 3px;
right: auto;
- width: 140px;
+ width: 90px;
height: auto;
padding: 0px;
margin: 0px 0px 0px 0px;
#sideTop {
background-color: #6080F0;
color: #000000;
- width: 120px;
- height: 80px;
+ width: 70px;
+ height: 60px;
margin-bottom: 3px;
}
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;
+ width: 90px;
height: 20px;
margin-bottom: 3px;
padding-bottom: 10px;
background-color: #000000;
width: 20px;
height: 100%;
- margin-left: 120px;
+ margin-left: 70px;
border-radius: 0px 0px 0px 15px;
}
#sideSepBottom {
background-color: #008484;
- width: 140px;
+ width: 90px;
height: 50px;
margin-bottom: 3px;
padding-top: 10px;
background-color: #000000;
width: 20px;
height: 100%;
- margin-left: 120px;
+ margin-left: 70px;
border-radius: 15px 0px 0px 0px;
}
#sideBottom {
background-color: #9C9CFF;
color: #000000;
- width: 120px;
+ width: 70px;
margin-bottom: 3px;
position: absolute;
- top: 179px;
- bottom: 40px;
+ top: 159px;
+ bottom: 2em;
height: auto;
}
}
#navlist > li {
margin: 0;
- padding: 0 0.2em 0;
+ padding: 0.2em;
border-bottom: 3px solid #000000;
- font-weight: bold;
-}
-#navlist > li > a {
- display: block;
- text-decoration: none;
- width: 100%;
- padding: 0.3em 0;
+ text-transform: uppercase;
}
#navlist > li:hover,
-#navlist > li:active,
-#navlist > li:hover > a,
-#navlist > li:active > a,
-#navlist > li > a:hover,
-#navlist > li > a:active {
+#navlist > li:active {
background-color: #FFCF00;
color: #000000;
}
-#navlist > li.active,
-#navlist > li.active > a {
+#navlist > li.active {
background-color: #008484;
color: #FFCF00;
+ outline: none;
}
-#navPos, #navPos > a {
+#navPos {
background-color: #FF9F00;
color: #000000;
}
-#navGrav, #navGrav > a {
+#navGrav {
background-color: #C09070;
color: #000000;
}
-#navAcou, #navAcou > a {
+#navAcou {
background-color: #6000CF;
color: #000000;
}
#sideRemark {
background-color: #E7ADE7;
color: #000000;
- width: 120px;
- font-size: 10px;
- text-align: center;
+ width: 70px;
position: absolute;
bottom: 0px;
- height: 40px;
+ height: 2em;
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+#sideRemark > li {
+ text-transform: uppercase;
+ padding-top: .25em;
+ padding-left: .2em;
+ height: 1.75em;
+ margin: 0;
+}
+#sideRemark > li:hover,
+#sideRemark > li:active {
+ background-color: #FFCF00;
+ color: #000000;
}
-#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;
+ left: 95px;
right: 3px;
width: auto;
padding: 1px;
font-size: 3em;
font-weight: bold;
line-height: .8em;
- height: 102px;
+ height: 82px;
text-align: center;
}
#mainContent {
position: absolute;
- top: 129px;
+ top: 109px;
bottom: 0px;
left: 0px;
right: 1px;
.gravVal {
text-align: right;
-}
\ No newline at end of file
+}
+
+@media screen and (min-width: 500px) {
+ body {
+ font-size: 24px;
+ }
+ #sidebar {
+ width: 140px;
+ }
+ #sideTop {
+ width: 120px;
+ height: 80px;
+ }
+ #sideSepTop {
+ width: 140px;
+ }
+ #sideSepTopInsert {
+ margin-left: 120px;
+ }
+ #sideSepBottom {
+ width: 140px;
+ }
+ #sideSepBottomInsert {
+ margin-left: 120px;
+ }
+ #sideBottom {
+ width: 120px;
+ top: 179px;
+ bottom: 40px;
+ }
+ #sideRemark {
+ width: 120px;
+ height: 40px;
+ }
+ #mainarea {
+ left: 145px;
+ }
+ #mainHeader {
+ height: 102px;
+ }
+ #mainContent {
+ top: 129px;
+ }
+}
projects / tricorder.git / commitdiff