diff --git a/web_interface/html/agent_tab_launch.html b/web_interface/html/agent_tab_launch.html
index 117fd361f56fbef0a5fcc5b11a353b326ff9e66e..c8850726ac770f541b63861a15fbd70bc6fca3f8 100644
--- a/web_interface/html/agent_tab_launch.html
+++ b/web_interface/html/agent_tab_launch.html
@@ -15,13 +15,69 @@
>
Check for ROS Master
<div class="div-for-button-highlight-on-touchscreen navy"></div>
- </button>
+ </button>
</td>
<td class="ros-info-cell">
<div id="rosMasterStatus"></div>
</td>
</tr>
+ <tr>
+ <td class="ros-button-cell">
+ <button
+ class="button-push navy fullwidth"
+ id="buttonLaunchRosMaster"
+ onclick="callBashScript_outputLabelID_clearOtherLabels_clickOtherButtons('launchRosMaster', 'rosLaunchMasterStatus', 'killMasterStatus', ['buttonRosMasterStatus','buttonRosAgentStatus','buttonRosNodeList'])"
+ >
+ Launch ROS Master
+ <div class="div-for-button-highlight-on-touchscreen navy"></div>
+ </button>
+ </td>
+ <td class="ros-info-cell">
+ <div id="rosLaunchMasterStatus"></div>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <table>
+ <td class="switch-cell pad-right">
+ <div class="on-off-switch type4">
+ <input type="checkbox" id="checkboxEmulateMocap"><label for="checkboxEmulateMocap"></label>
+ </div>
+ </td>
+ <td class="ros-info-cell">
+ Emulate motion capture
+ </td>
+ </table>
+ </td>
+ <td class="ros-info-cell">
+  
+ </td>
+ </tr>
+ <tr>
+ <td class="ros-button-cell">
+ <button
+ class="button-push red fullwidth"
+ id="buttonKillRosMaster"
+ onclick="callBashScript_outputLabelID_clearOtherLabels_clickOtherButtons('killRosMaster', 'killMasterStatus', 'rosLaunchMasterStatus', ['buttonRosMasterStatus','buttonRosAgentStatus','buttonRosNodeList'])"
+ >
+ Kill ROS Master
+ <div class="div-for-button-highlight-on-touchscreen red"></div>
+ </button>
+ </td>
+ <td class="ros-info-cell">
+ <div id="killMasterStatus"></div>
+ </td>
+ </tr>
+
+ </table>
+
+ <br>
+ <hr class="hr-basic navy">
+ <br>
+
+ <table class="ros-table">
+
<tr>
<td class="ros-button-cell">
<button
@@ -31,7 +87,7 @@
>
Check for ROS Agent
<div class="div-for-button-highlight-on-touchscreen navy"></div>
- </button>
+ </button>
</td>
<td class="ros-info-cell">
<div id="rosAgentStatus"></div>
@@ -47,13 +103,29 @@
>
Launch ROS Agent
<div class="div-for-button-highlight-on-touchscreen navy"></div>
- </button>
+ </button>
</td>
<td class="ros-info-cell">
<div id="rosLaunchAgentStatus"></div>
</td>
</tr>
-
+ <tr>
+ <td>
+ <table>
+ <td class="switch-cell pad-right">
+ <div class="on-off-switch type4">
+ <input type="checkbox" id="checkboxEmulateCrazyRadio"><label for="checkboxEmulateCrazyRadio"></label>
+ </div>
+ </td>
+ <td class="ros-info-cell">
+ Emulate CrazyRadio
+ </td>
+ </table>
+ </td>
+ <td class="ros-info-cell">
+  
+ </td>
+ </tr>
<tr>
<td class="ros-button-cell">
<button
@@ -63,13 +135,21 @@
>
Kill ROS Agent
<div class="div-for-button-highlight-on-touchscreen red"></div>
- </button>
+ </button>
</td>
<td class="ros-info-cell">
<div id="killAgentStatus"></div>
</td>
</tr>
+ </table>
+
+ <br>
+ <hr class="hr-basic navy">
+ <br>
+
+ <table class="ros-table">
+
<tr>
<td class="ros-button-cell">
<button
@@ -79,7 +159,7 @@
>
List ROS Nodes
<div class="div-for-button-highlight-on-touchscreen navy"></div>
- </button>
+ </button>
</td>
<td></td>
</tr>
diff --git a/web_interface/html/css/layout.css b/web_interface/html/css/layout.css
index a4430fbe02b143fb4b1d9aad461656f56c5fb0e3..b156d1ebe5a7cd30b19e918ecafaaccc13d3415c 100644
--- a/web_interface/html/css/layout.css
+++ b/web_interface/html/css/layout.css
@@ -140,6 +140,30 @@
//border: 1px solid black;
}
+
+
+.switch-cell
+{
+ padding-top: 5px;
+ padding-bottom: 5px;
+ padding-left: 0px;
+ padding-right: 0px;
+ text-align: left;
+ //border: 1px solid black;
+}
+
+.switch-cell.pad-right
+{
+ padding-right: 5px;
+}
+
+.switch-cell.pad-left
+{
+ padding-left: 5px;
+}
+
+
+
.git-table
{
position: relative;
diff --git a/web_interface/html/css/switches.css b/web_interface/html/css/switches.css
new file mode 100644
index 0000000000000000000000000000000000000000..82e09139295f8aeacfc5a9f857264703d1812ab0
--- /dev/null
+++ b/web_interface/html/css/switches.css
@@ -0,0 +1,430 @@
+/* =========================== */
+/* === PLAIN SWITCH === */
+/* =========================== */
+.on-off-switch-neighbouring-labelon-off-switch-neighbouring-label
+{
+ display: inline;
+ line-height: 90px;
+}
+
+.on-off-switch
+{
+ position: relative;
+ display: inline-block;
+}
+
+.on-off-switch:after, .on-off-switch:before
+{
+ font-family: Arial;
+ font-feature-settings: normal;
+ font-kerning: auto;
+ font-language-override: normal;
+ font-stretch: normal;
+ font-style: normal;
+ font-synthesis: weight style;
+ font-variant: normal;
+ font-weight: normal;
+ text-rendering: auto;
+}
+
+.on-off-switch label
+{
+ position: relative;
+ display: inline-block;
+
+ width: 90px;
+ height: 42px;
+ background: #ccc;
+ border-radius: 21px;
+ transition: 0.4s;
+}
+
+.on-off-switch label:after
+{
+ position: absolute;
+ left: 0;
+ top: -5px;
+ z-index: 2;
+
+ content: '';
+
+ width: 50px;
+ height: 50px;
+ background: #fff;
+ border-radius: 100%;
+ box-shadow: 0 0 5px rgba(0,0,0,.2);
+ transition: 0.4s;
+}
+
+.on-off-switch input
+{
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 5;
+
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ cursor: pointer;
+}
+
+.on-off-switch input:hover + label:after
+{
+ box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .2), 0 3px 8px 0 rgba(0, 0, 0, .15);
+}
+
+.on-off-switch input:checked + label:after
+{
+ left: 40px;
+}
+
+
+
+
+
+/* =========================== */
+/* === TYPE 1 === */
+/* =========================== */
+.on-off-switch.type1 input:checked + label
+{
+ background: #376FCB;
+}
+
+.on-off-switch.type1 input:checked + label:after
+{
+ background: #4285F4;
+}
+
+
+
+
+
+/* =========================== */
+/* === TYPE 2 === */
+/* =========================== */
+.on-off-switch.type2:after
+{
+ position: absolute;
+ top: 0px;
+ right: 15px;
+
+ content: '';
+
+ color: #666;
+ font-family: Arial;
+ font-size: 25px;
+ line-height: 48px;
+ font-weight: bold;
+}
+
+.on-off-switch.type2 label
+{
+ width: 90px;
+ height: 40px;
+ background: none;
+ border:3px solid #777;
+ border-radius: 23px;
+}
+
+.on-off-switch.type2 label:after
+{
+ top: 4px;
+ left: auto;
+ right: 4px;
+ overflow: hidden;
+
+ content: 'YES';
+
+ width: 32px;
+ height: 32px;
+
+ color: #fff;
+ font-family: Arial;
+ font-size: 25px;
+ line-height: 32px;
+ text-align: center;
+ font-weight: bold;
+ text-indent: 100px;
+ background: #777;
+ box-shadow: none;
+ border-radius: 16px;
+
+ transform: translateX(-50px);
+ transition: all 0.4s 0.2s, width 0.2s linear, text-indent 0.4s linear;
+}
+
+.on-off-switch.type2 input:checked + label
+{
+ border-color: #329043;
+}
+
+.on-off-switch.type2 input:checked + label:after
+{
+ left: auto;
+
+ width: 82px;
+ text-indent: 0;
+ background: #3FB454;
+
+ transform: translateX(0px);
+ transition: all 0.4s, width 0.2s 0.4s linear, text-indent 0.3s 0.4s linear;
+}
+
+
+
+
+
+/* =========================== */
+/* === TYPE 3 === */
+/* =========================== */
+.on-off-switch.type3 label
+{
+ width: 90px;
+ height: 42px;
+ border: 5px solid #555;
+ border-radius: 26px;
+ background: none;
+}
+
+.on-off-switch.type3 label:after
+{
+ top: 2px;
+ left: 2px;
+
+ width: 38px;
+ height: 38px;
+ background: #555;
+ box-shadow(none);
+}
+
+.on-off-switch.type3 input:checked + label
+{
+ border-color: #329043;
+}
+
+.on-off-switch.type3 input:checked + label:after
+{
+ left: 50px;
+ background: #3FB454;
+}
+
+
+
+
+
+/* =========================== */
+/* === TYPE 4 === */
+/* =========================== */
+.on-off-switch.type4:after
+{
+ position: absolute;
+ right: 15px;
+ bottom: 15px;
+
+ //content: '\f00c';
+ //content: '\274E';
+ //content: '\2715';
+ //content: '\2716';
+ //content: '\2717';
+ content: '\2718';
+ //content: '\274C';
+
+ color: #aaa;
+}
+
+.on-off-switch.type4:before
+{
+ position: absolute;
+ left: 15px;
+ bottom: 15px;
+
+ //content: '\f00d';
+ //content: '\2705';
+ //content: '\2713';
+ content: '\2714';
+
+ color: #fff;
+ z-index: 1;
+}
+
+.on-off-switch.type4 label
+{
+ width: 80px;
+ height: 42px;
+ border-radius: 21px;
+ background: #EAEAEA;
+ box-shadow: 0 0 1px 2px rgba(0,0,0,.15);
+}
+
+.on-off-switch.type4 label:after
+{
+ top: 0;
+
+ width: 42px;
+ height: 42px;
+}
+
+.on-off-switch.type4 input:checked + label
+{
+ background: #269CE9;
+}
+
+.on-off-switch.type4 input:checked + label:after
+{
+ left: 38px;
+}
+
+
+
+
+/* SETTINGS FOR WHEN THE SCREEN IS SMALL */
+@media screen and (max-width: 420px)
+{
+
+ /* =========================== */
+ /* === PLAIN SWITCH === */
+ /* =========================== */
+ .on-off-switch-neighbouring-labelon-off-switch-neighbouring-label
+ {
+ line-height: 70px;
+ }
+
+ .on-off-switch label
+ {
+ width: 70px;
+ height: 32px;
+ border-radius: 16px;
+ }
+
+ .on-off-switch label:after
+ {
+ width: 40px;
+ height: 40px;
+ }
+
+ .on-off-switch input:checked + label:after
+ {
+ left: 30px;
+ }
+
+
+
+
+
+ /* =========================== */
+ /* === TYPE 2 === */
+ /* =========================== */
+ .on-off-switch.type2:after
+ {
+ top: 0px;
+ right: 12px;
+
+ content: '';
+
+ font-size: 18px;
+ line-height: 40px;
+ font-weight: bold;
+ }
+
+ .on-off-switch.type2 label
+ {
+ width: 70px;
+ height: 32px;
+ border:3px solid #777;
+ border-radius: 19px;
+ }
+
+ .on-off-switch.type2 label:after
+ {
+ top: 4px;
+ left: auto;
+ right: 4px;
+ overflow: hidden;
+
+ content: 'YES';
+
+ width: 24px;
+ height: 24px;
+
+ font-size: 18px;
+ line-height: 25px;
+ font-weight: bold;
+ text-indent: 80px;
+ border-radius: 12px;
+
+ transform: translateX(-38px);
+ }
+
+ .on-off-switch.type2 input:checked + label:after
+ {
+ width: 62px;
+ }
+
+
+
+
+
+ /* =========================== */
+ /* === TYPE 3 === */
+ /* =========================== */
+ .on-off-switch.type3 label
+ {
+ width: 70px;
+ height: 32px;
+ border: 5px solid #555;
+ border-radius: 21px;
+ }
+
+ .on-off-switch.type3 label:after
+ {
+ top: 2px;
+ left: 2px;
+
+ width: 28px;
+ height: 28px;
+ }
+
+ .on-off-switch.type3 input:checked + label:after
+ {
+ left: 40px;
+ }
+
+
+
+
+
+ /* =========================== */
+ /* === TYPE 4 === */
+ /* =========================== */
+ .on-off-switch.type4:after
+ {
+ right: 10px;
+ bottom: 10px;
+ }
+
+ .on-off-switch.type4:before
+ {
+ left: 10px;
+ bottom: 10px;
+ }
+
+ .on-off-switch.type4 label
+ {
+ width: 60px;
+ height: 32px;
+ border-radius: 16px;
+ }
+
+ .on-off-switch.type4 label:after
+ {
+ width: 32px;
+ height: 32px;
+ }
+
+ .on-off-switch.type4 input:checked + label:after
+ {
+ left: 28px;
+ }
+
+}
\ No newline at end of file
diff --git a/web_interface/html/css/switches_from_some_website.css b/web_interface/html/css/switches_from_some_website.css
new file mode 100644
index 0000000000000000000000000000000000000000..226c385a100017f1945e5f27cd960d5a7dbaff84
--- /dev/null
+++ b/web_interface/html/css/switches_from_some_website.css
@@ -0,0 +1,548 @@
+/*
+ TAKEN FROM:
+ https://codepen.io/vineethtrv/pen/QbqMXE
+*/
+
+@import "compass/css3";
+*, *:after, *:before{
+ @include box-sizing(border-box);
+}
+$blue : #4285F4;
+$green : #4BD865;
+$warning :#FF980F;
+
+body{
+ text-align: center;
+ background: #eee;
+}
+section{
+ float: left;
+ min-width: 150px;
+ width: 33.33%;
+ padding:25px 0;
+ min-height: 100px;
+}
+/*=====================*/
+.checkbox{
+ position: relative;
+ display: inline-block;
+
+ &:after, &:before{
+ font-family: FontAwesome;
+ font-feature-settings: normal;
+ font-kerning: auto;
+ font-language-override: normal;
+ font-stretch: normal;
+ font-style: normal;
+ font-synthesis: weight style;
+ font-variant: normal;
+ font-weight: normal;
+ text-rendering: auto;
+ }
+
+ label{
+ width: 90px;
+ height: 42px;
+ background: #ccc;
+ position: relative;
+ display: inline-block;
+ @include border-radius(46px);
+ @include transition(.4s);
+ &:after{
+ content: '';
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ @include border-radius(100%);
+ left: 0;
+ top: -5px;
+ z-index: 2;
+ background: #fff;
+ @include box-shadow(0 0 5px rgba(0,0,0,.2));
+ @include transition(.4s);
+ }
+ }
+ input{
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 5;
+ opacity: 0;
+ cursor:pointer;
+ &:hover +label:after{
+ @include box-shadow(0 2px 15px 0 rgba(0, 0, 0, .2), 0 3px 8px 0 rgba(0, 0, 0, .15))
+ }
+ &:checked + label{
+ &:after{
+ left: 40px;
+ }
+ }
+
+ }
+}
+
+.model-1{
+ .checkbox{
+ input:checked + label{
+ background: $blue/1.2;
+ &:after{
+ background: $blue;
+ }
+ }
+ }
+}
+
+.model-2{
+ .checkbox{
+ label{
+ width: 75px;
+ &:after{
+ top: 0;
+ width:42px;
+ height: 42px;
+ }
+ }
+ input:checked + label{
+ background: $green;
+ &:after{
+ left: 35px;
+ }
+ }
+ }
+}
+
+.model-3{
+ .checkbox{
+ label{
+ background: #fff;
+ border:1px solid #eee;
+ height: 38px;
+ &:after{
+ background: #bbb;
+ top: 3px;
+ left: 5px;
+ width:30px;
+ height: 30px;
+ }
+ }
+ input:checked + label{
+ &:after{
+ background: $green/1.2;
+ left: 55px;
+ }
+ }
+ }
+}
+
+.model-4{
+ .checkbox{
+ label{
+ background: #bbb;
+ height: 25px;
+ width: 75px;
+ &:after{
+ background: #fff;
+ top: -8px;
+ width:38px;
+ height: 38px;
+ }
+ }
+ input:checked + label{
+ background: #77C2BB;
+ &:after{
+ background: #009688;
+ left: 40px;
+ }
+ }
+ }
+}
+.model-5{
+ .checkbox{
+ label{
+ background: #bbb;
+ height: 15px;
+ width: 85px;
+ &:after{
+ background: #fff;
+ top: -12px;
+ width:36px;
+ height: 36px;
+ }
+ }
+ input:hover + label:after{
+ @include scale(1.4);
+ }
+ input:checked + label{
+ background: $warning/1.4;
+ &:after{
+ background: $warning;
+ left: 50px;
+ }
+ }
+ }
+}
+.model-6{
+ .checkbox{
+ label{
+ background: #bbb;
+ height: 2px;
+ width: 60px;
+ &:after{
+ background: #bbb;
+ top: -16px;
+ width:32px;
+ height: 32px;
+ }
+ }
+ input:checked + label{
+ background: $blue/1.2;
+ &:after{
+ background:$blue;
+ left: 40px;
+ }
+ }
+ }
+}
+
+.model-7{
+ .checkbox{
+ label{
+ background: none;
+ border:5px solid #555;
+ height: 42px;
+ &:after{
+ background: #555;
+ @include box-shadow(none);
+ top: 2px;
+ left: 2px;
+ width:28px;
+ height: 28px;
+ }
+ }
+ input:checked + label{
+ border-color:$green/1.5;
+ &:after{
+ background: $green/1.2;
+ left: 50px;
+ }
+ }
+ }
+}
+.model-8{
+ .checkbox{
+ label{
+ background: #ddd;
+ width: 95px;
+ @include border-radius(10px);
+ &:after{
+ background: #fff;
+ @include border-radius(10px);
+ top: 0;
+ width:60px;
+ height: 42px;
+ }
+ }
+ input:checked + label{
+ background:$warning;
+ &:after{
+ left: 35px;
+ }
+ }
+ }
+}
+.model-9{
+ .checkbox{
+ label{
+ background: #aaa;
+ width: 90px;
+ height: 32px;
+ @include border-radius(20px);
+ &:after{
+ @include border-radius(20px);
+ top: 0;
+ width:50px;
+ height: 32px;
+ }
+ }
+ input:checked + label{
+ background:$green/2;
+ &:after{
+ background: $green/1.4;
+ left: 40px;
+ }
+ }
+ }
+}
+.model-10{
+ .checkbox{
+ &:after{
+ content: '\f00d';
+ color: #aaa;
+ position: relative;
+ right: 30px;
+ bottom: 15px;
+ }
+ &:before{
+ content: '\f00c';
+ position: relative;
+ left: 35px;
+ bottom: 15px;
+ color: #fff;
+ z-index: 1;
+ }
+ label{
+ width: 80px;
+ background: #EAEAEA;
+ @include box-shadow(0 0 1px 2px rgba(0,0,0,.15));
+ &:after{
+ top: 0;
+ width:42px;
+ height: 42px;
+ }
+ }
+ input:checked + label{
+ background: $green;
+ &:after{
+ left: 40px;
+ }
+ }
+ }
+}
+
+.model-11{
+ .checkbox{
+ &:after, &:before{
+ content: 'OFF';
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+ font-size: 12px;
+ color: #90201F;
+ }
+ &:before{
+ content: 'ON';
+ left: -40px;
+ z-index: 1;
+ color: $green/2;
+ }
+ label{
+ background: #E3666C;
+ height: 32px;
+ @include border-radius(0);
+ @include box-shadow(0 0 1px 2px rgba(0,0,0,.2));
+ &:after{
+ background-color: #ffffff;
+ @include filter-gradient(#ffffff, #ffffff, horizontal);
+ @include background-image(linear-gradient(left, #fff 30%,#ddd 45%,#fff 50%,#ddd 55%,#fff 70%));
+ @include border-radius(0);
+ @include box-shadow(none !important);
+ @include transition(.1s);
+ top: 0;
+ width:50px;
+ height: 32px;
+ }
+ }
+ input:checked + label{
+ background:$green;
+ &:after{
+ left: 40px;
+ }
+ }
+ }
+}
+
+
+.model-12{
+ .checkbox{
+ background: #2B2B2D;
+ height: 40px;
+ width: 160px;
+ @include border-radius(50px);
+ &:after, &:before{
+ content: 'ON';
+ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+ line-height: 40px;
+ font-size: 12px;
+ }
+ &:before{
+ content: 'OFF';
+ z-index: 1;
+ }
+ label{
+ background: #1E1E1E;
+ height:10px;
+ width: 70px;
+ margin: 0 5px;
+ @include box-shadow(0 0 2px 2px rgba(0,0,0,.3) inset) ;
+ &:after{
+ background-color: #3F4545;
+ @include background-image(linear-gradient(top, #666 0%,#3F4545 100%));
+ top: -9px;
+ width:27px;
+ height: 27px;
+ }
+ &:before{
+ content: '';
+ position: absolute;
+ width: 14px;
+ height: 14px;
+ @include border-radius(100%);
+ @include transition(.4s);
+ background:#151515;
+ z-index: 3;
+ left: 7px;
+ top: -2px;
+ }
+ }
+ input:checked + label{
+ &:after{
+ left: 45px;
+ }
+ &:before{
+ background: #94DA00;
+ @include box-shadow(0 0 5px #94DA00) ;
+ left: 52px;
+ }
+ }
+ }
+}
+.model-13{
+ .checkbox{
+ &:after{
+ content: 'NO';
+ font-family: Arial;
+ position: absolute;
+ color: #666;
+ top: 12px;
+ right: 15px;
+ }
+ label{
+ background: none;
+ border:3px solid #777;
+ height: 40px;
+ @include border-radius(20px);
+
+ &:after{
+ content: 'YES';
+ font-family: Arial;
+ color: #fff;
+ line-height: 28px;
+ text-indent: 100px;
+ background: #777;
+ overflow: hidden;
+ @include box-shadow(none);
+ @include border-radius(14px);
+ @include translateX(-50px);
+ @include transition(all .4s .2s, width .2s linear, text-indent .4s linear);
+
+ top: 3px;
+ left: auto;
+ right: 2px;
+ width:28px;
+ height: 28px;
+
+ }
+ }
+ input:checked + label{
+ border-color:$green/1.5;
+ &:after{
+ background: $green/1.2;
+ left: auto;
+ @include translateX(0px);
+ @include transition(all .4s, width .2s .4s linear, text-indent .3s .4s linear);
+ width: 80px;
+ text-indent: 0;
+ }
+ }
+ }
+}
+
+.model-14{
+ .checkbox{
+ &:after, &:before{
+ content: 'OFF';
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+ font-size: 12px;
+ color: #90201F;
+ }
+ &:before{
+ content: 'ON';
+ left: -40px;
+ z-index: 1;
+ color: $green/2;
+ }
+ label{
+ background:#fff;
+ height: 32px;
+ @include border-radius(0);
+ @include box-shadow(0 0 2px rgba(0,0,0,.2));
+ &:after{
+ background: #90201F;
+ @include border-radius(0);
+ @include box-shadow(none !important);
+ @include transition(.3s);
+ top: 0;
+ width:40px;
+ height: 32px;
+ }
+ }
+ input:checked + label{
+ &:after{
+ background:$green;
+ left: 50px;
+ }
+ }
+ }
+}
+.model-15{
+ .checkbox{
+ width: 94px;
+ height: 34px;
+ border: 2px solid #ddd;
+ background:$green/2;
+ @include border-radius(6px);
+ overflow: hidden;
+ &:after, label:before{
+ content: 'ON';
+ position: absolute;
+ left: 10px;
+ top: 8px;
+ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+ font-size: 12px;
+ color: #fff;
+ }
+ label:before{
+ content: 'OFF';
+ left:auto;
+ top: 8px;
+ right: 10px;
+ z-index: 1;
+ }
+ label{
+ background: #f00;
+ width: 90px;
+ height: 32px;
+ @include border-radius(4px);
+ &:after{
+ @include border-radius(4px);
+ @include box-shadow(none !important);
+ top: 0;
+ width:50px;
+ height: 32px;
+ }
+ }
+ input:checked + label{
+ @include translateX(40px);
+ &:after{
+ left:0;
+ }
+ }
+ }
+}
+
diff --git a/web_interface/html/page_header.html b/web_interface/html/page_header.html
index ad83bdcf4e4ed9654577c808104ec62de2ce187d..9caeb038dd9d0d55112856b309393fda079d5e86 100644
--- a/web_interface/html/page_header.html
+++ b/web_interface/html/page_header.html
@@ -22,6 +22,7 @@
<link rel="stylesheet" type="text/css" href="css/layout.css?ver=0.1" />
<link rel="stylesheet" type="text/css" href="css/body.css?ver=0.1" />
<link rel="stylesheet" type="text/css" href="css/buttons.css?ver=0.1" />
+ <link rel="stylesheet" type="text/css" href="css/switches.css?ver=0.1" />
<link rel="stylesheet" type="text/css" href="css/tabs_main.css?ver=0.1" />
<link rel="stylesheet" type="text/css" href="css/tabs_home.css?ver=0.1" />