theme editor

2020-12-24 17:31:50 -08:00
parent b49ba36450
commit aac1b64898
7 changed files with 140 additions and 23 deletions
--- a/css/style-2.css
+++ b/css/style-2.css
@@ -49,6 +49,14 @@
 }
 /*Variables*/
 :root {
+	--site-background: url('/img/lowpolyBackground.svg');
+	--color-primary: #35603E;
+	--color-selected: #ae9;
+	--color-highlight: #8f8;
+	--font-color: #fff;
+	--font-color-2: #bbb;
+	--input-background: #333;
+	--input-background-selected: #555;
 	--darkened-backdrop-filter: grayscale(1) brightness(0.3);
 	--regular-backdrop-filter: none;
 	--window-diagonal-size: 400px;
@@ -59,7 +67,7 @@
 	z-index: -1;
 	width: 100vw;
 	height: 100vh;
-	background: url('/img/lowpolyBackground.svg');
+	background: var(--site-background);
 	background-repeat: no-repeat;
 	background-attachment: fixed;
 	background-size: cover;
@@ -69,8 +77,8 @@
 html {
 	font-size: 12pt;
 	overflow-x: hidden;
-	background: #222;
-	color: white;
+	background: #151515;
+	color: var(--font-color);
 }
 body {
    width: 100vw;
@@ -91,7 +99,6 @@ header {
 }
 footer {
 	padding: 2rem;
-	/*background: #427A36;*/
 	display: grid;
 	grid-template-columns: calc(1fr - 4rem);
 	grid-gap: 1rem;
@@ -117,7 +124,6 @@ img {
 ::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 0.25rem;
-  margin: 1px;
 }
 /*Fonts*/
 .title {
@@ -168,12 +174,12 @@ a:hover {
 	text-decoration: underline;
 }
 ::selection {
-	color: white;
-	background: #8f8;
+	color: var(--font-color);
+	background: var(--color-highlight);
 }
 ::moz-selection {
-	color: white;
-	background: #8f8;
+	color: var(--font-color);
+	background: var(--color-highlight);;
 }
 /*General styles*/
 .hidden {
@@ -230,7 +236,7 @@ a:hover {
 	stroke-miterlimit: 1.5;
 	cursor: pointer;
 	z-index: 100;
-	background: #35603E;
+	background: var(--color-primary);
 	border-radius: 0 0 0 0.5rem;
 }
 .hamburger > path {
@@ -261,7 +267,7 @@ a:hover {
 	right: 2rem;
 	top: 2rem;
 	padding: 0;
-	background: #35603E;
+	background: var(--color-primary);
 	border-radius: 100%;
 	transition: 0.333s ease;
 }
@@ -309,7 +315,7 @@ a:hover {
 .input {
 	box-sizing: border-box;
 	width: 100%;
-	background: #333;
+	background: var(--input-background);
 	color: inherit;
 	font-size: 1.25rem;
 	font-family: Montserrat-Medium, Helvetica, Tahoma, Verdana, Geneva, sans-serif;
@@ -328,7 +334,7 @@ a:hover {
 	outline: none;
 }
 .input:active {
-	border-color: #ae9;
+	border-color: var(--color-selected);
 }
 .input:disabled {
 	opacity: 0.5;
@@ -342,7 +348,7 @@ a:hover {
 	grid-gap: 0.5rem;
 }
 .input-description {
-	color: #bbb;
+	color: var(--font-color-2);
 	font-style: italic;
 }
 input[type=checkbox].input {
@@ -502,7 +508,7 @@ textarea.input {
 	padding-top: 0.5rem;
 	border-top: 0.5rem;
 	border-style: solid;
-	border-color: #ae9;
+	border-color: var(--color-selected);
 	transition: 0.5s !important;
 }
 .selectable:hover {
@@ -511,12 +517,12 @@ textarea.input {
 }
 /*Draggables*/
 .draggable {
-	background: #333;
+	background: var(--input-background);
 	touch-action: none;
 }
 .dragging {
 	box-shadow: 0 0px 16px black;
-	background: #555;
+	background: var(--input-background-selected);
 	cursor: move;
 }
 .frame-list{
@@ -544,7 +550,7 @@ textarea.input {
 }
 .frame-option, .mask-option {
 	cursor: pointer;
-	background: #333;
+	background: var(--input-background);
 	width: 100%;
 	height: 6rem;
 	padding: 0.25rem 0;
@@ -557,7 +563,7 @@ textarea.input {
  	transition: 0.25s;
 }
 .frame-option.selected, .mask-option.selected {
-	background: #555;
+	background: var(--input-background-selected);
 }
 .frame-option > img, .mask-option > img {
 	width: 100%;
@@ -620,7 +626,7 @@ textarea.input {
    transform: translateX(-50%) translateY(-50%);
 	top: 50%;
 	left: 50%;
-	background: #35603E;
+	background: var(--color-primary);
 	border: 0.5rem solid #333;
 	border-radius: 1rem;
 	box-shadow: 0.5rem 0.5rem 1rem 0.5rem black;
@@ -645,7 +651,7 @@ textarea.input {
 }
 /*Text tab*/
 .text-option {
-	background: #333;
+	background: var(--input-background);
 }
 .text-codes {
 	max-width: calc(100vw - 3rem);
--- a/globalHTML/footer.php
+++ b/globalHTML/footer.php
@@ -9,8 +9,10 @@
 			<h4>Navigation</h4>
 			<h5><a href='/'>Home</a></h5>
 			<h5><a href='/creator'>Creator</a></h5>
+			<h5><a href='/old'>Old Creator</a></h5>
 			<h5><a href='/askurza'>Ask Urza</a></h5>
 			<h5><a href='/about'>About</a></h5>
+			<h5><a href='/theme'>Theme Editor</a></h5>
 		</div>
 		<div>
 			<h4>Legal</h4>
--- a/globalHTML/header.php
+++ b/globalHTML/header.php
@@ -9,13 +9,14 @@
 	<meta name="mobile-web-app-capable" content="yes">
 	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 	<link rel="stylesheet" href="/css/reset.css">
-	<link rel="stylesheet" href="/css/style-1.css">
+	<link rel="stylesheet" href="/css/style-2.css">
 	<link rel="shortcut icon" href="/favicon.ico">
 	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 	<link rel="manifest" href="/site.webmanifest">
-	<script src='/js/main.js'></script>
+	<script src='/js/themes.js'></script>
+	<script defer src='/js/main.js'></script>
 </head>
 <body>
 	<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script> <!--https://stackoverflow.com/questions/2898740/iphone-safari-web-app-opens-links-in-new-window-->
@@ -35,13 +36,17 @@
 				<h2>Navigation</h2>
 				<h3><a href='/'>Home</a></h3>
 				<h3><a href='/creator'>Card Creator</a></h3>
+				<h3><a href='/old'>Old Card Creator</a></h3>
 				<!-- <h3><a href='/'>Card Gallery</a></h3> -->
 				<h3><a href='/askurza'>Ask Urza 2.0</a></h3>
 				<h3><a href='/about'>About Me</a></h3>
+				<h3><a href='/theme'>Theme Editor</a></h3>
 				<h3><a href='/legal'>Legal</a></h3>
 				<h2>External Links</h2>
 				<h3><a href='https://twitter.com/ImKyle4815' target='_blank'>Twitter</a></h3>
 				<h3><a href='https://www.patreon.com/KyleBurton' target='_blank'>Patreon</a></h3>
+				<h2>Contact</h2>
+				<h3><a href='mailto:cardconjurermtg@gmail.com' target='_blank'>Email</a></h3>
 			</div>
 		</div>
 	</div>
--- a/img/gradientBackground.svg
+++ b/img/gradientBackground.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 1920 1080" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.10625,0,0,1.10625,-102,-57.375)">
+        <rect x="0" y="0" width="1920" height="1080" style="fill:url(#_Radial1);"/>
+    </g>
+    <defs>
+        <radialGradient id="_Radial1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(867.797,-488.136,488.136,867.797,960,540)"><stop offset="0" style="stop-color:rgb(86,129,102);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(42,87,56);stop-opacity:1"/></radialGradient>
+    </defs>
+</svg>
--- a/js/themeEditor.js
+++ b/js/themeEditor.js
@@ -0,0 +1,20 @@
+document.querySelector('#hue-rotate').value = theme.huerotate;
+document.querySelector('#hue-rotate-auto').value = theme.rainbow;
+document.querySelector('#readable-brightness').value = theme.readablebrightness;
+
+var updateCSSTimer;
+var canUpdateCSS = true;
+
+function changeThemeVar(input, destination) {
+	theme[destination] = input;
+	localStorage.setItem('theme', JSON.stringify(theme));
+	// if (canUpdateCSS) {
+		updateCSS();
+	// 	canUpdateCSS = false;
+	// 	updateCSSTimer = setTimeout(resetCSSTimer, 50);
+	// }
+}
+
+function resetCSSTimer() {
+	canUpdateCSS = true;
+}
--- a/js/themes.js
+++ b/js/themes.js
@@ -0,0 +1,44 @@
+var theme, rainbowTimer;
+const root = document.documentElement.style;
+
+if (localStorage.getItem('theme')) {
+	theme = JSON.parse(localStorage.getItem('theme'));
+	updateCSS();
+} else {
+	resetTheme();
+}
+
+function updateCSS() {
+	if (!root.getPropertyValue('--site-background').includes(theme.background)) {
+		root.setProperty('--site-background', 'url("' + (theme.background || '/img/lowpolyBackground.svg') + '")');
+	}
+	// root.setProperty("--color-primary", theme.SOMETHING);
+	// root.setProperty("--color-selected", theme.SOMETHING);
+	// root.setProperty("--color-highlighted", theme.SOMETHING);
+	// root.setProperty("--font-color", theme.SOMETHING);
+	// root.setProperty("--font-color-2", theme.SOMETHING);
+	// root.setProperty("--input-background", theme.SOMETHING);
+	// root.setProperty("--input-background-selected", theme.SOMETHING);
+	if (theme.rainbow > 0) {
+		clearInterval(rainbowTimer);
+		rainbowTimer = setInterval(rainbowMode, (theme.rainbow));
+	} else {
+		clearInterval(rainbowTimer);
+		root.setProperty('--regular-backdrop-filter', 'hue-rotate(' + (theme.huerotate || 0) + 'deg)');
+	}
+	root.setProperty('--darkened-backdrop-filter', 'grayscale(1) brightness(' + (theme.readablebrightness || 0) + ')');
+}
+
+function rainbowMode() {
+	theme.huerotate += 1;
+	if (theme.huerotate >= 360) {
+		theme.huerotate = 0
+	}
+	root.setProperty('--regular-backdrop-filter', 'hue-rotate(' + theme.huerotate + 'deg)');
+}
+
+function resetTheme() {
+	theme = {huerotate:0, background:'/img/lowpolyBackground.svg', readablebrightness:0.3, rainbow:0};
+	localStorage.setItem('theme', JSON.stringify(theme));
+	updateCSS();
+}
--- a/theme/index.php
+++ b/theme/index.php
@@ -0,0 +1,30 @@
+<?php include('../globalHTML/header.php'); ?>
+	<title>Card Conjurer - Theme Editor</title>
+	<h2 class='readable-background header-extension title center'>Theme Editor</h2>
+	<div class='layer center'></div>
+	<div class='layer center'>
+		<h1 class='margin-bottom'>Welcome to the theme editor!</h1>
+		<h5>This feature is a bit of a work-in-progress</h5>
+	</div>
+	<div class='layer'></div>
+	<div class='layer readable-background'>
+		<h3>Background</h3>
+		<h4>Choose a background</h4>
+		<select class='input' onchange='changeThemeVar(this.value, "background");'>
+			<option value='/img/lowpolyBackground.svg'>Lowpoly</option>
+			<option value='/img/gradientBackground.svg'>Plain</option>
+		</select>
+		<h4>Enter a background image (URL ONLY)</h4>
+		<input id='background-url' class='input' type='text' placeholder='Enter a URL' onchange='changeThemeVar(this.value, "background");'>
+		<h4>Shift the Background's Hue</h4>
+		<input id='hue-rotate' class='input' type='range' min='0' max='360' step='1' oninput='changeThemeVar(this.value, "huerotate");'>
+		<h4>Enable Rainbow-Mode</h4>
+		<input id='hue-rotate-auto' class='input' type='range' min='0' max='200' step='1' oninput='changeThemeVar(this.value, "rainbow");'>
+		<h3 class='margin-top'>Readable Areas</h3>
+		<h4>Adjust the Brightness</h4>
+		<input id='readable-brightness' class='input' type='range' min='0' max='1' step='0.01' oninput='changeThemeVar(this.value, "readablebrightness");'>
+		<button class='input margin-top' onclick='resetTheme();'>Reset Theme to Default</button>
+	</div>
+	<div class='layer'></div>
+	<script defer src='/js/themeEditor.js'></script>
+<?php include('../globalHTML/footer.php'); ?>