From 4fb0a6fdb744729cff2ba169cc9524e2a6b9e0be Mon Sep 17 00:00:00 2001
From: Marcus <marcus@deltalima.org>
Date: Wed, 17 Apr 2024 19:41:10 +0200
Subject: [PATCH] put css into HTMLheader so it is always available. especially
 for WebRestart()

---
 Arduino/CanGrow/CanGrow.ino | 203 +++++++++++++++++++-----------------
 1 file changed, 108 insertions(+), 95 deletions(-)
diff --git a/Arduino/CanGrow/CanGrow.ino b/Arduino/CanGrow/CanGrow.ino
index 9b4fea6..b581284 100644
--- a/Arduino/CanGrow/CanGrow.ino
+++ b/Arduino/CanGrow/CanGrow.ino
@@ -163,7 +163,99 @@ const char HTMLheader[] PROGMEM = R"EOF(
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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>
   <body>
   <ul class="nav">
@@ -184,100 +276,15 @@ const char HTMLfooter[] PROGMEM = R"EOF(
 </html>
 )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(
-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";
+*/
 
 const char HTMLsuccess[] PROGMEM = R"EOF(
 <div class='infomsg'>Successfully saved!</div>
@@ -952,7 +959,7 @@ void WebHandler() {
    * WebHandler_unconfigured() and WebHandler_configured()
    */
   // style.css
-  webserver.on("/style.css", HTTP_GET, WEBstyleCSS);
+  //webserver.on("/style.css", HTTP_GET, WEBstyleCSS);
   
   // Web root
   webserver.on("/", HTTP_GET, WEBroot);
@@ -985,8 +992,8 @@ void WebHandler() {
 }
 
 void WebRestart() {
+  String body = FPSTR(HTMLheader);
   if(NeedRestart == true) {
-    String body = FPSTR(HTMLheader);
     body += "<h1>Restarting</h1>";
     body += "<div class='infomsg'>After restart you will be connected to Wifi<br><b>";
     body += WIFIssid;
@@ -996,6 +1003,10 @@ void WebRestart() {
     Serial.println("Restarting... see you soon space cowboy!");
     delay(1000);
     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
+/*
 void WEBstyleCSS() {
   webserver.send(200, "text/css", HTMLstyleCSS);
 }
+*/
 
 void WEB404() {
   String body = FPSTR(HTMLheader);
-  body += "<h1>404 - not found</h1>";
+  body += "<div class='warnmsg'><h1>404 - not found</h1></div>";
   body += returnHTMLfooter();
   webserver.send(404, "text/html", body);
 }
