Enhanced layout and responsiveness in index.html by adding media queries and improving the tool card design. Updated tool details in tools.json for clarity, including renaming and adjusting descriptions.

index.html

@@ -246,6 +246,43 @@ sagi test
         height: 32px;
       }
 
+      @media (max-width: 768px) {
+        .favorite-btn {
+          
+          right: 10px; /* Adjust the right position */
+          top: 10px; /* Adjust the top position */
+        }
+      }
+
+      .tool-header {
+        display: flex;
+        flex-direction: column; /* Stack title and logo vertically */
+        align-items: center; /* Center align */
+        margin-bottom: 10px; /* Space below the header */
+      }
+
+      .tool-logo {
+        width: 50px; /* Adjust size as needed */
+        height: 50px; /* Adjust size as needed */
+      }
+
+      .tool-name {
+        font-size: 1.5rem; /* Adjust font size as needed */
+        font-weight: bold; /* Make it bold */
+        text-align: center; /* Center align text */
+      }
+
+      .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;
+      }
+
     </style>
     <!-- Google tag (gtag.js) -->
     <script
@@ -1218,82 +1255,35 @@ sagi test
             toolCard.setAttribute('data-tool', 'true');
 
             toolCard.innerHTML = `
-                    <div class="flex items-center justify-between mb-4">
-                        <div class="flex items-center gap-4">
-                            <!-- לוגו הכלי -->
-                            <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>`
-                                        : ''
-                                    }
-                                    ${
-                                      tool.free
-                                        ? `<span class="text-xs bg-yellow-400 text-black px-2 py-1 rounded-full">חינם</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>
-                                </div>
-
-                                <!-- תגית קטגוריה -->
-                                <span class="text-xs px-2 py-1 rounded-full ${getCategoryBadgeColor(
-                                  tool.category
-                                )}">
-                                    ${getCategoryName(tool.category)}
-                                </span>
-                            </div>
-                        </div>
-
-                        <!-- כפתור מועדפים -->
-                        <div class="flex items-center gap-2">
-                            <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>
-                            <!-- אייקון הכלי -->
-                            <i class="${tool.icon} text-gray-500 text-2xl"></i>
-                        </div>
+                    <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>
-
-                    <!-- תיאור -->
-                    <p class="text-gray-700 mb-4 text-base leading-relaxed min-h-[60px]">${
-                      tool.description
-                    }</p>
-
-                    <!-- דירוג ממורכז -->
+                    <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 !== '#' ? 'גישה לכלי' : 'אין קישור'
-                        }
+                    </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)}
                 `;
 

tools.json

@@ -27,12 +27,12 @@
     "dateAdded": "2025-07-05T08:15:00Z"
   },
   {
-    "name": "אליעזר - בוט תמלול הודעות קוליות בוואטסאפ",
-    "description": "בוט WhatsApp לתמלול הודעות קוליות לעברית במהירות ובחינם. שלחו הודעה קולית ל־'אליעזר' ותקבלו תמלול מדויק תוך שניות. הבוט מבוסס על טכנולוגיית Whisper-Turbo.",
+    "name": "אליעזר",
+    "description": "בוט בוואטסאפ לתמלול הודעות קוליות לעברית במהירות ובחינם. שלחו הודעה קולית ל־'אליעזר' ותקבלו תמלול מדויק תוך שניות. הבוט מבוסס על טכנולוגיית Whisper-Turbo.",
     "url": "https://wa.me/972559571223",
     "logo": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcToJht3wuQrsZ3KNMXckeCrtKGVHgLF1PAB3A&s",
     "category": "utility",
-    "icon": "fas fa-microphone-alt",
+    "icon": "fab fa-whatsapp",
     "video": "",
     "isFeatured": true,
     "rating": 5,