index.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport">
  6. <title>IntuiClock Config</title>
  7. <link rel="stylesheet" href="css/slate.min.css">
  8. <script type="text/javascript" src="js/slate.min.js"></script>
  9. </head>
  10. <body>
  11. <form id="main-form">
  12. <div class="item-container">
  13. <div class="item-container-header">Time &amp; Date</div>
  14. <div class="item-container-content">
  15. <label class="item">
  16. Seconds Hand
  17. <input id="input-seconds-hand" type="checkbox" class="item-toggle" name="seconds-hand" checked>
  18. </label>
  19. <label class="item">
  20. Date Format
  21. <select id="input-date-format" name="date-format" class="item-select">
  22. <option class="item-select-option" selected value="t">10 Aug 2015</option>
  23. <option class="item-select-option" value="d">10/08/2015</option>
  24. <option class="item-select-option" value="m">08/10/2015</option>
  25. </select>
  26. </label>
  27. </div>
  28. <div class="item-container-footer">Disable the seconds hand to reduce battery use.</div>
  29. </div>
  30. <div class="item-container">
  31. <div class="item-container-header">Appearance</div>
  32. <div class="item-container-content">
  33. <label class="item">
  34. Battery Indicator
  35. <input id="input-battery-indicator" type="checkbox" class="item-toggle" name="battery-indicator" checked>
  36. </label>
  37. <label class="item">
  38. Wide Window
  39. <input id="input-wide-layout" type="checkbox" class="item-toggle" name="wide-layout">
  40. </label>
  41. <label class="item">
  42. XEN Style
  43. <input id="input-xen-style" type="checkbox" class="item-toggle" name="xen-style">
  44. </label>
  45. </div>
  46. </div>
  47. <div class="item-container">
  48. <div class="button-container">
  49. <input id="button-submit" type="button" class="item-button" value="SAVE">
  50. </div>
  51. </div>
  52. </form>
  53. </body>
  54. <script>
  55. function getConfigData() {
  56. var input_seconds_hand = document.getElementById('input-seconds-hand'),
  57. input_battery_indicator = document.getElementById('input-battery-indicator'),
  58. input_date_format = document.getElementById('input-date-format'),
  59. input_wide_layout = document.getElementById('input-wide-layout'),
  60. input_xen_style = document.getElementById('input-xen-style');
  61. var options = {
  62. 'seconds_hand': input_seconds_hand.checked,
  63. 'battery_indicator': input_battery_indicator.checked,
  64. 'date_format': input_date_format.value,
  65. 'wide_layout': input_wide_layout.checked,
  66. 'xen_style': input_xen_style.checked
  67. };
  68. // Save for next launch
  69. localStorage['seconds_hand'] = options['seconds_hand'];
  70. localStorage['battery_indicator'] = options['battery_indicator'];
  71. localStorage['date_format'] = options['date_format'];
  72. localStorage['wide_layout'] = options['wide_layout'];
  73. localStorage['xen_style'] = options['xen_style'];
  74. // console.log('Got options: ' + JSON.stringify(options));
  75. return options;
  76. }
  77. function getQueryParam(variable, defaultValue) {
  78. var query = location.search.substring(1),
  79. vars = query.split('&');
  80. for (var i = 0; i < vars.length; i++) {
  81. var pair = vars[i].split('=');
  82. if (pair[0] === variable) {
  83. return decodeURIComponent(pair[1]);
  84. }
  85. }
  86. return defaultValue || false;
  87. }
  88. var button_submit = document.getElementById('button-submit');
  89. button_submit.addEventListener('click', function() {
  90. // console.log('Submit');
  91. // Set the return URL depending on the runtime environment
  92. var return_to = getQueryParam('return_to', 'pebblejs://close#');
  93. document.location = return_to + encodeURIComponent(JSON.stringify(getConfigData()));
  94. });
  95. (function() {
  96. var input_seconds_hand = document.getElementById('input-seconds-hand'),
  97. input_battery_indicator = document.getElementById('input-battery-indicator'),
  98. input_date_format = document.getElementById('input-date-format'),
  99. input_wide_layout = document.getElementById('input-wide-layout'),
  100. input_xen_style = document.getElementById('input-xen-style');
  101. if (localStorage['seconds_hand']) {
  102. input_seconds_hand.checked = JSON.parse(localStorage['seconds_hand']);
  103. }
  104. if (localStorage['battery_indicator']) {
  105. input_battery_indicator.checked = JSON.parse(localStorage['battery_indicator']);
  106. }
  107. if (localStorage['date_format']) {
  108. input_date_format.value = localStorage['date_format'];
  109. }
  110. if (localStorage['wide_layout']) {
  111. input_wide_layout.checked = JSON.parse(localStorage['wide_layout']);
  112. }
  113. if (localStorage['xen_style']) {
  114. input_xen_style.checked = JSON.parse(localStorage['xen_style']);
  115. }
  116. })();
  117. </script>
  118. </html>