diff options
| -rw-r--r-- | experience/index.html | 10 | ||||
| -rw-r--r-- | index.html | 18 | ||||
| -rw-r--r-- | scripts/cookie.js | 36 | ||||
| -rw-r--r-- | scripts/light-dark.js | 24 | ||||
| -rw-r--r-- | scripts/theme.js | 75 | ||||
| -rw-r--r-- | styles/input.css | 461 | ||||
| -rw-r--r-- | styles/style.css (renamed from style.css) | 14 | ||||
| -rw-r--r-- | styles/themes/colors-base.css | 14 | ||||
| -rw-r--r-- | styles/themes/colors-dark.css | 13 |
9 files changed, 652 insertions, 13 deletions
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 @@ <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"> - <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"> - <link rel="icon" href="../favicon.ico" type="image/x-icon"> + <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> + <link rel="icon" href="/favicon.ico" type="image/x-icon"> - <link rel="stylesheet" href="../style.css"> + <link rel="stylesheet" href="/styles/style.css"> + <link rel="stylesheet" id="style" href="/styles/themes/colors-base.css"/> + + <script defer="true" src="/scripts/cookie.js"></script> + <script defer="true" src="/scripts/theme.js"></script> </head> <body> <h1>See <a href="../">the homepage</a> for experience you can play with.</h1> @@ -2,15 +2,20 @@ <html> <head> - <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta charset="utf-8"> + <meta name="viewport" content="width=device-width,initial-scale=1"/> + <meta charset="utf-8"/> - <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"> + <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/> - <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> - <link rel="icon" href="favicon.ico" type="image/x-icon"> + <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> + <link rel="icon" href="favicon.ico" type="image/x-icon"/> - <link rel="stylesheet" href="style.css"> + <link rel="stylesheet" href="/styles/style.css"/> + <link rel="stylesheet" id="style" href="/styles/themes/colors-base.css"/> + + <script defer="true" src="/scripts/cookie.js"></script> + <script defer="true" src="/scripts/theme.js"></script> + <script defer="true" src="/scripts/light-dark.js"></script> </head> <body> @@ -30,5 +35,6 @@ </ul> <span class="end">Full website will be up soon at <a href="https://cshift.net">cshift.net</a></span> </div> + <button id="light-dark">light-dark</button> </body> </html> 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/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/style.css b/styles/style.css index 2d5a08e..e778134 100644 --- a/style.css +++ b/styles/style.css @@ -1,5 +1,7 @@ * { font-family: "Roboto", sans-serif; + background-color: var(--main-bg); + color: var(--main-color); } h1::after { @@ -8,19 +10,23 @@ h1::after { width: 100%; height: 3px; - background-color: #bbb; + background-color: var(--divider-color); content: ''; } a { - color: #0099ff; + color: var(--link-color); text-decoration: none; transition-duration: 0.2s; } a:hover { - color: black; + color: var(--link-color); +} + +a:active { + color: var(--link-color); } span.end { @@ -35,7 +41,7 @@ span.end::before { width: 100%; height: 3px; - background-color: #bbb; + 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 |