Better styling and including box found through access point mode

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;
+  position: absolute;
-  top: 0px;
+  max-width: 1024px;
-  left: 0px;
+  /*min-width: 800px;*/
-  width: 1024px;
+  width: 100%;
-  min-height: 500px;
-  max-height: 768px;
   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;
+	top:  2.5%;
-	left: 31%;
+	/*left: 31%;*/
-  width: 399px;
+  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: 0;
-	top: 0px;
-	left: 0px;
-	z-index: -5;
 }
 .bgMiddle {
-	display: block;
+  top: 30%;
-	position: absolute;
-	top: 30%;
-	left: 0px;
-	z-index: -5;
 }
 .bgBottom {
-	position: absolute;
+  bottom: 0;
-	bottom: 0px;
-	left: 0px;
-	z-index: -5;
 }
 
 /* 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%;
   }
 }
 

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%;
@@ -48,3 +65,12 @@ a {
 	position: absolute;
 	bottom: 1em;
 }
+
+/*.vertImage {*/
+  /*margin: 0;*/
+  /*padding: 0;*/
+  /*border: 2px solid #f0f;*/
+  /*max-width: 100%;*/
+  /*height: auto;*/
+  /*width: auto; *//* for ie9 */
+/*}*/

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;
+  }
+
+}
+

css/popups.css

@@ -2,10 +2,14 @@
   background-color: rgba(255, 255, 255, 0.65);
   z-index: 10;
   position: absolute;
-  top: 0px;
+  top: 0;
-  left: 0px;
+  left: 0;
-  width: 1024px;
+  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;
+  width: 80%;
-  height: 500px;
+  height: 70%;
-  margin: -250px 0 0 -417.5px;
+  margin: -35% 0 0 -40%;
   
-  -moz-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);
+  /*-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;
+  /*-moz-border-radius: 15px;*/
-  -webkit-border-radius: 15px;
+  /*-webkit-border-radius: 15px;*/
-  overflow: hidden; 
+  overflow-x: hidden;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
 }
 
 .popup .content { 
 	margin: 0 1em;
 }
+

index.html

@@ -6,14 +6,15 @@
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-  <link rel="apple-touch-icon-precomposed" href="img/icon.png"/>
+  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="./img/webpage_icons/apple-touch-icon-144x144-precomposed.png" />
-  <link rel="icon" type="image/ico" href="favicon.ico"/>
+  <link rel="icon" type="image/ico" href="./img/favicon.ico"/>
   <meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes">
 
   <link href="css/normalize.css" rel="stylesheet" media="screen">
   <link href="css/main.css" rel="stylesheet" media="screen">
   <link href="css/bg.css" rel="stylesheet" media="screen">
   <link href="css/popups.css" rel="stylesheet" media="screen">
+  <link href="css/mobile.css" rel="stylesheet" media="screen">
 
   <script src="js/libs/jquery-1.8.3.min.js" type="text/javascript"></script>
   <script src="js/libs/spin.min.js" type="text/javascript"></script>
@@ -21,19 +22,24 @@
 </head>
 <body>
 
-<div id="landscape">
+<div id="container">
-  <div class="uiButtonsContainer">
+  <div class="bgContainer">
-    <img class="bgTop" src="img/bg_top.png" />
+    <img class="bgTop"    src="img/bg_top.png" />
     <img class="bgMiddle" src="img/bg_middle.png" />
     <img class="bgBottom" src="img/bg_bottom.png" />
+  </div>
+
+  <div class="uiButtonsContainer">
     <div id="d3dlogo" onclick="location.reload()"></div>
     <div id="contentOverlay">
       <div id="settings" class="popup">
         <div class="content">
           <p id="intro"></p>
-  	  	  <ul id="list"></ul>
+  	  	  <ul id="list" class="cf"></ul>
   	  	  <small id="hint">
-  	  	  	Can&#8217;t find your box? Make sure you&#8217;re on the same wifi network. <br/>
+  	  	  	Can&#8217;t find your box? <br/>
+						Maybe the box isn&#8217;t connected to your network yet, try to connect to a Doodle3D-... WiFi network. <br/>
+						Otherwise, make sure you&#8217;re on the same WiFi network. <br/>
   	  	  	You can always connect your box to your computer using an ethernet cable.
   	  	  </small>
   	 	  <div id="preloader"></div>
@@ -42,9 +48,6 @@
     </div>
   </div>
 </div>
-<div id="portrait">
-  <img class="vertImage" src="img/bg_vertical2.png"/>
-</div>
 
 </body>
 </html>

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");
+//  console.log("ready");
 
-	$intro = $("#intro");
+  $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({