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