added customizable colors for the BG, borders, & text

toys/license/index.html

@@ -72,7 +72,7 @@
 
           <label for="signatureInput">Signature</label><input type="text" id="signatureInput" name="signatureInput" value="Byte Dice">
 
-          <label for="picInput">Picture</label><div style="display: inline-flex">
+          <label for="picInput">Picture</label><div style="display: inline-flex;">
 						<select id="picInput" name="picInput">
 							<option value="boykisser"    >Boykisser</option>
 							<option value="bi-kisser"    >Bi-kisser</option>
@@ -82,15 +82,26 @@
 							<option value="bytedice"     >Byte Dice</option>
 							<option value="custom" id="customPic">Custom (upload)</option>
           	</select>
-						<label for="picUpload" id="picUploadLabel"><img src="/assets/icons/upload.svg" id="picUploadIcon" draggable="false"></label>
+						<label for="picUpload" id="picUploadLabel"><img src="/assets/icons/upload.svg" id="bgUploadIcon" draggable="false"></label>
 						<input type="file" id="picUpload" name="picUpload" accept=".png,.jpg,.jpeg,.webp">
 					</div>
         </form><br>
 
-        <!--<h1>Colors</h1><br>
+				<h1>Colors</h1><br>
-        <form class="licenseForm">
+        <form class="licenseForm licenseFormContainer">
-          <label for="soon1">Soon...</label><input type="text" name="soon1" value="Does nothing"><br>
+					<label for="bgTypeInput" name="bgTypeInput">BG Type</label><div style="display: inline-flex;">
-        </form><br>-->
+						<select id="bgTypeInput", name="bgTypeInput">
+							<option value="color">Solid Color</option>
+							<option value="image" id="customBg">Image (upload)</option>
+						</select>
+						<label for="bgUpload" id="bgUploadLabel"><img src="/assets/icons/upload.svg" id="bgUploadIcon" draggable="false"></label>
+						<input type="file" id="bgUpload" name="bgUpload" accept=".png,.jpg,.jpeg,.webp">
+					</div>
+
+          <label for="bgColInput"    >Background</label><input type="color" id="bgColInput"     name="bgColInput"     value="#FFFFFF">
+					<label for="borderColInput">Borders</label   ><input type="color" id="borderColInput" name="borderColInput" value="#000000">
+					<label for="textColInput"  >Text</label      ><input type="color" id="textColInput"   name="textColInput"   value="#000000">
+				</form><br>
 
         <!--<h1>Advanced</h1><br>
         <form class="licenseForm">

toys/license/input.js

@@ -10,39 +10,57 @@ let jsonData = {
 	img: {
 		preset: "boykisser",
 		file: ""
-	}
+	},
+	bg: {
+		type: "color",
+		color: "#FFFFFF",
+		file: ""
+	},
+	border: "#000000",
+	text: "#000000"
 }
 
 
 const customPicOption = document.getElementById("customPic")
