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

added picture option & un-copypasted script

Browse Source
This commit is contained in:
ByteDice
2025-01-22 20:07:05 +01:00
parent c08e026d4c
commit 07a432a499
5 changed files with 162 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
toys/license/index.html
+72 -58
View File
@@ -25,67 +25,81 @@
<div id="mainDiv">
<div id="navBarContainer" data-alt="byte"></div>
<div id="optionsContainer" class="borderedRect">
<h1 id="optionsCredits" class="h1Top">
Check out the original by Chilli
<a onclick="slideTransition('https://picrew.me/en/image_maker/2310778')">here</a>!
</h1><br>
<div class="allContainer">
<div id="optionsContainer" class="borderedRect">
<h1 id="optionsCredits" class="h1Top">
Check out the original by Chilli
<a onclick="slideTransition('https://picrew.me/en/image_maker/2310778')">here</a>!
</h1><br>
<h1>Basic</h1>
<form>
<label for="titleInput">Title </label><input type="text" id="titleInput" name="titleInput" value="Boykisser license"><br>
<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><br>
<label for="signatureInput">Signature</label><input type="text" id="signatureInput" name="signatureInput" value="Byte Dice"><br>
<label for="picInput">Picture</label><select id="picInput" name="picInput">
<option value="boykisser" >Boykisser</option>
<option value="bi-kisser" >Bi-kisser</option>
<option value="no-kisser" >No-kisser</option>
<option value="pan-kisser" >Pan-kisser</option>
<option value="trans-kisser">Trans-kisser</option>
<option value="bytedice" >Byte Dice</option>
<option value="custom" >Custom (upload)</option>
</select><br>
<!-- picture -->
</form>
<h1>Extra</h1>
<form>
<!-- decorations like
the QR-code
license bg-image/bg-color
-->
</form>
<h1>Advanced</h1>
<form>
<!--
license border radius
pic border radius
title gradient (2 colors + direction) or flag
-->
</form>
</div>
<div id="licenseContainer" class="blackBorderRect">
<h3 id="titleValue">Boykisser license</h3>
<div style="width: max-content;">
<div id="picContainer" class="blackBorderRect"></div>
<div id="signatureContainer">
<p id="signatureValue">Byte Dice</p>
<p id="signHere">Sign here</p>
</div>
</div>
<h1>Basic</h1>
<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><br>
<label for="signatureInput">Signature</label><input type="text" id="signatureInput" name="signatureInput" value="Byte Dice">
<!-- Title & picture -->
</form>
<h1>Extra</h1>
<form>
<!-- decorations like
the QR-code
license bg-image/bg-color
-->
</form>
<h1>Advanced</h1>
<form>
<!--
license border radius
pic border radius
-->
</form>
</div>
<div id="licenseContainer" class="blackBorderRect">
<div style="width: max-content;">
<div id="picContainer" class="blackBorderRect"></div>
<div id="signatureContainer">
<p id="signature">Byte Dice</p>
<p id="signHere">Sign here</p>
<div>
<div id="detailsContainer">
<h2>For </h2><h2 id="authorValue" >Byte Dice</h2>
<h2>Issued </h2><h2 id="createdValue">2025-01-18</h2>
<h2>Expires </h2><h2 id="expireValue" >never</h2>
<h2>Identity </h2><h2 id="genderValue" >unknown</h2>
<h2>Silly</h2>
<div class="sillyGrid"><div id="sillyValue"></div></div>
</div>
</div>
</div>
<div>
<div id="detailsContainer">
<h2>For </h2><h2 id="authorValue" >Byte Dice</h2>
<h2>Issued </h2><h2 id="createdValue">2025-01-18</h2>
<h2>Expires </h2><h2 id="expireValue" >never</h2>
<h2>Identity </h2><h2 id="genderValue" >unknown</h2>
<h2>Silly</h2>
<div class="sillyGrid"><div id="sillyValue"></div></div>
</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>
</div>
toys/license/license.css
+15 -7
View File
@@ -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;
}
toys/license/options.css
+25 -5
View File
@@ -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;
}
toys/license/script.js
+45 -50
View File
@@ -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)
}
if (inputElement && outputElement) {
outputElement.innerHTML = inputElement.value;
}
}
if (sillyInput) {
setSillyValue(sillyInput.value);
}
}
toys/license/style.css
+5
View File
@@ -1,3 +1,8 @@
.allContainer {
display: flex;
flex-direction: column;
height: 100vh;
}
.blackBorderRect {
background-color: #FFFFFF;
border: 10px #000000 solid;