Live Stock Ticker Widget for Your Dashboard

<!-- StockWidgetDesk - Live Stock Ticker -->
<div id="stock-widget-container"></div>
<style>
#stock-widget-container {
  max-width: 600px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}
.stock-widget {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.stock-widget-header {
  background: #f9fafb;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  color: #111827;
  font-weight: 600;
}
.stock-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  background: #ffffff;
  transition: background 0.2s;
}
.stock-item:hover {
  background: #f9fafb;
}
.stock-item:last-child {
  border-bottom: none;
}
.stock-symbol {
  font-weight: bold;
  font-size: 16px;
  color: #111827;
}
.stock-price {
  font-size: 20px;
  font-weight: 600;
  color: #374151;
}
.stock-change {
  font-size: 14px;
  font-weight: 500;
}
.stock-change.positive { color: #10b981; }
.stock-change.negative { color: #ef4444; }
.stock-footer {
  padding: 8px 16px;
  background: #f9fafb;
  color: #6b7280;
  font-size: 12px;
  text-align: center;
}
</style>
<script>
(function() {
  const config = {
    stocks: ["AAPL","GOOGL","MSFT","AMZN","TSLA"],
    theme: 'light',
    updateInterval: 3000,
    showPercent: true,
    accentColor: '#0ea5e9'
  };

  const stockData = {};
  config.stocks.forEach(symbol => {
    stockData[symbol] = {
      price: (Math.random() * 500 + 50).toFixed(2),
      change: (Math.random() * 10 - 5).toFixed(2)
    };
  });

  function renderWidget() {
    const container = document.getElementById('stock-widget-container');
    let html = '<div class="stock-widget">';
    html += '<div class="stock-widget-header">Live Stock Ticker</div>';

    config.stocks.forEach(symbol => {
      const data = stockData[symbol];
      const changePercent = ((data.change / data.price) * 100).toFixed(2);
      const changeClass = data.change >= 0 ? 'positive' : 'negative';

      html += `<div class="stock-item">
        <div>
          <div class="stock-symbol">${symbol}</div>
          <div class="stock-price">$${data.price}</div>
        </div>
        <div class="stock-change ${changeClass}">
          ${data.change >= 0 ? '+' : ''}${data.change}`;

      if (config.showPercent) {
        html += ` (${changePercent >= 0 ? '+' : ''}${changePercent}%)`;
      }

      html += '</div></div>';
    });

    html += '<div class="stock-footer">Updates every ' + (config.updateInterval / 1000) + 's - Demo data</div>';
    html += '</div>';

    container.innerHTML = html;
  }

  function updatePrices() {
    config.stocks.forEach(symbol => {
      const data = stockData[symbol];
      const change = (Math.random() - 0.5) * 2;
      data.price = (parseFloat(data.price) + change).toFixed(2);
      data.change = (parseFloat(data.change) + change).toFixed(2);
    });
    renderWidget();
  }

  renderWidget();
  setInterval(updatePrices, config.updateInterval);
})();
</script>