| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
| <!DOCTYPE html> |
| <html dir="rtl" lang="he"> |
| <head> |
| <link rel="icon" href="/favicon-32x32.png" type="image/x-icon" sizes="32x32"/> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <meta property="og:title" content="הכירו את ארגז הכלים של שגיא בר און"> |
| <meta property="og:description" content="כנסו עכשיו לכלי המדהים שלנו!"> |
| <meta property="og:image" content="https://thewitcher-sagi-ai-tools.static.hf.space/sagi_ai_toolbox.png"> |
| <meta property="og:url" content="https://thewitcher-sagi-ai-tools.static.hf.space"> |
| <meta property="og:type" content="website"> |
| <meta name="twitter:card" content="summary_large_image"> |
|
|
| <title>ארגז הכלים שלי לבינה מלאכותית</title> |
| <link |
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" |
| rel="stylesheet" |
| /> |
|
|
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Arimo', sans-serif; |
| background-color: #f9fafb; |
| } |
| |
| .tool-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), |
| 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .category-filter .active { |
| background-color: #3b82f6; |
| color: white; |
| } |
| |
| .gradient-text { |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| |
| |
| [dir='rtl'] .rotate-180 { |
| transform: rotate(180deg); |
| } |
| |
| |
| .mobile-menu { |
| max-height: 0; |
| overflow: hidden; |
| transition: max-height 0.3s ease-out; |
| } |
| |
| .mobile-menu.open { |
| max-height: 500px; |
| } |
| .share-btn.yt { color:#FF0000; } |
| |
| .rating-stars { gap:4px; } |
| |
| |
| .admin-badge { |
| position: absolute; |
| top: -8px; |
| right: -8px; |
| background-color: #ef4444; |
| color: white; |
| border-radius: 9999px; |
| width: 20px; |
| height: 20px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 10px; |
| } |
| |
| |
| .profile-container { |
| position: relative; |
| width: 200px; |
| height: 200px; |
| margin: 0 auto; |
| } |
| |
| .profile-image { |
| width: 100%; |
| height: 100%; |
| border-radius: 50%; |
| object-fit: cover; |
| border: 4px solid #3b82f6; |
| box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); |
| position: relative; |
| z-index: 2; |
| } |
| |
| .tech-circle { |
| position: absolute; |
| border-radius: 50%; |
| border: 2px solid rgba(59, 130, 246, 0.7); |
| animation: rotate infinite linear; |
| } |
| |
| .tech-circle-1 { |
| width: 220px; |
| height: 220px; |
| top: -10px; |
| left: -10px; |
| animation-duration: 15s; |
| border-style: dashed; |
| } |
| |
| .tech-circle-2 { |
| width: 240px; |
| height: 240px; |
| top: -20px; |
| left: -20px; |
| animation-duration: 20s; |
| animation-direction: reverse; |
| } |
| |
| .tech-circle-3 { |
| width: 260px; |
| height: 260px; |
| top: -30px; |
| left: -30px; |
| animation-duration: 25s; |
| border-style: dotted; |
| } |
| |
| @keyframes rotate { |
| from { |
| transform: rotate(0deg); |
| } |
| to { |
| transform: rotate(360deg); |
| } |
| } |
| @media (min-width: 768px) { |
| .share-btn { |
| width: 48px; |
| height: 48px; |
| font-size: 24px; |
| } |
| } |
| |
| .tech-dots { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| border-radius: 50%; |
| z-index: 1; |
| } |
| |
| .tech-dot { |
| position: absolute; |
| width: 8px; |
| height: 8px; |
| background-color: #8b5cf6; |
| border-radius: 50%; |
| transform: translate(-50%, -50%); |
| } |
| |
| |
| .ai-particle { |
| position: absolute; |
| background: linear-gradient(135deg, #3b82f6, #8b5cf6); |
| border-radius: 50%; |
| opacity: 0.6; |
| filter: blur(10px); |
| z-index: 0; |
| } |
| |
| .ai-circuit { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| background-image: radial-gradient( |
| circle at center, |
| transparent 0%, |
| #f9fafb 100% |
| ), |
| linear-gradient( |
| 90deg, |
| transparent 49%, |
| rgba(59, 130, 246, 0.1) 50%, |
| transparent 51% |
| ), |
| linear-gradient( |
| 0deg, |
| transparent 49%, |
| rgba(59, 130, 246, 0.1) 50%, |
| transparent 51% |
| ); |
| background-size: 20px 20px; |
| border-radius: 50%; |
| opacity: 0.3; |
| } |
| |
| .clickable-stat:hover { |
| cursor: pointer; |
| background-color: #f3f4f6; |
| } |
| |
| .share-buttons { |
| display: flex; |
| justify-content: center; |
| gap: 24px; |
| margin-top: 32px; |
| } |
| |
| .share-btn{ |
| width:40px;height:40px; |
| font-size:22px; |
| color:#fff; |
| background:currentColor; |
| border:none;border-radius:12px; |
| display:flex;align-items:center;justify-content:center; |
| box-shadow:0 4px 12px rgba(0,0,0,.08); |
| transition:transform .2s,filter .2s; |
| } |
| .share-btn:hover{transform:translateY(-4px);filter:brightness(1.12);} |
| .share-btn i{color:#fff;} |
| |
| |
| .share-btn.wa{color:#25D366;} |
| .share-btn.fb{color:#1877F2;} |
| .share-btn.tw{color:#1DA1F2;} |
| .share-btn.cp{color:#64748b;} |
| |
| .share-btn img { |
| width: 32px; |
| height: 32px; |
| } |
| |
| @media (max-width: 768px) { |
| .favorite-btn { |
| |
| right: 10px; |
| top: 10px; |
| } |
| } |
| |
| .tool-header { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| margin-bottom: 10px; |
| } |
| |
| .tool-logo { |
| width: 50px; |
| height: 50px; |
| } |
| |
| .tool-name { |
| font-size: 1.5rem; |
| font-weight: bold; |
| text-align: center; |
| } |
| |
| .category-chip { |
| background: linear-gradient(90deg, #f3f4f6 60%, #e0e7ff 100%); |
| color: #3730a3; |
| border: 1px solid #a5b4fc; |
| box-shadow: 0 2px 8px rgba(59, 130, 246, 0.07); |
| transition: background 0.2s; |
| } |
| .category-chip i { |
| color: #6366f1; |
| } |
| |
| |
| .toast-container { |
| position: fixed; |
| bottom: 20px; |
| right: 20px; |
| z-index: 9999; |
| } |
| |
| .toast { |
| background: rgba(0, 0, 0, 0.8); |
| color: white; |
| padding: 12px 24px; |
| border-radius: 8px; |
| margin-top: 10px; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| animation: slideIn 0.3s ease-out, fadeOut 0.3s ease-out 2.7s; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
| } |
| |
| .toast i { |
| color: #4ade80; |
| } |
| |
| @keyframes slideIn { |
| from { |
| transform: translateX(100%); |
| opacity: 0; |
| } |
| to { |
| transform: translateX(0); |
| opacity: 1; |
| } |
| } |
| |
| @keyframes fadeOut { |
| from { |
| opacity: 1; |
| } |
| to { |
| opacity: 0; |
| } |
| } |
| </style> |
| |
| <script |
| async |
| src="https://www.googletagmanager.com/gtag/js?id=G-JVF8N1DVSG" |
| ></script> |
| <script> |
| window.dataLayer = window.dataLayer || []; |
| function gtag() { |
| dataLayer.push(arguments); |
| } |
| gtag('js', new Date()); |
| |
| gtag('config', 'G-JVF8N1DVSG'); |
| </script> |
| <link href="favicon-32.png" rel="icon" sizes="32x32" type="image/png" /> |
| <link href="manifest.json" rel="manifest" /> |
| <meta content="yes" name="apple-mobile-web-app-capable" /> |
| <meta content="AI Tools" name="apple-mobile-web-app-title" /> |
| <link href="icon-192.png" rel="apple-touch-icon" /> |
| <meta content="#3b82f6" name="theme-color" /> |
| </head> |
| <body class="min-h-screen"> |
| <div |
| id="newToolBanner" |
| class="hidden bg-green-100 text-green-800 text-center py-2 text-sm font-semibold" |
| > |
| 🎉 התווסף כלי חדש: <span id="newToolName"></span> – |
| <a href="#toolsContainer" class="underline">צפו עכשיו</a> |
| <button id="closeBanner" class="ml-4 text-green-800 font-bold">×</button> |
| </div> |
|
|
| |
| <header |
| class="sticky top-0 z-50 backdrop-blur-md bg-white/80 shadow-md border-b border-gray-200" |
| > |
| <div class="container mx-auto px-4 py-4"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| |
| <button id="mobileMenuButton" class="md:hidden text-gray-600 mr-4"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
|
|
| <div> |
| <h1 class="text-2xl md:text-3xl font-bold gradient-text"> |
| ארגז הכלים שלי ל-AI |
| </h1> |
| <p class="text-gray-600 text-sm md:text-base mt-1"> |
| אוסף כלי הבינה המלאכותית המומלצים שלי |
| </p> |
| </div> |
| </div> |
|
|
| <div class="hidden md:flex items-center space-x-4 space-x-reverse"> |
| |
| <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> |
|
|
| |
| <button |
| id="editJsonBtn" |
| class="px-5 py-2 rounded-xl bg-gradient-to-l from-pink-500 to-purple-600 text-white shadow-md hover:shadow-lg hover:from-pink-600 hover:to-purple-700 transition-all duration-300 relative" |
| > |
| <i class="fas fa-edit ml-2"></i> הציעו כלי חדש |
| <span class="admin-badge">N</span> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="mobileMenu" class="mobile-menu md:hidden mt-4"> |
| <div class="flex flex-col space-y-2 py-2"> |
| <button |
| id="refreshBtnMobile" |
| 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> |
| |
| <button |
| id="editJsonBtn" |
| class="px-5 py-2 rounded-xl bg-gradient-to-l from-pink-500 to-purple-600 text-white shadow-md hover:shadow-lg hover:from-pink-600 hover:to-purple-700 transition-all duration-300 relative" |
| > |
| <i class="fas fa-edit ml-2"></i> הציעו כלי חדש |
| <span class="admin-badge">N</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| |
| <div |
| class="bg-white rounded-lg shadow-sm p-6 border border-gray-100 mb-8 relative overflow-hidden" |
| > |
| |
| <div |
| class="ai-particle" |
| style="width: 100px; height: 100px; top: -30px; right: -30px" |
| ></div> |
| <div |
| class="ai-particle" |
| style="width: 150px; height: 150px; bottom: -50px; left: -50px" |
| ></div> |
| <div |
| class="ai-particle" |
| style="width: 80px; height: 80px; top: 50%; right: 20%" |
| ></div> |
|
|
| <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-2"> |
| קצת עליי |
| </h2> |
| <div class="flex flex-col md:flex-row gap-6"> |
| <div class="md:w-1/3"> |
| <div class="profile-container"> |
| <div class="ai-circuit"></div> |
| <div class="tech-circle tech-circle-1"></div> |
| <div class="tech-circle tech-circle-2"></div> |
| <div class="tech-circle tech-circle-3"></div> |
| <div class="tech-dots"> |
| <div class="tech-dot" style="top: 10%; left: 50%"></div> |
| <div class="tech-dot" style="top: 50%; left: 10%"></div> |
| <div class="tech-dot" style="top: 90%; left: 50%"></div> |
| <div class="tech-dot" style="top: 50%; left: 90%"></div> |
| <div class="tech-dot" style="top: 30%; left: 30%"></div> |
| <div class="tech-dot" style="top: 70%; left: 70%"></div> |
| <div class="tech-dot" style="top: 30%; left: 70%"></div> |
| <div class="tech-dot" style="top: 70%; left: 30%"></div> |
| </div> |
| <img |
| src="https://i.imgur.com/cnlxCuj.jpeg" |
| alt="שגיא בר און" |
| class="profile-image" |
| /> |
| </div> |
| </div> |
| <div class="md:w-2/3"> |
| <h3 class="text-xl font-semibold mb-4">שגיא בר און</h3> |
| <p class="text-gray-700 mb-4"> |
| אני חוקר ויועץ בתחום הבינה המלאכותית, מאסטר NLP, ובעל ניסיון של |
| למעלה מ-25 שנה בתעשיית ההייטק. בעל מומחיות רחבה בפיתוח תוכנה, |
| אוטומציה, ניהול פרויקטים ואסטרטגיה עסקית. |
| </p> |
| <p class="text-gray-700 mb-4"> |
| מרצה אורח באוניברסיטת רייכמן וחבר בסגל הבוחנים של מה"ט - המכון |
| הממשלתי להכשרה בטכנולוגיה ובמדע - לבחינות מהנדסי תוכנה |
| באוניברסיטאות ובמכללות, וכן מנטור לAI במסגרת משרד החינוך. |
| </p> |
| <p class="text-gray-700 mb-4"> |
| בעל תואר שני במנהל עסקים עם התמחות בבינה מלאכותית, תואר ראשון |
| (BSc) במדעי המחשב והנדסאי תוכנה. ההרצאות משלבות ידע עדכני, חשיבה |
| ביקורתית והתנסות חווייתית, מתוך מטרה להעצים אנשים ולאפשר להם |
| להשתמש בטכנולוגיה בחוכמה ובקלות. |
| </p> |
| <p class="text-gray-700"> |
| שמתי לי למטרה להנגיש, להסביר ולחבר את הטכנולוגיה בצורה פשוטה |
| וברורה לכולם. |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-8"> |
| |
| <div |
| class="flex flex-col md:flex-row md:items-center md:justify-between gap-4" |
| > |
| <div class="relative w-full md:w-96"> |
| <input |
| type="text" |
| id="searchInput" |
| placeholder="חפש כלים..." |
| class="w-full pr-10 pl-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition" |
| /> |
| <i class="fas fa-search absolute right-3 top-3.5 text-gray-400"></i> |
| </div> |
| <div class="flex items-center space-x-2 space-x-reverse"> |
| <span class="text-gray-600 hidden md:block">סנן לפי:</span> |
| <div class="category-filter flex flex-wrap gap-2"> |
| <button |
| class="filter-btn px-3 py-1 rounded-full border text-sm transition border-gray-300 text-gray-700 bg-white hover:bg-blue-50" |
| data-category="all" |
| > |
| הכל |
| </button> |
| <button |
| class="filter-btn px-3 py-1 rounded-full border text-sm transition border-yellow-400 text-yellow-700 bg-yellow-100 hover:bg-yellow-200" |
| data-category="free" |
| > |
| חינם |
| </button> |
| <button |
| class="filter-btn px-3 py-1 rounded-full border text-sm transition border-gray-300 text-gray-700 bg-white hover:bg-blue-50" |
| data-category="productivity" |
| > |
| פרודוקטיביות |
| </button> |
| <button |
| class="filter-btn px-3 py-1 rounded-full border text-sm transition border-gray-300 text-gray-700 bg-white hover:bg-blue-50" |
| data-category="writing" |
| > |
| כתיבה |
| </button> |
| <button |
| class="filter-btn px-3 py-1 rounded-full border text-sm transition border-gray-300 text-gray-700 bg-white hover:bg-blue-50" |
| data-category="design" |
| > |
| עיצוב |
| </button> |
| <button |
| class="filter-btn px-3 py-1 rounded-full border text-sm transition border-gray-300 text-gray-700 bg-white hover:bg-blue-50" |
| data-category="coding" |
| > |
| תכנות |
| </button> |
| <button |
| class="filter-btn px-3 py-1 rounded-full border text-sm transition border-gray-300 text-gray-700 bg-white hover:bg-blue-50" |
| data-category="video" |
| > |
| וידאו |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8"> |
| |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-blue-50 text-blue-600 ml-3"> |
| <i class="fas fa-tools text-lg"></i> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">סה"כ כלים</p> |
| <h3 class="text-xl font-semibold" id="totalTools">0</h3> |
| </div> |
| </div> |
| </div> |
| <div |
| id="topRatedStatBox" |
| class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 transition clickable-stat" |
| > |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-purple-50 text-purple-600 ml-3"> |
| <i class="fas fa-star text-lg"></i> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">מובילים בדירוג</p> |
| <h3 class="text-xl font-semibold" id="topRated">0</h3> |
| </div> |
| </div> |
| </div> |
| <div |
| id="newToolsStatBox" |
| class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 transition clickable-stat" |
| > |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-green-50 text-green-600 ml-3"> |
| <i class="fas fa-bolt text-lg"></i> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">חדשים השבוע</p> |
| <h3 class="text-xl font-semibold" id="newTools">0</h3> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-yellow-50 text-yellow-600 ml-3"> |
| <i class="fas fa-tags text-lg"></i> |
| </div> |
| <div> |
| <p class="text-gray-500 text-sm">קטגוריות</p> |
| <h3 class="text-xl font-semibold" id="totalCategories">0</h3> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div |
| class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" |
| id="toolsContainer" |
| > |
| |
| <p id="loadingMessage" class="text-center text-gray-500 col-span-full"> |
| טוען כלים... |
| </p> |
| </div> |
|
|
| |
| <div class="mt-16"> |
| |
| <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-2"> |
| סרטונים נבחרים מערוץ היוטיוב שלי |
| </h2> |
| <div |
| class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" |
| id="videosContainer" |
| > |
| |
| </div> |
| </div> |
| </main> |
|
|
| |
| <div |
| id="jsonEditorModal" |
| class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" |
| > |
| |
| <div |
| class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] flex flex-col" |
| > |
| <div |
| class="px-6 py-4 border-b border-gray-200 flex justify-between items-center" |
| > |
| <h3 class="text-lg font-semibold">עריכת הנתונים ב-JSON</h3> |
| <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="p-6 flex-1 overflow-auto"> |
| <div class="flex mb-4"> |
| <button |
| id="showToolsBtn" |
| class="px-4 py-2 bg-blue-600 text-white rounded-l-lg" |
| > |
| כלים |
| </button> |
| <button |
| id="showVideosBtn" |
| class="px-4 py-2 bg-gray-200 text-gray-700 rounded-r-lg" |
| > |
| סרטונים |
| </button> |
| </div> |
| <textarea |
| id="jsonEditor" |
| class="w-full h-96 p-4 border border-gray-300 rounded-lg font-mono text-sm" |
| spellcheck="false" |
| style="direction: ltr; text-align: left" |
| ></textarea> |
| </div> |
| <div |
| class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3 space-x-reverse" |
| > |
| <button |
| id="cancelEditBtn" |
| class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition" |
| > |
| ביטול |
| </button> |
| <button |
| id="saveJsonBtn" |
| class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition" |
| > |
| שמור שינויים (באחסון המקומי) |
| </button> |
| </div> |
| </div> |
| </div> |
| <div |
| id="suggestToolModal" |
| class="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-[9999] px-4 hidden" |
| > |
| <div |
| class="bg-white rounded-lg w-full max-w-md shadow-lg max-h-[90vh] overflow-hidden flex flex-col text-right relative" |
| > |
| |
| <div class="p-6 overflow-y-auto flex-grow"> |
| <h2 class="text-xl font-semibold mb-4">הצעת כלי חדש</h2> |
| <form id="suggestToolForm" class="space-y-4"> |
| <div> |
| <label class="block mb-1">שם הכלי</label> |
| <input |
| type="text" |
| name="name" |
| required |
| class="w-full border rounded p-2" |
| /> |
| </div> |
|
|
| <div> |
| <label class="block mb-1">לינק</label> |
| <input |
| type="url" |
| name="url" |
| required |
| placeholder="כתובת URL של הכלי: לדוגמא: https://linktr.ee/sagib" |
| dir="ltr" |
| class="w-full border rounded p-2" |
| /> |
| </div> |
|
|
| <div> |
| <label class="block mb-1">תיאור קצר</label> |
| <textarea |
| name="description" |
| required |
| class="w-full border rounded p-2" |
| ></textarea> |
| </div> |
|
|
| <div> |
| <label class="block mb-1">השם שלך</label> |
| <input |
| type="text" |
| name="userName" |
| placeholder="איך לקרוא לך כשנחזור אליך?" |
| class="w-full border rounded p-2" |
| /> |
| </div> |
|
|
| <div> |
| <label class="block mb-1">מס' טלפון נייד</label> |
| <input |
| type="tel" |
| name="userPhone" |
| placeholder="05X-XXXXXXX" |
| class="w-full border rounded p-2" |
| dir="ltr" |
| /> |
| </div> |
|
|
| <p class="text-sm text-gray-500"> |
| נשמח לחזור אליך כשהכלי שצעת נוסף לאתר ❤️ |
| </p> |
| <p class="text-sm text-gray-500 italic"> |
| ✦ הפרטים שלך נשמרים אצלנו רק לצורך עדכון – אין שימוש אחר. |
| </p> |
| </form> |
| </div> |
|
|
| |
| <div |
| class="sticky bottom-0 bg-white/80 backdrop-blur-md px-6 py-4 border-t flex justify-center space-x-4 space-x-reverse z-10 rounded-b-lg" |
| > |
| <button |
| type="button" |
| onclick="closeSuggestModal()" |
| class="px-5 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300" |
| > |
| ביטול |
| </button> |
| <button |
| type="submit" |
| form="suggestToolForm" |
| class="px-6 py-2 bg-purple-600 text-white rounded hover:bg-purple-700" |
| > |
| שלח |
| </button> |
| </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-4 right-4 bg-white bg-opacity-90 border border-gray-300 rounded-full p-3 shadow-lg text-gray-900 hover:bg-red-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-400 text-3xl z-[10000] transition-all duration-200" |
| > |
| <i class="fas fa-times"></i> |
| </button> |
| <iframe |
| id="videoIframe" |
| class="w-full h-[60vh]" |
| src="" |
| frameborder="0" |
| allowfullscreen |
| ></iframe> |
| </div> |
| </div> |
|
|
| |
| <footer |
| class="fixed bottom-0 left-0 w-full z-50 backdrop-blur-md bg-white/80 shadow-xl border-t border-gray-200" |
| > |
| |
| |
| <div id="chatBubble" class="fixed bottom-8 right-5 z-[9999]"> |
| |
| <div |
| id="chatIntro" |
| class="bg-white p-3 rounded-lg shadow-md mb-2 text-sm max-w-xs chat-intro-enter hidden" |
| > |
| שלום! אני עוזר AI של שגיא. אשמח לעזור לך למצוא כלי AI מתאים או לענות |
| על שאלות. |
| <button onclick="hideChatIntro()" class="text-gray-500 float-left"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
|
|
| |
| <button |
| id="chatButton" |
| onclick="toggleChatWindow()" |
| class="chat-pulse bg-gradient-to-r from-purple-500 to-indigo-600 hover:from-purple-600 hover:to-indigo-700 text-white px-4 py-3 rounded-full shadow-xl flex items-center space-x-2 space-x-reverse" |
| > |
| <i class="fas fa-robot"></i> |
| <span>צ'אט</span> |
| </button> |
|
|
| |
| <div |
| id="chatWindow" |
| class="hidden mt-3 w-[360px] h-[500px] bg-white rounded-2xl shadow-2xl border border-gray-200 overflow-hidden relative" |
| > |
| |
| <div |
| class="bg-gradient-to-r from-purple-500 to-indigo-600 text-white p-3 flex justify-between items-center" |
| > |
| <button onclick="toggleChatWindow()" class="text-white"> |
| <i class="fas fa-times"></i> |
| </button> |
| <div class="chat-header"> |
| צ'אט עם הבינה של שגיא |
| <span |
| id="toolsCount" |
| class="ml-2 text-sm bg-white text-purple-600 font-semibold px-2 py-1 rounded-full shadow-sm" |
| ></span> |
| </div> |
| |
| <div class="w-6"></div> |
| |
| </div> |
|
|
| |
| <iframe |
| src="https://sagi-ba-sagi-ai-tools-chatbot-main-g1prqf.streamlit.app/?embed=true" |
| class="w-full h-full border-none" |
| ></iframe> |
| </div> |
| </div> |
|
|
| <script> |
| function toggleChatWindow() { |
| const chatWindow = document.getElementById('chatWindow'); |
| chatWindow.classList.toggle('hidden'); |
| } |
| </script> |
|
|
| |
| <div class="container mx-auto px-4 py-3 text-center space-y-2"> |
| |
| <div id="installAppContainer" class="flex justify-center"> |
| <button |
| id="installAppBtn" |
| class="mt-2 px-4 py-2 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 text-white font-bold shadow hover:scale-105 transition" |
| style="display: none" |
| > |
| 📲 התקנת האפליקציה |
| </button> |
| </div> |
|
|
| <div class="flex justify-center gap-4"> |
| |
| <a |
| href="https://api.whatsapp.com/send?phone=972549995050" |
| target="_blank" |
| class="w-9 h-9 rounded-full bg-white shadow flex items-center justify-center text-green-500 hover:bg-green-500 hover:text-white transition" |
| ><i class="fab fa-whatsapp"></i |
| ></a> |
| <a |
| href="http://www.linkedin.com/in/sagi-bar-on" |
| target="_blank" |
| class="w-9 h-9 rounded-full bg-white shadow flex items-center justify-center text-blue-500 hover:bg-blue-700 hover:text-white transition" |
| ><i class="fab fa-linkedin-in"></i |
| ></a> |
| <a |
| href="https://www.facebook.com/SAGI.BARON" |
| target="_blank" |
| class="w-9 h-9 rounded-full bg-white shadow flex items-center justify-center text-blue-600 hover:bg-blue-800 hover:text-white transition" |
| ><i class="fab fa-facebook-f"></i |
| ></a> |
| <a |
| href="https://www.youtube.com/@SAGIBARON" |
| target="_blank" |
| class="w-9 h-9 rounded-full bg-white shadow flex items-center justify-center text-red-500 hover:bg-red-700 hover:text-white transition" |
| ><i class="fab fa-youtube"></i |
| ></a> |
| </div> |
| <button |
| id="editJsonBtnFooter" |
| class="px-4 py-2 rounded-xl bg-gradient-to-br from-pink-500 to-purple-600 text-white font-bold shadow hover:scale-105 transition" |
| > |
| <i class="fas fa-pen-to-square ml-2"></i> הציעו כלי חדש |
| </button> |
| <p class="text-gray-500 text-xs"> |
| © 2025 כל הזכויות שמורות לשגיא בר און |
| </p> |
| </div> |
| |
| </footer> |
|
|
| |
| <script src="https://cdn.tailwindcss.com"></script> |
|
|
| |
| |
| |
| <script> |
| // --- DOM Elements --- |
| const toolsContainer = document.getElementById('toolsContainer'); |
| const videosContainer = document.getElementById('videosContainer'); |
| const searchInput = document.getElementById('searchInput'); |
| const filterButtons = document.querySelectorAll('.filter-btn'); |
| const totalToolsElement = document.getElementById('totalTools'); |
| const topRatedElement = document.getElementById('topRated'); |
| const newToolsElement = document.getElementById('newTools'); |
| const totalCategoriesElement = document.getElementById('totalCategories'); |
| const mobileMenuButton = document.getElementById('mobileMenuButton'); |
| const mobileMenu = document.getElementById('mobileMenu'); |
| const jsonEditorModal = document.getElementById('jsonEditorModal'); |
| const jsonEditor = document.getElementById('jsonEditor'); |
| const closeModalBtn = document.getElementById('closeModalBtn'); |
| const cancelEditBtn = document.getElementById('cancelEditBtn'); |
| const saveJsonBtn = document.getElementById('saveJsonBtn'); |
| const showToolsBtn = document.getElementById('showToolsBtn'); |
| const showVideosBtn = document.getElementById('showVideosBtn'); |
| const refreshBtn = document.getElementById('refreshBtn'); |
| const refreshBtnMobile = document.getElementById('refreshBtnMobile'); |
| const loadingMessage = document.getElementById('loadingMessage'); // For showing loading status |
| |
| const topRatedStatBox = document.getElementById('topRatedStatBox'); |
| const newToolsStatBox = document.getElementById('newToolsStatBox'); |
| const totalToolsStatBox = document |
| .querySelector('[id="totalTools"]') |
| .closest('.bg-white'); |
| let filteredStatView = null; // 'topRated', 'newTools', או null |
| |
| if (totalToolsStatBox) { |
| totalToolsStatBox.classList.add('clickable-stat'); |
| totalToolsStatBox.addEventListener('click', () => { |
| filteredStatView = null; |
| currentSearchTerm = ''; |
| currentCategory = 'all'; |
| document |
| .querySelectorAll('.filter-btn') |
| .forEach((btn) => btn.classList.remove('active')); |
| const allBtn = document.querySelector( |
| '.filter-btn[data-category="all"]' |
| ); |
| if (allBtn) allBtn.classList.add('active'); |
| renderTools(); |
| scrollToTools(); |
| }); |
| } |
| |
| if (topRatedStatBox) { |
| topRatedStatBox.addEventListener('click', () => { |
| filteredStatView = 'topRated'; |
| currentSearchTerm = ''; |
| currentCategory = 'all'; |
| renderTools(); |
| scrollToTools(); |
| }); |
| } |
| |
| if (newToolsStatBox) { |
| newToolsStatBox.addEventListener('click', () => { |
| filteredStatView = 'newTools'; |
| currentSearchTerm = ''; |
| currentCategory = 'all'; |
| renderTools(); |
| scrollToTools(); |
| }); |
| } |
| |
| // --- State --- |
| let currentCategory = 'all'; |
| let currentSearchTerm = ''; |
| let toolsData = { tools: [], videos: [] }; // Holds the data fetched from server |
| let currentSort = 'newest'; // 'newest', 'rating' |
| |
| // --- Initialize --- |
| async function init() { |
| showLoading('טוען נתונים...'); |
| |
| try { |
| await loadData(); // המתנה לטעינת הנתונים |
| |
| renderTools(); |
| renderVideos(); |
| updateStats(); |
| setupEventListeners(); |
| updateCategoryFilters(); // הוספת כפתור המועדפים |
| |
| // הגדרת כפתור "הכל" כפעיל בהתחלה |
| const allFilterBtn = document.querySelector( |
| '.filter-btn[data-category="all"]' |
| ); |
| if (allFilterBtn) { |
| allFilterBtn.classList.add('active'); |
| } |
| |
| hideLoading(); |
| } catch (error) { |
| console.error('שגיאה באתחול:', error); |
| showError('אירעה שגיאה בטעינת האתר. אנא נסה לרענן את הדף.'); |
| hideLoading(); |
| } |
| } |
| |
| 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'; |
| if (toolsContainer) toolsContainer.innerHTML = ''; // Clear container while loading |
| } |
| |
| function hideLoading() { |
| if (loadingMessage) loadingMessage.style.display = 'none'; |
| } |
| |
| function showError(message) { |
| if (toolsContainer) { |
| toolsContainer.innerHTML = `<p class="text-center text-red-600 col-span-full">${message}</p>`; |
| } |
| hideLoading(); // Make sure loading message is hidden |
| } |
| |
| // --- Data Fetching --- |
| async function fetchDefaultData() { |
| console.log('Fetching latest data from server...'); // Log fetching attempt |
| try { |
| const [toolsResponse, videosResponse] = await Promise.all([ |
| fetch('tools.json?cacheBust=' + Date.now()), // Cache busting |
| fetch('videos.json?cacheBust=' + Date.now()), // Cache busting |
| ]); |
| |
| if (!toolsResponse.ok || !videosResponse.ok) { |
| const errorMsg = `HTTP error! Status: Tools ${toolsResponse.status}, Videos ${videosResponse.status}`; |
| console.error(errorMsg); |
| throw new Error('שגיאה בקבלת נתונים מהשרת.'); // User-friendly error |
| } |
| |
| const [toolsArray, videosArray] = await Promise.all([ |
| toolsResponse.json(), |
| videosResponse.json(), |
| ]); |
| |
| // --- Process fetched data with defaults --- |
| const processedTools = toolsArray.map((tool) => ({ |
| ...tool, |
| rating: tool.rating ?? 0, |
| isNew: tool.isNew ?? false, |
| category: tool.category ?? 'general', |
| icon: tool.icon || 'fas fa-tools', |
| url: tool.url || '#', |
| description: tool.description || 'אין תיאור זמין.', |
| name: tool.name || 'שם לא ידוע', |
| })); |
| const processedVideos = videosArray.map((video) => ({ |
| ...video, |
| url: video.url || '#', |
| title: video.title || 'כותרת חסרה', |
| description: video.description || 'אין תיאור זמין.', |
| date: video.date ?? new Date().toISOString(), |
| })); |
| |
| console.log('Data fetched successfully.'); |
| return { tools: processedTools, videos: processedVideos }; |
| } catch (error) { |
| console.error('Failed to fetch default data:', error); |
| // Re-throw the error or a more specific one to be caught by the caller |
| throw new Error( |
| 'כשל בטעינת נתוני ברירת המחדל מהשרת. בדוק את הקבצים tools.json ו-videos.json.' |
| ); |
| } |
| } |
| |
| // --- Data Loading Strategy --- |
| // MODIFIED: Always fetch fresh data from the server on load. |
| async function loadData() { |
| console.log('loadData called - fetching fresh data.'); |
| try { |
| toolsData = await fetchDefaultData(); |
| // Note: We are NOT saving to localStorage here anymore for loading purposes. |
| // saveData(); // Removed - No longer saving fetched data automatically |
| } catch (error) { |
| console.error('Error in loadData:', error); |
| toolsData = { tools: [], videos: [] }; // Set empty data on error |
| // Re-throw error so init() can handle UI feedback |
| throw error; |
| } |
| } |
| |
| // --- Save Data to Local Storage (Used ONLY by JSON Editor) --- |
| // Note: Data saved here will be overwritten on next page load/refresh. |
| function saveData() { |
| try { |
| // Save the current state (potentially modified by editor) to localStorage |
| localStorage.setItem('aiToolsData', JSON.stringify(toolsData)); |
| console.log( |
| 'Data saved to localStorage (by editor). Will be overwritten on next load.' |
| ); |
| } catch (e) { |
| console.error('Error saving data to localStorage:', e); |
| alert('שגיאה בשמירת הנתונים באחסון המקומי.'); |
| } |
| } |
| |
| // --- Sorting Function (Unchanged) --- |
| function sortTools(sortBy) { |
| if (!toolsData || !Array.isArray(toolsData.tools)) return; |
| console.log('Sorting by:', sortBy); |
| currentSort = sortBy; |
| toolsData.tools.sort((a, b) => { |
| if (sortBy === 'newest') { |
| const aIsNew = a.isNew || false; |
| const bIsNew = b.isNew || false; |
| if (aIsNew !== bIsNew) return bIsNew - aIsNew; |
| return 0; |
| } else if (sortBy === 'rating') { |
| const aRating = a.rating || 0; |
| const bRating = b.rating || 0; |
| if (bRating !== aRating) return bRating - aRating; |
| return 0; |
| } |
| 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() { |
| 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; |
| } |
| const filteredTools = filterTools(); |
| toolsContainer.innerHTML = ''; // Clear previous content |
| |
| if ( |
| filteredTools.length === 0 && |
| currentSearchTerm === '' && |
| currentCategory === 'all' |
| ) { |
| // Show specific message if no tools loaded at all |
| showError('לא נטענו כלים. בדוק את קובץ tools.json או נסה לרענן.'); |
| } else if (filteredTools.length === 0) { |
| toolsContainer.innerHTML = |
| '<p class="text-center text-gray-500 col-span-full">לא נמצאו כלים התואמים את החיפוש, הסינון והמיון.</p>'; |
| } else { |
| 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' : '' |
| }`; |
| |
| // הכנת הטקסט להקראה - שילוב של שם הכלי והתיאור שלו |
| const speakableText = `${tool.name}. ${tool.description}`; |
| |
| // הוספת מאפיין לסינון כלים חינמיים |
| if (tool.free) { |
| toolCard.setAttribute('data-free', 'true'); |
| toolCard.classList.add( |
| 'border', |
| 'border-yellow-400', |
| 'shadow-md' |
| ); |
| } |
| toolCard.setAttribute('data-tool', 'true'); |
| |
| toolCard.innerHTML = ` |
| <div class="relative flex items-center gap-3 mb-2"> |
| |
| <button title="הקרא תיאור" onclick="event.stopPropagation(); speakText('${tool.description.replace(/'/g, "\\'")}')" class="speak-button absolute top-0 left-0 z-10 p-2 text-blue-600 hover:text-blue-800 focus:outline-none" style="background:rgba(255,255,255,0.8); border-radius:50%;"> |
| <i class="fas fa-volume-up"></i> |
| </button> |
| <img src="${tool.logo}" alt="${tool.name} Logo" class="tool-logo w-14 h-14 object-contain rounded bg-white p-1 shadow-sm ml-2"> |
| <h3 class="tool-name text-2xl font-bold text-gray-800">${tool.name}</h3> |
| </div> |
| <div class="flex items-center gap-2 mb-3"> |
| <span class="category-chip px-3 py-1 rounded-full font-semibold text-sm shadow-sm ${getCategoryBadgeColor(tool.category)} flex items-center gap-1"> |
| <i class="${tool.icon} text-base"></i> |
| ${getCategoryName(tool.category)} |
| </span> |
| </div> |
| <div class="flex items-center gap-2 mb-3"> |
| ${tool.isNew ? `<span class="text-xs bg-green-500 text-white px-2 py-1 rounded-full animate-pulse">חדש!</span>` : ''} |
| ${tool.free ? `<span class="text-xs bg-yellow-400 text-black px-2 py-1 rounded-full">חינם</span>` : ''} |
| <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> |
| </div> |
| <p class="text-gray-700 mb-4 text-base leading-relaxed min-h-[60px]">${tool.description}</p> |
| <div class="flex justify-center items-center gap-1 mb-4"> |
| ${renderRatingStars(tool.rating)} |
| </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> |
| ${renderShareButtons(tool)} |
| `; |
| |
| toolsContainer.appendChild(toolCard); |
| |
| // אנימציה של הופעה חלקה |
| requestAnimationFrame(() => { |
| toolCard.classList.add('visible'); |
| }); |
| }); |
| |
| // הפעלת פונקציות האתחול לאחר הוספת הכלים לדף |
| setupFavorites(); |
| setupShareButtons(); |
| |
| // הוספת סגנון 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) ... |
| if ( |
| !videosContainer || |
| !toolsData || |
| !Array.isArray(toolsData.videos) |
| ) { |
| console.error( |
| 'Cannot render videos: Missing container or invalid data.' |
| ); |
| if (videosContainer) |
| videosContainer.innerHTML = |
| '<p class="text-center text-red-500 col-span-full">שגיאה בהצגת הסרטונים.</p>'; |
| return; |
| } |
| videosContainer.innerHTML = ''; |
| 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); |
| const embedUrl = videoId |
| ? `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%] ${ |
| !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}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>` |
| : `<p class="text-gray-500 text-sm p-4">${ |
| video.url === '#' |
| ? 'אין קישור וידאו' |
| : 'קישור וידאו לא תקין' |
| }</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); |
| }); |
| } |
| } |
| |
| // --- Helper Functions (Filtering, Stats, Stars, Category, Date - Unchanged) --- |
| function filterTools() { |
| if (!toolsData || !Array.isArray(toolsData.tools)) return []; |
| |
| let filtered = toolsData.tools; |
| |
| // Filter by favorites if selected |
| 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 |
| ); |
| } |
| |
| // Search by name and description |
| 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); |
| return nameMatch || descMatch; // Include both name and description in search |
| }); |
| } |
| |
| // Check for filteredStatView |
| if (filteredStatView === 'topRated') { |
| filtered = filtered.filter((tool) => tool.rating >= 5); |
| } else if (filteredStatView === 'newTools') { |
| filtered = filtered.filter((tool) => tool.isNew); |
| } |
| |
| return filtered; |
| } |
| |
| function updateStats() { |
| /* ... (unchanged) ... */ |
| const toolsCount = |
| toolsData && Array.isArray(toolsData.tools) |
| ? toolsData.tools.length |
| : 0; |
| totalToolsElement.textContent = toolsCount; |
| const topRatedCount = |
| toolsCount > 0 |
| ? toolsData.tools.filter((tool) => tool.rating >= 5).length |
| : 0; |
| topRatedElement.textContent = topRatedCount; |
| const newToolsCount = |
| toolsCount > 0 |
| ? toolsData.tools.filter((tool) => tool.isNew).length |
| : 0; |
| newToolsElement.textContent = newToolsCount; |
| const categories = |
| toolsCount > 0 |
| ? new Set(toolsData.tools.map((tool) => tool.category)) |
| : new Set(); |
| totalCategoriesElement.textContent = categories.size; |
| } |
| |
| function renderRatingStars(rating) { |
| /* ... (unchanged) ... */ |
| let stars = ''; |
| const filledStars = Math.max(0, Math.min(5, Math.round(rating))); |
| for (let i = 1; i <= 5; i++) { |
| stars += `<i class="${ |
| i <= filledStars |
| ? 'fas fa-star text-yellow-400' |
| : 'far fa-star text-gray-300' |
| } ml-1"></i>`; |
| } |
| return stars; |
| } |
| function getCategoryName(category) { |
| /* ... (unchanged) ... */ |
| const categories = { |
| 'ai-agents': 'סוכן AI', |
| productivity: 'פרודוקטיביות', |
| writing: 'כתיבה', |
| design: 'עיצוב', |
| coding: 'תכנות', |
| video: 'וידאו', |
| image: 'תמונה', |
| education: 'חינוך', |
| data: 'נתונים', |
| search: 'חיפוש', |
| builder: 'בנייה', |
| 'customer-support': 'תמיכה', |
| automation: 'אוטומציה', |
| hosting: 'אחסון', |
| agents: 'סוכנים', |
| directory: 'אינדקס', |
| utility: 'כלי עזר', |
| platform: 'פלטפורמה', |
| media: 'מדיה', |
| presentation: 'מצגות', |
| audio: 'שמע', |
| infrastructure: 'תשתיות', |
| nlp: 'עיבוד שפה', |
| accessibility: 'נגישות', |
| general: 'כללי', |
| }; |
| return categories[category] || category || 'כללי'; |
| } |
| function getCategoryColor(category) { |
| /* ... (unchanged) ... */ |
| const colors = { |
| productivity: 'bg-blue-600', |
| writing: 'bg-purple-600', |
| design: 'bg-pink-600', |
| coding: 'bg-green-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', |
| general: 'bg-gray-600', |
| }; |
| return colors[category] || 'bg-gray-600'; |
| } |
| function getCategoryBadgeColor(category) { |
| /* ... (unchanged) ... */ |
| 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', |
| 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', |
| general: 'bg-gray-100 text-gray-800', |
| }; |
| return colors[category] || 'bg-gray-100 text-gray-800'; |
| } |
| function getYouTubeID(url) { |
| /* ... (unchanged) ... */ |
| if (!url || url === '#') return ''; |
| const match = url.match( |
| /(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/))([^?&\/\s]+)/ |
| ); |
| return match ? match[1] : ''; |
| } |
| function formatDate(dateString) { |
| /* ... (unchanged, includes fallback parsing) ... */ |
| if (!dateString) return 'תאריך לא זמין'; |
| try { |
| const date = new Date(dateString); |
| if (isNaN(date.getTime())) { |
| console.warn('Could not parse date directly:', dateString); |
| const parts = dateString.match( |
| /(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/ |
| ); |
| if (parts) { |
| const isoDate = new Date( |
| `${parts[3]}-${parts[2].padStart(2, '0')}-${parts[1].padStart( |
| 2, |
| '0' |
| )}T00:00:00Z` |
| ); |
| if (!isNaN(isoDate.getTime())) |
| return isoDate.toLocaleDateString('he-IL', { |
| year: 'numeric', |
| month: 'long', |
| day: 'numeric', |
| }); |
| } |
| return 'תאריך לא תקין'; |
| } |
| return date.toLocaleDateString('he-IL', { |
| year: 'numeric', |
| month: 'long', |
| day: 'numeric', |
| }); |
| } catch (e) { |
| console.error('Error formatting date:', dateString, e); |
| return 'תאריך לא תקין'; |
| } |
| } |
| |
| // --- Event Listeners Setup --- |
| function setupEventListeners() { |
| // Search input |
| searchInput.addEventListener('input', (e) => { |
| currentSearchTerm = e.target.value; |
| localStorage.setItem('searchTerm', currentSearchTerm); // שמור בזיכרון הדפדפן |
| renderTools(); |
| }); |
| |
| // Filter buttons |
| filterButtons.forEach((button) => { |
| button.addEventListener('click', () => { |
| filterButtons.forEach((btn) => btn.classList.remove('active')); |
| button.classList.add('active'); |
| currentCategory = button.dataset.category; |
| renderTools(); |
| }); |
| }); |
| |
| // Mobile menu toggle |
| mobileMenuButton.addEventListener('click', () => { |
| mobileMenu.classList.toggle('open'); |
| }); |
| |
| // Uncomment if using admin buttons |
| const editJsonBtn = document.getElementById('editJsonBtn'); |
| const editJsonBtnMobile = document.getElementById('editJsonBtnMobile'); |
| document |
| .getElementById('editJsonBtnFooter') |
| ?.addEventListener('click', openEditorHandler); |
| |
| if (editJsonBtn) |
| editJsonBtn.addEventListener('click', openEditorHandler); |
| if (editJsonBtnMobile) |
| editJsonBtnMobile.addEventListener('click', openEditorHandler); |
| |
| closeModalBtn.addEventListener('click', () => |
| jsonEditorModal.classList.add('hidden') |
| ); |
| cancelEditBtn.addEventListener('click', () => |
| jsonEditorModal.classList.add('hidden') |
| ); |
| |
| // JSON Editor Save Button -> Saves ONLY to localStorage for the current session |
| saveJsonBtn.addEventListener('click', () => { |
| try { |
| const rawData = JSON.parse(jsonEditor.value); |
| if (!Array.isArray(rawData)) |
| throw new Error('Data must be an array.'); |
| if (showToolsBtn.classList.contains('bg-blue-600')) { |
| // Update in-memory data and sort |
| toolsData.tools = rawData.map((tool) => ({ |
| /* add defaults */ ...tool, |
| rating: tool.rating ?? 0, |
| isNew: tool.isNew ?? false, |
| category: tool.category ?? 'general', |
| icon: tool.icon || 'fas fa-tools', |
| url: tool.url || '#', |
| description: tool.description || 'אין תיאור זמין.', |
| name: tool.name || 'שם לא ידוע', |
| })); |
| sortTools(currentSort); |
| } else { |
| toolsData.videos = rawData.map((video) => ({ |
| /* add defaults */ ...video, |
| url: video.url || '#', |
| title: video.title || 'כותרת חסרה', |
| description: video.description || 'אין תיאור זמין.', |
| date: video.date ?? new Date().toISOString(), |
| })); |
| } |
| // Save the edited data to localStorage (will be lost on next full load) |
| saveData(); |
| // Re-render the UI with the edited data for the current session |
| renderTools(); |
| renderVideos(); |
| updateStats(); |
| jsonEditorModal.classList.add('hidden'); |
| alert( |
| 'הנתונים נשמרו זמנית (באחסון המקומי). הם יתעדכנו מחדש מהשרת בטעינה הבאה של הדף.' |
| ); |
| } catch (e) { |
| alert('JSON לא תקין או שגיאה בשמירה:\n' + e.message); |
| console.error('JSON Save Error:', e); |
| } |
| }); |
| |
| showToolsBtn.addEventListener('click', () => { |
| /* ... (unchanged editor tab logic) ... */ |
| showToolsBtn.classList.add('bg-blue-600', 'text-white'); |
| showToolsBtn.classList.remove('bg-gray-200', 'text-gray-700'); |
| showVideosBtn.classList.add('bg-gray-200', 'text-gray-700'); |
| showVideosBtn.classList.remove('bg-blue-600', 'text-white'); |
| jsonEditor.value = JSON.stringify(toolsData.tools, null, 2); // Show current in-memory tools data |
| }); |
| showVideosBtn.addEventListener('click', () => { |
| /* ... (unchanged editor tab logic) ... */ |
| showVideosBtn.classList.add('bg-blue-600', 'text-white'); |
| showVideosBtn.classList.remove('bg-gray-200', 'text-gray-700'); |
| showToolsBtn.classList.add('bg-gray-200', 'text-gray-700'); |
| showToolsBtn.classList.remove('bg-blue-600', 'text-white'); |
| jsonEditor.value = JSON.stringify(toolsData.videos, null, 2); // Show current in-memory videos data |
| }); |
| |
| // Sorting stat boxes (Unchanged) |
| 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. |
| // Let's make it just reset the view state. |
| const resetViewHandler = () => { |
| console.log('Resetting view state (filters, sort, search)...'); |
| // 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'; |
| |
| // Reset sort to newest and re-render |
| sortTools('newest'); |
| renderTools(); |
| // No need to re-render videos unless their source changes, which this button doesn't do |
| // No need to update stats as the underlying data hasn't changed |
| alert('התצוגה אופסה (פילטרים, מיון וחיפוש נוקו).'); |
| }; |
| |
| refreshBtn.addEventListener('click', resetViewHandler); |
| refreshBtnMobile.addEventListener('click', resetViewHandler); |
| } |
| |
| // --- Initialize the app --- |
| document.addEventListener('DOMContentLoaded', init); |
| |
| // JSON Editor Modal Logic (If admin buttons are enabled) |
| const openEditorHandler = () => { |
| document.getElementById('suggestToolModal').classList.remove('hidden'); |
| }; |
| |
| const closeSuggestModal = () => { |
| document.getElementById('suggestToolModal').classList.add('hidden'); |
| }; |
| |
| document |
| .getElementById('suggestToolForm') |
| .addEventListener('submit', async (e) => { |
| e.preventDefault(); |
| const form = e.target; |
| const rawPhone = form.userPhone.value; |
| const cleanedPhone = rawPhone.replace(/\D/g, ''); // מסיר כל תו שאינו ספרה |
| // alert(cleanedPhone) |
| const data = { |
| name: form.name.value, |
| url: form.url.value, |
| description: form.description.value, |
| userName: form.userName.value, |
| userPhone: cleanedPhone, |
| }; |
| |
| try { |
| await fetch( |
| 'https://hook.eu2.make.com/lgo6nh36dk804dq1msfmwxo34nzf4o3y', |
| { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify(data), |
| } |
| ); |
| |
| alert('הכלי נשלח בהצלחה!'); |
| closeSuggestModal(); |
| form.reset(); |
| } catch (err) { |
| alert('שגיאה בשליחה 😢'); |
| console.error(err); |
| } |
| }); |
| function openVideoModal(url) { |
| const modal = document.getElementById('videoModal'); |
| const iframe = document.getElementById('videoIframe'); |
| |
| // Check if the URL is a YouTube link |
| if (url.includes('youtube.com') || url.includes('youtu.be')) { |
| iframe.src = url; |
| } else { |
| // For direct video URLs, create a video element |
| iframe.outerHTML = ` |
| <video id="videoIframe" controls class="w-full h-[60vh]"> |
| <source src="${url}" type="video/mp4"> |
| Your browser does not support the video tag. |
| </video> |
| `; |
| } |
| modal.classList.remove('hidden'); |
| } |
| |
| function closeVideoModal() { |
| const modal = document.getElementById('videoModal'); |
| const videoElement = document.getElementById('videoIframe'); |
| |
| if (videoElement.tagName === 'VIDEO') { |
| videoElement.pause(); |
| videoElement.outerHTML = '<iframe id="videoIframe" class="w-full h-[60vh]" frameborder="0" allowfullscreen></iframe>'; |
| } else { |
| videoElement.src = ''; |
| } |
| modal.classList.add('hidden'); |
| } |
| fetch('tools.json') |
| .then((res) => res.json()) |
| .then((tools) => { |
| const count = tools.length; |
| document.getElementById( |
| 'toolsCount' |
| ).textContent = `${count} כלים זמינים`; |
| }) |
| .catch((err) => { |
| console.error('שגיאה בטעינת כמות הכלים:', err); |
| document.getElementById('toolsCount').textContent = 'טעינה נכשלה'; |
| }); |
| function showNewToolBanner() { |
| const tools = toolsData.tools; |
| const lastSeenToolDate = localStorage.getItem('lastSeenToolDate'); |
| const newTools = tools.filter((tool) => tool.isNew); |
| if (newTools.length === 0) return; |
| |
| const latestTool = newTools.reduce((latest, tool) => { |
| return new Date(tool.dateAdded) > new Date(latest.dateAdded) |
| ? tool |
| : latest; |
| }, newTools[0]); |
| |
| if ( |
| !lastSeenToolDate || |
| new Date(latestTool.dateAdded) > new Date(lastSeenToolDate) |
| ) { |
| const banner = document.getElementById('newToolBanner'); |
| const toolNameSpan = document.getElementById('newToolName'); |
| const closeBtn = document.getElementById('closeBanner'); |
| |
| toolNameSpan.textContent = latestTool.name; |
| banner.classList.remove('hidden'); |
| const viewNowLink = banner.querySelector('a'); |
| viewNowLink.addEventListener('click', (e) => { |
| e.preventDefault(); |
| filteredStatView = 'newTools'; |
| currentCategory = 'all'; |
| currentSearchTerm = ''; |
| renderTools(); |
| scrollToTools(); |
| }); |
| |
| closeBtn.addEventListener('click', () => { |
| banner.classList.add('hidden'); |
| localStorage.setItem('lastSeenToolDate', latestTool.dateAdded); |
| }); |
| } |
| } |
| |
| if ('serviceWorker' in navigator) { |
| navigator.serviceWorker |
| .register('/service-worker.js') |
| .then(() => console.log('Service Worker registered successfully.')) |
| .catch((err) => |
| console.error('Service Worker registration failed:', err) |
| ); |
| } |
| |
| let deferredPrompt; |
| const installBtn = document.getElementById('installAppBtn'); |
| const container = document.getElementById('installAppContainer'); |
| |
| window.addEventListener('beforeinstallprompt', (e) => { |
| e.preventDefault(); |
| deferredPrompt = e; |
| installBtn.style.display = 'inline-block'; |
| |
| installBtn.addEventListener('click', () => { |
| deferredPrompt.prompt(); |
| deferredPrompt.userChoice.then((choiceResult) => { |
| if (choiceResult.outcome === 'accepted') { |
| console.log('User accepted the A2HS prompt'); |
| installBtn.style.display = 'none'; |
| } else { |
| console.log('User dismissed the A2HS prompt'); |
| } |
| deferredPrompt = null; |
| }); |
| }); |
| }); |
| // פונקציה להצגת כפתורי שיתוף |
| function renderShareButtons(tool) { |
| if (!tool.url || tool.url === '#') return ''; |
| |
| 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="share-buttons mt-4"> |
| |
| |
| <div class="flex justify-center items-center mb-4"> |
| <div class="flex items-center gap-3"> |
| |
| ${ |
| tool.video |
| ? ` |
| <button class="share-btn yt" |
| data-platform="youtube" |
| data-video="${tool.video}" |
| aria-label="צפייה בהדרכה" |
| title="צפייה בהדרכה"> |
| <i class="fab fa-youtube"></i> |
| </button>` |
| : '' |
| } |
| </div> |
| </div> |
| |
| <button class="share-btn fb" data-platform="facebook" data-url="${tool.url}" data-title="${tool.name}" aria-label="שיתוף בפייסבוק" title="לחצו כדי לשתף את הכלי"> |
| <i class="fab fa-facebook-f"></i> |
| </button> |
| <button class="share-btn wa" data-platform="whatsapp" data-url="${tool.url}" data-title="${tool.name}" aria-label="שיתוף ב-WhatsApp" title="לחצו כדי לשתף את הכלי"> |
| <i class="fab fa-whatsapp"></i> |
| </button> |
| <button class="share-btn tw" data-platform="twitter" data-url="${tool.url}" data-title="${tool.name}" aria-label="שיתוף בטוויטר" title="לחצו כדי לשתף את הכלי"> |
| <i class="fab fa-twitter"></i> |
| </button> |
| <button class="share-btn cp" data-platform="copy" data-url="${tool.url}" aria-label="העתקת קישור" title="לחצו כדי לשתף את הכלי"> |
| <i class="fas fa-link"></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() { |
| const TOOLBOX_LINK = 'https://bit.ly/a-tools'; |
| |
| // Create toast container if it doesn't exist |
| if (!document.querySelector('.toast-container')) { |
| const toastContainer = document.createElement('div'); |
| toastContainer.className = 'toast-container'; |
| document.body.appendChild(toastContainer); |
| } |
| |
| // Function to show toast |
| function showToast(message) { |
| const toastContainer = document.querySelector('.toast-container'); |
| const toast = document.createElement('div'); |
| toast.className = 'toast'; |
| toast.innerHTML = ` |
| <i class="fas fa-check-circle"></i> |
| <span>${message}</span> |
| `; |
| toastContainer.appendChild(toast); |
| |
| // Remove toast after animation |
| setTimeout(() => { |
| toast.remove(); |
| }, 3000); |
| } |
| |
| document.querySelectorAll('.share-btn').forEach((btn) => { |
| btn.addEventListener('click', async () => { |
| const platform = btn.dataset.platform; // facebook | twitter | whatsapp | copy |
| const toolUrl = btn.dataset.url; // קישור ישיר לכלי |
| const title = btn.dataset.title || 'כלי AI'; // שם הכלי עם ברירת מחדל |
| |
| /* === טקסט שיתוף אחד לכל הערוצים === */ |
| const shareMsg = |
| `בדקו את הכלי ${title} בלינק: ${toolUrl}\n\n` + |
| `מארגז הכלים של שגיא בר-און בכתובת: ${TOOLBOX_LINK}`; |
| |
| /* ---------- העתקה ללוח ---------- */ |
| if (platform === 'copy') { |
| try { |
| await navigator.clipboard.writeText(shareMsg); |
| showToast('הטקסט הועתק בהצלחה! 📋'); |
| } catch { |
| alert('לא הצלחנו להעתיק – נסה ידנית'); |
| } |
| return; |
| } |
| if (platform === 'youtube') { |
| openVideoModal(btn.dataset.video); // כבר קיים בקובץ |
| return; |
| } |
| /* ---------- קידוד וכתובת שיתוף ---------- */ |
| const encodedMsg = encodeURIComponent(shareMsg); |
| const encodedUrl = encodeURIComponent(toolUrl); // ל‑Preview |
| let shareUrl = ''; |
| |
| switch (platform) { |
| case 'facebook': // כרטיס של הכלי, טקסט מלא |
| shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}"e=${encodedMsg}`; |
| break; |
| case 'twitter': // כרטיס + טקסט |
| shareUrl = `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedMsg}`; |
| break; |
| case 'whatsapp': // הכול בטקסט אחד – וואטסאפ מציג שני הלינקים |
| shareUrl = `https://api.whatsapp.com/send?text=${encodedMsg}`; |
| break; |
| default: |
| shareUrl = encodedUrl; |
| } |
| |
| window.open(shareUrl, '_blank', 'noopener,noreferrer,width=600,height=500'); |
| }); |
| }); |
| } |
| |
| |
| |
| // פונקציה להוספת כפתור המועדפים לאזור הקטגוריות |
| 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> |
|
|
| |
| |
| |
| </body> |
| </html> |
|
|
