• लाइव स्टॉक
<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: 600px; 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>

📈 - लाइव स्टॉक मार्केट

AAPL $226.84 +1.23 (+0.54%)      TSLA $248.12 -2.45 (-0.98%)      GOOGL $168.95 +3.12 (+1.88%)      RELIANCE ₹2,456.75 +18.50 (+0.76%)      TCS ₹4,128.90 -12.30 (-0.30%)
<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 = `
${stock.symbol}
${stock.name}
${isPositive ? '+' : ''}${stock.change} (${isPositive ? '+' : ''}${stock.percent}%)
₹${stock.price.toLocaleString('en-IN')}
`; 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>

</!doctype> 

0 $type={blogger}:

Post a Comment