Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Trends — Q-Simplified</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Work+Sans:wght@300;400;500;600&display=swap" rel="stylesheet"/> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script> | |
| <style> | |
| *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} | |
| :root{ | |
| --primary:#003465;--primary-mid:#004b8d;--surface:#f8f9fa; | |
| --surface-low:#f3f4f5;--surface-card:#ffffff; | |
| --tertiary:#8d2400;--on-tertiary:#ffdbd1; | |
| --text-primary:#191c1d;--text-secondary:#4e5f7b;--text-muted:#7a8fa6; | |
| --positive:#1a7a4a;--negative:#c0392b; | |
| --radius-sm:0.5rem;--radius-md:1rem;--radius-lg:1.5rem; | |
| --radius-xl:3rem;--radius-full:9999px; | |
| --shadow:0 4px 40px rgba(0,52,101,0.06); | |
| } | |
| body{font-family:'Work Sans',sans-serif;background:var(--surface);color:var(--text-primary);min-height:100vh} | |
| /* NAV */ | |
| .nav-wrapper{background:var(--primary);padding:0 2rem} | |
| .nav{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:2rem;height:64px} | |
| .logo{font-family:'Manrope',sans-serif;font-weight:800;font-size:1.25rem;color:#fff;text-decoration:none;letter-spacing:-0.02em} | |
| .nav-links{display:flex;align-items:center;gap:0.25rem;flex:1;justify-content:center} | |
| .nav-links a{font-size:0.875rem;color:rgba(255,255,255,0.7);text-decoration:none;padding:0.4rem 0.75rem;border-radius:var(--radius-full);transition:all 0.2s} | |
| .nav-links a:hover{color:#fff;background:rgba(255,255,255,0.1)} | |
| .nav-links a.active{color:#fff;font-weight:600} | |
| .nav-links a.active::after{content:'';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:20px;height:2px;background:var(--on-tertiary);border-radius:var(--radius-full)} | |
| .nav-links a{position:relative} | |
| .btn-login{font-size:0.8125rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,0.6);border-radius:var(--radius-full);padding:0.5rem 1.25rem;cursor:pointer;transition:all 0.2s;text-decoration:none;white-space:nowrap} | |
| .btn-login:hover{background:#fff;color:var(--primary)} | |
| /* PAGE HEADER */ | |
| .page-header{background:var(--primary);padding:3rem 2rem 0;overflow:hidden;position:relative} | |
| .page-header::after{content:'TRENDS';position:absolute;right:2rem;bottom:-1rem;font-family:'Manrope',sans-serif;font-size:6rem;font-weight:800;color:rgba(255,255,255,0.04);line-height:1;pointer-events:none} | |
| .page-header-inner{max-width:1100px;margin:0 auto;padding-bottom:3rem} | |
| .page-tag{font-size:0.6875rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--on-tertiary);opacity:0.8;margin-bottom:0.75rem} | |
| .page-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:2.5rem;color:#fff;letter-spacing:-0.03em;line-height:1.15;margin-bottom:0.75rem} | |
| .page-subtitle{font-size:0.9375rem;color:rgba(255,255,255,0.65);max-width:500px;line-height:1.6} | |
| .header-tabs{display:flex;gap:0.5rem;margin-top:2rem} | |
| .htab{padding:0.5rem 1.25rem;border-radius:var(--radius-full);font-size:0.8125rem;font-weight:500;cursor:pointer;border:none;transition:all 0.2s;color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.08)} | |
| .htab.active{background:var(--surface-card);color:var(--primary);font-weight:600} | |
| /* MAIN */ | |
| .main{max-width:1100px;margin:0 auto;padding:2rem 1.5rem} | |
| /* LIVE TICKER BAR */ | |
| .ticker-bar{background:var(--surface-card);border-radius:var(--radius-xl);padding:1rem 1.5rem;margin-bottom:1.5rem;box-shadow:var(--shadow);display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap} | |
| .ticker-label{font-size:0.6875rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap;margin-right:0.5rem} | |
| .ticker-sep{width:1px;height:16px;background:var(--surface-low)} | |
| .ticker-item{display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0.75rem;border-radius:var(--radius-full);background:var(--surface-low);cursor:pointer;transition:background 0.15s} | |
| .ticker-item:hover{background:#e8edf3} | |
| .ticker-item.active{background:var(--primary);color:#fff} | |
| .ticker-item.active .tval{color:#fff} | |
| .ticker-item.active .tchg{color:rgba(255,255,255,0.7)} | |
| .tname{font-size:0.75rem;font-weight:600;color:var(--text-secondary)} | |
| .ticker-item.active .tname{color:#fff} | |
| .tval{font-size:0.75rem;font-weight:700;color:var(--text-primary)} | |
| .tchg{font-size:0.6875rem;font-weight:500} | |
| .tchg.pos{color:var(--positive)} | |
| .tchg.neg{color:var(--negative)} | |
| .live-badge{display:flex;align-items:center;gap:0.375rem;margin-left:auto} | |
| .live-dot{width:6px;height:6px;border-radius:50%;background:#4caf82;animation:lpulse 2s infinite} | |
| @keyframes lpulse{0%,100%{box-shadow:0 0 0 0 rgba(76,175,130,0.4)}50%{box-shadow:0 0 0 4px rgba(76,175,130,0)}} | |
| .live-text{font-size:0.6875rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em} | |
| /* GRID */ | |
| .grid-2col{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;margin-bottom:1.5rem} | |
| .grid-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem;margin-bottom:1.5rem} | |
| /* CARDS */ | |
| .card{background:var(--surface-card);border-radius:var(--radius-xl);padding:1.5rem;box-shadow:var(--shadow)} | |
| .card-sm{background:var(--surface-card);border-radius:var(--radius-lg);padding:1.25rem;box-shadow:var(--shadow)} | |
| .card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.25rem} | |
| .card-title{font-family:'Manrope',sans-serif;font-weight:700;font-size:1rem;color:var(--text-primary)} | |
| .card-subtitle{font-size:0.75rem;color:var(--text-muted);margin-top:0.125rem} | |
| .card-badge{font-size:0.6875rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;padding:0.25rem 0.625rem;border-radius:var(--radius-full)} | |
| .badge-up{background:#f0fdf4;color:var(--positive)} | |
| .badge-down{background:#fef2f2;color:var(--negative)} | |
| .badge-neutral{background:var(--surface-low);color:var(--text-muted)} | |
| /* METRIC HERO */ | |
| .metric-value{font-family:'Manrope',sans-serif;font-weight:800;font-size:2.25rem;letter-spacing:-0.03em;color:var(--text-primary);line-height:1;margin-bottom:0.25rem} | |
| .metric-change{font-size:0.8125rem;font-weight:600} | |
| .metric-change.pos{color:var(--positive)} | |
| .metric-change.neg{color:var(--negative)} | |
| .metric-period{font-size:0.75rem;color:var(--text-muted);margin-top:0.25rem} | |
| /* CHART CONTAINER */ | |
| .chart-wrap{position:relative;height:220px;margin-top:1rem} | |
| .chart-wrap-lg{position:relative;height:280px;margin-top:1rem} | |
| .chart-wrap-sm{position:relative;height:120px;margin-top:0.75rem} | |
| /* STAT GRID */ | |
| .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem} | |
| .stat-cell{background:var(--surface-low);border-radius:var(--radius-sm);padding:0.75rem 1rem} | |
| .stat-cell-label{font-size:0.6875rem;color:var(--text-muted);font-weight:500;margin-bottom:0.25rem;text-transform:uppercase;letter-spacing:0.06em} | |
| .stat-cell-value{font-family:'Manrope',sans-serif;font-weight:700;font-size:1rem;color:var(--text-primary)} | |
| /* TIME RANGE SELECTOR */ | |
| .time-range{display:flex;gap:0.25rem;background:var(--surface-low);border-radius:var(--radius-full);padding:3px} | |
| .tr-btn{padding:0.3rem 0.875rem;border:none;border-radius:var(--radius-full);font-size:0.75rem;font-weight:600;color:var(--text-muted);background:transparent;cursor:pointer;transition:all 0.2s} | |
| .tr-btn.active{background:var(--surface-card);color:var(--primary);box-shadow:0 1px 6px rgba(0,52,101,0.1)} | |
| /* NEWS TICKER */ | |
| .news-strip{background:var(--primary);border-radius:var(--radius-lg);padding:1rem 1.25rem;margin-bottom:1.5rem;display:flex;align-items:center;gap:1rem;overflow:hidden} | |
| .news-strip-label{font-size:0.6875rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--on-tertiary);white-space:nowrap;flex-shrink:0} | |
| .news-scroll{flex:1;overflow:hidden;position:relative;height:20px} | |
| .news-items{display:flex;gap:3rem;animation:marquee 30s linear infinite;white-space:nowrap} | |
| .news-items:hover{animation-play-state:paused} | |
| .news-item{font-size:0.8125rem;color:rgba(255,255,255,0.85);white-space:nowrap} | |
| @keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} | |
| /* INDICATOR DETAIL LIST */ | |
| .ind-list{display:flex;flex-direction:column;gap:0.75rem} | |
| .ind-list-row{display:flex;align-items:center;justify-content:space-between;padding:0.75rem;border-radius:var(--radius-sm);background:var(--surface-low);cursor:pointer;transition:background 0.15s} | |
| .ind-list-row:hover{background:#e8edf3} | |
| .ind-list-row.active{background:var(--primary)} | |
| .ind-list-row.active .iname{color:#fff} | |
| .ind-list-row.active .ivalue{color:#fff} | |
| .ind-list-row.active .ichg{color:rgba(255,255,255,0.7)} | |
| .iname{font-size:0.875rem;font-weight:500;color:var(--text-primary)} | |
| .iright{text-align:right} | |
| .ivalue{font-family:'Manrope',sans-serif;font-size:1rem;font-weight:700;color:var(--text-primary);display:block} | |
| .ichg{font-size:0.75rem;font-weight:500} | |
| /* FOOTER */ | |
| .footer{background:var(--primary);margin-top:3rem} | |
| .footer-inner{max-width:1100px;margin:0 auto;padding:2rem 1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem} | |
| .footer-logo{font-family:'Manrope',sans-serif;font-weight:800;font-size:1.125rem;color:#fff;letter-spacing:-0.02em} | |
| .footer-copy{font-size:0.6875rem;color:rgba(255,255,255,0.4);margin-top:0.125rem} | |
| .footer-links{flex:1;display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap} | |
| .footer-links a{font-size:0.75rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.2s} | |
| .footer-links a:hover{color:#fff} | |
| @media(max-width:900px){.grid-2col,.grid-3col{grid-template-columns:1fr}} | |
| </style> | |
| </head> | |
| <body> | |
| <!-- NAV --> | |
| <div class="nav-wrapper"> | |
| <nav class="nav"> | |
| <a href="/" class="logo">Q-Simplified</a> | |
| <div class="nav-links"> | |
| <a href="/about.html">About</a> | |
| <a href="/trends.html" class="active">Trends</a> | |
| <a href="/study-zone.html">Study Zone</a> | |
| <a href="/test-series.html">Test Series</a> | |
| <a href="/simplified-zone.html">Simplified Zone</a> | |
| <a href="/book-class.html">Book Class</a> | |
| </div> | |
| <a href="/login.html" class="btn-login" id="nav-auth-btn">Login</a> | |
| </nav> | |
| </div> | |
| <!-- PAGE HEADER --> | |
| <div class="page-header"> | |
| <div class="page-header-inner"> | |
| <div class="page-tag">Live Market Data</div> | |
| <h1 class="page-title">Trends & Indicators</h1> | |
| <p class="page-subtitle">Real-time economic data refreshed every 60 seconds. Track the metrics that shape your investment decisions.</p> | |
| <div class="header-tabs"> | |
| <button class="htab active" onclick="switchView('overview')">Overview</button> | |
| <button class="htab" onclick="switchView('equity')">Equity</button> | |
| <button class="htab" onclick="switchView('macro')">Macro</button> | |
| <button class="htab" onclick="switchView('forex')">Forex & Commodities</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- MAIN --> | |
| <main class="main"> | |
| <!-- NEWS MARQUEE --> | |
| <div class="news-strip"> | |
| <span class="news-strip-label">Live</span> | |
| <div class="news-scroll"> | |
| <div class="news-items" id="news-marquee"> | |
| <span class="news-item">India's Forex reserves surge by $2.5 billion to reach $648.5 billion.</span> | |
| <span class="news-item">Brent Crude futures settle lower as supply concerns ease slightly.</span> | |
| <span class="news-item">Tech stocks lead recovery on NSE; midcaps hit record highs.</span> | |
| <span class="news-item">RBI holds repo rate steady at 6.50% in latest MPC meeting.</span> | |
| <span class="news-item">CPI inflation inches down to 4.75%, within RBI comfort zone.</span> | |
| <!-- duplicated for seamless loop --> | |
| <span class="news-item">India's Forex reserves surge by $2.5 billion to reach $648.5 billion.</span> | |
| <span class="news-item">Brent Crude futures settle lower as supply concerns ease slightly.</span> | |
| <span class="news-item">Tech stocks lead recovery on NSE; midcaps hit record highs.</span> | |
| <span class="news-item">RBI holds repo rate steady at 6.50% in latest MPC meeting.</span> | |
| <span class="news-item">CPI inflation inches down to 4.75%, within RBI comfort zone.</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- TICKER BAR --> | |
| <div class="ticker-bar"> | |
| <span class="ticker-label">Live Tickers</span> | |
| <div class="ticker-sep"></div> | |
| <div class="ticker-item active" onclick="selectTicker(this,'sensex')" id="tick-sensex"> | |
| <span class="tname">Sensex</span> | |
| <span class="tval" id="tv-sensex">74,248</span> | |
| <span class="tchg pos" id="tc-sensex">▲ 0.54%</span> | |
| </div> | |
| <div class="ticker-item" onclick="selectTicker(this,'nifty')" id="tick-nifty"> | |
| <span class="tname">Nifty 50</span> | |
| <span class="tval" id="tv-nifty">22,513</span> | |
| <span class="tchg pos" id="tc-nifty">▲ 0.48%</span> | |
| </div> | |
| <div class="ticker-item" onclick="selectTicker(this,'usdinr')" id="tick-usdinr"> | |
| <span class="tname">USD/INR</span> | |
| <span class="tval" id="tv-usdinr">83.42</span> | |
| <span class="tchg" id="tc-usdinr">—</span> | |
| </div> | |
| <div class="ticker-item" onclick="selectTicker(this,'crude')" id="tick-crude"> | |
| <span class="tname">Crude Oil</span> | |
| <span class="tval" id="tv-crude">$82.40</span> | |
| <span class="tchg neg" id="tc-crude">▼ 0.3%</span> | |
| </div> | |
| <div class="ticker-item" onclick="selectTicker(this,'repo')" id="tick-repo"> | |
| <span class="tname">Repo Rate</span> | |
| <span class="tval" id="tv-repo">6.50%</span> | |
| <span class="tchg" id="tc-repo">—</span> | |
| </div> | |
| <div class="ticker-item" onclick="selectTicker(this,'cpi')" id="tick-cpi"> | |
| <span class="tname">CPI</span> | |
| <span class="tval" id="tv-cpi">4.75%</span> | |
| <span class="tchg" id="tc-cpi">—</span> | |
| </div> | |
| <div class="live-badge"> | |
| <div class="live-dot"></div> | |
| <span class="live-text" id="last-updated">Live</span> | |
| </div> | |
| </div> | |
| <!-- MAIN CHART + INDICATORS --> | |
| <div class="grid-2col"> | |
| <!-- FEATURED CHART --> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div> | |
| <div class="card-title" id="chart-title">Sensex — BSE 30</div> | |
| <div class="card-subtitle" id="chart-subtitle">Bombay Stock Exchange Sensitive Index</div> | |
| </div> | |
| <div style="display:flex;align-items:center;gap:0.75rem"> | |
| <div class="time-range"> | |
| <button class="tr-btn" onclick="setRange('1D')">1D</button> | |
| <button class="tr-btn active" onclick="setRange('1W')">1W</button> | |
| <button class="tr-btn" onclick="setRange('1M')">1M</button> | |
| <button class="tr-btn" onclick="setRange('3M')">3M</button> | |
| <button class="tr-btn" onclick="setRange('1Y')">1Y</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="display:flex;align-items:baseline;gap:0.75rem"> | |
| <div class="metric-value" id="chart-value">74,248</div> | |
| <div class="metric-change pos" id="chart-change">▲ +402 (0.54%)</div> | |
| </div> | |
| <div class="metric-period" id="chart-period">Last updated just now</div> | |
| <div class="chart-wrap-lg" style="position:relative"> | |
| <div id="chart-loading" style="display:none;position:absolute;inset:0;background:rgba(255,255,255,0.75);z-index:2;align-items:center;justify-content:center;border-radius:0.5rem;font-size:0.8125rem;color:#7a8fa6;letter-spacing:0.06em"> | |
| Loading… | |
| </div> | |
| <canvas id="main-chart"></canvas> | |
| </div> | |
| </div> | |
| <!-- RIGHT: ALL INDICATORS --> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div> | |
| <div class="card-title">All Indicators</div> | |
| <div class="card-subtitle">Click to view chart</div> | |
| </div> | |
| </div> | |
| <div class="ind-list"> | |
| <div class="ind-list-row active" onclick="selectTicker(document.getElementById('tick-sensex'),'sensex')"> | |
| <span class="iname">Sensex</span> | |
| <div class="iright"> | |
| <span class="ivalue" id="il-sensex">74,248</span> | |
| <span class="ichg pos">▲ 0.54%</span> | |
| </div> | |
| </div> | |
| <div class="ind-list-row" onclick="selectTicker(document.getElementById('tick-nifty'),'nifty')"> | |
| <span class="iname">Nifty 50</span> | |
| <div class="iright"> | |
| <span class="ivalue" id="il-nifty">22,513</span> | |
| <span class="ichg pos">▲ 0.48%</span> | |
| </div> | |
| </div> | |
| <div class="ind-list-row" onclick="selectTicker(document.getElementById('tick-usdinr'),'usdinr')"> | |
| <span class="iname">USD / INR</span> | |
| <div class="iright"> | |
| <span class="ivalue" id="il-usdinr">83.42</span> | |
| <span class="ichg">Stable</span> | |
| </div> | |
| </div> | |
| <div class="ind-list-row" onclick="selectTicker(document.getElementById('tick-crude'),'crude')"> | |
| <span class="iname">Crude Oil (Brent)</span> | |
| <div class="iright"> | |
| <span class="ivalue" id="il-crude">$82.40</span> | |
| <span class="ichg neg">▼ 0.30%</span> | |
| </div> | |
| </div> | |
| <div class="ind-list-row" onclick="selectTicker(document.getElementById('tick-repo'),'repo')"> | |
| <span class="iname">RBI Repo Rate</span> | |
| <div class="iright"> | |
| <span class="ivalue" id="il-repo">6.50%</span> | |
| <span class="ichg">Unchanged</span> | |
| </div> | |
| </div> | |
| <div class="ind-list-row" onclick="selectTicker(document.getElementById('tick-cpi'),'cpi')"> | |
| <span class="iname">CPI Inflation</span> | |
| <div class="iright"> | |
| <span class="ivalue" id="il-cpi">4.75%</span> | |
| <span class="ichg">Within target</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- MINI CHARTS ROW --> | |
| <div class="grid-3col"> | |
| <div class="card-sm"> | |
| <div class="card-header" style="margin-bottom:0.5rem"> | |
| <div> | |
| <div class="card-title" style="font-size:0.875rem">USD/INR</div> | |
| <div class="card-subtitle">Forex Rate</div> | |
| </div> | |
| <span class="card-badge badge-neutral">Stable</span> | |
| </div> | |
| <div style="font-family:'Manrope',sans-serif;font-weight:700;font-size:1.5rem">83.42</div> | |
| <div class="chart-wrap-sm"><canvas id="chart-usdinr"></canvas></div> | |
| </div> | |
| <div class="card-sm"> | |
| <div class="card-header" style="margin-bottom:0.5rem"> | |
| <div> | |
| <div class="card-title" style="font-size:0.875rem">Crude Oil</div> | |
| <div class="card-subtitle">Brent USD/bbl</div> | |
| </div> | |
| <span class="card-badge badge-down">▼ 0.30%</span> | |
| </div> | |
| <div style="font-family:'Manrope',sans-serif;font-weight:700;font-size:1.5rem">$82.40</div> | |
| <div class="chart-wrap-sm"><canvas id="chart-crude"></canvas></div> | |
| </div> | |
| <div class="card-sm"> | |
| <div class="card-header" style="margin-bottom:0.5rem"> | |
| <div> | |
| <div class="card-title" style="font-size:0.875rem">CPI Inflation</div> | |
| <div class="card-subtitle">Year-on-Year %</div> | |
| </div> | |
| <span class="card-badge badge-up">In Target</span> | |
| </div> | |
| <div style="font-family:'Manrope',sans-serif;font-weight:700;font-size:1.5rem">4.75%</div> | |
| <div class="chart-wrap-sm"><canvas id="chart-cpi"></canvas></div> | |
| </div> | |
| </div> | |
| <!-- REPO RATE DETAIL --> | |
| <div class="grid-2col"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div> | |
| <div class="card-title">RBI Repo Rate History</div> | |
| <div class="card-subtitle">Rate decisions by Monetary Policy Committee</div> | |
| </div> | |
| <span class="card-badge badge-neutral">6.50%</span> | |
| </div> | |
| <div class="chart-wrap"><canvas id="chart-repo"></canvas></div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <div> | |
| <div class="card-title">Key Statistics</div> | |
| <div class="card-subtitle">Latest snapshot</div> | |
| </div> | |
| </div> | |
| <div class="stat-grid"> | |
| <div class="stat-cell"> | |
| <div class="stat-cell-label">52W Sensex High</div> | |
| <div class="stat-cell-value">79,105</div> | |
| </div> | |
| <div class="stat-cell"> | |
| <div class="stat-cell-label">52W Sensex Low</div> | |
| <div class="stat-cell-value">62,004</div> | |
| </div> | |
| <div class="stat-cell"> | |
| <div class="stat-cell-label">Nifty P/E Ratio</div> | |
| <div class="stat-cell-value">22.3x</div> | |
| </div> | |
| <div class="stat-cell"> | |
| <div class="stat-cell-label">Market Cap / GDP</div> | |
| <div class="stat-cell-value">1.12x</div> | |
| </div> | |
| <div class="stat-cell"> | |
| <div class="stat-cell-label">FII Flow (MTD)</div> | |
| <div class="stat-cell-value" style="color:var(--positive)">+₹4,820 Cr</div> | |
| </div> | |
| <div class="stat-cell"> | |
| <div class="stat-cell-label">DII Flow (MTD)</div> | |
| <div class="stat-cell-value" style="color:var(--positive)">+₹7,214 Cr</div> | |
| </div> | |
| <div class="stat-cell"> | |
| <div class="stat-cell-label">India VIX</div> | |
| <div class="stat-cell-value">13.45</div> | |
| </div> | |
| <div class="stat-cell"> | |
| <div class="stat-cell-label">USD/INR 52W High</div> | |
| <div class="stat-cell-value">84.30</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- FOOTER --> | |
| <footer class="footer"> | |
| <div class="footer-inner"> | |
| <div> | |
| <div class="footer-logo">Q-Simplified</div> | |
| <div class="footer-copy">© 2024 Q-SIMPLIFIED. THE FINANCIAL ARCHITECT.</div> | |
| </div> | |
| <nav class="footer-links"> | |
| <a href="#">Privacy Policy</a> | |
| <a href="#">Terms of Service</a> | |
| <a href="#">Contact Us</a> | |
| <a href="#">Sitemap</a> | |
| </nav> | |
| </div> | |
| </footer> | |
| <script> | |
| const API_BASE = ''; | |
| Chart.defaults.font.family = "'Work Sans', sans-serif"; | |
| Chart.defaults.color = '#7a8fa6'; | |
| // ── CONSTANTS ──────────────────────────────────────────────────── | |
| const SYMBOL_MAP = { | |
| sensex: '^BSESN', | |
| nifty: '^NSEI', | |
| usdinr: 'USDINR=X', | |
| crude: 'BZ=F', | |
| }; | |
| const RANGE_API = { | |
| '1D': {period:'1d', interval:'15m'}, | |
| '1W': {period:'5d', interval:'60m'}, | |
| '1M': {period:'1mo', interval:'1d'}, | |
| '3M': {period:'3mo', interval:'1d'}, | |
| '1Y': {period:'1y', interval:'1d'}, | |
| }; | |
| const INDICATOR_META = { | |
| sensex: {label:'Sensex', color:'#003465', displayValue:'74,248', desc:'Bombay Stock Exchange Sensitive Index'}, | |
| nifty: {label:'Nifty 50', color:'#004b8d', displayValue:'22,513', desc:'NSE Nifty 50 Index'}, | |
| usdinr: {label:'USD/INR', color:'#651700', displayValue:'83.42', desc:'US Dollar to Indian Rupee'}, | |
| crude: {label:'Crude Oil', color:'#8d2400', displayValue:'$82.40', desc:'Brent Crude Oil USD/bbl'}, | |
| repo: {label:'Repo Rate', color:'#1a7a4a', displayValue:'6.50%', desc:'RBI Monetary Policy Rate'}, | |
| cpi: {label:'CPI Inflation', color:'#c0392b', displayValue:'4.75%', desc:'Consumer Price Index YoY %'}, | |
| }; | |
| let mainChart, usdInrChart, crudeChart, cpiChart, repoChart; | |
| let currentTicker = 'sensex'; | |
| let currentRange = '1M'; | |
| let _mainChartLoading = false; | |
| // ── HELPERS ────────────────────────────────────────────────────── | |
| function makeGradient(ctx, color, alpha1=0.15, alpha2=0) { | |
| const g = ctx.createLinearGradient(0,0,0,ctx.canvas.height); | |
| g.addColorStop(0, color + Math.round(alpha1*255).toString(16).padStart(2,'0')); | |
| g.addColorStop(1, color + Math.round(alpha2*255).toString(16).padStart(2,'0')); | |
| return g; | |
| } | |
| function formatLabel(isoStr, range) { | |
| const d = new Date(isoStr); | |
| if (range === '1D') return d.toLocaleTimeString('en-IN', {hour:'2-digit', minute:'2-digit'}); | |
| if (range === '1Y') return d.toLocaleDateString('en-IN', {month:'short', year:'2-digit'}); | |
| return d.toLocaleDateString('en-IN', {day:'numeric', month:'short'}); | |
| } | |
| function setChartLoading(on, message) { | |
| _mainChartLoading = on; | |
| const el = document.getElementById('chart-loading'); | |
| if (!el) return; | |
| el.textContent = message || 'Loading…'; | |
| el.style.display = on ? 'flex' : 'none'; | |
| } | |
| // ── CHART CONFIGS ──────────────────────────────────────────────── | |
| function lineChartConfig(labels, data, color, canvas) { | |
| const ctx = canvas.getContext('2d'); | |
| const bg = makeGradient(ctx, color); | |
| return { | |
| type:'line', | |
| data:{ | |
| labels, | |
| datasets:[{ | |
| data, | |
| borderColor: color, | |
| backgroundColor: bg, | |
| borderWidth: 2, | |
| pointRadius: 0, | |
| pointHoverRadius: 4, | |
| pointHoverBackgroundColor: color, | |
| fill: true, | |
| tension: 0.4, | |
| }] | |
| }, | |
| options:{ | |
| responsive:true, maintainAspectRatio:false, | |
| plugins:{ legend:{display:false}, tooltip:{ | |
| mode:'index', intersect:false, | |
| callbacks:{ label: ctx => ' ' + ctx.parsed.y.toLocaleString('en-IN') } | |
| }}, | |
| scales:{ | |
| x:{grid:{display:false}, ticks:{maxTicksLimit:6, font:{size:11}}}, | |
| y:{grid:{color:'rgba(0,0,0,0.04)'}, ticks:{maxTicksLimit:5, font:{size:11}, | |
| callback: v => v.toLocaleString('en-IN') | |
| }} | |
| }, | |
| interaction:{mode:'index',intersect:false}, | |
| } | |
| }; | |
| } | |
| function miniChartConfig(data, color) { | |
| return { | |
| type:'line', | |
| data:{ | |
| labels: Array(data.length).fill(''), | |
| datasets:[{data, borderColor:color, borderWidth:1.5, pointRadius:0, fill:false, tension:0.4}] | |
| }, | |
| options:{ | |
| responsive:true, maintainAspectRatio:false, | |
| plugins:{legend:{display:false}, tooltip:{enabled:false}}, | |
| scales:{x:{display:false}, y:{display:false}}, | |
| } | |
| }; | |
| } | |
| // ── HISTORY API ────────────────────────────────────────────────── | |
| async function fetchHistory(symbol, period, interval) { | |
| const url = `${API_BASE}/api/market-data/history/${encodeURIComponent(symbol)}?period=${period}&interval=${interval}`; | |
| const res = await fetch(url); | |
| if (!res.ok) throw new Error(`HTTP ${res.status}`); | |
| return res.json(); | |
| } | |
| // ── MAIN CHART LOAD ─────────────────────────────────────────────── | |
| async function loadMainChart(ticker, range) { | |
| const symbol = SYMBOL_MAP[ticker]; | |
| if (!symbol) return; // repo/cpi — static charts only | |
| const {period, interval} = RANGE_API[range] || RANGE_API['1M']; | |
| setChartLoading(true); | |
| try { | |
| const json = await fetchHistory(symbol, period, interval); | |
| const pts = json.data || []; | |
| if (pts.length === 0) { | |
| setChartLoading(true, 'No data available'); | |
| return; | |
| } | |
| const labels = pts.map(d => formatLabel(d.t, range)); | |
| const values = pts.map(d => d.v); | |
| const meta = INDICATOR_META[ticker]; | |
| const ctx = document.getElementById('main-chart').getContext('2d'); | |
| mainChart.data.labels = labels; | |
| mainChart.data.datasets[0].data = values; | |
| mainChart.data.datasets[0].borderColor = meta.color; | |
| mainChart.data.datasets[0].backgroundColor = makeGradient(ctx, meta.color); | |
| mainChart.update('none'); | |
| // Align "latest price" display with last data point | |
| const latest = values[values.length - 1]; | |
| if (latest != null) { | |
| document.getElementById('chart-value').textContent = latest.toLocaleString('en-IN'); | |
| } | |
| setChartLoading(false); | |
| } catch(e) { | |
| console.warn('History load failed:', e.message); | |
| setChartLoading(true, 'Data unavailable'); | |
| } | |
| } | |
| async function loadMiniChart(chartObj, symbol) { | |
| try { | |
| const json = await fetchHistory(symbol, '1mo', '1d'); | |
| const values = (json.data || []).map(d => d.v); | |
| if (values.length === 0) return; | |
| chartObj.data.labels = Array(values.length).fill(''); | |
| chartObj.data.datasets[0].data = values; | |
| chartObj.update('none'); | |
| } catch(e) { | |
| // Keep static placeholder data | |
| } | |
| } | |
| // ── CHART INIT ─────────────────────────────────────────────────── | |
| function initCharts() { | |
| // Main chart — empty shell, filled by loadMainChart() | |
| mainChart = new Chart( | |
| document.getElementById('main-chart'), | |
| lineChartConfig([], [], INDICATOR_META.sensex.color, document.getElementById('main-chart')) | |
| ); | |
| // Mini charts — static placeholders replaced by loadMiniChart() | |
| usdInrChart = new Chart( | |
| document.getElementById('chart-usdinr'), | |
| miniChartConfig([83.2,83.3,83.3,83.4,83.4,83.4,83.4,83.42], '#651700') | |
| ); | |
| crudeChart = new Chart( | |
| document.getElementById('chart-crude'), | |
| miniChartConfig([83,82.5,83.2,82.8,82.6,82.4,82.4,82.40], '#8d2400') | |
| ); | |
| cpiChart = new Chart( | |
| document.getElementById('chart-cpi'), | |
| miniChartConfig([5.20,5.10,4.90,4.85,4.80,4.75,4.75,4.75], '#c0392b') | |
| ); | |
| // Repo rate — static step chart (no live API for MPC decisions) | |
| repoChart = new Chart( | |
| document.getElementById('chart-repo'), | |
| { | |
| type:'line', | |
| data:{ | |
| labels:['Jun 22','Aug 22','Sep 22','Feb 23','Apr 23','Jun 23','Aug 23','Oct 23','Dec 23','Feb 24','Apr 24','Jun 24'], | |
| datasets:[{ | |
| data:[4.90,5.40,5.90,6.50,6.50,6.50,6.50,6.50,6.50,6.50,6.50,6.50], | |
| borderColor:'#1a7a4a', backgroundColor:'rgba(26,122,74,0.08)', | |
| borderWidth:2, pointRadius:4, pointBackgroundColor:'#1a7a4a', | |
| fill:true, stepped:true, | |
| }] | |
| }, | |
| options:{ | |
| responsive:true, maintainAspectRatio:false, | |
| plugins:{legend:{display:false}, tooltip:{mode:'index',intersect:false, | |
| callbacks:{label:ctx=>' Repo Rate: '+ctx.parsed.y.toFixed(2)+'%'} | |
| }}, | |
| scales:{ | |
| x:{grid:{display:false},ticks:{font:{size:11}}}, | |
| y:{min:4,max:7,grid:{color:'rgba(0,0,0,0.04)'},ticks:{callback:v=>v.toFixed(1)+'%',font:{size:11}}} | |
| } | |
| } | |
| } | |
| ); | |
| } | |
| // ── TICKER SELECTION ───────────────────────────────────────────── | |
| function selectTicker(el, key) { | |
| currentTicker = key; | |
| document.querySelectorAll('.ticker-item').forEach(t => t.classList.remove('active')); | |
| if (el) el.classList.add('active'); | |
| document.querySelectorAll('.ind-list-row').forEach(r => r.classList.remove('active')); | |
| const meta = INDICATOR_META[key]; | |
| document.getElementById('chart-title').textContent = meta.label; | |
| document.getElementById('chart-subtitle').textContent = meta.desc; | |
| document.getElementById('chart-value').textContent = meta.displayValue; | |
| loadMainChart(key, currentRange); | |
| } | |
| function setRange(r) { | |
| currentRange = r; | |
| document.querySelectorAll('.tr-btn').forEach(b => b.classList.toggle('active', b.textContent === r)); | |
| loadMainChart(currentTicker, r); | |
| } | |
| function switchView(v) { | |
| document.querySelectorAll('.htab').forEach((b,i) => { | |
| b.classList.toggle('active', ['overview','equity','macro','forex'][i] === v); | |
| }); | |
| } | |
| // ── LIVE TICKER FEED ───────────────────────────────────────────── | |
| async function fetchLiveData() { | |
| try { | |
| const res = await fetch(`${API_BASE}/api/market-data/latest`); | |
| if (!res.ok) return; | |
| const data = await res.json(); | |
| updateTickers(data); | |
| document.getElementById('last-updated').textContent = | |
| 'Updated ' + new Date().toLocaleTimeString('en-IN', {hour:'2-digit', minute:'2-digit'}); | |
| } catch { /* keep static display */ } | |
| } | |
| function updateTickers(data) { | |
| const map = { | |
| 'Sensex': {id:'sensex'}, 'Nifty 50': {id:'nifty'}, | |
| 'USD/INR': {id:'usdinr'}, 'Crude Oil': {id:'crude'}, | |
| 'Repo Rate': {id:'repo'}, 'CPI Inflation':{id:'cpi'}, | |
| }; | |
| for (const [name, cfg] of Object.entries(map)) { | |
| if (!data[name]) continue; | |
| const v = data[name].value; | |
| const tv = document.getElementById('tv-' + cfg.id); | |
| const il = document.getElementById('il-' + cfg.id); | |
| if (tv) tv.textContent = v; | |
| if (il) il.textContent = v; | |
| // Keep chart-value in sync with live price when that ticker is selected | |
| if (cfg.id === currentTicker && !_mainChartLoading) { | |
| document.getElementById('chart-value').textContent = v; | |
| } | |
| // Update INDICATOR_META so selectTicker shows fresh value on switch | |
| if (INDICATOR_META[cfg.id]) INDICATOR_META[cfg.id].displayValue = v; | |
| } | |
| } | |
| // ── AUTH STATE ──────────────────────────────────────────────────── | |
| function checkAuth() { | |
| const user = JSON.parse(localStorage.getItem('qs_user') || 'null'); | |
| if (user) { | |
| const btn = document.getElementById('nav-auth-btn'); | |
| btn.textContent = user.full_name?.split(' ')[0] || 'Account'; | |
| btn.href = '/profile.html'; | |
| } | |
| } | |
| // ── INIT ────────────────────────────────────────────────────────── | |
| document.addEventListener('DOMContentLoaded', () => { | |
| initCharts(); | |
| checkAuth(); | |
| fetchLiveData(); | |
| // Set default active range button | |
| document.querySelectorAll('.tr-btn').forEach(b => b.classList.toggle('active', b.textContent === '1M')); | |
| // Load main chart with real data | |
| loadMainChart('sensex', '1M'); | |
| // Load mini charts with real data | |
| loadMiniChart(usdInrChart, 'USDINR=X'); | |
| loadMiniChart(crudeChart, 'BZ=F'); | |
| setInterval(fetchLiveData, 60_000); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |