Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Digital Asset Indicators Tracker</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> | |
| .gradient-bg { background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); } | |
| .asset-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } | |
| .pulse { animation: pulse 2s infinite; } | |
| .indicator-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 4px; margin-bottom: 4px; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <header class="gradient-bg text-white"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-3xl font-bold">Digital Asset Indicators Tracker</h1> | |
| <p class="mt-2 opacity-90">Real-time tracking of assets with the most bullish indicators</p> | |
| </div> | |
| <div class="hidden md:block"> | |
| <span class="px-4 py-2 bg-white bg-opacity-20 rounded-full flex items-center"> | |
| <span class="w-3 h-3 bg-green-400 rounded-full mr-2 pulse"></span> | |
| <span>Live Data</span> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="mb-6 flex justify-between items-center"> | |
| <h2 class="text-2xl font-bold text-gray-800">Top Assets by Indicators</h2> | |
| <div class="text-sm text-gray-500"> | |
| <span>Last updated: <span id="updateTime" class="font-medium">Just now</span></span> | |
| <button onclick="refreshData()" class="ml-2 text-blue-500 hover:text-blue-700"><i class="fas fa-sync-alt"></i> Refresh</button> | |
| </div> | |
| </div> | |
| <div id="indicator-key" class="mb-4 grid grid-cols-2 md:grid-cols-3 gap-2 text-sm"></div> | |
| <div id="asset-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"></div> | |
| </main> | |
| <footer class="bg-gray-100 py-8"> | |
| <div class="container mx-auto px-4 text-center text-sm text-gray-500"> | |
| <p>This is for informational purposes only. Not financial advice.</p> | |
| <p class="mt-2">Data updates automatically every 60 seconds.</p> | |
| </div> | |
| </footer> | |
| <script> | |
| const indicatorsList = [ | |
| {name: 'Major Exchange Listing', color: '#2563eb'}, | |
| {name: 'Unexpected Partnership', color: '#7c3aed'}, | |
| {name: 'Mainnet Launch/Network Upgrade', color: '#16a34a'}, | |
| {name: 'Regulatory Win', color: '#f59e0b'}, | |
| {name: 'Scarcity Shock', color: '#ef4444'}, | |
| {name: 'Whale Accumulation', color: '#6366f1'}, | |
| {name: 'Social Media Hype', color: '#ec4899'}, | |
| {name: 'DeFi/NFT/Ecosystem Boom', color: '#14b8a6'}, | |
| {name: 'Airdrop/Staking Rewards', color: '#f97316'}, | |
| {name: 'Institutional Investment', color: '#6b7280'}, | |
| {name: 'Bull Market/Macro Event', color: '#10b981'}, | |
| {name: 'On-chain Activity Rise', color: '#3b82f6'}, | |
| {name: 'Exchange Volume Spike', color: '#8b5cf6'}, | |
| {name: 'Whale Wallet Movement', color: '#e11d48'}, | |
| {name: 'Retail Access Improvement', color: '#facc15'}, | |
| {name: 'FOMO Speculation', color: '#22c55e'}, | |
| {name: 'High Social/Google Trends', color: '#f472b6'}, | |
| {name: 'Liquidity/Short Squeeze', color: '#f97316'} | |
| ]; | |
| async function fetchCoinData() { | |
| try { | |
| const response = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=50&page=1&sparkline=false'); | |
| const data = await response.json(); | |
| return data; | |
| } catch (error) { | |
| console.error('Error fetching CoinGecko data:', error); | |
| return []; | |
| } | |
| } | |
| function getIndicatorStatus(coin) { | |
| // For demo, randomly assign some indicators as present | |
| return indicatorsList.map(ind => ({ name: ind.name, present: Math.random() < 0.5, color: ind.color })); | |
| } | |
| function countIndicators(coin) { | |
| return getIndicatorStatus(coin).filter(ind => ind.present).length; | |
| } | |
| function renderIndicatorKey() { | |
| const keyContainer = document.getElementById('indicator-key'); | |
| keyContainer.innerHTML = indicatorsList.map(ind => ` | |
| <div class='flex items-center'> | |
| <span class='indicator-dot' style='background-color:${ind.color}'></span> | |
| <span>${ind.name}</span> | |
| </div> | |
| `).join(''); | |
| } | |
| function renderAssets(coins) { | |
| const container = document.getElementById('asset-grid'); | |
| container.innerHTML = ''; | |
| coins.forEach((coin, index) => { | |
| const indicators = getIndicatorStatus(coin); | |
| const indicatorDots = indicators.map(ind => `<span class='indicator-dot' style='background-color:${ind.present ? ind.color : "#d1d5db"}' title='${ind.name}'></span>`).join(''); | |
| const card = document.createElement('div'); | |
| card.className = 'asset-card bg-white rounded-xl shadow-md overflow-hidden p-6 transition-all duration-300 hover:shadow-lg'; | |
| card.innerHTML = ` | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">#${index + 1} ${coin.name} (${coin.symbol.toUpperCase()})</h3> | |
| <p class="text-xl font-bold text-green-600">$${coin.current_price.toLocaleString()}</p> | |
| <p class="text-sm ${coin.price_change_percentage_24h >=0 ? 'text-green-500' : 'text-red-500'}">24h Change: ${coin.price_change_percentage_24h.toFixed(2)}%</p> | |
| <div class='mt-2 flex flex-wrap'>${indicatorDots}</div> | |
| </div> | |
| <div class="text-right"> | |
| <span class="inline-block px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">${coin.indicatorCount} indicators</span> | |
| </div> | |
| </div> | |
| `; | |
| container.appendChild(card); | |
| }); | |
| document.getElementById('updateTime').textContent = new Date().toLocaleTimeString(); | |
| } | |
| async function refreshData() { | |
| const coins = await fetchCoinData(); | |
| coins.forEach(coin => { | |
| coin.indicatorCount = countIndicators(coin); | |
| }); | |
| coins.sort((a,b) => b.indicatorCount - a.indicatorCount); | |
| renderAssets(coins); | |
| } | |
| renderIndicatorKey(); | |
| refreshData(); | |
| setInterval(refreshData, 60000); | |
| </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=MisoPretty/indicator-tracker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> | |