-
+
- Check out the original by Chilli - here! -
+
+
+
+
diff --git a/toys/license/license.css b/toys/license/license.css
index 51de30a..75a9edd 100644
--- a/toys/license/license.css
+++ b/toys/license/license.css
@@ -1,16 +1,18 @@
#licenseContainer {
+ position: relative;
width: 600px;
- height: 400px;
- padding: 40px 10px 40px 40px;
- margin: calc(5px * var(--pxDensity)) auto calc(30px * var(--pxDensity)) auto;
+ /* height: 400px; */
+ aspect-ratio: 3 / 2;
+ height: auto;
+ padding: 0px 20px 40px 40px;
+ margin: calc(5px * var(--pxDensity)) auto calc(25px * var(--pxDensity)) auto;
font-size: 0.75rem;
box-sizing: border-box;
display: grid;
- grid-template-columns: auto auto;
- grid-template-rows: auto auto;
+ grid-template-columns: repeat(2, auto);
+ grid-template-rows: repeat(2, auto);
}
#picContainer {
- margin-top: 40px;
width: 150px;
height: 150px;
}
@@ -27,7 +29,7 @@
flex-direction: column;
margin: 5% 0% 0% 0%;
}
-#signature {
+#signatureValue {
margin: 0% 0% 0.2rem 0%;
text-align: center;
font-size: 1rem;
@@ -63,4 +65,10 @@ h2 {
border: 3px solid black;
border-radius: 8px;
align-self: center;
+}
+#titleValue {
+ grid-area: 1 / 1 / 2 / 3;
+ font-size: 1.5rem;
+ margin: 0% auto 0% auto;
+ height: max-content;
}
\ No newline at end of file
diff --git a/toys/license/options.css b/toys/license/options.css
index 97635ad..6a4cd34 100644
--- a/toys/license/options.css
+++ b/toys/license/options.css
@@ -2,10 +2,11 @@
display: block;
margin: 0% auto;
width: max-content;
+ height: auto;
padding: calc(2px * var(--pxDensity));
overflow-y: scroll;
- max-height: 45vh;
max-width: 100vw;
+ flex-grow: 1;
}
#optionsCredits {
margin: 0%;
@@ -35,7 +36,8 @@ input {
font-size: inherit;
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
- width: round(auto, var(--pxDensity));
+ /* width: round(auto, var(--pxDensity)); */
+ width: 50%;
height: round(auto, var(--pxDensity));
color: inherit;
display: inline-block;
@@ -49,7 +51,7 @@ input {
border: none;
font-size: inherit;
box-sizing: border-box;
- width: round(auto, var(--pxDensity));
+ width: 100%;
height: calc(1px * var(--pxDensity));
margin: 0%;
outline: none;
@@ -78,7 +80,7 @@ input {
font-size: inherit;
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
- width: round(auto, var(--pxDensity));
+ width: 50%;
height: round(auto, var(--pxDensity));
color: inherit;
}
@@ -93,7 +95,7 @@ input {
padding: calc(1px * var(--pxDensity));
border: none;
font-size: inherit;
- margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
+ margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: round(auto, var(--pxDensity));
height: auto;
@@ -118,4 +120,22 @@ h1 {
}
.h1Top {
margin-top: calc(2px * var(--pxDensity));
+}
+select {
+ 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;
+ font-size: inherit;
+ margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
+ box-sizing: border-box;
+ /* width: round(auto, var(--pxDensity)); */
+ width: 50%;
+ height: round(auto, var(--pxDensity));
+ color: inherit;
+ display: inline-block;
}
\ No newline at end of file
diff --git a/toys/license/script.js b/toys/license/script.js
index cfb1cf8..c613e61 100644
--- a/toys/license/script.js
+++ b/toys/license/script.js
@@ -1,71 +1,66 @@
CURRENT_PAGE = PAGES.LICENSE
-const authorInput = document.getElementById("authorInput")
-const createdInput = document.getElementById("createdInput")
-const expireInput = document.getElementById("expireInput")
-const identityInput = document.getElementById("identityInput")
-const sillyInput = document.getElementById("sillyInput")
-const signatureInput = document.getElementById("signatureInput")
+const inputOutputMap = {
+ titleInput: "titleValue",
+ authorInput: "authorValue",
+ createdInput: "createdValue",
+ expireInput: "expireValue",
+ identityInput: "genderValue",
+ signatureInput: "signatureValue",
+};
-const authorValue = document.getElementById("authorValue")
-const createdValue = document.getElementById("createdValue")
-const expireValue = document.getElementById("expireValue")
-const genderValue = document.getElementById("genderValue")
-const sillyValue = document.getElementById("sillyValue")
-const signatureValue = document.getElementById("signature")
+for (const [inputId, outputId] of Object.entries(inputOutputMap)) {
+ const inputElement = document.getElementById(inputId);
+ const outputElement = document.getElementById(outputId);
-const sillyNumberValue = document.getElementById("sillyNumberValue")
-
-function prependZero(number) {
- if (number < 10)
- return "0" + number
- else
- return number
+ if (inputElement && outputElement) {
+ inputElement.oninput = function () {
+ outputElement.innerHTML = this.value;
+ };
+ }
}
-authorInput.oninput = function() {
- authorValue.innerHTML = this.value
-}
-createdInput.oninput = function() {
- createdValue.innerHTML = this.value
-}
-expireInput.oninput = function() {
- expireValue.innerHTML = this.value
-}
-identityInput.oninput = function() {
- genderValue.innerHTML = this.value
-}
-sillyInput.oninput = function() {
- setSillyValue(this.value)
-}
-signatureInput.oninput = function() {
- signatureValue.innerHTML = this.value
-}
+const sillyInput = document.getElementById("sillyInput");
+const sillyValue = document.getElementById("sillyValue");
+const sillyNumberValue = document.getElementById("sillyNumberValue");
+if (sillyInput && sillyValue && sillyNumberValue) {
+ sillyInput.oninput = function () {
+ 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}%`;
- let percent = value == 0 ? 0 : 100 / value
+ let percent = value == 0 ? 0 : 100 / value;
sillyValue.style.backgroundImage = `
repeating-linear-gradient(
to right,
- #000000 0px,
- #000000 3px,
+ #000000 0px,
+ #000000 3px,
transparent 3px,
transparent ${percent}%
)
- `
+ `;
}
+function prependZero(number) {
+ return number < 10 ? "0" + number : number;
+}
function onLoadLicense() {
- authorValue.innerHTML = authorInput.value
- createdValue.innerHTML = createdInput.value
- expireValue.innerHTML = expireInput.value
- genderValue.innerHTML = identityInput.value
- signatureValue.innerHTML = signatureInput.value
+ for (const [inputId, outputId] of Object.entries(inputOutputMap)) {
+ const inputElement = document.getElementById(inputId);
+ const outputElement = document.getElementById(outputId);
- setSillyValue(sillyInput.value)
-}
\ No newline at end of file
+ if (inputElement && outputElement) {
+ outputElement.innerHTML = inputElement.value;
+ }
+ }
+
+ if (sillyInput) {
+ setSillyValue(sillyInput.value);
+ }
+}
diff --git a/toys/license/style.css b/toys/license/style.css
index 7fa7742..48786a6 100644
--- a/toys/license/style.css
+++ b/toys/license/style.css
@@ -1,3 +1,8 @@
+.allContainer {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+}
.blackBorderRect {
background-color: #FFFFFF;
border: 10px #000000 solid;
+
-
- Boykisser license
+
+
+
+
-
+
+ Byte Dice
+Sign here
+Basic
- - -Extra
- - -Advanced
- -
-
-
-
-
-
-
- Byte Dice
-Sign here
+
+
-
+
For
Byte Dice
+Issued
2025-01-18
+Expires
never
+Identity
unknown
+Silly
+
+
-
-
-
- For
Byte Dice
-Issued
2025-01-18
-Expires
never
-Identity
unknown
-Silly
-
-
Original by Chilli
Remade by Byte Dice at bytedice.net/toys
Original by Chilli
Remade by Byte Dice at bytedice.net/toys