update responsive

index.html

@@ -526,26 +526,36 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
         async function init() {
             showLoading(); // Show loading message
             try {
+                // --- שחזור ערך חיפוש קיים מהאחסון המקומי (אם קיים) ---
+                const savedSearch = localStorage.getItem('searchTerm');
+                if (savedSearch) {
+                    searchInput.value = savedSearch;
+                    currentSearchTerm = savedSearch;
+                }
+
                 await loadData(); // Load fresh data from server on init
                 sortTools(currentSort); // Apply default sort
                 renderTools();
                 renderVideos();
                 updateStats();
                 setupEventListeners();
-                // Set initial active filter button
-                const allFilterBtn = document.querySelector('.filter-btn[data-category="all"]');
-                if (allFilterBtn) {
-                    allFilterBtn.classList.add('active');
+
+                // Set initial active filter button (רק אם אין חיפוש)
+                if (!currentSearchTerm) {
+                    const allFilterBtn = document.querySelector('.filter-btn[data-category="all"]');
+                    if (allFilterBtn) {
+                        allFilterBtn.classList.add('active');
+                    }
                 }
             } catch (error) {
-                // Handle error during initial load (e.g., network issue)
                 console.error("Initialization failed:", error);
                 showError("שגיאה בטעינת הנתונים הראשונית. נסה לרענן את הדף.");
             } finally {
-                hideLoading(); // Hide loading message regardless of success/failure
+                hideLoading();
             }
         }
 
+
         const speechSynthesis = window.speechSynthesis;
         let currentUtterance = null;
 
@@ -730,6 +740,12 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
                 return 0;
             });
         }
+        function scrollToTools() {
+            const toolsSection = document.getElementById("toolsContainer");
+            if (toolsSection) {
+                toolsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }
+        }
 
         // --- Rendering Functions (Unchanged logic, but added hideLoading) ---
         function renderTools() {
@@ -763,35 +779,36 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
                             <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>
-                            
-                            <span class="text-xs px-2 py-1 rounded-full ${getCategoryBadgeColor(tool.category)}">${getCategoryName(tool.category)}</span>
+                            <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-base md:text-lg leading-relaxed min-h-[60px]">${tool.description}</p>
+                    <p class="text-gray-700 mb-4 text-base leading-relaxed min-h-[60px]">${tool.description}</p>
                     <div class="flex justify-between items-center mb-4">
-                        <div class="flex items-center gap-2">
-                            <div class="flex">${renderRatingStars(tool.rating)}</div>
+                        <div class="flex items-center gap-3">
+                            ${renderRatingStars(tool.rating)}
+                            
+                            <!-- כפתור רמקול -->
+                            <button title="הקרא תיאור" onclick="event.stopPropagation(); speakText('${tool.description.replace(/'/g, "\\'")}')" class="text-blue-600 hover:text-blue-800 transition text-xl">
+                                <i class="fas fa-volume-up"></i>
+                            </button>
+
+                            <!-- כפתור יוטיוב -->
                             ${tool.video ? `
-                                <a href="#" onclick="openVideoModal('${tool.video}')" class="text-red-500 hover:text-red-700" title="צפה בסרטון הדרכה">
-                                    <i class="fab fa-youtube text-xl"></i>
-                                </a>` : ''
-                            }
+                                <button title="צפה בהדרכה" onclick="openVideoModal('${tool.video}')" class="text-red-500 hover:text-red-600 transition text-xl">
+                                    <i class="fab fa-youtube"></i>
+                                </button>` : ''}
                         </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' : ''}">
+                    <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);
                 });
                 
@@ -949,9 +966,11 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
             // Search input
             searchInput.addEventListener('input', (e) => {
                 currentSearchTerm = e.target.value;
+                localStorage.setItem('searchTerm', currentSearchTerm); // שמור בזיכרון הדפדפן
                 renderTools();
             });
 
+
             // Filter buttons
             filterButtons.forEach(button => {
                 button.addEventListener('click', () => {
@@ -1013,8 +1032,22 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
              });
 
             // Sorting stat boxes (Unchanged)
-            if (topRatedStatBox) topRatedStatBox.addEventListener('click', () => { console.log("Top Rated clicked"); sortTools('rating'); renderTools(); });
-            if (newToolsStatBox) newToolsStatBox.addEventListener('click', () => { console.log("New Tools clicked"); sortTools('newest'); renderTools(); });
+            if (topRatedStatBox) {
+                topRatedStatBox.addEventListener('click', () => {
+                    sortTools('rating');
+                    renderTools();
+                    scrollToTools(); // גלילה חלקה לתחילת רשימת הכלים
+                });
+            }
+
+            if (newToolsStatBox) {
+                newToolsStatBox.addEventListener('click', () => {
+                    sortTools('newest');
+                    renderTools();
+                    scrollToTools(); // גלילה חלקה לתחילת רשימת הכלים
+                });
+            }
+
 
             // Refresh buttons - Now primarily resets filters/sort/search and re-renders current data
             // It *could* re-fetch, but init() already does that on load.