+const customBgOption  = document.getElementById("customBg")
 
 
+// funny size sorting
 const VMAP = {
+	bg:        "bgTypeInput",
 	img:       "picInput",
 	user:      "authorInput",
+	text:      "textColInput",
 	title:     "titleInput",
 	silly:     "sillyInput",
+	bgCol:     "bgColInput",
 	issued:    "createdInput",
+	border:    "borderColInput",
 	expires:   "expireInput",
 	identity:  "identityInput",
+	bgUpload:  "bgUpload",
 	signature: "signatureInput",
-	imgUpload: "picUpload"
+	imgUpload: "picUpload",
 }
 
 
 async function prepInputs() {
 	function getE(e) { return document.getElementById(e) }
 
+	getE(VMAP.bg)       .oninput = async function() { jsonData.bg.type = this.value; await updLicense() }
 	getE(VMAP.img)      .oninput = async function() { jsonData.img.preset = this.value; await updLicense() }
 	getE(VMAP.user)     .oninput = async function() { jsonData.user = this.value; await updLicense() }
+	getE(VMAP.text)     .oninput = async function() { jsonData.text = this.value; await updLicense() }
 	getE(VMAP.title)    .oninput = async function() { jsonData.title = this.value; await updLicense() }
 	getE(VMAP.silly)    .oninput = async function() { jsonData.silly = parseInt(this.value); await updLicense() }
+	getE(VMAP.bgCol)    .oninput = async function() { jsonData.bg.color = this.value; await updLicense() }
 	getE(VMAP.issued)   .oninput = async function() { jsonData.issued = this.value; await updLicense() }
+	getE(VMAP.border)   .oninput = async function() { jsonData.border = this.value; await updLicense() }
 	getE(VMAP.expires)  .oninput = async function() { jsonData.expires = this.value; await updLicense() }
 	getE(VMAP.identity) .oninput = async function() { jsonData.identity = this.value; await updLicense() }
 	getE(VMAP.signature).oninput = async function() { jsonData.signature = this.value; await updLicense() }
 
-	getE(VMAP.imgUpload).oninput = async function() {
+	getE(VMAP.imgUpload).onchange = async function() {
 		if (this.files.length == 0) { return; }
 		let f = this.files[0]
 		jsonData.img.file = URL.createObjectURL(f)
@@ -50,6 +68,15 @@ async function prepInputs() {
 
 		await updLicense()
 	}
+
+	getE(VMAP.bgUpload).onchange = async function() {
+		if (this.files.length == 0) { return; }
+		let f = this.files[0]
+		jsonData.bg.file = URL.createObjectURL(f)
+		customBgOption.innerHTML = `Image (${f.name})`
+
+		await updLicense()
+	}
 }
 
 
@@ -68,10 +95,16 @@ async function importFromB64(b64) {
 	try {
 		let str = atob(b64)
 		data = JSON.parse(str)
-		let isValid = validateJSON_v0(data)
+		
+		let isValid
+		switch (data.version) {
+			case 0: isValid = validateJSON_v0(data); break
+		}
+		
 		if (isValid != true)
 			{ alert("Invalid data string imported (Invalid fields). Full results:\n" + isValid.join("\n")); return }
 	
+		// TODO: make this not replace if the key doesnt exist
 		jsonData = data
 		// make sure to add this since it isnt exported
 		jsonData.img = { preset: "boykisser", file: "" }
@@ -85,14 +118,17 @@ async function importFromB64(b64) {
 function makeOptionsTheSameAsJSON() {
 	function getE(e) { return document.getElementById(e) }
 
+	getE(VMAP.img).value = jsonData.img.preset
 	getE(VMAP.user).value = jsonData.user
+	getE(VMAP.text).value = jsonData.text
 	getE(VMAP.title).value = jsonData.title
 	getE(VMAP.silly).value = jsonData.silly
+	getE(VMAP.bgCol).value = jsonData.bg.color
 	getE(VMAP.issued).value = jsonData.issued
+	getE(VMAP.border).value = jsonData.border
 	getE(VMAP.expires).value = jsonData.expires
 	getE(VMAP.identity).value = jsonData.identity
 	getE(VMAP.signature).value = jsonData.signature
-	getE(VMAP.img).value = jsonData.img.preset
 }
 
 

toys/license/license.css

@@ -1,3 +1,10 @@
+:root {
+	--licenseBgCol: #FFFFFF;
+	--licenseBorderCol: #000000;
+	--licenseTextCol: #000000;
+	--licenseScribbleCol: #FF0000; /* cannot get this to work */
+}
+
 .sans {
   font-family: "Comic Neue", serif;
   font-weight: 400;
@@ -19,8 +26,8 @@ h2 {
 .sillyBar {
   width: auto;
   height: auto;
-  background-color: #000000;
+  background-color: var(--licenseBorderCol);
-  border: 3px solid black;
+  border: 3px solid var(--licenseBorderCol);
   border-radius: 8px;
   align-self: center;
   display: flex;
@@ -38,7 +45,7 @@ h2 {
 }
 .off {
   background-image: none;
-  background-color: #FFFFFF;
+  background-color: var(--licenseBgCol);
 }
 .sillyValue:first-child {
   border-radius: 5px 0px 0px 5px;
@@ -55,6 +62,10 @@ h2 {
   display: grid;
   grid-template-columns: repeat(2, auto);
   grid-template-rows: repeat(2, auto);
+	background-color: var(--licenseBgCol);
+  border: 10px var(--licenseBorderCol) solid;
+  border-radius: 32px;
+  color: var(--licenseTextCol);
 }
 #picContainer {
   width: 150px;
@@ -63,6 +74,7 @@ h2 {
   overflow: hidden;
   background-color: transparent;
   border-radius: 32px;
+	border: 10px var(--licenseBorderCol) solid;
 }
 #picValue {
   width: 100%;
@@ -75,7 +87,7 @@ h2 {
   bottom: 12px;
   left: 0%;
   margin: 0% 0% 0% 20px;
-  color: var(--navBarBtn_Inner);
+  color: var(--licenseTextCol);
   font-size: 0.6rem;
 }
 #signatureContainer, #DsignatureContainer {
@@ -89,7 +101,7 @@ h2 {
   font-size: 1.5rem;
 }
 #signHere {
-  border-top: #000000 solid 6px;
+  border-top: var(--licenseBorderCol) solid 6px;
   margin: 0%;
   padding: 0% 25px;
   text-align: center;
@@ -98,29 +110,6 @@ h2 {
   display: grid;
   grid-template-columns: repeat(2, auto);
 }
-.sillyBar {
-  width: auto;
-  height: auto;
-  background-color: #000000;
-  border: 3px solid black;
-  border-radius: 8px;
-  align-self: center;
-  display: flex;
-  gap: 3px;
-}
-.sillyValue {
-  position: relative;
-	width: calc(100% / 10);
-	height: 100%;
-  aspect-ratio: 1 / 1;
-  display: block;
-}
-.sillyValue:first-child {
-  border-radius: 5px 0px 0px 5px;
-}
-.sillyValue:last-child {
-  border-radius: 0px 5px 5px 0px;
-}
 #titleValue {
   grid-area: 1 / 1 / 2 / 3;
   font-size: 2rem;
@@ -133,6 +122,6 @@ h2 {
   bottom: 12px;
   right: 0%;
   margin: 0% 30px 0% 0%;
-  color: var(--navBarBtn_Inner);
+  color: var(--licenseTextCol);
   font-size: 0.6rem;
 }

toys/license/license.js

@@ -6,6 +6,7 @@ class License {
 		this.idE        = undefined
 		this.imgE       = undefined
 		this.userE      = undefined
+		this.baseE      = undefined // for bg
 		this.titleE     = undefined
 		this.issuedE    = undefined
 		this.expiresE   = undefined
@@ -29,6 +30,14 @@ class License {
 		this.setSillyValue(json.silly)
 		this.setImgValue(json.img)
 
+		if (json.bg.type == "image")
+		     { this.baseE.style.backgroundImage = `url("${json.bg.file}")` }
+		else { this.baseE.style.backgroundImage = "" }
+
+		document.documentElement.style.setProperty("--licenseBgCol",     json.bg.color)
+		document.documentElement.style.setProperty("--licenseBorderCol", json.border)
+		document.documentElement.style.setProperty("--licenseTextCol",   json.text)
+
 		let hash = await sha256(JSON.stringify(json))
 		this.idE.textContent = "NR-ID: " + hash.slice(0, 16)
 	}

toys/license/options.css

@@ -71,7 +71,17 @@
   filter: brightness(1.35);
   cursor: pointer;
 }
-.slider::-webkit-slider-thumb, .slider::-moz-range-thumb {
+.slider::-moz-range-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: var(--navBar_Inner);
+  border: none;
+  cursor: pointer;
+  border-radius: 0%;
+  width: calc(3px * var(--pxDensity));
+  height: calc(3px * var(--pxDensity));
+}
+.slider::-webkit-slider-thumb {
 	-webkit-appearance: none;
   appearance: none;
   background-color: var(--navBar_Inner);
@@ -93,6 +103,7 @@
   font-size: inherit;
   margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
   box-sizing: border-box;
+	width: 100%;
   height: calc(6px * var(--pxDensity));
   color: inherit;
   align-items: center;
@@ -147,8 +158,7 @@ select {
   font-size: inherit;
   margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
   box-sizing: border-box;
-  /* width: round(auto, var(--pxDensity)); */
+  width: 100%;
-  width: 50%;
   height: round(auto, var(--pxDensity));
   color: inherit;
   display: inline-block;
@@ -164,26 +174,27 @@ input[type=file] {
   overflow: hidden; */
   display: none;
 }
-#picInput {
+#picInput, #bgTypeInput {
 	height: calc(6px * var(--pxDensity));
   margin-right: calc(3px * var(--pxDensity));
 }
-#picUploadLabel {
+#picUploadLabel, #bgUploadLabel {
   height: calc(6px * var(--pxDensity));
   aspect-ratio: 1 / 1;
   width: auto;
   background-image: url(/assets/icons/upload.svg);
   display: inline-flex;
+	margin-right: calc(2px * var(--pxDensity));
 }
-#picUploadLabel:hover {
+#picUploadLabel:hover, #bgUploadLabel:hover {
   filter: brightness(1.35);
   cursor: pointer;
 }
-#picUploadLabel:active {
+#picUploadLabel:active, #bgUploadLabel:active {
   filter: brightness(0.75);
   transform: translateY(calc(1px * var(--pxDensity)));
 }
-#picUploadIcon {
+#picUploadIcon, #bgUploadIcon {
   height: calc(4px * var(--pxDensity));
   aspect-ratio: 1 / 1;
   width: auto;
@@ -219,3 +230,30 @@ form {
   display: inline-block;
   margin: auto 0%;
 }
+input[type="color"] {
+  background-color: var(--navBarBtn_Inner);
+  box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
+              calc(-1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
+              0px calc(1px * var(--pxDensity)) var(--navBarBtn_Border),
+              0px calc(-1px * var(--pxDensity)) var(--navBarBtn_Border);
+
+  padding: 0;
+  border: none;
+  font-size: inherit;
+  margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
+  box-sizing: border-box;
+  width: round(auto, var(--pxDensity));
+  height: calc(6px * var(--pxDensity));
+  color: inherit;
+  display: inline-block;
+}
+input[type="color"]::-moz-color-swatch {
+	border: none;
+}
+input[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 0;
+  border-radius: 0;
+}
+input[type="color"]::-webkit-color-swatch {
+  border: none;
+}

toys/license/script.js

@@ -5,26 +5,28 @@ async function loadingScreenLicense() {
 	setLoadingProgress("Preparing license...")
 
 	const VMAP = {
-		title:     "titleValue",
+		id:        "hashID",
+		img:       "picValue",
 		user:      "authorValue",
+		base:      "licenseContainer",
+		title:     "titleValue",
 		issued:    "createdValue",
 		expires:   "expireValue",
 		identity:  "genderValue",
-		signature: "signatureValue",
+		signature: "signatureValue"
-		img:       "picValue",
-		id:        "hashID"
 	}
 
 	function getE(e) { return document.getElementById(e) }
 
-	license.titleE     = getE(VMAP.title)
+	license.idE        = getE(VMAP.id)
+	license.imgE       = getE(VMAP.img)
 	license.userE      = getE(VMAP.user)
+	license.baseE      = getE(VMAP.base)
+	license.titleE     = getE(VMAP.title)
 	license.issuedE    = getE(VMAP.issued)
 	license.expiresE   = getE(VMAP.expires)
 	license.identityE  = getE(VMAP.identity)
 	license.signatureE = getE(VMAP.signature)
-	license.imgE       = getE(VMAP.img)
-	license.idE        = getE(VMAP.id)
 
 	for (let i = 0; i < 10; i++) {
 		license.sillyValues.push(document.getElementById(`sillyValue${i}`))
@@ -32,6 +34,7 @@ async function loadingScreenLicense() {
 
 	setLoadingProgress("Preparing options...")
 	prepInputs()
-	await updLicense();
+	makeOptionsTheSameAsJSON()
-	scaleDisplayLicense();
+	scaleDisplayLicense()
+	await updLicense()
 }