Better notifications

Signed-off-by: Daniel Kastl <daniel@georepublic.de>

index.html

@@ -12,10 +12,10 @@ <h1>Meshtastic QR Code Generator</h1>
 
   <form id="meshtasticForm">
     <fieldset>
-      <legend>Generate Configuration</legend>
+      <legend>Share this with others</legend>
 
       <div class="form-group">
-        <button type="button" id="generateConfig">Generate Configuration (QR Code)</button>
+        <canvas id="qrcode"></canvas>
       </div>
 
       <div class="form-group">
@@ -25,7 +25,7 @@ <h1>Meshtastic QR Code Generator</h1>
       </div>
 
       <div class="form-group">
-        <canvas id="qrcode"></canvas>
+        <button type="button" id="generateConfig">Generate Configuration (QR Code)</button>
       </div>
     </fieldset>
 
@@ -136,6 +136,8 @@ <h1>Meshtastic QR Code Generator</h1>
     </fieldset>
   </form>
 
+  <div id="copyNotification" class="hidden">URL copied to clipboard!</div>
+
   <script type="module" src="./src/main.ts"></script>
 </body>
 </html>

src/main.ts

@@ -99,13 +99,29 @@ async function generateConfig(): Promise<void> {
 function copyUrlToClipboard(): void {
   const urlField = document.getElementById('generatedUrl') as HTMLInputElement;
 
-  // Use the Clipboard API to copy the URL
   navigator.clipboard.writeText(urlField.value)
-      .then(() => {
-          alert('URL copied to clipboard!');
-      })
-      .catch(err => {
-          console.error('Failed to copy text: ', err);
-          alert('Failed to copy URL');
-      });
+    .then(() => {
+      showCopyNotification();
+    })
+    .catch(err => {
+      console.error('Failed to copy text: ', err);
+      alert('Failed to copy URL');
+    });
 }
+
+/**
+ * Show the "URL copied" notification with animation
+ */
+function showCopyNotification(): void {
+  const notification = document.getElementById('copyNotification');
+
+  if (notification) {
+    notification.classList.add('show');
+
+    // Hide the notification after 2 seconds
+    setTimeout(() => {
+      notification.classList.remove('show');
+    }, 2000);
+  }
+}
+

src/styles.scss

@@ -1,3 +1,7 @@
+body {
+  font-family: Arial, sans-serif;
+}
+
 fieldset {
   margin-bottom: 20px;
   padding: 10px;
@@ -32,3 +36,24 @@ button#generateConfig {
   border: #4CAF50 1px solid;
   font-size: large;
 }
+
+#copyNotification {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #4CAF50;
+  color: white;
+  padding: 10px 20px;
+  border-radius: 5px;
+  font-size: 14px;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.5s ease, visibility 0.5s ease;
+  z-index: 1000;
+}
+
+#copyNotification.show {
+  visibility: visible;
+  opacity: 1;
+}