|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>TradingView Widgets + News</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; |
|
|
justify-content: space-around; |
|
|
padding: 10px 0; |
|
|
border-top: 1px solid #333; |
|
|
} |
|
|
.tabs button { |
|
|
background-color: transparent; |
|
|
color: #888; |
|
|
border: none; |
|
|
padding: 6px 2px; |
|
|
cursor: pointer; |
|
|
font-size: 0.75rem; |
|
|
flex: 1; |
|
|
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.6rem; |
|
|
padding: 8px 5px; |
|
|
} |
|
|
.tab-content .tradingview-widget-container { |
|
|
height: 330px !important; |
|
|
} |
|
|
} |
|
|
</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 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": "FOREXCOM:NSXUSD" }, |
|
|
{ "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:100%;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": "IG:NASDAQ", |
|
|
"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": "1D", |
|
|
"showChart": false, |
|
|
"locale": "en", |
|
|
"width": "980", |
|
|
"height": "610", |
|
|
"largeChartUrl": "", |
|
|
"isTransparent": false, |
|
|
"showSymbolLogo": true, |
|
|
"showFloatingTooltip": false, |
|
|
"tabs": [ |
|
|
{ |
|
|
"title": "Futures", |
|
|
"symbols": [ |
|
|
{ |
|
|
"s": "VANTAGE:DJ30FT", |
|
|
"d": "DOW JONES FT" |
|
|
}, |
|
|
{ |
|
|
"s": "VANTAGE:SP500FT", |
|
|
"d": "S&P 500 FT" |
|
|
}, |
|
|
{ |
|
|
"s": "IG:NASDAQ", |
|
|
"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" |
|
|
width="850" |
|
|
height="450"></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": 400 |
|
|
} |
|
|
</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="415" |
|
|
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="exchange-rate"> |
|
|
|
|
|
<div class="exchange-rate-content"> |
|
|
<script type="text/javascript" src="https://tygiausd.org/TyGiaScript/short/Widgets"></script> |
|
|
<noscript>Vui lòng bật JavaScript để xem <a href="https://tygiausd.org/">tỷ giá</a></noscript> |
|
|
</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('Expected Move')">E-Move</button> |
|
|
</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> |
