add speaker

index.html

@@ -537,6 +537,83 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
             }
         }
 
+        const speechSynthesis = window.speechSynthesis;
+        let currentUtterance = null;
+
+        // פונקציה להקראת טקסט בעברית
+        function speakText(text) {
+            // עצירת הקראה קודמת אם יש
+            if (speechSynthesis.speaking) {
+                speechSynthesis.cancel();
+                
+                // אם זאת אותה הקראה שכבר פועלת, פשוט נעצור ונצא
+                if (currentUtterance && currentUtterance.text === text) {
+                currentUtterance = null;
+                return;
+                }
+            }
+            
+            // יצירת הקראה חדשה
+            const utterance = new SpeechSynthesisUtterance(text);
+            
+            // הגדרת השפה לעברית
+            utterance.lang = 'he-IL';
+            
+            // בדיקת קולות זמינים ובחירת קול עברי
+            const voices = speechSynthesis.getVoices();
+            
+            
+            if (voices.length) {
+                const hebrewVoice = voices.find(voice => /he|hebrew|ivrit/i.test(voice.lang));
+                
+                if (hebrewVoice) {
+                utterance.voice = hebrewVoice;
+                console.log("נבחר קול עברי:", hebrewVoice.name);
+                } else {
+                console.log("לא נמצא קול עברי, משתמש בקול ברירת מחדל");
+                }
+                // ננסה להשתמש בקול גוגל
+                const googleVoice = voices.find(voice => 
+                    voice.name.includes('Google') && 
+                    (voice.name.includes('US') || voice.name.includes('UK'))                    
+                );
+                
+                
+                if (googleVoice) {
+                    utterance.voice = googleVoice;
+                }
+            } else {
+                // במקרה שהקולות עדיין לא נטענו, נגדיר מאזין חד-פעמי
+                speechSynthesis.addEventListener('voiceschanged', function loadVoice() {
+                const voices = speechSynthesis.getVoices();
+                const hebrewVoice = voices.find(voice => /he|hebrew|ivrit/i.test(voice.lang));
+                if (hebrewVoice) {
+                    utterance.voice = hebrewVoice;
+                    console.log("נבחר קול עברי (מדחייה):", hebrewVoice.name);
+                }
+                // הסרת המאזין אחרי הפעלה ראשונה
+                speechSynthesis.removeEventListener('voiceschanged', loadVoice);
+                }, { once: true });
+            }
+            
+            // שמירת ההקראה הנוכחית
+            currentUtterance = utterance;
+            
+            // טיפול באירוע סיום הקראה
+            utterance.onend = () => {
+                currentUtterance = null;
+                
+                // עדכון כל הכפתורים למצב "לא מנגן"
+                document.querySelectorAll('.speak-button').forEach(btn => {
+                btn.innerHTML = '<i class="fas fa-volume-up"></i>';
+                btn.classList.remove('speaking');
+                });
+            };
+            
+            // הפעלת ההקראה
+            speechSynthesis.speak(utterance);
+            }
+        
         // --- UI Feedback ---
         function showLoading() {
             if (loadingMessage) loadingMessage.style.display = 'block';
@@ -649,9 +726,9 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
         function renderTools() {
             hideLoading(); // Ensure loading message is hidden before rendering
             if (!toolsContainer || !toolsData || !Array.isArray(toolsData.tools)) {
-                 console.error("Cannot render tools: Missing container or invalid data.");
-                 showError("שגיאה בהצגת הכלים.");
-                 return;
+                console.error("Cannot render tools: Missing container or invalid data.");
+                showError("שגיאה בהצגת הכלים.");
+                return;
             }
             const filteredTools = filterTools();
             toolsContainer.innerHTML = ''; // Clear previous content
@@ -664,27 +741,92 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
             } else {
                 filteredTools.forEach(tool => {
                     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' : ''}`;
-                    toolCard.innerHTML = `
-                        <div class="flex items-start mb-4">
-                            <div class="p-3 rounded-lg ${getCategoryColor(tool.category)} text-white mr-4 flex-shrink-0"> <i class="${tool.icon} text-xl"></i> </div>
-                            <div class="flex-grow">
-                                <h3 class="text-xl font-semibold">${tool.name}</h3>
-                                <span class="text-xs px-2 py-1 rounded-full ${getCategoryBadgeColor(tool.category)}">${getCategoryName(tool.category)}</span>
-                            </div>
-                            ${tool.isNew ? '<span class="absolute top-2 left-2 bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">חדש!</span>' : ''}
-                        </div>
-                        <p class="text-gray-700 mb-4 text-sm min-h-[60px]">${tool.description}</p>
-                        <div class="flex justify-between items-center mb-4">
-                            <div class="flex"> ${renderRatingStars(tool.rating)} </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' : ''}`;
+                
+                // הכנת הטקסט להקראה - שילוב של שם הכלי והתיאור שלו
+                const speakableText = `${tool.name}`;
+                // `${tool.name}. ${tool.description}`;
+                
+                toolCard.innerHTML = `
+                    <div class="flex items-start mb-4">
+                    <div class="p-3 rounded-lg ${getCategoryColor(tool.category)} text-white mr-4 flex-shrink-0"> 
+                        <i class="${tool.icon} text-xl"></i> 
+                    </div>
+                    <div class="flex-grow">
+                        <div class="flex justify-between items-start">
+                        <h3 class="text-xl font-semibold">${tool.name}</h3>
+                        <button class="speak-button p-2 text-blue-600 hover:text-blue-800 focus:outline-none" 
+                                onclick="event.stopPropagation(); speakText('${speakableText.replace(/'/g, "\\'")}')">
+                            <i class="fas fa-volume-up"></i>
+                        </button>
                         </div>
-                        <a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="inline-block w-full text-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition ${tool.url === '#' ? 'opacity-50 cursor-not-allowed' : ''}">
-                            <i class="fas fa-external-link-alt ml-2"></i> ${tool.url !== '#' ? 'גישה לכלי' : 'אין קישור'}
-                        </a>`;
-                    toolsContainer.appendChild(toolCard);
+                        <span class="text-xs px-2 py-1 rounded-full ${getCategoryBadgeColor(tool.category)}">${getCategoryName(tool.category)}</span>
+                    </div>
+                    ${tool.isNew ? '<span class="absolute top-2 left-2 bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">חדש!</span>' : ''}
+                    </div>
+                    <p class="text-gray-700 mb-4 text-sm min-h-[60px]">${tool.description}</p>
+                    <div class="flex justify-between items-center mb-4">
+                    <div class="flex"> ${renderRatingStars(tool.rating)} </div>
+                    </div>
+                    <a href="${tool.url}" target="_blank" rel="noopener noreferrer" class="inline-block w-full text-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition ${tool.url === '#' ? 'opacity-50 cursor-not-allowed' : ''}">
+                    <i class="fas fa-external-link-alt ml-2"></i> ${tool.url !== '#' ? 'גישה לכלי' : 'אין קישור'}
+                    </a>`;
+                
+                toolsContainer.appendChild(toolCard);
                 });
+                
+                // הוספת סגנון CSS לכפתור הקראה פעיל
+                if (!document.getElementById('speakButtonStyle')) {
+                const style = document.createElement('style');
+                style.id = 'speakButtonStyle';
+                style.innerHTML = `
+                    .speak-button.speaking { color: #4f46e5; animation: pulse 1.5s infinite; }
+                    @keyframes pulse {
+                    0% { transform: scale(1); }
+                    50% { transform: scale(1.2); }
+                    100% { transform: scale(1); }
+                    }
+                `;
+                document.head.appendChild(style);
+                }
             }
-        }
+            }
+
+            // פונקציה נוספת שמוחקת את ההקראה בעת עזיבת העמוד
+            function cleanupSpeech() {
+                if (speechSynthesis) {
+                    speechSynthesis.cancel();
+                }
+            }
+
+            // הוספת אירוע לניקוי ההקראה בעת עזיבת העמוד
+            window.addEventListener('beforeunload', cleanupSpeech);
+
+            // עדכון אירוע הקלקה על כפתור הקראה - להוסיף מחלקת CSS ולשנות אייקון
+            document.addEventListener('click', function(e) {
+            if (e.target.closest('.speak-button')) {
+                const button = e.target.closest('.speak-button');
+                
+                // החלפת האייקון והוספת מחלקת CSS מהבהבת
+                if (speechSynthesis.speaking && currentUtterance) {
+                // אם יש הקראה פעילה, נעדכן את כל הכפתורים
+                document.querySelectorAll('.speak-button').forEach(btn => {
+                    btn.innerHTML = '<i class="fas fa-volume-up"></i>';
+                    btn.classList.remove('speaking');
+                });
+                
+                // ואז נעדכן את הכפתור הנוכחי אם ההקראה ממשיכה
+                if (!button.classList.contains('speaking')) {
+                    button.innerHTML = '<i class="fas fa-volume-mute"></i>';
+                    button.classList.add('speaking');
+                }
+                } else {
+                button.innerHTML = '<i class="fas fa-volume-up"></i>';
+                button.classList.remove('speaking');
+                }
+            }
+            });
+
 
         function renderVideos() {
              // ... (renderVideos logic remains the same as before) ...