|
|
<!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.0rem; |
|
|
margin: 10px 0; |
|
|
text-align: center; |
|
|
} |
|
|
.clock-container { |
|
|
margin: 2px auto; |
|
|
text-align: center; |
|
|
font-size: 0.4rem; |
|
|
width: 100%; |
|
|
max-width: 415px; |
|
|
} |
|
|
.clock-container a { |
|
|
color: white; |
|
|
text-decoration: none; |
|
|
} |
|
|
.market-overview { |
|
|
background-color: #1a1a1a; |
|
|
padding: 10px; |
|
|
margin: 5px auto; |
|
|
width: 100%; |
|
|
max-width: 415px; |
|
|
border-radius: 5px; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
.market-overview h2 { |
|
|
font-size: 0.95rem; |
|
|
margin: 0 0 10px 0; |
|
|
} |
|
|
.tab-content { |
|
|
flex: 1; |
|
|
overflow-y: auto; |
|
|
padding: 10px; |
|
|
width: 100%; |
|
|
max-width: 415px; |
|
|
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; |
|
|
max-width: 415px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
.tabs { |
|
|
position: fixed; |
|
|
bottom: 0; |
|
|
width: 100%; |
|
|
background-color: #1a1a1a; |
|
|
display: flex; |
|
|
flex-wrap: nowrap; |
|
|
overflow-x: auto; |
|
|
overflow-y: hidden; |
|
|
white-space: nowrap; |
|
|
padding: 10px 0; |
|
|
border-top: 1px solid #333; |
|
|
scrollbar-width: thin; |
|
|
scrollbar-color: #555 #1a1a1a; |
|
|
} |
|
|
|
|
|
.tabs::-webkit-scrollbar { |
|
|
height: 6px; |
|
|
} |
|
|
|
|
|
.tabs::-webkit-scrollbar-thumb { |
|
|
background: #555; |
|
|
border-radius: 3px; |
|
|
} |
|
|
.tabs button { |
|
|
background-color: transparent; |
|
|
color: #888; |
|
|
border: none; |
|
|
padding: 4px 2px; |
|
|
cursor: pointer; |
|
|
font-size: 0.40rem; |
|
|
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: 0.6rem; |
|
|
} |
|
|
.clock-container { |
|
|
font-size: 0.4rem; |
|
|
} |
|
|
.market-overview h2 { |
|
|
font-size: 1rem; |
|
|
} |
|
|
.tabs button { |
|
|
font-size: 0.4rem; |
|
|
padding: 4px 4px; |
|
|
} |
|
|
.tab-content .tradingview-widget-container { |
|
|
height: 365px !important; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
h1 { font-size: 1rem; } |
|
|
.tabs button { font-size: 0.6rem; padding: 6px 4px; } |
|
|
.market-overview h2 { font-size: 0.9rem; } |
|
|
} |
|
|
@media (min-width: 769px) { |
|
|
.tab-content iframe, |
|
|
.tab-content .tradingview-widget-container { |
|
|
max-width: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
</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": "EIGHTCAP:NDQ100" }, |
|
|
{ "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="pattern detection"> |
|
|
<iframe |
|
|
src="https://huggingface.co/spaces/foduucom/stockmarket-pattern-detection-yolov8" |
|
|
frameborder="0" |
|
|
width="100%" |
|
|
height="600" |
|
|
style="border-radius: 10px;"> |
|
|
</iframe> |
|
|
</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="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="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="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('options')">Options</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('PD')">pattern detection</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> |
