added a 600x400 hidden license for when HTML->PNG conversion is added

toys/license/600x400_license.css

@@ -0,0 +1,84 @@
+#licenseContainer_600x400 {
+  font-family: "Comic Sans MS", "Comic Sans", cursive;
+  position: absolute;
+  top: 0vh; 
+  left: 200vw;
+  width: 600px;
+  height: 400px;
+  padding: 0px 20px 40px 20px;
+  font-size: 0.75rem;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+  grid-template-rows: repeat(2, auto);
+}
+#picContainer_600x400 {
+  width: 150px;
+  height: 150px;
+  display: block;
+  overflow: hidden;
+  background-color: transparent;
+  border-radius: 32px;
+}
+#picValue_600x400 {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+#credits_600x400 {
+  position: absolute;
+  bottom: 0%;
+  left: 0%;
+  margin: 0% 0% 0% 20px;
+  color: var(--navBarBtn_Inner);
+  font-size: 0.6rem;
+}
+#signatureContainer_600x400 {
+  display: inline-flex;
+  flex-direction: column;
+  margin: 5% 0% 0% 0%;
+}
+#signatureValue_600x400 {
+  font-family: "Yellowtail", serif;
+  font-weight: 400;
+  font-style: normal;
+  margin: 0% 0% -0.2rem 0%;/* margin: 0% 0% 0.2rem 0%; */
+  text-align: center;
+  font-size: 1.5rem;
+}
+#signHere_600x400 {
+  border-top: #000000 solid 6px;
+  margin: 0%;
+  padding: 0% 25px;
+  text-align: center;
+}
+#detailsContainer_600x400 {
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+}
+#sillyValue_600x400 {
+  height: 100%;
+  background-color: #FF0000;
+}
+.sillyGrid_600x400 {
+  width: 99%;
+  aspect-ratio: 10 / 1;
+  height: auto;
+  background-image: repeating-linear-gradient(
+    to right, 
+    #000000 0px, 
+    #000000 3px,
+    transparent 3px, 
+    transparent 10%
+  );
+  border: 3px solid black;
+  border-radius: 8px;
+  align-self: center;
+}
+#titleValue_600x400 {
+  grid-area: 1 / 1 / 2 / 3;
+  font-size: min(max(3vmax, 4vmin), 1.6rem);
+  margin: 0% auto 0% auto;
+  height: max-content;
+}

toys/license/index.html

@@ -11,6 +11,7 @@
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="license.css">
   <link rel="stylesheet" href="options.css">
+  <link rel="stylesheet" href="600x400_license.css">
 
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -116,6 +117,33 @@
         <p id="credits">Original by Chilli<br>Remade by Byte Dice at bytedice.net/toys</p>
       </div>
     </div>
+
+    <div id="licenseContainer_600x400" class="blackBorderRect">
+      <h3 id="titleValue_600x400">Boykisser license</h3>
+      <div style="width: max-content;">
+        <div id="picContainer_600x400" class="blackBorderRect">
+          <img id="picValue_600x400" src="" draggable="false">
+        </div>
+
+        <div id="signatureContainer_600x400">
+          <p id="signatureValue_600x400">Byte Dice</p>
+          <p id="signHere_600x400">Sign here</p>
+        </div>
+      </div>
+    
+      <div>
+        <div id="detailsContainer_600x400">
+          <h2>For      </h2><h2 id="authorValue_600x400" >Byte Dice</h2>
+          <h2>Issued   </h2><h2 id="createdValue_600x400">2025-01-18</h2>
+          <h2>Expires  </h2><h2 id="expireValue_600x400" >never</h2>
+          <h2>Identity </h2><h2 id="genderValue_600x400" >unknown</h2>
+          <h2>Silly</h2>
+          <div class="sillyGrid_600x400"><div id="sillyValue_600x400"></div></div>
+        </div>
+      </div>
+
+      <p id="credits_600x400">Original by Chilli<br>Remade by Byte Dice at bytedice.net/toys</p>
+    </div>
   </div>
 
   <div id="loadingScreen"></div>

toys/license/script.js

