fix: show notification banner on successful copy

Author: felixindrawan

VINScanner/index.html

@@ -166,6 +166,7 @@
         margin-top: 1rem;
         width: -moz-fit-content;
         width: fit-content;
+        z-index: 2;
 
         /* Fade in animation */
         opacity: 0;
@@ -253,7 +254,7 @@ <h3 id="camera-view-title">VIN Scanner</h3>
           </div>
           <h3 id="scan-title"></h3>
           <div style="display: flex; justify-content: center">
-            <h3 id="notification">Test</h3>
+            <h3 id="notification"></h3>
           </div>
         </div>
       </div>
@@ -517,6 +518,7 @@ <h3 style="margin: 0">Result</h3>
             settingsModal.style.display = "none";
 
             // Show success notification on scan mode switch
+            notification.className = "";
             notification.classList.add("banner-success");
             notification.innerText = `Now ${SCAN_MODE_TITLES[mode]}`;
             // Fade in animation for notificaiton
@@ -590,14 +592,29 @@ <h3 style="margin: 0">Result</h3>
       copyResultButton.addEventListener("click", () => {
         const results = document.querySelector("#results").innerText;
 
+        // Reset notification
+        notification.className = "";
+
         navigator.clipboard
           .writeText(results)
           .then(function () {
-            console.log("Result copied successfully!");
+            // Show notification that the result is copied
+            notification.classList.add("banner-success");
+            notification.innerText = `Result copied successfully!`;
           })
           .catch((ex) => {
             let errMsg = ex.message || ex;
             console.error("Failed to copy result", errMsg);
+            // Show notification that copy failed
+            notification.classList.add("banner-error");
+            notification.innerText = `Failed to copy result.`;
+          })
+          .finally(() => {
+            // Fade in animation for notificaiton
+            notification.style.opacity = 1;
+            setTimeout(function () {
+              notification.style.opacity = 0;
+            }, 5000);
           });
       });