improved share button

hub/services/templates/services/article_detail.html

@@ -137,7 +137,7 @@
                             Back to Articles
                         </a>
                         <div class="d-flex gap-2">
-                            <button class="btn btn-outline btn-sm" onclick="navigator.share ? navigator.share({title: '{{ article.title }}', url: window.location.href}) : navigator.clipboard.writeText(window.location.href)">
+                            <button class="btn btn-outline btn-sm" onclick="shareArticle()" id="shareBtn">
                                 <i class="bi bi-share"></i> Share
                             </button>
                         </div>
@@ -170,4 +170,43 @@
       </div>
     </div>
   </section>
-{% endblock %}
+
+<script>
+async function shareArticle() {
+    const shareBtn = document.getElementById('shareBtn');
+    const originalText = shareBtn.innerHTML;
+    
+    try {
+        if (navigator.share) {
+            // Use native share API if available
+            await navigator.share({
+                title: '{{ article.title|escapejs }}',
+                text: '{{ article.excerpt|escapejs }}',
+                url: window.location.href
+            });
+        } else {
+            // Fallback: copy to clipboard
+            await navigator.clipboard.writeText(window.location.href);
+            
+            // Show feedback
+            shareBtn.innerHTML = '<i class="bi bi-check"></i> Copied!';
+            shareBtn.classList.add('btn-success');
+            shareBtn.classList.remove('btn-outline');
+            
+            // Reset after 2 seconds
+            setTimeout(() => {
+                shareBtn.innerHTML = originalText;
+                shareBtn.classList.remove('btn-success');
+                shareBtn.classList.add('btn-outline');
+            }, 2000);
+        }
+    } catch (error) {
+        console.error('Error sharing:', error);
+        shareBtn.innerHTML = '<i class="bi bi-x"></i> Error';
+        setTimeout(() => {
+            shareBtn.innerHTML = originalText;
+        }, 2000);
+    }
+}
+</script>
+{% endblock %}