remover outras paginas 2, 3 pois nao clica mesmoe ajustar os demais filtros preciso clicar e filtrar - Follow Up Deployment

index.html

@@ -460,17 +460,7 @@
         <!-- Pagination -->
         <div class="flex justify-center mt-8">
             <nav class="flex items-center space-x-2">
-                <button class="px-3 py-1 rounded-lg border border-gray-200 bg-white text-sm font-medium hover:bg-gray-50">
-                    <i class="fas fa-chevron-left"></i>
-                </button>
                 <button class="px-3 py-1 rounded-lg border border-blue-200 bg-blue-50 text-blue-600 text-sm font-medium">1</button>
-                <button class="px-3 py-1 rounded-lg border border-gray-200 bg-white text-sm font-medium hover:bg-gray-50">2</button>
-                <button class="px-3 py-1 rounded-lg border border-gray-200 bg-white text-sm font-medium hover:bg-gray-50">3</button>
-                <span class="px-2 text-gray-500">...</span>
-                <button class="px-3 py-1 rounded-lg border border-gray-200 bg-white text-sm font-medium hover:bg-gray-50">10</button>
-                <button class="px-3 py-1 rounded-lg border border-gray-200 bg-white text-sm font-medium hover:bg-gray-50">
-                    <i class="fas fa-chevron-right"></i>
-                </button>
             </nav>
         </div>
     </div>
@@ -533,9 +523,18 @@
             event.target.classList.add('border-blue-200', 'bg-blue-50', 'text-blue-600');
             event.target.classList.remove('border-gray-200', 'hover:bg-gray-50');
             
-            console.log(`Filtering by TVL >= ${minTvl}`);
-            // Here you would implement the actual filtering logic
-            // For now we'll just log to console
+            // Filter pool cards based on TVL
+            const poolCards = document.querySelectorAll('.grid > div');
+            poolCards.forEach(card => {
+                const tvlText = card.querySelector('div:nth-child(4) > div:nth-child(1) > span:nth-child(2)').textContent;
+                const tvl = parseFloat(tvlText.replace(/[^0-9.]/g, '')) * (tvlText.includes('M') ? 1000000 : 1000);
+                
+                if (tvl >= minTvl) {
+                    card.style.display = 'block';
+                } else {
+                    card.style.display = 'none';
+                }
+            });
         }
 
         function filterByCategory(category) {
@@ -549,23 +548,73 @@
             event.target.classList.add('border-blue-200', 'bg-blue-50', 'text-blue-600');
             event.target.classList.remove('border-gray-200', 'hover:bg-gray-50');
             
-            console.log(`Filtering by category: ${category}`);
-            // Here you would implement the actual filtering logic
-            // For now we'll just log to console
+            // Filter pool cards based on category
+            const poolCards = document.querySelectorAll('.grid > div');
+            poolCards.forEach(card => {
+                const poolName = card.querySelector('h3').textContent;
+                let matchesCategory = false;
+                
+                if (category === 'all') {
+                    matchesCategory = true;
+                } else if (category === 'stable') {
+                    matchesCategory = poolName.includes('USDC') || poolName.includes('USDT');
+                } else if (category === 'concentrated') {
+                    matchesCategory = poolName.includes('ETH') || poolName.includes('WBTC');
+                } else if (category === 'bluechip') {
+                    matchesCategory = poolName.includes('MATIC');
+                }
+                
+                card.style.display = matchesCategory ? 'block' : 'none';
+            });
         }
 
-        // Make dropdown items clickable
-        document.querySelectorAll('.relative div a').forEach(item => {
-            item.addEventListener('click', function(e) {
-                e.preventDefault();
-                const dropdown = this.closest('.relative').querySelector('button');
-                dropdown.innerHTML = `<span class="mr-2">Sort by: ${this.textContent}</span><i class="fas fa-chevron-down text-xs"></i>`;
-                dropdown.nextElementSibling.classList.add('hidden');
-                
-                console.log(`Sorting by: ${this.textContent}`);
-                // Here you would implement the actual sorting logic
+        // Token filter functionality
+        let selectedTokens = new Set();
+        
+        function toggleTokenDropdown() {
+            const dropdown = document.getElementById('token-dropdown');
+            dropdown.classList.toggle('hidden');
+        }
+        
+        function filterTokens(searchTerm) {
+            const tokenItems = document.querySelectorAll('#token-list label');
+            tokenItems.forEach(item => {
+                const tokenName = item.querySelector('span').textContent;
+                if (tokenName.toLowerCase().includes(searchTerm.toLowerCase())) {
+                    item.style.display = 'flex';
+                } else {
+                    item.style.display = 'none';
+                }
+            });
+        }
+        
+        document.querySelectorAll('#token-list input[type="checkbox"]').forEach(checkbox => {
+            checkbox.addEventListener('change', function() {
+                const token = this.value;
+                if (this.checked) {
+                    selectedTokens.add(token);
+                } else {
+                    selectedTokens.delete(token);
+                }
+                applyTokenFilters();
             });
         });
+        
+        function applyTokenFilters() {
+            const poolCards = document.querySelectorAll('.grid > div');
+            if (selectedTokens.size === 0) {
+                poolCards.forEach(card => card.style.display = 'block');
+                return;
+            }
+            
+            poolCards.forEach(card => {
+                const poolName = card.querySelector('h3').textContent;
+                const hasToken = Array.from(selectedTokens).some(token => 
+                    poolName.includes(token)
+                );
+                card.style.display = hasToken ? 'block' : 'none';
+            });
+        }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=akagelks/akadg" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>