jon/web-tasblet-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

crypto

Browse Source
This commit is contained in:
Jon
2026-04-29 22:06:54 +01:00
parent 74c1f641f5
commit fd743e1146
1 changed files with 45 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
dashboard.html
View File

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