<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    html {font-family: Arial; display: inline-block; text-align: left;}
    h2 {font-size: 3.0rem;}
    p {font-size: 3.0rem;}
    body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}
    .switch {position: relative; vertical-align: middle; display: inline-block; width: 60px; height: 34px}
    .switch input {display: none}
    .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 34px}
    .slider:before {position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 34px}
    input:checked+.slider {background-color: #2196F3}
    input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(26px)}
input[type="range"] {
  -webkit-appearance: none;
  margin-right: 15px;
  width: 300px;
  height: 34px;
  padding-left: 4px;
  padding-right: 4px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 34px;
  background-image: linear-gradient(#2196F3, #2196F3);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 26px;
  width: 26px;
  border-radius: 50%;
  background: #fff;
  cursor: ew-resize;
  box-shadow: 0 0 0px 0 #555;
  transition: background .3s ease-in-out;
}

input[type=range]::-webkit-slider-runnable-track  {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}
  </style>
</head>
<body>
<script>function toggleCheckbox(element) {
  var xhr = new XMLHttpRequest();
  if(element.checked){ xhr.open("GET", "/update?gpio="+element.id+"&value=1", true); }
  else { xhr.open("GET", "/update?gpio="+element.id+"&value=0", true); }
  xhr.send();
}
function toggleAllCheckboxes(source) {
  checkboxes = document.getElementsByName('foo');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked
    toggleCheckbox(checkboxes[i])
  }
}
function updatePWMValue(element) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/update?gpio="+element.id+"&value="+element.value, true);
  xhr.send();
}
</script>
  <h2>RPi3 Astro-battery <BR>Relay Server</h2>
  <h4><label class="switch"><input type="checkbox" onchange="toggleAllCheckboxes(this)"><span class="slider"></span></label> Toggle All</h4>

<form oninput="updatePWMValue(myrange);document.getElementById('dhpower').textContent=parseInt(myrange.value);">
  <h4><label class="switch"><input type="checkbox" name="foo" onchange="toggleCheckbox(this)" id="1" checked ><span class="slider"></span></label> Relay #1 - Astrocam - GPIO 8</h4>
  <h4><label class="switch"><input type="checkbox" name="foo" onchange="toggleCheckbox(this)" id="2" checked ><span class="slider"></span></label> Relay #2 - Lowcam - GPIO 9</h4>
  <h4><label class="switch"><input type="checkbox" name="foo" onchange="toggleCheckbox(this)" id="3"  ><span class="slider"></span></label> Relay #3 - Mount - GPIO 7</h4>
  <h4><label class="switch"><input type="checkbox" name="foo" onchange="toggleCheckbox(this)" id="4" checked ><span class="slider"></span></label> Relay #4 - N.I.N.A PC - GPIO 15</h4>
  <h4><label class="switch"><input type="checkbox" name="foo" onchange="toggleCheckbox(this)" id="5"  ><span class="slider"></span></label> Relay #5 - Flipflat - GPIO 16</h4>
  <h4><label class="switch"><input type="checkbox" name="foo" onchange="toggleCheckbox(this)" id="6"  ><span class="slider"></span></label> Relay #6 - Unassigned - GPIO 12</h4>
  <h4><label class="switch"><input type="checkbox" name="foo" onchange="toggleCheckbox(this)" id="7"  ><span class="slider"></span></label> Relay #7 - Camera - GPIO 13</h4>
  <h4><label class="switch"><input type="checkbox" name="foo" onchange="toggleCheckbox(this)" id="8" checked ><span class="slider"></span></label> Relay #8 - Dew header - GPIO 14 </h4>
  <h4><label class="range"><input type="range" name="myrange" oninput="updatePWMValue(this)" id="9" min="0" max="100" step="5" value="20" ><span class="range"></span></label> Dew header Power - GPIO 18 <span id="dhpower"> 20</span>% </h4>
</body>
</html>
