diff --git a/toys/license/index.html b/toys/license/index.html
index e097be7..56c5034 100644
--- a/toys/license/index.html
+++ b/toys/license/index.html
@@ -60,11 +60,12 @@
-
For Byte Dice
-
Issued 2025-01-18
-
Expires never
-
Identity unknown
-
Silly
10/10
+
For
Byte Dice
+
Issued
2025-01-18
+
Expires
never
+
Identity
unknown
+
Silly
+
diff --git a/toys/license/script.js b/toys/license/script.js
index dfd45de..cfb1cf8 100644
--- a/toys/license/script.js
+++ b/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() {
- authorValue.innerHTML = prependZero(authorInput.value)
- createdValue.innerHTML = prependZero(createdInput.value)
- expireValue.innerHTML = prependZero(expireInput.value)
- genderValue.innerHTML = prependZero(identityInput.value)
+function setSillyValue(value) {
+ sillyNumberValue.innerHTML = prependZero(value)
+ sillyValue.style.width = `${value * 10 + 0.1}%`
- 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)
}
\ No newline at end of file
diff --git a/toys/license/style.css b/toys/license/style.css
index c9f0a3b..fe3c7b9 100644
--- a/toys/license/style.css
+++ b/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;
}
\ No newline at end of file