ForexBot2/static/dashboard.html

<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gold Desk — XAU/USD</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%230d6efd'/%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap">
<link rel="stylesheet" href="dashboard.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
(function () {
  var t = localStorage.getItem("xau-theme");
  if (!t && matchMedia("(prefers-color-scheme: dark)").matches) t = "dark";
  if (t) document.documentElement.setAttribute("data-bs-theme", t);
})();
</script>
</head>
<body>

<div class="container-fluid container-xl py-4">

  <header class="card mb-3" id="hero">
    <div class="card-body d-flex align-items-center flex-wrap gap-3">
      <div>
        <div class="xau-symbol">XAU/USD</div>
        <div class="display-5 fw-semibold xau-price" id="hero-price">—</div>
      </div>
      <div class="d-flex flex-wrap gap-2" id="hero-rail" aria-label="Signal by timeframe"></div>
      <div class="ms-auto text-end">
        <div id="hero-status"><span class="live-dot"></span>…</div>
        <div class="small text-secondary">M5 close in <span class="num" id="hero-cd">--:--</span></div>
        <div class="small text-secondary" id="hero-updated">updated —</div>
      </div>
      <button id="theme-toggle" class="btn btn-outline-secondary" type="button" aria-label="Toggle dark mode"><i class="bi bi-moon-fill"></i></button>
    </div>
  </header>

  <div class="alert alert-warning d-none" id="banner-closed" role="alert">
    <i class="bi bi-moon-fill me-2"></i>Market closed (weekend) — showing Friday's last state. Calendar and news stay live.
  </div>
  <div class="alert alert-danger d-none" id="banner-fail" role="alert"></div>

  <section class="card mb-4 d-none" id="context">
    <div class="card-body d-flex flex-wrap gap-3 align-items-start">
      <div class="flex-grow-1" id="ctx-blurb" style="min-width:300px"></div>
      <div class="d-flex flex-wrap gap-2" id="ctx-chips"></div>
    </div>
  </section>

  <h6 class="text-uppercase text-secondary small fw-bold mb-3 d-flex align-items-center gap-2">
    Timeframes
    <span class="fw-normal text-body-secondary" style="text-transform:none">— select one for full detail</span>
  </h6>
  <div class="row g-3" id="tf-grid"></div>

  <h6 class="text-uppercase text-secondary small fw-bold mb-3 mt-4">Fundamentals</h6>
  <div class="row g-3">
    <div class="col-lg-8">
      <div class="card h-100">
        <div class="card-body">
          <div class="d-flex align-items-center gap-3 mb-3 flex-wrap">
            <h5 class="card-title mb-0">Economic calendar</h5>
            <span class="text-secondary small">times local · USD events</span>
            <div class="form-check form-switch ms-auto">
              <input class="form-check-input" type="checkbox" id="hi-only">
              <label class="form-check-label small" for="hi-only">high impact only</label>
            </div>
          </div>
          <div class="table-responsive">
            <table class="table table-sm" id="cal-table">
              <thead>
                <tr>
                  <th>Time</th>
                  <th>Cur</th>
                  <th>Impact</th>
                  <th>Event</th>
                  <th class="text-end">Fcst</th>
                  <th class="text-end">Prev</th>
                  <th class="text-end">Actual</th>
                </tr>
              </thead>
              <tbody id="cal-body"><tr><td colspan="7" class="text-secondary text-center py-3">Loading calendar…</td></tr></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="card h-100">
        <div class="card-body">
          <div class="d-flex align-items-center gap-3 mb-3 flex-wrap">
            <h5 class="card-title mb-0">Newswire</h5>
            <span class="text-secondary small" id="wire-note"></span>
          </div>
          <div id="wire-total" class="d-none"></div>
          <div id="wire"></div>
        </div>
      </div>
    </div>
  </div>

  <footer class="mt-4 pt-3 border-top text-secondary small">
    Signals are generated on closed candles only and refresh at candle boundaries
    (M5/M15/H1/H4). Not financial advice — educational and research use only.
  </footer>

</div>

<div class="modal fade" id="tf-detail" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <div>
          <h5 class="modal-title mb-0" id="detail-title">—</h5>
          <div class="small text-secondary">
            <span class="num" id="detail-price">—</span>
            <span id="detail-sub"></span>
          </div>
        </div>
        <button id="detail-close" type="button" class="btn-close" aria-label="Close detail view"></button>
      </div>
      <div class="modal-body" id="detail-body"></div>
    </div>
  </div>
</div>

<div class="modal fade" id="news-detail" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="nd-title">News detail</h5>
        <button id="nd-close" type="button" class="btn-close" aria-label="Close news detail"></button>
      </div>
      <div class="modal-body" id="nd-body"></div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="gauge.js"></script>
<script src="dashboard.js"></script>
</body>
</html>