Hugging Face's logo

Spaces:
akagelks
/
akadg
Running

App Files Community
akadg / index.html
akagelks's picture
akagelks
remover outras paginas 2, 3 pois nao clica mesmoe ajustar os demais filtros preciso clicar e filtrar - Follow Up Deployment
bafd3c2 verified
raw
history blame contribute delete
31.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>DeFi Pools Dashboard | DefiStation Clone</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
 font-family: 'Inter', sans-serif;
 background-color: #f9f9f9;
 color: #111;
 }
.card-hover:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
 }
.pro-badge {
 position: relative;
 }
.pro-badge::after {
 content: "PRO";
 position: absolute;
 top: -8px;
 right: -8px;
 background-color: #3b82f6;
 color: white;
 font-size: 10px;
 padding: 2px 6px;
 border-radius: 9999px;
 font-weight: 600;
 }
.token-icon {
 width: 24px;
 height: 24px;
 border-radius: 50%;
 border: 1px solid #e0e0e0;
 background-color: white;
 }
.positive-change {
 color: #10b981;
 }
.negative-change {
 color: #ef4444;
 }
.sticky-filters {
 position: sticky;
 top: 0;
 z-index: 10;
 background-color: #f9f9f9;
 padding-top: 1rem;
 padding-bottom: 1rem;
 }
@media (max-width: 768px) {
 .token-breakdown {
 flex-direction: column;
 }
 }
 </style>
</head>
<body>
 <div class="container mx-auto px-4 py-8 max-w-7xl">
 <!-- Header -->
 <header class="mb-8">
 <div class="flex justify-between items-center">
 <div class="flex items-center">
 <div class="w-10 h-10 rounded-lg bg-blue-600 flex items-center justify-center mr-3">
 <i class="fas fa-chart-line text-white text-xl"></i>
 </div>
 <h1 class="text-2xl font-bold">DefiEasy</h1>
 </div>
 <div class="flex items-center space-x-4">
 <button class="px-4 py-2 rounded-lg border border-gray-200 bg-white text-sm font-medium hover:bg-gray-50">
 <i class="fas fa-download mr-2"></i> Export CSV
 </button>
 <button class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700">
 <i class="fas fa-bolt mr-2"></i> Connect Wallet
 </button>
 </div>
 </div>
 <p class="text-gray-500 mt-2">Your easy gateway to decentralized finance</p>
 </header>
<!-- Filters -->
 <div class="sticky-filters border-b border-gray-200 mb-6">
 <div class="flex flex-wrap items-center justify-between gap-4">
 <!-- TVL Filter -->
 <div class="flex items-center">
 <span class="text-sm font-medium mr-2">Min TVL:</span>
 <div class="flex space-x-1" id="tvl-filter">
 <button onclick="filterByTvl(1000)" class="px-3 py-1 text-sm rounded-lg bg-white border border-gray-200 hover:bg-gray-50">$1K</button>
 <button onclick="filterByTvl(10000)" class="px-3 py-1 text-sm rounded-lg bg-white border border-gray-200 hover:bg-gray-50">$10K</button>
 <button onclick="filterByTvl(100000)" class="px-3 py-1 text-sm rounded-lg bg-white border border-blue-200 bg-blue-50 text-blue-600">$100K</button>
 <button onclick="filterByTvl(1000000)" class="px-3 py-1 text-sm rounded-lg bg-white border border-gray-200 hover:bg-gray-50">$1M</button>
 <button onclick="filterByTvl(10000000)" class="px-3 py-1 text-sm rounded-lg bg-white border border-gray-200 hover:bg-gray-50">$10M</button>
 </div>
 </div>
