Spaces:

mexicanamerican
/

crypto

Running

App Files Files Community

mexicanamerican commited on Mar 31

Commit

43ceb5f

verified ·

1 Parent(s): 0f6afff

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +321 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Crypto
-emoji: 🌍
-colorFrom: red
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: crypto
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,321 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Crypto Price 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>
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%);
+        }
+        .card-hover: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);
+        }
+        .price-up {
+            color: #10b981;
+        }
+        .price-down {
+            color: #ef4444;
+        }
+        .loading-spinner {
+            border-top-color: #3b82f6;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body class="min-h-screen gradient-bg text-white">
+    <div class="container mx-auto px-4 py-12">
+        <header class="text-center mb-12">
+            <h1 class="text-4xl md:text-5xl font-bold mb-4">Crypto Price Tracker</h1>
+            <p class="text-xl opacity-90">Real-time cryptocurrency prices and market data</p>
+            <div class="mt-6 flex justify-center">
+                <div class="relative w-full max-w-md">
+                    <input
+                        type="text"
+                        id="searchInput"
+                        placeholder="Search cryptocurrencies..."
+                        class="w-full px-4 py-3 rounded-full bg-white/10 border border-white/20 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent text-white placeholder-white/70"
+                    >
+                    <button id="searchBtn" class="absolute right-3 top-3 text-white/70 hover:text-white">
+                        <i class="fas fa-search"></i>
+                    </button>
+                </div>
+            </div>
+        </header>
+        <div class="flex justify-between items-center mb-6">
+            <h2 class="text-2xl font-semibold">Top Cryptocurrencies</h2>
+            <div class="flex items-center space-x-2">
+                <span class="text-sm">Auto-refresh:</span>
+                <label class="relative inline-flex items-center cursor-pointer">
+                    <input type="checkbox" id="autoRefresh" class="sr-only peer" checked>
+                    <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div>
+                </label>
+            </div>
+        </div>
+        <div id="loading" class="flex justify-center items-center py-12">
+            <div class="loading-spinner h-12 w-12 border-4 border-white/20 rounded-full"></div>
+        </div>
+        <div id="cryptoContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 hidden">
+            <!-- Crypto cards will be inserted here -->
+        </div>
+        <div id="errorMessage" class="hidden text-center py-12">
+            <i class="fas fa-exclamation-triangle text-4xl mb-4 text-yellow-400"></i>
+            <h3 class="text-2xl font-semibold mb-2">Failed to load data</h3>
+            <p class="mb-4">We couldn't fetch cryptocurrency prices. Please check your connection and try again.</p>
+            <button id="retryBtn" class="px-6 py-2 bg-white/10 hover:bg-white/20 rounded-full border border-white/20 transition-all">
+                <i class="fas fa-sync-alt mr-2"></i> Retry
+            </button>
+        </div>
+        <div class="mt-12 text-center text-sm opacity-80">
+            <p>Data provided by CoinGecko API. Prices update every 60 seconds.</p>
+            <p class="mt-2">Last updated: <span id="lastUpdated">-</span></p>
+        </div>
+    </div>
+    <script>
+        // Configuration
+        const config = {
+            coins: ['bitcoin', 'ethereum', 'binancecoin', 'ripple', 'cardano', 'solana', 'dogecoin', 'polkadot', 'litecoin', 'chainlink'],
+            vsCurrency: 'usd',
+            autoRefreshInterval: 60000 // 60 seconds
+        };
+        // DOM Elements
+        const cryptoContainer = document.getElementById('cryptoContainer');
+        const loadingElement = document.getElementById('loading');
+        const errorMessage = document.getElementById('errorMessage');
+        const retryBtn = document.getElementById('retryBtn');
+        const searchInput = document.getElementById('searchInput');
+        const searchBtn = document.getElementById('searchBtn');
+        const autoRefreshToggle = document.getElementById('autoRefresh');
+        const lastUpdatedElement = document.getElementById('lastUpdated');
+        // State
+        let refreshInterval;
+        let allCoinsData = [];
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            fetchCryptoData();
+            setupAutoRefresh();
+            setupEventListeners();
+        });
+        // Event Listeners
+        function setupEventListeners() {
+            retryBtn.addEventListener('click', fetchCryptoData);
+            searchBtn.addEventListener('click', filterCoins);
+            searchInput.addEventListener('keyup', (e) => {
+                if (e.key === 'Enter') filterCoins();
+            });
+            autoRefreshToggle.addEventListener('change', setupAutoRefresh);
+        }
+        // Auto Refresh
+        function setupAutoRefresh() {
+            clearInterval(refreshInterval);
+            if (autoRefreshToggle.checked) {
+                refreshInterval = setInterval(fetchCryptoData, config.autoRefreshInterval);
+            }
+        }
+        // Fetch Data
+        async function fetchCryptoData() {
+            try {
+                showLoading();
+                hideError();
+                const ids = config.coins.join(',');
+                const url = `https://api.coingecko.com/api/v3/coins/markets?vs_currency=${config.vsCurrency}&ids=${ids}&order=market_cap_desc&per_page=100&page=1&sparkline=true&price_change_percentage=1h,24h,7d`;
+                const response = await fetch(url);
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                allCoinsData = await response.json();
+                renderCryptoCards(allCoinsData);
+                updateLastUpdated();
+            } catch (error) {
+                console.error('Error fetching crypto data:', error);
+                showError();
+            } finally {
+                hideLoading();
+            }
+        }
+        // Render Crypto Cards
+        function renderCryptoCards(coinsData) {
+            cryptoContainer.innerHTML = '';
+            coinsData.forEach(coin => {
+                const priceChange24h = coin.price_change_percentage_24h;
+                const priceChangeClass = priceChange24h >= 0 ? 'price-up' : 'price-down';
+                const priceChangeIcon = priceChange24h >= 0 ? 'fa-arrow-up' : 'fa-arrow-down';
+                const card = document.createElement('div');
+                card.className = 'bg-white/5 rounded-xl p-6 border border-white/10 transition-all duration-300 card-hover';
+                card.innerHTML = `
+                    <div class="flex justify-between items-start mb-4">
+                        <div class="flex items-center">
+                            <img src="${coin.image}" alt="${coin.name}" class="w-10 h-10 mr-3 rounded-full">
+                            <div>
+                                <h3 class="font-bold text-lg">${coin.name}</h3>
+                                <span class="text-sm opacity-80">${coin.symbol.toUpperCase()}</span>
+                            </div>
+                        </div>
+                        <span class="text-xs px-2 py-1 rounded-full bg-white/10">#${coin.market_cap_rank}</span>
+                    </div>
+                    <div class="mb-4">
+                        <div class="flex items-baseline mb-1">
+                            <span class="text-2xl font-bold mr-2">$${coin.current_price.toLocaleString()}</span>
+                            <span class="text-sm ${priceChangeClass}">
+                                <i class="fas ${priceChangeIcon} mr-1"></i>${Math.abs(priceChange24h).toFixed(2)}%
+                            </span>
+                        </div>
+                        <div class="text-sm opacity-80">Market Cap: $${coin.market_cap.toLocaleString()}</div>
+                    </div>
+                    <div class="h-16 mb-4">
+                        <canvas class="w-full h-full" id="sparkline-${coin.id}"></canvas>
+                    </div>
+                    <div class="grid grid-cols-3 gap-2 text-center text-sm">
+                        <div class="bg-white/5 p-2 rounded">
+                            <div>1h</div>
+                            <div class="${coin.price_change_percentage_1h_in_currency >= 0 ? 'price-up' : 'price-down'}">
+                                ${coin.price_change_percentage_1h_in_currency ? coin.price_change_percentage_1h_in_currency.toFixed(2) + '%' : '-'}
+                            </div>
+                        </div>
+                        <div class="bg-white/5 p-2 rounded">
+                            <div>24h</div>
+                            <div class="${priceChangeClass}">
+                                ${priceChange24h.toFixed(2)}%
+                            </div>
+                        </div>
+                        <div class="bg-white/5 p-2 rounded">
+                            <div>7d</div>
+                            <div class="${coin.price_change_percentage_7d_in_currency >= 0 ? 'price-up' : 'price-down'}">
+                                ${coin.price_change_percentage_7d_in_currency.toFixed(2)}%
+                            </div>
+                        </div>
+                    </div>
+                `;
+                cryptoContainer.appendChild(card);
+                // Render sparkline after the card is added to DOM
+                setTimeout(() => renderSparkline(coin), 100);
+            });
+            showCryptoContainer();
+        }
+        // Render Sparkline Chart
+        function renderSparkline(coin) {
+            const canvas = document.getElementById(`sparkline-${coin.id}`);
+            if (!canvas) return;
+            const ctx = canvas.getContext('2d');
+            const sparklineData = coin.sparkline_in_7d.price;
+            const width = canvas.width;
+            const height = canvas.height;
+            // Calculate scale factors
+            const minPrice = Math.min(...sparklineData);
+            const maxPrice = Math.max(...sparklineData);
+            const scaleY = height / (maxPrice - minPrice);
+            const scaleX = width / (sparklineData.length - 1);
+            // Draw sparkline
+            ctx.beginPath();
+            ctx.moveTo(0, height - (sparklineData[0] - minPrice) * scaleY);
+            for (let i = 1; i < sparklineData.length; i++) {
+                ctx.lineTo(i * scaleX, height - (sparklineData[i] - minPrice) * scaleY);
+            }
+            ctx.strokeStyle = coin.price_change_percentage_7d_in_currency >= 0 ? '#10b981' : '#ef4444';
+            ctx.lineWidth = 2;
+            ctx.stroke();
+        }
+        // Filter Coins
+        function filterCoins() {
+            const searchTerm = searchInput.value.toLowerCase();
+            if (!searchTerm) {
+                renderCryptoCards(allCoinsData);
+                return;
+            }
+            const filteredCoins = allCoinsData.filter(coin =>
+                coin.name.toLowerCase().includes(searchTerm) ||
+                coin.symbol.toLowerCase().includes(searchTerm)
+            );
+            if (filteredCoins.length === 0) {
+                cryptoContainer.innerHTML = `
+                    <div class="col-span-full text-center py-12">
+                        <i class="fas fa-search text-4xl mb-4 opacity-50"></i>
+                        <h3 class="text-xl font-semibold">No cryptocurrencies found</h3>
+                        <p class="opacity-80">Try a different search term</p>
+                    </div>
+                `;
+            } else {
+                renderCryptoCards(filteredCoins);
+            }
+        }
+        // UI Helpers
+        function showLoading() {
+            loadingElement.classList.remove('hidden');
+            cryptoContainer.classList.add('hidden');
+        }
+        function hideLoading() {
+            loadingElement.classList.add('hidden');
+        }
+        function showCryptoContainer() {
+            cryptoContainer.classList.remove('hidden');
+        }
+        function showError() {
+            errorMessage.classList.remove('hidden');
+            cryptoContainer.classList.add('hidden');
+        }
+        function hideError() {
+            errorMessage.classList.add('hidden');
+        }
+        function updateLastUpdated() {
+            const now = new Date();
+            lastUpdatedElement.textContent = now.toLocaleTimeString();
+        }
+    </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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>