index.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2 <!--
   3 * Copyright (c) 2013, Intel Corporation.
   4 *
   5 * This program is licensed under the terms and conditions of the
   6 * Apache License, version 2.0.  The full text of the Apache License is at
   7 * http://www.apache.org/licenses/LICENSE-2.0
   8 *
   9 -->
  10 <html>
  11 <head>
  12     <meta charset="utf-8" />
  13     <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> -->
  14
  15     <title>Settings</title>
  16
  17     <link rel="stylesheet" href="./css/jquery.mobile-1.3.1.css"/>
  18     <script type="text/javascript" src="./js/jquery-1.10.1.js"></script>
  19     <script type="text/javascript" src="./js/jquery.mobile-1.3.1.js"></script>
  20     <script type="text/javascript" src="./js/main.js"></script>
  21     <script type="text/javascript" src="./js/utils.js"></script>
  22     <script type="text/javascript" src="./js/websocket.js"></script>
  23     <script type="text/javascript" src="./js/api-wifi.js"></script>
  24     <script type="text/javascript" src="./js/api-bluetooth.js"></script>
  25     <script type="text/javascript" src="./js/api-datetime.js"></script>
  26     <script type="text/javascript" src="./js/panel-wifi.js"></script>
  27     <script type="text/javascript" src="./js/panel-bluetooth.js"></script>
  28     <script type="text/javascript" src="./js/panel-datetime.js"></script>
  29     <link rel="stylesheet" href="./css/style.css" />
  30 </head>
  31
  32 <body>
  33         <!-- Settings -->
  34     <div data-role="page" id="main">
  35         <div data-role="header" data-position="fixed">
  36                 <a href="" id="quit" data-icon="back">Quit</a>
  37             <h1>Settings</h1>
  38         </div><!-- /header -->
  39
  40                 <div data-role="collapsible-set">
  41                     <div data-role="collapsible" id="col_connectivity" data-collapsed="false">
  42                         <h3>Connectivity</h3>
  43                                 <div data-role="content">
  44                                     <ul data-role="listview">
  45                                 <li>
  46                                     <a href="#page_wifi" id="button_wifi_settings">Wi-Fi</a>
  47                                 </li>
  48                                 <li>
  49                                     <a href="#page_bluetooth" id="button_bluetooth_settings">Bluetooth</a>
  50                                 </li>
  51                                     </ul>
  52                                 </div>
  53                     </div>
  54                 </div>
  55
  56                 <div data-role="collapsible-set">
  57                     <div data-role="collapsible" id="col_system" data-collapsed="false">
  58                         <h3>System</h3>
  59                                 <div data-role="content">
  60                                     <ul data-role="listview">
  61                                 <li>
  62                                     <a href="#page_datetime" id="button_datetime_settings">Date and Time</a>
  63                                 </li>
  64                                     </ul>
  65                                 </div>
  66                     </div>
  67                 </div>
  68         </div>
  69
  70         <!-- Wi-Fi Settings -->
  71         <div data-role="page" id="page_wifi">
  72                 <div data-role="header" data-position="fixed">
  73                         <a href="#main" data-icon="back">Back</a>
  74                         <h1>Wi-Fi</h1>
  75                 </div>
  76
  77                 <div data-role="content">
  78             <div class="adapter-info">
  79                 <div class="adapter-name">
  80                     <div id="label_wifi_adapter"></div>
  81                 </div>
  82             </div>
  83             <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset">
  84                 <li data-role="fieldcontain">
  85                     <label for="toggle_wifi" class="ui-slider">WiFi</label>
  86                     <select data-role="slider" name="toggle_wifi" id="toggle_wifi" class="ui-slider-switch">
  87                         <option value="off">Off</option>
  88                         <option value="on">On</option>
  89                     </select>
  90                 </li>
  91             </ul>
  92             <div id="wifi_networks">
  93                 <div><p>Available Networks</p></div>
  94                 <ul data-role="listview" id="listview_network_known" data-inset="true" class="device-list ui-listview"></ul>
  95                 <ul data-role="listview" id="listview_network_available" data-inset="true" class="device-list ui-listview"></ul>
  96                 <div data-role="button" id="button_wifi_refresh">Refresh</div>
  97                 <div data-role="button" id="button_wifi_add">Add</div>
  98             </div>
  99                 </div>
 100         </div>
 101
 102     <!-- WiFi Network Info -->
 103     <div data-role="page" id="page_wifi_detail">
 104         <div data-role="header" data-position="fixed">
 105             <a href="#page_wifi" data-icon="back">Back</a>
 106             <h1>Network Info</h1>
 107         </div>
 108
 109         <div data-role="content" id="page_wifi_detail_content">
 110         </div>
 111     </div>
 112
 113     <!-- WiFi Add New Network -->
 114     <div data-role="page" id="page_wifi_add">
 115         <div data-role="header" data-position="fixed">
 116             <a href="#page_wifi" id="page_wifi_button_back" data-icon="back">Back</a>
 117             <h1>Add Network</h1>
 118             <a href="#" id="page_wifi_button_add" data-icon="plus">Add</a>
 119         </div>
 120
 121         <div data-role="content" id="page_wifi_add_content">
 122             <label for="input_wifi_ssid">SSID:</label>
 123             <input type="text" name="name" id="input_wifi_ssid" value="" />
 124
 125             <label for="select_wifi_security" class="select">Security:</label>
 126             <ul data-role="listview" data-inset="true" class="device-list ui-listview">
 127                 <li>
 128                     <select name="select_wifi_security" id="select_wifi_security">
 129                         <option value="None">None</option>
 130                         <option value="WEP">WEP</option>
 131                         <option value="WPA">WPA</option>
 132                         <option value="WPA2">WPA2</option>
 133                         <option value="WPA_Enterprise">WPA Enterprise</option>
 134                         <option value="WPA2_Enterprise">WPA2 Enterprise</option>
 135                     </select>
 136                 </li>
 137                 <li id="page_wifi_password">
 138                     <label for="input_wifi_password">Password:</label>
 139                     <input type="password" name="name" id="input_wifi_password" value="" />
 140                 </li>
 141             </ul>
 142         </div>
 143     </div>
 144
 145         <!-- Bluetooth Settings -->
 146         <div data-role="page" id="page_bluetooth">
 147                 <div data-role="header" data-position="fixed">
 148                         <a href="#main" data-icon="back">Back</a>
 149                         <h1>Bluetooth</h1>
 150                 </div>
 151
 152                 <div data-role="content">
 153                 <div class="adapter-info">
 154                     <div class="adapter-name">
 155                         <div id="label_bluetooth_adapter"></div>
 156                     </div>
 157                 </div>
 158                         <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset">
 159                                 <li data-role="fieldcontain">
 160                                         <label for="toggle_bluetooth" class="ui-slider">Bluetooth</label>
 161                                         <select data-role="slider" name="toggle_bluetooth" id="toggle_bluetooth" class="ui-slider-switch">
 162                                                 <option value="off">Off</option>
 163                                                 <option value="on">On</option>
 164                                         </select>
 165                                 </li>
 166                         </ul>
 167                         <div id="bluetooth_devices">
 168                             <div><p>Available Devices</p></div>
 169                 <ul data-role="listview" id="listview_device_paired" data-inset="true" class="device-list ui-listview"></ul>
 170                     <ul data-role="listview" id="listview_device_available" data-inset="true" class="device-list ui-listview"></ul>
 171                             <div data-role="button" id="button_bluetooth_scan">Scan</div>
 172                         </div>
 173                 </div>
 174         </div>
 175
 176     <!-- Bluetooth Device Info -->
 177     <div data-role="page" id="page_bluetooth_detail">
 178         <div data-role="header" data-position="fixed">
 179             <a href="#page_bluetooth" data-icon="back">Back</a>
 180             <h1>Device Info</h1>
 181         </div>
 182
 183         <div data-role="content" id="page_bluetooth_detail_content">
 184         </div>
 185     </div>
 186
 187         <!--  Date and Time Settings -->
 188         <div data-role="page" id="page_datetime">
 189                 <div data-role="header" data-position="fixed">
 190                         <a href="#main" id="page_datetime_button_back" data-icon="back">Back</a>
 191                         <h1>Date and Time</h1>
 192                 </div>
 193
 194                 <div data-role="content">
 195                         <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset">
 196                                 <li data-role="fieldcontain">
 197                                         <label for="input_time">Time:</label>
 198                                         <input type="time" data-clear-btn="false" name="input_time" id="input_time" value="">
 199                                 </li>
 200                         </ul>
 201             <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset">
 202                 <li data-role="fieldcontain">
 203                     <label for="input_date">Date:</label>
 204                     <input type="date" data-clear-btn="false" name="input_date" id="input_date" value="">
 205                 </li>
 206             </ul>
 207                         <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset">
 208                                 <li data-role="fieldcontain">
 209                                         <label for="select_timezone" class="select">Time zone:</label>
 210                                         <select name="select_timezone" id="select_timezone">
 211                                                 <option value="Pacific/Midway">(GMT-11:00) Midway Island, Samoa</option>
 212                                                 <option value="America/Adak">(GMT-10:00) Hawaii-Aleutian</option>
 213                                                 <option value="Etc/GMT+10">(GMT-10:00) Hawaii</option>
 214                                                 <option value="Pacific/Marquesas">(GMT-09:30) Marquesas Islands</option>
 215                                                 <option value="Pacific/Gambier">(GMT-09:00) Gambier Islands</option>
 216                                                 <option value="America/Anchorage">(GMT-09:00) Alaska</option>
 217                                                 <option value="America/Ensenada">(GMT-08:00) Tijuana, Baja California</option>
 218                                                 <option value="Etc/GMT+8">(GMT-08:00) Pitcairn Islands</option>
 219                                                 <option value="America/Los_Angeles">(GMT-08:00) Pacific Time (US & Canada)</option>
 220                                                 <option value="America/Denver">(GMT-07:00) Mountain Time (US & Canada)</option>
 221                                                 <option value="America/Chihuahua">(GMT-07:00) Chihuahua, La Paz, Mazatlan</option>
 222                                                 <option value="America/Dawson_Creek">(GMT-07:00) Arizona</option>
 223                                                 <option value="America/Belize">(GMT-06:00) Saskatchewan, Central America</option>
 224                                                 <option value="America/Cancun">(GMT-06:00) Guadalajara, Mexico City, Monterrey</option>
 225                                                 <option value="Chile/EasterIsland">(GMT-06:00) Easter Island</option>
 226                                                 <option value="America/Chicago">(GMT-06:00) Central Time (US & Canada)</option>
 227                                                 <option value="America/New_York">(GMT-05:00) Eastern Time (US & Canada)</option>
 228                                                 <option value="America/Havana">(GMT-05:00) Cuba</option>
 229                                                 <option value="America/Bogota">(GMT-05:00) Bogota, Lima, Quito, Rio Branco</option>
 230                                                 <option value="America/Caracas">(GMT-04:30) Caracas</option>
 231                                                 <option value="America/Santiago">(GMT-04:00) Santiago</option>
 232                                                 <option value="America/La_Paz">(GMT-04:00) La Paz</option>
 233                                                 <option value="Atlantic/Stanley">(GMT-04:00) Faukland Islands</option>
 234                                                 <option value="America/Campo_Grande">(GMT-04:00) Brazil</option>
 235                                                 <option value="America/Goose_Bay">(GMT-04:00) Atlantic Time (Goose Bay)</option>
 236                                                 <option value="America/Glace_Bay">(GMT-04:00) Atlantic Time (Canada)</option>
 237                                                 <option value="America/St_Johns">(GMT-03:30) Newfoundland</option>
 238                                                 <option value="America/Araguaina">(GMT-03:00) UTC-3</option>
 239                                                 <option value="America/Montevideo">(GMT-03:00) Montevideo</option>
 240                                                 <option value="America/Miquelon">(GMT-03:00) Miquelon, St. Pierre</option>
 241                                                 <option value="America/Godthab">(GMT-03:00) Greenland</option>
 242                                                 <option value="America/Argentina/Buenos_Aires">(GMT-03:00) Buenos Aires</option>
 243                                                 <option value="America/Sao_Paulo">(GMT-03:00) Brasilia</option>
 244                                                 <option value="America/Noronha">(GMT-02:00) Mid-Atlantic</option>
 245                                                 <option value="Atlantic/Cape_Verde">(GMT-01:00) Cape Verde Is.</option>
 246                                                 <option value="Atlantic/Azores">(GMT-01:00) Azores</option>
 247                                                 <option value="Europe/Belfast">(GMT) Greenwich Mean Time : Belfast</option>
 248                                                 <option value="Europe/Dublin">(GMT) Greenwich Mean Time : Dublin</option>
 249                                                 <option value="Europe/Lisbon">(GMT) Greenwich Mean Time : Lisbon</option>
 250                                                 <option value="Europe/London">(GMT) Greenwich Mean Time : London</option>
 251                                                 <option value="Africa/Abidjan">(GMT) Monrovia, Reykjavik</option>
 252                                                 <option value="Europe/Amsterdam">(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna</option>
 253                                                 <option value="Europe/Belgrade">(GMT+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague</option>
 254                                                 <option value="Europe/Brussels">(GMT+01:00) Brussels, Copenhagen, Madrid, Paris</option>
 255                                                 <option value="Africa/Algiers">(GMT+01:00) West Central Africa</option>
 256                                                 <option value="Africa/Windhoek">(GMT+01:00) Windhoek</option>
 257                                                 <option value="Asia/Beirut">(GMT+02:00) Beirut</option>
 258                                                 <option value="Africa/Cairo">(GMT+02:00) Cairo</option>
 259                                                 <option value="Asia/Gaza">(GMT+02:00) Gaza</option>
 260                                                 <option value="Africa/Blantyre">(GMT+02:00) Harare, Pretoria</option>
 261                                                 <option value="Asia/Jerusalem">(GMT+02:00) Jerusalem</option>
 262                                                 <option value="Europe/Minsk">(GMT+02:00) Minsk</option>
 263                                                 <option value="Asia/Damascus">(GMT+02:00) Syria</option>
 264                                                 <option value="Europe/Moscow">(GMT+03:00) Moscow, St. Petersburg, Volgograd</option>
 265                                                 <option value="Africa/Addis_Ababa">(GMT+03:00) Nairobi</option>
 266                                                 <option value="Asia/Tehran">(GMT+03:30) Tehran</option>
 267                                                 <option value="Asia/Dubai">(GMT+04:00) Abu Dhabi, Muscat</option>
 268                                                 <option value="Asia/Yerevan">(GMT+04:00) Yerevan</option>
 269                                                 <option value="Asia/Kabul">(GMT+04:30) Kabul</option>
 270                                                 <option value="Asia/Yekaterinburg">(GMT+05:00) Ekaterinburg</option>
 271                                                 <option value="Asia/Tashkent">(GMT+05:00) Tashkent</option>
 272                                                 <option value="Asia/Kolkata">(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi</option>
 273                                                 <option value="Asia/Katmandu">(GMT+05:45) Kathmandu</option>
 274                                                 <option value="Asia/Dhaka">(GMT+06:00) Astana, Dhaka</option>
 275                                                 <option value="Asia/Novosibirsk">(GMT+06:00) Novosibirsk</option>
 276                                                 <option value="Asia/Rangoon">(GMT+06:30) Yangon (Rangoon)</option>
 277                                                 <option value="Asia/Bangkok">(GMT+07:00) Bangkok, Hanoi, Jakarta</option>
 278                                                 <option value="Asia/Krasnoyarsk">(GMT+07:00) Krasnoyarsk</option>
 279                                                 <option value="Asia/Hong_Kong">(GMT+08:00) Beijing, Chongqing, Hong Kong, Urumqi</option>
 280                                                 <option value="Asia/Irkutsk">(GMT+08:00) Irkutsk, Ulaan Bataar</option>
 281                                                 <option value="Australia/Perth">(GMT+08:00) Perth</option>
 282                                                 <option value="Australia/Eucla">(GMT+08:45) Eucla</option>
 283                                                 <option value="Asia/Tokyo">(GMT+09:00) Osaka, Sapporo, Tokyo</option>
 284                                                 <option value="Asia/Seoul">(GMT+09:00) Seoul</option>
 285                                                 <option value="Asia/Yakutsk">(GMT+09:00) Yakutsk</option>
 286                                                 <option value="Australia/Adelaide">(GMT+09:30) Adelaide</option>
 287                                                 <option value="Australia/Darwin">(GMT+09:30) Darwin</option>
 288                                                 <option value="Australia/Brisbane">(GMT+10:00) Brisbane</option>
 289                                                 <option value="Australia/Hobart">(GMT+10:00) Hobart</option>
 290                                                 <option value="Asia/Vladivostok">(GMT+10:00) Vladivostok</option>
 291                                                 <option value="Australia/Lord_Howe">(GMT+10:30) Lord Howe Island</option>
 292                                                 <option value="Etc/GMT-11">(GMT+11:00) Solomon Is., New Caledonia</option>
 293                                                 <option value="Asia/Magadan">(GMT+11:00) Magadan</option>
 294                                                 <option value="Pacific/Norfolk">(GMT+11:30) Norfolk Island</option>
 295                                                 <option value="Asia/Anadyr">(GMT+12:00) Anadyr, Kamchatka</option>
 296                                                 <option value="Pacific/Auckland">(GMT+12:00) Auckland, Wellington</option>
 297                                                 <option value="Etc/GMT-12">(GMT+12:00) Fiji, Kamchatka, Marshall Is.</option>
 298                                                 <option value="Pacific/Chatham">(GMT+12:45) Chatham Islands</option>
 299                                                 <option value="Pacific/Tongatapu">(GMT+13:00) Nuku\'alofa</option>
 300                                                 <option value="Pacific/Kiritimati">(GMT+14:00) Kiritimati</option>
 301                                         </select>
 302                                 </li>
 303                         </ul>
 304                         <div data-role="button" id="button_datetime_apply">Apply</div>
 305                         <div data-role="button" id="button_datetime_cancel">Cancel</div>
 306                 </div>
 307         </div>
 308
 309 </body>
 310 </html>