diff --git a/css/bg.css b/css/bg.css index e2fd42a..7c023ad 100644 --- a/css/bg.css +++ b/css/bg.css @@ -1,93 +1,80 @@ -/* Portrait */ -@media screen and (orientation:portrait) { - #landscape { - display: none; - } - #portrait { - display: block; - } -} -/* Landscape */ -@media screen and (orientation:landscape) { - #landscape { - display: block; - } - #portrait { - display: none; - } -} - .uiButtonsContainer { - position: fixed; - top: 0px; - left: 0px; - width: 1024px; - min-height: 500px; - max-height: 768px; + position: absolute; + max-width: 1024px; + /*min-width: 800px;*/ + width: 100%; height: 100%; + /*max-height: 768px;*/ + /*min-height: 300px;*/ + top: 0; left: 0; right: 0; bottom: 0; + /*overflow: hidden;*/ + margin: 0 auto; + outline: 2px solid #5e8c71; + box-shadow: 0 0 8px rgba(8, 8, 8, 0.25); /* height: 768px;*/ } -.uiButtonsContainer:before { - content:' '; - display:block; - position:absolute; - left:0; - top:0; - right:0; - bottom:0; - border: 2px solid #333; -} #d3dlogo { position: absolute; - top: 15px; - left: 31%; - width: 399px; + top: 2.5%; + /*left: 31%;*/ + width: 100%; + margin: 0 auto; height: 139px; - background-image: url('../img/logo_full.png'); + background: url('../img/logo_full.png') no-repeat center center; cursor: pointer; } +.bgContainer { + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; +} +.bgTop, .bgMiddle, .bgBottom { + opacity: 1.0; + transition: opacity .35s linear; + position: absolute; + left: 0; + z-index: -5; +} .bgTop { - position: absolute; - top: 0px; - left: 0px; - z-index: -5; + top: 0; } .bgMiddle { - display: block; - position: absolute; - top: 30%; - left: 0px; - z-index: -5; + top: 30%; } .bgBottom { - position: absolute; - bottom: 0px; - left: 0px; - z-index: -5; + bottom: 0; } /* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */ +@media screen and (max-height: 655px) { + .bgMiddle { opacity: 0; } +} + @media screen and (max-height: 675px) { - .bgMiddle { - display: none; - } #d3dlogo { - width: 399px; + /*width: 399px;*/ height: 74px; background-image: url('../img/logo_small.png'); - margin-top: 9px; + top: 6%; } } @media screen and (max-height: 560px) { #d3dlogo { - width: 399px; + /*width: 399px;*/ height: 57px; background-image: url('../img/logo_smaller_wide.png'); - margin-top: 14px; + top: 6%; + } +} + +@media screen and (max-height: 420px) { + #d3dlogo { + top: 3%; } } diff --git a/css/main.css b/css/main.css index eefae89..7b0fcb9 100644 --- a/css/main.css +++ b/css/main.css @@ -1,7 +1,24 @@ +#container { + position:absolute; + width: 100%; + max-width: 1024px; + /*max-height: 768px;*/ + top: 0; + bottom: 0; + left: 0; + right: 0; + overflow: hidden; + margin: 0 auto; + + box-shadow: 0 0 0 2px #5e8c71, 0 0 8px 4px rgba(8, 8, 8, 0.25); +} + a { color: #5491D2; text-decoration: none; } + + #preloader { position: absolute; top: 50%; @@ -47,4 +64,13 @@ a { display:none; position: absolute; bottom: 1em; -} \ No newline at end of file +} + +/*.vertImage {*/ + /*margin: 0;*/ + /*padding: 0;*/ + /*border: 2px solid #f0f;*/ + /*max-width: 100%;*/ + /*height: auto;*/ + /*width: auto; *//* for ie9 */ +/*}*/ diff --git a/css/mobile.css b/css/mobile.css new file mode 100644 index 0000000..ebf87c7 --- /dev/null +++ b/css/mobile.css @@ -0,0 +1,72 @@ +/* MOBILE */ +@media only screen and (max-width: 480px), +only screen and (max-width: 720px) and (min-device-pixel-ratio : 1.5), +only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio : 1.5) { + body { + /*background-color: #f0f;*/ + } + + #d3dlogo { + /*width: 399px;*/ + height: 57px; + background-image: url('../img/logo_smaller_wide.png'); + top: 7px; + } + + .popup { + /*background-color: rgba(255, 255, 255, 0.6);*/ + background-color: rgba(245, 245, 245, 0.65); + position: absolute; + bottom: 0; + left: 0; + top: 75px; + width: 100%; + height: auto; + margin: 0; + + /*-moz-box-shadow: 0 0 0 3px rgba(16, 16, 16, 1.0), 0 2px 6px 0 rgba(16, 16, 16, 0.65), 0 6px 6px -2px rgba(16, 16, 16, 0.2) inset;*/ + /*-webkit-box-shadow: 0 0 0 3px rgba(16, 16, 16, 1.0), 0 2px 6px 0 rgba(16, 16, 16, 0.65), 0 6px 6px -2px rgba(16, 16, 16, 0.2) inset;*/ + box-shadow: 0 0 0 2px rgba(16, 16, 16, 0.8), 0 2px 6px 0 rgba(16, 16, 16, 0.65), 0 6px 6px -2px rgba(16, 16, 16, 0.2) inset; + border: 0; + border-radius: 0; + /*-moz-border-radius: 15px;*/ + /*-webkit-border-radius: 15px;*/ + overflow-x: hidden; + overflow-y: scroll; + } + + .bgContainer { + /*display: none;*/ + } + + #list { + padding: 0; + } + #list li { + list-style-type: none; + float: none; + } + #list a { + background-color: #fff; + margin: 0 0 1em 0; + padding: 2em 0 0 0; + + width: 100%; + height: 3.0em; + + border: 1px solid #333; + border-radius: 15px; + + -moz-box-shadow: 0 2px 7px 0 rgba(16, 16, 16, 0.60); + -webkit-box-shadow: 0 2px 7px 0 rgba(16, 16, 16, 0.60); + box-shadow: 0 2px 7px 0 rgba(16, 16, 16, 0.60); + + text-align: center; + vertical-align: middle; + cursor: pointer; + + transition:background-color 0.1s, color 0.1s; + } + +} + diff --git a/css/popups.css b/css/popups.css index 3421112..795e169 100644 --- a/css/popups.css +++ b/css/popups.css @@ -2,10 +2,14 @@ background-color: rgba(255, 255, 255, 0.65); z-index: 10; position: absolute; - top: 0px; - left: 0px; - width: 1024px; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + max-width: 1024px; height: 100%; + /*max-height: 768px;*/ } .popup { @@ -13,22 +17,25 @@ z-index: 15; position: absolute; - top: 50%; + bottom: 6%; left: 50%; - width: 835px; - height: 500px; - margin: -250px 0 0 -417.5px; + width: 80%; + height: 70%; + margin: -35% 0 0 -40%; - -moz-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65); - -webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65); + /*-moz-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);*/ + /*-webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);*/ box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65); border: 2px solid #222; border-radius: 15px; - -moz-border-radius: 15px; - -webkit-border-radius: 15px; - overflow: hidden; + /*-moz-border-radius: 15px;*/ + /*-webkit-border-radius: 15px;*/ + overflow-x: hidden; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; } .popup .content { margin: 0 1em; -} \ No newline at end of file +} + diff --git a/index.html b/index.html index b14e450..fae52d8 100644 --- a/index.html +++ b/index.html @@ -6,34 +6,40 @@ - - + + - + + -
-
- +
+
+ +
+ +
-
- -
\ No newline at end of file diff --git a/js/main.js b/js/main.js index 598c589..15f9613 100644 --- a/js/main.js +++ b/js/main.js @@ -6,7 +6,10 @@ var boxTimeoutTime = 500; var numBoxesChecking = 0; // count how many boxes we are checking var numBoxesFound = 0; // count how many boxes responded -var connectedBox = {localip:"192.168.5.1",wifiboxid:"Wired WiFi box"}; +var connectedBox = {localip:"192.168.5.1",wifiboxid:"Wired WiFi-Box"}; +var apBox = {localip:"draw.doodle3d.com",wifiboxid:"WiFi-Box"}; +var connectAPI = "http://connect.doodle3d.com/api" +var boxAPI = "http://draw.doodle3d.com/d3dapi"; var $list; var $intro; @@ -15,9 +18,9 @@ var $preloader; var spinner; $(function() { - //console.log("ready"); - - $intro = $("#intro"); +// console.log("ready"); + + $intro = $("#intro"); $list = $("#list"); $hint = $("#hint"); $preloader = $("#preloader"); @@ -44,13 +47,19 @@ $(function() { spinner.spin($preloader[0]); retrieveList(); -}) + + // DEBUG +// numBoxesFound = 4; +// updateIntro(); +}); + function retrieveList() { $preloader.show(); //spinner.spin($preloader[0]); $.ajax({ - url: "api/list.php", + timeout: 2000, + url: connectAPI+"/list.php", dataType: 'json', success: function(response){ //console.log("retrieveList response: ",response); @@ -61,15 +70,19 @@ function retrieveList() { retrieveListDelay = setTimeout(retrieveList, retrieveListInterval); } }).fail(function() { - //console.log("retrieveList: failed"); + console.log("retrieveList: failed"); + updateList([apBox]); //if web is not accessible try to find the box as an accesspoint clearTimeout(retrieveListDelay); retrieveListDelay = setTimeout(retrieveList, retrieveListInterval); // retry after delay }); } + function updateList(boxes) { numBoxesChecking = 0; numBoxesFound = 0; + if (boxes===undefined) boxes = []; + boxes.push(connectedBox); // remove displayed, but unlisted boxes @@ -89,6 +102,7 @@ function updateList(boxes) { //checkBox(connectedBox); updateIntro(); } + function checkBox(box) { numBoxesChecking++; $.ajax({