Spaces:
Running
Running
File size: 6,917 Bytes
6a51fc3 224907e 135299d 224907e 6a51fc3 224907e 6a51fc3 224907e 6a51fc3 135299d 224907e 6a51fc3 224907e 6a51fc3 224907e 135299d 224907e 6a51fc3 224907e 135299d 224907e 135299d 224907e 135299d 224907e 135299d 6a51fc3 224907e 6a51fc3 224907e 6a51fc3 224907e 6a51fc3 224907e 6a51fc3 135299d 224907e 6a51fc3 224907e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
<!DOCTYPE html>
<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>
|