add the basic view of the list page and the text editor page

OfficeJS-Mobile/index.html

@@ -39,9 +39,15 @@
 			 
 		<!--Tools Page-->
 		<div data-role="page" id="tools">
-		 
+		   
 		     <div data-role="header">
-			  <h1>Your list of Docs</h1>
+			  <a class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l" href="#home" data-theme="a">
+			  <span class="ui-btn-inner ui-btn-corner-all">
+			  <span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span>
+			  <span class="ui-btn-text">Back</span>
+			  </span>
+			  </a>
+			  <h1>Tools</h1>
 		     </div>
 			 
 		     <div data-role="content" style="padding: 15px">
@@ -76,10 +82,81 @@
 			    </li>
 			</ul>
 		    </div>
-		 
 		</div>
 		
 
-	 
+	 	<!--List Page-->
+		<div data-role="page" id="list">
+		 
+		     <div data-role="header">
+			  <a class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l" href="#tools" data-theme="a">
+			  <span class="ui-btn-inner ui-btn-corner-all">
+			  <span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span>
+			  <span class="ui-btn-text">Back</span>
+			  </span>
+			  </a>
+			  <h1>Your list of Docs</h1>
+		     </div>
+			 
+		     <div data-role="content" style="padding: 15px">
+			   <ul class="ui-listview" data-role="listview">
+				<li class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c">
+				<div class="ui-btn-inner ui-li">
+				<div class="ui-btn-text">
+				<a class="ui-link-inherit" href="#text">
+				<h3 class="ui-li-heading">name</h3>
+				<p class="ui-li-desc">Text Editor</p>
+				</a>
+				</div>
+				<span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
+				</div>
+				</li>
+			   </ul>
+		    </div>
+		 
+		</div>
+
+
+		<!--Text Page-->
+		<div data-role="page" id="text">
+		     
+		     <div data-role="header">
+			  <a class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l" href="#tools" data-theme="a">
+			  <span class="ui-btn-inner ui-btn-corner-all">
+			  <span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span>
+			  <span class="ui-btn-text">Back</span>
+			  </span>
+			  </a>
+			  <h1>Text Editor</h1>
+		     </div>
+			 
+		     <div data-role="content" style="padding: 15px">
+			 <div data-role="content" style="padding: 15px">
+				<div data-role="fieldcontain">
+				    <fieldset data-role="controlgroup">
+					<label for="textinput6">
+					    Name
+					</label>
+					<input id="textinput6" placeholder="" value="" type="text">
+				    </fieldset>
+				</div>
+				<div data-role="fieldcontain">
+				    <fieldset data-role="controlgroup">
+					<label for="textarea2">
+					    Content
+					</label>
+					<textarea id="textarea2" placeholder="">
+					</textarea>
+				    </fieldset>
+				</div>
+				<a data-role="button" data-transition="fade" data-theme="b" href="#page1">
+				    Save
+				</a>
+			    </div>
+		    </div>
+		 
+		</div>
+
+
 	</body>
 </html>