use blue theme, optimizations
use blue theme, optimizations

--- a/assets/css/iotcc.css
+++ b/assets/css/iotcc.css
@@ -164,13 +164,13 @@
   box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.4);
 }
 .switch.switch--material input:checked + .switch__toggle {
-  background-color: #77c2bb;
+  background-color: #3c8dbc;
   -webkit-box-shadow: none;
   box-shadow: none;
 }
 .switch.switch--material input:checked + .switch__toggle .switch__handle {
   left: 16px;
-  background-color: #009688;
+  background-color: #3c8dbc;
   -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
   box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
 }
@@ -200,8 +200,8 @@
   box-shadow: 0px 0px 0px 14px rgba(0,0,0,0.12);
 }
 .switch.switch--material.switch--active input:checked + .switch__toggle .switch__handle:before {
-  -webkit-box-shadow: 0px 0px 0px 14px #009688;
-  box-shadow: 0px 0px 0px 14px #009688;
+  -webkit-box-shadow: 0px 0px 0px 14px #3c8dbc;
+  box-shadow: 0px 0px 0px 14px #3c8dbc;
 }
 .switch.switch--material .switch__touch {
   position: absolute;
@@ -209,6 +209,278 @@
   bottom: -10px;
   left: -15px;
   right: -15px;
+}
+
+.tab-bar {
+  font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  font-size: 17px;
+  display: table;
+  table-layout: fixed;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  white-space: nowrap;
+  margin: 0;
+  padding: 0;
+  height: 49px;
+  background-color: #fff;
+  border-top: 1px solid #ccc;
+  width: 100%;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .tab-bar {
+    border-top: none;
+    -webkit-background-size: 100% 1px;
+    background-size: 100% 1px;
+    background-repeat: no-repeat;
+    background-position: top;
+    background-image: -webkit-linear-gradient(270deg, #ccc, #ccc 50%, transparent 50%);
+    background-image: -moz-linear-gradient(270deg, #ccc, #ccc 50%, transparent 50%);
+    background-image: -o-linear-gradient(270deg, #ccc, #ccc 50%, transparent 50%);
+    background-image: linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%);
+  }
+}
+.tab-bar__item {
+  font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  font-size: 17px;
+  position: relative;
+  overflow: hidden;
+  display: table-cell;
+  width: auto;
+  -webkit-border-radius: 0;
+  border-radius: 0;
+}
+.tab-bar__item > input {
+  position: absolute;
+  overflow: hidden;
+  right: 0px;
+  top: 0px;
+  left: 0px;
+  bottom: 0px;
+  padding: 0;
+  border: 0;
+  opacity: 0.001;
+  z-index: 1;
+  vertical-align: top;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
+}
+.tab-bar__button {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  font-size: 17px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: none;
+  line-height: normal;
+  cursor: default;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-decoration: none;
+  padding: 0;
+  height: 49px;
+  letter-spacing: 0;
+  color: #999;
+  text-shadow: 0 1px none;
+  vertical-align: top;
+  background-color: transparent;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-top: none;
+  width: 100%;
+  font-weight: 400;
+  line-height: 49px;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .tab-bar__button {
+    border-top: none;
+  }
+}
+.tab-bar__icon {
+  font-size: 24px;
+  padding: 0;
+  margin: 0;
+  line-height: 26px;
+  display: block;
+  height: 28px;
+}
+.tab-bar__label {
+  font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  font-size: 17px;
+}
+.tab-bar__badge.notification {
+  position: absolute;
+  top: 5px;
+  z-index: 10;
+  font-size: 12px;
+  height: 16px;
+  line-height: 16px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+}
+.tab-bar__icon + .tab-bar__label {
+  font-size: 10px;
+  line-height: 1;
+  margin: 0;
+  font-weight: 400;
+}
+.tab-bar__label:first-child {
+  font-size: 16px;
+  line-height: 49px;
+  margin: 0;
+  padding: 0;
+}
+.tab-bar__button {
+  color: #999;
+}
+:checked + .tab-bar__button {
+  color: rgba(24,103,194,0.81);
+  background-color: transparent;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-top: none;
+}
+.tab-bar__button:disabled {
+  opacity: 0.3;
+  cursor: default;
+  pointer-events: none;
+}
+.tab-bar__button:focus {
+  z-index: 1;
+  border-top: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  outline: 0;
+}
+.tab-bar__content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 49px;
+  z-index: 0;
+}
+.tab-bar--top {
+  position: relative;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: auto;
+  border-top: none;
+  border-bottom: 1px solid #ccc;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .tab-bar--top {
+    border-bottom: none;
+    -webkit-background-size: 100% 1px;
+    background-size: 100% 1px;
+    background-repeat: no-repeat;
+    background-position: bottom;
+    background-image: -webkit-linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
+    background-image: -moz-linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
+    background-image: -o-linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
+    background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
+  }
+}
+.tab-bar--top__content {
+  top: 49px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 0;
+}
+.tab-bar--top-border__button {
+  background-color: transparent;
+  border-bottom: 4px solid transparent;
+}
+:checked + .tab-bar--top-border__button {
+  background-color: transparent;
+  border-bottom: 4px solid rgba(24,103,194,0.81);
+}
+.tab-bar--material {
+  background-color: #3c8dbc;
+  border-bottom-width: 0px;
+  -webkit-box-shadow: 0 4px 2px -2px rgba(0,0,0,0.14), 0 3px 5px -2px rgba(0,0,0,0.12), 0 5px 1px -4px rgba(0,0,0,0.2);
+  box-shadow: 0 4px 2px -2px rgba(0,0,0,0.14), 0 3px 5px -2px rgba(0,0,0,0.12), 0 5px 1px -4px rgba(0,0,0,0.2);
+}
+.tab-bar--material__button {
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: 'Roboto', 'Noto', sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+.tab-bar--material__button:after {
+  content: '';
+  display: block;
+  width: 0px;
+  height: 2px;
+  bottom: 0px;
+  position: absolute;
+  margin-top: -2px;
+  background-color: #ffffff;
+}
+:checked + .tab-bar--material__button:after {
+  width: 100%;
+  -webkit-transition: width 0.2s ease-in-out;
+  -moz-transition: width 0.2s ease-in-out;
+  -o-transition: width 0.2s ease-in-out;
+  transition: width 0.2s ease-in-out;
+}
+:checked + .tab-bar--material__button {
+  background-color: transparent;
+  color: #ffffff;
+}
+.tab-bar--material__item:not([ripple]):active {
+  background-color: #3c8dbc;
+}
+.tab-bar--material__label {
+  font-family: 'Roboto', 'Noto', sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+.tab-bar--material__label:first-child {
+  font-family: 'Roboto', 'Noto', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  letter-spacing: 0.015em;
+  font-weight: 500;
+  font-size: 14px;
+}
+.tab-bar--material__icon + .tab-bar--material__label {
+  font-size: 10px;
 }
 
 .radio-button__input {
@@ -343,7 +615,6 @@
   line-height: 22px;
   font-family: 'Roboto', 'Noto', sans-serif;
   -webkit-font-smoothing: antialiased;
-  font-weight: 100;
 }
 .radio-button--material__checkmark {
   width: 20px;
@@ -385,7 +656,7 @@
 }
 .radio-button--material__input:checked + .radio-button__checkmark:before {
   background: transparent;
-  border: 2px solid #009688;
+  border: 2px solid #3c8dbc;
 }
 .radio-button--material__input + .radio-button__checkmark:after {
   background: #717171;
@@ -398,7 +669,7 @@
 }
 .radio-button--material__input:checked + .radio-button__checkmark:after {
   opacity: 1;
-  background: #009688;
+  background: #3c8dbc;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
@@ -416,515 +687,4 @@
   border-color: #afafaf;
 }
 
-.tab-bar {
-  font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-weight: 400;
-  font-size: 17px;
-  display: table;
-  table-layout: fixed;
-  position: absolute;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  white-space: nowrap;
-  margin: 0;
-  padding: 0;
-  height: 49px;
-  background-color: #fff;
-  border-top: 1px solid #ccc;
-  width: 100%;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  .tab-bar {
-    border-top: none;
-    -webkit-background-size: 100% 1px;
-    background-size: 100% 1px;
-    background-repeat: no-repeat;
-    background-position: top;
-    background-image: -webkit-linear-gradient(270deg, #ccc, #ccc 50%, transparent 50%);
-    background-image: -moz-linear-gradient(270deg, #ccc, #ccc 50%, transparent 50%);
-    background-image: -o-linear-gradient(270deg, #ccc, #ccc 50%, transparent 50%);
-    background-image: linear-gradient(180deg, #ccc, #ccc 50%, transparent 50%);
-  }
-}
-.tab-bar__item {
-  font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-weight: 400;
-  font-size: 17px;
-  position: relative;
-  overflow: hidden;
-  display: table-cell;
-  width: auto;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-.tab-bar__item > input {
-  position: absolute;
-  overflow: hidden;
-  right: 0px;
-  top: 0px;
-  left: 0px;
-  bottom: 0px;
-  padding: 0;
-  border: 0;
-  opacity: 0.001;
-  z-index: 1;
-  vertical-align: top;
-  outline: none;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  -webkit-appearance: none;
-  appearance: none;
-}
-.tab-bar__button {
-  position: relative;
-  display: inline-block;
-  vertical-align: top;
-  font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-weight: 400;
-  font-size: 17px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-background-clip: padding-box;
-  background-clip: padding-box;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  background: transparent;
-  border: none;
-  line-height: normal;
-  cursor: default;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  text-decoration: none;
-  padding: 0;
-  height: 49px;
-  letter-spacing: 0;
-  color: #999;
-  text-shadow: 0 1px none;
-  vertical-align: top;
-  background-color: transparent;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  border-top: none;
-  width: 100%;
-  font-weight: 400;
-  line-height: 49px;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  .tab-bar__button {
-    border-top: none;
-  }
-}
-.tab-bar__icon {
-  font-size: 24px;
-  padding: 0;
-  margin: 0;
-  line-height: 26px;
-  display: block;
-  height: 28px;
-}
-.tab-bar__label {
-  font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-weight: 400;
-  font-size: 17px;
-}
-.tab-bar__badge.notification {
-  position: absolute;
-  top: 5px;
-  z-index: 10;
-  font-size: 12px;
-  height: 16px;
-  line-height: 16px;
-  -webkit-border-radius: 8px;
-  border-radius: 8px;
-}
-.tab-bar__icon + .tab-bar__label {
-  font-size: 10px;
-  line-height: 1;
-  margin: 0;
-  font-weight: 400;
-}
-.tab-bar__label:first-child {
-  font-size: 16px;
-  line-height: 49px;
-  margin: 0;
-  padding: 0;
-}
-.tab-bar__button {
-  color: #999;
-}
-:checked + .tab-bar__button {
-  color: rgba(24,103,194,0.81);
-  background-color: transparent;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  border-top: none;
-}
-.tab-bar__button:disabled {
-  opacity: 0.3;
-  cursor: default;
-  pointer-events: none;
-}
-.tab-bar__button:focus {
-  z-index: 1;
-  border-top: none;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  outline: 0;
-}
-.tab-bar__content {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 49px;
-  z-index: 0;
-}
-.tab-bar--top {
-  position: relative;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  bottom: auto;
-  border-top: none;
-  border-bottom: 1px solid #ccc;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  .tab-bar--top {
-    border-bottom: none;
-    -webkit-background-size: 100% 1px;
-    background-size: 100% 1px;
-    background-repeat: no-repeat;
-    background-position: bottom;
-    background-image: -webkit-linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
-    background-image: -moz-linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
-    background-image: -o-linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
-    background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
-  }
-}
-.tab-bar--top__content {
-  top: 49px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 0;
-}
-.tab-bar--top-border__button {
-  background-color: transparent;
-  border-bottom: 4px solid transparent;
-}
-:checked + .tab-bar--top-border__button {
-  background-color: transparent;
-  border-bottom: 4px solid rgba(24,103,194,0.81);
-}
-.tab-bar--material {
-  background-color: #009688;
-  border-bottom-width: 0px;
-  -webkit-box-shadow: 0 4px 2px -2px rgba(0,0,0,0.14), 0 3px 5px -2px rgba(0,0,0,0.12), 0 5px 1px -4px rgba(0,0,0,0.2);
-  box-shadow: 0 4px 2px -2px rgba(0,0,0,0.14), 0 3px 5px -2px rgba(0,0,0,0.12), 0 5px 1px -4px rgba(0,0,0,0.2);
-}
-.tab-bar--material__button {
-  background-color: transparent;
-  color: rgba(255, 255, 255, 0.6);
-  text-transform: uppercase;
-  font-size: 14px;
-  font-weight: 500;
-  font-family: 'Roboto', 'Noto', sans-serif;
-  -webkit-font-smoothing: antialiased;
-}
-.tab-bar--material__button:after {
-  content: '';
-  display: block;
-  width: 0px;
-  height: 2px;
-  bottom: 0px;
-  position: absolute;
-  margin-top: -2px;
-  background-color: #ffffff;
-}
-:checked + .tab-bar--material__button:after {
-  width: 100%;
-  -webkit-transition: width 0.2s ease-in-out;
-  -moz-transition: width 0.2s ease-in-out;
-  -o-transition: width 0.2s ease-in-out;
-  transition: width 0.2s ease-in-out;
-}
-:checked + .tab-bar--material__button {
-  background-color: transparent;
-  color: #ffffff;
-}
-.tab-bar--material__item:not([ripple]):active {
-  background-color: #26a69a;
-}
-.tab-bar--material__label {
-  font-family: 'Roboto', 'Noto', sans-serif;
-  -webkit-font-smoothing: antialiased;
-}
-.tab-bar--material__label:first-child {
-  font-family: 'Roboto', 'Noto', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  letter-spacing: 0.015em;
-  font-weight: 500;
-  font-size: 14px;
-}
-.tab-bar--material__icon + .tab-bar--material__label {
-  font-size: 10px;
-}
 
-.list__item__left {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 12px 14px 12px 0;
-  -webkit-box-ordinal-group: 1;
-  -webkit-order: 0;
-  -moz-box-ordinal-group: 1;
-  -ms-flex-order: 0;
-  order: 0;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  -moz-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  line-height: 1.2em;
-  min-height: 44px;
-}
-.list__item__left:empty {
-  width: 0;
-  min-width: 0;
-  padding: 0;
-  margin: 0;
-}
-.list__item__center {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -moz-box-flex: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: row;
-  -moz-box-orient: horizontal;
-  -moz-box-direction: normal;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-ordinal-group: 2;
-  -webkit-order: 1;
-  -moz-box-ordinal-group: 2;
-  -ms-flex-order: 1;
-  order: 1;
-  margin-right: auto;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  -moz-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  margin-left: 0;
-  border-bottom: none;
-  -webkit-background-size: 100% 1px;
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-  background-position: bottom;
-  background-image: -webkit-linear-gradient(90deg, #ccc, #ccc 100%);
-  background-image: -moz-linear-gradient(90deg, #ccc, #ccc 100%);
-  background-image: -o-linear-gradient(90deg, #ccc, #ccc 100%);
-  background-image: linear-gradient(0deg, #ccc, #ccc 100%);
-  padding: 12px 6px 12px 0;
-  line-height: 1.2em;
-  min-height: 44px;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  .list__item__center {
-    background-image: -webkit-linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
-    background-image: -moz-linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
-    background-image: -o-linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
-    background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
-  }
-}
-.list__item__right {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: flex;
-  margin-left: auto;
-  padding: 12px 12px 12px 0;
-  -webkit-box-ordinal-group: 3;
-  -webkit-order: 2;
-  -moz-box-ordinal-group: 3;
-  -ms-flex-order: 2;
-  order: 2;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  -moz-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  border-bottom: none;
-  -webkit-background-size: 100% 1px;
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-  background-position: bottom;
-  background-image: -webkit-linear-gradient(90deg, #ccc, #ccc 100%);
-  background-image: -moz-linear-gradient(90deg, #ccc, #ccc 100%);
-  background-image: -o-linear-gradient(90deg, #ccc, #ccc 100%);
-  background-image: linear-gradient(0deg, #ccc, #ccc 100%);
-  line-height: 1.2em;
-  min-height: 44px;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  .list__item__right {
-    background-image: -webkit-linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
-    background-image: -moz-linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
-    background-image: -o-linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
-    background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
-  }
-}
-.list__header {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  text-align: left;
-  display: block;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  padding: 20px 0 0 15px;
-  font-size: 12px;
-  font-weight: 500;
-  color: #1f1f21;
-  text-shadow: none;
-  border-top: none;
-  border-bottom: 1px solid #ccc;
-  -webkit-box-shadow: 0px 1px 0px 0px #fff;
-  box-shadow: 0px 1px 0px 0px #fff;
-  min-height: 24px;
-  line-height: 24px;
-  margin-top: -1px;
-  text-transform: uppercase;
-  position: relative;
-}
-.list__header:not(:first-of-type) {
-  border-top: 1px solid #ccc;
-}
-.list {
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  background: transparent;
-  border: none;
-  line-height: normal;
-  cursor: default;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-weight: 400;
-  font-size: 17px;
-  padding: 0;
-  margin: 0;
-  list-style-type: none;
-  text-align: left;
-  overflow: auto;
-  display: block;
-  -webkit-overflow-scrolling: touch;
-  border-bottom: 1px solid #ccc;
-  overflow: hidden;
-}
-.list__item {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  position: relative;
-  list-style: none;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: row;
-  -moz-box-orient: horizontal;
-  -moz-box-direction: normal;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -moz-box-pack: start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  -moz-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  padding: 0 0 0 14px;
-  margin: 1px 0 -1px 0;
-  color: #1f1f21;
-  background-color: #fff;
-}
-.list__item:first-child {
-  -webkit-box-shadow: inset 0px 1px 0px 0px #ccc;
-  box-shadow: inset 0px 1px 0px 0px #ccc;
-  margin-top: 0;
-}
-.list__item_active:active {
-  background-color: #d9d9d9;
-  -webkit-transition: none;
-  -moz-transition: none;
-  -o-transition: none;
-  transition: none;
-}
-

--- a/assets/js/iotcc.js
+++ b/assets/js/iotcc.js
@@ -166,7 +166,7 @@
             iotCC.addHtml(json, this.templates[json.template]);
         } else {
             // TODO : fetch custom templates over HTTP
-            $.get('template/' + json.template + '.html', function(html) {
+            $.get('assets/template/' + json.template + '.html', function(html) {
                 iotCC.templates[json.template] = html;
                 iotCC.addHtml(json, html);
             });
@@ -219,32 +219,32 @@
     simulateDevices: function() {
         //this.mqttClient.publish('/iotcc/' + mqttConfig.clientId + '/device', '{"command":"getDevice","param":""}', {qos: 1, retained: false});
         this.mqttClient.publish('/iotcc/heater1/device', '{"name":"House heating 1","desc":"", "pages" : [{"pageId" : 10, "pageName" : "House heating", "icon": "ion-ios-home"}]}', {qos: 1, retained: false});
-        this.mqttClient.publish('/iotcc/heater1/heater/config', '{"id":"100", "pageName": "House heating", "pageId": 10, "widget":"radios", "title":"Hollway Heater", "topic":"/iotcc/heater1/heater", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}], "template": "template-3", "icon": "ion-ios-home", "bgcolor": "bg-yellow", "order": 40}', {qos: 1, retained: false});
+        this.mqttClient.publish('/iotcc/heater1/heater/config', '{"id":"100", "pageName": "House heating", "pageId": 10, "widget":"radios", "title":"Hollway Heater", "topic":"/iotcc/heater1/heater", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}], "template": "template-3", "icon": "ion-ios-home", "bgcolor": "bg-blue", "order": 40}', {qos: 1, retained: false});
 
         this.mqttClient.publish('/iotcc/heater2/device', '{"name":"House heating 2","desc":"", "pages" : [{"pageId" : 10, "pageName" : "House heating", "icon": "ion-ios-home"}]}', {qos: 1, retained: false});
-        this.mqttClient.publish('/iotcc/heater2/heater/config', '{"id":"101", "pageName": "House heating", "pageId": 10, "widget":"radios", "title":"Kitchen Heater", "topic":"/iotcc/heater2/heater", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}], "template": "template-3", "icon": "ion-ios-home", "bgcolor": "bg-yellow", "order": 30}', {qos: 1, retained: false});
+        this.mqttClient.publish('/iotcc/heater2/heater/config', '{"id":"101", "pageName": "House heating", "pageId": 10, "widget":"radios", "title":"Kitchen Heater", "topic":"/iotcc/heater2/heater", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}], "template": "template-3", "icon": "ion-ios-home", "bgcolor": "bg-blue", "order": 30}', {qos: 1, retained: false});
 
         this.mqttClient.publish('/iotcc/heater3/device', '{"name":"House heating 3","desc":"", "pages" : [{"pageId" : 10, "pageName" : "House heating", "icon": "ion-ios-home"}]}', {qos: 1, retained: false});
-        this.mqttClient.publish('/iotcc/heater3/heater/config', '{"id":"102", "pageName": "House heating", "pageId": 10, "widget":"radios", "title":"Bedroom Heater", "topic":"/iotcc/heater3/heater", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}], "template": "template-3", "icon": "ion-ios-home", "bgcolor": "bg-yellow", "order": 10}', {qos: 1, retained: false});
+        this.mqttClient.publish('/iotcc/heater3/heater/config', '{"id":"102", "pageName": "House heating", "pageId": 10, "widget":"radios", "title":"Bedroom Heater", "topic":"/iotcc/heater3/heater", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}], "template": "template-3", "icon": "ion-ios-home", "bgcolor": "bg-blue", "order": 10}', {qos: 1, retained: false});
 
         this.mqttClient.publish('/iotcc/heater4/device', '{"name":"House heating 4","desc":"", "pages" : [{"pageId" : 10, "pageName" : "House heating", "icon": "ion-ios-home"}]}', {qos: 1, retained: false});
-        this.mqttClient.publish('/iotcc/heater4/heater/config', '{"id":"103", "pageName": "House heating", "pageId": 10, "widget":"radios", "title":"Living Heater", "topic":"/iotcc/heater4/heater", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}], "template": "template-3", "icon": "ion-ios-home", "bgcolor": "bg-yellow", "order": 20}', {qos: 1, retained: false});
+        this.mqttClient.publish('/iotcc/heater4/heater/config', '{"id":"103", "pageName": "House heating", "pageId": 10, "widget":"radios", "title":"Living Heater", "topic":"/iotcc/heater4/heater", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}], "template": "template-3", "icon": "ion-ios-home", "bgcolor": "bg-blue", "order": 20}', {qos: 1, retained: false});
 
         this.mqttClient.publish('/iotcc/dogsheating/device', '{"name":"Dogs heating","desc":"", "pages" : [{"pageId" : 20, "pageName" : "Dogs heating", "icon": "ion-ios-paw"}]}', {qos: 1, retained: false});
-        this.mqttClient.publish('/iotcc/dogsheating/toggle1/config', '{"id":"200", "pageName": "Dogs heating", "pageId": 20, "widget":"toggle", "title":"Mara", "topic":"/iotcc/dogsheating/toggle1", "checked":true, "template": "template-1", "icon": "ion-ios-paw", "order" : 10}', {qos: 1, retained: false});
-        this.mqttClient.publish('/iotcc/dogsheating/toggle2/config', '{"id":"201", "pageName": "Dogs Heating", "pageId": 20, "widget":"toggle", "title":"Linda", "topic":"/iotcc/dogsheating/toggle2", "template": "template-1", "icon": "ion-ios-paw", "order" : 20}', {qos: 1, retained: false});
+        this.mqttClient.publish('/iotcc/dogsheating/toggle1/config', '{"id":"200", "pageName": "Dogs heating", "pageId": 20, "widget":"toggle", "title":"Mara", "topic":"/iotcc/dogsheating/toggle1", "checked":true, "template": "template-1", "icon": "ion-ios-paw", "bgcolor": "bg-green", "order" : 10}', {qos: 1, retained: false});
+        this.mqttClient.publish('/iotcc/dogsheating/toggle2/config', '{"id":"201", "pageName": "Dogs Heating", "pageId": 20, "widget":"toggle", "title":"Linda", "topic":"/iotcc/dogsheating/toggle2", "template": "template-1", "icon": "ion-ios-paw", "bgcolor": "bg-green", "order" : 20}', {qos: 1, retained: false});
 
         this.mqttClient.publish('/iotcc/outdoorlights1/device', '{"name":"Outdoor lighting 1","desc":"", "pages" : [{"pageId" : 30, "pageName" : "Outdoor Lights", "icon": "ion-ios-home"}]}', {qos: 1, retained: false});
-        this.mqttClient.publish('/iotcc/outdoorlights1/garage/config', '{"id":"300", "pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"Garage", "topic":"/iotcc/outdoorlights/garage", "checked":true, "template": "template-1", "icon": "ion-model-s", "order": 40}', {qos: 1, retained: false});
+        this.mqttClient.publish('/iotcc/outdoorlights1/garage/config', '{"id":"300", "pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"Garage", "topic":"/iotcc/outdoorlights/garage", "checked":true, "template": "template-1", "icon": "ion-model-s", "bgcolor": "bg-orange", "order": 40}', {qos: 1, retained: false});
 
         this.mqttClient.publish('/iotcc/outdoorlights2/device', '{"name":"Outdoor lighting 2","desc":"", "pages" : [{"pageId" : 30, "pageName" : "Outdoor Lights", "icon": "ion-ios-home"}]}', {qos: 1, retained: false});
-        this.mqttClient.publish('/iotcc/outdoorlights2/house1/config', '{"id":"301", "pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"House front", "topic":"/iotcc/outdoorlights/house1", "template": "template-1", "icon": "ion-ios-home", "order": 10}', {qos: 1, retained: false});
+        this.mqttClient.publish('/iotcc/outdoorlights2/house1/config', '{"id":"301", "pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"House front", "topic":"/iotcc/outdoorlights/house1", "template": "template-1", "icon": "ion-ios-home", "bgcolor": "bg-orange", "order": 10}', {qos: 1, retained: false});
 
         this.mqttClient.publish('/iotcc/outdoorlights3/device', '{"name":"Outdoor lighting 3","desc":"", "pages" : [{"pageId" : 30, "pageName" : "Outdoor Lights", "icon": "ion-ios-home"}]}', {qos: 1, retained: false});
-        this.mqttClient.publish('/iotcc/outdoorlights3/house2/config', '{"id":"302", "pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"House back", "topic":"/iotcc/outdoorlights/house2", "template": "template-1", "icon": "ion-ios-home", "order": 20}', {qos: 1, retained: false});
+        this.mqttClient.publish('/iotcc/outdoorlights3/house2/config', '{"id":"302", "pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"House back", "topic":"/iotcc/outdoorlights/house2", "template": "template-1", "icon": "ion-ios-home", "bgcolor": "bg-orange", "order": 20}', {qos: 1, retained: false});
 
         this.mqttClient.publish('/iotcc/outdoorlights4/device', '{"name":"Outdoor lighting 4","desc":"", "pages" : [{"pageId" : 30, "pageName" : "Outdoor Lights", "icon": "ion-ios-home"}]}', {qos: 1, retained: false});
-        this.mqttClient.publish('/iotcc/outdoorlights4/house3/config', '{"id":"302", "pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"House sides", "topic":"/iotcc/outdoorlights/house3", "template": "template-1", "icon": "ion-ios-home", "order": 30}', {qos: 1, retained: false});
+        this.mqttClient.publish('/iotcc/outdoorlights4/house3/config', '{"id":"302", "pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"House sides", "topic":"/iotcc/outdoorlights/house3", "template": "template-1", "icon": "ion-ios-home", "bgcolor": "bg-orange", "order": 30}', {qos: 1, retained: false});
     },
 }
 

--- /dev/null
+++ b/assets/template/template-1.html
@@ -1,1 +1,12 @@
-
+<div class="col-md-3 col-sm-6 col-xs-12 widgetcontainer" data-order="{order}">
+    <div class="info-box widget">
+        <span class="info-box-icon {bgcolor}"><i class="ion {icon}"></i></span>
+        <div class="info-box-content">
+            <span class="info-box-text"><b>{title}</b></span>
+            <span class="">
+                {content}
+            </span>
+            <span class="info-box-text">{description}</span>
+        </div>
+    </div>
+</div>

--- /dev/null
+++ b/assets/template/template-2.html
@@ -1,1 +1,11 @@
-
+<div class="col-lg-3 col-xs-6 widgetcontainer" data-order="{order}">
+    <div class="small-box {bgcolor}">
+        <div class="inner">
+            <h3>{title}</h3>
+            <p>{content}</p>
+        </div>
+        <div class="icon">
+            <i class="ion {icon}"></i>
+        </div>
+    </div>
+</div>

--- /dev/null
+++ b/assets/template/template-3.html
@@ -1,1 +1,15 @@
-
+<div class="col-md-3 col-sm-6 col-xs-12 widgetcontainer" data-order="{order}">
+    <div class="info-box box">
+        <div class="box-header with-border {bgcolor}">
+            <span class="info-box-text"><b>{title}</b></span>
+            <div class="box-tools pull-right">
+                <div class="icon">
+                    <i class="ion {icon}"></i>
+                </div>
+            </div>
+        </div>
+        <div class="box-body">
+            {content}
+        </div>
+    </div>
+</div>

file:a/index.html -> file:b/index.html
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
   <link rel="stylesheet" href="assets/css/iotcc.css">
 </head>
 
-<body class="hold-transition skin-yellow sidebar-mini sidebar-collapse">
+<body class="hold-transition skin-blue sidebar-mini sidebar-collapse">
 <div class="wrapper">
     <header class="main-header">
     <!-- Logo -->

--- a/template/template-1.html
+++ /dev/null
@@ -1,12 +1,1 @@
-<div class="col-md-3 col-sm-6 col-xs-12 widgetcontainer" data-order="{order}">
-    <div class="info-box widget">
-        <span class="info-box-icon {bgcolor}"><i class="ion {icon}"></i></span>
-        <div class="info-box-content">
-            <span class="info-box-text"><b>{title}</b></span>
-            <span class="">
-                {content}
-            </span>
-            <span class="info-box-text">{description}</span>
-        </div>
-    </div>
-</div>
+

--- a/template/template-2.html
+++ /dev/null
@@ -1,11 +1,1 @@
-<div class="col-lg-3 col-xs-6 widgetcontainer" data-order="{order}">
-    <div class="small-box {bgcolor}">
-        <div class="inner">
-            <h3>{title}</h3>
-            <p>{content}</p>
-        </div>
-        <div class="icon">
-            <i class="ion {icon}"></i>
-        </div>
-    </div>
-</div>
+

--- a/template/template-3.html
+++ /dev/null
@@ -1,15 +1,1 @@
-<div class="col-md-3 col-sm-6 col-xs-12 widgetcontainer" data-order="{order}">
-    <div class="info-box box {bgcolor}">
-        <div class="box-header with-border">
-            <span class="info-box-text"><b>{title}</b></span>
-            <div class="box-tools pull-right">
-                <div class="icon">
-                    <i class="ion {icon}"></i>
-                </div>
-            </div>
-        </div>
-        <div class="box-body">
-            {content}
-        </div>
-    </div>
-</div>
+

comments