#pragma once

char volume_HTML_String[] = 
"<div class=\"VolumeSlider\">\n"
"    <input type=\"range\" min=\"0\" max=\"255\" class=\"slider\" id=\"channel1\" >\n"
"  </div>\n"
"  <div class=\"VolumeSlider\">\n"
"    <input type=\"range\" min=\"0\" max=\"255\" class=\"slider\" id=\"channel2\" >\n"
"  </div>\n"
"\n"
"  <p>channel 1: <span id=\"channel1val\"></span></p>\n"
"  <p>channel 2: <span id=\"channel2val\"></span></p>\n"
"\n"
"  <script>\n"
"    var ch1 = document.getElementById(\"channel1\");\n"
"    var ch2 = document.getElementById(\"channel2\");\n"
"    var ch1val = document.getElementById(\"channel1val\");\n"
"    var ch2val = document.getElementById(\"channel2val\");\n"
"    ch1val.innerHTML = ch1.value;\n"
"    ch2val.innerHTML = ch2.value;\n"
"\n"
"    window.onload = async function() {\n"
"        const response = await fetch(\"volume\");\n"
"        channels = await response.json();\n"
"        console.log(channels);\n"
"        ch1.value = channels[\"channel1\"];\n"
"        ch2.value = channels[\"channel2\"];\n"
"    }\n"
"    \n"
"    \n"
"    ch1.oninput = function() {\n"
"        ch1val.innerHTML = this.value;\n"
"        var newUrl = \"volume\?channel=1&value=\"+this.value.toString();\n"
"        fetch(newUrl);\n"
"    }\n"
"    ch2.oninput = function() {\n"
"        ch2val.innerHTML = this.value;\n"
"        var newUrl = \"volume\?channel=2&value=\"+this.value.toString();\n"
"        fetch(newUrl);\n"
"    }\n"
"    </script>\n"
"    \n"
;