diff --git a/global/globalScript.js b/global/globalScript.js index b3b67d2..cbb7d48 100644 --- a/global/globalScript.js +++ b/global/globalScript.js @@ -154,6 +154,7 @@ document.addEventListener("DOMContentLoaded", async function() { switch (CURRENT_PAGE) { case (PAGES.SYNTHWAVE): loadingScreenSynthwave() + case (PAGES.LICENSE): onLoadLicense() } pauseAnimBtn(localStorage["isAnimating"] || "true") diff --git a/toys/license/index.html b/toys/license/index.html index 9115c28..8728293 100644 --- a/toys/license/index.html +++ b/toys/license/index.html @@ -17,16 +17,50 @@
-
+ +
+

+ Check out the original version by Chilli + here! +

+ +
+ +
+ +
+ +
+ +
+ +
03
+
+ +
+
+
-
+
+
-
-

Byte Dice

-

Sign here

+
+

Byte Dice

+

Sign here

+
- + +
+
+

For

Byte Dice

+

Issued

2025-01-18

+

Expires

never

+

Identity

unknown

+

Silly
10/10

+
+
+

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

diff --git a/toys/license/script.js b/toys/license/script.js index f320fbe..b09cad5 100644 --- a/toys/license/script.js +++ b/toys/license/script.js @@ -1 +1,21 @@ -CURRENT_PAGE = PAGES.LICENSE \ No newline at end of file +CURRENT_PAGE = PAGES.LICENSE + +const sillyInput = document.getElementById("sillyInput") + +const sillyNumberValue = document.getElementById("sillyNumberValue") + +function prependZero(number) { + if (number < 10) + return "0" + number + else + return number +} + +sillyInput.oninput = function() { + sillyNumberValue.innerHTML = prependZero(this.value) +} + + +function onLoadLicense() { + sillyNumberValue.innerHTML = prependZero(sillyInput.value) +} \ No newline at end of file diff --git a/toys/license/style.css b/toys/license/style.css index cfe4d13..a37cf9f 100644 --- a/toys/license/style.css +++ b/toys/license/style.css @@ -5,7 +5,7 @@ left: round(50%, var(--pxDensityPx)); transform: translate(-50%); width: max-content; - padding: calc(1px * var(--pxDensity)); + padding: calc(2px * var(--pxDensity)); } #licenseContainer { width: 600px; @@ -18,6 +18,9 @@ transform: translate(-50%, calc(-22px * var(--pxDensity))); font-size: 0.75rem; box-sizing: border-box; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto auto; } .blackBorderRect { background-color: #FFFFFF; @@ -51,4 +54,111 @@ border-top: #000000 solid 6px; margin: 0%; padding: 0% 25px; +} +#detailsContainer { + display: grid; + grid-template-columns: repeat(2, 1fr); +} +h2 { + margin: 5px; +} +a { + cursor: pointer; + color: #1010da; + text-decoration: underline; +} +a:visited { + color: #551A8B; +} +#optionsCredits { + margin: 0%; +} +label { + 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)); + margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%; + box-sizing: border-box; + width: round(auto, var(--pxDensity)); + height: round(auto, var(--pxDensity)); +} +input { + 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)); + height: round(auto, var(--pxDensity)); + color: inherit; +} +.slider { + -webkit-appearance: none; + appearance: none; + background-color: var(--navBarBtn_Border); + box-shadow: none; + filter: none; + border: none; + font-size: inherit; + box-sizing: border-box; + width: round(auto, var(--pxDensity)); + height: calc(1px * var(--pxDensity)); + margin: 0%; + outline: none; + padding: 0%; +} + +.slider::-webkit-slider-thumb, .slider::-moz-range-thumb { + -webkit-appearance: none; + appearance: none; + background-color: var(--navBar_Border); + border: none; + cursor: pointer; + border-radius: 0%; + width: calc(3px * var(--pxDensity)); + height: calc(3px * var(--pxDensity)); +} +.sliderDiv { + display: inline-block; + 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)); + height: round(auto, var(--pxDensity)); + color: inherit; +} +#sillyNumberValue { + display: inline; + 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)); + height: auto; + aspect-ratio: 1 / 1; } \ No newline at end of file