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

added upload button logic

Browse Source
This commit is contained in:
ByteDice
2025-01-23 20:33:21 +01:00
parent ad49d8d8c6
commit 982d47ce83
7 changed files with 110 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vscode/settings.json
Vendored
+3
View File
@@ -0,0 +1,3 @@
{
"svg.preview.background": "transparent"
}
assets/icons/upload.svg
+14
View File
@@ -0,0 +1,14 @@
<?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>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

toys/license/index.html
+23 -15
View File
@@ -12,6 +12,10 @@
<link rel="stylesheet" href="license.css">
<link rel="stylesheet" href="options.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Yellowtail&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
<title>Byte Dice - Boykisser license</title>
</head>
@@ -28,21 +32,19 @@
<div class="allContainer">
<div id="optionsContainer" class="borderedRect">
<h1 class="optionsCredits h1Top">
Check out the
<a onclick="slideTransition('https://picrew.me/en/image_maker/2310778', event)">original</a> by Chilli!<br>
Boykisser picture presets made by
<a onclick="slideTransition('https://www.deviantart.com/greenbandit2004', event)">greenbandit2004</a>.<br>
Check out the <a onclick="slideTransition('https://picrew.me/en/image_maker/2310778', event)">original</a> by Chilli!<br>
Boykisser picture presets made by <a onclick="slideTransition('https://www.deviantart.com/greenbandit2004', event)">greenbandit2004</a>.<br>
Please contact
<a onclick="slideTransition('https://www.reddit.com/u/RandomPersonDotExe', event)">u/RandomPersonDotExe</a>
or Discord @bytedice for takedown requests.
</h1><br>
<h1>Basic</h1>
<h1>Basic</h1><br>
<form>
<label for="titleInput">Title </label><input type="text" id="titleInput" name="titleInput" value="Boykisser license"><br>
<label for="titleInput">Title</label><input type="text" id="titleInput" name="titleInput" value="Boykisser license"><br>
<label for="authorInput">For/Author</label><input type="text" id="authorInput" name="authorInput" value="Byte Dice"><br>
<label for="createdInput">Issued </label><input type="text" id="createdInput" name="createdInput" value="2025-01-01"><br>
<label for="expireInput">Expires </label><input type="text" id="expireInput" name="expireInput" value="NEVER!!!"><br>
<label for="createdInput">Issued</label><input type="text" id="createdInput" name="createdInput" value="2025-01-01"><br>
<label for="expireInput">Expires</label><input type="text" id="expireInput" name="expireInput" value="NEVER!!!"><br>
<label for="identityInput">Identity</label><input type="text" id="identityInput" name="identityInput" value="any pronouns"><br>
<label for="sillyInput">Silly</label><div id="sillyNumberValue">03</div><div class="sliderDiv">
@@ -59,18 +61,22 @@
<option value="trans-kisser" >Trans-kisser</option>
<option value="bytedice" >Byte Dice</option>
<option value="custom" id="customPic">Custom (upload)</option>
</select><input type="file" id="picUpload" accept=".png,.jpg,.jpeg,.webp"><br>
<!-- picture -->
</form>
<!-- very clean code, nothing to see here (i dont want whitespaces) -->
</select><label
for="picUpload" id="picUploadLabel"><img src="/assets/icons/upload.svg" id="picUploadIcon" draggable="false"></label
><input
type="file" id="picUpload" name="picUpload" accept=".png,.jpg,.jpeg,.webp"
><br>
</form><br>
<h1>Extra</h1>
<h1>Extra</h1><br>
<form>
<!-- decorations like
the QR-code and other "accessories"
-->
</form>
</form><br>
<h1>Advanced</h1>
<h1>Advanced</h1><br>
<form>
<!--
license border radius
@@ -84,7 +90,9 @@
<div id="licenseContainer" class="blackBorderRect">
<h3 id="titleValue">Boykisser license</h3>
<div style="width: max-content;">
<img id="picValue" class="blackBorderRect" src="">
<div id="picContainer" class="blackBorderRect">
<img id="picValue" src="" draggable="false">
</div>
<div id="signatureContainer">
<p id="signatureValue">Byte Dice</p>
toys/license/license.css
+15 -3
View File
@@ -1,4 +1,5 @@
#licenseContainer {
font-family: "Comic Sans MS", "Comic Sans", cursive;
position: relative;
width: 600px;
/* height: 400px; */
@@ -12,10 +13,18 @@
grid-template-columns: repeat(2, auto);
grid-template-rows: repeat(2, auto);
}
#picValue {
#picContainer {
width: 150px;
height: 150px;
display: block;
overflow: hidden;
background-color: #FFFFFF;
}
#picValue {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
#credits {
position: absolute;
@@ -31,9 +40,12 @@
margin: 5% 0% 0% 0%;
}
#signatureValue {
margin: 0% 0% 0.2rem 0%;
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: 1rem;
font-size: 1.2rem;
}
#signHere {
border-top: #000000 solid 6px;
toys/license/options.css
+33 -6
View File
@@ -1,16 +1,16 @@
#optionsContainer {
display: block;
margin: 0% auto;
margin: calc(2px * var(--pxDensity)) auto 0% auto;
width: max-content;
height: auto;
padding: calc(2px * var(--pxDensity));
overflow-y: scroll;
max-width: 100vw;
max-width: min(600px, 100vw);
flex-grow: 1;
}
.optionsCredits {
margin: 0%;
max-width: calc(100% - (5px * var(--pxDensity)));
max-width: calc(100% - (4px * var(--pxDensity)));
}
label {
background-color: var(--navBarBtn_Inner);
@@ -23,9 +23,10 @@ label {
margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%;
box-sizing: border-box;
width: round(auto, var(--pxDensity));
height: round(auto, var(--pxDensity));
height: calc(6px * var(--pxDensity));
}
input {
font-family: "Roboto", sans-serif;
background-color: var(--navBarBtn_Inner);
box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
calc(-1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
@@ -39,7 +40,7 @@ input {
box-sizing: border-box;
/* width: round(auto, var(--pxDensity)); */
width: 50%;
height: round(auto, var(--pxDensity));
height: calc(6px * var(--pxDensity));
color: inherit;
display: inline-block;
}
@@ -120,7 +121,7 @@ h1 {
display: inline-block;
}
.h1Top {
margin-top: calc(2px * var(--pxDensity));
margin-top: 0%;
}
select {
background-color: var(--navBarBtn_Inner);
@@ -140,3 +141,29 @@ select {
color: inherit;
display: inline-block;
}
input[type=file] {
/* height: max-content;
aspect-ratio: 1 / 1;
width: auto;
overflow: hidden; */
display: none;
}
#picInput {
margin-right: calc(3px * var(--pxDensity));
}
#picUploadLabel {
height: calc(6px * var(--pxDensity));
aspect-ratio: 1 / 1;
width: auto;
background-image: url(/assets/icons/upload.svg);
}
#picUploadIcon {
height: calc(4px * var(--pxDensity));
aspect-ratio: 1 / 1;
width: auto;
display: inline-block;
vertical-align: middle;
}
form {
display: inline-block;
}
toys/license/script.js
+18 -1
View File
@@ -48,12 +48,29 @@ function setSillyValue(value) {
const picInput = document.getElementById("picInput")
const picValue = document.getElementById("picValue")
const picUpload = document.getElementById("picUpload")
const customPicOption = document.getElementById("customPic")
function setPictureValue() {
let src = picInput.value != "custom" ? `/assets/boykissers/${picInput.value}.png` : ""
if (picInput.value != "custom") {
let src = `/assets/boykissers/${picInput.value}.png`
picValue.src = src
}
else {
if (picUpload.files.length > 0) {
const file = picUpload.files[0]
const fileName = file.name
picValue.src = URL.createObjectURL(file)
customPicOption.innerHTML = `Custom (${fileName})`
}
else {
customPicOption.innerHTML = "Custom (upload)"
}
}
}
picUpload.oninput = function() { setPictureValue() }
picInput.oninput = function() { setPictureValue() }
function prependZero(number) {
toys/license/style.css
+2 -1
View File
@@ -11,8 +11,9 @@
}
a {
cursor: pointer;
color: #1010da;
color: #0000EE;
text-decoration: underline;
font-weight: normal;
}
a:visited {
color: #551A8B;