put css into HTMLheader so it is always available. especially for WebRestart()
This commit is contained in:
parent
19cd6c1288
commit
4fb0a6fdb7
1 changed files with 108 additions and 95 deletions
|
|
@ -163,7 +163,99 @@ const char HTMLheader[] PROGMEM = R"EOF(
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>CanGrow</title>
|
<title>CanGrow</title>
|
||||||
<link rel="stylesheet" href="/style.css">
|
<!-- <link rel="stylesheet" href="/style.css"> -->
|
||||||
|
<style>
|
||||||
|
/* Having the whole CSS here ensures it's all the time present*/
|
||||||
|
body {
|
||||||
|
color: #cae0d0;
|
||||||
|
background-color: #1d211e;
|
||||||
|
font-family: helvetica;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
width: 60%; min-width: 420px;
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:link, a:visited {
|
||||||
|
color: #04AA6D;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #64AA6D;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:active {
|
||||||
|
color: #04AA6D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infomsg , .warnmsg {
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 4px;
|
||||||
|
width: fit-content; min-width: 200px; max-width: 420px;
|
||||||
|
margin: auto;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.infomsg {
|
||||||
|
background: #04AA6D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warnmsg {
|
||||||
|
background: #aa4204;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* from https://gist.github.com/iamhelenliu/5755179 - thank you! */
|
||||||
|
.nav {
|
||||||
|
background: #333;
|
||||||
|
width: 60%; min-width: 420px;
|
||||||
|
margin: auto;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav li {
|
||||||
|
display: inline-block;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav li:first-of-type {
|
||||||
|
background: #026b45;
|
||||||
|
border-top-left-radius: 3px;
|
||||||
|
border-bottom-left-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav li a , .nav span {
|
||||||
|
color: #ddd;
|
||||||
|
display: block;
|
||||||
|
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
|
font-size:0.8em;
|
||||||
|
padding: 10px 20px;
|
||||||
|
text-decoration: none;
|
||||||
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
.nav li a:hover {
|
||||||
|
background: #04AA6D;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav li a:active {
|
||||||
|
color: #cae0d0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
|
|
@ -184,100 +276,15 @@ const char HTMLfooter[] PROGMEM = R"EOF(
|
||||||
</html>
|
</html>
|
||||||
)EOF";
|
)EOF";
|
||||||
|
|
||||||
|
/*
|
||||||
|
* I decided to embed CSS into HTMLheader because after
|
||||||
|
* a wifi change triggerd restart of the esp, the the style.css never get deliverd
|
||||||
|
* because the esp restarts after the webpage was delivered. style.css would be a second call
|
||||||
|
* but when the browser sends this, it's too late.
|
||||||
const char HTMLstyleCSS[] PROGMEM = R"EOF(
|
const char HTMLstyleCSS[] PROGMEM = R"EOF(
|
||||||
body {
|
|
||||||
color: #cae0d0;
|
|
||||||
background-color: #1d211e;
|
|
||||||
font-family: helvetica;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
|
||||||
width: 60%; min-width: 420px;
|
|
||||||
margin: auto;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:link, a:visited {
|
|
||||||
color: #04AA6D;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: #64AA6D;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:active {
|
|
||||||
color: #04AA6D;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infomsg , .warnmsg {
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 3px;
|
|
||||||
padding: 4px;
|
|
||||||
width: fit-content; min-width: 200px; max-width: 420px;
|
|
||||||
margin: auto;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.infomsg {
|
|
||||||
background: #04AA6D;
|
|
||||||
}
|
|
||||||
|
|
||||||
.warnmsg {
|
|
||||||
background: #aa4204;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* from https://gist.github.com/iamhelenliu/5755179 - thank you! */
|
|
||||||
.nav {
|
|
||||||
background: #333;
|
|
||||||
width: 60%; min-width: 420px;
|
|
||||||
margin: auto;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
padding: 0;
|
|
||||||
position: relative;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav li {
|
|
||||||
display: inline-block;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav li:first-of-type {
|
|
||||||
background: #026b45;
|
|
||||||
border-top-left-radius: 3px;
|
|
||||||
border-bottom-left-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav li a , .nav span {
|
|
||||||
color: #ddd;
|
|
||||||
display: block;
|
|
||||||
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
|
||||||
font-size:0.8em;
|
|
||||||
padding: 10px 20px;
|
|
||||||
text-decoration: none;
|
|
||||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
.nav li a:hover {
|
|
||||||
background: #04AA6D;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav li a:active {
|
|
||||||
color: #cae0d0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
)EOF";
|
)EOF";
|
||||||
|
*/
|
||||||
|
|
||||||
const char HTMLsuccess[] PROGMEM = R"EOF(
|
const char HTMLsuccess[] PROGMEM = R"EOF(
|
||||||
<div class='infomsg'>Successfully saved!</div>
|
<div class='infomsg'>Successfully saved!</div>
|
||||||
|
|
@ -952,7 +959,7 @@ void WebHandler() {
|
||||||
* WebHandler_unconfigured() and WebHandler_configured()
|
* WebHandler_unconfigured() and WebHandler_configured()
|
||||||
*/
|
*/
|
||||||
// style.css
|
// style.css
|
||||||
webserver.on("/style.css", HTTP_GET, WEBstyleCSS);
|
//webserver.on("/style.css", HTTP_GET, WEBstyleCSS);
|
||||||
|
|
||||||
// Web root
|
// Web root
|
||||||
webserver.on("/", HTTP_GET, WEBroot);
|
webserver.on("/", HTTP_GET, WEBroot);
|
||||||
|
|
@ -985,8 +992,8 @@ void WebHandler() {
|
||||||
}
|
}
|
||||||
|
|
||||||
void WebRestart() {
|
void WebRestart() {
|
||||||
|
String body = FPSTR(HTMLheader);
|
||||||
if(NeedRestart == true) {
|
if(NeedRestart == true) {
|
||||||
String body = FPSTR(HTMLheader);
|
|
||||||
body += "<h1>Restarting</h1>";
|
body += "<h1>Restarting</h1>";
|
||||||
body += "<div class='infomsg'>After restart you will be connected to Wifi<br><b>";
|
body += "<div class='infomsg'>After restart you will be connected to Wifi<br><b>";
|
||||||
body += WIFIssid;
|
body += WIFIssid;
|
||||||
|
|
@ -996,6 +1003,10 @@ void WebRestart() {
|
||||||
Serial.println("Restarting... see you soon space cowboy!");
|
Serial.println("Restarting... see you soon space cowboy!");
|
||||||
delay(1000);
|
delay(1000);
|
||||||
ESP.restart();
|
ESP.restart();
|
||||||
|
} else {
|
||||||
|
body += "<div class='warnmsg'><h1>Not allowed</h1></div>";
|
||||||
|
body += returnHTMLfooter();
|
||||||
|
webserver.send(405, "text/html", body);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1071,13 +1082,15 @@ String returnStrSelected(byte savedValue, byte selectId) {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// not really a webpage, but CSS is important for them :p
|
// not really a webpage, but CSS is important for them :p
|
||||||
|
/*
|
||||||
void WEBstyleCSS() {
|
void WEBstyleCSS() {
|
||||||
webserver.send(200, "text/css", HTMLstyleCSS);
|
webserver.send(200, "text/css", HTMLstyleCSS);
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
void WEB404() {
|
void WEB404() {
|
||||||
String body = FPSTR(HTMLheader);
|
String body = FPSTR(HTMLheader);
|
||||||
body += "<h1>404 - not found</h1>";
|
body += "<div class='warnmsg'><h1>404 - not found</h1></div>";
|
||||||
body += returnHTMLfooter();
|
body += returnHTMLfooter();
|
||||||
webserver.send(404, "text/html", body);
|
webserver.send(404, "text/html", body);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue