Spaces:

MisoPretty
/

indicator-tracker

Running

App Files Files Community

MisoPretty commited on Aug 20, 2025

Commit

135299d

verified ·

1 Parent(s): 224907e

undefined - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +41 -20

index.html CHANGED Viewed

@@ -10,7 +10,7 @@
 .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; }
-@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
 </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
@@ -40,6 +40,7 @@
 </div>
 </div>
 <div id="asset-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"></div>
 </main>
@@ -51,16 +52,29 @@
 </footer>
 <script>
-// Your list of 18 indicators (simplified for CoinGecko data mapping)
 const indicatorsList = [
-  'market_cap', 'volume_24h', 'price_change_24h', 'price_change_7d', 'total_supply',
-  'max_supply', 'circulating_supply', 'ath', 'atl', 'high_24h', 'low_24h', 'price',
-  'dominance', 'roi', 'change_pct', 'liquidity', 'social_score', 'developer_score'
 ];
 async function fetchCoinData() {
     try {
-        // Fetch top 50 coins by market cap
         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;
@@ -70,13 +84,23 @@ async function fetchCoinData() {
     }
 }
 function countIndicators(coin) {
-    // Count how many of our indicators are 'available' or positive
-    let count = 0;
-    indicatorsList.forEach(ind => {
-        if (coin[ind] !== null && coin[ind] !== undefined) count++;
-    });
-    return count;
 }
 function renderAssets(coins) {
@@ -84,44 +108,41 @@ function renderAssets(coins) {
     container.innerHTML = '';
     coins.forEach((coin, index) => {
         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>
                 <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);
     });
-    // Update timestamp
     document.getElementById('updateTime').textContent = new Date().toLocaleTimeString();
 }
 async function refreshData() {
     const coins = await fetchCoinData();
-    // Add indicator count
     coins.forEach(coin => {
         coin.indicatorCount = countIndicators(coin);
     });
-    // Sort descending by indicator count
     coins.sort((a,b) => b.indicatorCount - a.indicatorCount);
     renderAssets(coins);
 }
-// Initial load
 refreshData();
-// Refresh every 60 seconds
 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>

 .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">
 </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>
 <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;
     }
 }
+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) {
     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>