update to read fron .json files

index.html

@@ -11,7 +11,47 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ארגז הכלים שלי לבינה מלאכותית</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.tailwindcss.com">
+function getYouTubeID(url) {
+    const match = url.match(/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/))([^?&\/\s]+)/);
+    return match ? match[1] : '';
+}
+
+function renderVideos() {
+    const videosContainer = document.getElementById('videosContainer');
+    if (!videosContainer) return;
+
+    videosContainer.innerHTML = '';
+
+    toolsData.videos.forEach(video => {
+        const videoId = getYouTubeID(video.url);
+        const embedUrl = `https://www.youtube.com/embed/${videoId}`;
+
+        const videoCard = document.createElement('div');
+        videoCard.className = 'bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden';
+
+        videoCard.innerHTML = `
+            <div class="relative pt-[56.25%]">
+                <iframe class="absolute top-0 left-0 w-full h-full" src="${embedUrl}" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowfullscreen></iframe>
+            </div>
+            <div class="p-4">
+                <h3 class="text-lg font-semibold mb-2">${video.title}</h3>
+                <p class="text-gray-600 text-sm mb-3">${video.description}</p>
+                <p class="text-gray-500 text-xs">${formatDate(video.date)}</p>
+            </div>
+        `;
+
+        videosContainer.appendChild(videoCard);
+    });
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+    renderVideos();
+});
+
+</script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700&display=swap');
@@ -1637,6 +1677,7 @@
         };
 
         // DOM Elements
+        // DOM Elements (נשארים ללא שינוי - רק לרפרנס)
         const toolsContainer = document.getElementById('toolsContainer');
         const videosContainer = document.getElementById('videosContainer');
         const searchInput = document.getElementById('searchInput');
@@ -1654,180 +1695,342 @@
         const saveJsonBtn = document.getElementById('saveJsonBtn');
         const showToolsBtn = document.getElementById('showToolsBtn');
         const showVideosBtn = document.getElementById('showVideosBtn');
-        const editJsonBtn = document.getElementById('editJsonBtn');
-        const editJsonBtnMobile = document.getElementById('editJsonBtnMobile');
+        // const editJsonBtn = document.getElementById('editJsonBtn'); // הלחצן מוסתר כרגע
+        // const editJsonBtnMobile = document.getElementById('editJsonBtnMobile'); // הלחצן מוסתר כרגע
         const refreshBtn = document.getElementById('refreshBtn');
         const refreshBtnMobile = document.getElementById('refreshBtnMobile');
 
         // State
         let currentCategory = 'all';
         let currentSearchTerm = '';
-        let toolsData = JSON.parse(JSON.stringify(defaultToolsData));
+        let toolsData = { tools: [], videos: [] }; // Initialize empty
 
