From 7cb75851415c4221e76ed3f45c42e52d4a5649e5 Mon Sep 17 00:00:00 2001 From: "LT24\\jacqu" Date: Sat, 24 Oct 2020 11:23:42 +0100 Subject: [PATCH 1/5] Updated UI to look more modern --- templates/index.html | 99 +++++++++++++++++++++++++++++++++++++------- 1 file changed, 83 insertions(+), 16 deletions(-) diff --git a/templates/index.html b/templates/index.html index f4524f0..67c1f06 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,23 +1,90 @@ + + + + + + GUI Cam V2 + + + +
- - GUI Cam V2 - + - - +

GUI Cam V2

+
-
-
- A Flask website by David Saunders -
- Legacy website -
+
+
+ + GUI Live stream +
+
+

Say hi to everybody's favourite crested gecko!

+ +
+
+ + + + + \ No newline at end of file From 0f01ce91f73b5494112431edf1f5d5f4b1fa6d40 Mon Sep 17 00:00:00 2001 From: "LT24\\jacqu" Date: Sat, 24 Oct 2020 12:35:26 +0100 Subject: [PATCH 2/5] Added name to the site information, added mock stats table --- templates/index.html | 64 +++++++++++++++++++++++++++++++++++--------- 1 file changed, 51 insertions(+), 13 deletions(-) diff --git a/templates/index.html b/templates/index.html index 67c1f06..91dc917 100644 --- a/templates/index.html +++ b/templates/index.html @@ -16,22 +16,50 @@
Legacy website
- A Flask website by David Saunders + A Flask website by David and Jacques Saunders

GUI Cam V2

-
-
- - GUI Live stream +
+
+
+ + Stats +
+
+ + + + + + + + + + + + + + + +
Temperature18.3°C
Humidity69.3%
CPU Temperature60°C
+
-
-

Say hi to everybody's favourite crested gecko!

- + +
+
+ + GUI Live stream +
+
+

Say hi to everybody's favourite crested gecko!

+ +
+
@@ -56,7 +84,7 @@

GUI Cam V2

height:40px; } - .camera-icon { + .header-icon { filter: invert(100%); } @@ -72,11 +100,10 @@

GUI Cam V2

background-color:rgba(0,0,0,.2); } - .gui-cam-container { + .gui-cam-card { width:70%; - height:85%; - margin:auto; - margin-top:1%; + height: auto; + margin: 10px; text-align: center; } @@ -86,5 +113,16 @@

GUI Cam V2

height:90%; max-height: 600px; } + + .stats-card { + margin: 5px; + } + + .stats-table { + text-align: center; + margin: auto; + margin-top: 10px; + width: 50%; + } \ No newline at end of file From ba8cddaef63cb9e0a8a54683075d6d8b1af621cd Mon Sep 17 00:00:00 2001 From: "LT24\\jacqu" Date: Sat, 24 Oct 2020 14:09:23 +0100 Subject: [PATCH 3/5] Moved cards around, fixed resizing issue --- templates/index.html | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/templates/index.html b/templates/index.html index 91dc917..8889224 100644 --- a/templates/index.html +++ b/templates/index.html @@ -24,6 +24,17 @@

GUI Cam V2

+
+
+ + Live stream +
+
+

Say hi to everybody's favourite crested gecko!

+ +
+
+
@@ -49,17 +60,6 @@

GUI Cam V2

-
-
- - GUI Live stream -
-
-

Say hi to everybody's favourite crested gecko!

- -
-
-
@@ -90,6 +90,7 @@

GUI Cam V2

.page-title { margin-left: 70px; + height: 40px; } .page-background { @@ -102,7 +103,7 @@

GUI Cam V2

.gui-cam-card { width:70%; - height: auto; + max-height: 50%; margin: 10px; text-align: center; } @@ -110,12 +111,13 @@

GUI Cam V2

.gui-cam-stream { margin:auto; display:block; - height:90%; - max-height: 600px; + height:inherit; + max-width: 95%; } .stats-card { - margin: 5px; + margin: 10px; + height: fit-content; } .stats-table { From 66184313947991ef968c8854f3a51587e94224eb Mon Sep 17 00:00:00 2001 From: "LT24\\jacqu" Date: Sat, 24 Oct 2020 14:16:35 +0100 Subject: [PATCH 4/5] Gave the gecko icon a default size, reimplimenting temperature and humidity variables --- templates/index.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/templates/index.html b/templates/index.html index 8889224..1ecf597 100644 --- a/templates/index.html +++ b/templates/index.html @@ -11,7 +11,7 @@
+
+
+ + Controls +
+
+ + + + + + + + + + + + + + + +
Red LED + +
Green LED + +
Heat Lamp + +
+
+
+
@@ -45,11 +144,11 @@

GUI Cam V2

Temperature - {{ temperature }}°C + 20.4°C Humidity - {{ humidity }}% + 47% CPU Temperature @@ -59,7 +158,6 @@

GUI Cam V2

-
@@ -117,6 +215,7 @@

GUI Cam V2

.stats-card { margin: 10px; height: fit-content; + min-width: fit-content; } .stats-table { @@ -125,5 +224,68 @@

GUI Cam V2

margin-top: 10px; width: 50%; } + + /* The switch - the box around the slider */ + .switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; + } + + /* Hide default HTML checkbox */ + .switch input { + opacity: 0; + width: 0; + height: 0; + } + + /* The slider */ + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; + } + + .slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; + } + + input:checked + .slider { + background-color: #2196F3; + } + + input:focus + .slider { + box-shadow: 0 0 1px #2196F3; + } + + input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); + } + + /* Rounded sliders */ + .slider.round { + border-radius: 34px; + } + + .slider.round:before { + border-radius: 50%; + } \ No newline at end of file