Fav added

Author: moneuron

fav.html

@@ -27,6 +27,66 @@
     ←
 </a>
 
+<div class="filter-container" style="
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    z-index: 1000;
+    display: flex;
+    gap: 5px;
+">
+    <button class="filter-btn active" data-filter="all" style="
+        background-color: white;
+        color: #000;
+        padding: 8px 12px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        font-family: sans-serif;
+        font-size: 12px;
+        cursor: pointer;
+    ">All</button>
+    <button class="filter-btn" data-filter="tv" style="
+        background-color: white;
+        color: #000;
+        padding: 8px 12px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        font-family: sans-serif;
+        font-size: 12px;
+        cursor: pointer;
+    ">TV</button>
+    <button class="filter-btn" data-filter="movie" style="
+        background-color: white;
+        color: #000;
+        padding: 8px 12px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        font-family: sans-serif;
+        font-size: 12px;
+        cursor: pointer;
+    ">Movies</button>
+    <button class="filter-btn" data-filter="book" style="
+        background-color: white;
+        color: #000;
+        padding: 8px 12px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        font-family: sans-serif;
+        font-size: 12px;
+        cursor: pointer;
+    ">Books</button>
+    <button class="filter-btn" data-filter="game" style="
+        background-color: white;
+        color: #000;
+        padding: 8px 12px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        font-family: sans-serif;
+        font-size: 12px;
+        cursor: pointer;
+    ">Games</button>
+</div>
+
 <div class="gallery-container">
 
     <div class="gallery">
@@ -70,5 +130,43 @@
     </div>
 
 </div>    
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const filterBtns = document.querySelectorAll('.filter-btn');
+    const galleryItems = document.querySelectorAll('.gallery');
+    
+    filterBtns.forEach(btn => {
+        btn.addEventListener('click', function() {
+            const filter = this.getAttribute('data-filter');
+            
+            // Update active button
+            filterBtns.forEach(b => {
+                b.classList.remove('active');
+                b.style.backgroundColor = 'white';
+                b.style.color = '#000';
+            });
+            this.classList.add('active');
+            this.style.backgroundColor = '#333';
+            this.style.color = 'white';
+            
+            // Filter items
+            galleryItems.forEach(item => {
+                if (filter === 'all') {
+                    item.style.display = 'block';
+                } else {
+                    const tag = item.querySelector(`.tag.${filter}`);
+                    if (tag) {
+                        item.style.display = 'block';
+                    } else {
+                        item.style.display = 'none';
+                    }
+                }
+            });
+        });
+    });
+});
+</script>
+
 </body>
 </html>