<!-- Token Multi-Select -->
 <div class="flex items-center">
 <div class="relative">
 <button onclick="toggleTokenDropdown()" class="flex items-center px-3 py-1 text-sm rounded-lg bg-white border border-gray-200 hover:bg-gray-50">
 <span class="mr-2">Tokens</span>
 <i class="fas fa-chevron-down text-xs"></i>
 </button>
 <div id="token-dropdown" class="hidden absolute right-0 mt-1 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-20 p-2">
 <input type="text" placeholder="Search tokens..." class="w-full px-2 py-1 mb-2 text-sm border rounded" oninput="filterTokens(this.value)">
 <div class="max-h-60 overflow-y-auto" id="token-list">
 <label class="flex items-center px-2 py-1 hover:bg-gray-50 cursor-pointer">
 <input type="checkbox" class="mr-2" value="USDC">
 <span class="text-sm">USDC</span>
 </label>
 <label class="flex items-center px-2 py-1 hover:bg-gray-50 cursor-pointer">
 <input type="checkbox" class="mr-2" value="USDT">
 <span class="text-sm">USDT</span>
 </label>
 <label class="flex items-center px-2 py-1 hover:bg-gray-50 cursor-pointer">
 <input type="checkbox" class="mr-2" value="ETH">
 <span class="text-sm">ETH</span>
 </label>
 <label class="flex items-center px-2 py-1 hover:bg-gray-50 cursor-pointer">
 <input type="checkbox" class="mr-2" value="WBTC">
 <span class="text-sm">WBTC</span>
 </label>
 </div>
 </div>
 </div>
 </div>
<!-- Pool Categories -->
 <div class="flex items-center">
 <div class="flex space-x-1" id="category-filter">
 <button onclick="filterByCategory('all')" class="px-3 py-1 text-sm rounded-lg bg-white border border-gray-200 hover:bg-gray-50">All</button>
 <button onclick="filterByCategory('stable')" class="px-3 py-1 text-sm rounded-lg bg-white border border-blue-200 bg-blue-50 text-blue-600">Stable</button>
 <button onclick="filterByCategory('concentrated')" class="px-3 py-1 text-sm rounded-lg bg-white border border-gray-200 hover:bg-gray-50">Concentrated</button>
 <button onclick="filterByCategory('bluechip')" class="px-3 py-1 text-sm rounded-lg bg-white border border-gray-200 hover:bg-gray-50">Bluechip</button>
 </div>
 </div>
<!-- Sort Dropdown -->
 <div class="relative">
 <button class="flex items-center px-3 py-1 text-sm rounded-lg bg-white border border-gray-200 hover:bg-gray-50">
 <span class="mr-2">Sort by: TVL</span>
 <i class="fas fa-chevron-down text-xs"></i>
 </button>
 <div class="hidden absolute right-0 mt-1 w-40 bg-white rounded-lg shadow-lg border border-gray-200 z-20">
 <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-50">TVL</a>
 <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-50">APR</a>
 <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-50">Volume</a>
 <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-50">Change</a>
 </div>
 </div>
 </div>
 </div>
<!-- Pool Cards -->
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 <!-- Pool Card 1 -->
 <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden transition-all duration-200 card-hover">
 <div class="p-5">
 <!-- Pool Header -->
 <div class="flex justify-between items-start mb-4">
 <div class="flex items-center">
 <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="Ethereum" class="w-6 h-6 mr-2">
 <span class="text-sm font-medium">Ethereum</span>
 </div>
 <div class="flex items-center space-x-2">
 <span class="text-xs px-2 py-1 bg-green-50 text-green-600 rounded-full">Low Risk</span>
 <span class="text-xs px-2 py-1 bg-blue-50 text-blue-600 rounded-full">Audited</span>
 </div>
 </div>
<!-- Pool Name -->
 <h3 class="text-lg font-semibold mb-1">USDC/USDT</h3>
<!-- Pool Details -->
 <div class="flex justify-between text-sm text-gray-500 mb-4">
 <span>Fee: 0.05%</span>
 <span>LPs: 1,245</span>
 </div>
<!-- Protocol -->
 <div class="flex items-center text-sm mb-4">
 <span class="text-gray-500 mr-1">Protocol:</span>
 <a href="#" class="text-blue-600 font-medium flex items-center">
 <img src="https://defillama.com/_next/image?url=https%3A%2F%2Ficons.llama.fi%2Funiswap-v3.png&w=32&q=75" alt="Uniswap" class="w-4 h-4 mr-1">
 Uniswap V3
 </a>
 </div>
