<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>RoboSmart</title>
</head>
<body>
<div class="app">
<h1>RoboSmart</h1>
<div id="mainPage">
<ul id="deviceList">
</ul>
<button id="refreshButton">Refresh</button>
</div>
<div id="detailPage">
<!-- Topcoat Switch would look nicer http://topcoat.io/topcoat/topcoat-mobile-light.html#switch -->
<div>
<input type="checkbox" id="lightSwitch" name="lightSwitch" class="switch" />
<label for="lightSwitch">Switch</label>
</div>
<div class="rangeDiv">
<input type="range" min="0" max="255" value="0" name="dimmer" id="dimmer" class="topcoat-range"/>
</div>
<button id="disconnectButton">Disconnect</button>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>