הוספת מועדפים ושיתוף הכלי

index.html

@@ -887,36 +887,29 @@ https://bit.ly/a-tools
 
       // --- Initialize ---
       async function init() {
-        showLoading();
+        showLoading('טוען נתונים...');
+
         try {
-          const savedSearch = localStorage.getItem('searchTerm');
-          if (savedSearch) {
-            searchInput.value = savedSearch;
-            currentSearchTerm = savedSearch;
-          }
+          await loadData(); // המתנה לטעינת הנתונים
 
-          await loadData(); // ← הנתונים נטענים כאן
-          sortTools(currentSort);
           renderTools();
           renderVideos();
           updateStats();
           setupEventListeners();
+          updateCategoryFilters(); // הוספת כפתור המועדפים
 
-          // 👇 כאן נוסיף את הקריאה לבאנר לאחר שהכלים נטענו
-          showNewToolBanner();
-
-          if (!currentSearchTerm) {
-            const allFilterBtn = document.querySelector(
-              '.filter-btn[data-category="all"]'
-            );
-            if (allFilterBtn) {
-              allFilterBtn.classList.add('active');
-            }
+          // הגדרת כפתור "הכל" כפעיל בהתחלה
+          const allFilterBtn = document.querySelector(
+            '.filter-btn[data-category="all"]'
+          );
+          if (allFilterBtn) {
+            allFilterBtn.classList.add('active');
           }
+
+          hideLoading();
         } catch (error) {
-          console.error('Initialization failed:', error);
-          showError('שגיאה בטעינת הנתונים הראשונית. נסה לרענן את הדף.');
-        } finally {
+          console.error('שגיאה באתחול:', error);
+          showError('אירעה שגיאה בטעינת האתר. אנא נסה לרענן את הדף.');
           hideLoading();
         }
       }
@@ -1154,7 +1147,7 @@ https://bit.ly/a-tools
           toolsContainer.innerHTML =
             '<p class="text-center text-gray-500 col-span-full">לא נמצאו כלים התואמים את החיפוש, הסינון והמיון.</p>';
         } else {
-          filteredTools.forEach((tool) => {
+          filteredTools.forEach((tool, index) => {
             const toolCard = document.createElement('div');
             toolCard.className = `relative tool-card bg-white rounded-lg shadow-sm border border-gray-100 p-6 transition duration-300 ${
               tool.isFeatured ? 'ring-2 ring-blue-500' : ''
@@ -1162,8 +1155,7 @@ https://bit.ly/a-tools
 
             // הכנת הטקסט להקראה - שילוב של שם הכלי והתיאור שלו
             const speakableText = `${tool.name}. ${tool.description}`;
-            // `${tool.name}`;
-            //
+
             // הוספת מאפיין לסינון כלים חינמיים
             if (tool.free) {
               toolCard.setAttribute('data-free', 'true');
@@ -1217,8 +1209,14 @@ https://bit.ly/a-tools
                             </div>
                         </div>
 
-                        <!-- אייקון הכלי -->
-                        <i class="${tool.icon} text-gray-500 text-2xl"></i>
+                        <!-- כפתור מועדפים -->
+                        <div class="flex items-center gap-2">
+                            <button class="favorite-btn p-2 text-yellow-400 hover:text-yellow-500 transition" data-id="${index}" title="הוסף למועדפים">
+                                <i class="far fa-star text-xl"></i>
+                            </button>
+                            <!-- אייקון הכלי -->
+                            <i class="${tool.icon} text-gray-500 text-2xl"></i>
+                        </div>
                     </div>
 
                     <!-- תיאור -->
@@ -1254,15 +1252,23 @@ https://bit.ly/a-tools
                           tool.url !== '#' ? 'גישה לכלי' : 'אין קישור'
                         }
                     </a>
+                    
+                    <!-- כפתורי שיתוף -->
+                    ${renderShareButtons(tool)}
                 `;
 
             toolsContainer.appendChild(toolCard);
-          });
-          // אנימציה של הופעה חלקה
-          requestAnimationFrame(() => {
-            toolCard.classList.add('visible');
+
+            // אנימציה של הופעה חלקה
+            requestAnimationFrame(() => {
+              toolCard.classList.add('visible');
+            });
           });
 
+          // הפעלת פונקציות האתחול לאחר הוספת הכלים לדף
+          setupFavorites();
+          setupShareButtons();
+
           // הוספת סגנון CSS לכפתור הקראה פעיל
           if (!document.getElementById('speakButtonStyle')) {
             const style = document.createElement('style');
@@ -1874,6 +1880,232 @@ https://bit.ly/a-tools
           });
         });
       });
