diff --git a/displayapplication.asp b/displayapplication.asp index a17f4b6..f242f63 100644 --- a/displayapplication.asp +++ b/displayapplication.asp @@ -105,9 +105,54 @@ .lightbox-close:hover { opacity: 1; } +/* Share toast notification */ +#shareToast { + position: fixed; + top: 80px; + right: 20px; + z-index: 9999; + min-width: 300px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + padding: 15px 20px; + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0,0,0,0.3); + display: none; +} +@keyframes toastSlideIn { + from { + transform: translateX(100%); + opacity: 0; + } + to { + transform: translateX(0); + opacity: 1; + } +} +@keyframes toastSlideOut { + from { + transform: translateX(0); + opacity: 1; + } + to { + transform: translateX(100%); + opacity: 0; + } +} + +
+
+ +
+ Link Copied! + This link will show the search term and highlight the result +
+
+
+
@@ -633,17 +678,21 @@ document.execCommand('copy'); document.body.removeChild(temp); - // Show feedback - var btn = event.currentTarget; - var originalHTML = btn.innerHTML; - btn.innerHTML = ''; - btn.classList.remove('btn-outline-secondary'); - btn.classList.add('btn-success'); + // Show toast notification + showToast(); + } + + function showToast() { + var toast = document.getElementById('shareToast'); + toast.style.display = 'block'; + toast.style.animation = 'toastSlideIn 0.3s ease-out'; + setTimeout(function() { - btn.innerHTML = originalHTML; - btn.classList.remove('btn-success'); - btn.classList.add('btn-outline-secondary'); - }, 1500); + toast.style.animation = 'toastSlideOut 0.3s ease-out'; + setTimeout(function() { + toast.style.display = 'none'; + }, 300); + }, 2500); } $(document).ready(function() { diff --git a/displaytopic.asp b/displaytopic.asp index 2853632..911eb90 100644 --- a/displaytopic.asp +++ b/displaytopic.asp @@ -158,79 +158,66 @@ + +
+
+ +
+ Link Copied! + This link will show the search term and highlight the result +
+
+
+