From 7d60fa3a1674dd8c8a78f62902197de85cd264e3 Mon Sep 17 00:00:00 2001 From: Marcus Date: Fri, 10 May 2024 03:29:59 +0200 Subject: [PATCH] firmware wip - html css stuff --- Arduino/CanGrow/CanGrow_HTML.h | 31 ++++++++- Arduino/CanGrow/CanGrow_WebFunctions.h | 5 +- playground/html/root/gauge.css | 15 ++--- playground/html/root/index.html | 90 +++++++++++++++++--------- 4 files changed, 97 insertions(+), 44 deletions(-) diff --git a/Arduino/CanGrow/CanGrow_HTML.h b/Arduino/CanGrow/CanGrow_HTML.h index 6702148..2ccd67b 100644 --- a/Arduino/CanGrow/CanGrow_HTML.h +++ b/Arduino/CanGrow/CanGrow_HTML.h @@ -88,7 +88,7 @@ a:active { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } -.nav li a , .nav span { +.nav li a , .nav span, .button, .button:link, input[type=button], input[type=submit], input[type=reset] { color: #ddd; display: block; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; @@ -97,21 +97,48 @@ a:active { text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); } -.nav li a:hover , .activeMenu , .menuTime{ + +.nav li a:hover , .activeMenu, .button:link:hover, .button:visited:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover { background: #04AA6D; color: #fff; border-radius: 3px; } + .nav li a:active { + background: #026b45; color: #cae0d0; } + .activeMenu { background: #444; } + .MenuTime { background: #292929; } +.button, .button:link, .button:visited, input[type=button], input[type=submit], input[type=reset] { + background: #026b45; + color: #fff; + border-radius: 3px; + padding: 6px 12px; + text-align: center; + text-decoration: none; + display: inline-block; + border: none; +} + +.button:link:active, .button:visited:active, input[type=button]:active, input[type=submit]:active, input[type=reset]:active { + background: #026b45; + color: #cae0d0; +} + +input[type=text], input[type=date], input[type=number], input[type=password], select { + background: #cae0d0; + color: #1d211e; + border: 1px solid #026b45; +} + @media only screen and (min-width: 1280px) { .center, .nav { width: 60%; min-width: 420px; diff --git a/Arduino/CanGrow/CanGrow_WebFunctions.h b/Arduino/CanGrow/CanGrow_WebFunctions.h index 488200e..4379156 100644 --- a/Arduino/CanGrow/CanGrow_WebFunctions.h +++ b/Arduino/CanGrow/CanGrow_WebFunctions.h @@ -229,8 +229,7 @@ void SysMaintenance() { body += "

⏸️ Maintenance Mode

"; - body += "
"; - body += "
"; + body += "On  Off"; body += FPSTR(HTMLfooter); webserver.send(200, "text/html", body); @@ -370,7 +369,7 @@ void WEBroot() { body += "\n"; body += "
\n"; - body += "
"; + body += "Maintenance Mode"; body += FPSTR(HTMLfooter); diff --git a/playground/html/root/gauge.css b/playground/html/root/gauge.css index 914f4f0..a24ea66 100644 --- a/playground/html/root/gauge.css +++ b/playground/html/root/gauge.css @@ -1,7 +1,5 @@ - .gauge { position: relative; - margin-right: 10px; } .gaugeWrapper { @@ -10,10 +8,6 @@ justify-content: center; } -.gaugeLabel { - font-weight: bold; -} - .gauge__container { margin: 0; padding: 0; @@ -81,6 +75,7 @@ display: table; margin: 0 auto; position: relative; + font-weight: bold; } .gauge__label--low { @@ -111,7 +106,7 @@ .gauge__label--high { width: 24px; } @media only screen and (min-width: 720px) { - .gauge { height: calc(120px + 3em); } + .gauge { height: calc(120px + 4.2em); } .gauge__container { width: 240px; height: 120px; } .gauge__marker { height: 120px; left: 119.5px; } .gauge__background { width: 240px; height: 120px; } @@ -122,7 +117,9 @@ .gauge__label--low { width: 48px; } .gauge__label--spacer { width: 144px; text-align: center;} .gauge__label--high { width: 48px; } -} + .gaugeLabel { font-size: 1.3em; } + .gauge__labels { font-size: 2em; } + } .gauge--liveupdate .gauge__data, .gauge--liveupdate .gauge__needle { @@ -148,5 +145,3 @@ -o-transform: rotate(-.50turn); transform: rotate(-.50turn); } - - diff --git a/playground/html/root/index.html b/playground/html/root/index.html index 5a4e523..087761c 100644 --- a/playground/html/root/index.html +++ b/playground/html/root/index.html @@ -4,7 +4,7 @@ -CanGrow - Ruderalis Indica +CanGrow - Amnesia Haze -

🌱 Amnesia Haze

-
+
Temperature
- +
@@ -127,13 +157,13 @@ a:active {
-
+
Humidity
- +
@@ -141,14 +171,14 @@ a:active {
- +
- Moisture + Soilmoisture
- +
@@ -166,24 +196,26 @@ a:active { var gaugeHumidity = new Gauge(document.getElementById('gaugeHumidity')); var gaugeSoilmoisture = new Gauge(document.getElementById('gaugeSoilmoisture')); -Grow started: 2024-04-12
-Day of Grow: 20
-Pump water level: Critical
-Growlight brightnes: 100 %
+ +Grow started: 2024-05-08
+Day of Grow: 1
+Pump water level: Critical
+Growlight brightness: 100 %
-MOSFET -
On/Off:
On/Off:
Intensity:
-
+
+Maintenance Mode