PUBLICTRY

 Google Finance - लाइव बाजार (Beta Style)

<style>
    * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Arial, sans-serif; }
    body {
        background: #0f0f0f;
        color: #fff;
        padding: 20px;
    }
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px solid #333;
    }
    .header h1 {
        font-size: 28px;
        color: #34a853;
    }
    .search {
        padding: 10px 20px;
        width: 400px;
        border-radius: 50px;
        border: none;
        background: #1f1f1f;
        color: #fff;
        font-size: 16px;
    }
    .market-summary {
        margin: 30px 0;
    }
    .section-title {
        font-size: 22px;
        margin-bottom: 15px;
        color: #34a853;
    }
    .stocks-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 15px;
    }
    .stock-card {
        background: #1f1f1f;
        padding: 18px;
        border-radius: 12px;
        border: 1px solid #333;
        transition: all 0.3s;
    }
    .stock-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    }
    .stock-name {
        font-size: 18px;
        font-weight: bold;
    }
    .stock-symbol {
        color: #aaa;
        font-size: 14px;
    }
    .price {
        font-size: 24px;
        margin: 10px 0;
    }
    .change {
        font-size: 16px;
    }
    .positive { color: #00c853; }
    .negative { color: #ff1744; }
    .news-section {
        margin-top: 40px;
    }
    .news-item {
        background: #1f1f1f;
        padding: 15px;
        margin-bottom: 12px;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
    }
    .live-dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        background: #34a853;
        border-radius: 50%;
        animation: pulse 2s infinite;
        margin-right: 8px;
    }
    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.4; }
        100% { opacity: 1; }
    }
    footer {
        text-align: center;
        margin-top: 50px;
        color: #666;
        font-size: 14px;
    }
</style>



<div class="header">
    <h1>Google Finance <span style="font-size:18px;color:#666;">Beta</span></h1>
    <input type="text" class="search" placeholder="स्टॉक, इंडेक्स या कंपनी सर्च करें..." />
</div>

<div style="margin-top:15px; color:#34a853;">
    <span class="live-dot"></span> <strong>लाइव मार्केट अपडेट</strong> (हर 10 सेकंड में रिफ्रेश)
</div>

<div class="market-summary">
    <div class="section-title">मुख्य बाजार सूचकांक</div>
    <div class="stocks-grid" id="indices"></div>
</div>

<div class="market-summary">
    <div class="section-title">पॉपुलर स्टॉक्स (NSE)</div>
    <div class="stocks-grid" id="stocks"></div>
</div>

<div class="news-section">
    <div class="section-title">आज की फाइनेंशियल न्यूज़</div>
    <div id="news"></div>
</div>

<footer>
    डेटा Yahoo Finance / Alpha Vantage जैसी फ्री API से लिया गया है। केवल सूचनात्मक उद्देश्य के लिए।<br />
    ट्रेडिंग निर्णय के लिए आधिकारिक स्रोत का उपयोग करें।
</footer>

<script>
    // भारतीय स्टॉक्स और इंडेक्स (Yahoo Finance symbols)
    const stocks = [
        { symbol: "RELIANCE.NS", name: "Reliance Industries" },
        { symbol: "HDFCBANK.NS", name: "HDFC Bank" },
        { symbol: "INFY.NS", name: "Infosys" },
        { symbol: "TCS.NS", name: "Tata Consultancy" },
        { symbol: "TATAMOTORS.NS", name: "Tata Motors" },
        { symbol: "ICICIBANK.NS", name: "ICICI Bank" }
    ];

    const indices = [
        { symbol: "^NSEI", name: "Nifty 50" },
        { symbol: "^BSESN", name: "Sensex" }
    ];

    // फ्री स्टॉक डेटा API (Yahoo Finance unofficial - काम करता है ज्यादातर मामलों में)
    async function getStockData(symbol) {
        try {
            const res = await fetch(`https://query1.finance.yahoo.com/v8/finance/chart/${symbol}?interval=1m&range=1d`);
            const data = await res.json();
            const quote = data.chart.result[0].meta;
            const price = quote.regularMarketPrice || quote.previousClose;
            const prevClose = quote.previousClose;
            const change = (price - prevClose).toFixed(2);
            const changePct = ((price - prevClose) / prevClose * 100).toFixed(2);
            
            return {
                price: price.toFixed(2),
                change: parseFloat(change),
                changePct: parseFloat(changePct)
            };
        } catch (e) {
            console.error("Error fetching " + symbol);
            return { price: "N/A", change: 0, changePct: 0 };
        }
    }

    // स्टॉक कार्ड बनाएं
    function createCard(item, data) {
        const isPositive = data.change >= 0;
        return `
            <div class="stock-card">
                <div class="stock-name">${item.name}</div>
                <div class="stock-symbol">${item.symbol}</div>
                <div class="price">₹${data.price}</div>
                <div class="change ${isPositive ? 'positive' : 'negative'}">
                    ${isPositive ? '↑' : '↓'} ₹${data.change} (${data.changePct}%)
                </div>
            </div>
        `;
    }

    // डेटा अपडेट करें
    async function updateMarket() {
        // Indices
        let indicesHTML = '';
        for (let idx of indices) {
            const data = await getStockData(idx.symbol);
            indicesHTML += createCard(idx, data);
        }
        document.getElementById('indices').innerHTML = indicesHTML;

        // Stocks
        let stocksHTML = '';
        for (let stock of stocks) {
            const data = await getStockData(stock.symbol);
            stocksHTML += createCard(stock, data);
        }
        document.getElementById('stocks').innerHTML = stocksHTML;
    }

    // सैंपल न्यूज़ (आप बाद में रियल न्यूज़ API जोड़ सकते हैं)
    function loadNews() {
        const newsHTML = `
            <div class="news-item">
                <div>
                    <strong>रिलायंस इंडस्ट्रीज</strong> ने Q4 नतीजे घोषित किए, लाभ में 12% की बढ़ोतरी<br>
                    <small style="color:#aaa;">15 मिनट पहले • CNBC TV18</small>
                </div>
                <div style="color:#00c853;">+2.45%</div>
            </div>
            <div class="news-item">
                <div>
                    <strong>इंफोसिस</strong> को बड़ा ऑर्डर मिला, शेयर में तेजी<br>
                    <small style="color:#aaa;">45 मिनट पहले • Economic Times</small>
                </div>
                <div style="color:#00c853;">+1.78%</div>
            </div>
        `;
        document.getElementById('news').innerHTML = newsHTML;
    }

    // शुरू करें
    window.onload = () => {
        updateMarket();
        loadNews();
        
        // हर 10 सेकंड में लाइव अपडेट
        setInterval(updateMarket, 10000);
    };
</script>

</!doctype>