diff --git a/toys/license/600x400_license.css b/toys/license/600x400_license.css new file mode 100644 index 0000000..db42fa8 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/toys/license/index.html b/toys/license/index.html index 70760b6..ac5d77b 100644 --- a/toys/license/index.html +++ b/toys/license/index.html @@ -11,6 +11,7 @@ + @@ -116,6 +117,33 @@

Original by Chilli
Remade by Byte Dice at bytedice.net/toys

+ +
+

Boykisser license

+
+
+ +
+ +
+

Byte Dice

+

Sign here

+
+
+ +
+
+

For

Byte Dice

+

Issued

2025-01-18

+

Expires

never

+

Identity

unknown

+

Silly

+
+
+
+ +

Original by Chilli
Remade by Byte Dice at bytedice.net/toys

+
diff --git a/toys/license/script.js b/toys/license/script.js index a3250c7..cc7f48f 100644 --- a/toys/license/script.js +++ b/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) {