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
assets/icons/download.svg
+1
View File
@@ -0,0 +1 @@
<svg fill="#232323" height="800" width="800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 374.116 374.116"><path d="M344.058 207.506c-16.568 0-30 13.432-30 30v76.609h-254v-76.609c0-16.568-13.432-30-30-30s-30 13.432-30 30v106.609c0 16.568 13.432 30 30 30h314c16.568 0 30-13.432 30-30V237.506c0-16.568-13.432-30-30-30"/><path d="m123.57 108.287 33.488 33.488V30c0-16.568 13.432-30 30-30s30 13.432 30 30v111.776l33.488-33.488c5.857-5.858 13.535-8.787 21.213-8.787s15.355 2.929 21.213 8.787c11.716 11.716 11.716 30.71 0 42.426l-84.701 84.7c-11.715 11.717-30.711 11.717-42.426 0l-84.701-84.701c-11.716-11.716-11.716-30.71 0-42.426s30.711-11.716 42.426 0"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 660 B

assets/icons/upload.svg
+1 -14
View File
@@ -1,14 +1 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg fill="#232323" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 374.116 374.116" xml:space="preserve">
<g>
<path d="M344.058,207.506c-16.568,0-30,13.432-30,30v76.609h-254v-76.609c0-16.568-13.432-30-30-30c-16.568,0-30,13.432-30,30
v106.609c0,16.568,13.432,30,30,30h314c16.568,0,30-13.432,30-30V237.506C374.058,220.938,360.626,207.506,344.058,207.506z"/>
<path d="M123.57,135.915l33.488-33.488v111.775c0,16.568,13.432,30,30,30c16.568,0,30-13.432,30-30V102.426l33.488,33.488
c5.857,5.858,13.535,8.787,21.213,8.787c7.678,0,15.355-2.929,21.213-8.787c11.716-11.716,11.716-30.71,0-42.426L208.271,8.788
c-11.715-11.717-30.711-11.717-42.426,0L81.144,93.489c-11.716,11.716-11.716,30.71,0,42.426
C92.859,147.631,111.855,147.631,123.57,135.915z"/>
</g>
</svg>
<svg fill="#232323" height="800" width="800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 374.116 374.116" xml:space="preserve"><path d="M344.058 207.506c-16.568 0-30 13.432-30 30v76.609h-254v-76.609c0-16.568-13.432-30-30-30s-30 13.432-30 30v106.609c0 16.568 13.432 30 30 30h314c16.568 0 30-13.432 30-30V237.506c0-16.568-13.432-30-30-30"/><path d="m123.57 135.915 33.488-33.488v111.775c0 16.568 13.432 30 30 30s30-13.432 30-30V102.426l33.488 33.488c5.857 5.858 13.535 8.787 21.213 8.787s15.355-2.929 21.213-8.787c11.716-11.716 11.716-30.71 0-42.426l-84.701-84.7c-11.715-11.717-30.711-11.717-42.426 0L81.144 93.489c-11.716 11.716-11.716 30.71 0 42.426s30.711 11.716 42.426 0"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 685 B

assets/scribble_32x32.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

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
@@ -167,3 +167,25 @@ 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)