Tizen 2.1 base
[samples/web/ExercisePlanner.git] / index.html
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8" />
6 <meta name="description" content="Alerts" />
7 <meta name="viewport" content="width=480, user-scalable=no" />
8
9 <title>ExercisePlanner</title>
10
11 <script src="/usr/share/tizen-web-ui-fw/latest/js/jquery.js"></script>
12 <script src="/usr/share/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
13 <script src="/usr/share/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
14         data-framework-theme="tizen-white"></script>
15
16 <script src="./js/UI.js"></script>
17 <script src="./js/UI.simpleTemplate.js"></script>
18 <script src="./js/ext.jqMobile.js"></script>
19 <script src="./js/GraphSchedule.js"></script>
20
21 <script src="./js/app.js"></script>
22 <script src="./js/app.alarms.js"></script>
23 <script src="./js/app.timeRange.js"></script>
24 <script src="./js/app.alarmsGenerating.js"></script>
25 <script src="./js/app.onAlarm.js"></script>
26 <script type="text/javascript" src="./js/main.js"></script>
27
28 <link rel="stylesheet" type="text/css" href="./css/style.css" />
29 <link rel="stylesheet" type="text/css" href="./css/GraphSchedule.css" />
30 </head>
31
32 <body>
33         <div data-role="page" id="one" data-add-back-btn="footer" data-footer-exist="true">
34                 <div data-role="content">
35                         <div class="screen">
36                                 <div id="logo">Exercise Planner</div>
37                                 <div id="status"></div>
38                                 <div class="schedule"></div>
39                                 <div id="communicate"></div>
40                                 <div id="sentence"></div>
41                                 <div id="signature"></div>
42                         </div>
43                 </div>
44
45                 <div data-role="footer" data-position="fixed">
46                         <div data-role="tabbar" id="mainControl" data-style="tabbar">
47                                 <ul>
48                                         <li><a href="#" id="startStop">stop training</a></li>
49                                         <li><a href="#two" id="options">options</a></li>
50                                 </ul>
51                         </div>
52
53                         <div id="onAlertControl" data-style="tabbar"
54                                 style="display: none;">
55                                 <ul>
56                                         <li><a href="#" id="ok">OK</a></li>
57                                         <li><a href="#" id="wait">Wait</a></li>
58                                         <li><a href="#" id="todayOffAll">Today off all</a></li>
59                                 </ul>
60                         </div>
61                 </div>
62         </div>
63
64         <div data-role="page" id="two" data-add-back-btn="footer" data-footer-exist="true">
65                 <div data-role="header" data-position="fixed">
66                         <h1>ExercisePlanner &gt; options</h1>
67                 </div>
68
69                 <div data-role="content">
70                         <div class="myContent">
71
72                                 <div data-role="fieldcontain" class="frequency">
73                                         <div>Frequency</div>
74                                         <fieldset data-role="controlgroup" data-type="horizontal" id="frequency">
75                                                 <input type="radio" name="radioFrequency"
76                                                         data-icon="segment-titlestyle-segonly" id="freq1" value="1" />
77                                                 <label for="freq1">1</label>
78                                                 <input type="radio" name="radioFrequency"
79                                                         data-icon="segment-titlestyle-segonly" id="freq2" value="2" />
80                                                 <label for="freq2">2</label>
81                                                 <input type="radio" name="radioFrequency"
82                                                         data-icon="segment-titlestyle-segonly" id="freq3" value="3" />
83                                                 <label for="freq3">3</label>
84                                                 <input type="radio" name="radioFrequency"
85                                                         data-icon="segment-titlestyle-segonly" id="freq4" value="4" />
86                                                 <label for="freq4">4</label>
87                                                 <input type="radio" name="radioFrequency"
88                                                         data-icon="segment-titlestyle-segonly" id="freq5" value="5" />
89                                                 <label for="freq5">5</label>
90                                         </fieldset>
91                                 </div>
92
93                                 <div class="scheduleOptions"></div>
94
95                                 <div data-role="tabbar" data-style="tabbar" class="typeOfPeriods">
96                                         <ul>
97                                                 <li id="workdaysType"><a>workday</a></li>
98                                                 <li id="weekendType"><a>weekend</a></li>
99                                         </ul>
100                                 </div>
101
102                                 <div data-role="fieldcontain" class="strength">
103                                         <div>Strength</div>
104                                         <fieldset data-role="controlgroup" data-type="horizontal"
105                                                 id="strength">
106                                                 <input type="radio" name="radioStrength"
107                                                         data-icon="segment-titlestyle-segonly" id="stre1" value="1" />
108                                                 <label for="stre1">1</label>
109                                                 <input type="radio" name="radioStrength"
110                                                         data-icon="segment-titlestyle-segonly" id="stre2" value="2" />
111                                                 <label for="stre2">2</label>
112                                                 <input type="radio" name="radioStrength"
113                                                         data-icon="segment-titlestyle-segonly" id="stre3" value="3" />
114                                                 <label for="stre3">3</label>
115                                                 <input type="radio" name="radioStrength"
116                                                         data-icon="segment-titlestyle-segonly" id="stre4" value="4" />
117                                                 <label for="stre4">4</label>
118                                                 <input type="radio" name="radioStrength"
119                                                         data-icon="segment-titlestyle-segonly" id="stre5" value="5" />
120                                                 <label for="stre5">5</label>
121                                         </fieldset>
122                                 </div>
123
124                                 <div class="increasingStrength">
125                                         <input type="checkbox" name="tizen-check1-1"
126                                                 id="increasingStrength" />
127                                         <label for="increasingStrength">progressive effort</label>
128                                 </div>
129
130                                 <a data-role="button" data-icon="plus" id="addTimeRange" data-inline="false">add time</a>
131                                 <ul data-role="swipelist" id="availableTime"></ul>
132
133                         </div>
134                 </div>
135
136                 <div data-role="footer" data-position="fixed">
137                         <div data-role="tabbar" data-style="toolbar">
138                                 <ul>
139                                         <li><a href="#selectExercises">select workouts</a></li>
140                                 </ul>
141                         </div>
142                 </div>
143         </div>
144
145         <div data-role="page" id="selectExercises" data-add-back-btn="footer" data-footer-exist="true">
146                 <div data-role="header" data-position="fixed">
147                         <h2>ExercisePlanner &gt; select workouts</h2>
148                 </div>
149
150                 <div data-role="content">
151                         <div class="optionsExercises">
152                                 <div>Select workouts</div>
153                                 <ul data-role="listview" id="exercises">
154                                         <li class="ui-li-1line-toggle"><span class="ui-li-text-main">bends</span>
155                                                 <div data-role="toggleswitch"></div></li>
156
157                                         <li class="ui-li-1line-btn2"><span class="ui-li-text-main">custom</span>
158                                                 <div data-role="button" data-inline="true" data-icon="plus"
159                                                         data-style="circle"></div></li>
160                                 </ul>
161                                 <a data-role="button" data-icon="plus" href="#customExercises">add
162                                         custom workout</a>
163                         </div>
164                 </div>
165
166                 <div data-role="footer" data-position="fixed"></div>
167         </div>
168
169         <div data-role="page" id="customExercises" data-add-back-btn="footer" data-footer-exist="true">
170                 <div data-role="header" data-position="fixed">
171                         <h1>ExercisePlanner &gt; add custom workout</h1>
172                 </div>
173
174                 <div data-role="content">
175                         <div class="newExerciseName">
176                                 <div>Enter workout name:</div>
177                                 <input data-role="input" type="text" name="newExercise"
178                                         id="newExerciseName" />
179                                 <input data-role="button" id="btnNewExercise" data-inline="true" type="button"
180                                         value="add"/>
181                         </div>
182                 </div>
183
184                 <div data-role="footer" data-position="fixed"></div>
185         </div>
186
187         <div data-role="page" id="rangesOfTimes" data-add-back-btn="footer" data-footer-exist="true">
188                 <div data-role="header">
189                         <h1>add time</h1>
190                 </div>
191
192                 <div data-role="content">
193                         <div>
194                                 <ul class="times">
195                                         <li class="ui-li-3-2-2">Start: <span class="ui-li-text-main">
196                                                         <input type="time" name="dateStart" id="startTime"
197                                                                 data-format="H" />
198                                         </span>hour
199                                         </li>
200                                         <li class="ui-li-3-2-2">Duration: <span class="ui-li-text-main">
201                                                         <input type="time" name="duration" id="duration" data-format="H" />
202                                         </span> hours
203                                         </li>
204                                 </ul>
205
206                                 <fieldset data-role="controlgroup" class="selectPeriodType">
207                                         <legend>Choose a type of period:</legend>
208                                         <input type="radio" name="periodType" id="periodType1"
209                                                 value="everyday" checked="checked" />
210                                         <label for="periodType1">everyday</label>
211
212                                         <input type="radio" name="periodType" id="periodType2"
213                                                 value="weekend" />
214                                         <label for="periodType2">weekend</label>
215
216                                         <input type="radio" name="periodType" id="periodType3"
217                                                 value="workday" />
218                                         <label for="periodType3">workday</label>
219                                 </fieldset>
220                                 <div class="enableOption">
221                                         <span>Enabled</span>
222                                         <select id="formEnablePeriod" data-role="slider">
223                                                 <option value="off"></option>
224                                                 <option value="on"></option>
225                                         </select>
226                                 </div>
227                         </div>
228
229                         <input data-role="button" data-inline="true" type="button"
230                                 id="updateTime" value="add" />
231                 </div>
232
233                 <div data-role="footer"></div>
234         </div>
235
236 </body>
237 </html>