From f06b8994f09c5d3c79a2a6a13068430afa328ab1 Mon Sep 17 00:00:00 2001
From: Rick Companje <rick@companje.nl>
Date: Tue, 11 Jul 2017 12:29:15 +0200
Subject: [PATCH] visual changes

---
 www/index.html | 113 +++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 95 insertions(+), 18 deletions(-)

diff --git a/www/index.html b/www/index.html
index 1c8c271..6bc2bd7 100644
--- a/www/index.html
+++ b/www/index.html
@@ -22,6 +22,7 @@
 	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 	<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
 	<script src="js/doodle3d-server.min.js" type="text/javascript"></script>
+	<!-- <script src="js/doodle3d-server.js" type="text/javascript"></script> -->
 
 	<!-- stylesheets -->
 	<!-- <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"> -->
@@ -49,7 +50,7 @@
 
 	<div role="main" class="ui-content">
 		<ul data-role="listview" id="boxeslist">
-			<li id="findItem"><a href="#find">Help me find my WiFi-Box...</a></li>
+			<li id="findItem"><a href="#find"><img src="img/icons/wifibox-disabled.jpg">Help me find my WiFi-Box...</a></li>
 		</ul>
 	</div>
 
@@ -62,17 +63,72 @@
 		<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
 		<h1></h1>
 	</div><!-- /header -->
-	<div role="main" class="ui-content">
-		<p class="intro"></p>
-		<ul data-role="listview">
-			<li id="drawItem"><a href="#draw">Draw</a></li>
-			<li id="printItem"><a href="#print">Print</a></li>
-			<li id="controlItem"><a href="#control">Control</a></li>
-			<li id="settingsItem" data-icon="gear"><a href="#settings">Settings</a></li>
-			<li id="updateItem"><a href="#update">Firmware Update<span class="ui-li-count"></span></a></li>
-			<li id="joinNetworkItem"><a href="#join_network">Join network </a></li>
-			<!-- <li><a href="#yourapp">Your app here?</a></li> -->
-		</ul>
+ <!-- data-role="fieldcontain" -->
+	<div role="main" class="ui-content"> 
+	
+		<p class="intro">You selected '<span class="infoWiFiBoxId">...</span>'. What would you like to do next?</p>
+
+		<div id="collapsibleApps" data-role="collapsible" data-role="fieldcontain">
+
+
+	        <h3>Apps</h3>
+			
+			<ul data-role="listview" data-split-icon="gear" data-split-theme="a">
+
+				<li id="drawItem">
+					<a href="#">
+					<img src="img/icons/sketch.png">
+					<h2>Doodle3D Sketch</h2>
+					<p>The classic 3D line-printing app which is installed on your WiFi-Box.</p>
+					</a>
+				</li>
+				<li id="transformItem">
+					<a href="https://transform.doodle3d.com">
+					<img src="img/icons/transform.png">
+					<h2>Doodle3D Transform</h2>
+					<p>Learn to design and 3D-print your own 3D models by drawing in 2D and transforming them into 3D.</p></a>
+				</li>
+
+			</ul>
+
+		</div>
+
+
+		<div id="collapsiblePrinter" data-role="collapsible" data-role="fieldcontain">
+
+	        <h3>Printer</h3>
+			
+			<ul data-role="listview" data-split-icon="gear" data-split-theme="a">
+				<li id="printItem"><a href="#print">
+			        <img src="img/icons/gcode.png" width="80" height="80">
+					<h2>Print<small></small></h2>
+					<p>a file was uploaded and is ready for printing</p>
+					<span class="ui-li-count">1</span></a>
+				</li>
+				<li id="controlItem"><a href="#control">Status &amp; Control</a></li>
+				<!-- <li id="settingsItem" data-icon="gear"><a href="#settings">Settings</a></li> -->
+				<li id="settingsItem" data-icon="gear"><a href="#settings">Settings</a></li>
+				<!-- <li id="settingsItem" data-icon="gear"><a href="#settings">Material settings</a></li> -->
+			</ul>
+		</div>
+
+		<div id="collapsibleWiFiBox" data-role="collapsible" data-role="fieldcontain">
+
+	        <h3>WiFi-Box</h3>
+			<ul data-role="listview" data-split-icon="gear" data-split-theme="a">
+				<!-- <li id="networksettingsItem" data-icon="gear"><a href="#networksettings">Network Settings</a></li> -->
+				<li id="joinNetworkItem"><a href="#join_network">Join network...</a></li>
+				<li id="updateItem"><a href="#update">Firmware Update<span class="ui-li-count"></span></a></li>
+				<!-- <li>
+					<div data-role="fieldcontain">
+						<label for="name">WiFi-Box ID:</label>
+				        <input type="text" id="txtWiFiBoxId" name="txtWiFiBoxId" data-mini="true" />
+					</div>
+				</li> -->
+				<!-- <li id="filemanagerItem"><a href="#">File Manager (Doodle3D Sketch)<span class="ui-li-count"></span></a></li> -->
+			</ul>
+		</div>
+		
 	</div><!-- /content -->
 </div><!-- /page -->
 
