Posted on April 01, 2026 by Law Logic Learner

 <!DOCTYPE html>

<html lang="hi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Finance Gadget - लाइव स्टॉक</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

    body {
      font-family: 'Roboto', sans-serif;
      background: #f8f9fa;
      margin: 0;
      padding: 20px;
      color: #202124;
    }

    .dashboard {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 20px;
    }

    .card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      padding: 20px;
      transition: transform 0.2s;
    }

    .card:hover {
      transform: translateY(-5px);
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
    }

    .symbol {
      font-size: 1.5rem;
      font-weight: 700;
    }

    .price {
      font-size: 2rem;
      font-weight: 700;
    }

    .change {
      font-size: 1.1rem;
      font-weight: 500;
      padding: 4px 12px;
      border-radius: 20px;
    }

    .positive { background: #e6f4ea; color: #137333; }
    .negative { background: #fce8e6; color: #c5221f; }

    canvas {
      width: 100% !important;
      height: 120px !important;
      margin-top: 15px;
    }

    .ticker {
      background: #202124;
      color: white;
      padding: 12px 0;
      overflow: hidden;
      white-space: nowrap;
      margin-bottom: 20px;
      border-radius: 8px;
    }

    .ticker-content {
      display: inline-block;
      animation: ticker-scroll 30s linear infinite;
    }

    @keyframes ticker-scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    h1 {
      text-align: center;
      color: #1a73e8;
    }
  </style>
</head>
<body>

  <h1>📈 Finance Gadget - लाइव स्टॉक मार्केट</h1>

  <!-- लाइव टिकर -->
  <div class="ticker">
    <div class="ticker-content" id="tickerContent">
      AAPL $226.84 <span style="color:#137333">+1.23 (+0.54%)</span> &nbsp;&nbsp;&nbsp;&nbsp;
      TSLA $248.12 <span style="color:#c5221f">-2.45 (-0.98%)</span> &nbsp;&nbsp;&nbsp;&nbsp;
      GOOGL $168.95 <span style="color:#137333">+3.12 (+1.88%)</span> &nbsp;&nbsp;&nbsp;&nbsp;
      RELIANCE ₹2,456.75 <span style="color:#137333">+18.50 (+0.76%)</span> &nbsp;&nbsp;&nbsp;&nbsp;
      TCS ₹4,128.90 <span style="color:#c5221f">-12.30 (-0.30%)</span>
    </div>
  </div>

  <div class="dashboard" id="dashboard">
    <!-- JS से कार्ड्स ऐड होंगे -->
  </div>

  <script>
    // सैंपल स्टॉक डेटा (रियल API से बदलें)
    const stocks = [
      { symbol: "AAPL", name: "Apple Inc.", price: 226.84, change: 1.23, percent: 0.54, color: "#137333" },
      { symbol: "TSLA", name: "Tesla Inc.", price: 248.12, change: -2.45, percent: -0.98, color: "#c5221f" },
      { symbol: "GOOGL", name: "Alphabet Inc.", price: 168.95, change: 3.12, percent: 1.88, color: "#137333" },
      { symbol: "RELIANCE", name: "Reliance Industries", price: 2456.75, change: 18.50, percent: 0.76, color: "#137333" },
      { symbol: "TCS", name: "TCS", price: 4128.90, change: -12.30, percent: -0.30, color: "#c5221f" }
    ];

    function createStockCard(stock) {
      const card = document.createElement('div');
      card.className = 'card';

      const isPositive = stock.change > 0;
      const changeClass = isPositive ? 'positive' : 'negative';

      card.innerHTML = `
        <div class="header">
          <div>
            <div class="symbol">${stock.symbol}</div>
            <div style="font-size:0.9rem; color:#5f6368;">${stock.name}</div>
          </div>
          <div class="change ${changeClass}">
            ${isPositive ? '+' : ''}${stock.change} (${isPositive ? '+' : ''}${stock.percent}%)
          </div>
        </div>
        <div class="price">₹${stock.price.toLocaleString('en-IN')}</div>
        <canvas id="chart-${stock.symbol}" width="300" height="120"></canvas>
      `;

      document.getElementById('dashboard').appendChild(card);

      // सिंपल लाइन चार्ट (Canvas)
      setTimeout(() => {
        const canvas = document.getElementById(`chart-${stock.symbol}`);
        if (!canvas) return;
        const ctx = canvas.getContext('2d');

        ctx.strokeStyle = stock.color;
        ctx.lineWidth = 3;

        ctx.beginPath();
        ctx.moveTo(0, 80);
        ctx.quadraticCurveTo(75, 40, 150, 90);
        ctx.quadraticCurveTo(225, 60, 300, 70);
        ctx.stroke();

        // छोटे डॉट्स
        ctx.fillStyle = stock.color;
        ctx.fillRect(50, 65, 4, 4);
        ctx.fillRect(200, 75, 4, 4);
      }, 100);
    }

    // सभी स्टॉक कार्ड्स बनाएं
    stocks.forEach(stock => createStockCard(stock));

    // लाइव अपडेट सिमुलेशन (हर 5 सेकंड में प्राइस चेंज)
    setInterval(() => {
      const cards = document.querySelectorAll('.card');
      cards.forEach((card, index) => {
        const priceEl = card.querySelector('.price');
        let currentPrice = parseFloat(priceEl.textContent.replace(/[^0-9.]/g, ''));
        
        const randomChange = (Math.random() * 2 - 0.8).toFixed(2);
        currentPrice = (currentPrice + parseFloat(randomChange)).toFixed(2);
        
        priceEl.textContent = `₹${parseFloat(currentPrice).toLocaleString('en-IN')}`;
      });
    }, 5000);

    // टिकर को डुप्लिकेट करें ताकि स्मूथ स्क्रॉल हो
    const tickerContent = document.getElementById('tickerContent');
    tickerContent.innerHTML += tickerContent.innerHTML; // डुप्लिकेट
  </script>

</body>
</html>
Leave a comment

0 $type={blogger}:

Post a Comment

Subscribe to: Post Comments (Atom)

About

Blogroll