From: Ardis Lu <ardisglu@gmail.com>
Date: Fri, 30 Jun 2023 04:47:53 +0000 (-0700)
Subject: Add "Copied!" popover on copy
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=6f4d1d869b5fa9709271abf73e78648f7b2ca015;p=static-encrypt

Add "Copied!" popover on copy
---

diff --git a/index.html b/index.html
index d832564..7c4401a 100644
--- a/index.html
+++ b/index.html
@@ -107,6 +107,31 @@
       margin-block-end: 16px;
     }
 
+    .copied {
+      position: relative;
+    }
+
+    .copied::before {
+      content: '';
+      position: absolute;
+      inset-inline-start: calc(100% - 4px);
+      inset-block-start: calc(50% - 4px);
+      inline-size: 10px;
+      block-size: 10px;
+      background: hsl(216deg 50% 90%);
+      clip-path: polygon(0 50%, 100% 0, 100% 100%);
+    }
+
+    .copied::after {
+      content: 'Copied!';
+      position: absolute;
+      inset-inline-start: calc(100% + 4px);
+      font-weight: 700;
+      background: hsl(216deg 50% 90%);
+      padding: 8px;
+      border-radius: 4px;
+    }
+
     footer {
       margin-block: 24px 16px;
     }
@@ -202,10 +227,13 @@
       setOutput(encrypted);
     });
 
-    document.querySelector('#copy').addEventListener('click', e => {
+    const copyButton = document.querySelector('#copy');
+    copyButton.addEventListener('click', e => {
       e.preventDefault();
       const ciphertext = document.querySelector('#ciphertext').textContent;
       navigator.clipboard.writeText(ciphertext);
+      copyButton.classList.add('copied');
+      setTimeout(() => copyButton.classList.remove('copied'), 2000);
     })
 
     document.querySelector('#download').addEventListener('click', e => {