Spaces:

nick5363
/

Nick

Running

File size: 14,193 Bytes

<!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; /* Firefox */
  scrollbar-color: #555 #1a1a1a; /* Firefox */
}

.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; /* Điều chỉnh chiều cao chart để vừa màn hình */
      }
    }
  
@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"; // Xanh lá
    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"; // Cam vàng
    countdown.innerText = formatTime(diff);
    countdown.style.color = "#ffcc00";
  } else {
    statusText.innerText = "Market Closed";
    statusText.style.color = "#999999"; // Xám
    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">
      
    <!-- TradingView Widget BEGIN -->
<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>
<!-- TradingView Widget END -->
    </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="pc">
      <iframe
	src="https://nick5363-detect.hf.space"
	frameborder="0"
	width="850"
	height="450"
></iframe>
    </div>
    
    <div id="futures">
  
    <!-- TradingView Widget BEGIN -->
<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>
<!-- TradingView Widget END -->
</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">
      
      <!-- TradingView Widget BEGIN -->
<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>
<!-- TradingView Widget END -->
    </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('pc')">Popular Charts</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>   
     
  </div>
  </div>
  
  <script>
    function openTab(tabName) {
      // Hide all tab contents
      const tabContents = document.querySelectorAll('.tab-content > div');
      tabContents.forEach(content => {
        content.classList.remove('active');
      });

      // Remove active class from all buttons
      const tabButtons = document.querySelectorAll('.tab-button');
      tabButtons.forEach(button => {
        button.classList.remove('active');
      });

      // Show the selected tab content
      const selectedTab = document.getElementById(tabName);
      if (selectedTab) {
        selectedTab.classList.add('active');
      }

      // Add active class to the clicked button
      const clickedButton = document.querySelector(`button[onclick="openTab('${tabName}')"]`);
      if (clickedButton) {
        clickedButton.classList.add('active');
      }
    }
  </script>

</body>
</html>