<!-- TVL Breakdown -->
 <div class="mb-4">
 <div class="flex justify-between text-sm mb-1">
 <span class="text-gray-500">TVL</span>
 <span class="font-medium">$124.5M</span>
 </div>
 <div class="flex items-center token-breakdown">
 <div class="flex-1 h-2 bg-blue-400 rounded-l-full"></div>
 <div class="flex-1 h-2 bg-purple-400 rounded-r-full"></div>
 </div>
 <div class="flex justify-between text-xs text-gray-500 mt-1">
 <span>USDC (52%)</span>
 <span>USDT (48%)</span>
 </div>
 </div>
<!-- Stats Row -->
 <div class="grid grid-cols-3 gap-2 text-sm mb-4">
 <div>
 <div class="text-gray-500">Volume 24h</div>
 <div class="font-medium">$12.4M</div>
 </div>
 <div>
 <div class="text-gray-500">APR 24h</div>
 <div class="font-medium">2.45%</div>
 </div>
 <div>
 <div class="text-gray-500">Change 24h</div>
 <div class="font-medium positive-change">+1.2%</div>
 </div>
 </div>
<!-- PRO Section -->
 <div class="border-t border-gray-100 pt-4">
 <div class="grid grid-cols-2 gap-2 text-sm">
 <div class="pro-badge">
 <div class="text-gray-500">MCAP</div>
 <div class="font-medium flex items-center">
 <i class="fas fa-lock text-gray-400 mr-1"></i>
 <span class="text-gray-400">PRO</span>
 </div>
 </div>
 <div class="pro-badge">
 <div class="text-gray-500">FDV</div>
 <div class="font-medium flex items-center">
 <i class="fas fa-lock text-gray-400 mr-1"></i>
 <span class="text-gray-400">PRO</span>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Footer Actions -->
 <div class="border-t border-gray-100 px-5 py-3 bg-gray-50 flex justify-between items-center">
 <button class="text-blue-600 text-sm font-medium hover:text-blue-700">
 <i class="fas fa-chart-line mr-1"></i> View Analytics
 </button>
 <button class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-share-alt"></i>
 </button>
 </div>
 </div>
<!-- Pool Card 2 -->
 <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden transition-all duration-200 card-hover">
 <div class="p-5">
 <!-- Pool Header -->
 <div class="flex justify-between items-start mb-4">
 <div class="flex items-center">
 <img src="https://cryptologos.cc/logos/arbitrum-arb-logo.png" alt="Arbitrum" class="w-6 h-6 mr-2">
 <span class="text-sm font-medium">Arbitrum</span>
 </div>
 <div class="flex items-center space-x-2">
 <span class="text-xs px-2 py-1 bg-yellow-50 text-yellow-600 rounded-full">Medium Risk</span>
 </div>
 </div>
<!-- Pool Name -->
 <h3 class="text-lg font-semibold mb-1">WBTC/ETH</h3>
<!-- Pool Details -->
 <div class="flex justify-between text-sm text-gray-500 mb-4">
 <span>Fee: 0.30%</span>
 <span>LPs: 842</span>
 </div>
<!-- Protocol -->
 <div class="flex items-center text-sm mb-4">
 <span class="text-gray-500 mr-1">Protocol:</span>
 <a href="#" class="text-blue-600 font-medium flex items-center">
 <img src="https://defillama.com/_next/image?url=https%3A%2F%2Ficons.llama.fi%2Fcamelot.png&w=32&q=75" alt="Camelot" class="w-4 h-4 mr-1">
 Camelot
 </a>
 </div>
