From 4cded68dc45ba59cb5fbe878494e24549b05bff6 Mon Sep 17 00:00:00 2001
From: Frankie B <git@diskfloppy.me>
Date: Mon, 22 Jan 2024 00:09:48 +0000
Subject: [PATCH] CSS updates and a whole theme selector thing

---
 public/css/colorschemes/c64.css               | 13 ++++
 public/css/colorschemes/catppuccin-frappe.css | 13 ++++
 public/css/colorschemes/catppuccin-latte.css  | 13 ++++
 .../css/colorschemes/catppuccin-macchiato.css |  2 +-
 public/css/colorschemes/catppuccin-mocha.css  | 13 ++++
 public/css/colorschemes/gruvbox-dark.css      | 13 ++++
 public/css/colorschemes/gruvbox-material.css  | 13 ++++
 public/css/colorschemes/gruvbox.css           | 13 ++++
 public/css/colorschemes/maia.css              | 13 ++++
 public/css/colorschemes/man-page.css          | 13 ++++
 public/css/colorschemes/mono-amber.css        | 17 +++++
 public/css/colorschemes/mono-cyan.css         | 17 +++++
 public/css/colorschemes/mono-green.css        | 17 +++++
 public/css/colorschemes/mono-red.css          | 17 +++++
 public/css/colorschemes/mono-white.css        | 17 +++++
 public/css/colorschemes/mono-yellow.css       | 17 +++++
 public/css/colorschemes/papercolor-dark.css   | 13 ++++
 public/css/colorschemes/papercolor-light.css  | 13 ++++
 public/css/colorschemes/shel.css              | 13 ++++
 public/css/colorschemes/slate.css             | 13 ++++
 public/css/colorschemes/solarized-dark.css    | 13 ++++
 public/css/colorschemes/solarized-light.css   | 13 ++++
 public/css/colorschemes/terminal-basic.css    | 13 ++++
 public/css/master.css                         | 15 +++-
 public/js/themeSwap.js                        | 72 +++++++++++++++++++
 resources/views/includes/footer.blade.php     | 32 +++++++++
 resources/views/includes/head.blade.php       |  1 +
 resources/views/layouts/default.blade.php     |  2 +-
 28 files changed, 431 insertions(+), 3 deletions(-)
 create mode 100644 public/css/colorschemes/c64.css
 create mode 100644 public/css/colorschemes/catppuccin-frappe.css
 create mode 100644 public/css/colorschemes/catppuccin-latte.css
 create mode 100644 public/css/colorschemes/catppuccin-mocha.css
 create mode 100644 public/css/colorschemes/gruvbox-dark.css
 create mode 100644 public/css/colorschemes/gruvbox-material.css
 create mode 100644 public/css/colorschemes/gruvbox.css
 create mode 100644 public/css/colorschemes/maia.css
 create mode 100644 public/css/colorschemes/man-page.css
 create mode 100644 public/css/colorschemes/mono-amber.css
 create mode 100644 public/css/colorschemes/mono-cyan.css
 create mode 100644 public/css/colorschemes/mono-green.css
 create mode 100644 public/css/colorschemes/mono-red.css
 create mode 100644 public/css/colorschemes/mono-white.css
 create mode 100644 public/css/colorschemes/mono-yellow.css
 create mode 100644 public/css/colorschemes/papercolor-dark.css
 create mode 100644 public/css/colorschemes/papercolor-light.css
 create mode 100644 public/css/colorschemes/shel.css
 create mode 100644 public/css/colorschemes/slate.css
 create mode 100644 public/css/colorschemes/solarized-dark.css
 create mode 100644 public/css/colorschemes/solarized-light.css
 create mode 100644 public/css/colorschemes/terminal-basic.css
 create mode 100644 public/js/themeSwap.js

