copy to word btn

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 @@
             <input type="text" id="label" placeholder="Enter label for the QR code">
         </div>
 
-        <button onclick="generateQR()">Generate QR Code</button>
+        <div class="button-group">
+            <button onclick="generateQR()">Generate QR Code</button>
+            <button class="copy-button" onclick="copyQRToClipboard()" id="copyButton" disabled>
+                Copy for Word
+            </button>
+        </div>
+        <div class="copy-status" id="copyStatus">Copied to clipboard!</div>
 
         <div class="qr-container">
             <div id="qrcode"></div>
@@ -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.');
+            }
         }
     </script>
 </body>