From 790ac71407a7b463b552d919173a5dfb93b99f26 Mon Sep 17 00:00:00 2001 From: Benjamin da Silva Moreira Date: Sat, 3 Jan 2026 12:44:33 +0100 Subject: [PATCH] Added color picker --- .idea/.gitignore | 3 +++ .idea/asn-qr-code-label-generator.iml | 9 +++++++++ .idea/misc.xml | 6 ++++++ .idea/modules.xml | 8 ++++++++ .idea/vcs.xml | 6 ++++++ index.html | 29 +++++++++++++++++++++++++-- 6 files changed, 59 insertions(+), 2 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/asn-qr-code-label-generator.iml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..26d3352 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,3 @@ +# Default ignored files +/shelf/ +/workspace.xml diff --git a/.idea/asn-qr-code-label-generator.iml b/.idea/asn-qr-code-label-generator.iml new file mode 100644 index 0000000..d6ebd48 --- /dev/null +++ b/.idea/asn-qr-code-label-generator.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..69ace3f --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..2989988 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 5739b5d..1d21f45 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,10 @@ size: A4; } } + + .colorPicker { + height: 42px; + } @@ -154,6 +158,20 @@ value="5" min="0" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" + /> + +
+ +
@@ -225,6 +243,7 @@ 'text-[2.4mm]': label.text.length == 9, 'text-[2.1mm]': label.text.length >= 10, }" + :style="'color: ' + color" x-text="label.text" >
@@ -261,6 +280,7 @@ startNumber: 1, prefix: "ASN", leadingZeros: 4, + color: "#000000", borderToggle: false, labels: [], @@ -277,16 +297,20 @@ const val = parseInt(params.get("leadingZeros"), 10); if (!isNaN(val) && val >= 0) this.leadingZeros = val; } + if (params.has("color")) { + const val = params.get("color"); + } if (params.has("borderToggle")) { this.borderToggle = params.get("borderToggle") === "true"; } }, - updateUrl() { + updateUrl() { const params = new URLSearchParams(); params.set("startNumber", this.startNumber); params.set("prefix", this.prefix); params.set("leadingZeros", this.leadingZeros); + params.set("color", this.color); params.set("borderToggle", this.borderToggle); const newUrl = `${window.location.pathname}?${params.toString()}`; window.history.replaceState({}, "", newUrl); @@ -303,8 +327,9 @@ .toString() .padStart(leadingZerosInt + 1, "0"); let text = this.prefix + paddedNumber; + let color = this.color.replace("#", ""); // See https://goqr.me/api/doc/create-qr-code/ - let qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent( + let qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&color=${color}&data=${encodeURIComponent( text )}`;