+      // פונקציה להצגת כפתורי שיתוף
+      function renderShareButtons(tool) {
+        const encodedToolName = encodeURIComponent(tool.name);
+        const encodedDesc = encodeURIComponent(
+          `בדקו את הכלי ${tool.name} - ${tool.description}`
+        );
+        const encodedUrl = encodeURIComponent(tool.url);
+
+        // וודא שיש URL תקין לשיתוף
+        if (!tool.url || tool.url === '#') {
+          return ''; // לא מציג כפתורי שיתוף אם אין URL תקין
+        }
+
+        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>
+    `;
+      }
+      // פונקציה לטיפול בלחיצה על כפתור המועדפים
+      function setupFavorites() {
+        // טעינת המועדפים מה-localStorage
+        let favorites = JSON.parse(
+          localStorage.getItem('aiToolsFavorites') || '[]'
+        );
+
+        // הוספת אירוע לחיצה לכפתורי המועדפים
+        document.querySelectorAll('.favorite-btn').forEach((btn) => {
+          const toolId = btn.dataset.id;
+
+          // עדכון המראה הראשוני בהתאם למצב
+          if (favorites.includes(toolId)) {
+            btn.classList.add('active');
+            btn.querySelector('i').classList.remove('far');
+            btn.querySelector('i').classList.add('fas');
+          }
+
+          btn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const isFavorite = favorites.includes(toolId);
+
+            if (isFavorite) {
+              // הסרה מהמועדפים
+              favorites = favorites.filter((id) => id !== toolId);
+              btn.classList.remove('active');
+              btn.querySelector('i').classList.remove('fas');
+              btn.querySelector('i').classList.add('far');
+            } else {
+              // הוספה למועדפים
+              favorites.push(toolId);
+              btn.classList.add('active');
+              btn.querySelector('i').classList.remove('far');
+              btn.querySelector('i').classList.add('fas');
+            }
+
+            // שמירת המועדפים המעודכנים
+            localStorage.setItem('aiToolsFavorites', JSON.stringify(favorites));
+          });
+        });
+      }
+      // עדכון של פונקציית filterTools הקיימת להוספת תמיכה במועדפים
+      function filterTools() {
+        if (!toolsData || !Array.isArray(toolsData.tools)) return [];
+
+        // טעינת המועדפים מה-localStorage
+        const favorites = JSON.parse(
+          localStorage.getItem('aiToolsFavorites') || '[]'
+        );
+
+        let filtered = toolsData.tools;
+
+        // סינון לפי מועדפים (אם מסומן)
+        if (currentCategory === 'favorites') {
+          filtered = filtered.filter((_, index) =>
+            favorites.includes(index.toString())
+          );
+        }
+        // סינון לפי קטגוריה (כפי שהיה קודם)
+        else if (currentCategory === 'free') {
+          filtered = filtered.filter((tool) => tool.free === true);
+        } else if (currentCategory !== 'all') {
+          filtered = filtered.filter(
+            (tool) => tool.category === currentCategory
+          );
+        }
+
+        // סינון לפי חיפוש (נשאר כפי שהיה)
+        if (currentSearchTerm) {
+          const searchLower = currentSearchTerm.toLowerCase();
+          filtered = filtered.filter((tool) => {
+            const nameMatch =
+              tool.name && tool.name.toLowerCase().includes(searchLower);
+            const descMatch =
+              tool.description &&
+              tool.description.toLowerCase().includes(searchLower);
+            const categoryNameMatch = getCategoryName(tool.category)
+              .toLowerCase()
+              .includes(searchLower);
+            return nameMatch || descMatch || categoryNameMatch;
+          });
+        }
+
+        // בדיקה אם יש סינון לפי סטטוס נתונים (filteredStatView)
+        if (filteredStatView === 'topRated') {
+          filtered = filtered.filter((tool) => tool.rating >= 5);
+        } else if (filteredStatView === 'newTools') {
+          filtered = filtered.filter((tool) => tool.isNew);
+        }
+
+        return filtered;
+      }
+
+      // פונקציה לטיפול בכפתורי שיתוף
+      function setupShareButtons() {
+        document.querySelectorAll('.share-btn').forEach((btn) => {
+          btn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const platform = btn.dataset.platform;
+            const url = btn.dataset.url;
+            const title = btn.dataset.title;
+            const text = `בדקו את הכלי ${title} מארגז הכלים של שגיא בר און`;
+
+            let shareUrl;
+
+            switch (platform) {
+              case 'facebook':
+                shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
+                  url
+                )}&quote=${encodeURIComponent(text)}`;
+                window.open(shareUrl, '_blank', 'width=600,height=400');
+                break;
+              case 'twitter':
+                shareUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(
+                  url
+                )}&text=${encodeURIComponent(text)}`;
+                window.open(shareUrl, '_blank', 'width=600,height=400');
+                break;
+              case 'whatsapp':
+                shareUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(
+                  text + ' ' + url
+                )}`;
+                window.open(shareUrl, '_blank');
+                break;
+              case 'copy':
+                navigator.clipboard.writeText(url).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);
+                });
+                break;
+            }
+          });
+        });
+      }
+
+      // פונקציה להוספת כפתור המועדפים לאזור הקטגוריות
+      function updateCategoryFilters() {
+        const categoryFilterDiv = document.querySelector('.category-filter');
+
+        // בודק אם כפתור המועדפים כבר קיים
+        if (!document.querySelector('[data-category="favorites"]')) {
+          const favoritesBtn = document.createElement('button');
+          favoritesBtn.className =
+            'filter-btn px-3 py-1 rounded-full border border-gray-300 text-sm hover:bg-gray-100 transition';
+          favoritesBtn.dataset.category = 'favorites';
+          favoritesBtn.innerHTML =
+            '<i class="fas fa-star text-yellow-400 ml-1"></i> מועדפים';
+
+          // הוספת הכפתור לאחר כפתור "הכל"
+          const allBtn = document.querySelector('[data-category="all"]');
+          if (allBtn && allBtn.parentNode) {
+            allBtn.parentNode.insertBefore(favoritesBtn, allBtn.nextSibling);
+
+            // הוספת אירוע לחיצה
+            favoritesBtn.addEventListener('click', () => {
+              document
+                .querySelectorAll('.filter-btn')
+                .forEach((btn) => btn.classList.remove('active'));
+              favoritesBtn.classList.add('active');
+              currentCategory = 'favorites';
+              renderTools();
+            });
+          }
+        }
+      }
     </script>
 
     <!-- /* --------------------------------- */

