From fcc7f4d46ed08de9ffd35dd953cd7a22667fd8a9 Mon Sep 17 00:00:00 2001
From: augustin64 <me.git@augustin64.fr>
Date: Tue, 29 Aug 2023 15:21:44 +0200
Subject: [PATCH 1/3] css: use variables for colors

---
 Flask/static/css/flask.css | 104 +++++++++++++++++++++----------------
 1 file changed, 60 insertions(+), 44 deletions(-)

diff --git a/Flask/static/css/flask.css b/Flask/static/css/flask.css
index fbf788b..4d977b7 100644
--- a/Flask/static/css/flask.css
+++ b/Flask/static/css/flask.css
@@ -1,4 +1,20 @@
 @import url('https://fonts.googleapis.com/css?family=Montserrat');
+
+:root {
+    --color-background0: #212121;
+    --color-background1: #212121;
+    --color-background2: dimgray;
+    --color-border0: #FFFFFF;
+    --color-border1: grey;
+    --color-text: #FFFFFF;
+    --color-green: green;
+    --color-lime: #BADA55;
+    --color-red: red;
+    --color-switch-button: #FFFFFF;
+    --color-switch-background: grey;
+    --color-transparent: rgba(0, 0, 0, 0);
+}
+
 html {
     text-align: center;
     font-family: Montserrat;
@@ -21,7 +37,7 @@ table {
 }
 
 a {
-    color: white;
+    color: var(--color-text);
 }
 
 
@@ -30,11 +46,11 @@ input[type=text] {
     width: 90%;
     padding: 12px 20px;
     margin: 8px 0;
-    background-color: #212121;
-    border: 2px solid grey;
+    background-color: var(--color-background1);
+    border: 2px solid var(--color-border1);
     border-radius: 4px;
     outline: none;
-    color: white;
+    color: var(--color-text);
     text-align: center;
 }
 
@@ -44,18 +60,18 @@ input[type=password] {
     padding: 12px 20px;
     margin: 8px 0;
     text-align: center;
-    border: 2px solid grey;
+    border: 2px solid var(--color-border1);
     border-radius: 4px;
     outline: none;
-    color: white;
-    background-color: #212121;
+    color: var(--color-text);
+    background-color: var(--color-background1);
 }
 
 .button{
     border-radius: 4px;
-    border: 2px solid grey;
-    background-color: #212121;
-    color: white;
+    border: 2px solid var(--color-border1);
+    background-color: var(--color-background1);
+    color: var(--color-text);
     padding: 12px 20px;
     width: 70%;
     margin: 10px;
@@ -67,13 +83,13 @@ input[type=password] {
 
 .ban{
     border-radius: 4px;
-    border: 2px solid red;
+    border: 2px solid var(--color-red);
     background-size: 200% 100%;
-    background-image: linear-gradient(to right, #212121 50%, red 50%);
+    background-image: linear-gradient(to right, var(--color-background1) 50%, var(--color-red) 50%);
     -webkit-transition: background-position 0.5s;
     -moz-transition: background-position 0.5s;
     transition: background-position 0.5s;
-    color: white;
+    color: var(--color-text);
     padding: 12px 0px;
     width: 70%;
     margin: 10px;
@@ -83,16 +99,16 @@ input[type=password] {
 }
 
 .confirm{
-    color: white;
+    color: var(--color-text);
     padding: 12px 20px;
     width: 70%;
     margin: 10px;
     background-size: 200% 100%;
-    background-image: linear-gradient(to right, #212121 50%, green 50%);
+    background-image: linear-gradient(to right, var(--color-background1) 50%, var(--color-green) 50%);
     -webkit-transition: background-position 0.5s;
     -moz-transition: background-position 0.5s;
     transition: background-position 0.5s;
-    border: 2px solid grey;
+    border: 2px solid var(--color-border1);
 }
 
 .confirm:hover{
@@ -100,16 +116,16 @@ input[type=password] {
 }
 
 .confirm{
-    color: white;
+    color: var(--color-text);
     padding: 12px 20px;
     width: 70%;
     margin: 10px;
     background-size: 200% 100%;
-    background-image: linear-gradient(to right, #212121 50%, green 50%);
+    background-image: linear-gradient(to right, var(--color-background1) 50%, var(--color-green) 50%);
     -webkit-transition: background-position 0.5s;
     -moz-transition: background-position 0.5s;
     transition: background-position 0.5s;
-    border: 2px solid grey;
+    border: 2px solid var(--color-border1);
 }
 
 .confirm:hover{
@@ -117,18 +133,18 @@ input[type=password] {
 }
 .unselected{
     border-radius: 4px;
-    border: 2px solid grey;
-    background-color: #212121;
-    color: white;
+    border: 2px solid var(--color-border1);
+    background-color: var(--color-background1);
+    color: var(--color-text);
     padding: 12px 20px;
     width: 70%;
     margin: 10px;
 }
 .selected{
     border-radius: 4px;
-    border: 2px solid grey;
-    background-color: dimgray;
-    color: white;
+    border: 2px solid var(--color-border1);
+    background-color: var(--color-background2);
+    color: var(--color-text);
     padding: 12px 20px;
     width: 70%;
     margin: 10px;
@@ -136,11 +152,11 @@ input[type=password] {
 
 
 button:hover{
-    border: 2px solid white;
+    border: 2px solid var(--color-border0);
     cursor: pointer;
 }
 input:hover{
-    border: 2px solid white;
+    border: 2px solid var(--color-border0);
 }
 
 
@@ -148,17 +164,17 @@ input:hover{
 
 .submit{
     border-radius: 4px;
-    border: 2px solid grey;
-    background-color: #212121;
-    color: white;
+    border: 2px solid var(--color-border1);
+    background-color: var(--color-background1);
+    color: var(--color-text);
     padding: 12px 20px;
     width: 100%;
     margin: 10px;
 }
 
 body {
-    background-color: #212121;
-    color: #fff;
+    background-color: var(--color-background0);
+    color: var(--color-text);
     height: 100%;
 }
 
@@ -167,7 +183,7 @@ body {
 .left-pannel{
     flex: 1;
     margin: 20px;
-    border: 1px solid #fff;
+    border: 1px solid var(--color-border0);
     border-radius: 5px;
     padding: 20px;
     width: 80%;
@@ -178,7 +194,7 @@ body {
 .content{
     flex: 3;
     margin: 20px;
-    border: 1px solid #fff;
+    border: 1px solid var(--color-border0);
     border-radius: 5px;
     padding: 20px;
     width: 80%;
@@ -228,7 +244,7 @@ label {
     text-indent: -9999px;
     width: 100px;
     height: 50px;
-    background: grey;
+    background: var(--color-switch-background);
     display: block;
     border-radius: 100px;
     position: relative;
@@ -245,13 +261,13 @@ label:after {
     left: 5px;
     width: 40px;
     height: 40px;
-    background: #fff;
+    background: var(--color-switch-button);
     border-radius: 90px;
     transition: 0.3s;
 }
 
 input:checked + label {
-    background: #bada55;
+    background: var(--color-lime);
 }
 
 input:checked + label:after {
@@ -268,16 +284,16 @@ select {
     /*height: 100%;*/
     padding: 12px 20px;
     margin: 8px 0;
-    background-color: #212121;
-    border: 2px solid grey;
+    background-color: var(--color-background1);
+    border: 2px solid var(--color-border1);
     border-radius: 4px;
     outline: none;
-    color: white;
+    color: var(--color-text);
     text-align: center;
 }
 
 select:hover {
-    border: 2px solid white;
+    border: 2px solid var(--color-border0);
 }
 
 
@@ -285,11 +301,11 @@ input[type="time"] {
     width: 70%;
     padding: 8px 12px;
     margin: 8px 0;
-    background-color: #212121;
-    border: 2px solid grey;
+    background-color: var(--color-background1);
+    border: 2px solid var(--color-border1);
     border-radius: 4px;
     outline: none;
-    color: white;
+    color: var(--color-text);
     text-align: center;
 }
   

From 221921e3f3e2ce940ab503a8ca76f7bf2e5267a1 Mon Sep 17 00:00:00 2001
From: augustin64 <me.git@augustin64.fr>
Date: Tue, 29 Aug 2023 15:30:03 +0200
Subject: [PATCH 2/3] Add sidebar toggling

---
 Flask/static/css/flask.css | 84 +++++++++++++++++++++++++++++++++++++-
 Flask/templates/base.html  | 13 +++++-
 2 files changed, 95 insertions(+), 2 deletions(-)

diff --git a/Flask/static/css/flask.css b/Flask/static/css/flask.css
index 4d977b7..0164a00 100644
--- a/Flask/static/css/flask.css
+++ b/Flask/static/css/flask.css
@@ -1,5 +1,6 @@
 @import url('https://fonts.googleapis.com/css?family=Montserrat');
 
+/* Colors */
 :root {
     --color-background0: #212121;
     --color-background1: #212121;
@@ -15,6 +16,13 @@
     --color-transparent: rgba(0, 0, 0, 0);
 }
 
+/* Sidebar size is the left panel size when opened */
+:root {
+    --sidebar-size: max(20vw, 160px);
+    --sidebar-sz-plus10: calc(var(--sidebar-size) + 10px);
+    --sidebar-sz-plus30: calc(var(--sidebar-size) + 30px);
+}
+
 html {
     text-align: center;
     font-family: Montserrat;
@@ -197,7 +205,6 @@ body {
     border: 1px solid var(--color-border0);
     border-radius: 5px;
     padding: 20px;
-    width: 80%;
     height: 80%;
     
 }
@@ -318,3 +325,78 @@ input[type="time"]::-webkit-calendar-picker-indicator {
 input[type="time"]::-webkit-calendar-picker-indicator:hover {
     opacity: 1;
 }
+
+
+/** Sidebar stuff */
+#slide-sidebar {
+    display: none;
+}
+
+label[for="slide-sidebar"] {
+    all: initial;
+    z-index: 1; /* Always on top */
+    position: absolute;
+    top: 20px;
+    left: var(--sidebar-sz-plus30);
+
+    -moz-transition: left 0.5s ease;
+    transition: left 0.5s ease;
+    background: var(--color-transparent);
+}
+
+label[for="slide-sidebar"]:after {
+    all:unset;
+}
+
+input:checked + label[for="slide-sidebar"] {
+    background: var(--color-transparent);
+}
+
+#slide {
+    border-style: solid;
+    border-radius: 4px;
+    border-width: 1px;
+    border-color: var(--color-border0);
+
+    color: var(--color-text);
+    background-color: var(--color-background0);
+    padding: 8px 8px 2px 8px;
+}
+
+/* When opened behaviour */
+.left-pannel {
+  width: var(--sidebar-size);
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+}
+
+.content {
+    position: absolute;
+    top: 0;
+    left: var(--sidebar-sz-plus10);
+    right: 0;
+    bottom: 0;
+
+    -moz-transition: left 0.5s ease;
+    transition: left 0.5s ease;
+
+    padding: 0 25px;
+    background-color: var(--color-background0); /* we need no transparency when switching */
+    overflow: hidden;
+}
+
+/* When closed behaviour */
+input:checked#slide-sidebar~label {
+    left: 20px;
+}
+
+input:checked#slide-sidebar~.left-pannel {
+    display: none;
+    transition: display 0s 0.5s;
+}
+
+input:checked#slide-sidebar~.content {
+    left: 0;
+}
\ No newline at end of file
diff --git a/Flask/templates/base.html b/Flask/templates/base.html
index 50cf062..8ae9b08 100644
--- a/Flask/templates/base.html
+++ b/Flask/templates/base.html
@@ -12,6 +12,17 @@
     </head>
     <body>
         <div class="container">
+            <input id="slide-sidebar" type="checkbox" role="button"/>
+            <label for="slide-sidebar">
+                <div id="slide">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                        <path d="M4 6l16 0"></path>
+                        <path d="M4 12l16 0"></path>
+                        <path d="M4 18l16 0"></path>
+                     </svg>
+                </div>
+            </label>
             <div class="left-pannel">
                 {% block left_pannel %}
                 {% endblock %}
@@ -21,7 +32,7 @@
                 {% endblock %}
             </div>
         </div>
-        <div class="footer">Version not detected yet</div>
+        <div class="footer">v6.2.11</div>
     </body>
 
 </html>

From d06d925e27c6ffab16e72cc94ade9d703601a0b6 Mon Sep 17 00:00:00 2001
From: augustin64 <me.git@augustin64.fr>
Date: Tue, 29 Aug 2023 18:24:06 +0200
Subject: [PATCH 3/3] Fix: remove version number

---
 Flask/templates/base.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Flask/templates/base.html b/Flask/templates/base.html
index 8ae9b08..0ab36a3 100644
--- a/Flask/templates/base.html
+++ b/Flask/templates/base.html
@@ -32,7 +32,7 @@
                 {% endblock %}
             </div>
         </div>
-        <div class="footer">v6.2.11</div>
+        <div class="footer">Version not detected yet</div>
     </body>
 
 </html>