//#include <Arduino.h> //needed for Serial.println
//#include <string.h>

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ESP Web Server</title>
  <style>
    html {font-family: Calibri; display: inline-block; text-align: center;}
    h2 {font-size: 2.3rem;}
    p {font-size: 0.9rem;}
    body {max-width: 400px; margin:0px auto; padding-bottom: 25px; background-color: #3d3d3d;}
    .sliderLong { -webkit-appearance: none; margin: 14px; width: 200px; height: 10px;  border-radius: 3px; background: #FFD65C;
      outline: none; -webkit-transition: .2s; transition: opacity .2s;}
    .sliderLong::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 18px; height: 18px;  border-radius: 3px; border: 2px; border-style: solid; border-color:#FFD65C; background: #003249; cursor: pointer;}
    .sliderLong::-moz-range-thumb { width: 22px; height: 22px; background: #003249; cursor: pointer; } 
    .list {background-color: #FFD65C;}
    .switch {position: relative; display: inline-block; width: 38px; height: 22px} 
    .switch input {display: none}
    .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 6px}
    .slider:before {position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: #003249; -webkit-transition: .4s; transition: .4s; border-radius: 3px}
    input:checked+.slider {background-color: #FFD65C}
    input:checked+.slider:before {-webkit-transform: translateX(16px); -ms-transform: translateX(16px); transform: translateX(16px)}
  </style>
</head>
<body>
  <h2>ESP Web Server</h2>

  <p><label for="dropMenu_3">Resolution:</label>
    <select class="list" id="dropMenu_3" name="dropMenu_3" onchange="updateDropMenu(this)">
      %QUALITYMENUVALUE%
      <option value="5">QVGA (320 x 240)</option>
      <option value="6">CIF (352 x 288)</option>
      <option value="8">VGA (640 x 480)</option>
      <option value="9">SVGA (800 x 600)</option>
      <option value="10">XGA (1024 x 768)</option>
      <option value="12">SXGA (1280 x 1024)</option>
      <option value="13">UXGA (1600 x 1200)</option>
    </select></p>

  <div>Quality <input type="range" onchange="updateSlider(this)" id="slider_0" min="1" max="63" value="%QUALITYSLIDERVALUE%" step="1" class="sliderLong"></div>
  <div>Brightness <input type="range" onchange="updateSlider(this)" id="slider_1" min="-2" max="2" value="%BRIGTNESSSLIDERVALUE%" step="1" class="sliderLong"></div>
  <div>Contrast <input type="range" onchange="updateSlider(this)" id="slider_2" min="-2" max="2" value="%CONTRASTSLIDERVALUE%" step="1" class="sliderLong"></div>
  <div>Saturation <input type="range" onchange="updateSlider(this)" id="slider_3" min="-2" max="2" value="%SATURATIONSLIDERVALUE%" step="1" class="sliderLong"></div>

  <p><label for="dropMenu_1">Special effect:</label>
    <select class="list" id="dropMenu_1" name="dropMenu_1" onchange="updateDropMenu(this)">
      %EFFECTMENUVALUE%
      <option value="0">No effect</option>
      <option value="1">Negative</option>
      <option value="2">Grayscale</option>
      <option value="3">Red tint</option>
      <option value="4">Green tint</option>
      <option value="5">Blue tint</option>
      <option value="6">Sepia</option>
    </select></p>

    %CHECKPLACEHOLDER_1%

    <p><label for="dropMenu_2">Set white balance mode:</label>
    <select class="list" id="dropMenu_2" name="dropMenu_2" onchange="updateDropMenu(this)">
      %WHITEMENUVALUE%
      <option value="0">Auto</option>
      <option value="1">Sunny</option>
      <option value="2">Cloudy</option>
      <option value="3">Office</option>
      <option value="4">Home</option>
    </select></p>

    %CHECKPLACEHOLDER_2%

    <div>AE Level <input type="range" onchange="updateSlider(this)" id="slider_4" min="-2" max="2" value="%AESLIDERVALUE%" step="1" class="sliderLong"></div>
    <div>AEC <input type="range" onchange="updateSlider(this)" id="slider_8" min="0" max="1200" value="%AECSLIDERVALUE%" step="1" class="sliderLong"></div>

    %CHECKPLACEHOLDER_3%

    <div>AGC Gain <input type="range" onchange="updateSlider(this)" id="slider_5" min="0" max="30" value="%AGCSLIDERVALUE%" step="1" class="sliderLong"></div>
    <div>Gain Ceiling <input type="range" onchange="updateSlider(this)" id="slider_6" min="0" max="6" value="%GAINSLIDERVALUE%" step="1" class="sliderLong"></div>


    %CHECKPLACEHOLDER_4%
  
  <div><span id="textslider_7">%LIGHTSLIDERVALUE%</span></div>
  <div>Slider <input type="range" onchange="updateSlider(this)" id="slider_7" min="0" max="255" value="%LIGHTSLIDERVALUE%" step="1" class="sliderLong"></div>
  <p>
  <button onclick="getPicture()">CAPTURE PHOTO</button>
  <button onclick="saveSettings()">SAVE</button>
  </p>

  <p><label for="dropMenu_4">Set device:</label>
    <select class="list" id="dropMenu_4" name="dropMenu_4" onchange="updateDropMenu(this)">
      %METERMENUVALUE%
      <option value="0">Gasmeter</option>
      <option value="1">Watermeter</option>
      <option value="2">Electricitymeter</option>
    </select></p>


  <div><img src="saved-photo" id="picture" width="70%"></div>
<script>
function getPicture() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', "/capture", true);
  xhr.send();
}
function saveSettings() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', "/save", true);
  xhr.send();
}
function updateSlider(element) {
  var sliderValue = document.getElementById(element.id).value;
  <!--document.getElementById("text"+element.id).innerHTML = sliderValue;-->
  console.log(sliderValue);
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/updateSlider?name="+ element.id + "&value="+sliderValue, true);
  xhr.send();
}
function updateCheckBox(element) {
  var xhr = new XMLHttpRequest();
  if(element.checked){ xhr.open("GET", "/updateCheckBox?name="+element.id+"&value=1", true); }
  else { xhr.open("GET", "/updateCheckBox?name="+element.id+"&value=0", true); }
  xhr.send();
}
function updateDropMenu(element){
  var dropValue = document.getElementById(element.id).value;
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/updateDropMenu?name="+ element.id + "&value="+dropValue, true);
  xhr.send();
}

</script>
</body>
</html>
)rawliteral";