From 982d47ce83b518e5f57546b523384603e00f25b9 Mon Sep 17 00:00:00 2001
From: Byte Dice <bytedice.official@gmail.com>
Date: Thu, 23 Jan 2025 20:33:21 +0100
Subject: [PATCH] added upload button logic

---
 .vscode/settings.json    |  3 +++
 assets/icons/upload.svg  | 14 ++++++++++++++
 toys/license/index.html  | 40 ++++++++++++++++++++++++----------------
 toys/license/license.css | 18 +++++++++++++++---
 toys/license/options.css | 39 +++++++++++++++++++++++++++++++++------
 toys/license/script.js   | 21 +++++++++++++++++++--
 toys/license/style.css   |  3 ++-
 7 files changed, 110 insertions(+), 28 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 assets/icons/upload.svg

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..c69783a
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "svg.preview.background": "transparent"
+}
\ No newline at end of file
diff --git a/assets/icons/upload.svg b/assets/icons/upload.svg
new file mode 100644
index 0000000..e40f849
--- /dev/null
+++ b/assets/icons/upload.svg
@@ -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>
\ No newline at end of file
diff --git a/toys/license/index.html b/toys/license/index.html
index 1af39c0..628fb8c 100644
--- a/toys/license/index.html
+++ b/toys/license/index.html
@@ -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>
+            <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>
diff --git a/toys/license/license.css b/toys/license/license.css
index f75e62e..ecdbe72 100644
--- a/toys/license/license.css
+++ b/toys/license/license.css
@@ -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;
diff --git a/toys/license/options.css b/toys/license/options.css
index aefd0bf..1c6a82b 100644
--- a/toys/license/options.css
+++ b/toys/license/options.css
@@ -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);
@@ -139,4 +140,30 @@ select {
   height: round(auto, var(--pxDensity));
   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;
 }
\ No newline at end of file
diff --git a/toys/license/script.js b/toys/license/script.js
index 66c73f4..a3250c7 100644
--- a/toys/license/script.js
+++ b/toys/license/script.js
@@ -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` : ""
-  picValue.src = src
+  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) {
diff --git a/toys/license/style.css b/toys/license/style.css
index 48786a6..56a7e06 100644
--- a/toys/license/style.css
+++ b/toys/license/style.css
@@ -11,8 +11,9 @@
 }
 a {
   cursor: pointer;
-  color: #1010da;
+  color: #0000EE;
   text-decoration: underline;
+  font-weight: normal;
 }
 a:visited {
   color: #551A8B;