root/sandbox/camptocamp/mobile/trunk/lib/iUI/samples/music.html @ 9961

Revision 9961, 5.5 KB (checked in by bbinet, 8 months ago)

svn export  http://iui.googlecode.com/svn/trunk iUI : Exported revision 333.
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3
4<html xmlns="http://www.w3.org/1999/xhtml">
5<head>
6<title>iUI Music Demo</title>
7<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
8<link rel="apple-touch-icon" href="../iui/iui-logo-touch-icon.png" />
9<meta name="apple-touch-fullscreen" content="YES" />
10<style type="text/css" media="screen">@import "../iui/iui.css";</style>
11<style type="text/css" media="screen">@import "../iui/t/ipdc/ipdc-theme.css";</style>
12<script type="application/x-javascript" src="../iui/iui.js"></script>
13<script type="text/javascript">
14    iui.animOn = true;
15</script>
16<!--
17<script type="application/x-javascript" src="http://10.0.1.2:1840/ibug.js"></script>
18-->
19</head>
20
21<body>
22    <div class="toolbar">
23        <h1 id="pageTitle"></h1>
24        <a id="backButton" class="button" href="#"></a>
25        <a class="button" href="#searchForm">Search</a>
26    </div>
27   
28    <ul id="home" title="Music" selected="true">
29        <li><a href="#artists">Artists</a></li>
30        <li><a href="#settings">Settings</a></li>
31        <li><a href="stats.php">Stats</a></li>
32        <li><a href="http://code.google.com/p/iui/" target="_self">About</a></li>
33        <li>Nothing</li>
34    </ul>
35    <ul id="artists" title="Artists">
36        <li class="group">B</li>
37        <li><a href="#TheBeatles">The Beatles</a></li>
38        <li><a href="#BelleSebastian">Belle &amp; Sebastian</a></li>
39        <li class="group">C</li>
40        <li><a href="#CrowdedHouse">Crowded House</a></li>
41        <li class="group">J</li>
42        <li><a href="#JennyLewis">Jenny Lewis</a></li>
43        <li><a href="#JohnMayer">John Mayer</a></li>
44        <li class="group">Z</li>
45        <li><a href="#Zero7">Zero 7</a></li>
46    </ul>
47    <ul id="TheBeatles" title="The Beatles">
48        <li><a href="#songs">Abbey Road</a></li>
49        <li><a href="#songs">Help!</a></li>
50        <li><a href="#songs">Rubber Soul</a></li>
51        <li><a href="#songs">Sgt. Pepper's</a></li>
52        <li><a href="#songs">White Album</a></li>
53    </ul>
54    <ul id="BelleSebastian" title="Belle &amp; Sebastian">
55        <li><a href="#songs">Boy With The Arab Strap</a></li>
56        <li><a href="#songs">Dear Catastrophe Waitress</a></li>
57        <li><a href="#songs">The Life Pursuit</a></li>
58    </ul>
59    <ul id="CrowdedHouse" title="Crowded House">
60        <li><a href="#songs">Crowded House</a></li>
61        <li><a href="#songs">Temple of Low Men</a></li>
62        <li><a href="#songs">Time on Earth</a></li>
63        <li><a href="#songs">Together Alone</a></li>
64        <li><a href="#songs">Woodface</a></li>
65    </ul>
66    <ul id="JennyLewis" title="Jenny Lewis">
67        <li><a href="#songs">White Rabbit Fur Coat</a></li>
68    </ul>
69    <ul id="JohnMayer" title="John Mayer">
70        <li><a href="#songs">Continuum</a></li>
71        <li><a href="#songs">Heavier Things</a></li>
72        <li><a href="#songs">Room for Squares</a></li>
73    </ul>
74    <ul id="Zero7" title="Zero 7">
75        <li><a href="#songs">The Garden</a></li>
76        <li><a href="#songs">Simple Things</a></li>
77        <li><a href="#songs">When it Falls</a></li>
78    </ul>
79    <ul id="songs" title="Songs">
80        <li><a href="#player">Song 1</a></li>
81        <li><a href="#player">Song 2</a></li>
82        <li><a href="#player">Song 3</a></li>
83        <li><a href="#player">Song 4</a></li>
84        <li><a href="#player">Song 5</a></li>
85        <li><a href="#player">Song 6</a></li>
86        <li><a href="#player">Song 7</a></li>
87        <li><a href="#player">Song 8</a></li>
88        <li><a href="#player">Song 9</a></li>
89        <li><a href="#player">Song 10</a></li>
90        <li><a href="#player">Song 11</a></li>
91    </ul>
92   
93    <div id="player" class="panel" title="Now Playing">
94        <h2>If this weren't just a demo, you might be hearing a song...</h2>
95    </div>
96   
97    <form id="searchForm" class="dialog" action="search.php">
98        <fieldset>
99            <h1>Music Search</h1>
100            <a class="button leftButton" type="cancel">Cancel</a>
101            <a class="button blueButton" type="submit">Search</a>
102           
103            <label>Artist:</label>
104            <input id="artist" type="text" name="artist"/>
105            <label>Song:</label>
106            <input type="text" name="song"/>
107        </fieldset>
108    </form>
109
110    <div id="settings" title="Settings" class="panel">
111        <h2>Playback</h2>
112        <fieldset>
113            <div class="row">
114                <label>Repeat</label>
115                <div class="toggle" onclick=""><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
116            </div>
117            <div class="row">
118                <label>Shuffle</label>
119                <div class="toggle" onclick="" toggled="true"><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
120            </div>
121        </fieldset>
122       
123        <h2>User</h2>
124        <fieldset>
125            <div class="row">
126                <label>Name</label>
127                <input type="text" name="userName" value="johnappleseed"/>
128            </div>
129            <div class="row">
130                <label>Password</label>
131                <input type="password" name="password" value="delicious"/>
132            </div>
133            <div class="row">
134                <label>Confirm</label>
135                <input type="password" name="password" value="delicious"/>
136            </div>
137        </fieldset>
138    </div>
139</body>
140</html>
Note: See TracBrowser for help on using the browser.