Spaces:

theWitcher
/

sagi-ai-tools

Running

App Files Files Community

theWitcher commited on Apr 13

Commit

757db24

1 Parent(s): 8f521f6

add new banner and new tools

Browse files

Files changed (3) hide show

index.html +102 -12
style.css +9 -0
tools.json +31 -16

index.html CHANGED Viewed

@@ -4,6 +4,8 @@ https://huggingface.co/spaces/theWitcher/sagi-ai-tools
 https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
 -->
 <!DOCTYPE html>
@@ -184,6 +186,12 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
     </script>
 </head>
 <body class="min-h-screen">
     <!-- Header -->
     <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">
@@ -529,9 +537,46 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
         const showVideosBtn = document.getElementById('showVideosBtn');
         const refreshBtn = document.getElementById('refreshBtn');
         const refreshBtnMobile = document.getElementById('refreshBtnMobile');
         const topRatedStatBox = document.getElementById('topRatedStatBox');
         const newToolsStatBox = document.getElementById('newToolsStatBox');
-        const loadingMessage = document.getElementById('loadingMessage'); // For showing loading status
         // --- State ---
         let currentCategory = 'all';
@@ -541,23 +586,24 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
         // --- Initialize ---
         async function init() {
-            showLoading(); // Show loading message
             try {
-                // --- שחזור ערך חיפוש קיים מהאחסון המקומי (אם קיים) ---
                 const savedSearch = localStorage.getItem('searchTerm');
                 if (savedSearch) {
                     searchInput.value = savedSearch;
                     currentSearchTerm = savedSearch;
                 }
-                await loadData(); // Load fresh data from server on init
-                sortTools(currentSort); // Apply default sort
                 renderTools();
                 renderVideos();
                 updateStats();
                 setupEventListeners();
-                // Set initial active filter button (רק אם אין חיפוש)
                 if (!currentSearchTerm) {
                     const allFilterBtn = document.querySelector('.filter-btn[data-category="all"]');
                     if (allFilterBtn) {
@@ -573,6 +619,7 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
         }
         const speechSynthesis = window.speechSynthesis;
         let currentUtterance = null;
@@ -797,9 +844,10 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
                             <img src="${tool.logo}" alt="${tool.name} Logo" class="w-14 h-14 object-contain rounded bg-white p-1 shadow-sm">
                             <div>
-                                <!-- שם הכלי וכפתור רמקול -->
                                 <div class="flex items-center gap-2">
                                     <h3 class="text-xl font-semibold">${tool.name}</h3>
                                     <button title="הקרא תיאור" onclick="event.stopPropagation(); speakText('${tool.description.replace(/'/g, "\\'")}')" class="text-blue-600 hover:text-blue-800 focus:outline-none">
                                         <i class="fas fa-volume-up"></i>
                                     </button>
@@ -836,9 +884,7 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
                         <i class="fas fa-external-link-alt ml-2"></i> ${tool.url !== '#' ? 'גישה לכלי' : 'אין קישור'}
                     </a>
                 `;
                 toolsContainer.appendChild(toolCard);
                 });
                 // אנימציה של הופעה חלקה
@@ -932,7 +978,16 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
         // --- Helper Functions (Filtering, Stats, Stars, Category, Date - Unchanged) ---
         function filterTools() {
             if (!toolsData || !Array.isArray(toolsData.tools)) return [];
-            return toolsData.tools.filter(tool => {
                 const searchTermLower = currentSearchTerm.toLowerCase();
                 const nameMatch = tool.name.toLowerCase().includes(searchTermLower);
                 const descMatch = tool.description.toLowerCase().includes(searchTermLower);
@@ -946,7 +1001,7 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
         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 >= 4).length : 0;
             topRatedElement.textContent = topRatedCount;
             const newToolsCount = toolsCount > 0 ? toolsData.tools.filter(tool => tool.isNew).length : 0;
             newToolsElement.textContent = newToolsCount;
@@ -1174,6 +1229,41 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
             console.error("שגיאה בטעינת כמות הכלים:", err);
             document.getElementById('toolsCount').textContent = 'טעינה נכשלה';
         });
     </script>
     <!-- /* --------------------------------- */
     /* ------- END OF JAVASCRIPT ------- */

 https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
+https://bit.ly/a-tools
 -->
 <!DOCTYPE html>
     </script>
 </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 -->
     <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">
         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';
         // --- Initialize ---
         async function init() {
+            showLoading();
             try {
                 const savedSearch = localStorage.getItem('searchTerm');
                 if (savedSearch) {
                     searchInput.value = savedSearch;
                     currentSearchTerm = savedSearch;
                 }
+                await loadData(); // ← הנתונים נטענים כאן
+                sortTools(currentSort);
                 renderTools();
                 renderVideos();
                 updateStats();
                 setupEventListeners();
+                // 👇 כאן נוסיף את הקריאה לבאנר לאחר שהכלים נטענו
+                showNewToolBanner();
                 if (!currentSearchTerm) {
                     const allFilterBtn = document.querySelector('.filter-btn[data-category="all"]');
                     if (allFilterBtn) {
         }
         const speechSynthesis = window.speechSynthesis;
         let currentUtterance = null;
                             <img src="${tool.logo}" alt="${tool.name} Logo" class="w-14 h-14 object-contain rounded bg-white p-1 shadow-sm">
                             <div>
+                                <!-- שם הכלי, תגית 'חדש!' וכפתור רמקול -->
                                 <div class="flex items-center gap-2">
                                     <h3 class="text-xl font-semibold">${tool.name}</h3>
+                                    ${tool.isNew ? `<span class="text-xs bg-green-500 text-white px-2 py-1 rounded-full animate-pulse">חדש!</span>` : ''}
                                     <button title="הקרא תיאור" onclick="event.stopPropagation(); speakText('${tool.description.replace(/'/g, "\\'")}')" class="text-blue-600 hover:text-blue-800 focus:outline-none">
                                         <i class="fas fa-volume-up"></i>
                                     </button>
                         <i class="fas fa-external-link-alt ml-2"></i> ${tool.url !== '#' ? 'גישה לכלי' : 'אין קישור'}
                     </a>
                 `;
                 toolsContainer.appendChild(toolCard);
                 });
                 // אנימציה של הופעה חלקה
         // --- Helper Functions (Filtering, Stats, Stars, Category, Date - Unchanged) ---
         function filterTools() {
             if (!toolsData || !Array.isArray(toolsData.tools)) return [];
+            let filtered = toolsData.tools;
+            if (filteredStatView === 'topRated') {
+                filtered = filtered.filter(tool => tool.rating === 5);
+            } else if (filteredStatView === 'newTools') {
+                filtered = filtered.filter(tool => tool.isNew);
+            }
+            return filtered.filter(tool => {
                 const searchTermLower = currentSearchTerm.toLowerCase();
                 const nameMatch = tool.name.toLowerCase().includes(searchTermLower);
                 const descMatch = tool.description.toLowerCase().includes(searchTermLower);
         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;
             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);
+                });
+            }
+        }
     </script>
     <!-- /* --------------------------------- */
     /* ------- END OF JAVASCRIPT ------- */

