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
  12 <head>
  13     <meta charset="utf-8" />
  14     <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> -->
  15
  16     <title>Settings</title>
  17
  18     <link rel="stylesheet" href="./css/jquery.mobile-1.3.1.css" />
  19     <script type="text/javascript" src="./js/jquery-1.10.1.js"></script>
  20     <script type="text/javascript" src="./js/jquery.mobile-1.3.1.js"></script>
  21     <script type="text/javascript" src="./js/main.js"></script>
  22     <script type="text/javascript" src="./js/utils.js"></script>
  23     <script type="text/javascript" src="./js/websocket.js"></script>
  24     <script type="text/javascript" src="./js/api-connman.js"></script>
  25     <script type="text/javascript" src="./js/api-bluetooth.js"></script>
  26     <script type="text/javascript" src="./js/api-datetime.js"></script>
  27     <script type="text/javascript" src="./js/panel-connman.js"></script>
  28     <script type="text/javascript" src="./js/panel-bluetooth.js"></script>
  29     <script type="text/javascript" src="./js/panel-datetime.js"></script>
  30     <script type="text/javascript" src="./js/panel-locale.js"></script>
  31     <link rel="stylesheet" href="./css/style.css" />
  32 </head>
  33
  34 <body>
  35     <!-- Settings -->
  36     <div data-role="page" id="main">
  37         <div data-role="header" data-position="fixed">
  38             <a href="" id="quit" data-icon="back">Quit</a>
  39             <h1>Settings</h1>
  40         </div>
  41         <!-- /header -->
  42
  43         <div data-role="collapsible-set">
  44             <div data-role="collapsible" id="col_connectivity" data-collapsed="false">
  45                 <h3>Connectivity</h3>
  46                 <div data-role="content">
  47                     <ul data-role="listview">
  48                         <li>
  49                             <a href="#page_connman" id="button_connman_settings">Connman</a>
  50                         </li>
  51                         <li>
  52                             <a href="#page_bluetooth" id="button_bluetooth_settings">Bluetooth</a>
  53                         </li>
  54                     </ul>
  55                 </div>
  56             </div>
  57         </div>
  58
  59         <div data-role="collapsible-set">
  60             <div data-role="collapsible" id="col_system" data-collapsed="false">
  61                 <h3>System</h3>
  62                 <div data-role="content">
  63                     <ul data-role="listview">
  64                         <li>
  65                             <a href="#page_datetime" id="button_datetime_settings">Date and Time</a>
  66                         </li>
  67                         <li>
  68                             <a href="#page_locale" id="button_locale_settings">Language</a>
  69                         </li>
  70                     </ul>
  71                 </div>
  72             </div>
  73         </div>
  74     </div>
  75
  76     <!-- Connman Settings -->
  77     <div data-role="page" id="page_connman">
  78         <div data-role="header" data-position="fixed">
  79             <a href="#main" data-icon="back">Back</a>
  80             <h1>Connman</h1>
  81         </div>
  82
  83         <div data-role="content">
  84             <div>
  85                 <p>Technologies</p>
  86             </div>
  87             <div id="connman_technologies">
  88             </div>
  89             <div id="connman_tethering">
  90                 <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset">
  91                     <li data-role="fieldcontain">
  92                         <a href="#page_connman_tethering">Tethering</a>
  93                     </li>
  94                 </ul>
  95             </div>
  96             <div id="connman_services">
  97                 <div>
  98                     <p>Available Services</p>
  99                 </div>
 100                 <ul data-role="listview" id="listview_services_connected" data-inset="true" class="device-list ui-listview"></ul>
 101                 <ul data-role="listview" id="listview_services_available" data-inset="true" class="device-list ui-listview"></ul>
 102                 <div data-role="button" id="button_connman_refresh">Refresh</div>
 103                 <div data-role="button" id="button_connman_wifi_add">Add</div>
 104             </div>
 105         </div>
 106     </div>
 107
 108     <!-- Connman Tethering -->
 109     <div data-role="page" id="page_connman_tethering">
 110         <div data-role="header" data-position="fixed">
 111             <a href="#page_connman" data-icon="back">Back</a>
 112             <h1>Tethering</h1>
 113         </div>
 114
 115         <div data-role="content">
 116             <div id="connman_tethering_technologies"></div>
 117
 118             <label for="input_wifi_tethering_id">Tethering Identifier:</label>
 119             <input type="text" name="name" id="input_wifi_tethering_id" value="" />
 120
 121             <label for="input_wifi_tethering_passphrase">Tethering Passphrase:</label>
 122             <input type="password" name="name" id="input_wifi_tethering_passphrase" value="" />
 123         </div>
 124     </div>
 125
 126     <!-- Connman Service Info -->
 127     <div data-role="page" id="page_connman_service">
 128         <div data-role="header" data-position="fixed">
 129             <a href="#page_connman" data-icon="back">Back</a>
 130             <h1>Service Info</h1>
 131         </div>
 132
 133         <div data-role="content" id="page_connman_service_content">
 134         </div>
 135     </div>
 136
 137     <!-- WiFi Add New Network -->
 138     <div data-role="page" id="page_wifi_add">
 139         <div data-role="header" data-position="fixed">
 140             <a href="#page_connman" data-icon="back">Back</a>
 141             <h1>Add Network</h1>
 142             <a href="#" id="button_wifi_add" data-icon="plus">Add</a>
 143         </div>
 144
 145         <div data-role="content" id="page_wifi_add_content">
 146             <label for="input_wifi_add_ssid">SSID:</label>
 147             <input type="text" name="name" id="input_wifi_add_ssid" value="" />
 148
 149             <label for="select_wifi_add_security" class="select">Security:</label>
 150             <fieldset data-role="controlgroup" data-type="horizontal">
 151                 <input type="radio" name="radio_wifi_security" id="radio_wifi_none" value="none" checked="checked" />
 152                 <label for="radio_wifi_none">None</label>
 153
 154                 <input type="radio" name="radio_wifi_security" id="radio_wifi_wep" value="wep" />
 155                 <label for="radio_wifi_wep">WEP</label>
 156
 157                 <input type="radio" name="radio_wifi_security" id="radio_wifi_wpa" value="tkip" />
 158                 <label for="radio_wifi_wpa">WPA</label>
 159
 160                 <input type="radio" name="radio_wifi_security" id="radio_wifi_wpa2" value="aes" />
 161                 <label for="radio_wifi_wpa2">WPA2</label>
 162             </fieldset>
 163             <ul data-role="listview" data-inset="true" class="device-list ui-listview">
 164                 <li id="page_wifi_add_password">
 165                     <label for="input_wifi_add_password">Password:</label>
 166                     <input type="password" name="name" id="input_wifi_add_password" value="" />
 167                 </li>
 168             </ul>
 169         </div>
 170     </div>
 171
 172     <!-- WiFi Connect Encryppted Network -->
 173     <div data-role="page" id="page_wifi_connect">
 174         <div data-role="header" data-position="fixed">
 175             <a href="#page_connman" data-icon="back">Back</a>
 176             <h1>Enter passphrase</h1>
 177         </div>
 178
 179         <div data-role="content" id="page_wifi_connect_content">
 180             <ul data-role="listview" data-inset="true" class="device-list ui-listview">
 181                 <li id="page_wifi_connect_passphrase">
 182                     <label for="input_wifi_connect_passphrase">Password:</label>
 183                     <input type="password" name="name" id="input_wifi_connect_passphrase" value="" />
 184                 </li>
 185             </ul>
 186             <div data-role="button" id="button_wifi_connect">Connect</div>
 187         </div>
 188     </div>
 189
 190     <!-- Bluetooth Settings -->
 191     <div data-role="page" id="page_bluetooth">
 192         <div data-role="header" data-position="fixed">
 193             <a href="#main" data-icon="back">Back</a>
 194             <h1>Bluetooth</h1>
 195         </div>
 196
 197         <div data-role="content">
 198             <div class="adapter-info">
 199                 <div class="adapter-name">
 200                     <div id="label_bluetooth_adapter"></div>
 201                 </div>
 202             </div>
 203             <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset">
 204                 <li data-role="fieldcontain">
 205                     <label for="toggle_bluetooth" class="ui-slider">Bluetooth</label>
 206                     <select data-role="slider" name="toggle_bluetooth" id="toggle_bluetooth" class="ui-slider-switch">
 207                         <option value="off">Off</option>
 208                         <option value="on">On</option>
 209                     </select>
 210                 </li>
 211             </ul>
 212             <div id="bluetooth_devices">
 213                 <div>
 214                     <p>Available Devices</p>
 215                 </div>
 216                 <ul data-role="listview" id="listview_device_paired" data-inset="true" class="device-list ui-listview"></ul>
 217                 <ul data-role="listview" id="listview_device_available" data-inset="true" class="device-list ui-listview"></ul>
 218                 <div data-role="button" id="button_bluetooth_scan">Scan</div>
 219             </div>
 220         </div>
 221     </div>
 222
 223     <!-- Bluetooth Device Info -->
 224     <div data-role="page" id="page_bluetooth_detail">
 225         <div data-role="header" data-position="fixed">
 226             <a href="#page_bluetooth" data-icon="back">Back</a>
 227             <h1>Device Info</h1>
 228         </div>
 229
 230         <div data-role="content" id="page_bluetooth_detail_content">
 231         </div>
 232     </div>
 233
 234     <!--  Date and Time Settings -->
 235     <div data-role="page" id="page_datetime">
 236         <div data-role="header" data-position="fixed">
 237             <a href="#main" id="page_datetime_button_back" data-icon="back">Back</a>
 238             <h1>Date and Time</h1>
 239         </div>
 240
 241         <div data-role="content">
 242             <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset">
 243                 <li data-role="fieldcontain">
 244                     <label for="toggle_timeupdates" class="ui-slider">Automatic time</label>
 245                     <select data-role="slider" name="toggle_timeupdates" id="toggle_timeupdates" class="ui-slider-switch">
 246                         <option value="manual">Off</option>
 247                         <option value="auto">On</option>
 248                     </select>
 249                 </li>
 250             </ul>
 251             <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset">
 252                 <li data-role="fieldcontain">
 253                     <label for="input_time">Time (hh:mm:ss):</label>
 254                     <input type="text" data-clear-btn="false" name="input_time" id="input_time" value="">
 255                 </li>
 256             </ul>
 257             <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset">
 258                 <li data-role="fieldcontain">
 259                     <label for="input_date">Date (yyyy-mm-dd):</label>
 260                     <input type="text" data-clear-btn="false" name="input_date" id="input_date" value="">
 261                 </li>
 262             </ul>
 263             <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset">
 264                 <li data-role="fieldcontain">
 265                     <label for="toggle_timezoneupdates" class="ui-slider">Automatic time zone</label>
 266                     <select data-role="slider" name="toggle_timezoneupdates" id="toggle_timezoneupdates" class="ui-slider-switch">
 267                         <option value="manual">Off</option>
 268                         <option value="auto">On</option>
 269                     </select>
 270                 </li>
 271             </ul>
 272             <ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset">
 273                 <li data-role="fieldcontain">
 274                     <label for="select_timezone" class="select">Time zone:</label>
 275                     <select name="select_timezone" id="select_timezone">
 276                         <option value="Pacific/Midway">(GMT-11:00) Midway Island, Samoa</option>
 277                         <option value="America/Adak">(GMT-10:00) Hawaii-Aleutian</option>
 278                         <option value="Etc/GMT+10">(GMT-10:00) Hawaii</option>
 279                         <option value="Pacific/Marquesas">(GMT-09:30) Marquesas Islands</option>
 280                         <option value="Pacific/Gambier">(GMT-09:00) Gambier Islands</option>
 281                         <option value="America/Anchorage">(GMT-09:00) Alaska</option>
 282                         <option value="America/Ensenada">(GMT-08:00) Tijuana, Baja California</option>
 283                         <option value="Etc/GMT+8">(GMT-08:00) Pitcairn Islands</option>
 284                         <option value="America/Los_Angeles">(GMT-08:00) Pacific Time (US & Canada)</option>
 285                         <option value="America/Denver">(GMT-07:00) Mountain Time (US & Canada)</option>
 286                         <option value="America/Chihuahua">(GMT-07:00) Chihuahua, La Paz, Mazatlan</option>
 287                         <option value="America/Dawson_Creek">(GMT-07:00) Arizona</option>
 288                         <option value="America/Belize">(GMT-06:00) Saskatchewan, Central America</option>
 289                         <option value="America/Cancun">(GMT-06:00) Guadalajara, Mexico City, Monterrey</option>
 290                         <option value="Chile/EasterIsland">(GMT-06:00) Easter Island</option>
 291                         <option value="America/Chicago">(GMT-06:00) Central Time (US & Canada)</option>
 292                         <option value="America/New_York">(GMT-05:00) Eastern Time (US & Canada)</option>
 293                         <option value="America/Havana">(GMT-05:00) Cuba</option>
 294                         <option value="America/Bogota">(GMT-05:00) Bogota, Lima, Quito, Rio Branco</option>
 295                         <option value="America/Caracas">(GMT-04:30) Caracas</option>
 296                         <option value="America/Santiago">(GMT-04:00) Santiago</option>
 297                         <option value="America/La_Paz">(GMT-04:00) La Paz</option>
 298                         <option value="Atlantic/Stanley">(GMT-04:00) Faukland Islands</option>
 299                         <option value="America/Campo_Grande">(GMT-04:00) Brazil</option>
 300                         <option value="America/Goose_Bay">(GMT-04:00) Atlantic Time (Goose Bay)</option>
 301                         <option value="America/Glace_Bay">(GMT-04:00) Atlantic Time (Canada)</option>
 302                         <option value="America/St_Johns">(GMT-03:30) Newfoundland</option>
 303                         <option value="America/Araguaina">(GMT-03:00) UTC-3</option>
 304                         <option value="America/Montevideo">(GMT-03:00) Montevideo</option>
 305                         <option value="America/Miquelon">(GMT-03:00) Miquelon, St. Pierre</option>
 306                         <option value="America/Godthab">(GMT-03:00) Greenland</option>
 307                         <option value="America/Argentina/Buenos_Aires">(GMT-03:00) Buenos Aires</option>
 308                         <option value="America/Sao_Paulo">(GMT-03:00) Brasilia</option>
 309                         <option value="America/Noronha">(GMT-02:00) Mid-Atlantic</option>
 310                         <option value="Atlantic/Cape_Verde">(GMT-01:00) Cape Verde Is.</option>
 311                         <option value="Atlantic/Azores">(GMT-01:00) Azores</option>
 312                         <option value="Europe/Belfast">(GMT) Greenwich Mean Time : Belfast</option>
 313                         <option value="Europe/Dublin">(GMT) Greenwich Mean Time : Dublin</option>
 314                         <option value="Europe/Lisbon">(GMT) Greenwich Mean Time : Lisbon</option>
 315                         <option value="Europe/London">(GMT) Greenwich Mean Time : London</option>
 316                         <option value="Africa/Abidjan">(GMT) Monrovia, Reykjavik</option>
 317                         <option value="Europe/Amsterdam">(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna</option>
 318                         <option value="Europe/Belgrade">(GMT+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague</option>
 319                         <option value="Europe/Brussels">(GMT+01:00) Brussels, Copenhagen, Madrid, Paris</option>
 320                         <option value="Africa/Algiers">(GMT+01:00) West Central Africa</option>
 321                         <option value="Africa/Windhoek">(GMT+01:00) Windhoek</option>
 322                         <option value="Asia/Beirut">(GMT+02:00) Beirut</option>
 323                         <option value="Africa/Cairo">(GMT+02:00) Cairo</option>
 324                         <option value="Asia/Gaza">(GMT+02:00) Gaza</option>
 325                         <option value="Africa/Blantyre">(GMT+02:00) Harare, Pretoria</option>
 326                         <option value="Asia/Jerusalem">(GMT+02:00) Jerusalem</option>
 327                         <option value="Europe/Minsk">(GMT+02:00) Minsk</option>
 328                         <option value="Asia/Damascus">(GMT+02:00) Syria</option>
 329                         <option value="Europe/Moscow">(GMT+03:00) Moscow, St. Petersburg, Volgograd</option>
 330                         <option value="Africa/Addis_Ababa">(GMT+03:00) Nairobi</option>
 331                         <option value="Asia/Tehran">(GMT+03:30) Tehran</option>
 332                         <option value="Asia/Dubai">(GMT+04:00) Abu Dhabi, Muscat</option>
 333                         <option value="Asia/Yerevan">(GMT+04:00) Yerevan</option>
 334                         <option value="Asia/Kabul">(GMT+04:30) Kabul</option>
 335                         <option value="Asia/Yekaterinburg">(GMT+05:00) Ekaterinburg</option>
 336                         <option value="Asia/Tashkent">(GMT+05:00) Tashkent</option>
 337                         <option value="Asia/Kolkata">(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi</option>
 338                         <option value="Asia/Katmandu">(GMT+05:45) Kathmandu</option>
 339                         <option value="Asia/Dhaka">(GMT+06:00) Astana, Dhaka</option>
 340                         <option value="Asia/Novosibirsk">(GMT+06:00) Novosibirsk</option>
 341                         <option value="Asia/Rangoon">(GMT+06:30) Yangon (Rangoon)</option>
 342                         <option value="Asia/Bangkok">(GMT+07:00) Bangkok, Hanoi, Jakarta</option>
 343                         <option value="Asia/Krasnoyarsk">(GMT+07:00) Krasnoyarsk</option>
 344                         <option value="Asia/Hong_Kong">(GMT+08:00) Beijing, Chongqing, Hong Kong, Urumqi</option>
 345                         <option value="Asia/Irkutsk">(GMT+08:00) Irkutsk, Ulaan Bataar</option>
 346                         <option value="Australia/Perth">(GMT+08:00) Perth</option>
 347                         <option value="Australia/Eucla">(GMT+08:45) Eucla</option>
 348                         <option value="Asia/Tokyo">(GMT+09:00) Osaka, Sapporo, Tokyo</option>
 349                         <option value="Asia/Seoul">(GMT+09:00) Seoul</option>
 350                         <option value="Asia/Yakutsk">(GMT+09:00) Yakutsk</option>
 351                         <option value="Australia/Adelaide">(GMT+09:30) Adelaide</option>
 352                         <option value="Australia/Darwin">(GMT+09:30) Darwin</option>
 353                         <option value="Australia/Brisbane">(GMT+10:00) Brisbane</option>
 354                         <option value="Australia/Hobart">(GMT+10:00) Hobart</option>
 355                         <option value="Asia/Vladivostok">(GMT+10:00) Vladivostok</option>
 356                         <option value="Australia/Lord_Howe">(GMT+10:30) Lord Howe Island</option>
 357                         <option value="Etc/GMT-11">(GMT+11:00) Solomon Is., New Caledonia</option>
 358                         <option value="Asia/Magadan">(GMT+11:00) Magadan</option>
 359                         <option value="Pacific/Norfolk">(GMT+11:30) Norfolk Island</option>
 360                         <option value="Asia/Anadyr">(GMT+12:00) Anadyr, Kamchatka</option>
 361                         <option value="Pacific/Auckland">(GMT+12:00) Auckland, Wellington</option>
 362                         <option value="Etc/GMT-12">(GMT+12:00) Fiji, Kamchatka, Marshall Is.</option>
 363                         <option value="Pacific/Chatham">(GMT+12:45) Chatham Islands</option>
 364                         <option value="Pacific/Tongatapu">(GMT+13:00) Nuku\'alofa</option>
 365                         <option value="Pacific/Kiritimati">(GMT+14:00) Kiritimati</option>
 366                     </select>
 367                 </li>
 368             </ul>
 369             <div data-role="button" id="button_datetime_apply">Apply</div>
 370             <div data-role="button" id="button_datetime_cancel">Cancel</div>
 371         </div>
 372     </div>
 373
 374     <!-- Locale Settings -->
 375     <div data-role="page" id="page_locale">
 376         <div data-role="header">
 377             <a href="#main" data-icon="back">Back</a>
 378             <h1>Language</h1>
 379         </div>
 380
 381         <div data-role="content">
 382             <fieldset data-role="controlgroup">
 383                 <input type="radio" name="radio_locale" id="radio_locale_english" value="en_US.UTF-8" checked="checked" />
 384                 <label for="radio_locale_english">English</label>
 385
 386                 <input type="radio" name="radio_locale" id="radio_locale_german" value="de_DE.UTF-8" />
 387                 <label for="radio_locale_german">German (Deutsch)</label>
 388
 389                 <input type="radio" name="radio_locale" id="radio_locale_japanese" value="ja_JP.UTF-8" />
 390                 <label for="radio_locale_japanese">Japanese (日本語)</label>
 391
 392                 <input type="radio" name="radio_locale" id="radio_locale_simplified_chinese" value="zh_CN.UTF-8" />
 393                 <label for="radio_locale_simplified_chinese">Simplified Chinese (简体中文)</label>
 394
 395                 <input type="radio" name="radio_locale" id="radio_locale_traditional_chinese" value="zh_TW.UTF-8" />
 396                 <label for="radio_locale_traditional_chinese">Traditional Chinese (繁體中文)</label>
 397             </fieldset>
 398             <div data-role="button" id="button_locale_apply">Apply</div>
 399             <div data-role="button" id="button_locale_cancel">Cancel</div>
 400         </div>
 401     </div>
 402 </body>
 403 </html>