IoT Power Relay
SFUptownMaker 
Web Page Content
PageContent.h declares three different page content chunks: a header, a body, and a footer. Those are merely our demarcations and don't actually correspond to HTML concepts with the same name.
Header
The header is defined as type String. It contains the http response code information, content type information, and all of the html header information up to and including the opening tag for the page's body content. It also includes some CSS to format the page. Note the use of backslashes to escape the newline at the end of each line. An alternative is to surround each line in its own set of double quotes, but I find this easier to read.
String pageContentHead =
"HTTP/1.1 200 OK\r\n\
Content-type:text/html\r\n\
\r\n\
<!DOCTYPE html> <html>\
<style>\
input[type=text] {\
width: 20px;\
}\
form {\
font-family: monospace;\
}\
table, th, td {\
text-align: left;\
border: 5px;\
}\
</style>\
<head>\
<title>TeleSitter</title>\
</head>\
<body>";Body
The body text is defined as a character array. This is to facilitate use of the printf() command later to insert values into the body text.
I've again trimmed the content here to remove duplicated code. Normally, there would be a table entry for every day of the week, along with a time validater for each day. I've left only the Monday table entry and validater as an example. The validater uses client-side Javascript to check the times and make sure they make sense before sending a response to the server. If you try to put invalid time information into any of the fields, you'll get an error and the server won't be contacted.
char pageContentBody[] =
"<form id=\"timeForm\">\
<table>\
<tr>\
<th>Day</th><th>On Time</th><th>Off Time</th>\
</tr>\
<tr>\
<td>Monday</td>\
<td><input type=\"text\" name=\"mHoursOn\" value=\"%d\">:<input type=\"text\" name=\"mMinutesOn\" value=\"%02d\"></td>\
<td><input type=\"text\" name=\"mHoursOff\" value=\"%d\">:<input type=\"text\" name=\"mMinutesOff\" value=\"%02d\"></td>\
</tr>\
<tr>\
</table>\
<button type=\"button\" onClick=\"submitTimes()\">Submit</button><br>\
<a href=\"/reset\">Reset times</a><br>\
</form>\
<p id=\"responseText\"></p>\
<script>\
function submitTimes() {\
var hrs, mins, text;\
\
hrs = document.forms[\"timeForm\"][\"mHoursOn\"].value;\
mins = document.forms[\"timeForm\"][\"mMinutesOn\"].value;\
if (!validateHrs(hrs)) return;\
if (!validateMins(mins)) return;\
hrs = document.forms[\"timeForm\"][\"mHoursOff\"].value;\
mins = document.forms[\"timeForm\"][\"mMinutesOff\"].value;\
if (!validateHrs(hrs)) return;\
if (!validateMins(mins)) return;\
text = \"Times valid!\";\
document.getElementById(\"timeForm\").submit();\
document.getElementById(\"responseText\").innerHTML = text;\
}\
\
function validateMins(mins) {\
if (isNaN(mins) || mins < 0 || mins > 59) {\
return false;\
}\
return true;\
}\
\
function validateHrs(hrs) {\
if (isNaN(hrs) || hrs < 0 || hrs > 23) {\
return false;\
}\
return true;\
}\
\
</script>";Footer Text
Not much to see here, just closing up the HTML.
String pageContentFoot =
"</body>"
"</html>\r\n";