made HTML->PNG conversion for the license

assets/icons/download.svg

@@ -0,0 +1 @@
+<svg fill="#232323" height="800" width="800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 374.116 374.116"><path d="M344.058 207.506c-16.568 0-30 13.432-30 30v76.609h-254v-76.609c0-16.568-13.432-30-30-30s-30 13.432-30 30v106.609c0 16.568 13.432 30 30 30h314c16.568 0 30-13.432 30-30V237.506c0-16.568-13.432-30-30-30"/><path d="m123.57 108.287 33.488 33.488V30c0-16.568 13.432-30 30-30s30 13.432 30 30v111.776l33.488-33.488c5.857-5.858 13.535-8.787 21.213-8.787s15.355 2.929 21.213 8.787c11.716 11.716 11.716 30.71 0 42.426l-84.701 84.7c-11.715 11.717-30.711 11.717-42.426 0l-84.701-84.701c-11.716-11.716-11.716-30.71 0-42.426s30.711-11.716 42.426 0"/></svg>

assets/icons/upload.svg

@@ -1,14 +1 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
+<svg fill="#232323" height="800" width="800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 374.116 374.116" xml:space="preserve"><path d="M344.058 207.506c-16.568 0-30 13.432-30 30v76.609h-254v-76.609c0-16.568-13.432-30-30-30s-30 13.432-30 30v106.609c0 16.568 13.432 30 30 30h314c16.568 0 30-13.432 30-30V237.506c0-16.568-13.432-30-30-30"/><path d="m123.57 135.915 33.488-33.488v111.775c0 16.568 13.432 30 30 30s30-13.432 30-30V102.426l33.488 33.488c5.857 5.858 13.535 8.787 21.213 8.787s15.355-2.929 21.213-8.787c11.716-11.716 11.716-30.71 0-42.426l-84.701-84.7c-11.715-11.717-30.711-11.717-42.426 0L81.144 93.489c-11.716 11.716-11.716 30.71 0 42.426s30.711 11.716 42.426 0"/></svg>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg fill="#232323" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 viewBox="0 0 374.116 374.116" xml:space="preserve">
-<g>
-	<path d="M344.058,207.506c-16.568,0-30,13.432-30,30v76.609h-254v-76.609c0-16.568-13.432-30-30-30c-16.568,0-30,13.432-30,30
-		v106.609c0,16.568,13.432,30,30,30h314c16.568,0,30-13.432,30-30V237.506C374.058,220.938,360.626,207.506,344.058,207.506z"/>
-	<path d="M123.57,135.915l33.488-33.488v111.775c0,16.568,13.432,30,30,30c16.568,0,30-13.432,30-30V102.426l33.488,33.488
-		c5.857,5.858,13.535,8.787,21.213,8.787c7.678,0,15.355-2.929,21.213-8.787c11.716-11.716,11.716-30.71,0-42.426L208.271,8.788
-		c-11.715-11.717-30.711-11.717-42.426,0L81.144,93.489c-11.716,11.716-11.716,30.71,0,42.426
-		C92.859,147.631,111.855,147.631,123.57,135.915z"/>
-</g>
-</svg>

toys/license/600x400_license.css

@@ -2,7 +2,7 @@
   font-family: "Comic Sans MS", "Comic Sans", cursive;
   position: absolute;
   top: 0vh; 
-  left: 200vw;
+  left: 300vw;
   width: 600px;
   height: 400px;
   padding: 0px 20px 40px 20px;
@@ -57,24 +57,28 @@
   display: grid;
   grid-template-columns: repeat(2, auto);
 }
-#sillyValue_600x400 {
+.sillyBar_600x400 {
-  height: 100%;
+  width: auto;
-  background-color: #FF0000;
-}
-.sillyGrid_600x400 {
-  width: 99%;
-  aspect-ratio: 10 / 1;
   height: auto;
-  background-image: repeating-linear-gradient(
+  background-color: #000000;
-    to right, 
-    #000000 0px, 
-    #000000 3px,
-    transparent 3px, 
-    transparent 10%
-  );
   border: 3px solid black;
   border-radius: 8px;
   align-self: center;
+  display: flex;
+  gap: 3px;
+}
+.sillyValue_600x400 {
+  position: relative;
+	width: calc(100% / 10);
+	height: 100%;
+  aspect-ratio: 1 / 1;
+  display: block;
+}
+.sillyValue_600x400:first-child {
+  border-radius: 5px 0px 0px 5px;
+}
+.sillyValue_600x400:last-child {
+  border-radius: 0px 5px 5px 0px;
 }
 #titleValue_600x400 {
   grid-area: 1 / 1 / 2 / 3;

toys/license/index.html

@@ -104,6 +104,10 @@
             license bg-image/bg-gradient
           -->
         </form>
+
+        <button id="generateButton" onclick="generateLicense()">
+          <img src="/assets/icons/download.svg" class="generateButtonIcon" draggable="false">
+        </button>
       </div>
 
       <div id="licenseContainer" class="blackBorderRect">
@@ -126,7 +130,18 @@
             <h2>Expires  </h2><h2 id="expireValue" >never</h2>
             <h2>Identity </h2><h2 id="genderValue" >unknown</h2>
             <h2>Silly</h2>
