dashboard: rebuild the page on Bootstrap 5 + jQuery + Chart.js + Font Awesome
One card per timeframe (M5/M15/H1/H4) in a Bootstrap column grid, above a direction board that charts every timeframe's score as a diverging bar. Each card carries its own indicator-vote chart, and the newswire gets a headline-tone bar. Bootstrap Icons and the hand-rolled CSS gauges are gone; dashboard.css is now the token set plus the app-specific pieces only. Chart marks use a diverging pair validated on this surface (#0d9f7a / #e8503a: lightness band, chroma floor, colour-vision separation, contrast). Lighter steps of the same two hues carry the colour where it has to work as text, and direction never travels as colour alone -- an arrow icon and the word ride with it. Behaviour is unchanged: same snapshot.json / news.json contract, the same coordinated refresh loop (boundary poll, 60 s fallback, 15 s retry, in-flight guard, stale-snapshot guard), per-timeframe change detection, modal state preservation, HTML escaping, the news_summary.php contract and the warming / scan-failed / weekend states. Nothing on the signal path is touched, so no book moves. Verified headlessly against a fixture replayed through the real signal code (wide / laptop / tablet / mobile, both dialogs, every degraded state): no console errors, html-validate clean. Suite 553 -- the old static-UI test splits into one that pins the CDN stack and one that pins a card and a chart per timeframe against dashboard_publisher.DASHBOARD_TFS.
This commit is contained in:
Harwinder Sekhon
+116
-90
@@ -8,142 +8,168 @@
|
||||
<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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap">
|
||||
<link rel="stylesheet" href="dashboard.css">
|
||||
</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>
|
||||
<h1 class="xau-symbol mb-1"><i class="bi bi-coin me-1"></i>XAU/USD</h1>
|
||||
<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="Select timeframe"></div>
|
||||
<div class="ms-auto text-end">
|
||||
<div id="hero-status" role="status"><span class="live-dot"></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>
|
||||
<header class="desk-bar sticky-top">
|
||||
<div class="desk-shell d-flex align-items-center flex-wrap gap-3">
|
||||
<div class="d-flex align-items-baseline gap-2">
|
||||
<i class="fa-solid fa-coins desk-mark" aria-hidden="true"></i>
|
||||
<span class="desk-symbol">XAU/USD</span>
|
||||
<span class="desk-price num" id="bar-price">—</span>
|
||||
</div>
|
||||
<nav class="desk-rail" id="bar-rail" aria-label="Jump to a timeframe"></nav>
|
||||
<div class="desk-status ms-auto">
|
||||
<span id="bar-market"><span class="live-dot"></span>Connecting</span>
|
||||
<span class="desk-meta"><i class="fa-solid fa-hourglass-half" aria-hidden="true"></i>
|
||||
5-minute close <span class="num" id="bar-cd">--:--</span></span>
|
||||
<span class="desk-meta" id="bar-updated">waiting for data</span>
|
||||
</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>
|
||||
</header>
|
||||
|
||||
<main class="desk-shell pb-5">
|
||||
|
||||
<div class="alert alert-warning d-none mt-3" id="banner-closed" role="alert">
|
||||
<i class="fa-solid fa-moon me-2" aria-hidden="true"></i>
|
||||
Gold is closed for the weekend. The cards below hold Friday's last reading; news and the calendar keep updating.
|
||||
</div>
|
||||
<div class="alert alert-danger d-none mt-3" id="banner-fail" role="alert"></div>
|
||||
<div class="visually-hidden" id="dashboard-live" aria-live="polite"></div>
|
||||
|
||||
<main>
|
||||
<section class="card mb-4 d-none" id="context" aria-label="Market context">
|
||||
<div class="card-body d-flex flex-wrap gap-3 align-items-start">
|
||||
<div class="flex-grow-1" id="ctx-blurb"><strong>Market context</strong></div>
|
||||
<div class="d-flex flex-wrap gap-2" id="ctx-chips"></div>
|
||||
<section class="board mt-3" aria-labelledby="board-heading">
|
||||
<div class="row g-0">
|
||||
<div class="col-lg-4 board-read">
|
||||
<h1 class="board-headline" id="board-heading">Reading the market</h1>
|
||||
<p class="board-sub" id="board-sub">Waiting for the first scan to finish.</p>
|
||||
<div class="board-news d-none" id="context">
|
||||
<p class="context-text" id="ctx-blurb"></p>
|
||||
<div class="context-chips" id="ctx-chips"></div>
|
||||
</div>
|
||||
<div class="board-stats" id="board-stats"></div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="col-lg-8 board-plot">
|
||||
<h2 class="plot-title">Direction by timeframe</h2>
|
||||
<div class="chart-wrap chart-direction">
|
||||
<canvas id="chart-direction" role="img"
|
||||
aria-label="Direction score of each timeframe, from minus 100 selling to plus 100 buying"></canvas>
|
||||
</div>
|
||||
<p class="plot-note">Bars grow out of the centre line. Right is buying pressure, left is selling
|
||||
pressure, and the full scale runs to 100 either way.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mb-4" aria-labelledby="workspace-heading">
|
||||
<h2 class="text-uppercase text-secondary small fw-bold mb-3 d-flex align-items-center gap-2" id="workspace-heading">
|
||||
<i class="bi bi-crosshair text-primary"></i>
|
||||
Signal workspace
|
||||
<span class="fw-normal text-body-secondary" style="text-transform:none">— select a timeframe</span>
|
||||
</h2>
|
||||
<div id="tf-grid"></div>
|
||||
</section>
|
||||
<section class="mt-4" aria-labelledby="tf-heading">
|
||||
<div class="sec-head">
|
||||
<h2 class="sec-title" id="tf-heading">Four reads on one market</h2>
|
||||
<span class="sec-note">Every card is an independent scan. They are allowed to disagree.</span>
|
||||
</div>
|
||||
<div class="row g-3 row-cols-1 row-cols-md-2 row-cols-xxl-4" id="tf-grid"></div>
|
||||
</section>
|
||||
|
||||
<section aria-labelledby="fundamentals-heading">
|
||||
<h2 class="text-uppercase text-secondary small fw-bold mb-3 mt-4 d-flex align-items-center gap-2" id="fundamentals-heading">
|
||||
<i class="bi bi-globe2 text-primary"></i>Fundamentals
|
||||
</h2>
|
||||
<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">
|
||||
<h3 class="h5 card-title mb-0"><i class="bi bi-calendar-event me-2 text-primary"></i>Economic calendar</h3>
|
||||
<span class="text-secondary small" id="calendar-note">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">
|
||||
<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>
|
||||
<section class="mt-4" aria-labelledby="fund-heading">
|
||||
<div class="sec-head">
|
||||
<h2 class="sec-title" id="fund-heading">What else is moving gold</h2>
|
||||
<span class="sec-note">Context only. None of it changes a signal.</span>
|
||||
</div>
|
||||
<div class="row g-3">
|
||||
<div class="col-xl-7">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="card-head">
|
||||
<h3 class="card-title"><i class="fa-solid fa-calendar-day" aria-hidden="true"></i>Economic calendar</h3>
|
||||
<span class="card-note" id="calendar-note">loading</span>
|
||||
<div class="form-check form-switch ms-auto mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="hi-only">
|
||||
<label class="form-check-label" for="hi-only">High impact only</label>
|
||||
</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">
|
||||
<h3 class="h5 card-title mb-0"><i class="bi bi-newspaper me-2 text-primary"></i>Newswire</h3>
|
||||
<span class="text-secondary small" id="wire-note"></span>
|
||||
</div>
|
||||
<div id="wire-total" class="d-none"></div>
|
||||
<div id="wire"></div>
|
||||
<div class="table-responsive cal-scroll">
|
||||
<table class="table table-sm align-middle cal-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Time</th>
|
||||
<th scope="col">Cur</th>
|
||||
<th scope="col">Impact</th>
|
||||
<th scope="col">Event</th>
|
||||
<th scope="col" class="text-end">Forecast</th>
|
||||
<th scope="col" class="text-end">Previous</th>
|
||||
<th scope="col" class="text-end">Actual</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="cal-body">
|
||||
<tr><td colspan="7" class="empty">Loading the calendar</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<div class="col-xl-5">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<div class="card-head">
|
||||
<h3 class="card-title"><i class="fa-solid fa-newspaper" aria-hidden="true"></i>Newswire</h3>
|
||||
<span class="card-note ms-auto" id="wire-note"></span>
|
||||
</div>
|
||||
<div id="wire-tone" class="tone d-none">
|
||||
<div class="chart-wrap chart-tone">
|
||||
<canvas id="chart-tone" role="img" aria-label="Share of headlines leaning bullish, neutral or bearish for gold"></canvas>
|
||||
</div>
|
||||
<div class="tone-legend" id="tone-legend"></div>
|
||||
</div>
|
||||
<div id="wire"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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 class="desk-foot">
|
||||
<i class="fa-solid fa-circle-info" aria-hidden="true"></i>
|
||||
Every signal is built from closed candles and refreshes when the next candle closes.
|
||||
Educational and research use, not financial advice.
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="modal fade" id="tf-detail" tabindex="-1" aria-labelledby="detail-title" aria-hidden="true">
|
||||
<div class="modal fade" id="tf-detail" tabindex="-1" aria-labelledby="detail-title">
|
||||
<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">
|
||||
<h5 class="modal-title" id="detail-title">Timeframe</h5>
|
||||
<div class="modal-sub">
|
||||
<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>
|
||||
<button id="detail-close" type="button" class="btn-close" aria-label="Close the full analysis"></button>
|
||||
</div>
|
||||
<div class="modal-body" id="detail-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="news-detail" tabindex="-1" aria-labelledby="nd-title" aria-hidden="true">
|
||||
<div class="modal fade" id="news-detail" tabindex="-1" aria-labelledby="nd-title">
|
||||
<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>
|
||||
<button id="nd-close" type="button" class="btn-close" aria-label="Close the news detail"></button>
|
||||
</div>
|
||||
<div class="modal-body" id="nd-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js" crossorigin="anonymous"></script>
|
||||
<script src="dashboard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user