-        // Initialize
-        function init() {
-            loadData();
+        // Initialize - Make it async
+        async function init() {
+            await loadData(); // Wait for data to load
             renderTools();
-            renderVideos();
+            renderVideos(); // Call the specific renderVideos function
             updateStats();
             setupEventListeners();
+            // Set initial active filter button
+            const allFilterBtn = document.querySelector('.filter-btn[data-category="all"]');
+            if (allFilterBtn) {
+                 allFilterBtn.classList.add('active');
+            }
+        }
+
+        // Fetch default data from JSON files
+        async function fetchDefaultData() {
+            try {
+                const [toolsResponse, videosResponse] = await Promise.all([
+                    fetch('tools.json'),
+                    fetch('videos.json')
+                ]);
+
+                if (!toolsResponse.ok || !videosResponse.ok) {
+                   throw new Error(`HTTP error! status: ${toolsResponse.status} / ${videosResponse.status}`);
+                }
+
+                const [toolsArray, videosArray] = await Promise.all([
+                    toolsResponse.json(),
+                    videosResponse.json()
+                ]);
+
+                return { tools: toolsArray, videos: videosArray };
+            } catch (error) {
+                console.error("Failed to fetch default data:", error);
+                alert("שגיאה בטעינת נתוני ברירת המחדל. נסה לרענן את הדף.");
+                return { tools: [], videos: [] }; // Return empty structure on error
+            }
         }
 
-        // Load data from localStorage or use default
-        function loadData() {
+        // Load data from localStorage or fetch default from JSON
+        async function loadData() {
             const savedData = localStorage.getItem('aiToolsData');
             if (savedData) {
-                toolsData = JSON.parse(savedData);
+                try {
+                    toolsData = JSON.parse(savedData);
+                    // Basic validation: ensure it has tools and videos arrays
+                    if (!Array.isArray(toolsData.tools) || !Array.isArray(toolsData.videos)) {
+                        console.warn("Invalid data structure in localStorage. Fetching defaults.");
+                        toolsData = await fetchDefaultData();
+                        saveData(); // Save the fetched defaults
+                    }
+                } catch (e) {
+                    console.error("Error parsing data from localStorage:", e);
+                    toolsData = await fetchDefaultData(); // Fetch defaults if parsing fails
+                    saveData(); // Save the fetched defaults
+                }
             } else {
-                toolsData = JSON.parse(JSON.stringify(defaultToolsData));
-                saveData();
+                toolsData = await fetchDefaultData(); // Fetch defaults if no saved data
+                saveData(); // Save the fetched defaults to localStorage
             }
         }
 
         // Save data to localStorage
         function saveData() {
-            localStorage.setItem('aiToolsData', JSON.stringify(toolsData));
+            try {
+                localStorage.setItem('aiToolsData', JSON.stringify(toolsData));
+            } catch (e) {
+                console.error("Error saving data to localStorage:", e);
+                alert("שגיאה בשמירת הנתונים. ייתכן שהאחסון המקומי מלא.");
+            }
         }
 
-        // Render tools based on filters
+        // Render tools based on filters (Modified slightly for safety)
         function renderTools() {
+            if (!toolsContainer || !toolsData || !Array.isArray(toolsData.tools)) {
+                 console.error("Cannot render tools: Missing container or invalid data.");
+                 return;
+            }
             const filteredTools = filterTools();
-            
-            toolsContainer.innerHTML = '';
-            
-            filteredTools.forEach(tool => {
-                const toolCard = document.createElement('div');
-                toolCard.className = `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">
-                            <i class="${tool.icon} text-xl"></i>
-                        </div>
-                        <div>
-                            <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>
+
+            toolsContainer.innerHTML = ''; // Clear previous tools
+
+            if (filteredTools.length === 0) {
+                toolsContainer.innerHTML = '<p class="text-center text-gray-500 col-span-full">לא נמצאו כלים התואמים את החיפוש או הסינון.</p>';
+            } else {
+                filteredTools.forEach(tool => {
+                    const toolCard = document.createElement('div');
+                    // Add relative positioning for potential future badges (like admin edit)
+                    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 || 'fas fa-question-circle'} 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>
                         </div>
-                    </div>
-                    <p class="text-gray-700 mb-4">${tool.description}</p>
-                    <div class="flex justify-between items-center">
-                        <div class="flex">
-                            ${renderRatingStars(tool.rating)}
+                        <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 || 0)}
+                            </div>
+                            ${tool.isNew ? '<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full">חדש!</span>' : ''}
                         </div>
-                        ${tool.isNew ? '<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">חדש!</span>' : ''}
-                    </div>
-                    <a href="${tool.url}" target="_blank" class="mt-4 inline-block w-full text-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
-                        <i class="fas fa-external-link-alt ml-2"></i> גישה לכלי
-                    </a>
-                `;
-                
-                toolsContainer.appendChild(toolCard);
-            });
+                        <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);
+                });
+            }
+        }
+
+        // Helper to get YouTube ID (Keep as is)
+        function getYouTubeID(url) {
+            if (!url) return '';
+            const match = url.match(/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/))([^?&\/\s]+)/);
+            return match ? match[1] : '';
         }
 
