שער קריפטו

שערי קריפטו בזמן אמת .crypto-dashboard { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background: #f8f9fa; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); direction: rtl; } .crypto-header { text-align: center; margin-bottom: 30px; padding: 20px 0; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .crypto-title { font-size: 2.5rem; font-weight: 700; color: #2c3e50; margin-bottom: 10px; } .crypto-subtitle { font-size: 1.1rem; color: #7f8c8d; margin-bottom: 15px; } .status-bar { display: flex; justify-content: center; align-items: center; gap: 20px; font-size: 0.9rem; color: #95a5a6; } .live-indicator { display: flex; align-items: center; gap: 8px; } .live-dot { width: 8px; height: 8px; background: #27ae60; border-radius: 50%; animation: pulse 2s infinite; } .stats-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; } .stat-card { background: white; border-radius: 8px; padding: 20px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid #e9ecef; } .stat-title { font-size: 0.9rem; color: #6c757d; margin-bottom: 10px; font-weight: 500; } .stat-value { font-size: 1.8rem; font-weight: bold; color: #2c3e50; } .loading-container { text-align: center; padding: 60px 20px; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .loading-spinner { width: 40px; height: 40px; border: 3px solid #e9ecef; border-top: 3px solid #007bff; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px; } .error-container { text-align: center; padding: 40px 20px; background: #f8d7da; color: #721c24; border-radius: 8px; border: 1px solid #f5c6cb; display: none; } .crypto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; display: none; } .crypto-card { background: white; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid #e9ecef; transition: all 0.2s ease; cursor: pointer; } .crypto-card:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.15); transform: translateY(-2px); } .crypto-info { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; } .crypto-logo { position: relative; } .crypto-logo img { width: 40px; height: 40px; border-radius: 50%; } .rank-badge { position: absolute; top: -5px; right: -5px; background: #007bff; color: white; font-size: 0.7rem; font-weight: bold; padding: 2px 5px; border-radius: 10px; min-width: 18px; text-align: center; } .crypto-details h3 { margin: 0 0 5px 0; font-size: 1.1rem; color: #2c3e50; } .crypto-symbol { color: #6c757d; font-size: 0.9rem; text-transform: uppercase; } .price-section { margin-bottom: 15px; } .current-price { font-size: 1.5rem; font-weight: bold; color: #2c3e50; } .changes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 15px; } .change-item { text-align: center; padding: 8px; background: #f8f9fa; border-radius: 4px; } .change-label { font-size: 0.8rem; color: #6c757d; margin-bottom: 5px; } .change-value { font-weight: bold; font-size: 0.9rem; } .positive { color: #28a745; } .negative { color: #dc3545; } .market-info { border-top: 1px solid #e9ecef; padding-top: 15px; } .market-row { display: flex; justify-content: space-between; margin-bottom: 8px; } .market-label { color: #6c757d; font-size: 0.9rem; } .market-value { font-weight: 600; color: #495057; } .chart-container { margin-top: 15px; padding: 10px; background: #f8f9fa; border-radius: 4px; height: 100px; display: none; } .mini-chart { width: 100%; height: 100%; } .footer { margin-top: 40px; text-align: center; color: #6c757d; font-size: 0.9rem; padding: 20px; background: white; border-radius: 8px; } .retry-button { background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 0.9rem; margin-top: 15px; } .retry-button:hover { background: #0056b3; } /* Animations */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Responsive */ @media (max-width: 768px) { .crypto-dashboard { padding: 15px; } .crypto-title { font-size: 2rem; } .crypto-grid { grid-template-columns: 1fr; } .stats-container { grid-template-columns: 1fr; } .status-bar { flex-direction: column; gap: 10px; } } 💰 שערי קריפטו בזמן אמת מעקב אחר 20 המטבעות הדיגיטליים המובילים בעולם עדכון אחרון: טוען... עדכון חי 💎 סה"כ שווי שוק טוען... 📈 מטבעות עולים טוען... 📉 מטבעות יורדים טוען... טוען נתוני קריפטו... אנא המתן, אנחנו מביאים לך את המידע העדכני ביותר ❌ שגיאה בטעינת הנתונים מצטערים, לא הצלחנו לטעון את נתוני הקריפטו נסה שוב מקור הנתונים: CoinGecko API | תדירות עדכון: כל 30 שניות לחץ על כרטיס מטבע כדי לראות גרף מחירים let cryptoData = []; let lastUpdateTime = new Date(); let updateInterval; let retryCount = 0; const maxRetries = 3; // Format price function function formatPrice(price) { if (price < 0.01) { return `$${price.toFixed(6)}`; } else if (price < 1) { return `$${price.toFixed(4)}`; } else if (price = 1e12) { return `$${(marketCap / 1e12).toFixed(2)}T`; } else if (marketCap >= 1e9) { return `$${(marketCap / 1e9).toFixed(2)}B`; } else if (marketCap >= 1e6) { return `$${(marketCap / 1e6).toFixed(2)}M`; } else { return `$${marketCap.toLocaleString()}`; } } // Get price change color function getPriceChangeColor(change) { return change >= 0 ? 'positive' : 'negative'; } // Create mini chart function createMiniChart(container, sparklineData, isPositive) { if (!sparklineData || sparklineData.length === 0) return; const canvas = document.createElement('canvas'); canvas.className = 'mini-chart'; canvas.width = container.offsetWidth * 2; canvas.height = container.offsetHeight * 2; canvas.style.width = '100%'; canvas.style.height = '100%'; const ctx = canvas.getContext('2d'); container.innerHTML = ''; container.appendChild(canvas); const padding = 10; const width = canvas.width - padding * 2; const height = canvas.height - padding * 2; const minPrice = Math.min(...sparklineData); const maxPrice = Math.max(...sparklineData); const priceRange = maxPrice - minPrice; if (priceRange === 0) return; ctx.strokeStyle = isPositive ? '#28a745' : '#dc3545'; ctx.lineWidth = 2; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.beginPath(); sparklineData.forEach((price, index) => { const x = padding + (index / (sparklineData.length - 1)) * width; const y = padding + height - ((price - minPrice) / priceRange) * height; if (index === 0) { ctx.moveTo(x, y); } else { ctx.lineTo(x, y); } }); ctx.stroke(); const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height); gradient.addColorStop(0, isPositive ? 'rgba(40, 167, 69, 0.2)' : 'rgba(220, 53, 69, 0.2)'); gradient.addColorStop(1, 'rgba(0, 0, 0, 0)'); ctx.fillStyle = gradient; ctx.fill(); } // Render crypto cards function renderCryptoCards() { const grid = document.getElementById('cryptoGrid'); grid.innerHTML = ''; cryptoData.forEach(crypto => { const card = document.createElement('div'); card.className = 'crypto-card'; card.onclick = () => toggleChart(crypto.id); const changeClass24h = getPriceChangeColor(crypto.price_change_percentage_24h); const changeClass7d = getPriceChangeColor(crypto.price_change_percentage_7d); const changeClass30d = getPriceChangeColor(crypto.price_change_percentage_30d); const changeClass1y = getPriceChangeColor(crypto.price_change_percentage_1y); card.innerHTML = ` #${crypto.market_cap_rank} ${crypto.name} ${crypto.symbol.toUpperCase()} ${formatPrice(crypto.current_price)} 24 שעות ${crypto.price_change_percentage_24h?.toFixed(2) || 'N/A'}% 7 ימים ${crypto.price_change_percentage_7d?.toFixed(2) || 'N/A'}% 30 ימים ${crypto.price_change_percentage_30d?.toFixed(2) || 'N/A'}% שנה ${crypto.price_change_percentage_1y?.toFixed(2) || 'N/A'}% שווי שוק ${formatMarketCap(crypto.market_cap)} נפח מסחר 24h ${formatMarketCap(crypto.total_volume)} `; grid.appendChild(card); }); } // Toggle chart display function toggleChart(cryptoId) { const chartContainer = document.getElementById(`chart-${cryptoId}`); const crypto = cryptoData.find(c => c.id === cryptoId); if (chartContainer.style.display === 'none') { chartContainer.style.display = 'block'; if (crypto.sparkline_in_7d && crypto.sparkline_in_7d.price) { createMiniChart( chartContainer, crypto.sparkline_in_7d.price, crypto.price_change_percentage_7d >= 0 ); } } else { chartContainer.style.display = 'none'; } } // Update statistics function updateStatistics() { const totalMarketCap = cryptoData.reduce((sum, crypto) => sum + crypto.market_cap, 0); const gainers = cryptoData.filter(crypto => crypto.price_change_percentage_24h > 0).length; const losers = cryptoData.filter(crypto => crypto.price_change_percentage_24h < 0).length; document.getElementById('totalMarketCap').textContent = formatMarketCap(totalMarketCap); document.getElementById('gainers').textContent = gainers; document.getElementById('losers').textContent = losers; } // Show error function showError() { document.getElementById('loading').style.display = 'none'; document.getElementById('error').style.display = 'block'; document.getElementById('cryptoGrid').style.display = 'none'; } // Show success function showSuccess() { document.getElementById('loading').style.display = 'none'; document.getElementById('error').style.display = 'none'; document.getElementById('cryptoGrid').style.display = 'grid'; } // Retry fetch function function retryFetch() { document.getElementById('error').style.display = 'none'; document.getElementById('loading').style.display = 'block'; retryCount = 0; fetchCryptoData(); } // Fetch crypto data with retry mechanism async function fetchCryptoData() { try { console.log('Fetching crypto data... Attempt:', retryCount + 1); // Use a more reliable endpoint with fallback const urls = [ 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=20&page=1&sparkline=true&price_change_percentage=24h,7d,30d,1y', 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=20&page=1&sparkline=false&price_change_percentage=24h,7d,30d,1y' ]; let response; let data; // Try with different URLs for (let i = 0; i < urls.length; i++) { try { response = await fetch(urls[i], { method: 'GET', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, cache: 'no-cache' }); if (response.ok) { data = await response.json(); break; } } catch (e) { console.log(`Failed to fetch from URL ${i + 1}:`, e); if (i === urls.length - 1) throw e; } } if (!data || !Array.isArray(data)) { throw new Error('Invalid data received'); } console.log('Crypto data fetched successfully:', data.length, 'coins'); cryptoData = data; lastUpdateTime = new Date(); retryCount = 0; showSuccess(); renderCryptoCards(); updateStatistics(); document.getElementById('lastUpdate').textContent = `עדכון אחרון: ${lastUpdateTime.toLocaleString('he-IL')}`; } catch (error) { console.error('Error fetching crypto data:', error); retryCount++; if (retryCount < maxRetries) { console.log(`Retrying in 5 seconds... (${retryCount}/${maxRetries})`); setTimeout(fetchCryptoData, 5000); } else { showError(); } } } // Initialize with delay to ensure DOM is ready function init() { console.log('Initializing crypto dashboard...'); // Clear any existing intervals if (updateInterval) { clearInterval(updateInterval); } // Initial fetch with small delay setTimeout(() => { fetchCryptoData(); // Set up regular updates updateInterval = setInterval(fetchCryptoData, 30000); }, 1000); } // Multiple initialization methods to ensure it works if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } // Backup initialization window.addEventListener('load', () => { if (!cryptoData.length) { console.log('Backup initialization triggered'); init(); } }); // Clean up on page unload window.addEventListener('beforeunload', () => { if (updateInterval) { clearInterval(updateInterval); } });