From fd743e11465ad12732ce5592fdc5a80f2b0ed69e Mon Sep 17 00:00:00 2001
From: Jon <git@jonstarkey.co.uk>
Date: Wed, 29 Apr 2026 22:06:54 +0100
Subject: [PATCH] crypto

---
 dashboard.html | 66 ++++++++++++++++++++++++++++++++++----------------
 1 file changed, 45 insertions(+), 21 deletions(-)

diff --git a/dashboard.html b/dashboard.html
index 1855540..c76a761 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -9,6 +9,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300&display=swap" rel="stylesheet">
   <script src="https://widgets.coingecko.com/gecko-coin-list-widget.js" async></script>
   <script src="https://widgets.coingecko.com/gecko-coin-price-chart-widget.js" async></script>
+  <script src="https://widgets.coingecko.com/gecko-coin-heatmap-widget.js" async></script>
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
@@ -86,6 +87,7 @@
       display: none;
       flex-direction: column;
       background: var(--bg);
+      height: calc(100% - var(--tab-bar-h));
     }
     .panel.active { display: flex; }
 
@@ -190,30 +192,44 @@
       display: flex;
       flex-direction: column;
       overflow: hidden;
+      min-height: 0;
     }
 
     gecko-coin-list-widget {
-      width: 100% !important;
-      flex: 1;
       display: block;
+      width: 100% !important;
+      height: 100% !important;
+      flex: 1;
+      min-height: 0;
     }
 
-    /* ─── CHART PANELS ─── */
+    /* ─── CHART & HEATMAP PANELS ─── */
     .chart-body {
       flex: 1;
       display: flex;
       flex-direction: column;
-      padding: 12px 12px 12px;
+      padding: 0;
       overflow: hidden;
+      min-height: 0;
     }
 