<!-- TVL Breakdown -->
 <div class="mb-4">
 <div class="flex justify-between text-sm mb-1">
 <span class="text-gray-500">TVL</span>
 <span class="font-medium">$87.3M</span>
 </div>
 <div class="flex items-center token-breakdown">
 <div class="flex-1 h-2 bg-orange-400 rounded-l-full"></div>
 <div class="flex-1 h-2 bg-blue-400 rounded-r-full"></div>
 </div>
 <div class="flex justify-between text-xs text-gray-500 mt-1">
 <span>WBTC (58%)</span>
 <span>ETH (42%)</span>
 </div>
 </div>
<!-- Stats Row -->
 <div class="grid grid-cols-3 gap-2 text-sm mb-4">
 <div>
 <div class="text-gray-500">Volume 24h</div>
 <div class="font-medium">$8.7M</div>
 </div>
 <div>
 <div class="text-gray-500">APR 24h</div>
 <div class="font-medium">5.12%</div>
 </div>
 <div>
 <div class="text-gray-500">Change 24h</div>
 <div class="font-medium negative-change">-0.8%</div>
 </div>
 </div>
<!-- PRO Section -->
 <div class="border-t border-gray-100 pt-4">
 <div class="grid grid-cols-2 gap-2 text-sm">
 <div class="pro-badge">
 <div class="text-gray-500">MCAP</div>
 <div class="font-medium flex items-center">
 <i class="fas fa-lock text-gray-400 mr-1"></i>
 <span class="text-gray-400">PRO</span>
 </div>
 </div>
 <div class="pro-badge">
 <div class="text-gray-500">FDV</div>
 <div class="font-medium flex items-center">
 <i class="fas fa-lock text-gray-400 mr-1"></i>
 <span class="text-gray-400">PRO</span>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Footer Actions -->
 <div class="border-t border-gray-100 px-5 py-3 bg-gray-50 flex justify-between items-center">
 <button class="text-blue-600 text-sm font-medium hover:text-blue-700">
 <i class="fas fa-chart-line mr-1"></i> View Analytics
 </button>
 <button class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-share-alt"></i>
 </button>
 </div>
 </div>
<!-- Pool Card 3 -->
 <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden transition-all duration-200 card-hover">
 <div class="p-5">
 <!-- Pool Header -->
 <div class="flex justify-between items-start mb-4">
 <div class="flex items-center">
 <img src="https://cryptologos.cc/logos/polygon-matic-logo.png" alt="Polygon" class="w-6 h-6 mr-2">
 <span class="text-sm font-medium">Polygon</span>
 </div>
 <div class="flex items-center space-x-2">
 <span class="text-xs px-2 py-1 bg-green-50 text-green-600 rounded-full">Low Risk</span>
 <span class="text-xs px-2 py-1 bg-blue-50 text-blue-600 rounded-full">Audited</span>
 </div>
 </div>
<!-- Pool Name -->
 <h3 class="text-lg font-semibold mb-1">MATIC/USDC</h3>
<!-- Pool Details -->
 <div class="flex justify-between text-sm text-gray-500 mb-4">
 <span>Fee: 0.20%</span>
 <span>LPs: 1,892</span>
 </div>
<!-- Protocol -->
 <div class="flex items-center text-sm mb-4">
 <span class="text-gray-500 mr-1">Protocol:</span>
 <a href="#" class="text-blue-600 font-medium flex items-center">
 <img src="https://defillama.com/_next/image?url=https%3A%2F%2Ficons.llama.fi%2Fquickswap.png&w=32&q=75" alt="QuickSwap" class="w-4 h-4 mr-1">
 QuickSwap
 </a>
 </div>
<!-- TVL Breakdown -->
 <div class="mb-4">
 <div class="flex justify-between text-sm mb-1">
 <span class="text-gray-500">TVL</span>
 <span class="font-medium">$56.2M</span>
 </div>
 <div class="flex items-center token-breakdown">
 <div class="flex-1 h-2 bg-purple-400 rounded-l-full"></div>
 <div class="flex-1 h-2 bg-blue-400 rounded-r-full"></div>
 </div>
 <div class="flex justify-between text-xs text-gray-500 mt-1">
 <span>MATIC (63%)</span>
 <span>USDC (37%)</span>
 </div>
 </div>