-            <div class="sillyGrid"><div id="sillyValue"></div></div>
+            <div class="sillyBar">
+              <div id="sillyValue0" class="sillyValue on"></div>
+              <div id="sillyValue1" class="sillyValue on"></div>
+              <div id="sillyValue2" class="sillyValue on"></div>
+              <div id="sillyValue3" class="sillyValue off"></div>
+              <div id="sillyValue4" class="sillyValue off"></div>
+              <div id="sillyValue5" class="sillyValue off"></div>
+              <div id="sillyValue6" class="sillyValue off"></div>
+              <div id="sillyValue7" class="sillyValue off"></div>
+              <div id="sillyValue8" class="sillyValue off"></div>
+              <div id="sillyValue9" class="sillyValue off"></div>
+            </div>
           </div>
         </div>
 
@@ -154,7 +169,18 @@
           <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 class="sillyBar_600x400">
+            <div id="sillyValue0_600x400" class="sillyValue_600x400 on"></div>
+            <div id="sillyValue1_600x400" class="sillyValue_600x400 on"></div>
+            <div id="sillyValue2_600x400" class="sillyValue_600x400 on"></div>
+            <div id="sillyValue3_600x400" class="sillyValue_600x400 off"></div>
+            <div id="sillyValue4_600x400" class="sillyValue_600x400 off"></div>
+            <div id="sillyValue5_600x400" class="sillyValue_600x400 off"></div>
+            <div id="sillyValue6_600x400" class="sillyValue_600x400 off"></div>
+            <div id="sillyValue7_600x400" class="sillyValue_600x400 off"></div>
+            <div id="sillyValue8_600x400" class="sillyValue_600x400 off"></div>
+            <div id="sillyValue9_600x400" class="sillyValue_600x400 off"></div>
+          </div>
         </div>
       </div>
 
@@ -164,6 +190,9 @@
 
   <div id="loadingScreen"></div>
 
+  <!-- libs -->
+  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
+
   <!-- global -->
   <script src="/global/globalScript.js"></script>
   <script src="/global/pxDensity.js"></script>

toys/license/license.css

@@ -64,24 +64,35 @@
 h2 {
   margin: 5px;
 }
-#sillyValue {
+.sillyBar {
-  height: 100%;
+  width: auto;
-  background-color: #FF0000;
-}
-.sillyGrid {
-  width: 99%;
-  aspect-ratio: 10 / 1;
   height: auto;
-  background-image: repeating-linear-gradient(
+  background-color: #000000;
-    to right, 
-    #000000 0px, 
-    #000000 3px,
-    transparent 3px, 
-    transparent 10%
-  );
   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;
+}
+.on {
+  background-image: url(/assets/scribble_32x32.png);
+}
+.off {
+  background-image: none;
+  background-color: #FFFFFF;
+}
+.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;

toys/license/options.css

@@ -166,4 +166,26 @@ input[type=file] {
 }
 form {
   display: inline-block;
+}
+#generateButton {
+  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: calc(1px * var(--pxDensity)); */
+  border: none;
+  margin: calc(6px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
+  box-sizing: border-box;
+  width: calc(100% - (4px * var(--pxDensity)));
+  height: calc(6px * var(--pxDensity));
+  display: inline-block;
+}
+.generateButtonIcon {
+  height: calc(4px * var(--pxDensity));
+  aspect-ratio: 1 / 1;
+  width: auto;
+  display: inline-block;
+  margin: auto 0%;
 }

toys/license/script.js

@@ -23,33 +23,42 @@ for (const [inputId, outputId] of Object.entries(inputOutputMap)) {
 }
 
 const sillyInput = document.getElementById("sillyInput")
-const sillyValue = document.getElementById("sillyValue")
-const sillyValue_600x400 = document.getElementById("sillyValue_600x400")
 const sillyNumberValue = document.getElementById("sillyNumberValue")
+let sillyValues = []
+let sillyValues_600x400 = []
 
-if (sillyInput && sillyValue && sillyNumberValue) {
+for (let i = 0; i < 10; i++) {
+  sillyValues.push(document.getElementById(`sillyValue${i}`))
+  sillyValues_600x400.push(document.getElementById(`sillyValue${i}_600x400`))
+}
+
+
+if (sillyInput && sillyValues && sillyNumberValue) {
   sillyInput.oninput = function () {
     setSillyValue(this.value)
   }
 }
 
+
 function setSillyValue(value) {
   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
+  for (let i in sillyValues) {
-  let bgImg = `
+    let sillyValue = sillyValues[i]
-    repeating-linear-gradient(
+    let sillyValue_600x400 = sillyValues_600x400[i]
-      to right, 
+
-      #000000 0px, 
+    let isTurnedOn = i <= value - 1
-      #000000 3px,
+
-      transparent 3px, 
+    if (isTurnedOn) {
-      transparent ${percent}%
+      sillyValue.className = "sillyValue on"
-    )
+      sillyValue_600x400.className = "sillyValue_600x400 on"
-  `
+    }
-  sillyValue.style.backgroundImage = bgImg
+    else {
-  sillyValue_600x400.style.backgroundImage = bgImg
+      sillyValue.className = "sillyValue off"
+      sillyValue_600x400.className = "sillyValue_600x400 off"
+    }
+  }
 }
 
 const picInput = document.getElementById("picInput")
@@ -87,6 +96,19 @@ function prependZero(number) {
   return number < 10 ? "0" + number : number
 }
 
+
+function generateLicense() {
+  const element = document.getElementById("licenseContainer_600x400")
+  
+  html2canvas(element).then(canvas => {
+    const link = document.createElement("a");
+    link.download = "boykisserLicense.png";
+    link.href = canvas.toDataURL("image/png");
+    link.click();
+  });
+}
+
+
 function onLoadLicense() {
   for (const [inputId, outputId] of Object.entries(inputOutputMap)) {
     const inputElement = document.getElementById(inputId)