update filter buttons

index.html

@@ -290,14 +290,27 @@ https://chatgpt.com/c/67efa5ae-ab80-8005-a7d4-de3ced6ccec4
                 <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 border-gray-300 text-sm hover:bg-gray-100 transition" data-category="all">הכל</button>
-                        <button class="filter-btn px-3 py-1 rounded-full border border-gray-300 text-sm hover:bg-gray-100 transition" data-category="productivity">פרודוקטיביות</button>
-                        <button class="filter-btn px-3 py-1 rounded-full border border-gray-300 text-sm hover:bg-gray-100 transition" data-category="writing">כתיבה</button>
-                        <button class="filter-btn px-3 py-1 rounded-full border border-gray-300 text-sm hover:bg-gray-100 transition" data-category="design">עיצוב</button>
-                        <button class="filter-btn px-3 py-1 rounded-full border border-gray-300 text-sm hover:bg-gray-100 transition" data-category="coding">תכנות</button>
-                        <button class="filter-btn px-3 py-1 rounded-full border border-gray-300 text-sm hover:bg-gray-100 transition" data-category="video">וידאו</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="all">הכל</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>
         

style.css

@@ -67,6 +67,13 @@ p {
     color: #fff !important;
     background-color: #333 !important;
 }
+.category-filter .active {
+    background-color: #e0f2fe; /* תכלת עדין */
+    color: #1e3a8a; /* כחול כהה */
+    border-color: #1e3a8a;
+    font-weight: 600;
+}
+
 
 .accessibility-mode input,
 .accessibility-mode textarea {