dashboard: redesign signal workspace and refresh flow
This commit is contained in:
Harwinder Sekhon
+66
-61
@@ -11,7 +11,6 @@
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -20,12 +19,12 @@
|
||||
<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"><i class="bi bi-coin me-1"></i>XAU/USD</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="Signal by timeframe"></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"><span class="live-dot"></span>…</div>
|
||||
<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>
|
||||
@@ -36,68 +35,75 @@
|
||||
<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>
|
||||
<div class="visually-hidden" id="dashboard-live" aria-live="polite"></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>
|
||||
<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>
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<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"><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">
|
||||
<label class="form-check-label small" for="hi-only">high impact only</label>
|
||||
<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" 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 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 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>
|
||||
</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"><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>
|
||||
<div id="wire"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="mt-4 pt-3 border-top text-secondary small">
|
||||
<i class="bi bi-info-circle me-1"></i>
|
||||
@@ -107,7 +113,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="tf-detail" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal fade" id="tf-detail" tabindex="-1" aria-labelledby="detail-title" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@@ -125,7 +131,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="news-detail" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal fade" id="news-detail" tabindex="-1" aria-labelledby="nd-title" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@@ -138,7 +144,6 @@
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user