diff --git a/public/css/colorschemes/c64.css b/public/css/colorschemes/c64.css
new file mode 100644
index 0000000..b3b7bf8
--- /dev/null
+++ b/public/css/colorschemes/c64.css
@@ -0,0 +1,13 @@
+:root {
+    --background: #40318d;
+    --background-secondary: #483c8b;
+    --foreground: #f7f7f7;
+    --links: #67b6bd;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: dark;
+}
diff --git a/public/css/colorschemes/catppuccin-frappe.css b/public/css/colorschemes/catppuccin-frappe.css
new file mode 100644
index 0000000..debb417
--- /dev/null
+++ b/public/css/colorschemes/catppuccin-frappe.css
@@ -0,0 +1,13 @@
+:root {
+    --background: #232634;
+    --background-secondary: #414559;
+    --foreground: #c6d0f5;
+    --links: #8caaee;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: dark;
+}
diff --git a/public/css/colorschemes/catppuccin-latte.css b/public/css/colorschemes/catppuccin-latte.css
new file mode 100644
index 0000000..5990649
--- /dev/null
+++ b/public/css/colorschemes/catppuccin-latte.css
@@ -0,0 +1,13 @@
+:root {
+    --background: #dce0e8;
+    --background-secondary: #ccd0da;
+    --foreground: #4c4f69;
+    --links: #1e66f5;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: light;
+}
diff --git a/public/css/colorschemes/catppuccin-macchiato.css b/public/css/colorschemes/catppuccin-macchiato.css
index e431dd6..5d69ee6 100644
--- a/public/css/colorschemes/catppuccin-macchiato.css
+++ b/public/css/colorschemes/catppuccin-macchiato.css
@@ -1,6 +1,6 @@
 :root {
     --background: #181926;
-    --background-light: #363a4f;
+    --background-secondary: #363a4f;
     --foreground: #cad3f5;
     --links: #8aadf4;
     --warning: #ff7272;
diff --git a/public/css/colorschemes/catppuccin-mocha.css b/public/css/colorschemes/catppuccin-mocha.css
new file mode 100644
index 0000000..7d91e5e
--- /dev/null
+++ b/public/css/colorschemes/catppuccin-mocha.css
@@ -0,0 +1,13 @@
+:root {
+    --background: #11111b;
+    --background-secondary: #313244;
+    --foreground: #cdd6f4;
+    --links: #89b4fa;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: dark;
+}
diff --git a/public/css/colorschemes/gruvbox-dark.css b/public/css/colorschemes/gruvbox-dark.css
new file mode 100644
index 0000000..783303a
--- /dev/null
+++ b/public/css/colorschemes/gruvbox-dark.css
@@ -0,0 +1,13 @@
+:root {
+    --background: #282828;
+    --background-secondary: #928374;
+    --foreground: #ebdbb2;
+    --links: #458588;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: dark;
+}
diff --git a/public/css/colorschemes/gruvbox-material.css b/public/css/colorschemes/gruvbox-material.css
new file mode 100644
index 0000000..db83475
--- /dev/null
+++ b/public/css/colorschemes/gruvbox-material.css
@@ -0,0 +1,13 @@
+:root {
+    --background: #282828;
+    --background-secondary: #3c3836;
+    --foreground: #d4be98;
+    --links: #7daea3;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: dark;
+}
diff --git a/public/css/colorschemes/gruvbox.css b/public/css/colorschemes/gruvbox.css
new file mode 100644
index 0000000..5d02951
--- /dev/null
+++ b/public/css/colorschemes/gruvbox.css
@@ -0,0 +1,13 @@
+:root {
+    --background: #fbf1c7;
+    --background-secondary: #928374;
+    --foreground: #3c3836;
+    --links: #458588;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: light;
+}
diff --git a/public/css/colorschemes/maia.css b/public/css/colorschemes/maia.css
new file mode 100644
index 0000000..4717327
--- /dev/null
+++ b/public/css/colorschemes/maia.css
@@ -0,0 +1,13 @@
+:root {
+    --background: #31363a;
+    --background-secondary: #4c4f4d;
+    --foreground: #e8e8e8;
+    --links: #13bf9d;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: dark;
+}
diff --git a/public/css/colorschemes/man-page.css b/public/css/colorschemes/man-page.css
new file mode 100644
index 0000000..6a75bbe
--- /dev/null
+++ b/public/css/colorschemes/man-page.css
@@ -0,0 +1,13 @@
+:root {
+    --background: #fef49c;
+    --background-secondary: #e5e500;
+    --foreground: #000000;
+    --links: #b200b2;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: light;
+}
diff --git a/public/css/colorschemes/mono-amber.css b/public/css/colorschemes/mono-amber.css
new file mode 100644
index 0000000..364900b
--- /dev/null
+++ b/public/css/colorschemes/mono-amber.css
@@ -0,0 +1,17 @@
+:root {
+    --background: #2b1900;
+    --background-secondary: #402500;
+    --foreground: #ff9400;
+    --links: #ffc28a;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: dark;
+}
+
+a {
+    text-decoration: underline !important;
+}
diff --git a/public/css/colorschemes/mono-cyan.css b/public/css/colorschemes/mono-cyan.css
new file mode 100644
index 0000000..e31971f
--- /dev/null
+++ b/public/css/colorschemes/mono-cyan.css
@@ -0,0 +1,17 @@
+:root {
+    --background: #00222B;
+    --background-secondary: #003340;
+    --foreground: #00CCFF;
+    --links: #ccf0ff;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: dark;
+}
+
+a {
+    text-decoration: underline !important;
+}
diff --git a/public/css/colorschemes/mono-green.css b/public/css/colorschemes/mono-green.css
new file mode 100644
index 0000000..ed40158
--- /dev/null
+++ b/public/css/colorschemes/mono-green.css
@@ -0,0 +1,17 @@
+:root {
+    --background: #022B00;
+    --background-secondary: #034000;
+    --foreground: #0BFF00;
+    --links: #b6ffb1;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: dark;
+}
+
+a {
+    text-decoration: underline !important;
+}
diff --git a/public/css/colorschemes/mono-red.css b/public/css/colorschemes/mono-red.css
new file mode 100644
index 0000000..d20690a
--- /dev/null
+++ b/public/css/colorschemes/mono-red.css
@@ -0,0 +1,17 @@
+:root {
+    --background: #2B0C00;
+    --background-secondary: #401200;
+    --foreground: #FF3600;
+    --links: #ffb09c;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: dark;
+}
+
+a {
+    text-decoration: underline !important;
+}
diff --git a/public/css/colorschemes/mono-white.css b/public/css/colorschemes/mono-white.css
new file mode 100644
index 0000000..e921ece
--- /dev/null
+++ b/public/css/colorschemes/mono-white.css
@@ -0,0 +1,17 @@
+:root {
+    --background: #262626;
+    --background-secondary: #3B3B3B;
+    --foreground: #FAFAFA;
+    --links: #a9a9a9;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: dark;
+}
+
+a {
+    text-decoration: underline !important;
+}
diff --git a/public/css/colorschemes/mono-yellow.css b/public/css/colorschemes/mono-yellow.css
new file mode 100644
index 0000000..b979c4b
--- /dev/null
+++ b/public/css/colorschemes/mono-yellow.css
@@ -0,0 +1,17 @@
+:root {
+    --background: #2B2400;
+    --background-secondary: #403500;
+    --foreground: #FFD300;
+    --links: #ffe8a2;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: dark;
+}
+
+a {
+    text-decoration: underline !important;
+}
diff --git a/public/css/colorschemes/papercolor-dark.css b/public/css/colorschemes/papercolor-dark.css
new file mode 100644
index 0000000..1f5fe91
--- /dev/null
+++ b/public/css/colorschemes/papercolor-dark.css
@@ -0,0 +1,13 @@
+:root {
+    --background: #1C1C1C;
+    --background-secondary: #585858;
+    --foreground: #D0D0D0;
+    --links: #5FAFD7;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: dark;
+}
diff --git a/public/css/colorschemes/papercolor-light.css b/public/css/colorschemes/papercolor-light.css
new file mode 100644
index 0000000..19edd87
--- /dev/null
+++ b/public/css/colorschemes/papercolor-light.css
@@ -0,0 +1,13 @@
+:root {
+    --background: #EEEEEE;
+    --background-secondary: #BCBCBC;
+    --foreground: #444444;
+    --links: #0087AF;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: light;
+}
diff --git a/public/css/colorschemes/shel.css b/public/css/colorschemes/shel.css
new file mode 100644
index 0000000..6ea4e5d
--- /dev/null
+++ b/public/css/colorschemes/shel.css
@@ -0,0 +1,13 @@
+:root {
+    --background: #2C2423;
+    --background-secondary: #918988;
+    --foreground: #F5EEEC;
+    --links: #2C64A2;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: dark;
+}
diff --git a/public/css/colorschemes/slate.css b/public/css/colorschemes/slate.css
new file mode 100644
index 0000000..df41859
--- /dev/null
+++ b/public/css/colorschemes/slate.css
@@ -0,0 +1,13 @@
+:root {
+    --background: #222222;
+    --background-secondary: #494949;
+    --foreground: #E0E0E0;
+    --links: #02C5E0;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: dark;
+}
diff --git a/public/css/colorschemes/solarized-dark.css b/public/css/colorschemes/solarized-dark.css
new file mode 100644
index 0000000..d3a2aa9
--- /dev/null
+++ b/public/css/colorschemes/solarized-dark.css
@@ -0,0 +1,13 @@
+:root {
+    --background: #073642;
+    --background-secondary: #657B83;
+    --foreground: #FDF6E3;
+    --links: #2699FF;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: dark;
+}
diff --git a/public/css/colorschemes/solarized-light.css b/public/css/colorschemes/solarized-light.css
new file mode 100644
index 0000000..70d747a
--- /dev/null
+++ b/public/css/colorschemes/solarized-light.css
@@ -0,0 +1,13 @@
+:root {
+    --background: #FDF6E3;
+    --background-secondary: #EEE8D5;
+    --foreground: #073642;
+    --links: #268BD2;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: light;
+}
diff --git a/public/css/colorschemes/terminal-basic.css b/public/css/colorschemes/terminal-basic.css
new file mode 100644
index 0000000..929a613
--- /dev/null
+++ b/public/css/colorschemes/terminal-basic.css
@@ -0,0 +1,13 @@
+:root {
+    --background: #FFFFFF;
+    --background-secondary: #bfbfbf;
+    --foreground: #000000;
+    --links: #0000ff;
+    --warning: #ff7272;
+    --warning-box-bg: #f64a3c;
+    --warning-box-border: #c81a11;
+}
+
+html {
+    color-scheme: light;
+}
diff --git a/public/css/master.css b/public/css/master.css
index 84b0ddf..a1def3d 100644
--- a/public/css/master.css
+++ b/public/css/master.css
@@ -238,7 +238,7 @@ table.computers p.description {
 }
 
 table.computers th {
-    background-color: var(--background-light);
+    background-color: var(--background-secondary);
 }
 
 table.computers td,
@@ -288,6 +288,9 @@ table.gb-entry-form tr td span.text-danger {
 table.gb-entry-form tr td textarea,
 table.gb-entry-form tr td input {
     margin-bottom: 5px;
+    margin-left: 10px;
+    background-color: var(--background);
+    border: var(--foreground) solid 1px;
 }
 
 table.gb-entry-form-container {
@@ -461,3 +464,13 @@ .error-box p {
     margin: 0;
     color: var(--foreground)
 }
+
+label[for="scheme-selector"] {
+    font-weight: bold;
+}
+
+#scheme-selector {
+    border: var(--foreground) solid 1px;
+    background-color: var(--background-secondary);
+    color: var(--foreground)
+}
diff --git a/public/js/themeSwap.js b/public/js/themeSwap.js
new file mode 100644
index 0000000..18faaee
--- /dev/null
+++ b/public/js/themeSwap.js
@@ -0,0 +1,72 @@
+/**
+ * Retrieves a cookie's value
+ * @param {string} cname Cookie name
+ * @returns {string}     Cookie value
+ */
+function getCookie(cname) {
+    let name = cname + "=";
+    let decodedCookie = decodeURIComponent(document.cookie);
+    let ca = decodedCookie.split(';');
+    for(let i = 0; i <ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) == ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return "";
+}
+
+/**
+ * Sets/creates a cookie
+ * @param {string} cname  Cookie name
+ * @param {string} cvalue Cookie value
+ * @param {number} exdays Cookie lifespan (days)
+ */
+function setCookie(cname, cvalue, exdays) {
+    const d = new Date();
+    d.setTime(d.getTime() + (exdays*24*60*60*1000));
+    let expires = "expires="+ d.toUTCString();
+    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+}
+
+/**
+ * Checks if a cookie exists
+ * @param {string} cname Cookie name
+ * @returns {boolean}    If cookie exists or not
+ */
+function cookieExists(cname) {
+    const cvalue = getCookie(cname);
+    return cvalue !== "";
+}
+
+/**
+ * Swaps the colorscheme
+ * @param option
+ */
+function swapScheme(scheme) {
+    setCookie("colorscheme", scheme, 90);
+    document.getElementById("css-colorscheme").href = `/css/colorschemes/${scheme}.css`;
+    console.log(`Set colorscheme to ${getCookie("colorscheme")}`)
+}
+
+function setDefaultScheme() {
+    if (!cookieExists("colorscheme")) {
+        setCookie("colorscheme", "catppuccin-macchiato", 90);
+        console.debug("Set default colorscheme");
+    } else {
+        const scheme = getCookie("colorscheme");
+        const schemeselector = document.getElementById("scheme-selector");
+        if (scheme && schemeselector) {
+            for (let option of schemeselector.options) {
+                if (option.value == scheme) {
+                    option.selected = true;
+                    break;
+                }
+            }
+        }
+        swapScheme(scheme);
+    }
+}
diff --git a/resources/views/includes/footer.blade.php b/resources/views/includes/footer.blade.php
index 83c01b2..145b879 100644
--- a/resources/views/includes/footer.blade.php
+++ b/resources/views/includes/footer.blade.php
@@ -28,4 +28,36 @@ class="pixel" alt="Wiby - Search Engine for the Classic Web">
     &copy; floppydisk 2021-{{ date('Y') }}, v{{ config('app.version') }}, <a
         href="https://github.com/floppydisk05/diskfloppy.me">Source</a>,
 	Served by {{ gethostname() }}<br>
+    <label for="scheme-selector">Color Scheme:</label>
+    <select onchange="swapScheme(this.value)" id="scheme-selector">
+        <optgroup label="Misc">
+            <option value="c64">C64</option>
+        </optgroup>
+        <optgroup label="Light">
+            <option value="catppuccin-latte">Catppuccin Latte</option>
+            <option value="gruvbox">Gruvbox</option>
+            <option value="man-page">Man Page</option>
+            <option value="papercolor-light">Papercolor Light</option>
+            <option value="solarized-light">Solarized Light</option>
+            <option value="terminal-basic">Terminal Basic</option>
+        </optgroup>
+        <optgroup label="Dark">
+            <option value="catppuccin-frappe">Catppuccin Frappé</option>
+            <option value="catppuccin-macchiato" selected="selected">Catppuccin Macchiato</option>
+            <option value="catppuccin-mocha">Catppuccin Mocha</option>
+            <option value="gruvbox-dark">Gruvbox Dark</option>
+            <option value="gruvbox-material">Gruvbox Material</option>
+            <option value="maia">Maia</option>
+            <option value="mono-amber">Mono Amber</option>
+            <option value="mono-cyan">Mono Cyan</option>
+            <option value="mono-green">Mono Green</option>
+            <option value="mono-red">Mono Red</option>
+            <option value="mono-white">Mono White</option>
+            <option value="mono-yellow">Mono Yellow</option>
+            <option value="papercolor-dark">Papercolor Dark</option>
+            <option value="shel">Shel</option>
+            <option value="slate">Slate</option>
+            <option value="solarized-dark">Solarized Dark</option>
+        </optgroup>
+    </select><br>
 </div>
diff --git a/resources/views/includes/head.blade.php b/resources/views/includes/head.blade.php
index 3eb2559..3d51672 100644
--- a/resources/views/includes/head.blade.php
+++ b/resources/views/includes/head.blade.php
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="/css/master.css"/>
     <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"/>
     <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"/>
+    <script src="/js/themeSwap.js"></script>
     {!! (intval(date('n')) == 12) ? '<script src="/js/christmas/snow.js"></script>' : '' !!}
 
     <!-- Page-specific -->
diff --git a/resources/views/layouts/default.blade.php b/resources/views/layouts/default.blade.php
index 996d895..144c32b 100644
--- a/resources/views/layouts/default.blade.php
+++ b/resources/views/layouts/default.blade.php
@@ -4,7 +4,7 @@
     @include('includes.head')
 </head>
 
-<body>
+<body onload="setDefaultScheme()">
 <div class="page">
     <div id="header" class="header">
         @include('includes.header')