style.css

@@ -1,38 +1,39 @@
 html {
-    scroll-behavior: smooth;
+  scroll-behavior: smooth;
 }
 
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  padding: 2rem;
+  font-family: -apple-system, BlinkMacSystemFont, 'Arial', sans-serif;
 }
-button:hover, a.button:hover {
-    transform: scale(1.02);
-    transition: transform 0.2s ease-in-out;
+button:hover,
+a.button:hover {
+  transform: scale(1.02);
+  transition: transform 0.2s ease-in-out;
 }
 
 h1 {
-	font-size: 16px;
-	margin-top: 0;
+  font-size: 16px;
+  margin-top: 0;
 }
 
 p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+  color: rgb(107, 114, 128);
+  font-size: 15px;
+  margin-bottom: 10px;
+  margin-top: 5px;
 }
 
 .card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+  max-width: 620px;
+  margin: 0 auto;
+  padding: 16px;
+  border: 1px solid lightgray;
+  border-radius: 16px;
 }
 
 .card p:last-child {
-	margin-bottom: 0;
+  margin-bottom: 0;
 }
 .scroll-container {
   max-height: 90vh;
@@ -40,47 +41,46 @@ p {
   padding-bottom: 80px; /* כדי לא להיתקע מאחורי הפוטר */
 }
 .tool-card {
-    opacity: 0;
-    transform: translateY(20px);
-    transition: all 0.5s ease;
+  opacity: 0;
+  transform: translateY(20px);
+  transition: all 0.5s ease;
 }
 .tool-card.visible {
-    opacity: 1;
-    transform: translateY(0);
+  opacity: 1;
+  transform: translateY(0);
 }
 .accessibility-mode {
-    font-size: 18px;
-    line-height: 1.8;
-    background-color: #000 !important;
-    color: #fff !important;
+  font-size: 18px;
+  line-height: 1.8;
+  background-color: #000 !important;
+  color: #fff !important;
 }
 
 .accessibility-mode .tool-card {
-    background-color: #111 !important;
-    color: #fff !important;
-    border-color: #555 !important;
+  background-color: #111 !important;
+  color: #fff !important;
+  border-color: #555 !important;
 }
 
 .accessibility-mode a,
 .accessibility-mode button {
-    font-size: 18px !important;
-    color: #fff !important;
-    background-color: #333 !important;
+  font-size: 18px !important;
+  color: #fff !important;
+  background-color: #333 !important;
 }
 .category-filter .active {
-    background-color: #e0f2fe; /* תכלת עדין */
-    color: #1e3a8a; /* כחול כהה */
-    border-color: #1e3a8a;
-    font-weight: 600;
+  background-color: #e0f2fe; /* תכלת עדין */
+  color: #1e3a8a; /* כחול כהה */
+  border-color: #1e3a8a;
+  font-weight: 600;
 }
 
-
 .accessibility-mode input,
 .accessibility-mode textarea {
-    font-size: 16px;
-    background-color: #222;
-    color: white;
-    border-color: #666;
+  font-size: 16px;
+  background-color: #222;
+  color: white;
+  border-color: #666;
 }
 #newToolBanner {
   position: fixed;
@@ -92,41 +92,161 @@ p {
   display: none;
 }
 
- /* Chat animations and effects */
+/* סגנונות עבור כפתורי שיתוף ומועדפים */
+.favorite-btn {
+  transition: all 0.2s ease;
+}
+
+.favorite-btn.active {
+  transform: scale(1.1);
+}
+
+.favorite-btn:hover {
+  transform: scale(1.15);
+}
+
+.share-btn {
+  transition: all 0.2s ease;
+}
+
+.share-btn:hover {
+  transform: translateY(-2px);
+}
+
+.favorite-btn:focus,
+.share-btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
+/* הודעת העתקה */
+.copy-toast {
+  position: fixed;
+  top: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(16, 185, 129, 0.9);
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  z-index: 50;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.copy-toast.show {
+  opacity: 1;
+}
+
+/* סגנונות עבור כפתור המועדפים בפילטרים */
+.filter-btn[data-category='favorites'] {
+  background-color: #fef3c7;
+  border-color: #f59e0b;
+}
+
+.filter-btn[data-category='favorites'].active {
+  background-color: #f59e0b;
+  color: white;
+}
+
+.filter-btn[data-category='favorites'] i {
+  color: #f59e0b;
+}
+
+.filter-btn[data-category='favorites'].active i {
+  color: white;
+}
+/* סגנונות עבור כפתורי שיתוף ומועדפים */
+.favorite-btn {
+  transition: all 0.2s ease;
+}
+
+.favorite-btn.active {
+  transform: scale(1.1);
+}
+
+.favorite-btn:hover {
+  transform: scale(1.15);
+}
+
+.share-btn {
+  transition: all 0.2s ease;
+}
+
+.share-btn:hover {
+  transform: translateY(-2px);
+}
+
+.favorite-btn:focus,
+.share-btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
+/* עיצוב כפתור מועדפים בסינון */
+.filter-btn[data-category='favorites'] {
+  background-color: #fef3c7 !important;
+  border-color: #f59e0b !important;
+  color: #b45309 !important;
+}
+
+.filter-btn[data-category='favorites'].active {
+  background-color: #f59e0b !important;
+  color: white !important;
+}
+
+.filter-btn[data-category='favorites'] i {
+  color: inherit;
+}
+/* Chat animations and effects */
 @keyframes pulse {
-	0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7); }
-	70% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); }
-	100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
+  0% {
+    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(139, 92, 246, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
+  }
 }
 
 .chat-pulse {
-	animation: pulse 2s infinite;
+  animation: pulse 2s infinite;
 }
 
 /* Smooth transitions */
 #chatWindow {
