diff --git a/QRCode.html b/QRCode.html
index 6417e9f..754344e 100644
--- a/QRCode.html
+++ b/QRCode.html
@@ -39,6 +39,12 @@
box-sizing: border-box;
}
+ .button-group {
+ display: flex;
+ gap: 10px;
+ margin-bottom: 20px;
+ }
+
button {
background-color: #4CAF50;
color: white;
@@ -53,6 +59,19 @@
background-color: #45a049;
}
+ button.copy-button {
+ background-color: #2196F3;
+ }
+
+ button.copy-button:hover {
+ background-color: #1976D2;
+ }
+
+ button:disabled {
+ background-color: #cccccc;
+ cursor: not-allowed;
+ }
+
.qr-container {
margin-top: 20px;
display: flex;
@@ -64,20 +83,32 @@
#qrcode {
display: flex;
justify-content: center;
- width: 256px; /* Match the QR code size */
+ width: 256px;
}
#qrcode img {
- display: block; /* Remove any potential inline spacing */
+ display: block;
}
#qrLabel {
font-weight: bold;
text-align: center;
- max-width: 256px; /* Match the QR code width */
+ max-width: 256px;
word-wrap: break-word;
}
+ .copy-status {
+ color: #4CAF50;
+ font-size: 14px;
+ margin-top: 5px;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ }
+
+ .copy-status.visible {
+ opacity: 1;
+ }
+
@media (max-width: 600px) {
body {
padding: 10px;
@@ -99,7 +130,13 @@
-
+
+
+
+
+ Copied to clipboard!
@@ -135,6 +172,40 @@
// Update label
const labelDiv = document.getElementById('qrLabel');
labelDiv.textContent = label || '';
+
+ // Enable copy button after QR code is generated
+ document.getElementById('copyButton').disabled = false;
+ }
+
+ async function copyQRToClipboard() {
+ try {
+ const qrImage = document.querySelector('#qrcode img');
+ if (!qrImage) return;
+
+ // Create a canvas and draw the QR code on it
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ canvas.width = qrImage.width;
+ canvas.height = qrImage.height;
+ ctx.drawImage(qrImage, 0, 0);
+
+ // Convert canvas to blob
+ const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
+
+ // Create ClipboardItem and copy to clipboard
+ const item = new ClipboardItem({ 'image/png': blob });
+ await navigator.clipboard.write([item]);
+
+ // Show success message
+ const copyStatus = document.getElementById('copyStatus');
+ copyStatus.classList.add('visible');
+ setTimeout(() => {
+ copyStatus.classList.remove('visible');
+ }, 2000);
+ } catch (err) {
+ console.error('Failed to copy:', err);
+ alert('Failed to copy QR code. Your browser might not support this feature.');
+ }
}