config.html (9400B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/pebble/slate/v0.0.3/dist/css/slate.min.css"> 7 <style> 8 .title { 9 padding: 15px 10px; 10 text-transform: uppercase; 11 font-family: "PT Sans", sans-serif; 12 font-size: 1.2em; 13 font-weight: 500; 14 color: 0x888888; 15 text-align: center; 16 } 17 </style> 18 <script> 19 function getQueryParam(variable, defaultValue) { 20 var query = location.search.substring(1); 21 var vars = query.split("&"); 22 for (var i = 0; i < vars.length; i++) { 23 var pair = vars[i].split("="); 24 if (pair[0] === variable) { 25 return decodeURIComponent(pair[1]); 26 } 27 } 28 return defaultValue || false; 29 } 30 31 function onSubmit() { 32 // Set the return URL depending on the runtime environment 33 var return_to = getQueryParam("return_to", "pebblejs://close#"); 34 var selectedFormat = document.getElementById("textFormat").value; 35 var options = { 36 "backgroundColor": document.getElementById("backgroundColorPicker").value, 37 "hourHandColor": document.getElementById("hourHandColorPicker").value, 38 "minuteHandColor": document.getElementById("minuteHandColorPicker").value, 39 "pinColor": document.getElementById("pinColorPicker").value, 40 "hourColor": document.getElementById("hourColorPicker").value, 41 "innerColor": document.getElementById("innerColorPicker").value, 42 "minuteColor": document.getElementById("minuteColorPicker").value, 43 "textColor": document.getElementById("textColorPicker").value, 44 "batteryColor": document.getElementById("batteryColorPicker").value, 45 "batteryColor2": document.getElementById("batteryColorPicker2").value, 46 "lowBatteryLevel": document.getElementById("lowBatteryLevel").value, 47 "bluetoothColor": document.getElementById("bluetoothColorPicker").value, 48 "bluetoothVibration": document.getElementById("bluetoothVibration").checked ? "1" : "0", 49 "textFormat": encodeURIComponent(selectedFormat === "%" ? document.getElementById("customFormat").value : selectedFormat), 50 "textFont": document.getElementById("textFont").value, 51 } 52 document.location = return_to + encodeURIComponent(JSON.stringify(options)); 53 } 54 55 function setCustomFormatVisibility() { 56 document.getElementById("customFormatElement").style.display 57 = (document.getElementById("textFormat").value === "%") 58 ? "block" : "none"; 59 } 60 </script> 61 </head> 62 <body onload="setCustomFormatVisibility()"> 63 <div class="item-container"> 64 <h1 class="title">Classic Lite</h1> 65 </div> 66 67 <div class="item-container"> 68 <div class="item-container-header">Color Scheme</div> 69 <div class="item-container-content"> 70 <label class="item"> 71 Background Color 72 <input id="backgroundColorPicker" type="text" class="item-color item-color-normal" value="0xFFFFFF"> 73 </label> 74 <label class="item"> 75 Hour Hand Color 76 <input id="hourHandColorPicker" type="text" class="item-color item-color-normal" value="0x000000"> 77 </label> 78 <label class="item"> 79 Minute Hand Color 80 <input id="minuteHandColorPicker" type="text" class="item-color item-color-normal" value="0x000000"> 81 </label> 82 <label class="item"> 83 Central Pin Color 84 <input id="pinColorPicker" type="text" class="item-color item-color-normal" value="0x000000"> 85 </label> 86 <label class="item"> 87 Hour Mark Color 88 <input id="hourColorPicker" type="text" class="item-color item-color-normal" value="0x000000"> 89 </label> 90 <label class="item"> 91 Inner Rectangle Color 92 <input id="innerColorPicker" type="text" class="item-color item-color-normal" value="0xAAAAAA"> 93 </label> 94 <label class="item"> 95 Minute Mark Color 96 <input id="minuteColorPicker" type="text" class="item-color item-color-normal" value="0x000000"> 97 </label> 98 </div> 99 </div> 100 101 <div class="item-container"> 102 <div class="item-container-header">Low Battery Warning</div> 103 <div class="item-container-content"> 104 <label class="item"> 105 <input type="range" id="lowBatteryLevelSlider" class="item-slider" name="lowBatteryLevel" value="50"> 106 <div class="item-input-wrapper item-slider-text"> 107 <input type="text" id="lowBatteryLevel" class="item-input" name="lowBatteryLevel" value="50"> 108 </div> 109 </label> 110 <label class="item"> 111 Icon Color 112 <input id="batteryColorPicker" type="text" class="item-color item-color-normal" value="0x555555"> 113 </label> 114 <label class="item"> 115 Secondary Icon Color 116 <input id="batteryColorPicker2" type="text" class="item-color item-color-normal" value="0x555555"> 117 </label> 118 </div> 119 </div> 120 121 <div class="item-container"> 122 <div class="item-container-header">Bluetooth Warning</div> 123 <div class="item-container-content"> 124 <label class="item"> 125 Icon Color 126 <input id="bluetoothColorPicker" type="text" class="item-color item-color-normal" value="0x000000"> 127 </label> 128 <label class="item"> 129 Vibration 130 <input id="bluetoothVibration" type="checkbox" class="item-toggle" checked> 131 </label> 132 </div> 133 </div> 134 135 <div class="item-container"> 136 <div class="item-container-header">Info Text</div> 137 <div class="item-container-content"> 138 <label class="item"> 139 Color 140 <input id="textColorPicker" type="text" class="item-color item-color-normal" value="0x000000"> 141 </label> 142 <label class="item"> 143 Format 144 <select id="textFormat" class="item-select" onchange="setCustomFormatVisibility()"> 145 <option class="item-select-option" value="">(disabled)</option> 146 <option class="item-select-option" value="Pebble">Pebble</option> 147 <option class="item-select-option" value="%a %d" selected>Sun 31</option> 148 <option class="item-select-option" value="%d %b">31 Jan</option> 149 <option class="item-select-option" value="%b %d">Jan 31</option> 150 <option class="item-select-option" value="%d %m">31 01</option> 151 <option class="item-select-option" value="%m %d">01 31</option> 152 <option class="item-select-option" value="%a %d %m">Sun 31 01</option> 153 <option class="item-select-option" value="%a %m %d">Sun 01 31</option> 154 <option class="item-select-option" value="%">(Custom)</option> 155 </select> 156 </label> 157 <label class="item" id="customFormatElement"> 158 <div class="item-input-wrapper"> 159 <input type="text" class="item-input" name="customFormat" id="customFormat" placeholder="Custom Format"> 160 </div> 161 </label> 162 <label class="item"> 163 Font Size 164 <select id="textFont" class="item-select"> 165 <option class="item-select-option" value="1" selected>14</option> 166 <option class="item-select-option" value="2">18</option> 167 <option class="item-select-option" value="3">24</option> 168 <option class="item-select-option" value="4">28</option> 169 </select> 170 </label> 171 </div> 172 </div> 173 174 <div class="item-container"> 175 <div class="button-container"> 176 <input id="submitButton" type="button" class="item-button" value="SUBMIT" onClick="onSubmit()"> 177 </div> 178 </div> 179 180 <script src="https://cdn.rawgit.com/pebble/slate/v0.0.3/dist/js/slate.min.js"></script> 181 <script> 182 var handColor = getQueryParam("hands", "0x000000"); 183 document.getElementById("backgroundColorPicker").value = getQueryParam("background", "0xFFFFFF"); 184 document.getElementById("hourHandColorPicker").value = getQueryParam("hhand", handColor); 185 document.getElementById("minuteHandColorPicker").value = getQueryParam("mhand", handColor); 186 document.getElementById("pinColorPicker").value = getQueryParam("pin", handColor); 187 document.getElementById("hourColorPicker").value = getQueryParam("hours", "0x000000"); 188 document.getElementById("innerColorPicker").value = getQueryParam("inner", "0xAAAAAA"); 189 document.getElementById("minuteColorPicker").value = getQueryParam("minutes", "0x000000"); 190 document.getElementById("lowBatteryLevelSlider").value = 191 document.getElementById("lowBatteryLevel").value = getQueryParam("battlvl", "50"); 192 document.getElementById("batteryColorPicker").value = getQueryParam("battcol", "0x555555"); 193 document.getElementById("batteryColorPicker2").value = getQueryParam("battcol2", "0x555555"); 194 document.getElementById("bluetoothColorPicker").value = getQueryParam("bluetooth", "0x000000"); 195 document.getElementById("bluetoothVibration").checked = (parseInt(getQueryParam("vibrate", "1")) > 0); 196 document.getElementById("textColorPicker").value = getQueryParam("textcol", "0x000000"); 197 document.getElementById("textFont").value = getQueryParam("font", "1"); 198 199 const textFmt = getQueryParam("textfmt", "Pebble"); 200 var selectElement = document.getElementById("textFormat"); 201 selectElement.value = textFmt; 202 if (selectElement.value !== textFmt) { 203 selectElement.value = "%"; 204 document.getElementById("customFormat").value = textFmt; 205 } 206 207 const versionTag = getQueryParam("v"); 208 if (versionTag) { 209 document.getElementsByTagName("h1")[0].childNodes[0].nodeValue = "Classic Lite " + versionTag; 210 } 211 </script> 212 </body> 213 </html>