views/mobile.jade
!!! 5
html
	head
		title= title
		meta(name="viewport", content="width=device-width", initial-scale="1")
		meta(name="apple-mobile-web-app-capable", content="yes")
		
		link(rel='stylesheet', href='js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css')
		
		script(src="/socket.io/socket.io.js")
		script(src="js/jquery-1.8.3.js")
		script(src="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js")
		script(src="js/mobile-functions.js")
		
	body
		div(data-role="page", style="background: #C8C8C8;")
			div(data-role="header", data-fullscreen="true")
				h1 Robot Control
			
			div(data-role="content", style="text-align: center;")
				div(data-role="fieldcontain")
					fieldset(data-role="controlgroup", data-type="horizontal", data-mini="true")
						input(type="radio", id="drive_auto", name="drive_mode")
						label(for="drive_auto") Auto
						input(type="radio", id="drive_manual", name="drive_mode", checked="checked")
						label(for="drive_manual") Manual
						
				div(data-role="fieldcontain")	
					fieldset(data-role="controlgroup", data-type="horizontal", data-mini="true")
						input(type="radio", id="scanner-left", name="scanner_mode")
						label(for="scanner-left") Left
						input(type="radio", id="scanner-center", name="scanner_mode", checked="checked")
						label(for="scanner-center") Center
						input(type="radio", id="scanner-right", name="scanner_mode")
						label(for="scanner-right") Right
						input(type="radio", id="scanner-continuous", name="scanner_mode")
						label(for="scanner-continuous") Continuous
				
				form(data-mini="true")
						input(type="range", name="slider", id="speed", value="0", min="0", max="9", data-highlight="true")
				
				div(data-role="fieldcontain")	
					fieldset(data-role="controlgroup", data-type="horizontal")
							input(type="radio", id="turn-left", name="move")
							label(for="turn-left", data-icon="arrow-l") Turn Left
							input(type="radio", id="turn-right", name="move")
							label(for="turn-right", data-icon="arrow-r", data-iconpos="right") Turn Right	
				
				div(data-role="fieldcontain")	
					fieldset(data-role="controlgroup", data-type="horizontal")
							input(type="radio", id="forward", name="move", data-icon="arrow-u")
							label(for="forward") Forward
							input(type="radio", id="stop", name="move", checked="checked")
							label(for="stop") Stop
							input(type="radio", id="back", name="move", data-icon="arrow-d")
							label(for="back") Back
				
				div(style="background-color:#FFFFCC; border: solid; border-width:1px;")
					#robot-status Robot Status
					#robot-info Robot Info
					#distance-info Distance Info
				
				div(style="text-align: left;")
					select(name="flip-1", id="robot-data", data-role="slider", data-mini="true", class="ui-btn-left")
						option(value="off") Off
						option(value="on") On