diff --git a/assets/icons/download.svg b/assets/icons/download.svg
new file mode 100644
index 0000000..0db176d
--- /dev/null
+++ b/assets/icons/download.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/icons/upload.svg b/assets/icons/upload.svg
index e40f849..f2ce5cf 100644
--- a/assets/icons/upload.svg
+++ b/assets/icons/upload.svg
@@ -1,14 +1 @@
-
-
-
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/assets/scribble_32x32.png b/assets/scribble_32x32.png
new file mode 100644
index 0000000..b37150a
Binary files /dev/null and b/assets/scribble_32x32.png differ
diff --git a/toys/license/600x400_license.css b/toys/license/600x400_license.css
index db42fa8..0faca8d 100644
--- a/toys/license/600x400_license.css
+++ b/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 {
- height: 100%;
- background-color: #FF0000;
-}
-.sillyGrid_600x400 {
- width: 99%;
- aspect-ratio: 10 / 1;
+.sillyBar_600x400 {
+ width: auto;
height: auto;
- background-image: repeating-linear-gradient(
- to right,
- #000000 0px,
- #000000 3px,
- transparent 3px,
- transparent 10%
- );
+ background-color: #000000;
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;
diff --git a/toys/license/index.html b/toys/license/index.html
index c6336d8..693dba3 100644
--- a/toys/license/index.html
+++ b/toys/license/index.html
@@ -104,6 +104,10 @@
license bg-image/bg-gradient
-->
+
+
@@ -126,7 +130,18 @@
Expires
never
Identity
unknown
Silly
-
+
Expires
never
Identity
unknown
Silly
-
+
@@ -164,6 +190,9 @@
+
+
+
diff --git a/toys/license/license.css b/toys/license/license.css
index 9784032..7b7d6f7 100644
--- a/toys/license/license.css
+++ b/toys/license/license.css
@@ -64,24 +64,35 @@
h2 {
margin: 5px;
}
-#sillyValue {
- height: 100%;
- background-color: #FF0000;
-}
-.sillyGrid {
- width: 99%;
- aspect-ratio: 10 / 1;
+.sillyBar {
+ width: auto;
height: auto;
- background-image: repeating-linear-gradient(
- to right,
- #000000 0px,
- #000000 3px,
- transparent 3px,
- transparent 10%
- );
+ 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;
+}
+.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;
diff --git a/toys/license/options.css b/toys/license/options.css
index 1c6a82b..591fa92 100644
--- a/toys/license/options.css
+++ b/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%;
}
\ No newline at end of file
diff --git a/toys/license/script.js b/toys/license/script.js
index cc7f48f..d2c76f3 100644
--- a/toys/license/script.js
+++ b/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
- let bgImg = `
- repeating-linear-gradient(
- to right,
- #000000 0px,
- #000000 3px,
- transparent 3px,
- transparent ${percent}%
- )
- `
- sillyValue.style.backgroundImage = bgImg
- sillyValue_600x400.style.backgroundImage = bgImg
+ for (let i in sillyValues) {
+ let sillyValue = sillyValues[i]
+ let sillyValue_600x400 = sillyValues_600x400[i]
+
+ let isTurnedOn = i <= value - 1
+
+ if (isTurnedOn) {
+ sillyValue.className = "sillyValue on"
+ sillyValue_600x400.className = "sillyValue_600x400 on"
+ }
+ else {
+ 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)