From 340d024e5fc09d1ab89062ece7b8788786ba564b Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Mon, 10 Jan 2022 22:37:25 -0500 Subject: Testing theme changer --- experience/index.html | 10 +- index.html | 18 +- scripts/cookie.js | 36 ++++ scripts/light-dark.js | 24 +++ scripts/theme.js | 75 +++++++ style.css | 41 ---- styles/input.css | 461 ++++++++++++++++++++++++++++++++++++++++++ styles/style.css | 47 +++++ styles/themes/colors-base.css | 14 ++ styles/themes/colors-dark.css | 13 ++ 10 files changed, 689 insertions(+), 50 deletions(-) create mode 100644 scripts/cookie.js create mode 100644 scripts/light-dark.js create mode 100644 scripts/theme.js delete mode 100644 style.css create mode 100644 styles/input.css create mode 100644 styles/style.css create mode 100644 styles/themes/colors-base.css create mode 100644 styles/themes/colors-dark.css diff --git a/experience/index.html b/experience/index.html index 2e324e4..4f6c9a4 100644 --- a/experience/index.html +++ b/experience/index.html @@ -6,10 +6,14 @@ - - + + - + + + + +

See the homepage for experience you can play with.

diff --git a/index.html b/index.html index 03b0549..151979f 100644 --- a/index.html +++ b/index.html @@ -2,15 +2,20 @@ - - + + - + - - + + - + + + + + + @@ -30,5 +35,6 @@ Full website will be up soon at cshift.net + diff --git a/scripts/cookie.js b/scripts/cookie.js new file mode 100644 index 0000000..9c88963 --- /dev/null +++ b/scripts/cookie.js @@ -0,0 +1,36 @@ +'use strict'; + +class Cookies { + static getCookie(name){ + let cookies = document.cookie.split(";"); + for(let i in cookies) { + let cname = cookies[i].trim().split("=")[0]; + if(cname == name){ + return cookies[i].trim().slice(name.length + 1); + } + } + return ""; + } + + static setCookie(name, value, data = {SameSite: "Strict"}) { + let extra = ""; + + for(let key in data) + { + extra += "; " + key + "=" + data[key]; + } + + document.cookie = name + "=" + value + extra; + } + + static setYearCookie(name, value) { + var date = new Date(Date.now()); + date.setFullYear(date.getFullYear() + 1); + Cookies.setCookie(name, value, {SameSite: "Strict", expires: date.toUTCString()}); + } + + static removeCookie(name) { + var date = new Date(0); + Cookies.setCookie(name, "", {SameSite: "Strict", expires: date.toUTCString()}); + } +} diff --git a/scripts/light-dark.js b/scripts/light-dark.js new file mode 100644 index 0000000..0e23d98 --- /dev/null +++ b/scripts/light-dark.js @@ -0,0 +1,24 @@ +'use strict'; + +(function() { + lightDark = document.getElementById("light-dark"); + + function setButtonText() { + if(Theme.get() == BASE_THEMES[0][0]) + lightDark.innerText = BASE_THEMES[1][1] + " Mode"; + else + lightDark.innerText = BASE_THEMES[1][0] + " Mode"; + } + + function changeTheme(e) { + if(Theme.get() == BASE_THEMES[0][0]) + Theme.set(BASE_THEMES[0][1]); + else + Theme.set(BASE_THEMES[0][0]); + + setButtonText(); + } + + lightDark.addEventListener("click", changeTheme); + setButtonText(); +})(); diff --git a/scripts/theme.js b/scripts/theme.js new file mode 100644 index 0000000..8147260 --- /dev/null +++ b/scripts/theme.js @@ -0,0 +1,75 @@ +'use strict'; + +const BASE_THEMES = [[ + "/styles/themes/colors-base.css", + "/styles/themes/colors-dark.css" +], +[ + "Light", + "Dark" +]]; + +const APP_NAME = "cshift-net"; + +class Theme{ + static theme = document.getElementById("theme"); + static UserThemes = [[],[]]; + + static init() + { + let uth = Cookies.getCookie("userThemes-" + APP_NAME).split(','); + + for (let i = 1; i < uth.length; i += 2) + { + this.UserThemes[0].push(uth[i - 1]); + this.UserThemes[1].push(uth[i]); + } + + if(Cookies.getCookie("theme-" + APP_NAME) == ""){ + Cookies.setYearCookie("theme", BASE_THEMES[0][0]); + } + } + + static restore() + { + Theme.init(); + Theme.theme.setAttribute("href", Cookies.getCookie("theme-" + APP_NAME) + "?v=" + Date.now()); + } + + static set(sheet) + { + Cookies.setYearCookie("theme-" + APP_NAME, sheet); + Theme.theme.setAttribute("href", sheet + "?v=" + Date.now()); + } + + static get() { + return Cookies.getCookie("theme-" + APP_NAME); + } + + static setUserThemes() { + let out = ""; + for (let i = 0; i < this.UserThemes[0].length; i++) + { + if(i !== 0) + out = out + ","; + + out = out + this.UserThemes[0][i] + "," + this.UserThemes[1][i]; + } + + Cookies.setYearCookie("userThemes-" + APP_NAME, out); + } + + static removeUserTheme (index) { + this.UserThemes[0].splice(index, 1); + this.UserThemes[1].splice(index, 1); + this.setUserThemes(); + } + + static addUserTheme (name, value) { + this.UserThemes[0].push(name); + this.UserThemes[1].push(value); + this.setUserThemes(); + } +} + +Theme.restore(); \ No newline at end of file diff --git a/style.css b/style.css deleted file mode 100644 index 2d5a08e..0000000 --- a/style.css +++ /dev/null @@ -1,41 +0,0 @@ -* { - font-family: "Roboto", sans-serif; -} - -h1::after { - display: block; - - width: 100%; - height: 3px; - - background-color: #bbb; - - content: ''; -} - -a { - color: #0099ff; - text-decoration: none; - transition-duration: 0.2s; -} - -a:hover { - color: black; -} - -span.end { - display: block; - margin-top: 10px; - text-emphasis: bold; -} - -span.end::before { - display: block; - - width: 100%; - height: 3px; - - background-color: #bbb; - - content: ''; -} diff --git a/styles/input.css b/styles/input.css new file mode 100644 index 0000000..0b56982 --- /dev/null +++ b/styles/input.css @@ -0,0 +1,461 @@ +/* Begin Input CSS */ + +/* All input */ + +input, select +{ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + margin: 5px; + + display: block; + + box-sizing: border-box; +} + +/* Button input */ + +input[type=button], input[type=submit], button, a +{ + padding: 10px; + + border: none; + border-radius: 5px; + + background-color: var(--input-bg-button); + color: var(--input-color-button); + + font-size: medium; + + transition-duration: 0.2s; + + cursor: pointer; +} + +input[type=button]:hover, input[type=submit]:hover, button:hover, a:hover +{ + background-color: var(--input-bg-button-hover); +} + +input[type=button]:active, input[type=submit]:active, button:active, a:active +{ + background-color: var(--input-bg-button-active); +} + +/* Text, date, number, and time input */ + +input[type=text], input[type=date], input[type=time], input[type="number"] +{ + border: 2px solid var(--input-border-text); + border-radius: 3px; + padding: 5px; + background-color: var(--input-bg-text); + color: var(--input-color-text); + font-size: 1em; +} + +input[type=text]:hover, input[type=date]:hover, input[type=time]:hover, input[type="number"]:hover +{ + border-color: var(--input-border-text-hover); +} + +input[type=text]:focus, input[type=date]:focus, input[type=time]:focus, input[type="number"]:focus +{ + border-color: var(--input-border-text-active); +} + +/* Radial input */ + +input[type=radio] +{ + width: 20px; + height: 20px; + + border: 3px solid var(--input-border-bool); + border-radius: 50%; + + transition-duration: 0.2s; + + background-color: var(--input-bg-bool); + + cursor: pointer; + + display: inline-block; + vertical-align: middle; +} + +input[type=radio]:checked, input[type=radio]:hover{ + border-width: 6px; +} + +input[type=radio]:checked +{ + background-color: var(--input-bg-bool-true); + border-color: var(--input-border-bool-true); +} + +input[type=radio]:hover +{ + background-color: var(--input-bg-bool-hover); + border-color: var(--input-border-bool-hover); +} + +input[type=radio]:active +{ + background-color: var(--input-bg-bool-active); + border-color: var(--input-border-bool-active); +} + +/* Checkbox input */ + +input[type=checkbox] +{ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + display: inline-block; + vertical-align: middle; + + width: 20px; + height: 20px; + + border: 3px solid var(--input-border-bool); + + border-radius: 2px; + + transition-duration: 0.2s; + + background-color: var(--input-bg-bool); + + cursor: pointer; +} + +input[type=checkbox]:checked +{ + border-width: 10px; + background-color: var(--input-border-bool-true); + border-color: var(--input-border-bool-true); +} + +input[type=checkbox]:hover +{ + background-color: var(--input-bg-bool-hover); + border-color: var(--input-border-bool-hover); +} + +input[type=checkbox]:active +{ + background-color: var(--input-bg-bool-active); + border-color: var(--input-border-bool-active); +} + +input[type=checkbox]::after +{ + height: 15px; + width: 10px; + + box-sizing: border-box; + + position: relative; + + display: block; + + border-color: var(--input-bg-bool-true); + border-style: solid; + border-width: 0px 0px 0px 0px; + + top: calc(50% - 10px); + left: calc(50% - 5px); + + transform-origin: center; + transform: rotate(45deg); + + content: ''; +} + +input[type=checkbox]:checked::after +{ + border-width: 0px 3px 3px 0px; +} + +/* Color input */ + +input[type=color] +{ + display: inline-block; + + vertical-align: middle; + + height: 20px; + width: 20px; + + margin: 0; + padding: 0; + + border: 0; + + cursor: pointer; +} + +/* File input */ + +input[type=file] +{ + display: none; +} + +/* Custom select */ + +div.input-select +{ + font-size: 1em; + + display: block; + position: absolute; + z-index: 0; + + pointer-events: none; + + overflow-y: auto; + overflow-x: hidden; + + max-height: 8em; + + border-radius: 3px; +} + +div.input-select > div +{ + display: none; + pointer-events: none; +} + +div.input-select > div[selected=true] +{ + display: block; +} + +div.input-container:focus > div.input-select +{ + transform: translate(0, 2em); + + pointer-events: all; + z-index: 1; + + border: 2px solid var(--input-border-select-active); + background-color: var(--input-bg-select-active); +} + +div.input-container:focus > div.input-select > div +{ + pointer-events: all; + display: block; + padding: 5px; + width: 6em; +} + +div.input-container:focus > div.input-select > div:hover +{ + background-color: var(--input-bg-select-hover); + color: var(--input-color-select-hover); +} + +div.input-container:focus > div.input-select > div[selected=true]:after +{ + font-family: "IcoFont"; + content: '\eed8'; + font-size: medium; +} + +/* Input container */ + +*.input-container { + margin: 5px; + padding: 5px; + + border-radius: 3px; + + display: inline-block; +} + +/* Color container */ + +div.input-container[type=color] +{ + text-align: center; + + background-color: var(--input-bg-button); + color: var(--input-color-button); + + transition-duration: 0.2s; + + cursor: pointer; + + width: max-content; +} + +div.input-container[type=color]::after +{ + display: inline; + + vertical-align: middle; + + content: ' Pick a color'; +} + +div.input-container[type=color]:hover +{ + background-color: var(--input-bg-button-hover); +} + +div.input-container[type=color]:active +{ + background-color: var(--input-bg-button-active); +} + +/* File input container */ + +div.input-container[type=file] +{ + background-color: var(--input-bg-button); + color: var(--input-color-button); + + transition-duration: 0.2s; + + cursor: pointer; + + text-align: center; + + width: max-content; + height: max-content; +} + +div.input-container[type=file]:hover +{ + background-color: var(--input-bg-button-hover); +} + +div.input-container[type=file]:active +{ + background-color: var(--input-bg-button-active); +} + +div.input-container[type=file]::after +{ + display: inline; + + vertical-align: middle; + + content: attr(data-files); +} + +/* Radio input container */ + +div.input-container[type=radio]::before +{ + display: block; + content: attr(data-prompt) ":"; + transition-duration: 0.2s; +} + +div.input-container[type=radio] +{ + background-color: var(--input-bg-multi); +} + +div.input-container[type=radio]:hover +{ + background-color: var(--input-bg-multi); +} + +/* Select input container */ + +div.input-container[type=select] +{ + border: 2px solid var(--input-border-select); + background-color: var(--input-bg-select); + min-height: 1.25em; + min-width: 8em; + width: calc(100% - 2em); + + color: var(--input-color-select); + + cursor: pointer; + + text-align: left; +} + +div.input-container[type=select]:hover +{ + border-color: var(--input-border-select-hover); + background-color: var(--input-bg-select-hover); + + color: var(--input-color-select-hover); +} + +div.input-container[type=select]:focus +{ + border-color: var(--input-border-select-active); + background-color: var(--input-bg-select-active); + + color: var(--input-color-select-active); + + overflow: visible; +} + +div.input-container[type=select]:after +{ + font-family: "IcoFont"; + font-size: medium; + content: '\eab2'; + display: block; + height: 100%; + width: 100%; + color: var(--input-color-select); + text-align: right; +} + +div.input-container[type=select]:after:hover +{ + color: var(--input-color-select-hover); +} + +div.input-container[type=select]:focus::after +{ + content: '\eab9'; + color: var(--input-color-select-active); +} + +/* Input Title Wrapper */ + +div.input-title-wrapper::before +{ + color: var(--main-color); + content: attr(data-title); + display: block; +} + +div.input-title-wrapper +{ + background-color: var(--main-bg); + box-shadow: var(--gui-shadow-game) 3px 3px 2px; + border-radius: 5px; + margin: 10px; + padding: 5px; +} + +div.input-title-wrapper[type=checkbox] +{ + cursor: pointer; +} + +div.input-title-wrapper[type=checkbox] > input +{ + pointer-events: none; +} + + +/* End Input CSS */ \ No newline at end of file diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..e778134 --- /dev/null +++ b/styles/style.css @@ -0,0 +1,47 @@ +* { + font-family: "Roboto", sans-serif; + background-color: var(--main-bg); + color: var(--main-color); +} + +h1::after { + display: block; + + width: 100%; + height: 3px; + + background-color: var(--divider-color); + + content: ''; +} + +a { + color: var(--link-color); + text-decoration: none; + transition-duration: 0.2s; +} + +a:hover { + color: var(--link-color); +} + +a:active { + color: var(--link-color); +} + +span.end { + display: block; + margin-top: 10px; + text-emphasis: bold; +} + +span.end::before { + display: block; + + width: 100%; + height: 3px; + + background-color: var(--divider-color); + + content: ''; +} diff --git a/styles/themes/colors-base.css b/styles/themes/colors-base.css new file mode 100644 index 0000000..3dab58b --- /dev/null +++ b/styles/themes/colors-base.css @@ -0,0 +1,14 @@ +* { + /* Main */ + --main-bg: white; + --main-color: black; + + /* Underline */ + --divider-color: #bbb; + + /* Links */ + --link-color: #0084ff; + --link-color-hover: #3ea2ff; + --link-color-active:#0056a7; + +} \ No newline at end of file diff --git a/styles/themes/colors-dark.css b/styles/themes/colors-dark.css new file mode 100644 index 0000000..64a33d1 --- /dev/null +++ b/styles/themes/colors-dark.css @@ -0,0 +1,13 @@ +* { + /* Main */ + --main-bg: #333; + --main-color: white; + + /* Underline */ + --divider-color: #555; + + /* Links */ + --link-color: #0084ff; + --link-color-hover: #3ea2ff; + --link-color-active:#0056a7; +} \ No newline at end of file -- cgit v1.2.3