#ifndef nodemcu_h
#define nodemcu_h
#include <Arduino.h>



class Nodemcu
{
	public:
		Nodemcu();
		String poussoircentre(String nompoussoir, String couleur);
		String poussoir(String nompoussoir, String place, String couleur);
		String curseurweb(String nomcurseur, int mini, int maxi);
		String boutonweb(String nombouton);
		String boite(String nomboite);
		String interval(String adc, String unit, int periode);
		String telecommande();
		String orientation();
	private:
};


const char MAIN_page[] PROGMEM = R"=====(



<style>
span, div {
  font-size:48px;
  margin-left:20px;
}	

input[type=text]{
    width:100%;
	font-size:30px;
    border:2px solid #aaa;
    border-radius:4px;
    margin:8px 0;
    outline:none;
    padding:8px;
    box-sizing:border-box;
    transition:.3s;
  }
  
  input[type=text]:focus{
    border-color:dodgerBlue;
    box-shadow:0 0 8px 0 dodgerBlue;
  }
	
.switch {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 100px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0s;
  transition: 0s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 84px;
  width: 84px;
  left: 8px;
  bottom: 8px;
  background-color: white;
  -webkit-transition: 0s;
  transition: 0s;
	
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(80px);
  -ms-transform: translateX(80px);
  transform: translateX(80px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 60px;
}

.slider.round:before {
  border-radius: 50%;
}

.curseurcontainer {
  width: 90%;
}

.curseur {
  -webkit-appearance: none;
  width: 90%;
  height: 100px;
  border-radius: 20px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.curseur:hover {
  opacity: 1;
}

.curseur::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 100px;
  border-radius: 20px;
  background: #4CAF50;
  cursor: pointer;
}

.curseur::-moz-range-thumb {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  background: #4CAF50;
  cursor: pointer;
}

</style>


<script>

function sendEvent(couleur,etat) {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", couleur+"?valeur="+etat, true);
xhttp.send();
}

function sendData(nomcurseur,val) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById(nomcurseur).innerHTML =
      this.responseText;
    }
  };
xhttp.open("GET", nomcurseur+"?valeur="+val, true);
xhttp.send();
}

function sendCheck(checkbox) {
var xhttp = new XMLHttpRequest();
var etat = document.getElementById(checkbox).checked;
xhttp.open("GET", checkbox+"?valeur="+etat, true);
xhttp.send();
}


</script>

)=====";







#endif

