From 5bb115e28184760e4adcc7d40130fa38b4e673e1 Mon Sep 17 00:00:00 2001 From: Byte Dice Date: Sat, 25 Jan 2025 21:42:23 +0100 Subject: [PATCH] made HTML->PNG conversion for the license --- assets/icons/download.svg | 1 + assets/icons/upload.svg | 15 +-------- assets/scribble_32x32.png | Bin 0 -> 2221 bytes toys/license/600x400_license.css | 34 ++++++++++--------- toys/license/index.html | 33 ++++++++++++++++-- toys/license/license.css | 39 +++++++++++++-------- toys/license/options.css | 22 ++++++++++++ toys/license/script.js | 56 +++++++++++++++++++++---------- 8 files changed, 138 insertions(+), 62 deletions(-) create mode 100644 assets/icons/download.svg create mode 100644 assets/scribble_32x32.png diff --git a/assets/icons/download.svg b/assets/icons/download.svg new file mode 100644 index 0000000..0db176d --- /dev/null +++ b/assets/icons/download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/upload.svg b/assets/icons/upload.svg index e40f849..f2ce5cf 100644 --- a/assets/icons/upload.svg +++ b/assets/icons/upload.svg @@ -1,14 +1 @@ - - - - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/assets/scribble_32x32.png b/assets/scribble_32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..b37150a317b8b68b7d87d31fbeb0fed367c91c0c GIT binary patch literal 2221 zcmV;e2vYZnP)!NdSiF@JuQxt>)LH z;5&R6!4N{2l9_ESWfybk8b6OzP4N&Hy}H+Rj8H+f8Q|+9o@Ewyi06sZTaG1ok9dfc zE@~=<%0ep35u%e$i7Zwz1O2ti%oCN#dxXS6K5r;wE9$T**=% zr8Nc{8KjVe1O*jrLWhGmWs_#s*_UYemQf}TqrZhJI5~bjrfKyV+Z*If7a)OG7;K;Q+qHe3EO&1vqN^jb@c9s`jb;PR%W zDF?vSE-?IT$y{zo0a|`d13oT*fjlsH5A?5lvuf_+{0Ycy(-YkRheyB!)kik|01n4! z5!imhf&c&j32;bRa{vGjVE_ORVF9Q=r)dBH2I5IXK~z{reV12=7E2I?&%drY=d6o4 zXMGU$K~#*036)jxK}A8ufM8}(R8SBU#RmmZ^u>S?bIw^r%sJ*Q@J7pUK21sw-NPquIK_KPNFMaza<;^Qqu59z{tyN39 zb4R*xLCTfOE=G?Y(%7-tW#)KG)yI!gzI;-(YVoJJbESg^r9Xd685f2;c_Ni7C*{s9 zZQm}vdL<jvb}_`^{rKnJ_{6 z{8@VX)aKs3lXmQoUc9h(Mrx|v`F7@vv~;Odv7(fo{%<3~@2Q$TU24@znl(#0e%yrO z1p*K}e7N-MmmyHJXl#g!#_Q(IrRUG3+qW%DtOLEqjsM?(DO02sDx^(iS?Q79Ox_{rE z!?lT^efuEVkSC9E0S~TRF~uJ~NZ-F3B6!3g<|yye$G)9CYjb7FNCgWTLKy7CWnZse zQupo_PM24pXXh6q~L8N%0OGZ>YBnv83 zFvHMxelzhj2wgckVP} z@O;P+gB;}$_R%9nX-ybW&Xrt4Mvam>bdXM*Fddm5JIM` zUTvtbj#@BusI+mTaR9zB@RpjuJ``{Va)>>9wp6;bv~s1%q=uY79~w}-dJqv1@87;P z*qvID>WQFE zogjjbiD%C&6nKd@MT%rW6+I6gY_X#dB@bds7O)r3fE~05BhE4S?qT)tggR3rZ-DFi z^|<<_rNwmtFS>M*mMxQ7x0X(y&aNEx6LZib6s(7cZ~;X)hhcC9GLl7vm$jjziJ)!U zAS>nAjOQ$HUO-S{?V)k?pwys&ttIu?i!$Cp!RrRZ^-KaqjAgJVL@710603-@=R1NR z%%n+D|NaJ@4;1kYlrV~TGEm6%`gOb(_#vVjfYBfYLYX5aVr|QoW7m91LO~ z+$mN}x_MK2@W8SndEiXA-wtwed&`!Xc!Yx(qX5XT9>HV_^@0JJI0->3xi5epb?X{p zcntfK3GCs_MANbW3sHiXq}t@k(wa5an6QEP!CC|nQ#O-kPCRd3YSuL6B}zy)Zb%m| z+M(vd%Q|<`HZU5U&vm(;*|?bKaA~7~vP|NXdHjq}sKuJfAw1 zT{&w}%*8WKg(;s1s#FQ0++VoRPBs+Jm|^g-2ne0Ipo4HvS@^&+Cn+5id^vZ{n$s^| z;*4<5JwtF}-MXluNd$ZM2GI${V3LdDl|tmz4MZ9>veS-G!4d8VW*#`1qb0+@oac!v z##o%7oM(=dEagn#tyeU193{k@e17~m<^!n(!yzH1ylYoGA@M$$aLE}Cq1Ug^rW}=- z?QEtwD5RYN0k@j;f@~N9vpaRN*n$wsC{|Uf*r}H@)!fbAy`>Esl9SM$!*eAzfOeXE zzI7`mikD`rU%c25fg{X=)acRHjM9eZsArJ^AV)47$vKuRiMV10uxR{vE3ICHJl}zz z#mUMM3_sem$=<9ccTlXEKR;GZKQLyDAqT3N&1oVydNk0yd8Qn;JG8)#a=c4ce)q0) z=uq4@B$sRt8O#||W|)^_2!{}q!V@YXp7`Mc zNh#0lZ`jZ(A_p6V?!WJmUcMeC=9;jC}6f*F1Exd5gtaKygAb&tBKb z4vZr`i8B{{ + +
@@ -126,7 +130,18 @@

Expires

never

Identity

unknown

Silly

-
+
+
+
+
+
+
+
+
+
+
+
+
@@ -154,7 +169,18 @@

Expires

never

Identity

unknown

Silly

-
+
+
+
+
+
+
+
+
+
+
+
+
@@ -164,6 +190,9 @@
+ + + diff --git a/toys/license/license.css b/toys/license/license.css index 9784032..7b7d6f7 100644 --- a/toys/license/license.css +++ b/toys/license/license.css @@ -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; diff --git a/toys/license/options.css b/toys/license/options.css index 1c6a82b..591fa92 100644 --- a/toys/license/options.css +++ b/toys/license/options.css @@ -166,4 +166,26 @@ 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%; } \ No newline at end of file diff --git a/toys/license/script.js b/toys/license/script.js index cc7f48f..d2c76f3 100644 --- a/toys/license/script.js +++ b/toys/license/script.js @@ -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)