i have dementia

toys/license/index.html

@@ -60,11 +60,12 @@
     
       <div>
         <div id="detailsContainer">
-          <h2>For      <h2  id="authorValue" >Byte Dice</h2></h2>
+          <h2>For      </h2><h2  id="authorValue" >Byte Dice</h2>
-          <h2>Issued   <h2  id="createdValue">2025-01-18</h2></h2>
+          <h2>Issued   </h2><h2  id="createdValue">2025-01-18</h2>
-          <h2>Expires  <h2  id="expireValue" >never</h2></h2>
+          <h2>Expires  </h2><h2  id="expireValue" >never</h2>
-          <h2>Identity <h2  id="genderValue" >unknown</h2></h2>
+          <h2>Identity </h2><h2  id="genderValue" >unknown</h2>
-          <h2>Silly    <div id="sillyValue"  >10/10</div></h2>
+          <h2>Silly</h2>
+          <div class="sillyGrid"><div id="sillyValue"></div></div>
         </div>
       </div>
 

toys/license/script.js

@@ -36,18 +36,36 @@ identityInput.oninput = function() {
   genderValue.innerHTML = this.value
 }
 sillyInput.oninput = function() {
-  sillyNumberValue.innerHTML = prependZero(this.value)
+  setSillyValue(this.value)
 }
 signatureInput.oninput = function() {
   signatureValue.innerHTML = this.value
 }
 
 
-function onLoadLicense() {
+function setSillyValue(value) {
-  authorValue.innerHTML  = prependZero(authorInput.value)
+  sillyNumberValue.innerHTML = prependZero(value)
-  createdValue.innerHTML = prependZero(createdInput.value)
+  sillyValue.style.width = `${value * 10 + 0.1}%`
-  expireValue.innerHTML  = prependZero(expireInput.value)
-  genderValue.innerHTML  = prependZero(identityInput.value)
 
-  sillyNumberValue.innerHTML = prependZero(sillyInput.value)
+  let percent = value == 0 ? 0 : 100 / value
+  sillyValue.style.backgroundImage = `
+    repeating-linear-gradient(
+      to right, 
+    #000000 0px, 
+    #000000 3px,
+      transparent 3px, 
+      transparent ${percent}%
+    )
+  `
+}
+
+
+function onLoadLicense() {
+  authorValue.innerHTML    = authorInput.value
+  createdValue.innerHTML   = createdInput.value
+  expireValue.innerHTML    = expireInput.value
+  genderValue.innerHTML    = identityInput.value
+  signatureValue.innerHTML = signatureInput.value
+
+  setSillyValue(sillyInput.value)
 }

toys/license/style.css

@@ -164,5 +164,22 @@ input {
   aspect-ratio: 1 / 1;
 }
 #sillyValue {
-  display: inline;
+  height: 100%;
+  background-color: #FF0000;
+
+}
+.sillyGrid {
+  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;
 }