<!DOCTYPE html>
<html>
<head>
<title>Android Holo Light Theme for JQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/3875067/holo-light/themes/android-holo-light.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div class="preview ui-shadow swatch">
<div class="ui-header ui-bar-a" data-swatch="a" data-theme="a" data-form="ui-bar-a" data-role="header" role="banner">
<a class="ui-btn-left ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-a" data-iconpos="notext" data-theme="a" data-role="button" data-icon="home" title=" Home ">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text"> Home </span>
<span data-form="ui-icon" class="ui-icon ui-icon-home ui-icon-shadow"></span>
</span>
</a>
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Holo Light Demo</h1>
<a class="ui-btn-right ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-a" data-iconpos="notext" data-theme="a" data-role="button" data-icon="grid" title=" Navigation ">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text"> Navigation </span>
<span data-form="ui-icon" class="ui-icon ui-icon-grid ui-icon-shadow"></span>
</span>
</a>
</div>
<div class="ui-content ui-body-a" data-theme="a" data-form="ui-body-a" data-role="content" role="main">
<p>
Follow me on <a class="ui-link" data-form="ui-body-a" href="http://twitter.com/enathu" data-theme="a">Twitter</a>.
</p>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<li data-swatch="a" class="ui-li ui-li-divider ui-btn ui-bar-a ui-corner-top" data-role="list-divider" role="" data-form="ui-bar-a">List Header</li>
<input type="radio" name="radio-choice-a" id="radio-choice-1-a" value="choice-1" checked="checked" />
<label for="radio-choice-1-a" data-form="ui-btn-up-a" class="ui-corner-none">Radio 1</label>
<input type="radio" name="radio-choice-a" id="radio-choice-2-a" value="choice-2" />
<label for="radio-choice-2-a" data-form="ui-btn-up-a">Radio 2</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" checked="checked" />
<label for="checkbox-1" data-form="ui-btn-up-a">Checkbox</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="radio-view-a" id="radio-view-a-a" value="list" checked="checked"/>
<label for="radio-view-a-a" data-form="ui-btn-up-a">On</label>
<input type="radio" name="radio-view-a" id="radio-view-b-a" value="grid" />
<label for="radio-view-b-a" data-form="ui-btn-up-a">Off</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<select name="select-choice-1" id="select-choice-1" data-native-menu="false" data-theme="a" data-form="ui-btn-up-a">
<option value="standard">Option 1</option>
<option value="rush">Option 2</option>
<option value="express">Option 3</option>
<option value="overnight">Option 4</option>
</select>
</div>
<input type="text" value="Text Input" class="input" data-form="ui-body-a" />
<div data-role="fieldcontain">
<input type="range" name="slider" value="50" min="0" max="100" data-form="ui-body-a" data-theme="a" data-highlight="true" />
</div>
<button data-icon="plus" data-theme="a" data-form="ui-btn-up-a">This is cool!</button>
</div>
</div>
</body>
</html>