fix copy support

Signed-off-by: Daniel Hardman <[email protected]>

assets/css/style.scss

@@ -71,5 +71,21 @@ button:hover {
     background-color: #baa8a1;
 }
 label.copier {
+    background-repeat: no-repeat;
+    background-position: right bottom 4px;
     background-image: url("{{ site.baseurl }}/assets/copy-icon.png");
+}
+@keyframes copiedAnimation {
+    0% {
+        background-color: initial; /* Start with the initial color */
+    }
+    50% {
+        background-color: #ecd1c1; /* At 50%, the background becomes beige */
+    }
+    100% {
+        background-color: initial; /* Return to the original color */
+    }
+}
+.copied {
+    animation: copiedAnimation 0.5s ease-in-out;
 }

form.html

@@ -69,11 +69,17 @@
       return;
     }
     // Copy the value of the element with the ID specified in the "for" attribute
-    const forAttribute = this.getAttribute('for');
-    const targetElement = document.getElementById(forAttribute);
-    const value = targetElement.value;
+    const forAttr = this.getAttribute('for');
+    const target = document.getElementById(forAttr);
+    const value = target.value;
     navigator.clipboard.writeText(value).then(() => {
         console.log('Value copied to clipboard:', value);
+        // Add the animation class to the textarea
+        target.classList.add('copied');
+        // Remove the animation class after the animation ends (0.5s in this case)
+        setTimeout(function() {
+          target.classList.remove('copied');
+        }, 500);
       })
       .catch((error) => {
         console.error('Failed to copy value to clipboard:', error);
@@ -84,5 +90,5 @@
   // Add event listener to each label
   labels.forEach(label => {
     label.addEventListener('click', copyValue);
-  });  
+  });
 </script>