| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NhatTran - Dashboard</title> |
| <style> |
| body { |
| background-color: #0f0f0f; |
| color: white; |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| margin: 0; |
| padding: 0; |
| height: 100vh; |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| } |
| |
| h1 { |
| font-size: 1.4rem; |
| margin: 12px 0; |
| text-align: center; |
| } |
| |
| .clock-container { |
| margin: 2px auto; |
| text-align: center; |
| font-size: 1rem; |
| width: 100%; |
| max-width: 500px; |
| } |
| |
| .market-overview { |
| background-color: #1a1a1a; |
| padding: 10px; |
| margin: 5px auto; |
| width: 100%; |
| max-width: 500px; |
| border-radius: 8px; |
| box-sizing: border-box; |
| } |
| |
| .market-overview h2 { |
| font-size: 1.1rem; |
| margin: 0 0 10px 0; |
| } |
| |
| .tab-content { |
| flex: 1; |
| overflow-y: auto; |
| padding: 10px; |
| width: 100%; |
| max-width: 500px; |
| margin: 0 auto; |
| box-sizing: border-box; |
| } |
| |
| .tab-content > div { |
| display: none; |
| } |
| |
| .tab-content > div.active { |
| display: block; |
| } |
| |
| .tab-content iframe, |
| .tab-content .tradingview-widget-container { |
| width: 100% !important; |
| height: auto; |
| min-height: 400px; |
| margin: 0 auto; |
| box-sizing: border-box; |
| } |
| |
| .tabs { |
| position: fixed; |
| bottom: 0; |
| width: 100%; |
| background-color: #1a1a1a; |
| display: flex; |
| flex-wrap: nowrap; |
| overflow-x: auto; |
| padding: 10px 0; |
| border-top: 1px solid #333; |
| scrollbar-width: thin; |
| scrollbar-color: #555 #1a1a1a; |
| z-index: 999; |
| } |
| |
| .tabs::-webkit-scrollbar { |
| height: 6px; |
| } |
| |
| .tabs::-webkit-scrollbar-thumb { |
| background: #555; |
| border-radius: 3px; |
| } |
| |
| .tabs button { |
| background-color: transparent; |
| color: #ccc; |
| border: none; |
| padding: 6px 8px; |
| cursor: pointer; |
| font-size: 0.9rem; |
| flex: 0 0 auto; |
| margin: 0 5px; |
| white-space: nowrap; |
| } |
| |
| .tabs button.active { |
| color: white; |
| font-weight: bold; |
| } |
| |
| .tabs button:hover { |
| color: white; |
| } |
| |
| |
| @media (max-width: 430px) { |
| h1 { |
| font-size: 1.2rem; |
| } |
| |
| .clock-container { |
| font-size: 0.9rem; |
| } |
| |
| .tabs button { |
| font-size: 0.8rem; |
| padding: 6px 4px; |
| } |
| |
| .market-overview h2 { |
| font-size: 1rem; |
| } |
| } |
| |
| |
| @media (min-width: 431px) and (max-width: 820px) { |
| h1 { |
| font-size: 1.6rem; |
| } |
| |
| .clock-container { |
| font-size: 1.2rem; |
| } |
| |
| .tabs button { |
| font-size: 1rem; |
| padding: 8px 6px; |
| } |
| |
| .market-overview h2 { |
| font-size: 1.2rem; |
| } |
| } |
| |
| @media (min-width: 821px) { |
| h1 { |
| font-size: 2rem; |
| } |
| .tabs button { |
| font-size: 1.2rem; |
| } |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <h1>NhatTranView Dashboard</h1> |
|
|
| <div class="clock-container"> |
| <script src="https://cdn.logwork.com/widget/digital.js"></script> |
| <a href="https://logwork.com/current-time-in-los-angeles-united-states-california" class="digital-clock" data-style="round" data-size="348" data-timezone="America/Los_Angeles" data-language="en">Los Angeles, United States</a> |
| </div> |
|
|
| <div id="market-status" style="text-align:center; font-size: 0.65rem; padding: 7px;"> |
| <strong id="status-text" style="color: #ffffff;">Loading...</strong><br> |
| <span id="countdown" style="font-size: 1.0rem; font-weight: bold;"></span> |
| </div> |
|
|
| <script> |
| function updateCountdown() { |
| const now = new Date(); |
| const day = now.getDay(); |
| const hours = now.getHours(); |
| const minutes = now.getMinutes(); |
| |
| const openHour = 6; |
| const openMin = 30; |
| const closeHour = 13; |
| const closeMin = 0; |
| |
| const statusText = document.getElementById("status-text"); |
| const countdown = document.getElementById("countdown"); |
| |
| if (day === 0 || day === 6) { |
| statusText.innerText = "Market Closed (Weekend)"; |
| statusText.style.color = "#999999"; |
| countdown.innerText = ""; |
| return; |
| } |
| |
| const nowSeconds = hours * 3600 + minutes * 60 + now.getSeconds(); |
| const openSeconds = openHour * 3600 + openMin * 60; |
| const closeSeconds = closeHour * 3600 + closeMin * 60; |
| |
| if (nowSeconds < openSeconds) { |
| const diff = openSeconds - nowSeconds; |
| statusText.innerText = "Market opens in:"; |
| statusText.style.color = "#00cc66"; |
| countdown.innerText = formatTime(diff); |
| countdown.style.color = "#00cc66"; |
| } else if (nowSeconds < closeSeconds) { |
| const diff = closeSeconds - nowSeconds; |
| statusText.innerText = "Market closes in:"; |
| statusText.style.color = "#ffcc00"; |
| countdown.innerText = formatTime(diff); |
| countdown.style.color = "#ffcc00"; |
| } else { |
| statusText.innerText = "Market Closed"; |
| statusText.style.color = "#999999"; |
| countdown.innerText = ""; |
| } |
| } |
| |
| function formatTime(seconds) { |
| const h = Math.floor(seconds / 3600); |
| const m = Math.floor((seconds % 3600) / 60); |
| const s = seconds % 60; |
| return `${h.toString().padStart(2, '0')}h ${m.toString().padStart(2, '0')}m ${s.toString().padStart(2, '0')}s`; |
| } |
| |
| setInterval(updateCountdown, 1000); |
| updateCountdown(); |
| </script> |
| |
| <div class="market-overview"> |
| |
| <div class="tradingview-widget-container"> |
| <div class="tradingview-widget-container__widget"></div> |
| <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div> |
| <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js" async> |
| { |
| "symbols": [ |
| { "proName": "FOREXCOM:SPXUSD", "title": "S&P 500 Index" }, |
| { "description": "DJI", "proName": "FOREXCOM:DJI" }, |
| { "description": "NASDAQ", "proName": "NASDAQ:IXIC" }, |
| { "description": "BITCOIN", "proName": "INDEX:BTCUSD" }, |
| { "description": "GOLD", "proName": "CAPITALCOM:GOLD" }, |
| { "description": "VIX", "proName": "FXOPEN:VIX" } |
| ], |
| "showSymbolLogo": true, |
| "isTransparent": false, |
| "displayMode": "compact", |
| "colorTheme": "dark", |
| "locale": "en" |
| } |
| </script> |
| </div> |
| </div> |
|
|
| <div class="tab-content"> |
| <div id="chart" class="active"> |
| |
| |
| <div class="tradingview-widget-container" style="height:600;width:100%"> |
| <div class="tradingview-widget-container__widget" style="height:calc(100% - 32px);width:100%"></div> |
| <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div> |
| <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async> |
| { |
| "autosize": true, |
| "symbol": "VANTAGE:SP500FT", |
| "interval": "60", |
| "timezone": "America/Los_Angeles", |
| "theme": "light", |
| "style": "1", |
| "locale": "en", |
| "allow_symbol_change": true, |
| "save_image": false, |
| "studies": [ |
| "STD;Donchian_Channels", |
| "STD;MACD" |
| ], |
| "hide_volume": true, |
| "support_host": "https://www.tradingview.com" |
| } |
| </script> |
|
|
|
|
| |
| </div> |
| |
| </div> |
| |
| <div id="futures"> |
| |
| |
| <div class="tradingview-widget-container"> |
| <div class="tradingview-widget-container__widget"></div> |
| <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div> |
| <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js" async> |
| { |
| "colorTheme": "dark", |
| "dateRange": "12M", |
| "showChart": false, |
| "locale": "en", |
| "largeChartUrl": "", |
| "isTransparent": false, |
| "showSymbolLogo": true, |
| "showFloatingTooltip": false, |
| "width": "350", |
| "height": "100", |
| "tabs": [ |
| { |
| "title": "Futures", |
| "symbols": [ |
| { |
| "s": "VANTAGE:DJ30FT", |
| "d": "DOW JONES FT" |
| }, |
| { |
| "s": "VANTAGE:SP500FT", |
| "d": "S&P500 FT" |
| }, |
| { |
| "s": "SWISSQUOTE:NAS100M2025", |
| "d": "NASDAQ 100 FT" |
| } |
| ], |
| "originalTitle": "Futures" |
| } |
| ] |
| } |
| </script> |
| </div> |
| |
| </div> |
| |
| <div id="news"> |
| |
| <iframe src="https://nick5363-web.hf.space" frameborder="0" width="100%" height="400"></iframe> |
| </div> |
|
|
| <div id="Expected Move"> |
|
|
| <iframe |
| src="https://nick5363-nhat-tran.hf.space" |
| frameborder="0" |
| style="width:100%;min-height:450px;"></iframe> |
| </div> |
|
|
| <div id="ER"> |
|
|
| <iframe |
| src="https://m.investing.com/earnings-calendar/" |
| width="100%" |
| height="850" |
| frameborder="0" |
| style="border: none; border-radius: 8px; background-color: #0f0f0f;"> |
| </iframe> |
| </div> |
|
|
| <div id="heatmap"> |
| |
| |
| <div class="tradingview-widget-container"> |
| <div class="tradingview-widget-container__widget"></div> |
| <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div> |
| <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-stock-heatmap.js" async> |
| { |
| "exchanges": [], |
| "dataSource": "SPX500", |
| "grouping": "sector", |
| "blockSize": "market_cap_basic", |
| "blockColor": "change", |
| "locale": "en", |
| "symbolUrl": "", |
| "colorTheme": "dark", |
| "hasTopBar": false, |
| "isDataSetEnabled": false, |
| "isZoomEnabled": true, |
| "hasSymbolTooltip": true, |
| "isMonoSize": false, |
| "width": "100%", |
| "height": "100%" |
| } |
| </script> |
| </div> |
| |
| </div> |
|
|
| <div id="options"> |
| <iframe |
| src="https://nick5363-optionflow.hf.space" |
| style="width: 100%; height: 300px; border: none; border-radius: 10px; overflow: hidden;" |
| loading="lazy" |
| allow="clipboard-write; clipboard-read"> |
| </iframe> |
| |
| </div> |
| |
| <div id="mke" style="width: 100%; padding: 10px 0;"> |
| |
|
|
| <iframe |
| src="https://sslecal2.investing.com?ecoDayBackground=%23260707&defaultFont=%23ed5503&innerBorderColor=%23140808&borderColor=%230f0808&ecoDayFontColor=%23050101&columns=exc_flags,exc_importance,exc_event,exc_actual,exc_previous&category=_employment,_economicActivity,_inflation,_credit,_centralBanks,_confidenceIndex,_balance,_Bonds&importance=1,2,3&features=timeselector&countries=5&calType=day&timeZone=5&lang=1" |
| width="100%" |
| height="500" |
| frameborder="0" |
| style="border: none;"> |
| </iframe> |
|
|
| <div style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #999; text-align: center; margin-top: 6px;"> |
| Real Time Economic Calendar by |
| <a href="https://www.investing.com/" target="_blank" style="color: #4fa2ff; font-weight: bold;">Investing.com</a> |
| </div> |
| </div> |
| |
|
|
| <div id="F&G"> |
| <div style="max-width: 415px; margin: 0 auto; padding: 10px;"> |
| |
| <iframe |
| src="https://feargreedmeter.com/fear-and-greed-index" |
| width="100%" |
| height="600" |
| frameborder="0" |
| style="border: none; border-radius: 8px; background-color: #0f0f0f;"> |
| </iframe> |
| </div> |
| </div> |
|
|
| |
| <div id="Hours"> |
| <iframe |
| src="https://nick5363-hours.static.hf.space" |
| frameborder="0" |
| style="width:100%;min-height:400px;" |
| ></iframe> |
| </div> |
|
|
| |
|
|
| <div id="exchange-rate"> |
| |
| <iframe style="border: 1px solid #000000" width="100%" height="200" src="https://chogia.vn/ma-nhung-cho-iframe?ma=gold"></iframe> |
| <iframe style="border: 1px solid #000000" width="100%" height="400" src="https://chogia.vn/ma-nhung-cho-iframe?ma=ofr"></iframe> |
|
|
| |
| </div> |
| </div> |
| </div> |
| |
|
|
| |
| <div class="tabs" > |
| <button class="tab-button active" onclick="openTab('chart')">Chart</button> |
| <button class="tab-button" onclick="openTab('futures')">Futures</button> |
| <button class="tab-button" onclick="openTab('F&G')">Fear</button> |
| <button class="tab-button" onclick="openTab('ER')">ER</button> |
| <button class="tab-button" onclick="openTab('news')">News</button> |
| <button class="tab-button" onclick="openTab('heatmap')">Heat Map</button> |
| <button class="tab-button" onclick="openTab('mke')">Events</button> |
| <button class="tab-button" onclick="openTab('exchange-rate')">Tỷ Giá</button> |
| <button class="tab-button" onclick="openTab('Hours')">Hours</button> |
| <button class="tab-button" onclick="openTab('options')">Options</button> |
| <button class="tab-button" onclick="openTab('Expected Move')">E-Move</button> |
| </div> |
| </div> |
| |
| <script> |
| function openTab(tabName) { |
| |
| const tabContents = document.querySelectorAll('.tab-content > div'); |
| tabContents.forEach(content => { |
| content.classList.remove('active'); |
| }); |
| |
| |
| const tabButtons = document.querySelectorAll('.tab-button'); |
| tabButtons.forEach(button => { |
| button.classList.remove('active'); |
| }); |
| |
| |
| const selectedTab = document.getElementById(tabName); |
| if (selectedTab) { |
| selectedTab.classList.add('active'); |
| } |
| |
| |
| const clickedButton = document.querySelector(`button[onclick="openTab('${tabName}')"]`); |
| if (clickedButton) { |
| clickedButton.classList.add('active'); |
| } |
| } |
| </script> |
|
|
| </body> |
| </html> |
