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

made HTML->PNG conversion for the license

Browse Source
This commit is contained in:
ByteDice
2025-01-25 21:42:23 +01:00
parent cb3dc59c40
commit 5bb115e281
8 changed files with 138 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
toys/license/600x400_license.css
+19 -15
View File
@@ -2,7 +2,7 @@
font-family: "Comic Sans MS", "Comic Sans", cursive;
position: absolute;
top: 0vh;
left: 200vw;
left: 300vw;
width: 600px;
height: 400px;
padding: 0px 20px 40px 20px;
@@ -57,24 +57,28 @@
display: grid;
grid-template-columns: repeat(2, auto);
}
#sillyValue_600x400 {
height: 100%;
background-color: #FF0000;
}
.sillyGrid_600x400 {
width: 99%;
aspect-ratio: 10 / 1;
.sillyBar_600x400 {
width: auto;
height: auto;
background-image: repeating-linear-gradient(
to right,
#000000 0px,
#000000 3px,
transparent 3px,
transparent 10%
);
background-color: #000000;
border: 3px solid black;
border-radius: 8px;
align-self: center;
display: flex;
gap: 3px;
}
.sillyValue_600x400 {
position: relative;
width: calc(100% / 10);
height: 100%;
aspect-ratio: 1 / 1;
display: block;
}
.sillyValue_600x400:first-child {
border-radius: 5px 0px 0px 5px;
}
.sillyValue_600x400:last-child {
border-radius: 0px 5px 5px 0px;
}
#titleValue_600x400 {
grid-area: 1 / 1 / 2 / 3;
toys/license/index.html
+31 -2
View File
@@ -104,6 +104,10 @@
license bg-image/bg-gradient
-->
</form>
<button id="generateButton" onclick="generateLicense()">
<img src="/assets/icons/download.svg" class="generateButtonIcon" draggable="false">
</button>
</div>
<div id="licenseContainer" class="blackBorderRect">
@@ -126,7 +130,18 @@
<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 class="sillyBar">
<div id="sillyValue0" class="sillyValue on"></div>
<div id="sillyValue1" class="sillyValue on"></div>
<div id="sillyValue2" class="sillyValue on"></div>
<div id="sillyValue3" class="sillyValue off"></div>
<div id="sillyValue4" class="sillyValue off"></div>
<div id="sillyValue5" class="sillyValue off"></div>
<div id="sillyValue6" class="sillyValue off"></div>
<div id="sillyValue7" class="sillyValue off"></div>
<div id="sillyValue8" class="sillyValue off"></div>
<div id="sillyValue9" class="sillyValue off"></div>
</div>
</div>
</div>
@@ -154,7 +169,18 @@
<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 class="sillyBar_600x400">
<div id="sillyValue0_600x400" class="sillyValue_600x400 on"></div>
<div id="sillyValue1_600x400" class="sillyValue_600x400 on"></div>
<div id="sillyValue2_600x400" class="sillyValue_600x400 on"></div>
<div id="sillyValue3_600x400" class="sillyValue_600x400 off"></div>
<div id="sillyValue4_600x400" class="sillyValue_600x400 off"></div>
<div id="sillyValue5_600x400" class="sillyValue_600x400 off"></div>
<div id="sillyValue6_600x400" class="sillyValue_600x400 off"></div>
<div id="sillyValue7_600x400" class="sillyValue_600x400 off"></div>
<div id="sillyValue8_600x400" class="sillyValue_600x400 off"></div>
<div id="sillyValue9_600x400" class="sillyValue_600x400 off"></div>
</div>
</div>
</div>
@@ -164,6 +190,9 @@
<div id="loadingScreen"></div>
<!-- libs -->
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<!-- global -->
<script src="/global/globalScript.js"></script>
<script src="/global/pxDensity.js"></script>
toys/license/license.css
+25 -14
View File
@@ -64,24 +64,35 @@
h2 {
margin: 5px;
}
#sillyValue {
height: 100%;
background-color: #FF0000;
}
.sillyGrid {
width: 99%;
aspect-ratio: 10 / 1;
.sillyBar {
width: auto;
height: auto;
background-image: repeating-linear-gradient(
to right,
#000000 0px,
#000000 3px,
transparent 3px,
transparent 10%
);
background-color: #000000;
border: 3px solid black;
border-radius: 8px;
align-self: center;
display: flex;
gap: 3px;
}
.sillyValue {
position: relative;
width: calc(100% / 10);
height: 100%;
aspect-ratio: 1 / 1;
display: block;
}
.on {
background-image: url(/assets/scribble_32x32.png);
}
.off {
background-image: none;
background-color: #FFFFFF;
}
.sillyValue:first-child {
border-radius: 5px 0px 0px 5px;
}
.sillyValue:last-child {
border-radius: 0px 5px 5px 0px;
}
#titleValue {
grid-area: 1 / 1 / 2 / 3;
toys/license/options.css
+22
View File
@@ -166,4 +166,26 @@ input[type=file] {
}
form {
display: inline-block;
}
#generateButton {
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;
margin: calc(6px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: calc(100% - (4px * var(--pxDensity)));
height: calc(6px * var(--pxDensity));
display: inline-block;
}
.generateButtonIcon {
height: calc(4px * var(--pxDensity));
aspect-ratio: 1 / 1;
width: auto;
display: inline-block;
margin: auto 0%;
}
toys/license/script.js
+39 -17
View File
@@ -23,33 +23,42 @@ for (const [inputId, outputId] of Object.entries(inputOutputMap)) {
}
const sillyInput = document.getElementById("sillyInput")
const sillyValue = document.getElementById("sillyValue")
const sillyValue_600x400 = document.getElementById("sillyValue_600x400")
const sillyNumberValue = document.getElementById("sillyNumberValue")
let sillyValues = []
let sillyValues_600x400 = []
if (sillyInput && sillyValue && sillyNumberValue) {
for (let i = 0; i < 10; i++) {
sillyValues.push(document.getElementById(`sillyValue${i}`))
sillyValues_600x400.push(document.getElementById(`sillyValue${i}_600x400`))
}
if (sillyInput && sillyValues && sillyNumberValue) {
sillyInput.oninput = function () {
setSillyValue(this.value)
}
}
function setSillyValue(value) {
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
let bgImg = `
repeating-linear-gradient(
to right,
#000000 0px,
#000000 3px,
transparent 3px,
transparent ${percent}%
)
`
sillyValue.style.backgroundImage = bgImg
sillyValue_600x400.style.backgroundImage = bgImg
for (let i in sillyValues) {
let sillyValue = sillyValues[i]
let sillyValue_600x400 = sillyValues_600x400[i]
let isTurnedOn = i <= value - 1
if (isTurnedOn) {
sillyValue.className = "sillyValue on"
sillyValue_600x400.className = "sillyValue_600x400 on"
}
else {
sillyValue.className = "sillyValue off"
sillyValue_600x400.className = "sillyValue_600x400 off"
}
}
}
const picInput = document.getElementById("picInput")
@@ -87,6 +96,19 @@ function prependZero(number) {
return number < 10 ? "0" + number : number
}
function generateLicense() {
const element = document.getElementById("licenseContainer_600x400")
html2canvas(element).then(canvas => {
const link = document.createElement("a");
link.download = "boykisserLicense.png";
link.href = canvas.toDataURL("image/png");
link.click();
});
}
function onLoadLicense() {
for (const [inputId, outputId] of Object.entries(inputOutputMap)) {
const inputElement = document.getElementById(inputId)