-        // Render videos
+        // Render videos (Keep mostly as is, just ensure data source is correct)
         function renderVideos() {
-            videosContainer.innerHTML = '';
-            
-            toolsData.videos.forEach(video => {
-                const videoCard = document.createElement('div');
-                videoCard.className = 'bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden';
-                
-                videoCard.innerHTML = `
-                    <div class="relative pt-[56.25%]">
-                        <iframe class="absolute top-0 left-0 w-full h-full" src="${video.url}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-                    </div>
-                    <div class="p-4">
-                        <h3 class="text-lg font-semibold mb-2">${video.title}</h3>
-                        <p class="text-gray-600 text-sm mb-3">${video.description}</p>
-                        <p class="text-gray-500 text-xs">${formatDate(video.date)}</p>
-                    </div>
-                `;
-                
-                videosContainer.appendChild(videoCard);
-            });
+            if (!videosContainer || !toolsData || !Array.isArray(toolsData.videos)) {
+                console.error("Cannot render videos: Missing container or invalid data.");
+                return; // Prevent errors if data isn't ready or invalid
+            }
+
+            videosContainer.innerHTML = ''; // Clear previous videos
+
+            if (toolsData.videos.length === 0) {
+                 videosContainer.innerHTML = '<p class="text-center text-gray-500 col-span-full">אין סרטונים להצגה.</p>';
+            } else {
+                toolsData.videos.forEach(video => {
+                    const videoId = getYouTubeID(video.url);
+                    // If we can't get an ID, maybe skip or show a placeholder? For now, generate embed URL anyway.
+                    const embedUrl = videoId ? `https://www.youtube.com/embed/${videoId}` : '#'; // Use '#' or a placeholder URL if ID is missing
+
+                    const videoCard = document.createElement('div');
+                    videoCard.className = 'bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden';
+
+                    videoCard.innerHTML = `
+                        <div class="relative pt-[56.25%] ${!videoId ? 'bg-gray-200 flex items-center justify-center' : ''}">
+                            ${videoId ? `
+                            <iframe class="absolute top-0 left-0 w-full h-full" src="${embedUrl}" frameborder="0"
+                                title="${video.title || 'YouTube video'}"
+                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                                allowfullscreen></iframe>
+                            ` : `
+                            <p class="text-gray-500 text-sm">קישור וידאו לא תקין</p>
+                            `}
+                        </div>
+                        <div class="p-4">
+                            <h3 class="text-lg font-semibold mb-2">${video.title || 'כותרת חסרה'}</h3>
+                            <p class="text-gray-600 text-sm mb-3 min-h-[40px]">${video.description || 'אין תיאור זמין.'}</p>
+                            <p class="text-gray-500 text-xs">${formatDate(video.date)}</p>
+                        </div>
+                    `;
+
+                    videosContainer.appendChild(videoCard);
+                });
+            }
         }
 
-        // Filter tools based on category and search term
+        // Filter tools (Modified slightly for safety)
         function filterTools() {
+            if (!toolsData || !Array.isArray(toolsData.tools)) {
+                 return []; // Return empty array if data is not ready
+            }
             return toolsData.tools.filter(tool => {
-                const matchesCategory = currentCategory === 'all' || tool.category === currentCategory;
-                const matchesSearch = tool.name.toLowerCase().includes(currentSearchTerm.toLowerCase()) || 
-                                     tool.description.toLowerCase().includes(currentSearchTerm.toLowerCase());
-                return matchesCategory && matchesSearch;
+                const nameMatch = tool.name && tool.name.toLowerCase().includes(currentSearchTerm.toLowerCase());
+                const descMatch = tool.description && tool.description.toLowerCase().includes(currentSearchTerm.toLowerCase());
+                const categoryMatch = tool.category && tool.category.toLowerCase().includes(currentSearchTerm.toLowerCase()); // Optional: search category name too
+                const matchesSearch = nameMatch || descMatch || categoryMatch;
+
+                const matchesCategoryFilter = currentCategory === 'all' || tool.category === currentCategory;
+
+                return matchesCategoryFilter && matchesSearch;
             });
         }
 
