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

added customizable colors for the BG, borders, & text

Browse Source
This commit is contained in:
ByteDice
2026-06-30 17:37:39 +02:00
parent 7d95a8825d
commit f5b0fac23a
7 changed files with 143 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
toys/license/index.html
+17 -6
View File
@@ -72,7 +72,7 @@
<label for="signatureInput">Signature</label><input type="text" id="signatureInput" name="signatureInput" value="Byte Dice">
<label for="picInput">Picture</label><div style="display: inline-flex">
<label for="picInput">Picture</label><div style="display: inline-flex;">
<select id="picInput" name="picInput">
<option value="boykisser" >Boykisser</option>
<option value="bi-kisser" >Bi-kisser</option>
@@ -82,15 +82,26 @@
<option value="bytedice" >Byte Dice</option>
<option value="custom" id="customPic">Custom (upload)</option>
</select>
<label for="picUpload" id="picUploadLabel"><img src="/assets/icons/upload.svg" id="picUploadIcon" draggable="false"></label>
<label for="picUpload" id="picUploadLabel"><img src="/assets/icons/upload.svg" id="bgUploadIcon" draggable="false"></label>
<input type="file" id="picUpload" name="picUpload" accept=".png,.jpg,.jpeg,.webp">
</div>
</form><br>
<!--<h1>Colors</h1><br>
<form class="licenseForm">
<label for="soon1">Soon...</label><input type="text" name="soon1" value="Does nothing"><br>
</form><br>-->
<h1>Colors</h1><br>
<form class="licenseForm licenseFormContainer">
<label for="bgTypeInput" name="bgTypeInput">BG Type</label><div style="display: inline-flex;">
<select id="bgTypeInput", name="bgTypeInput">
<option value="color">Solid Color</option>
<option value="image" id="customBg">Image (upload)</option>
</select>
<label for="bgUpload" id="bgUploadLabel"><img src="/assets/icons/upload.svg" id="bgUploadIcon" draggable="false"></label>
<input type="file" id="bgUpload" name="bgUpload" accept=".png,.jpg,.jpeg,.webp">
</div>
<label for="bgColInput" >Background</label><input type="color" id="bgColInput" name="bgColInput" value="#FFFFFF">
<label for="borderColInput">Borders</label ><input type="color" id="borderColInput" name="borderColInput" value="#000000">
<label for="textColInput" >Text</label ><input type="color" id="textColInput" name="textColInput" value="#000000">
</form><br>
<!--<h1>Advanced</h1><br>
<form class="licenseForm">
toys/license/input.js
+41 -5
View File
@@ -10,39 +10,57 @@ let jsonData = {
img: {
preset: "boykisser",
file: ""
}
},
bg: {
type: "color",
color: "#FFFFFF",
file: ""
},
border: "#000000",
text: "#000000"
}
const customPicOption = document.getElementById("customPic")
const customBgOption = document.getElementById("customBg")
// funny size sorting
const VMAP = {
bg: "bgTypeInput",
img: "picInput",
user: "authorInput",
text: "textColInput",
title: "titleInput",
silly: "sillyInput",
bgCol: "bgColInput",
issued: "createdInput",
border: "borderColInput",
expires: "expireInput",
identity: "identityInput",
bgUpload: "bgUpload",
signature: "signatureInput",
imgUpload: "picUpload"
imgUpload: "picUpload",
}
async function prepInputs() {
function getE(e) { return document.getElementById(e) }
getE(VMAP.bg) .oninput = async function() { jsonData.bg.type = this.value; await updLicense() }
getE(VMAP.img) .oninput = async function() { jsonData.img.preset = this.value; await updLicense() }
getE(VMAP.user) .oninput = async function() { jsonData.user = this.value; await updLicense() }
getE(VMAP.text) .oninput = async function() { jsonData.text = this.value; await updLicense() }
getE(VMAP.title) .oninput = async function() { jsonData.title = this.value; await updLicense() }
getE(VMAP.silly) .oninput = async function() { jsonData.silly = parseInt(this.value); await updLicense() }
getE(VMAP.bgCol) .oninput = async function() { jsonData.bg.color = this.value; await updLicense() }
getE(VMAP.issued) .oninput = async function() { jsonData.issued = this.value; await updLicense() }
getE(VMAP.border) .oninput = async function() { jsonData.border = this.value; await updLicense() }
getE(VMAP.expires) .oninput = async function() { jsonData.expires = this.value; await updLicense() }
getE(VMAP.identity) .oninput = async function() { jsonData.identity = this.value; await updLicense() }
getE(VMAP.signature).oninput = async function() { jsonData.signature = this.value; await updLicense() }
getE(VMAP.imgUpload).oninput = async function() {
getE(VMAP.imgUpload).onchange = async function() {
if (this.files.length == 0) { return; }
let f = this.files[0]
jsonData.img.file = URL.createObjectURL(f)
@@ -50,6 +68,15 @@ async function prepInputs() {
await updLicense()
}
getE(VMAP.bgUpload).onchange = async function() {
if (this.files.length == 0) { return; }
let f = this.files[0]
jsonData.bg.file = URL.createObjectURL(f)
customBgOption.innerHTML = `Image (${f.name})`
await updLicense()
}
}
@@ -68,10 +95,16 @@ async function importFromB64(b64) {
try {
let str = atob(b64)
data = JSON.parse(str)
let isValid = validateJSON_v0(data)
let isValid
switch (data.version) {
case 0: isValid = validateJSON_v0(data); break
}
if (isValid != true)
{ alert("Invalid data string imported (Invalid fields). Full results:\n" + isValid.join("\n")); return }
// TODO: make this not replace if the key doesnt exist
jsonData = data
// make sure to add this since it isnt exported
jsonData.img = { preset: "boykisser", file: "" }
@@ -85,14 +118,17 @@ async function importFromB64(b64) {
function makeOptionsTheSameAsJSON() {
function getE(e) { return document.getElementById(e) }
getE(VMAP.img).value = jsonData.img.preset
getE(VMAP.user).value = jsonData.user
getE(VMAP.text).value = jsonData.text
getE(VMAP.title).value = jsonData.title
getE(VMAP.silly).value = jsonData.silly
getE(VMAP.bgCol).value = jsonData.bg.color
getE(VMAP.issued).value = jsonData.issued
getE(VMAP.border).value = jsonData.border
getE(VMAP.expires).value = jsonData.expires
getE(VMAP.identity).value = jsonData.identity
getE(VMAP.signature).value = jsonData.signature
getE(VMAP.img).value = jsonData.img.preset
}
toys/license/license.css
+18 -29
View File
@@ -1,3 +1,10 @@
:root {
--licenseBgCol: #FFFFFF;
--licenseBorderCol: #000000;
--licenseTextCol: #000000;
--licenseScribbleCol: #FF0000; /* cannot get this to work */
}
.sans {
font-family: "Comic Neue", serif;
font-weight: 400;
@@ -19,8 +26,8 @@ h2 {
.sillyBar {
width: auto;
height: auto;
background-color: #000000;
border: 3px solid black;
background-color: var(--licenseBorderCol);
border: 3px solid var(--licenseBorderCol);
border-radius: 8px;
align-self: center;
display: flex;
@@ -38,7 +45,7 @@ h2 {
}
.off {
background-image: none;
background-color: #FFFFFF;
background-color: var(--licenseBgCol);
}
.sillyValue:first-child {
border-radius: 5px 0px 0px 5px;
@@ -55,6 +62,10 @@ h2 {
display: grid;
grid-template-columns: repeat(2, auto);
grid-template-rows: repeat(2, auto);
background-color: var(--licenseBgCol);
border: 10px var(--licenseBorderCol) solid;
border-radius: 32px;
color: var(--licenseTextCol);
}
#picContainer {
width: 150px;
@@ -63,6 +74,7 @@ h2 {
overflow: hidden;
background-color: transparent;
border-radius: 32px;
border: 10px var(--licenseBorderCol) solid;
}
#picValue {
width: 100%;
@@ -75,7 +87,7 @@ h2 {
bottom: 12px;
left: 0%;
margin: 0% 0% 0% 20px;
color: var(--navBarBtn_Inner);
color: var(--licenseTextCol);
font-size: 0.6rem;
}
#signatureContainer, #DsignatureContainer {
@@ -89,7 +101,7 @@ h2 {
font-size: 1.5rem;
}
#signHere {
border-top: #000000 solid 6px;
border-top: var(--licenseBorderCol) solid 6px;
margin: 0%;
padding: 0% 25px;
text-align: center;
@@ -98,29 +110,6 @@ h2 {
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 {
grid-area: 1 / 1 / 2 / 3;
font-size: 2rem;
@@ -133,6 +122,6 @@ h2 {
bottom: 12px;
right: 0%;
margin: 0% 30px 0% 0%;
color: var(--navBarBtn_Inner);
color: var(--licenseTextCol);
font-size: 0.6rem;
}
toys/license/license.js
+9
View File
@@ -6,6 +6,7 @@ class License {
this.idE = undefined
this.imgE = undefined
this.userE = undefined
this.baseE = undefined // for bg
this.titleE = undefined
this.issuedE = undefined
this.expiresE = undefined
@@ -29,6 +30,14 @@ class License {
this.setSillyValue(json.silly)
this.setImgValue(json.img)
if (json.bg.type == "image")
{ this.baseE.style.backgroundImage = `url("${json.bg.file}")` }
else { this.baseE.style.backgroundImage = "" }
document.documentElement.style.setProperty("--licenseBgCol", json.bg.color)
document.documentElement.style.setProperty("--licenseBorderCol", json.border)
document.documentElement.style.setProperty("--licenseTextCol", json.text)
let hash = await sha256(JSON.stringify(json))
this.idE.textContent = "NR-ID: " + hash.slice(0, 16)
}
toys/license/options.css
+46 -8
View File
@@ -71,7 +71,7 @@
filter: brightness(1.35);
cursor: pointer;
}
.slider::-webkit-slider-thumb, .slider::-moz-range-thumb {
.slider::-moz-range-thumb {
-webkit-appearance: none;
appearance: none;
background-color: var(--navBar_Inner);
@@ -81,6 +81,16 @@
width: calc(3px * var(--pxDensity));
height: calc(3px * var(--pxDensity));
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background-color: var(--navBar_Inner);
border: none;
cursor: pointer;
border-radius: 0%;
width: calc(3px * var(--pxDensity));
height: calc(3px * var(--pxDensity));
}
.sliderDiv {
background-color: var(--navBarBtn_Inner);
box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
@@ -93,6 +103,7 @@
font-size: inherit;
margin: calc(3px * var(--pxDensity)) calc(2px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: 100%;
height: calc(6px * var(--pxDensity));
color: inherit;
align-items: center;
@@ -147,8 +158,7 @@ select {
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%;
width: 100%;
height: round(auto, var(--pxDensity));
color: inherit;
display: inline-block;
@@ -164,26 +174,27 @@ input[type=file] {
overflow: hidden; */
display: none;
}
#picInput {
#picInput, #bgTypeInput {
height: calc(6px * var(--pxDensity));
margin-right: calc(3px * var(--pxDensity));
}
#picUploadLabel {
#picUploadLabel, #bgUploadLabel {
height: calc(6px * var(--pxDensity));
aspect-ratio: 1 / 1;
width: auto;
background-image: url(/assets/icons/upload.svg);
display: inline-flex;
margin-right: calc(2px * var(--pxDensity));
}
#picUploadLabel:hover {
#picUploadLabel:hover, #bgUploadLabel:hover {
filter: brightness(1.35);
cursor: pointer;
}
#picUploadLabel:active {
#picUploadLabel:active, #bgUploadLabel:active {
filter: brightness(0.75);
transform: translateY(calc(1px * var(--pxDensity)));
}
#picUploadIcon {
#picUploadIcon, #bgUploadIcon {
height: calc(4px * var(--pxDensity));
aspect-ratio: 1 / 1;
width: auto;
@@ -218,4 +229,31 @@ form {
width: auto;
display: inline-block;
margin: auto 0%;
}
input[type="color"] {
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: 0;
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));
height: calc(6px * var(--pxDensity));
color: inherit;
display: inline-block;
}
input[type="color"]::-moz-color-swatch {
border: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
border-radius: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
}
toys/license/script.js
+12 -9
View File
@@ -5,26 +5,28 @@ async function loadingScreenLicense() {
setLoadingProgress("Preparing license...")
const VMAP = {
title: "titleValue",
id: "hashID",
img: "picValue",
user: "authorValue",
base: "licenseContainer",
title: "titleValue",
issued: "createdValue",
expires: "expireValue",
identity: "genderValue",
signature: "signatureValue",
img: "picValue",
id: "hashID"
signature: "signatureValue"
}
function getE(e) { return document.getElementById(e) }
license.titleE = getE(VMAP.title)
license.idE = getE(VMAP.id)
license.imgE = getE(VMAP.img)
license.userE = getE(VMAP.user)
license.baseE = getE(VMAP.base)
license.titleE = getE(VMAP.title)
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)
license.idE = getE(VMAP.id)
for (let i = 0; i < 10; i++) {
license.sillyValues.push(document.getElementById(`sillyValue${i}`))
@@ -32,6 +34,7 @@ async function loadingScreenLicense() {
setLoadingProgress("Preparing options...")
prepInputs()
await updLicense();
scaleDisplayLicense();
makeOptionsTheSameAsJSON()
scaleDisplayLicense()
await updLicense()
}