<!-- Stats Row -->
 <div class="grid grid-cols-3 gap-2 text-sm mb-4">
 <div>
 <div class="text-gray-500">Volume 24h</div>
 <div class="font-medium">$5.1M</div>
 </div>
 <div>
 <div class="text-gray-500">APR 24h</div>
 <div class="font-medium">8.24%</div>
 </div>
 <div>
 <div class="text-gray-500">Change 24h</div>
 <div class="font-medium positive-change">+3.5%</div>
 </div>
 </div>
<!-- PRO Section -->
 <div class="border-t border-gray-100 pt-4">
 <div class="grid grid-cols-2 gap-2 text-sm">
 <div class="pro-badge">
 <div class="text-gray-500">MCAP</div>
 <div class="font-medium flex items-center">
 <i class="fas fa-lock text-gray-400 mr-1"></i>
 <span class="text-gray-400">PRO</span>
 </div>
 </div>
 <div class="pro-badge">
 <div class="text-gray-500">FDV</div>
 <div class="font-medium flex items-center">
 <i class="fas fa-lock text-gray-400 mr-1"></i>
 <span class="text-gray-400">PRO</span>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Footer Actions -->
 <div class="border-t border-gray-100 px-5 py-3 bg-gray-50 flex justify-between items-center">
 <button class="text-blue-600 text-sm font-medium hover:text-blue-700">
 <i class="fas fa-chart-line mr-1"></i> View Analytics
 </button>
 <button class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-share-alt"></i>
 </button>
 </div>
 </div>
 </div>
<!-- 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-blue-200 bg-blue-50 text-blue-600 text-sm font-medium">1</button>
 </nav>
 </div>
 </div>
<script>
 // Enhanced dropdown functionality
 document.querySelectorAll('.relative button').forEach(button => {
 button.addEventListener('click', function(e) {
 e.stopPropagation();
 const dropdown = this.nextElementSibling;
 document.querySelectorAll('.relative div').forEach(d => {
 if (d !== dropdown) d.classList.add('hidden');
 });
 dropdown.classList.toggle('hidden');
 });
 });
// Close dropdowns when clicking outside
 document.addEventListener('click', function() {
 document.querySelectorAll('.relative div').forEach(dropdown => {
 dropdown.classList.add('hidden');
 });
 });
// Fetch data from DefiLlama API
 async function fetchPools() {
 try {
 const [protocolsRes, poolsRes] = await Promise.all([
 fetch('https://api.llama.fi/protocols'),
 fetch('https://yields.llama.fi/pools')
 ]);
const protocols = await protocolsRes.json();
 const pools = await poolsRes.json();
console.log('Fetched data:', { protocols, pools });
// Process and display data here
 // This would update the DOM with real pool data
} catch (error) {
 console.error('Error fetching data:', error);
 }
 }
document.addEventListener('DOMContentLoaded', fetchPools);
// Auto-refresh every 10 minutes
 setInterval(fetchPools, 10 * 60 * 1000);
 // Filter functions
 function filterByTvl(minTvl) {
 // Remove active class from all buttons
 document.querySelectorAll('#tvl-filter button').forEach(btn => {
 btn.classList.remove('border-blue-200', 'bg-blue-50', 'text-blue-600');
 btn.classList.add('border-gray-200', 'hover:bg-gray-50');
 });
// Add active class to clicked button
 event.target.classList.add('border-blue-200', 'bg-blue-50', 'text-blue-600');
 event.target.classList.remove('border-gray-200', 'hover:bg-gray-50');
// 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) {
 // Remove active class from all buttons
 document.querySelectorAll('#category-filter button').forEach(btn => {
 btn.classList.remove('border-blue-200', 'bg-blue-50', 'text-blue-600');
 btn.classList.add('border-gray-200', 'hover:bg-gray-50');
 });
// Add active class to clicked button
 event.target.classList.add('border-blue-200', 'bg-blue-50', 'text-blue-600');
 event.target.classList.remove('border-gray-200', 'hover:bg-gray-50');
// 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';
 });
 }
 // 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>