summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorKyle Gunger <kgunger12@gmail.com>2022-01-10 22:37:25 -0500
committerKyle Gunger <kgunger12@gmail.com>2022-01-10 22:37:45 -0500
commit340d024e5fc09d1ab89062ece7b8788786ba564b (patch)
tree594d7e1f695b25ca24084474dd00f4a6927bd100
parent972392448a8c14bf896516268d304baf961c1648 (diff)
Testing theme changer
-rw-r--r--experience/index.html10
-rw-r--r--index.html18
-rw-r--r--scripts/cookie.js36
-rw-r--r--scripts/light-dark.js24
-rw-r--r--scripts/theme.js75
-rw-r--r--styles/input.css461
-rw-r--r--styles/style.css (renamed from style.css)14
-rw-r--r--styles/themes/colors-base.css14
-rw-r--r--styles/themes/colors-dark.css13
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>
diff --git a/index.html b/index.html
index 03b0549..151979f 100644
--- a/index.html
+++ b/index.html
@@ -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