@@ -322,16 +378,16 @@
 
 		<ul id="lstPrint" data-role="listview" data-inset="true">
 	      <li class="boxItem">
-	        <a href="#">
+	        <a href="#boxes">
 	        <img src="img/icons/wifibox.jpg">
-	        <h2>...</h2>
+	        <h2>WiFi-Box</h2>
 	        <p>...</p>
 	        </a>
 	      </li>
 	      <li class="printerItem">
 	        <a href="#settings">
 	        <img src="img/icons/printers/blank.png">
-	        <h2>...</h2>
+	        <h2>3D-Printer</h2>
 	        <p>...</p>
 	        </a>
 	      </li>
@@ -353,19 +409,19 @@
 	        <a href="#printSettingsGcode">
 	        <img src="img/icons/gcode.png" width="80" height="80">
 	        <h2>GCODE File</h2>
-	        <p></p>
+	        <p>...</p>
 	        </a>
 	      </li>
 	    </ul>
 
-        <button id="btnPrint" class="ui-shadow ui-btn ui-corner-all">Print</button>
+        <input type="button" id="btnPrint" class="ui-shadow ui-btn ui-corner-all" value="Print">
     </div>
 </div>
 
 <div data-role="page" id="control">
 	<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
 	<div data-role="header">
-		<a href="../toolbar/" data-rel="back"
+		<a id="btnControlBack" href="#"
 			class="ui-btn ui-btn-left ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
 		<h1>Control</h1>    
 	</div><!-- /header -->
@@ -405,6 +461,26 @@ G1 X100 Y100 ; Move</pre></small></label>
 	</div>
 </div>
 
+<div data-role="page" id="networksettings">
+	<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
+	<div data-role="header">
+		<a href="../toolbar/" data-rel="back"
+			class="ui-btn ui-btn-left ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
+
+		<h1>Network Settings for ...</h1>
+
+	</div>
+
+	<div id="divSettings" role="main" class="ui-content">
+        <p class="intro">Network Settings... (under construction)</p>
+
+        <div data-role="fieldcontain">
+			<label for="name">WiFi-Box ID:</label>
+	        <input type="text" id="txtWiFiBoxId" name="txtWiFiBoxId" data-mini="true" />
+		</div>
+	</div>
+</div>
+
 <div data-role="page" id="settings">
 	<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
 	<div data-role="header">
@@ -414,6 +490,7 @@ G1 X100 Y100 ; Move</pre></small></label>
         
 	</div><!-- /header -->
 	<div id="divSettings" role="main" class="ui-content">
+        <!-- <img width="150" style="float:right" src="img/icons/printers/ultimaker2go.png"> -->
         <p class="intro">Use this page to select which 3D-printer is connected to your Doodle3D WiFi-Box. You can change settings per printer. Your settings are saved automatically.</p>
 
 		<label for="name">3D-printer model:</label>