@@ -7,35 +7,39 @@ const inputOutputMap = {
   expireInput: "expireValue",
   identityInput: "genderValue",
   signatureInput: "signatureValue",
-};
+}
 
 for (const [inputId, outputId] of Object.entries(inputOutputMap)) {
-  const inputElement = document.getElementById(inputId);
-  const outputElement = document.getElementById(outputId);
+  const inputElement = document.getElementById(inputId)
+  const outputElement = document.getElementById(outputId)
+  const outputElement_600x400 = document.getElementById(`${outputId}_600x400`)
 
   if (inputElement && outputElement) {
     inputElement.oninput = function () {
-      outputElement.innerHTML = this.value;
-    };
+      outputElement.innerHTML = this.value
+      outputElement_600x400.innerHTML = this.value
+    }
   }
 }
 
-const sillyInput = document.getElementById("sillyInput");
-const sillyValue = document.getElementById("sillyValue");
-const sillyNumberValue = document.getElementById("sillyNumberValue");
+const sillyInput = document.getElementById("sillyInput")
+const sillyValue = document.getElementById("sillyValue")
+const sillyValue_600x400 = document.getElementById("sillyValue_600x400")
+const sillyNumberValue = document.getElementById("sillyNumberValue")
 
 if (sillyInput && sillyValue && sillyNumberValue) {
   sillyInput.oninput = function () {
-    setSillyValue(this.value);
-  };
+    setSillyValue(this.value)
+  }
 }
 
 function setSillyValue(value) {
-  sillyNumberValue.innerHTML = prependZero(value);
-  sillyValue.style.width = `${value * 10 + 0.1}%`;
+  sillyNumberValue.innerHTML = prependZero(value)
+  sillyValue.style.width = `${value * 10 + 0.1}%`
+  sillyValue_600x400.style.width = `${value * 10 + 0.1}%`
 
-  let percent = value == 0 ? 0 : 100 / value;
-  sillyValue.style.backgroundImage = `
+  let percent = value == 0 ? 0 : 100 / value
+  let bgImg = `
     repeating-linear-gradient(
       to right, 
       #000000 0px, 
@@ -43,11 +47,14 @@ function setSillyValue(value) {
       transparent 3px, 
       transparent ${percent}%
     )
-  `;
+  `
+  sillyValue.style.backgroundImage = bgImg
+  sillyValue_600x400.style.backgroundImage = bgImg
 }
 
 const picInput = document.getElementById("picInput")
 const picValue = document.getElementById("picValue")
+const picValue_600x400 = document.getElementById("picValue_600x400")
 const picUpload = document.getElementById("picUpload")
 const customPicOption = document.getElementById("customPic")
 
@@ -55,12 +62,15 @@ function setPictureValue() {
   if (picInput.value != "custom") {
     let src = `/assets/boykissers/${picInput.value}.png`
     picValue.src = src
+    picValue_600x400.src = src
   }
   else {
     if (picUpload.files.length > 0) {
       const file = picUpload.files[0]
       const fileName = file.name
-      picValue.src = URL.createObjectURL(file)
+      let src = URL.createObjectURL(file)
+      picValue.src = src
+      picValue_600x400.src = src
       customPicOption.innerHTML = `Custom (${fileName})`
     }
     else {
@@ -74,21 +84,23 @@ picUpload.oninput = function() { setPictureValue() }
 picInput.oninput = function() { setPictureValue() }
 
 function prependZero(number) {
-  return number < 10 ? "0" + number : number;
+  return number < 10 ? "0" + number : number
 }
 
 function onLoadLicense() {
   for (const [inputId, outputId] of Object.entries(inputOutputMap)) {
-    const inputElement = document.getElementById(inputId);
-    const outputElement = document.getElementById(outputId);
+    const inputElement = document.getElementById(inputId)
+    const outputElement = document.getElementById(outputId)
+    const outputElement_600x400 = document.getElementById(`${outputId}_600x400`)
 
     if (inputElement && outputElement) {
-      outputElement.innerHTML = inputElement.value;
+      outputElement.innerHTML = inputElement.value
+      outputElement_600x400.innerHTML = inputElement.value
     }
   }
 
   if (sillyInput) {
-    setSillyValue(sillyInput.value);
+    setSillyValue(sillyInput.value)
   }
 
   if (picInput) {