-    gecko-coin-price-chart-widget {
-      width: 100% !important;
-      flex: 1;
+    gecko-coin-price-chart-widget,
+    gecko-coin-heatmap-widget {
       display: block;
+      width: 100% !important;
+      height: 100% !important;
+      flex: 1;
       min-height: 0;
     }
 
+    /* Force the inner iframe/shadow content to fill */
+    gecko-coin-price-chart-widget > *,
+    gecko-coin-heatmap-widget > *,
+    gecko-coin-list-widget > * {
+      width: 100% !important;
+      height: 100% !important;
+    }
+
     /* ─── PLACEHOLDER PANELS ─── */
     .placeholder-body {
       flex: 1;
@@ -388,33 +404,38 @@
 </div>
 
 <!-- ══════════════ PANELS 3–10: PLACEHOLDERS ══════════════ -->
-<!-- ══════════════ PANEL 3: BTC CHART ══════════════ -->
+<!-- ══════════════ PANEL 3: HEATMAP ══════════════ -->
 <div class="panel" id="panel-3">
+  <header class="panel-header"><h1>Heatmap</h1><div class="header-actions"><button class="icon-btn fs-all" title="Toggle fullscreen"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M1 6V1h5M10 1h5v5M15 10v5h-5M6 15H1v-5"/></svg></button></div></header>
+  <div class="chart-body">
+    <gecko-coin-heatmap-widget locale="en" dark-mode="true" outlined="true" top="10"></gecko-coin-heatmap-widget>
+  </div>
+</div>
+
+<!-- ══════════════ PANEL 4: BTC CHART ══════════════ -->
+<div class="panel" id="panel-4">
   <header class="panel-header"><h1>Bitcoin</h1><div class="header-actions"><button class="icon-btn fs-all" title="Toggle fullscreen"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M1 6V1h5M10 1h5v5M15 10v5h-5M6 15H1v-5"/></svg></button></div></header>
   <div class="chart-body">
     <gecko-coin-price-chart-widget locale="en" dark-mode="true" outlined="true" initial-currency="usd"></gecko-coin-price-chart-widget>
   </div>
 </div>
 
-<!-- ══════════════ PANEL 4: ETH CHART ══════════════ -->
-<div class="panel" id="panel-4">
+<!-- ══════════════ PANEL 5: ETH CHART ══════════════ -->
+<div class="panel" id="panel-5">
   <header class="panel-header"><h1>Ethereum</h1><div class="header-actions"><button class="icon-btn fs-all" title="Toggle fullscreen"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M1 6V1h5M10 1h5v5M15 10v5h-5M6 15H1v-5"/></svg></button></div></header>
   <div class="chart-body">
     <gecko-coin-price-chart-widget locale="en" dark-mode="true" outlined="true" coin-id="ethereum" initial-currency="usd"></gecko-coin-price-chart-widget>
   </div>
 </div>
 
-<!-- ══════════════ PANEL 5: PAX GOLD CHART ══════════════ -->
-<div class="panel" id="panel-5">
+<!-- ══════════════ PANEL 6: PAX GOLD CHART ══════════════ -->
+<div class="panel" id="panel-6">
   <header class="panel-header"><h1>PAX Gold</h1><div class="header-actions"><button class="icon-btn fs-all" title="Toggle fullscreen"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M1 6V1h5M10 1h5v5M15 10v5h-5M6 15H1v-5"/></svg></button></div></header>
   <div class="chart-body">
     <gecko-coin-price-chart-widget locale="en" dark-mode="true" outlined="true" coin-id="pax-gold" initial-currency="usd"></gecko-coin-price-chart-widget>
   </div>
 </div>
-<div class="panel" id="panel-6">
-  <header class="panel-header"><h1>Tab 6</h1><div class="header-actions"><button class="icon-btn fs-all" title="Toggle fullscreen"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M1 6V1h5M10 1h5v5M15 10v5h-5M6 15H1v-5"/></svg></button></div></header>
-  <div class="placeholder-body"><div class="ph-key">6</div><p>Empty tab — press <strong style="color:var(--accent)">6</strong> to jump here.</p><span class="ph-hint">Keys 1–9, 0 switch tabs</span></div>
-</div>
+
 <div class="panel" id="panel-7">
   <header class="panel-header"><h1>Tab 7</h1><div class="header-actions"><button class="icon-btn fs-all" title="Toggle fullscreen"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M1 6V1h5M10 1h5v5M15 10v5h-5M6 15H1v-5"/></svg></button></div></header>
   <div class="placeholder-body"><div class="ph-key">7</div><p>Empty tab — press <strong style="color:var(--accent)">7</strong> to jump here.</p><span class="ph-hint">Keys 1–9, 0 switch tabs</span></div>
@@ -436,10 +457,10 @@
 <nav id="tab-bar">
   <button class="tab-btn active" data-tab="1"><span class="tab-key">1</span><span class="tab-icon">🕐</span><span class="tab-label">Clock</span></button>
   <button class="tab-btn" data-tab="2"><span class="tab-key">2</span><span class="tab-icon">₿</span><span class="tab-label">Crypto</span></button>
-  <button class="tab-btn" data-tab="3"><span class="tab-key">3</span><span class="tab-icon">₿</span><span class="tab-label">BTC</span></button>
-  <button class="tab-btn" data-tab="4"><span class="tab-key">4</span><span class="tab-icon">Ξ</span><span class="tab-label">ETH</span></button>
-  <button class="tab-btn" data-tab="5"><span class="tab-key">5</span><span class="tab-icon">🥇</span><span class="tab-label">PAXG</span></button>
-  <button class="tab-btn" data-tab="6"><span class="tab-key">6</span><span class="tab-icon">＋</span><span class="tab-label">Tab 6</span></button>
+  <button class="tab-btn" data-tab="3"><span class="tab-key">3</span><span class="tab-icon">🔥</span><span class="tab-label">Heat</span></button>
+  <button class="tab-btn" data-tab="4"><span class="tab-key">4</span><span class="tab-icon">₿</span><span class="tab-label">BTC</span></button>
+  <button class="tab-btn" data-tab="5"><span class="tab-key">5</span><span class="tab-icon">Ξ</span><span class="tab-label">ETH</span></button>
+  <button class="tab-btn" data-tab="6"><span class="tab-key">6</span><span class="tab-icon">🥇</span><span class="tab-label">PAXG</span></button>
   <button class="tab-btn" data-tab="7"><span class="tab-key">7</span><span class="tab-icon">＋</span><span class="tab-label">Tab 7</span></button>
   <button class="tab-btn" data-tab="8"><span class="tab-key">8</span><span class="tab-icon">＋</span><span class="tab-label">Tab 8</span></button>
   <button class="tab-btn" data-tab="9"><span class="tab-key">9</span><span class="tab-icon">＋</span><span class="tab-label">Tab 9</span></button>
@@ -466,7 +487,7 @@
 let activeTab = 1;
 
 const TAB_NAMES = {
-  1:'World Clock', 2:'Crypto', 3:'Bitcoin', 4:'Ethereum', 5:'PAX Gold',
+  1:'World Clock', 2:'Crypto', 3:'Heatmap', 4:'Bitcoin', 5:'Ethereum', 6:'PAX Gold',
   6:'Tab 6', 7:'Tab 7', 8:'Tab 8', 9:'Tab 9', 10:'Tab 10'
 };
 
@@ -478,6 +499,8 @@ function switchTab(n) {
   document.getElementById(`panel-${n}`)?.classList.add('active');
   document.querySelector(`.tab-btn[data-tab="${n}"]`)?.classList.add('active');
   showToast(`<strong>${n === 10 ? '0' : n}</strong> &nbsp;·&nbsp; ${TAB_NAMES[n]}`);
+  // nudge widgets to re-measure after panel becomes visible
+  requestAnimationFrame(() => window.dispatchEvent(new Event('resize')));
 }
 
 document.querySelectorAll('.tab-btn').forEach(btn =>
@@ -493,6 +516,7 @@ document.addEventListener('keydown', e => {
   if (e.key >= '1' && e.key <= '9') { switchTab(+e.key); return; }
   if (e.key === '0') { switchTab(10); return; }
   if (e.key === 'f' || e.key === 'F') toggleFullscreen();
+  if (e.key === 'r' || e.key === 'R') { showToast('↻ Refreshing…'); setTimeout(() => location.reload(), 400); }
 });
 
 // ─── TOAST ────────────────────────────────────────────────