Add "Copy QR Code" button with clipboard support

Implemented a copy-to-clipboard button for QR codes, including Blazor logic for feedback and disabled states. Injected IJSRuntime for JS interop and added supporting JS functions for image copying and fallback download. Reduced QR code image size for better compatibility. Added responsive and accessible CSS for the new button. Cleaned up timers and feedback state on component disposal.

QRPay/Pages/Home.razor.css

@@ -174,6 +174,63 @@
     background: rgba(74, 124, 89, 0.2);
 }
 
+/* Copy Button Styles */
+.btn-copy {
+    background: rgba(16, 185, 129, 0.1);
+    color: #065f46;
+    border: 2px solid #10b981;
+    padding: 12px 20px;
+    border-radius: 10px;
+    font-size: 0.95rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    margin-top: 16px;
+    min-height: 48px;
+    width: auto;
+    max-width: 200px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.btn-copy:hover:not(:disabled) {
+    background: rgba(16, 185, 129, 0.15);
+    border-color: #059669;
+    color: #047857;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
+}
+
+.btn-copy:active:not(:disabled) {
+    transform: translateY(0);
+    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15);
+}
+
+.btn-copy:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.btn-copy.copying {
+    background: rgba(16, 185, 129, 0.05);
+    border-color: #6ee7b7;
+    color: #059669;
+}
+
+.copy-spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid rgba(6, 95, 70, 0.3);
+    border-radius: 50%;
+    border-top-color: #065f46;
+    animation: spin 1s ease-in-out infinite;
+}
+
 .spinner {
     width: 20px;
     height: 20px;
@@ -230,6 +287,8 @@
     max-width: 100%;
     height: auto;
     aspect-ratio: 1;
+    display: block;
+    margin: 0 auto 16px auto;
 }
 
 /* Payment Details */
@@ -323,6 +382,12 @@
     .form-control {
         font-size: 16px; /* Prevents zoom on iOS */
     }
+    
+    .btn-copy {
+        font-size: 0.9rem;
+        padding: 10px 16px;
+        max-width: 180px;
+    }
 }
 
 /* Portrait tablets and large phones */
@@ -376,6 +441,13 @@
         height: 240px;
     }
     
+    .btn-copy {
+        font-size: 0.85rem;
+        padding: 10px 14px;
+        max-width: 160px;
+        margin-top: 12px;
+    }
+    
     .payment-details {
         padding: 20px;
         margin-bottom: 24px;
@@ -471,6 +543,13 @@
         height: 200px;
     }
     
+    .btn-copy {
+        font-size: 0.8rem;
+        padding: 8px 12px;
+        max-width: 140px;
+        margin-top: 10px;
+    }
+    
     .payment-details {
         padding: 16px;
         margin-bottom: 20px;
@@ -518,6 +597,12 @@
         height: 180px;
     }
     
+    .btn-copy {
+        font-size: 0.75rem;
+        padding: 8px 10px;
+        max-width: 120px;
+    }
+    
     .form-control {
         padding: 12px 14px;
     }
@@ -557,6 +642,12 @@
         height: 160px;
     }
     
+    .btn-copy {
+        font-size: 0.8rem;
+        padding: 6px 10px;
+        max-width: 110px;
+    }
+    
     .payment-details {
         margin-bottom: 20px;
     }
@@ -565,7 +656,8 @@
 /* Touch improvements for mobile */
 @media (max-width: 768px) {
     .btn-generate:hover,
-    .btn-back:hover {
+    .btn-back:hover,
+    .btn-copy:hover {
         transform: none; /* Disable hover transforms on mobile */
     }
     
@@ -575,8 +667,9 @@
     
     /* Larger touch targets */
     .btn-generate,
-    .btn-back {
-        min-height: 48px; /* WCAG recommended minimum touch target */
+    .btn-back,
+    .btn-copy {
+        min-height: 44px; /* WCAG recommended minimum touch target */
     }
 }
 
@@ -591,7 +684,8 @@
         animation: none;
     }
     
-    .spinner {
+    .spinner,
+    .copy-spinner {
         animation: none;
     }