-        // Update statistics
+        // Update statistics (Modified slightly for safety)
         function updateStats() {
-            totalToolsElement.textContent = toolsData.tools.length;
-            
-            const topRatedCount = toolsData.tools.filter(tool => tool.rating >= 4).length;
+            const toolsCount = (toolsData && Array.isArray(toolsData.tools)) ? toolsData.tools.length : 0;
+            totalToolsElement.textContent = toolsCount;
+
+            const topRatedCount = toolsCount > 0 ? toolsData.tools.filter(tool => tool.rating >= 4).length : 0;
             topRatedElement.textContent = topRatedCount;
-            
-            const newToolsCount = toolsData.tools.filter(tool => tool.isNew).length;
+
+            const newToolsCount = toolsCount > 0 ? toolsData.tools.filter(tool => tool.isNew).length : 0;
             newToolsElement.textContent = newToolsCount;
-            
-            const categories = new Set(toolsData.tools.map(tool => tool.category));
+
+            const categories = toolsCount > 0 ? new Set(toolsData.tools.map(tool => tool.category)) : new Set();
             totalCategoriesElement.textContent = categories.size;
         }
 
-        // Render rating stars
+        // Render rating stars (Keep as is)
         function renderRatingStars(rating) {
-            let stars = '';
-            for (let i = 1; i <= 5; i++) {
-                if (i <= rating) {
-                    stars += '<i class="fas fa-star text-yellow-400"></i>';
-                } else {
-                    stars += '<i class="far fa-star text-yellow-400"></i>';
-                }
-            }
-            return stars;
+             let stars = '';
+             const filledStars = Math.max(0, Math.min(5, Math.round(rating || 0))); // Ensure rating is between 0 and 5
+             for (let i = 1; i <= 5; i++) {
+                 if (i <= filledStars) {
+                     stars += '<i class="fas fa-star text-yellow-400"></i>';
+                 } else {
+                     stars += '<i class="far fa-star text-gray-300"></i>'; // Use gray for empty stars
+                 }
+             }
+             return stars;
         }
 
-        // Get category name in Hebrew
+        // Get category name (Keep as is, maybe add a default)
         function getCategoryName(category) {
             const categories = {
                 'productivity': 'פרודוקטיביות',
                 'writing': 'כתיבה',
                 'design': 'עיצוב',
                 'coding': 'תכנות',
-                'video': 'וידאו'
+                'video': 'וידאו',
+                'image': 'תמונה',
+                'education': 'חינוך',
+                'data': 'נתונים',
+                'search': 'חיפוש',
+                'builder': 'בנייה',
+                'customer-support': 'תמיכה',
+                'automation': 'אוטומציה',
+                'hosting': 'אחסון',
+                'agents': 'סוכנים',
+                'directory': 'אינדקס',
+                'utility': 'כלי עזר',
+                'platform': 'פלטפורמה',
+                'media': 'מדיה',
+                'presentation': 'מצגות',
+                'audio': 'שמע',
+                'infrastructure': 'תשתיות',
+                'nlp': 'עיבוד שפה',
+                'accessibility': 'נגישות'
+                // Add other categories from your JSON here
             };
-            return categories[category] || category;
+            return categories[category] || category || 'כללי'; // Return category key or 'כללי' if null/undefined
         }
 
-        // Get category color
+        // Get category color (Add more colors or a default)
         function getCategoryColor(category) {
             const colors = {
                 'productivity': 'bg-blue-600',
                 'writing': 'bg-purple-600',
                 'design': 'bg-pink-600',
                 'coding': 'bg-green-600',
-                'video': 'bg-red-600'
+                'video': 'bg-red-600',
+                'image': 'bg-yellow-600',
+                'education': 'bg-indigo-600',
+                'data': 'bg-cyan-600',
+                'search': 'bg-teal-600',
+                'builder': 'bg-orange-600',
+                'customer-support': 'bg-lime-600',
+                'automation': 'bg-sky-600',
+                'hosting': 'bg-amber-600',
+                'agents': 'bg-violet-600',
+                'directory': 'bg-fuchsia-600',
+                'utility': 'bg-rose-600',
+                'platform': 'bg-emerald-600',
+                'media': 'bg-stone-600',
+                'presentation': 'bg-red-500',
+                'audio': 'bg-blue-500',
+                'infrastructure': 'bg-gray-700',
+                'nlp': 'bg-purple-500',
+                'accessibility': 'bg-green-500'
+                // Add more as needed
             };
-            return colors[category] || 'bg-gray-600';
+            return colors[category] || 'bg-gray-600'; // Default color
         }
 
