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%;
+}