Cryptocurrency Tracking

// Real-time price update system
const updateCryptoPrices = async () => {
  try {
    const response = await fetch('/api/crypto/prices');
    const prices = await response.json();
    
    // Update dashboard values
    prices.forEach(crypto => {
      updateCryptoCard(crypto.symbol, crypto.price, crypto.change24h);
    });
  } catch (error) {
    console.error('Failed to update crypto prices:', error);
  }
};

// Update every 30 seconds
setInterval(updateCryptoPrices, 30000);

// Crypto portfolio chart using Chart.js
const cryptoChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: 'Portfolio Value (EUR)',
      data: [5000, 7500, 6800, 9200, 11000, 12540],
      borderColor: '#00cc99',
      backgroundColor: 'rgba(0, 204, 153, 0.1)',
      tension: 0.4,
      fill: true
    }]
  },
  options: {
    responsive: true,
    plugins: {
      tooltip: {
        callbacks: {
          label: (context) => `€${context.parsed.y.toFixed(2)}`
        }
      }
    }
  }
});

// Transaction display with icons
<div class="stat-card">
  <div class="stat-card-icon blue">
    <i class="fas fa-arrow-up"></i>
  </div>
  <div class="stat-card-info">
    <div class="stat-card-label">Buy BTC</div>
    <div class="stat-card-value">0.5 BTC @ €30,000</div>
  </div>
</div>

/* Responsive crypto cards */
.crypto-card {
  display: flex;
  align-items: center;
  padding: 1rem;
  background: linear-gradient(135deg, #00cc99 0%, #0066ff 100%);
  border-radius: 12px;
  color: white;
}

@media (max-width: 768px) {
  .crypto-card {
    flex-direction: column;
    text-align: center;
  }
}