-        // Get category badge color
+        // Get category badge color (Add more or a default)
         function getCategoryBadgeColor(category) {
             const colors = {
                 'productivity': 'bg-blue-100 text-blue-800',
                 'writing': 'bg-purple-100 text-purple-800',
                 'design': 'bg-pink-100 text-pink-800',
                 'coding': 'bg-green-100 text-green-800',
-                'video': 'bg-red-100 text-red-800'
+                'video': 'bg-red-100 text-red-800',
+                'image': 'bg-yellow-100 text-yellow-800',
+                'education': 'bg-indigo-100 text-indigo-800',
+                'data': 'bg-cyan-100 text-cyan-800',
+                'search': 'bg-teal-100 text-teal-800',
+                'builder': 'bg-orange-100 text-orange-800',
+                'customer-support': 'bg-lime-100 text-lime-800',
+                'automation': 'bg-sky-100 text-sky-800',
+                'hosting': 'bg-amber-100 text-amber-800',
+                'agents': 'bg-violet-100 text-violet-800',
+                'directory': 'bg-fuchsia-100 text-fuchsia-800',
+                'utility': 'bg-rose-100 text-rose-800',
+                'platform': 'bg-emerald-100 text-emerald-800',
+                'media': 'bg-stone-100 text-stone-800',
+                'presentation': 'bg-red-100 text-red-800',
+                'audio': 'bg-blue-100 text-blue-800',
+                'infrastructure': 'bg-gray-200 text-gray-800',
+                'nlp': 'bg-purple-100 text-purple-800',
+                'accessibility': 'bg-green-100 text-green-800'
+                 // Add more as needed
             };
-            return colors[category] || 'bg-gray-100 text-gray-800';
+            return colors[category] || 'bg-gray-100 text-gray-800'; // Default badge color
         }
 
-        // Format date
+        // Format date (Keep as is, maybe add error handling)
         function formatDate(dateString) {
-            const options = { year: 'numeric', month: 'long', day: 'numeric' };
-            return new Date(dateString).toLocaleDateString('he-IL', options);
+            if (!dateString) return 'תאריך לא זמין';
+            try {
+                // Handle potential non-standard date formats if necessary
+                const date = new Date(dateString);
+                 // Check if date is valid
+                 if (isNaN(date.getTime())) {
+                     return 'תאריך לא תקין';
+                 }
+                const options = { year: 'numeric', month: 'long', day: 'numeric' };
+                return date.toLocaleDateString('he-IL', options);
+            } catch (e) {
+                console.error("Error formatting date:", dateString, e);
+                return 'תאריך לא תקין';
+            }
         }
 
