From 2d7d728e184f24961e4a0871f4d5bed3e2fe652a Mon Sep 17 00:00:00 2001 From: Jakob Stendahl Date: Mon, 23 Oct 2017 14:16:27 +0200 Subject: Moved everything into the new REPO --- webPage/index.html | 127 ++++++++++++++++++++++++++++++++++++++ webPage/settings.html | 167 ++++++++++++++++++++++++++++++++++++++++++++++++++ webPage/style.css | 148 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 442 insertions(+) create mode 100644 webPage/index.html create mode 100644 webPage/settings.html create mode 100644 webPage/style.css (limited to 'webPage') diff --git a/webPage/index.html b/webPage/index.html new file mode 100644 index 0000000..c80ee61 --- /dev/null +++ b/webPage/index.html @@ -0,0 +1,127 @@ + + + + + + + + {{NAME}} + + + + + + + + + + +
+ +
+
+ +
+

+ {{NAME}} + + + +

+
+
{{Location}}
+ +
+
+ + +
+
+ +
+
+ +
+ + + + + + diff --git a/webPage/settings.html b/webPage/settings.html new file mode 100644 index 0000000..cdda75a --- /dev/null +++ b/webPage/settings.html @@ -0,0 +1,167 @@ + + + + + + + + {{NAME}} + + + + + + + + + + +
+ + + + + +
+
+ +
+

Password

+
+ +
+
+ +
To change any settings, you must enter the correct password"
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+

Settings

+
+ +
+
+ + + +
Device settings:
+
+ +
+ +
+
+ +
+ +
+ +
+
+ +
Wifi settings:
+
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+
+ + +
Note: The device will reboot and turn of any connected appliances when you save the settings. +
Note: Empty or unchanged fields will not be updated. +
+
+ +
+
+ +
+
+ +
+
+ +
+

Version & OTA

+
+ +
+
+
Device type: clapSensor
+
Current version: 1.0.0
+
+
+ +
+ +
+
+ +
+
+ +
Note: The device will reboot and turn of any connected appliances when you flash a new version. +
+
+ +
+
+ +
+
+
+ + + + + + diff --git a/webPage/style.css b/webPage/style.css new file mode 100644 index 0000000..63663d5 --- /dev/null +++ b/webPage/style.css @@ -0,0 +1,148 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 1rem; + font-weight: normal; + line-height: 1.5; + background-color: #222; +} + +/* SWITCH */ + .switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; +} + +.switch input {display:none;} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .slider { + background-color: #2196F3; +} + +input:focus + .slider { + box-shadow: 0 0 1px #2196F3; +} + +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} +/* ./SWITCH */ + +.toggle-button { + position: relative; + display: inline-block; + color: #fff; +} + + .toggle-button label { + display: inline-block; + text-transform: uppercase; + cursor: pointer; + text-align: left; +} + +.toggle-button input { + display: none; +} + + .toggle-button__icon { + cursor: pointer; + pointer-events: none; +} + +.toggle-button__icon:before, .toggle-button__icon:after { + content: ""; + position: absolute; + top: 45%; + left: 35%; + transition: 0.2s ease-out; +} + +.toggle-button--tuli label { + line-height: 20px; + text-indent: 30px; +} + +.toggle-button--tuli input[type=checkbox]:checked ~ .toggle-button__icon { + background: #fff; +} + +.toggle-button--tuli input[type=checkbox]:checked ~ .toggle-button__icon:before, .toggle-button--tuli input[type=checkbox]:checked ~ .toggle-button__icon:after { + opacity: 1; +} + +.toggle-button--tuli .toggle-button__icon { + position: absolute; + top: 0; + left: 0; + width: 20px; + height: 20px; + transition: all 0.2s; + border: 2px solid #fff; + border-radius: 1px; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); +} + +.toggle-button--tuli .toggle-button__icon:before, .toggle-button--tuli .toggle-button__icon:after { + top: 5px; + left: 2px; + width: 12px; + height: 2px; + border-radius: 3px; + background: #fff; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); + top: 35%; + background: #61B136; + opacity: 0; + transform-origin: left center; +} + +.toggle-button--tuli .toggle-button__icon:before { + transform: translate(0, 0) rotate(45deg) scale(0.6, 1); +} + +.toggle-button--tuli .toggle-button__icon:after { + transform: translate(4px, 6px) rotate(-45deg); +} + +.toggle-button--tuli:hover input[type=checkbox]:not(:checked) ~ .toggle-button__icon { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); +} -- cgit v1.2.3