ByteDice/ByteDiceWeb
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

added details section & options/parameters section

Browse Source
This commit is contained in:
ByteDice
2025-01-19 00:28:13 +01:00
parent 701e9f42d5
commit 86f7f1c66d
4 changed files with 173 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
global/globalScript.js
+1
View File
@@ -154,6 +154,7 @@ document.addEventListener("DOMContentLoaded", async function() {
switch (CURRENT_PAGE) { switch (CURRENT_PAGE) {
case (PAGES.SYNTHWAVE): loadingScreenSynthwave() case (PAGES.SYNTHWAVE): loadingScreenSynthwave()
case (PAGES.LICENSE): onLoadLicense()
} }
pauseAnimBtn(localStorage["isAnimating"] || "true") pauseAnimBtn(localStorage["isAnimating"] || "true")
toys/license/index.html
+35 -1
View File
@@ -17,15 +17,49 @@
<body> <body>
<div id="mainDiv"> <div id="mainDiv">
<div id="navBarContainer" data-alt="byte"></div> <div id="navBarContainer" data-alt="byte"></div>
<div id="optionsContainer" class="borderedRect"></div>
<div id="optionsContainer" class="borderedRect">
<p id="optionsCredits">
Check out the original version by Chilli
<a onclick="slideTransition('https://picrew.me/en/image_maker/2310778')">here</a>!
</p>
<form>
<label for="authorInput">For/Author</label>
<input type="text" id="authorInput" name="authorInput" value="Byte Dice"><br>
<label for="createdInput">Issued</label>
<input type="text" id="createdInput" name="createdInput" value="2025-01-01"><br>
<label for="expireInput">Expires</label>
<input type="text" id="expireInput" name="expireInput" value="NEVER!!!"><br>
<label for="identityInput">Identity</label>
<input type="text" id="identityInput" name="identityInput" value="any pronouns"><br>
<label for="sillyInput">Silly</label>
<div id="sillyNumberValue">03</div>
<div class="sliderDiv">
<input type="range" min="0" max="10" value="3" class="slider" id="sillyInput" name="sillyInput">
</div>
</form>
</div>
<div id="licenseContainer" class="blackBorderRect"> <div id="licenseContainer" class="blackBorderRect">
<div>
<div id="picContainer" class="blackBorderRect"></div> <div id="picContainer" class="blackBorderRect"></div>
<div id="signatureContainer"> <div id="signatureContainer">
<p id="signature">Byte Dice</p> <p id="signature">Byte Dice</p>
<p id="signHere">Sign here</p> <p id="signHere">Sign here</p>
</div> </div>
</div>
<div>
<div id="detailsContainer">
<h2 id="authorDetail">For <h2 id="authorValue" >Byte Dice</h2></h2>
<h2 id="createdDetail">Issued <h2 id="createdValue">2025-01-18</h2></h2>
<h2 id="expireDetail">Expires <h2 id="expireValue" >never</h2></h2>
<h2 id="genderDetail">Identity<h2 id="genderValue" >unknown</h2></h2>
<h2 id="sillyDetain">Silly <div id="sillyValue" >10/10</div></h2>
</div>
</div>
<p id="credits">Original by Chilli<br>Remade by Byte Dice at bytedice.net/toys</p> <p id="credits">Original by Chilli<br>Remade by Byte Dice at bytedice.net/toys</p>
</div> </div>
toys/license/script.js
+20
View File
@@ -1 +1,21 @@
CURRENT_PAGE = PAGES.LICENSE 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)
}
toys/license/style.css
+111 -1
View File
@@ -5,7 +5,7 @@
left: round(50%, var(--pxDensityPx)); left: round(50%, var(--pxDensityPx));
transform: translate(-50%); transform: translate(-50%);
width: max-content; width: max-content;
padding: calc(1px * var(--pxDensity)); padding: calc(2px * var(--pxDensity));
} }
#licenseContainer { #licenseContainer {
width: 600px; width: 600px;
@@ -18,6 +18,9 @@
transform: translate(-50%, calc(-22px * var(--pxDensity))); transform: translate(-50%, calc(-22px * var(--pxDensity)));
font-size: 0.75rem; font-size: 0.75rem;
box-sizing: border-box; box-sizing: border-box;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
} }
.blackBorderRect { .blackBorderRect {
background-color: #FFFFFF; background-color: #FFFFFF;
@@ -52,3 +55,110 @@
margin: 0%; margin: 0%;
padding: 0% 25px; 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;
}