-        // Setup event listeners
+
+        // Setup event listeners (Update refresh button logic)
         function setupEventListeners() {
             // Search input
             searchInput.addEventListener('input', (e) => {
@@ -1850,16 +2053,18 @@
                 mobileMenu.classList.toggle('open');
             });
 
-            // JSON Editor Modal
-            editJsonBtn.addEventListener('click', () => {
-                jsonEditor.value = JSON.stringify(toolsData.tools, null, 2);
+            // JSON Editor Modal (Keep as is, but consider removing buttons if not admin)
+             const openEditorHandler = () => {
+                // Default to showing tools first
+                showToolsBtn.click(); // Simulate click to set initial state
                 jsonEditorModal.classList.remove('hidden');
-            });
+             };
 
-            editJsonBtnMobile.addEventListener('click', () => {
-                jsonEditor.value = JSON.stringify(toolsData.tools, null, 2);
-                jsonEditorModal.classList.remove('hidden');
-            });
+            // If Edit buttons exist, add listeners
+            // const editJsonBtn = document.getElementById('editJsonBtn');
+            // const editJsonBtnMobile = document.getElementById('editJsonBtnMobile');
+            // if (editJsonBtn) editJsonBtn.addEventListener('click', openEditorHandler);
+            // if (editJsonBtnMobile) editJsonBtnMobile.addEventListener('click', openEditorHandler);
 
             closeModalBtn.addEventListener('click', () => {
                 jsonEditorModal.classList.add('hidden');
@@ -1873,15 +2078,18 @@
                 try {
                     const newData = JSON.parse(jsonEditor.value);
                     if (showToolsBtn.classList.contains('bg-blue-600')) {
+                        if (!Array.isArray(newData)) throw new Error("Data must be an array.");
                         toolsData.tools = newData;
                     } else {
+                         if (!Array.isArray(newData)) throw new Error("Data must be an array.");
                         toolsData.videos = newData;
                     }
-                    saveData();
+                    saveData(); // Save changes to localStorage
                     renderTools();
-                    renderVideos();
+                    renderVideos(); // Re-render videos as well
                     updateStats();
                     jsonEditorModal.classList.add('hidden');
+                    alert("הנתונים נשמרו בהצלחה (באחסון המקומי).");
                 } catch (e) {
                     alert('JSON לא תקין: ' + e.message);
                 }
@@ -1903,26 +2111,57 @@
                 jsonEditor.value = JSON.stringify(toolsData.videos, null, 2);
             });
 
-            // Refresh buttons
-            refreshBtn.addEventListener('click', () => {
-                toolsData = JSON.parse(JSON.stringify(defaultToolsData));
-                saveData();
-                renderTools();
-                renderVideos();
-                updateStats();
-            });
+            // Refresh buttons - Load default data from JSON files
+            const refreshHandler = async () => {
+                if (confirm("פעולה זו תחליף את כל הנתונים הנוכחיים (כולל שינויים שביצעת בעורך) בנתוני ברירת המחדל. האם להמשיך?")) {
+                    console.log("Refreshing data from default JSON files...");
+                    toolsData = await fetchDefaultData(); // Fetch the defaults
+                    saveData(); // Overwrite localStorage with defaults
+                    renderTools();
+                    renderVideos();
+                    updateStats();
+                    // Reset filters and search
+                    searchInput.value = '';
+                    currentSearchTerm = '';
+                    filterButtons.forEach(btn => btn.classList.remove('active'));
+                     const allFilterBtn = document.querySelector('.filter-btn[data-category="all"]');
+                     if (allFilterBtn) {
+                         allFilterBtn.classList.add('active');
+                     }
+                    currentCategory = 'all';
+                    renderTools(); // Render again with reset filters
+                    alert("הנתונים רועננו לערכי ברירת המחדל.");
+                }
+            };
 
-            refreshBtnMobile.addEventListener('click', () => {
-                toolsData = JSON.parse(JSON.stringify(defaultToolsData));
-                saveData();
-                renderTools();
-                renderVideos();
-                updateStats();
-            });
+            refreshBtn.addEventListener('click', refreshHandler);
+            refreshBtnMobile.addEventListener('click', refreshHandler);
         }
 
-        // Initialize the app
+        // Initialize the app when the DOM is ready
         document.addEventListener('DOMContentLoaded', init);
+
+        // --- Keep the separate getYouTubeID and renderVideos for DOMContentLoaded if needed ---
+        // Although the main init() now calls renderVideos after data loading,
+        // keeping this might be a fallback or part of the original structure you wanted.
+        // It's slightly redundant now if init() works correctly.
+        /*
+        function getYouTubeID(url) { // Already defined above, potentially remove this duplicate
+            const match = url.match(/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/))([^?&\/\s]+)/);
+            return match ? match[1] : '';
+        }
+
+        function renderVideos() { // Already defined above, potentially remove this duplicate
+             // ... (implementation is identical to the one inside the main script block) ...
+        }
+
+        window.addEventListener('DOMContentLoaded', () => {
+            // This might run before init() finishes loading data if init is slow.
+            // It's safer to rely on init() calling renderVideos.
+            // renderVideos();
+        });
+        */
+
     </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=theWitcher/sagi-ai-tools" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</body>
 </html>