From 25d22a16e0a1aa8af6ae2b8a79caf2f715d276b1 Mon Sep 17 00:00:00 2001
From: _ <>
Date: Fri, 18 Dec 2020 18:08:17 +0000
Subject: [PATCH] :lipstick: update: add base64 favicons and WIP dark mode

---
 assets/favicon.png                      | Bin 643 -> 595 bytes
 handlebars/relay/relay_server_list.html |   6 +++
 handlebars/server/file_server_dir.html  |  66 +++++++++++++++++++++++-
 3 files changed, 70 insertions(+), 2 deletions(-)
diff --git a/assets/favicon.png b/assets/favicon.png
index 392baa847ea7cef68987fda6e08820c6a2d5b64d..b8eb845866cec4aafb2aab59131f763247857060 100644
GIT binary patch
delta 89
zcmZo>z09(Ki7C*=)5S5w;&gHXL(~5hCN>F%;z<%7hnx>EIJG@8Wk_Fe@hq#eiP#Ch
t&Q+^c{ntF`BF(_$BI&?!;U4RfB!-y9Z#iVs&rf3j0#8>zmvv4FO#qS9AL0N2

delta 138
zcmV;50CoS<1cL>z0s?<*Nkl<ZILpP7$qm3D5CiRqR-iHJqA{9r9uavUmLn*Me=Fg^
zdk_F52@gb)?k*yi%u3gv2R8K{phO(W^~^P-HK!(kkx<gqV9ge0xAOlMxO<88-s_VV
sa?b4(bpq>QQ3#<A=q0GlO8`qJOUor^D5%3j00000NkvXXu0jG}g3}~AApigX

diff --git a/handlebars/relay/relay_server_list.html b/handlebars/relay/relay_server_list.html
index 5e8a621..b004457 100644
--- a/handlebars/relay/relay_server_list.html
+++ b/handlebars/relay/relay_server_list.html
@@ -2,6 +2,12 @@
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
+<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAAAAAAAAAAAAAAAAAAAAA
+AAAAAAAlJSUAAGIAAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAIiIiIgAAAAAAAAAgAAAAAAAAAAAAADIiIiIi
+IiIjMhERERERESMyERERERERIzIREREREREjMhERIRERESMyERIiIiERIzIRESEREREjMhERERER
+ESMyERERERERIzIREREREREjMiIiIiIiIiMAAAAAAAAAAAAAAAAAAAAAAAAAAIABAACAAQAAgAEA
+AIABAACAAQAAgAEAAIABAACAAQAAgAEAAIABAACAAQAA" rel="icon" type="image/x-icon" />
 <style>
 	body {
 		font-family: sans-serif;
diff --git a/handlebars/server/file_server_dir.html b/handlebars/server/file_server_dir.html
index b7b5666..08c84ed 100644
--- a/handlebars/server/file_server_dir.html
+++ b/handlebars/server/file_server_dir.html
@@ -2,10 +2,52 @@
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
+<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAAAAAAAAAAAAAAAAAAAAA
+AAAAAAAlJSUAAGIAAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAIiIiIgAAAAAAAAAgAAAAAAAAAAAAADIiIiIi
+IiIjMhERERERESMyERERERERIzIREREREREjMhERIRERESMyERIiIiERIzIRESEREREjMhERERER
+ESMyERERERERIzIREREREREjMiIiIiIiIiMAAAAAAAAAAAAAAAAAAAAAAAAAAIABAACAAQAAgAEA
+AIABAACAAQAAgAEAAIABAACAAQAAgAEAAIABAACAAQAA" rel="icon" type="image/x-icon" />
 <style>
 	body {
+		margin: 0px;
 		font-family: sans-serif;
 	}
+	.app {
+		--main-bg-color: white;
+		--main-fg-color: black;
+		--main-link-color: unset;
+		--odd-row-bg-color: #d8d8d8;
+		--grey-color: #555;
+		--dark-mode-transition: all 1s ease;
+		
+		background-color: var(--main-bg-color);
+		color: var(--main-fg-color);
+		padding: 8px;
+		
+		transition: var(--dark-mode-transition);
+	}
+	.light_switch {
+		display: none;
+	}
+	.light_switch_label {
+		cursor: pointer;
+		padding: 8px;
+		
+		background-color: var(--main-fg-color);
+		color: var(--main-bg-color);
+	}
+	.light_switch_label::before {
+		content: "[ ] ";
+	}
+	a {
+		color: var(--main-link-color);
+		transition: var(--dark-mode-transition);
+	}
+	th {
+		color: var(--main-fg-color);
+		transition: var(--dark-mode-transition);
+	}
 	td {
 		padding: 0;
 	}
@@ -17,21 +59,38 @@
 		text-decoration: none;
 	}
 	.grey {
-		color: #888;
+		color: var(--grey-color);
 		text-align: right;
+		transition: var(--dark-mode-transition);
 	}
 	.entry_list {
 		width: 100%;
 		border-collapse: collapse;
+		margin-bottom: 1em;
 	}
 	tbody tr:nth-child(odd) {
-		background-color: #ddd;
+		background-color: var(--odd-row-bg-color);
+		transition: var(--dark-mode-transition);
+	}
+	
+	/* Dark mode colors */
+	[type="checkbox"]:checked + .app {
+		--main-bg-color: black;
+		--main-fg-color: white;
+		--main-link-color: white;
+		--odd-row-bg-color: #333;
+		--grey-color: #aaa;
+	}
+	[type="checkbox"]:checked + .app .light_switch_label::before {
+		content: "[X] ";
 	}
 </style>
 <title>{{path}} {{server_name}}</title>
 </head>
 <body>
+<input type="checkbox" class="light_switch" id="light_switch">
 
+<div class="app">
 <p>{{server_name}}</p>
 
 <p>{{path}}</p>
@@ -61,5 +120,8 @@
 </tbody>
 </table>
 
+<!-- Doesn't work perfectly yet -->
+<label for="light_switch" class="light_switch_label">Dark mode</label>
+</page>
 </body>
 </html>
