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

static/dashboard.html

@@ -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>