arch Lars
184 lines
7.6 KiB
HTML
184 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>FX Pulse — Foreign Exchange Dashboard</title>
|
|
|
|
<!-- ===== Chart libraries (CDN, charts only) ===== -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/luxon@3.4.4/build/global/luxon.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.3.1/dist/chartjs-adapter-luxon.umd.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-financial@0.2.1/dist/chartjs-chart-financial.min.js"></script>
|
|
|
|
<!-- ===== Styles ===== -->
|
|
<link rel="stylesheet" href="styles.css" />
|
|
|
|
<!-- ===== App logic (deferred so it runs after the chart libs above) ===== -->
|
|
<script src="app.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
|
|
<!-- ============================ HEADER ============================ -->
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<div class="logo">₣</div>
|
|
<div>
|
|
<h1>FX Pulse</h1>
|
|
<small>Foreign Exchange Dashboard</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<div class="field">
|
|
<label for="baseSel">Base</label>
|
|
<select id="baseSel" aria-label="Base currency"></select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="targetSel">Target</label>
|
|
<select id="targetSel" aria-label="Target currency"></select>
|
|
</div>
|
|
<button class="btn icon" id="refreshBtn" title="Refresh data" aria-label="Refresh">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6"/><path d="M1 20v-6h6"/><path d="M3.5 9a9 9 0 0 1 14.9-3.4L23 10M1 14l4.6 4.4A9 9 0 0 0 20.5 15"/></svg>
|
|
</button>
|
|
<button class="btn icon" id="themeBtn" title="Toggle theme" aria-label="Toggle theme">
|
|
<span id="themeIcon">🌙</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="updated" style="margin:-8px 0 18px 2px">
|
|
<span class="dot"></span> Last updated: <strong id="updatedAt">—</strong>
|
|
<span id="srcLabel" style="margin-left:6px"></span>
|
|
</div>
|
|
|
|
<!-- ====================== TOP ROW : value / AI / patterns ====================== -->
|
|
<section class="grid top-grid">
|
|
|
|
<!-- Current value -->
|
|
<article class="card" id="valueCard">
|
|
<h2>📈 Current Value</h2>
|
|
<div class="pair-row">
|
|
<span class="pair" id="pairLabel">—/—</span>
|
|
<span class="badge flat" id="trendBadge">Stable</span>
|
|
</div>
|
|
<div class="rate" id="rateBig">—</div>
|
|
<div class="sub">
|
|
<span class="change flat" id="changeVal">—</span>
|
|
<span class="pair" id="changeNote">daily change</span>
|
|
</div>
|
|
<div class="mini-stats">
|
|
<div class="mini"><div class="k">7D High</div><div class="v" id="m7high">—</div></div>
|
|
<div class="mini"><div class="k">7D Low</div><div class="v" id="m7low">—</div></div>
|
|
<div class="mini"><div class="k">Volatility</div><div class="v" id="mvol">—</div></div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- AI insight -->
|
|
<article class="card" id="aiCard">
|
|
<h2>🤖 AI Insight</h2>
|
|
<div id="aiList">
|
|
<div class="insight"><div class="ic">…</div><p>Analyzing market data…</p></div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Patterns -->
|
|
<article class="card" id="patternCard">
|
|
<h2>🔎 Pattern & Trend Analysis</h2>
|
|
<div id="patternList">
|
|
<div class="pattern"><span class="tag t-flat">scan</span><small>Detecting patterns…</small></div>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
<!-- ====================== CHART ROW : candlestick / line ====================== -->
|
|
<section class="grid chart-grid">
|
|
<article class="card">
|
|
<div class="chart-head">
|
|
<h2 style="margin:0">🕯️ Candlestick — Daily Estimated Candles</h2>
|
|
</div>
|
|
<div class="chart-box"><canvas id="candleChart"></canvas></div>
|
|
<p class="est-note">* Estimated candles: previous-day rate = open, current-day rate = close; high/low approximated from daily range & recent volatility. Not exchange-provided OHLC.</p>
|
|
</article>
|
|
|
|
<article class="card">
|
|
<div class="chart-head">
|
|
<h2 style="margin:0">📉 Historical Rate</h2>
|
|
<div class="range-btns" id="rangeBtns">
|
|
<button data-d="7">7D</button>
|
|
<button data-d="14">14D</button>
|
|
<button data-d="30" class="active">30D</button>
|
|
<button data-d="90">90D</button>
|
|
</div>
|
|
</div>
|
|
<div class="chart-box"><canvas id="lineChart"></canvas></div>
|
|
<p class="est-note">Solid line = exchange rate · dashed line = 7-period moving average.</p>
|
|
</article>
|
|
</section>
|
|
|
|
<!-- ====================== HEATMAP + CALCULATOR ====================== -->
|
|
<section class="grid bottom-grid">
|
|
<article class="card">
|
|
<h2>🌡️ Currency Strength Heatmap <span style="text-transform:none;letter-spacing:0;font-weight:500;color:var(--text-faint)">(7-day, basket-weighted)</span></h2>
|
|
<div class="heat-grid" id="heatGrid"></div>
|
|
<div class="heat-legend"><span>Weak</span><div class="heat-bar"></div><span>Strong</span></div>
|
|
</article>
|
|
|
|
<article class="card">
|
|
<h2>🧮 Currency Calculator</h2>
|
|
<div class="calc-grid">
|
|
<div class="field">
|
|
<label for="calcAmount">Amount</label>
|
|
<input type="number" id="calcAmount" value="100" min="0" step="any" />
|
|
<select id="calcFrom" style="margin-top:8px"></select>
|
|
</div>
|
|
<button class="btn icon calc-swap" id="calcSwap" title="Swap currencies">⇄</button>
|
|
<div class="field">
|
|
<label for="calcTo">Converts to</label>
|
|
<select id="calcTo"></select>
|
|
</div>
|
|
</div>
|
|
<div class="calc-result">
|
|
<div class="big" id="calcOut">—</div>
|
|
<div class="rate-line" id="calcRate">—</div>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
<!-- ====================== TABLE ====================== -->
|
|
<section class="card">
|
|
<h2>💱 Exchange Rates <span style="text-transform:none;letter-spacing:0;font-weight:500;color:var(--text-faint)" id="tableBaseLbl"></span></h2>
|
|
<div class="table-tools">
|
|
<input type="search" id="tableSearch" placeholder="Search currency code or name…" />
|
|
<span class="updated" id="tableCount"></span>
|
|
</div>
|
|
<div class="table-scroll">
|
|
<table id="rateTable">
|
|
<thead>
|
|
<tr>
|
|
<th data-sort="code">Code <span class="arr"></span></th>
|
|
<th data-sort="name">Name <span class="arr"></span></th>
|
|
<th data-sort="rate" class="num">Rate <span class="arr"></span></th>
|
|
<th data-sort="change" class="num">Change % <span class="arr"></span></th>
|
|
<th data-sort="change">Trend</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="rateBody"></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
Data: <a href="https://github.com/fawazahmed0/exchange-api" target="_blank" rel="noopener">fawazahmed0/exchange-api</a> · free, daily rates · automatic CDN fallback.<br/>
|
|
Candlestick OHLC is estimated from daily values for illustration only. Not financial advice.
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Loading overlay + error toast -->
|
|
<div id="overlay"><div class="loader"><div class="ring"></div><span id="loadMsg">Fetching exchange data…</span></div></div>
|
|
<div id="toast"><span id="toastMsg"></span><span class="x" onclick="document.getElementById('toast').classList.remove('show')">✕</span></div>
|
|
|
|
</body>
|
|
</html>
|