Added pebble client.
This commit is contained in:
Tobias Blum
@@ -0,0 +1,81 @@
|
||||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Page Not Found</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0 auto;
|
||||
padding: 1em;
|
||||
font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
font-size: 1.1em;
|
||||
color: #333;
|
||||
}
|
||||
@media screen and (min-width: 40em) {
|
||||
body {
|
||||
width: 40em;
|
||||
}
|
||||
}
|
||||
h1, h2, h3 {
|
||||
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
h1 {
|
||||
margin: 1em 0;
|
||||
padding: 0 0 0.25em 0;
|
||||
border-bottom: 1px dotted #ccc;
|
||||
text-align: center;
|
||||
font-size: 3em;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
h2 {
|
||||
margin: 1em 0 0.45em 0;
|
||||
padding: 0;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 0.5em 0;
|
||||
line-height: 1.8em;
|
||||
}
|
||||
ol {
|
||||
|
||||
}
|
||||
ol li {
|
||||
margin: 0 0 0.5em 0;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.8em;
|
||||
}
|
||||
a {
|
||||
color: #50B1FF;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
code {
|
||||
display: inline-block;
|
||||
padding: 0.1em;
|
||||
background-color: #F8F8F8;
|
||||
border: 1px solid #DDD;
|
||||
border-radius: 3px;
|
||||
font-family: Consolas,"Liberation Mono",Courier,monospace;
|
||||
font-size: 0.9em;
|
||||
line-height: 1;
|
||||
}
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 3em 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Page Not Found</h1>
|
||||
<p>This specified file was not found on this website. Please check the URL for mistakes and try again.</p>
|
||||
<h2>Why am I seeing this?</h2>
|
||||
<p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured public directory.</p>
|
||||
<a class="logo" href="//www.firebase.com">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJQAAAAaCAYAAABRhnV8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyNWM4MWUxOS0zYWJmLTQyYWYtOTVhMi01MDBiZWU5NzAyMTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkNCQkJBMDlCNkRGMTFFM0JDMTdBQTgyNEFEQURCQTQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkNCQkJBMDhCNkRGMTFFM0JDMTdBQTgyNEFEQURCQTQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ZWFkZWM0M2YtMmFjMy00NTEyLTljNzQtYjVmMDJjMWNhNTkxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI1YzgxZTE5LTNhYmYtNDJhZi05NWEyLTUwMGJlZTk3MDIxOCIvPiA8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" />
|
||||
</a>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,475 @@
|
||||
@import url(../fonts/pfdindisplaypro-regular.woff);
|
||||
@import url(../fonts/ptsans-regular.woff);
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
*:focus {
|
||||
outline-width: 0; }
|
||||
|
||||
a {
|
||||
color: #FF4700;
|
||||
text-decoration: none; }
|
||||
|
||||
body {
|
||||
background-color: #EAEAEA;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.4em;
|
||||
-webkit-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
-ms-user-select: none !important;
|
||||
user-select: none !important; }
|
||||
|
||||
body, select, input[type=text], input[type=time], input[type=date] {
|
||||
font-family: 'PF DinDisplay Pro', sans-serif;
|
||||
font-weight: 300; }
|
||||
|
||||
select, input[type=time], input[type=date] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-ms-appearance: none;
|
||||
appearance: none;
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
color: #A8A8A8;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
background-color: #F7F7F7; }
|
||||
|
||||
input[type=date] {
|
||||
direction: rtl; }
|
||||
|
||||
select {
|
||||
right: 30px;
|
||||
top: 14px; }
|
||||
|
||||
input[type=time] {
|
||||
right: 10px !important; }
|
||||
|
||||
input[type=date] {
|
||||
right: 10px !important; }
|
||||
|
||||
.select-triangle {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 20px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 7px solid #FF4700; }
|
||||
|
||||
.item-container {
|
||||
color: #333333;
|
||||
margin-top: 15px; }
|
||||
|
||||
.item-container-header {
|
||||
padding: 3px 10px;
|
||||
text-transform: uppercase;
|
||||
font-family: 'PT Sans', sans-serif;
|
||||
font-size: .8em;
|
||||
font-weight: 500;
|
||||
color: #A8A8A8; }
|
||||
|
||||
.item-container-content {
|
||||
background-color: #F7F7F7;
|
||||
border-top: 1px solid #DEDEDE;
|
||||
border-bottom: 1px solid #DEDEDE; }
|
||||
|
||||
.item-container-footer {
|
||||
padding: 3px 10px;
|
||||
font-size: .7em;
|
||||
line-height: 1.4em;
|
||||
color: #A8A8A8; }
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
overflow: hidden; }
|
||||
|
||||
.item:not(:first-child) {
|
||||
border-top: 1px solid #DEDEDE; }
|
||||
|
||||
.item-subtitle-wrapper {
|
||||
font-size: 1em; }
|
||||
|
||||
.item-subtitle-wrapper .item-styled-toggle-wrapper {
|
||||
top: 16px; }
|
||||
|
||||
.item-subtitle-wrapper .item-styled-checkbox {
|
||||
top: 18px; }
|
||||
|
||||
.item-subtitle-wrapper .item-styled-radio {
|
||||
top: 16px; }
|
||||
|
||||
.item-subtitle-wrapper .item-draggable-handle {
|
||||
top: 18px; }
|
||||
|
||||
.item-subtitle {
|
||||
font-size: .7em;
|
||||
line-height: .7em;
|
||||
padding: .3em 0; }
|
||||
|
||||
.item-styled-toggle-wrapper {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 8px;
|
||||
width: 56px;
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: background-color; }
|
||||
|
||||
.item-styled-toggle {
|
||||
position: relative;
|
||||
background-color: #FFFFFF;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 5px;
|
||||
top: 1px;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: left; }
|
||||
|
||||
.item-toggle {
|
||||
display: none; }
|
||||
|
||||
.item-toggle + .item-styled-toggle-wrapper {
|
||||
background-color: #A8A8A8; }
|
||||
|
||||
.item-toggle:checked + .item-styled-toggle-wrapper {
|
||||
background-color: #FF4700; }
|
||||
|
||||
.item-toggle + .item-styled-toggle-wrapper .item-styled-toggle {
|
||||
left: 1px; }
|
||||
|
||||
.item-toggle:checked + .item-styled-toggle-wrapper .item-styled-toggle {
|
||||
left: 27px; }
|
||||
|
||||
.item-styled-toggle-bar {
|
||||
width: 3px;
|
||||
height: 15px;
|
||||
margin-left: 3px;
|
||||
background-color: #EAEAEA;
|
||||
float: left;
|
||||
position: relative;
|
||||
left: 4px;
|
||||
top: 7px; }
|
||||
|
||||
.item-styled-checkbox {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
border-radius: 5px;
|
||||
border-width: 2px;
|
||||
border-style: solid; }
|
||||
|
||||
.item-checkbox {
|
||||
display: none; }
|
||||
|
||||
.item-checkbox + .item-styled-checkbox {
|
||||
border-color: #DEDEDE; }
|
||||
|
||||
.item-checkbox:checked + .item-styled-checkbox {
|
||||
border-color: #FF4700;
|
||||
background-color: #FF4700; }
|
||||
|
||||
.item-checkbox:checked + .item-styled-checkbox:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 7px;
|
||||
width: 6px;
|
||||
height: 14px;
|
||||
border-color: #F7F7F7;
|
||||
border-width: 0 2px 2px 0;
|
||||
border-style: solid;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg); }
|
||||
|
||||
.item-styled-radio {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
border-radius: 12px;
|
||||
border-width: 2px;
|
||||
border-style: solid; }
|
||||
|
||||
.item-radio {
|
||||
display: none; }
|
||||
|
||||
.item-radio + .item-styled-radio {
|
||||
border-color: #DEDEDE; }
|
||||
|
||||
.item-radio:checked + .item-styled-radio {
|
||||
border-color: #FF4700;
|
||||
background-color: #FF4700; }
|
||||
|
||||
.item-radio:checked + .item-styled-radio:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
left: 6px;
|
||||
width: 6px;
|
||||
height: 14px;
|
||||
border-color: #F7F7F7;
|
||||
border-width: 0 2px 2px 0;
|
||||
border-style: solid;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg); }
|
||||
|
||||
.item-color {
|
||||
display: none; }
|
||||
|
||||
.item-styled-color {
|
||||
background: #F7F7F7; }
|
||||
.item-styled-color .value {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 56px;
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
border-color: #A8A8A8;
|
||||
border-width: 1px;
|
||||
border-style: solid; }
|
||||
.item-styled-color .color-box-wrap {
|
||||
display: none;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
padding: 0 0 100% 0;
|
||||
margin: 0.6em 0 0em; }
|
||||
.item-styled-color .color-box-wrap.show {
|
||||
display: block; }
|
||||
.item-styled-color .color-box-wrap .color-box-container {
|
||||
position: absolute;
|
||||
height: 99.97%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0; }
|
||||
.item-styled-color .color-box-wrap .color-box-container .color-box {
|
||||
float: left;
|
||||
cursor: pointer; }
|
||||
.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-tl {
|
||||
border-top-left-radius: 5px; }
|
||||
.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-tr {
|
||||
border-top-right-radius: 5px; }
|
||||
.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-bl {
|
||||
border-bottom-left-radius: 5px; }
|
||||
.item-styled-color .color-box-wrap .color-box-container .color-box.rounded-br {
|
||||
border-bottom-right-radius: 5px; }
|
||||
|
||||
.item-date, .item-time {
|
||||
position: absolute;
|
||||
color: #F7F7F7 !important; }
|
||||
|
||||
.item-styled-date, .item-styled-time {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 10px;
|
||||
color: #A8A8A8;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
background-color: #F7F7F7; }
|
||||
|
||||
.item-input-wrapper {
|
||||
border-radius: 5px;
|
||||
border: 2px solid #DEDEDE; }
|
||||
|
||||
.item-input-wrapper-button {
|
||||
box-sizing: border-box;
|
||||
width: 77%; }
|
||||
|
||||
.item-input {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
padding: 0 10px 7px 10px;
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
box-sizing: border-box; }
|
||||
|
||||
.button-container {
|
||||
text-align: center; }
|
||||
|
||||
.item-button {
|
||||
width: 60%;
|
||||
height: 35px;
|
||||
background-color: #FF4700;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
font-size: 0.8em;
|
||||
border: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-ms-appearance: none;
|
||||
appearance: none; }
|
||||
|
||||
.item-input-button {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 9px;
|
||||
width: 20%; }
|
||||
|
||||
.tab-buttons {
|
||||
display: table;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
table-layout: fixed; }
|
||||
|
||||
.tab-button {
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
color: #FF4700;
|
||||
border: 1px solid #FF4700;
|
||||
border-right-width: 0;
|
||||
font-size: 14px;
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
right: -1px; }
|
||||
|
||||
.tab-button:first-child {
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-right-width: 0; }
|
||||
|
||||
.tab-button:last-child {
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-right-width: 1px; }
|
||||
|
||||
.tab-button.active {
|
||||
background-color: #FF4700;
|
||||
color: #F7F7F7; }
|
||||
|
||||
.item-slider {
|
||||
position: relative;
|
||||
top: 8px;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-ms-appearance: none;
|
||||
appearance: none;
|
||||
height: 30px;
|
||||
width: 79%;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
margin-top: -10px; }
|
||||
|
||||
.item-slider::-webkit-slider-thumb:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: -1001px;
|
||||
height: 2px;
|
||||
width: 1000px;
|
||||
background: #FF4700; }
|
||||
|
||||
.item-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-ms-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
top: -13px;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #EAEAEA; }
|
||||
|
||||
.item-slider::-webkit-slider-runnable-track {
|
||||
height: 2px;
|
||||
background-color: #DEDEDE; }
|
||||
|
||||
.item-slider::-webkit-slider-thumb:after {
|
||||
content: "lll";
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 3px;
|
||||
height: 12px;
|
||||
width: 10px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: #DEDEDE;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px; }
|
||||
|
||||
.item-slider-text {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 10px;
|
||||
width: 16%; }
|
||||
|
||||
.item-slider-text .item-input {
|
||||
text-align: center; }
|
||||
|
||||
.delete-item {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
position: absolute;
|
||||
border-radius: 6px; }
|
||||
|
||||
.delete-item:before, .delete-item:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background-color: #A8A8A8;
|
||||
border-radius: 2px;
|
||||
top: 16px; }
|
||||
|
||||
.delete-item:before {
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
left: 3px; }
|
||||
|
||||
.delete-item:after {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
right: 3px; }
|
||||
|
||||
.add-item {
|
||||
color: #FF4700; }
|
||||
|
||||
.item-draggable-handle {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 10px;
|
||||
height: 28px;
|
||||
width: 28px; }
|
||||
|
||||
.item-draggable-handle-bar {
|
||||
margin-top: 5px;
|
||||
height: 2px;
|
||||
width: 20px;
|
||||
background-color: #A8A8A8;
|
||||
text-align: center; }
|
||||
|
||||
[draggable=true] {
|
||||
background-color: #F7F7F7;
|
||||
border: 2px solid #EAEAEA;
|
||||
border-radius: 2px; }
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,130 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>McLighting Pebble Configuration</title>
|
||||
<link rel='stylesheet' type='text/css' href='css/slate.min.css'>
|
||||
<script src='js/slate.min.js'></script>
|
||||
<style>
|
||||
.title {
|
||||
padding: 15px 10px;
|
||||
text-transform: uppercase;
|
||||
font-family: 'PT Sans', sans-serif;
|
||||
font-size: 1.2em;
|
||||
font-weight: 500;
|
||||
color: #888888;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 class='title'>McLighting Pebble Configuration</h1>
|
||||
|
||||
<div class='item-container'>
|
||||
<div class='item-container-content'>
|
||||
<div class='item'>
|
||||
Use this configuration page to set the URL of your McLighting smart light.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-container">
|
||||
<div class="item-container-header">McLighting URL</div>
|
||||
<div class="item-container-content">
|
||||
<label class="item">
|
||||
<div class="item-input-wrapper">
|
||||
<input type="text" class="item-input" name="esp_url" id="esp_url" placeholder="ws://esp8266_01.local:81" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- div class='item-container'>
|
||||
<div class='item-container-header'>Customizability</div>
|
||||
<div class='item-container-content'>
|
||||
<label class='item'>
|
||||
Background Color
|
||||
<input id='background_color_picker' type='text' class='item-color item-color-sunny' value='#000000'>
|
||||
</label>
|
||||
</div>
|
||||
<div class='item-container-footer'>
|
||||
Choose the app's background color. Used if High Contrast Mode is not selected. Note: Only available on Basalt watches that support many colors.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='item-container'>
|
||||
<div class='item-container-header'>Accessibility</div>
|
||||
<div class='item-container-content'>
|
||||
<label class='item'>
|
||||
High Contrast Mode
|
||||
<input id='high_contrast_checkbox' type='checkbox' class='item-toggle'>
|
||||
</label>
|
||||
</div>
|
||||
<div class='item-container-footer'>
|
||||
This switches the app colors to a higher contrast set that promotes readability in low light.
|
||||
</div>
|
||||
</div -->
|
||||
|
||||
<div class='item-container'>
|
||||
<div class='button-container'>
|
||||
<input id='submit_button' type='button' class='item-button' value='SAVE'>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function getConfigData() {
|
||||
//var backgroundColorPicker = document.getElementById('background_color_picker');
|
||||
//var highContrastCheckbox = document.getElementById('high_contrast_checkbox');
|
||||
var urlTextfield = document.getElementById('esp_url');
|
||||
|
||||
var options = {
|
||||
// 'background_color': backgroundColorPicker.value,
|
||||
// 'high_contrast': highContrastCheckbox.checked
|
||||
'esp_url': urlTextfield.value
|
||||
};
|
||||
|
||||
// Save for next launch
|
||||
//localStorage['background_color'] = options['background_color'];
|
||||
//localStorage['high_contrast'] = options['high_contrast'];
|
||||
localStorage['esp_url'] = options['esp_url'];
|
||||
|
||||
console.log('Got options: ' + JSON.stringify(options));
|
||||
return options;
|
||||
}
|
||||
|
||||
function getQueryParam(variable, defaultValue) {
|
||||
var query = location.search.substring(1);
|
||||
var vars = query.split('&');
|
||||
for (var i = 0; i < vars.length; i++) {
|
||||
var pair = vars[i].split('=');
|
||||
if (pair[0] === variable) {
|
||||
return decodeURIComponent(pair[1]);
|
||||
}
|
||||
}
|
||||
return defaultValue || false;
|
||||
}
|
||||
|
||||
var submitButton = document.getElementById('submit_button');
|
||||
submitButton.addEventListener('click', function() {
|
||||
console.log('Submit');
|
||||
|
||||
// Set the return URL depending on the runtime environment
|
||||
var return_to = getQueryParam('return_to', 'pebblejs://close#');
|
||||
document.location = return_to + encodeURIComponent(JSON.stringify(getConfigData()));
|
||||
});
|
||||
|
||||
(function() {
|
||||
//var backgroundColorPicker = document.getElementById('background_color_picker');
|
||||
//var highContrastCheckbox = document.getElementById('high_contrast_checkbox');
|
||||
var urlTextfield = document.getElementById('esp_url');
|
||||
|
||||
// Load any previously saved configuration, if available
|
||||
if(localStorage['esp_url']) {
|
||||
//highContrastCheckbox.checked = JSON.parse(localStorage['high_contrast']);
|
||||
//backgroundColorPicker.value = localStorage['background_color'];
|
||||
urlTextfield.value = localStorage['esp_url'];
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user