harry/ForexBot2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dashboard: fix gauge charts (install gauge.js, render after polls), force dark theme with white text and red/green accents, add icons

Browse Source
This commit is contained in:
Harwinder Sekhon
2026-08-16 20:55:25 -04:00
parent c248b39cc5
commit d4137d862a
6 changed files with 134 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/dashboard.html
+10 -14
View File
@@ -4,7 +4,7 @@
<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="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='%23f5b301'/%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">
@@ -12,13 +12,6 @@
<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>
@@ -27,16 +20,15 @@
<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="xau-symbol"><i class="bi bi-coin me-1"></i>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"><i class="bi bi-hourglass-split me-1"></i>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>
@@ -53,18 +45,21 @@
</section>
<h6 class="text-uppercase text-secondary small fw-bold mb-3 d-flex align-items-center gap-2">
<i class="bi bi-clock-history text-primary"></i>
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>
<h6 class="text-uppercase text-secondary small fw-bold mb-3 mt-4 d-flex align-items-center gap-2">
<i class="bi bi-globe2 text-primary"></i>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>
<h5 class="card-title mb-0"><i class="bi bi-calendar-event me-2 text-primary"></i>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">
@@ -94,7 +89,7 @@
<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>
<h5 class="card-title mb-0"><i class="bi bi-newspaper me-2 text-primary"></i>Newswire</h5>
<span class="text-secondary small" id="wire-note"></span>
</div>
<div id="wire-total" class="d-none"></div>
@@ -105,6 +100,7 @@
</div>
<footer class="mt-4 pt-3 border-top text-secondary small">
<i class="bi bi-info-circle me-1"></i>
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>