added a 600x400 hidden license for when HTML->PNG conversion is added
This commit is contained in:
@@ -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;
|
||||
}
|
||||
@@ -11,6 +11,7 @@
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="license.css">
|
||||
<link rel="stylesheet" href="options.css">
|
||||
<link rel="stylesheet" href="600x400_license.css">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
@@ -116,6 +117,33 @@
|
||||
<p id="credits">Original by Chilli<br>Remade by Byte Dice at bytedice.net/toys</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="licenseContainer_600x400" class="blackBorderRect">
|
||||
<h3 id="titleValue_600x400">Boykisser license</h3>
|
||||
<div style="width: max-content;">
|
||||
<div id="picContainer_600x400" class="blackBorderRect">
|
||||
<img id="picValue_600x400" src="" draggable="false">
|
||||
</div>
|
||||
|
||||
<div id="signatureContainer_600x400">
|
||||
<p id="signatureValue_600x400">Byte Dice</p>
|
||||
<p id="signHere_600x400">Sign here</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div id="detailsContainer_600x400">
|
||||
<h2>For </h2><h2 id="authorValue_600x400" >Byte Dice</h2>
|
||||
<h2>Issued </h2><h2 id="createdValue_600x400">2025-01-18</h2>
|
||||
<h2>Expires </h2><h2 id="expireValue_600x400" >never</h2>
|
||||
<h2>Identity </h2><h2 id="genderValue_600x400" >unknown</h2>
|
||||
<h2>Silly</h2>
|
||||
<div class="sillyGrid_600x400"><div id="sillyValue_600x400"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p id="credits_600x400">Original by Chilli<br>Remade by Byte Dice at bytedice.net/toys</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="loadingScreen"></div>
|
||||
|
||||
+33
-21
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user