Testing theme changer

author: Kyle Gunger <kgunger12@gmail.com> 2022-01-10 22:37:25 -0500
committer: Kyle Gunger <kgunger12@gmail.com> 2022-01-10 22:37:45 -0500
commit: 340d024e5fc09d1ab89062ece7b8788786ba564b (patch)
tree: 594d7e1f695b25ca24084474dd00f4a6927bd100
parent: 972392448a8c14bf896516268d304baf961c1648 (diff)
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
author	Kyle Gunger <kgunger12@gmail.com>	2022-01-10 22:37:25 -0500
committer	Kyle Gunger <kgunger12@gmail.com>	2022-01-10 22:37:45 -0500
commit	340d024e5fc09d1ab89062ece7b8788786ba564b (patch)
tree	594d7e1f695b25ca24084474dd00f4a6927bd100
parent	972392448a8c14bf896516268d304baf961c1648 (diff)