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