remade boykisser license to be easier to modify and update
This commit is contained in:
@@ -173,7 +173,7 @@ document.addEventListener("DOMContentLoaded", async function() {
|
||||
|
||||
switch (CURRENT_PAGE) {
|
||||
case (PAGES.SYNTHWAVE): loadingScreenSynthwave(); break
|
||||
case (PAGES.LICENSE): onLoadLicense(); loadingScreenStars(); break
|
||||
case (PAGES.LICENSE): loadingScreenLicense(); loadingScreenStars(); break
|
||||
case (PAGES.TOYS): loadingScreenStars(); break
|
||||
case (PAGES.LIBS): loadingScreenStars(); break
|
||||
}
|
||||
@@ -209,6 +209,7 @@ window.addEventListener("resize", function() {
|
||||
|
||||
switch (CURRENT_PAGE) {
|
||||
case (PAGES.SYNTHWAVE): onResizeSynthwave()
|
||||
case (PAGES.LICENSE): scaleDisplayLicense()
|
||||
}
|
||||
|
||||
// unoptimal but works well enough
|
||||
|
||||
@@ -31,7 +31,7 @@ canvas {
|
||||
}
|
||||
.pxFont {
|
||||
font-family: "Roboto", sans-serif;
|
||||
; font-size: min(5vmin, 2vmax, 1rem)
|
||||
font-size: min(5vmin, 2vmax, 1rem)
|
||||
}
|
||||
@keyframes slide-left {
|
||||
0% { transform: translateX(0%); }
|
||||
|
||||
@@ -1,85 +0,0 @@
|
||||
#licenseContainer_600x400 {
|
||||
position: absolute;
|
||||
top: 0vh;
|
||||
left: 300vw;
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
.sillyBar_600x400 {
|
||||
width: auto;
|
||||
height: auto;
|
||||
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;
|
||||
font-size: 2rem;
|
||||
margin: 0% auto 0% auto;
|
||||
height: max-content;
|
||||
text-align: center;
|
||||
}
|
||||
+60
-91
@@ -11,7 +11,6 @@
|
||||
<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">
|
||||
|
||||
<!-- fonts -->
|
||||
<style>
|
||||
@@ -44,11 +43,6 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- If you came here from u/RandomPersonDotExe, let them know that they are a good developer. -->
|
||||
<!-- Also, u/RandomPersonDotExe and Byte Dice are the same person. -->
|
||||
<!-- Proof for the above comment? None, but I am Byte Dice and randomPerson probably sent you this saying it's their work -->
|
||||
<!-- Proof that I am Byte Dice? Check the commit history. -->
|
||||
|
||||
<div id="mainDiv">
|
||||
<img src="/assets/backgrounds/starNoise_512x512.png" draggable="false" id="starNoise">
|
||||
<canvas id="starfallCanvas"></canvas>
|
||||
@@ -65,13 +59,13 @@
|
||||
|
||||
<h1>Basic</h1><br>
|
||||
<form class="licenseForm licenseFormContainer">
|
||||
<label for="titleInput">Title</label><input type="text" id="titleInput" name="titleInput" value="Boykisser license">
|
||||
<label for="authorInput">For/Author</label><input type="text" id="authorInput" name="authorInput" value="Byte Dice">
|
||||
<label for="createdInput">Issued</label><input type="text" id="createdInput" name="createdInput" value="2025-01-01">
|
||||
<label for="expireInput">Expires</label><input type="text" id="expireInput" name="expireInput" value="NEVER!!!">
|
||||
<label for="identityInput">Identity</label><input type="text" id="identityInput" name="identityInput" value="any pronouns">
|
||||
<label for="titleInput" >Title</label ><input type="text" id="titleInput" name="titleInput" value="Boykisser license">
|
||||
<label for="authorInput" >User</label ><input type="text" id="authorInput" name="authorInput" value="Byte Dice">
|
||||
<label for="createdInput" >Issued</label ><input type="text" id="createdInput" name="createdInput" value="2025-01-01">
|
||||
<label for="expireInput" >Expires</label ><input type="text" id="expireInput" name="expireInput" value="NEVER!!!">
|
||||
<label for="identityInput">Identity</label ><input type="text" id="identityInput" name="identityInput" value="any pronouns">
|
||||
|
||||
<label for="sillyInput">Silly</label><div style="display: inline-flex">
|
||||
<label for="sillyInput">Silliness</label><div style="display: inline-flex">
|
||||
<div id="sillyNumberValue">03</div><div class="sliderDiv">
|
||||
<input type="range" min="0" max="10" value="3" class="slider" id="sillyInput" name="sillyInput"></div>
|
||||
</div>
|
||||
@@ -112,87 +106,60 @@
|
||||
-\->
|
||||
</form>-->
|
||||
|
||||
<button id="generateButton" onclick="generateLicense()">
|
||||
<img src="/assets/icons/download.svg" class="generateButtonIcon" draggable="false">
|
||||
</button>
|
||||
<div style="display: flex; gap: calc(1px * var(--pxDensity))">
|
||||
<button id="generateButton" class="generateButton" onclick="generateLicense()">
|
||||
Download
|
||||
</button>
|
||||
<button class="generateButton" onclick="exportData()">
|
||||
Copy Data
|
||||
</button>
|
||||
<button class="generateButton" onclick="importData()">
|
||||
Import
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: inline-flex; justify-content: center;">
|
||||
<div id="licenseAnchor" style="display: inline-block; transform-origin: center;">
|
||||
<div id="licenseContainer" class="blackBorderRect sans">
|
||||
<h3 id="titleValue">Boykisser license</h3>
|
||||
<div style="width: max-content;">
|
||||
<div id="picContainer" class="blackBorderRect">
|
||||
<img id="picValue" src="" draggable="false">
|
||||
</div>
|
||||
|
||||
<div id="licenseContainer" class="blackBorderRect sans">
|
||||
<h3 id="titleValue">Boykisser license</h3>
|
||||
<div style="width: max-content;">
|
||||
<div id="picContainer" class="blackBorderRect">
|
||||
<img id="picValue" src="" draggable="false">
|
||||
</div>
|
||||
<div id="signatureContainer" class="yellowTail">
|
||||
<p id="signatureValue">Byte Dice</p>
|
||||
<p id="signHere">Sign here</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div id="detailsContainer">
|
||||
<h2>User </h2><h2 id="authorValue" >foo</h2>
|
||||
<h2>Issued </h2><h2 id="createdValue">bar</h2>
|
||||
<h2>Expires </h2><h2 id="expireValue" >baz</h2>
|
||||
<h2>Identity </h2><h2 id="genderValue" >cux</h2>
|
||||
<h2>Silliness</h2>
|
||||
<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>
|
||||
|
||||
<div id="signatureContainer">
|
||||
<p id="signatureValue" class="yellowTail">Byte Dice</p>
|
||||
<p id="signHere">Sign here</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div id="detailsContainer">
|
||||
<h2 class="sans-bold">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="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>
|
||||
|
||||
<p id="credits">Original by Chilli<br>Remade by Byte Dice at bytedice.net/toys</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="licenseContainer_600x400" class="blackBorderRect sans">
|
||||
<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" class="yellowTail">
|
||||
<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="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>
|
||||
|
||||
<p id="credits_600x400">Original by Chilli<br>Remade by Byte Dice at bytedice.net/toys</p>
|
||||
</div>
|
||||
<p id="credits">Original by Chilli<br>Remade by Byte Dice at bytedice.net/toys</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navBarContainer" data-alt="byte"></div>
|
||||
</div>
|
||||
@@ -210,7 +177,9 @@
|
||||
<script src="/global/screenTransition.js"></script>
|
||||
|
||||
<!-- local -->
|
||||
<script src="script.js"></script>
|
||||
<script src="script3.js"></script>
|
||||
<script src="license.js"></script>
|
||||
<script src="input.js"></script>
|
||||
<script src="/stars.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
@@ -0,0 +1,147 @@
|
||||
let jsonData = {
|
||||
version: 0,
|
||||
title: "Boykisser License",
|
||||
user: "Byte Dice",
|
||||
issued: "2025-01-01",
|
||||
expires: "NEVER!!!",
|
||||
identity: "any pronouns",
|
||||
signature: "Byte Dice",
|
||||
silly: 3,
|
||||
img: {
|
||||
preset: "boykisser",
|
||||
file: ""
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const customPicOption = document.getElementById("customPic")
|
||||
|
||||
|
||||
function prepInputs() {
|
||||
const VMAP = {
|
||||
img: "picInput",
|
||||
user: "authorInput",
|
||||
title: "titleInput",
|
||||
silly: "sillyInput",
|
||||
issued: "createdInput",
|
||||
expires: "expireInput",
|
||||
identity: "identityInput",
|
||||
signature: "signatureInput",
|
||||
imgUpload: "picUpload"
|
||||
}
|
||||
|
||||
function getE(e) { return document.getElementById(e) }
|
||||
|
||||
getE(VMAP.img) .oninput = function() { jsonData.img.preset = this.value; updLicense() }
|
||||
getE(VMAP.user) .oninput = function() { jsonData.user = this.value; updLicense() }
|
||||
getE(VMAP.title) .oninput = function() { jsonData.title = this.value; updLicense() }
|
||||
getE(VMAP.silly) .oninput = function() { jsonData.silly = this.value; updLicense() }
|
||||
getE(VMAP.issued) .oninput = function() { jsonData.issued = this.value; updLicense() }
|
||||
getE(VMAP.expires) .oninput = function() { jsonData.expires = this.value; updLicense() }
|
||||
getE(VMAP.identity) .oninput = function() { jsonData.identity = this.value; updLicense() }
|
||||
getE(VMAP.signature).oninput = function() { jsonData.signature = this.value; updLicense() }
|
||||
|
||||
getE(VMAP.imgUpload).oninput = function() {
|
||||
if (this.files.length == 0) { return; }
|
||||
let f = this.files[0]
|
||||
jsonData.img.file = URL.createObjectURL(f)
|
||||
customPicOption.innerHTML = `Custom (${f.name})`
|
||||
|
||||
updLicense()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function updLicense() { license.updateFromJSON(jsonData) }
|
||||
|
||||
|
||||
function importData() {
|
||||
let data = prompt("Input your license data here.")
|
||||
importFromB64(data)
|
||||
}
|
||||
|
||||
|
||||
function importFromB64(b64) {
|
||||
if (b64.startsWith("B8D6:")) { b64 = b64.slice(5) }
|
||||
|
||||
try {
|
||||
let str = atob(b64)
|
||||
data = JSON.parse(str)
|
||||
let isValid = validateJSON_v0(data)
|
||||
if (isValid != true)
|
||||
{ alert("Invalid data string imported (Invalid fields). Full results:\n" + isValid.join("\n")); return }
|
||||
|
||||
jsonData = data
|
||||
updLicense()
|
||||
}
|
||||
catch (err) { alert("Invalid data string imported. Full results:\n" + err); return }
|
||||
}
|
||||
|
||||
|
||||
// I wanna keep compatibility with older versions
|
||||
function validateJSON_v0(obj) {
|
||||
let is_valid = (
|
||||
typeof obj === "object" &&
|
||||
obj !== null &&
|
||||
typeof obj.version === "number" &&
|
||||
typeof obj.title === "string" &&
|
||||
typeof obj.user === "string" &&
|
||||
typeof obj.issued === "string" &&
|
||||
typeof obj.expires === "string" &&
|
||||
typeof obj.identity === "string" &&
|
||||
typeof obj.signature === "string" &&
|
||||
typeof obj.silly === "number"
|
||||
)
|
||||
|
||||
if (is_valid) { return true }
|
||||
|
||||
let errs = []
|
||||
if (typeof obj !== "object") { errs.push("json != object") }
|
||||
if (obj === null) { errs.push("json == null") }
|
||||
|
||||
if (typeof obj.user !== "string") { errs.push("json.user != string") }
|
||||
if (typeof obj.title !== "string") { errs.push("json.title != string") }
|
||||
if (typeof obj.issued !== "string") { errs.push("json.issued != string") }
|
||||
if (typeof obj.expires !== "string") { errs.push("json.expires != string") }
|
||||
if (typeof obj.identity !== "string") { errs.push("json.identity != string") }
|
||||
if (typeof obj.signature !== "string") { errs.push("json.signature != string") }
|
||||
|
||||
if (typeof obj.version !== "number") { errs.push("json.version != number") }
|
||||
if (typeof obj.silly !== "number") { errs.push("json.silly != number") }
|
||||
|
||||
return errs
|
||||
}
|
||||
|
||||
|
||||
|
||||
function exportData() {
|
||||
let str = JSON.stringify(jsonData)
|
||||
let b64 = btoa(str)
|
||||
let watermarked = "B8D6:" + b64
|
||||
navigator.clipboard.writeText(watermarked)
|
||||
|
||||
alert("Data copied to clipboard! Keep in mind that images do not get exported.\n\nIf it didn't work, you can manually copy it below:\n\n" + watermarked)
|
||||
}
|
||||
|
||||
|
||||
function generateLicense() {
|
||||
const element = document.getElementById("licenseContainer")
|
||||
let dupe = element.cloneNode(true)
|
||||
dupe.style.transform = "initial"
|
||||
dupe.style.left = "300vw"
|
||||
dupe.style.position = "absolute"
|
||||
dupe.style.margin = "initial"
|
||||
|
||||
document.body.appendChild(dupe)
|
||||
|
||||
html2canvas(dupe).then(canvas => {
|
||||
const link = document.createElement("a");
|
||||
link.download = "boykisserLicense.png";
|
||||
link.href = canvas.toDataURL("image/png");
|
||||
link.click();
|
||||
});
|
||||
|
||||
console.log(dupe.getBoundingClientRect())
|
||||
|
||||
dupe.remove()
|
||||
}
|
||||
+77
-61
@@ -1,18 +1,3 @@
|
||||
#licenseContainer {
|
||||
position: relative;
|
||||
max-width: min(100vw, 600px);
|
||||
max-height: 400px /* min(calc(50vh - calc(25px * var(--pxDensity))), 400px) */;
|
||||
aspect-ratio: 3 / 2;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0px min(20px, 3.333%) min(40px, 6.667%) min(20px, 3.333%);
|
||||
margin: calc(5px * var(--pxDensity)) auto 0% /* calc(25px * var(--pxDensity)) */ auto;
|
||||
font-size: min(max(1.05vmax, 1.5vmin), 0.75rem);
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
grid-template-rows: repeat(2, auto);
|
||||
}
|
||||
.sans {
|
||||
font-family: "Comic Neue", serif;
|
||||
font-weight: 400;
|
||||
@@ -28,50 +13,6 @@
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
#picContainer {
|
||||
width: max(10vmax, 15vmin);
|
||||
height: max(10vmax, 15vmin);
|
||||
max-height: 150px;
|
||||
max-width: 150px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
border-radius: 25%;
|
||||
}
|
||||
#picValue {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
#credits {
|
||||
position: absolute;
|
||||
bottom: 0%;
|
||||
left: 0%;
|
||||
margin: 0% 0% 0% 20px;
|
||||
color: var(--navBarBtn_Inner);
|
||||
font-size: min(max(1vmax, 1.2vmin), 0.6rem);
|
||||
}
|
||||
#signatureContainer {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
margin: 5% 0% 0% 0%;
|
||||
}
|
||||
#signatureValue {
|
||||
margin: 0% 0% -0.2rem 0%;/* margin: 0% 0% 0.2rem 0%; */
|
||||
text-align: center;
|
||||
font-size: min(max(2.5vmax, 3vmin), 1.5rem);
|
||||
}
|
||||
#signHere {
|
||||
border-top: #000000 solid 6px;
|
||||
margin: 0%;
|
||||
padding: 0% 25px;
|
||||
text-align: center;
|
||||
}
|
||||
#detailsContainer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
}
|
||||
h2 {
|
||||
margin: 5px;
|
||||
}
|
||||
@@ -105,9 +46,84 @@ h2 {
|
||||
.sillyValue:last-child {
|
||||
border-radius: 0px 5px 5px 0px;
|
||||
}
|
||||
#titleValue {
|
||||
#licenseContainer {
|
||||
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 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
border-radius: 32px;
|
||||
}
|
||||
#picValue {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
#credits {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 0%;
|
||||
margin: 0% 0% 0% 20px;
|
||||
color: var(--navBarBtn_Inner);
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
#signatureContainer, #DsignatureContainer {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
margin: 5% 0% 0% 0%;
|
||||
}
|
||||
#signatureValue {
|
||||
margin: 0% 0% -0.2rem 0%;/* margin: 0% 0% 0.2rem 0%; */
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
#signHere {
|
||||
border-top: #000000 solid 6px;
|
||||
margin: 0%;
|
||||
padding: 0% 25px;
|
||||
text-align: center;
|
||||
}
|
||||
#detailsContainer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
}
|
||||
.sillyBar {
|
||||
width: auto;
|
||||
height: auto;
|
||||
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;
|
||||
}
|
||||
.sillyValue:first-child {
|
||||
border-radius: 5px 0px 0px 5px;
|
||||
}
|
||||
.sillyValue:last-child {
|
||||
border-radius: 0px 5px 5px 0px;
|
||||
}
|
||||
#titleValue, #DtitleValue {
|
||||
grid-area: 1 / 1 / 2 / 3;
|
||||
font-size: min(max(3vmax, 4vmin), 2rem);
|
||||
font-size: 2rem;
|
||||
margin: 0% auto 0% auto;
|
||||
height: max-content;
|
||||
text-align: center;
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
const sillyOptNumber = document.getElementById("sillyNumberValue")
|
||||
|
||||
|
||||
class License {
|
||||
constructor() {
|
||||
this.imgE = undefined
|
||||
this.userE = undefined
|
||||
this.titleE = undefined
|
||||
this.issuedE = undefined
|
||||
this.expiresE = undefined
|
||||
this.identityE = undefined
|
||||
this.signatureE = undefined
|
||||
|
||||
this.sillyE = undefined
|
||||
|
||||
this.sillyValues = []
|
||||
}
|
||||
|
||||
|
||||
updateFromJSON(json) {
|
||||
this.userE .textContent = json.user
|
||||
this.titleE .textContent = json.title
|
||||
this.issuedE .textContent = json.issued
|
||||
this.expiresE .textContent = json.expires
|
||||
this.identityE .textContent = json.identity
|
||||
this.signatureE.textContent = json.signature
|
||||
|
||||
this.setSillyValue(json.silly)
|
||||
this.setImgValue(json.img)
|
||||
}
|
||||
|
||||
|
||||
setSillyValue(value) {
|
||||
sillyOptNumber.innerHTML = prependZero(value)
|
||||
|
||||
for (let i in this.sillyValues) {
|
||||
let sillyValue = this.sillyValues[i]
|
||||
|
||||
let isTurnedOn = i <= value - 1
|
||||
|
||||
if (isTurnedOn) {
|
||||
sillyValue.className = "sillyValue on"
|
||||
}
|
||||
else {
|
||||
sillyValue.className = "sillyValue off"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
setImgValue(json) {
|
||||
if (json.preset != "custom")
|
||||
{ this.imgE.src = `/assets/boykissers/${json.preset}.png` }
|
||||
else { this.imgE.src = json.file }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let licenseE = document.getElementById("licenseContainer")
|
||||
let anchor = document.getElementById("licenseAnchor")
|
||||
let optContainer = document.getElementById("optionsContainer")
|
||||
|
||||
let license = new License()
|
||||
|
||||
|
||||
function prependZero(number) {
|
||||
return number < 10 ? "0" + number : number
|
||||
}
|
||||
|
||||
|
||||
function scaleDisplayLicense() {
|
||||
let w = optContainer.getBoundingClientRect().width
|
||||
let scaleFactor = (w - 50) / 600;
|
||||
|
||||
anchor.style.transform = `scale(${scaleFactor})`
|
||||
}
|
||||
|
||||
|
||||
@@ -2,12 +2,9 @@
|
||||
display: block;
|
||||
margin: calc(2px * var(--pxDensity)) auto 0% auto;
|
||||
width: max-content;
|
||||
height: auto;
|
||||
padding: calc(2px * var(--pxDensity));
|
||||
overflow-y: scroll;
|
||||
max-width: min(600px, 100vw);
|
||||
max-height: 40vh;
|
||||
flex-grow: 1;
|
||||
font-size: min(1.5rem, calc(4px * var(--pxDensity)));
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -31,6 +28,7 @@
|
||||
box-sizing: border-box;
|
||||
width: round(auto, var(--pxDensity));
|
||||
height: calc(6px * var(--pxDensity));
|
||||
font-weight: 800;
|
||||
}
|
||||
.licenseForm input[type="text"] {
|
||||
font-family: "Roboto", sans-serif;
|
||||
@@ -175,7 +173,7 @@ input[type=file] {
|
||||
form {
|
||||
display: inline-block;
|
||||
}
|
||||
#generateButton {
|
||||
.generateButton {
|
||||
background-color: var(--navBarBtn_Inner);
|
||||
box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
|
||||
calc(-1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
|
||||
@@ -190,6 +188,9 @@ form {
|
||||
height: calc(6px * var(--pxDensity));
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: min(5vmin, 2vmax, 30px);
|
||||
color: #ffffff
|
||||
}
|
||||
.generateButtonIcon {
|
||||
height: calc(4px * var(--pxDensity));
|
||||
|
||||
+1
-18
@@ -12,12 +12,10 @@ const inputOutputMap = {
|
||||
for (const [inputId, outputId] of Object.entries(inputOutputMap)) {
|
||||
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_600x400.innerHTML = this.value
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -25,11 +23,9 @@ for (const [inputId, outputId] of Object.entries(inputOutputMap)) {
|
||||
const sillyInput = document.getElementById("sillyInput")
|
||||
const sillyNumberValue = document.getElementById("sillyNumberValue")
|
||||
let sillyValues = []
|
||||
let sillyValues_600x400 = []
|
||||
|
||||
for (let i = 0; i < 10; i++) {
|
||||
sillyValues.push(document.getElementById(`sillyValue${i}`))
|
||||
sillyValues_600x400.push(document.getElementById(`sillyValue${i}_600x400`))
|
||||
}
|
||||
|
||||
|
||||
@@ -46,24 +42,20 @@ function setSillyValue(value) {
|
||||
|
||||
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")
|
||||
const picValue = document.getElementById("picValue")
|
||||
const picValue_600x400 = document.getElementById("picValue_600x400")
|
||||
const picUpload = document.getElementById("picUpload")
|
||||
const customPicOption = document.getElementById("customPic")
|
||||
|
||||
@@ -71,7 +63,6 @@ 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) {
|
||||
@@ -79,7 +70,6 @@ function setPictureValue() {
|
||||
const fileName = file.name
|
||||
let src = URL.createObjectURL(file)
|
||||
picValue.src = src
|
||||
picValue_600x400.src = src
|
||||
customPicOption.innerHTML = `Custom (${fileName})`
|
||||
}
|
||||
else {
|
||||
@@ -92,13 +82,9 @@ picUpload.oninput = function() { setPictureValue() }
|
||||
|
||||
picInput.oninput = function() { setPictureValue() }
|
||||
|
||||
function prependZero(number) {
|
||||
return number < 10 ? "0" + number : number
|
||||
}
|
||||
|
||||
|
||||
function generateLicense() {
|
||||
const element = document.getElementById("licenseContainer_600x400")
|
||||
const element = document.getElementById("licenseContainer")
|
||||
|
||||
html2canvas(element).then(canvas => {
|
||||
const link = document.createElement("a");
|
||||
@@ -113,14 +99,11 @@ function onLoadLicense() {
|
||||
for (const [inputId, outputId] of Object.entries(inputOutputMap)) {
|
||||
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_600x400.innerHTML = inputElement.value
|
||||
}
|
||||
}
|
||||
|
||||
if (sillyInput) {
|
||||
setSillyValue(sillyInput.value)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
CURRENT_PAGE = PAGES.LICENSE
|
||||
|
||||
|
||||
function loadingScreenLicense() {
|
||||
setLoadingProgress("Preparing license...")
|
||||
|
||||
const VMAP = {
|
||||
title: "titleValue",
|
||||
user: "authorValue",
|
||||
issued: "createdValue",
|
||||
expires: "expireValue",
|
||||
identity: "genderValue",
|
||||
signature: "signatureValue",
|
||||
img: "picValue"
|
||||
}
|
||||
|
||||
function getE(e) { return document.getElementById(e) }
|
||||
|
||||
license.titleE = getE(VMAP.title)
|
||||
license.userE = getE(VMAP.user)
|
||||
license.issuedE = getE(VMAP.issued)
|
||||
license.expiresE = getE(VMAP.expires)
|
||||
license.identityE = getE(VMAP.identity)
|
||||
license.signatureE = getE(VMAP.signature)
|
||||
license.imgE = getE(VMAP.img)
|
||||
|
||||
for (let i = 0; i < 10; i++) {
|
||||
license.sillyValues.push(document.getElementById(`sillyValue${i}`))
|
||||
}
|
||||
|
||||
setLoadingProgress("Preparing options...")
|
||||
prepInputs()
|
||||
updLicense();
|
||||
scaleDisplayLicense();
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
.allContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(4px * var(--pxDensity));
|
||||
height: calc(100vh - calc(25px * var(--pxDensity)));
|
||||
}
|
||||
.blackBorderRect {
|
||||
|
||||
Reference in New Issue
Block a user