Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DeFi Yield Explorer</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <style> | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border-radius: 16px; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .animated-gradient { | |
| animation: gradient 15s ease infinite; | |
| background-size: 400% 400%; | |
| } | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900 text-gray-100 min-h-screen"> | |
| <div id="vanta-bg" class="absolute w-full h-full"></div> | |
| <div class="relative z-10 container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-12"> | |
| <div class="flex flex-col items-center justify-center text-center py-8"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 via-pink-500 to-purple-500"> | |
| DeFi Yield Explorer | |
| </h1> | |
| <p class="text-lg md:text-xl opacity-80 max-w-2xl"> | |
| Real-time APY comparison for USDC & USDT across top DeFi platforms | |
| </p> | |
| <div class="mt-6 flex space-x-4"> | |
| <button id="refresh-btn" class="flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg transition"> | |
| <i data-feather="refresh-cw" class="mr-2"></i> | |
| Refresh Data | |
| </button> | |
| <button class="flex items-center px-4 py-2 bg-pink-600 hover:bg-pink-700 rounded-lg transition"> | |
| <i data-feather="alert-circle" class="mr-2"></i> | |
| Risk Info | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Yield Comparison Cards --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-semibold mb-6 flex items-center"> | |
| <i data-feather="trending-up" class="mr-2"></i> | |
| Top Platform Yields | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Card 1 - Aave --> | |
| <div class="glass-card p-6 hover:shadow-lg transition duration-300"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <img src="https://cryptologos.cc/logos/aave-aave-logo.png?v=025" alt="Aave Logo" class="h-10 w-10 rounded-full"> | |
| </div> | |
| <span class="px-3 py-1 bg-green-900/30 text-green-400 rounded-full text-xs font-medium">Low Risk</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Aave v3</h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="opacity-80">USDT APY</span> | |
| <span class="font-bold text-green-400">8.42%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="opacity-80">USDC APY</span> | |
| <span class="font-bold text-green-400">7.89%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="opacity-80">TVL</span> | |
| <span class="font-medium">$5.2B</span> | |
| </div> | |
| </div> | |
| <button class="w-full mt-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition"> | |
| View Details | |
| </button> | |
| </div> | |
| <!-- Card 2 - Compound --> | |
| <div class="glass-card p-6 hover:shadow-lg transition duration-300"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <img src="https://cryptologos.cc/logos/compound-comp-logo.png?v=025" alt="Compound Logo" class="h-10 w-10 rounded-full"> | |
| </div> | |
| <span class="px-3 py-1 bg-green-900/30 text-green-400 rounded-full text-xs font-medium">Low Risk</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Compound v3</h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="opacity-80">USDT APY</span> | |
| <span class="font-bold text-green-400">6.15%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="opacity-80">USD APY</span> | |
| <span class="font-bold text-green-400">5.89%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="opacity-80">TVL</span> | |
| <span class="font-medium">$3.8B</span> | |
| </div> | |
| </div> | |
| <button class="w-full mt-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition"> | |
| View Details | |
| </button> | |
| </div> | |
| <!-- Card 3 - Curve --> | |
| <div class="glass-card p-6 hover:shadow-lg transition duration-300"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <img src="https://cryptologos.cc/logos/curve-dao-token-crv-logo.png?v=025" alt="Curve Logo" class="h-10 w-10 rounded-full"> | |
| </div> | |
| <span class="px-3 py-1 bg-yellow-900/30 text-yellow-400 rounded-full text-xs font-medium">Medium Risk</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Curve Finance</h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="opacity-80">USDT APY</span> | |
| <span class="font-bold text-green-400">11.24%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="opacity-80">USD APY</span> | |
| <span class="font-bold text-green-400">10.75%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="opacity-80">TVL</span> | |
| <span class="font-medium">$4.1B</span> | |
| </div> | |
| </div> | |
| <button class="w-full mt-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition"> | |
| View Details | |
| </button> | |
| </div> | |
| <!-- Card 4 - Yearn --> | |
| <div class="glass-card p-6 hover:shadow-lg transition duration-300"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <img src="https://cryptologos.cc/logos/yearn-finance-yfi-logo.png?v=025" alt="Yearn Logo" class="h-10 w-10 rounded-full"> | |
| </div> | |
| <span class="px-3 py-1 bg-yellow-900/30 text-yellow-400 rounded-full text-xs font-medium">Medium Risk</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Yearn Finance</h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="opacity-80">USDT APY</span> | |
| <span class="font-bold text-green-400">9.87%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="opacity-80">USD APY</span> | |
| <span class="font-bold text-green-400">8.92%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="opacity-80">TVL</span> | |
| <span class="font-medium">$2.9B</span> | |
| </div> | |
| </div> | |
| <button class="w-full mt-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition"> | |
| View Details | |
| </button> | |
| </div> | |
| <!-- Card 5 - Uniswap --> | |
| <div class="glass-card p-6 hover:shadow-lg transition duration-300"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <img src="https://cryptologos.cc/logos/uniswap-uni-logo.png?v=025" alt="Uniswap Logo" class="h-10 w-10 rounded-full"> | |
| </div> | |
| <span class="px-3 py-1 bg-red-900/30 text-red-400 rounded-full text-xs font-medium">High Risk</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Uniswap v3</h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="opacity-80">USDT APY</span> | |
| <span class="font-bold text-green-400">15.32%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="opacity-80">USD APY</span> | |
| <span class="font-bold text-green-400">14.87%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="opacity-80">TVL</span> | |
| <span class="font-medium">$6.5B</span> | |
| </div> | |
| </div> | |
| <button class="w-full mt-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Yield Comparison Chart --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-semibold mb-6 flex items-center"> | |
| <i data-feather="bar-chart-2" class="mr-2"></i> | |
| Yield Comparison | |
| </h2> | |
| <div class="glass-card p-6"> | |
| <div class="h-80"> | |
| <canvas id="yieldChart"></canvas> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Risk Info --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-semibold mb-6 flex items-center"> | |
| <i data-feather="shield" class="mr-2"></i> | |
| Risk Assessment | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="glass-card p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-2 rounded-full bg-green-900/20 mr-3"> | |
| <i data-feather="check-circle" class="text-green-400"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold">Low Risk</h3> | |
| </div> | |
| <p class="opacity-80"> | |
| Platforms with established security audits, battle-tested smart contracts, and lower volatility. | |
| </p> | |
| </div> | |
| <div class="glass-card p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-2 rounded-full bg-yellow-900/20 mr-3"> | |
| <i data-feather="alert-triangle" class="text-yellow-400"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold">Medium Risk</h3> | |
| </div> | |
| <p class="opacity-80"> | |
| Platforms with some security audits but higher complexity or newer protocols that haven't been fully tested. | |
| </p> | |
| </div> | |
| <div class="glass-card p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-2 rounded-full bg-red-900/20 mr-3"> | |
| <i data-feather="alert-octagon" class="text-red-400"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold">High Risk</h3> | |
| </div> | |
| <p class="opacity-80"> | |
| Newer platforms, unaudited contracts, or those with complex strategies that could be vulnerable to exploits. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="py-8 border-t border-gray-800 mt-12"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <p class="opacity-70">© 2023 DeFi Yield Explorer. All yields are estimates.</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="opacity-70 hover:opacity-100 transition"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="opacity-70 hover:opacity-100 transition"> | |
| <i data-feather="github"></i> | |
| </a> | |
| <a href="#" class="opacity-70 hover:opacity-100 transition"> | |
| <i data-feather="discord"></i> | |
| </a> | |
| <a href="#" class="opacity-70 hover:opacity-100 transition"> | |
| <i data-feather="book"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x5f47ff, | |
| backgroundColor: 0x10101a, | |
| points: 10.00, | |
| spacing: 16.00 | |
| }); | |
| // Initialize Chart.js | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const ctx = document.getElementById('yieldChart').getContext('2d'); | |
| const yieldChart = new Chart(ctx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Aave v3', 'Compound v3', 'Curve Finance', 'Yearn Finance', 'Uniswap v3'], | |
| datasets: [ | |
| { | |
| label: 'USDT APY', | |
| data: [8.42, 6.15, 11.24, 9.87, 15.32], | |
| backgroundColor: 'rgba(99, 102, 241, 0.7)', | |
| borderColor: 'rgba(99, 102, 241, 1)', | |
| borderWidth: 1 | |
| }, | |
| { | |
| label: 'USDC APY', | |
| data: [7.89, 5.89, 10.75, 8.92, 14.87], | |
| backgroundColor: 'rgba(236, 72, 153, 0.7)', | |
| borderColor: 'rgba(236, 72, 153, 1)', | |
| borderWidth: 1 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| title: { | |
| display: true, | |
| text: 'Annual Percentage Yield (%)' | |
| } | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| title: { | |
| display: true, | |
| text: 'Stablecoin Yields Across DeFi Platforms' | |
| } | |
| } | |
| } | |
| }); | |
| // Refresh button functionality | |
| document.getElementById('refresh-btn').addEventListener('click', function() { | |
| // Would call API to refresh data in a real app | |
| this.innerHTML = '<i data-feather="refresh-cw" class="animate-spin mr-2"></i> Refreshing...'; | |
| setTimeout(() => { | |
| this.innerHTML = '<i data-feather="refresh-cw" class="mr-2"></i> Refresh Data'; | |
| feather.replace(); | |
| }, 1500); | |
| }); | |
| // Replace icons | |
| feather.replace(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |