add youtube

index.html

@@ -203,8 +203,8 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
                 <div class="hidden md:flex items-center space-x-4 space-x-reverse">
                     <!-- /* --- Refresh Button - Still useful for resetting filters/sort --- */ -->
                     <button id="refreshBtn" class="px-5 py-2 rounded-xl bg-gradient-to-l from-blue-600 to-indigo-500 text-white shadow-md hover:shadow-lg hover:from-blue-700 hover:to-indigo-600 transition-all duration-300">
-  <i class="fas fa-sync-alt ml-2"></i> אפס תצוגה
-</button>
+                        <i class="fas fa-sync-alt ml-2"></i> אפס תצוגה
+                    </button>
 
                     
                     <!-- /* --- Admin Edit Button - Uncomment if needed --- */ -->
@@ -412,6 +412,15 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
             </div>
         </div>
     </div>
+    <div id="videoModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center hidden z-[9999]">
+        <div class="bg-white rounded-lg overflow-hidden w-full max-w-3xl shadow-lg relative">
+            <button onclick="closeVideoModal()" class="absolute top-2 left-2 text-gray-700 hover:text-red-600 text-xl">
+            <i class="fas fa-times"></i>
+            </button>
+            <iframe id="videoIframe" class="w-full h-[300px] sm:h-[500px]" src="" frameborder="0" allowfullscreen></iframe>
+        </div>
+    </div>
+
 
 
     <!-- /* --- Footer --- */ -->
@@ -750,28 +759,38 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
                 
                 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">
+                        <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>
-                        <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>' : ''}
+                            
+                            <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 class="flex items-center gap-2">
+                            <div class="flex">${renderRatingStars(tool.rating)}</div>
+                            ${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>` : ''
+                            }
+                        </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>`;
+                        <i class="fas fa-external-link-alt ml-2"></i> ${tool.url !== '#' ? 'גישה לכלי' : 'אין קישור'}
+                    </a>
+                `;
+
                 
                 toolsContainer.appendChild(toolCard);
                 });
@@ -1065,6 +1084,20 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
             console.error(err);
         }
         });
+        function openVideoModal(url) {
+            const modal = document.getElementById('videoModal');
+            const iframe = document.getElementById('videoIframe');
+            iframe.src = url;
+            modal.classList.remove('hidden');
+            }
+
+            function closeVideoModal() {
+            const modal = document.getElementById('videoModal');
+            const iframe = document.getElementById('videoIframe');
+            iframe.src = "";
+            modal.classList.add('hidden');
+        };
+
     </script>
     <!-- /* --------------------------------- */
     /* ------- END OF JAVASCRIPT ------- */

tools.json

@@ -484,6 +484,7 @@
     "description": "איך ליצור סוכן מבוסס GPT בהתאמה אישית באמצעות OpenAI.",
     "category": "productivity",
     "url": "https://chatgpt.com/gpts",
+    "video": "https://www.youtube.com/embed/iSIWAGgUIcg",
     "icon": "fas fa-robot",
     "rating": 5,
     "isNew": false,
@@ -639,6 +640,17 @@
     "isNew": false,
     "isFeatured": false
   },
+  {
+    "name": "iVrit",
+    "description": "מנוע דיבור בעברית – תומך בקול טבעי עד 30 שניות. מצוין לקריינות קלה.",
+    "category": "audio",
+    "url": "https://www.ivrit.ai/he/174-2/",
+    "video": "https://www.youtube.com/embed/MQy9afP0VKw",
+    "icon": "fas fa-language",
+    "rating": 3,
+    "isNew": false,
+    "isFeatured": false
+  },  
   {
     "name": "Jasper",
     "description": "מחולל תוכן אוטומטי שעוזר בכתיבת טקסטים שיווקיים ובלוגים.",
@@ -1175,6 +1187,7 @@
     "description": "מזכירות AI לפגישות – כולל סיכומים אוטומטיים לזום, קישורים, מעקב משימות ושיתוף.",
     "category": "productivity",
     "url": "https://timeos.com/",
+    "video": "https://www.youtube.com/embed/nkogPCmzyjY",
     "icon": "fas fa-clock",
     "rating": 4,
     "isNew": false,
@@ -1261,16 +1274,6 @@
     "isNew": false,
     "isFeatured": false
   },
-  {
-    "name": "Virit.ai",
-    "description": "מנוע דיבור בעברית – תומך בקול טבעי עד 30 שניות. מצוין לקריינות קלה.",
-    "category": "audio",
-    "url": "https://www.ivrit.ai/he/174-2/",
-    "icon": "fas fa-language",
-    "rating": 3,
-    "isNew": false,
-    "isFeatured": false
-  },
   {
     "name": "UChat",
     "description": "פלטפורמת בניית צ’אטבוטים מתקדמת – כולל אוטומציות, ווב-הוקים, אינטגרציה לוואטסאפ ועוד.",