-	transition: all 0.3s ease-in-out;
-	transform-origin: bottom right;
+  transition: all 0.3s ease-in-out;
+  transform-origin: bottom right;
 }
 
 .chat-intro-enter {
-	animation: slideDown 0.3s forwards;
+  animation: slideDown 0.3s forwards;
 }
 
 @keyframes slideDown {
-	from { transform: translateY(-20px); opacity: 0; }
-	to { transform: translateY(0); opacity: 1; }
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
 
 /* Mobile adjustments */
 @media (max-width: 640px) {
-	#chatWindow {
-		width: 90vw !important;
-		right: 5vw;
-		left: 5vw;
-	}
-	
-	#chatBubble {
-		bottom: 75px; /* Move above footer on mobile */
-	}
-}
+  #chatWindow {
+    width: 90vw !important;
+    right: 5vw;
+    left: 5vw;
+  }
+
+  #chatBubble {
+    bottom: 75px; /* Move above footer on mobile */
+  }
+}

tools.json

@@ -3,7 +3,7 @@
     "name": "אליעזר - בוט תמלול הודעות קוליות בוואטסאפ",
     "description": "בוט WhatsApp לתמלול הודעות קוליות לעברית במהירות ובחינם. שלחו הודעה קולית ל־'אליעזר' ותקבלו תמלול מדויק תוך שניות. הבוט מבוסס על טכנולוגיית Whisper-Turbo.",
     "url": "https://wa.me/972559571223",
-    "logo": "https://pps.whatsapp.net/v/t61.24694-24/491869625_1181606280415417_1942649546857677633_n.jpg?ccb=11-4&oh=01_Q5Aa1QFEbJz6AneI0ygM_PiDUhy5zYH8lDlMi26n5XQ6XE0s-w&oe=6808DCD6&_nc_sid=5e03e0&_nc_cat=110",
+    "logo": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcToJht3wuQrsZ3KNMXckeCrtKGVHgLF1PAB3A&s",
     "category": "utility",
     "icon": "fas fa-microphone-alt",
     "video": "",