From f5b0fac23a944b0b4b51c544f9620044abbc6c60 Mon Sep 17 00:00:00 2001
From: ByteDice <bytedice.official@gmail.com>
Date: Tue, 30 Jun 2026 17:37:39 +0200
Subject: [PATCH] added customizable colors for the BG, borders, & text

---
 assets/scribble_32x32.png | Bin 2221 -> 2199 bytes
 toys/license/index.html   |  23 +++++++++++-----
 toys/license/input.js     |  46 ++++++++++++++++++++++++++++----
 toys/license/license.css  |  47 +++++++++++++--------------------
 toys/license/license.js   |   9 +++++++
 toys/license/options.css  |  54 ++++++++++++++++++++++++++++++++------
 toys/license/script.js    |  21 ++++++++-------
 7 files changed, 143 insertions(+), 57 deletions(-)

diff --git a/assets/scribble_32x32.png b/assets/scribble_32x32.png
index b37150a317b8b68b7d87d31fbeb0fed367c91c0c..dc39ba074fa02a256f0b4e74a8801c8621be8e0b 100644
GIT binary patch
delta 2170
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

delta 2192
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
SA*%oY002ov22Mn-LSTXs#41Jr

diff --git a/toys/license/index.html b/toys/license/index.html
index 0ed4c90..4a2645c 100644
--- a/toys/license/index.html
+++ b/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>
-        <form class="licenseForm">
-          <label for="soon1">Soon...</label><input type="text" name="soon1" value="Does nothing"><br>
-        </form><br>-->
+				<h1>Colors</h1><br>
+        <form class="licenseForm licenseFormContainer">
+					<label for="bgTypeInput" name="bgTypeInput">BG Type</label><div style="display: inline-flex;">
+						<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">
diff --git a/toys/license/input.js b/toys/license/input.js
index 598a151..37d51cf 100644
--- a/toys/license/input.js
+++ b/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
 }
 
 
diff --git a/toys/license/license.css b/toys/license/license.css
index 79863dd..62d5ee5 100644
--- a/toys/license/license.css
+++ b/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;
-  border: 3px solid black;
+  background-color: var(--licenseBorderCol);
+  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;
 }
\ No newline at end of file
diff --git a/toys/license/license.js b/toys/license/license.js
index 181b42f..5393042 100644
--- a/toys/license/license.js
+++ b/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)
 	}
diff --git a/toys/license/options.css b/toys/license/options.css
index 3f134b0..76b62bb 100644
--- a/toys/license/options.css
+++ b/toys/license/options.css
@@ -71,7 +71,7 @@
   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);
@@ -81,6 +81,16 @@
   width: calc(3px * var(--pxDensity));
   height: calc(3px * var(--pxDensity));
 }
+.slider::-webkit-slider-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));
+}
 .sliderDiv {
   background-color: var(--navBarBtn_Inner);
   box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
@@ -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: 50%;
+  width: 100%;
   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;
@@ -218,4 +229,31 @@ form {
   width: auto;
   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;
 }
\ No newline at end of file
diff --git a/toys/license/script.js b/toys/license/script.js
index cd03d30..3e4049f 100644
--- a/toys/license/script.js
+++ b/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",
-		img:       "picValue",
-		id:        "hashID"
+		signature: "signatureValue"
 	}
 
 	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();
-	scaleDisplayLicense();
+	makeOptionsTheSameAsJSON()
+	scaleDisplayLicense()
+	await updLicense()
 }
\ No newline at end of file