diff options
28 files changed, 431 insertions, 3 deletions
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 @@ a:hover { 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 @@ © 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') |