style.css CHANGED Viewed

@@ -82,6 +82,15 @@ p {
     color: white;
     border-color: #666;
 }
  /* Chat animations and effects */
 @keyframes pulse {

     color: white;
     border-color: #666;
 }
+#newToolBanner {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+}
+.hidden {
+  display: none;
+}
  /* Chat animations and effects */
 @keyframes pulse {

tools.json CHANGED Viewed

@@ -1,4 +1,18 @@
 [
   {
     "name": "Adobe Firefly",
     "description": "המערכת של אדובי ליצירת תוכן גרפי מתיאורים – כולל טקסטים, צבעים, וסטיילים.",
@@ -6,9 +20,9 @@
     "url": "https://firefly.adobe.com/",
     "logo":"https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Adobe_Firefly_Logo.svg/512px-Adobe_Firefly_Logo.svg.png",
     "icon": "fas fa-fire",
-    "rating": 4,
-    "isNew": false,
-    "isFeatured": false
   },
   {
   "name": "שיפור סאונד עם Adobe Podcast AI",
@@ -18,9 +32,10 @@
   "category": "audio",
   "icon": "fas fa-volume-up",
   "video": "https://www.youtube.com/embed/pfebhGgaNBA?si=GjBTJFyuVHAjoDnd",
-  "isNew": false,
-  "isFeatured": false,
-  "rating": 5
   },
   {
   "name": "היפוך כיוון תצוגה באתר",
@@ -299,7 +314,7 @@
     "logo": "https://logosandtypes.com/wp-content/uploads/2025/02/Deepseek.png",
     "icon": "fas fa-search",
     "rating": 4.5,
-    "isNew": true,
     "isFeatured": false
   },
   {
@@ -455,7 +470,7 @@
     "logo":"https://media.licdn.com/dms/image/v2/D560BAQE-bb2bxfUU3A/company-logo_200_200/company-logo_200_200/0/1718684112316?e=2147483647&v=beta&t=nAPQuZC2xjW6G30auki753slYNEdM-lWOXPJEQDSxnA",
     "icon": "fas fa-pen-nib",
     "rating": 4,
-    "isNew": true,
     "isFeatured": false
   },
   {
@@ -521,7 +536,7 @@
     "logo":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvr3EyhGPtM5HKhe6wz98i_xbcq1-IVmIfAcFRR-OQXCaDtD-cniUT3qlkemNQ1mgMHMA&usqp=CAU",
     "icon": "fas fa-robot",
     "rating": 5,
-    "isNew": true,
     "isFeatured": false
   },
   {
@@ -666,7 +681,7 @@
     "logo":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7BWkd-_2Mai34fI4zacUOJqyIQ84txeBYtQ&s",
     "icon": "fas fa-tshirt",
     "rating": 4,
-    "isNew": true,
     "isFeatured": false
   },
   {
@@ -777,7 +792,7 @@
     "logo":"https://play-lh.googleusercontent.com/JOfjXqsShK8j1aGBc1xlHBnatoRKRwLsGuoFZUAvKksaEPvK71eLwSg4FbKlky9Es-s",
     "icon": "fas fa-video",
     "rating": 4,
-    "isNew": true,
     "isFeatured": false
   },
   {
@@ -844,7 +859,7 @@
     "logo":"https://lovable.dev/icon.svg?3d7ac3d2bb57ecbe",
     "icon": "fas fa-magic",
     "rating": 4,
-    "isNew": true,
     "isFeatured": false
   },
   {
@@ -877,7 +892,7 @@
     "logo":"https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/manus.png",
     "icon": "fas fa-robot",
     "rating": 4,
-    "isNew": true,
     "isFeatured": false
   },
   {
@@ -1034,7 +1049,7 @@
     "logo":"https://openai-tts-fm.vercel.app/icons/favicon.ico",
     "icon": "fas fa-volume-up",
     "rating": 4,
-    "isNew": true,
     "isFeatured": false
   },
   {
@@ -1438,7 +1453,7 @@
     "category": "ocr",
     "icon": "fas fa-file-alt",
     "video": "https://www.youtube.com/embed/vdaXGeOyvbE?si=AJz1NPiEnfnklArg",
-    "isNew": true,
     "isFeatured": true,
     "rating": 5
   },
@@ -1450,7 +1465,7 @@
   "category": "image",
   "icon": "fas fa-image",
   "video": "https://www.youtube.com/embed/vXvVxbjTBVw?si=Ep8aVPMF0NB48_Q8",
-  "isNew": true,
   "isFeatured": true,
   "rating": 5
 },

 [
+  {
+  "name": "יצירת פודקאסט AI בחינם",
+  "description": "צרו שיחות פודקאסט בין שני דוברים בנושאים שמעניינים אתכם. בחרו נושא או העלו קובץ PDF, והמערכת תיצור עבורכם תסריט שיחה עם תוכן מעניין ומידע אמין, תפיק אודיו טבעי, ותאפשר לכם להוריד ולשתף את הפודקאסט המוכן.",
+  "url": "https://example.com/ai-podcast-creator",
+  "logo": "https://user-images.githubusercontent.com/397895/34431097-350197f6-ec29-11e7-8369-0c4069a65fd3.jpg",
+  "category": "audio",
+  "icon": "fas fa-podcast",
+  "video": "https://www.youtube.com/watch?v=example",
+  "isFeatured": false,
+  "rating": 4,
+  "isNew": true,
+  "dateAdded": "2025-04-13T10:30:00Z"
+  },
   {
     "name": "Adobe Firefly",
     "description": "המערכת של אדובי ליצירת תוכן גרפי מתיאורים – כולל טקסטים, צבעים, וסטיילים.",
     "url": "https://firefly.adobe.com/",
     "logo":"https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Adobe_Firefly_Logo.svg/512px-Adobe_Firefly_Logo.svg.png",
     "icon": "fas fa-fire",
+    "rating": 4,
+    "isFeatured": false,
+    "isNew": false
   },
   {
   "name": "שיפור סאונד עם Adobe Podcast AI",
   "category": "audio",
   "icon": "fas fa-volume-up",
   "video": "https://www.youtube.com/embed/pfebhGgaNBA?si=GjBTJFyuVHAjoDnd",
+  "rating": 5,
+  "isFeatured": false,
+  "isNew": false
   },
   {
   "name": "היפוך כיוון תצוגה באתר",
     "logo": "https://logosandtypes.com/wp-content/uploads/2025/02/Deepseek.png",
     "icon": "fas fa-search",
     "rating": 4.5,
+    "isNew": false,
     "isFeatured": false
   },
   {
     "logo":"https://media.licdn.com/dms/image/v2/D560BAQE-bb2bxfUU3A/company-logo_200_200/company-logo_200_200/0/1718684112316?e=2147483647&v=beta&t=nAPQuZC2xjW6G30auki753slYNEdM-lWOXPJEQDSxnA",
     "icon": "fas fa-pen-nib",
     "rating": 4,
+    "isNew": false,
     "isFeatured": false
   },
   {
     "logo":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvr3EyhGPtM5HKhe6wz98i_xbcq1-IVmIfAcFRR-OQXCaDtD-cniUT3qlkemNQ1mgMHMA&usqp=CAU",
     "icon": "fas fa-robot",
     "rating": 5,
+    "isNew": false,
     "isFeatured": false
   },
   {
     "logo":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7BWkd-_2Mai34fI4zacUOJqyIQ84txeBYtQ&s",
     "icon": "fas fa-tshirt",
     "rating": 4,
+    "isNew": false,
     "isFeatured": false
   },
   {
     "logo":"https://play-lh.googleusercontent.com/JOfjXqsShK8j1aGBc1xlHBnatoRKRwLsGuoFZUAvKksaEPvK71eLwSg4FbKlky9Es-s",
     "icon": "fas fa-video",
     "rating": 4,
+    "isNew": false,
     "isFeatured": false
   },
   {
     "logo":"https://lovable.dev/icon.svg?3d7ac3d2bb57ecbe",
     "icon": "fas fa-magic",
     "rating": 4,
+    "isNew": false,
     "isFeatured": false
   },
   {
     "logo":"https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/light/manus.png",
     "icon": "fas fa-robot",
     "rating": 4,
+    "isNew": false,
     "isFeatured": false
   },
   {
     "logo":"https://openai-tts-fm.vercel.app/icons/favicon.ico",
     "icon": "fas fa-volume-up",
     "rating": 4,
+    "isNew": false,
     "isFeatured": false
   },
   {
     "category": "ocr",
     "icon": "fas fa-file-alt",
     "video": "https://www.youtube.com/embed/vdaXGeOyvbE?si=AJz1NPiEnfnklArg",
+    "isNew": false,
     "isFeatured": true,
     "rating": 5
   },
   "category": "image",
   "icon": "fas fa-image",
   "video": "https://www.youtube.com/embed/vXvVxbjTBVw?si=Ep8aVPMF0NB48_Q8",
+  "isNew": false,
   "isFeatured": true,
   "rating": 5
 },