Enhanced share button design and functionality in index.html, introducing responsive styles and a unified layout for sharing options across platforms. Updated sharing logic to ensure valid URLs and improved user experience with consistent messaging.

index.html

@@ -145,6 +145,13 @@ sagi test
           transform: rotate(360deg);
         }
       }
+      @media (min-width: 768px) {     /* מסכים רחבים */
+        .share-btn {
+          width: 48px;
+          height: 48px;
+          font-size: 24px;
+        }
+      }
 
       .tech-dots {
         position: absolute;
@@ -203,6 +210,38 @@ sagi test
         cursor: pointer;
         background-color: #f3f4f6; /* Slightly lighter gray on hover */
       }
+      /* === עיצוב חדש לכפתורי השיתוף === */
+      .share-buttons {
+        display: flex;
+        justify-content: center;   /* כפתורים בשורה אחת במרכז */
+        gap: 24px;                 /* רווח נדיב בין כפתורים */
+        margin-top: 32px;          /* קצת אוויר מלמעלה */
+      }
+      /* === ריבועים גדולים וברורים === */
+      .share-btn{
+        width:40px;height:40px;
+        font-size:22px;                /* גודל האייקון */
+        color:#fff;                    /* צבע האייקון */
+        background:currentColor;       /* צבע הרקע = צבע הכפתור */
+        border:none;border-radius:12px;
+        display:flex;align-items:center;justify-content:center;
+        box-shadow:0 4px 12px rgba(0,0,0,.08);
+        transition:transform .2s,filter .2s;
+      }
+      .share-btn:hover{transform:translateY(-4px);filter:brightness(1.12);}
+      .share-btn i{color:#fff;}         /* האייקון תמיד לבן */
+
+      /* צבע מותג לכל פלטפורמה */
+      .share-btn.wa{color:#25D366;}     /* WhatsApp */
+      .share-btn.fb{color:#1877F2;}     /* Facebook */
+      .share-btn.tw{color:#1DA1F2;}     /* Twitter/X */
+      .share-btn.cp{color:#64748b;}     /* Copy-link / ברירת מחדל */
+
+      .share-btn img {
+        width: 32px;
+        height: 32px;
+      }
+
     </style>
     <!-- Google tag (gtag.js) -->
     <script
@@ -1889,10 +1928,10 @@ sagi test
       });
       // פונקציה להצגת כפתורי שיתוף
       function renderShareButtons(tool) {
+        if (!tool.url || tool.url === '#') return '';
+
         const encodedToolName = encodeURIComponent(tool.name);
-        const encodedDesc = encodeURIComponent(
-          `בדקו את הכלי ${tool.name} - ${tool.description}`
-        );
+        const encodedDesc = encodeURIComponent(`בדקו את הכלי ${tool.name} - ${tool.description}`);
         const encodedUrl = encodeURIComponent(tool.url);
 
         // וודא שיש URL תקין לשיתוף
@@ -1901,40 +1940,20 @@ sagi test
         }
 
         return `
-    <div class="flex justify-end mt-3 gap-2">
-        <button class="share-btn text-blue-800 hover:bg-blue-50 p-1.5 rounded-full transition" 
-                data-platform="facebook" 
-                data-url="${tool.url}" 
-                data-title="${tool.name}"
-                title="שתף בפייסבוק"
-                aria-label="שתף בפייסבוק">
-            <i class="fab fa-facebook-f text-sm"></i>
-        </button>
-        <button class="share-btn text-green-700 hover:bg-green-50 p-1.5 rounded-full transition" 
-                data-platform="whatsapp" 
-                data-url="${tool.url}" 
-                data-title="${tool.name}"
-                title="שתף בוואטסאפ"
-                aria-label="שתף בוואטסאפ">
-            <i class="fab fa-whatsapp text-sm"></i>
-        </button>
-        <button class="share-btn text-blue-500 hover:bg-blue-50 p-1.5 rounded-full transition" 
-                data-platform="twitter" 
-                data-url="${tool.url}" 
-                data-title="${tool.name}"
-                title="שתף בטוויטר"
-                aria-label="שתף בטוויטר">
-            <i class="fab fa-twitter text-sm"></i>
-        </button>
-        <button class="share-btn text-gray-700 hover:bg-gray-50 p-1.5 rounded-full transition" 
-                data-platform="copy" 
-                data-url="${tool.url}"
-                title="העתק קישור" 
-                aria-label="העתק קישור">
-            <i class="fas fa-link text-sm"></i>
-        </button>
-    </div>
-    `;
+          <div class="share-buttons mt-4">
+            <button class="share-btn fb"  data-platform="facebook" data-url="${tool.url}" data-title="${tool.name}" aria-label="שיתוף בפייסבוק" title="לחצו כדי לשתף את הכלי">
+              <i class="fab fa-facebook-f"></i>
+            </button>
+            <button class="share-btn wa"  data-platform="whatsapp" data-url="${tool.url}" data-title="${tool.name}" aria-label="שיתוף ב-WhatsApp" title="לחצו כדי לשתף את הכלי">
+              <i class="fab fa-whatsapp"></i>
+            </button>
+            <button class="share-btn tw"  data-platform="twitter" data-url="${tool.url}" data-title="${tool.name}" aria-label="שיתוף בטוויטר" title="לחצו כדי לשתף את הכלי">
+              <i class="fab fa-twitter"></i>
+            </button>
+            <button class="share-btn cp"  data-platform="copy" data-url="${tool.url}" aria-label="העתקת קישור" title="לחצו כדי לשתף את הכלי">
+              <i class="fas fa-link"></i>
+            </button>
+          </div>`;
       }
       // פונקציה לטיפול בלחיצה על כפתור המועדפים
       function setupFavorites() {
@@ -2033,56 +2052,55 @@ sagi test
 
       // פונקציה לטיפול בכפתורי שיתוף
       function setupShareButtons() {
-        document.querySelectorAll('.share-btn').forEach((btn) => {
-          btn.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
+        const TOOLBOX_LINK = 'https://bit.ly/a-tools';
 
-            const platform = btn.dataset.platform;
-            const shareLink = "https://bit.ly/a-tools";  // כאן מחליפים
-            const title = btn.dataset.title;
-            const text = `בדקו את הכלי ${title} מארגז הכלים של שגיא בר און`;
+        document.querySelectorAll('.share-btn').forEach((btn) => {
+          btn.addEventListener('click', async () => {
+            const platform = btn.dataset.platform;       // facebook | twitter | whatsapp | copy
+            const toolUrl  = btn.dataset.url;            // קישור ישיר לכלי
+            const title    = btn.dataset.title;          // שם הכלי
+
+            /* === טקסט שיתוף אחד לכל הערוצים === */
+            const shareMsg =
+              `בדקו את הכלי ${title} בלינק: ${toolUrl}\n\n` +
+              `מארגז הכלים של שגיא בר-און בכתובת: ${TOOLBOX_LINK}`;
+
+            /* ---------- העתקה ללוח ---------- */
+            if (platform === 'copy') {
+              try {
+                await navigator.clipboard.writeText(shareMsg);
+                btn.setAttribute('data-tooltip', '📋 הועתק!');
+                setTimeout(() => btn.removeAttribute('data-tooltip'), 1500);
+              } catch { alert('לא הצלחנו להעתיק – נסה ידנית'); }
+              return;
+            }
 
-            let shareUrl;
+            /* ---------- קידוד וכתובת שיתוף ---------- */
+            const encodedMsg = encodeURIComponent(shareMsg);
+            const encodedUrl = encodeURIComponent(toolUrl); // ל‑Preview
+            let shareUrl = '';
 
             switch (platform) {
-              case 'facebook':
-                shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
-                  shareLink
-                )}&quote=${encodeURIComponent(text)}`;
-                window.open(shareUrl, '_blank', 'width=600,height=400');
+              case 'facebook':  // כרטיס של הכלי, טקסט מלא
+                shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}&quote=${encodedMsg}`;
                 break;
-              case 'twitter':
-                shareUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(
-                  shareLink
-                )}&text=${encodeURIComponent(text)}`;
-                window.open(shareUrl, '_blank', 'width=600,height=400');
+              case 'twitter':   // כרטיס + טקסט
+                shareUrl = `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedMsg}`;
                 break;
-              case 'whatsapp':
-                shareUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(
-                  text + ' ' + shareLink
-                )}`;
-                window.open(shareUrl, '_blank');
-                break;
-              case 'copy':
-                navigator.clipboard.writeText(shareLink).then(() => {
-                  const toast = document.createElement('div');
-                  toast.className =
-                    'fixed top-4 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded shadow-lg z-50';
-                  toast.textContent = 'הקישור הועתק בהצלחה!';
-                  document.body.appendChild(toast);
-
-                  setTimeout(() => {
-                    toast.remove();
-                  }, 2000);
-                });
+              case 'whatsapp':  // הכול בטקסט אחד – וואטסאפ מציג שני הלינקים
+                shareUrl = `https://api.whatsapp.com/send?text=${encodedMsg}`;
                 break;
+              default:
+                shareUrl = encodedUrl;
             }
+
+            window.open(shareUrl, '_blank', 'noopener,noreferrer,width=600,height=500');
           });
         });
       }
 
 
+
       // פונקציה להוספת כפתור המועדפים לאזור הקטגוריות
       function updateCategoryFilters() {
         const categoryFilterDiv = document.querySelector('.category-filter');