diff --git a/README.md b/README.md index b234d7c..5836066 100644 --- a/README.md +++ b/README.md @@ -14,5 +14,6 @@ * [ ] Fix turn server settings to work on all servers * [ ] Fix edge cases * [x] DaisyUI redesign -* [ ] QRCode +* [x] QRCode +* [ ] More cleaning * [ ] Multiple files diff --git a/eslint.config.mjs b/eslint.config.mjs index 8e59ddc..63663a1 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -11,6 +11,7 @@ export default [ ...globals.browser, Peer: "readonly", lucide: "readonly", + QRCode: "readonly", }, }, }, diff --git a/index.html b/index.html index 1bd5fec..687082b 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ + @@ -63,6 +64,8 @@ +
+
{{ shareText }}
diff --git a/main.js b/main.js index 527669d..5a5301d 100644 --- a/main.js +++ b/main.js @@ -10,6 +10,16 @@ const utils = { }, }); }, + makeQrCode(element, text) { + return new QRCode(element, { + text, + width: 1024, + height: 1024, + colorDark: "#ffffff", + colorLight: "#00000000", + correctLevel: QRCode.CorrectLevel.L, + }); + }, userAgent(raw) { // https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Browser_detection_using_the_user_agent#which_part_of_the_user_agent_contains_the_information_you_are_looking_for const userAgents = [ @@ -341,6 +351,7 @@ const app = createApp({ this.error = null; if (this.isServer) { this.server.url = `${window.location.href}?s=${id}`; + utils.makeQrCode(this.$refs.qrcode, this.server.url); } else { this.clientOpenConnection(); } diff --git a/style.css b/style.css index aa72464..013bfd0 100644 --- a/style.css +++ b/style.css @@ -20,3 +20,10 @@ h6 .lucide { .hero { background-image: url(./background.jpg); } + +#qrcode img, +#qrcode canvas { + object-fit: fill; + aspect-ratio: 1 / 1; + width: 100%; +}