-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy patheuro_dollar_framework.html
More file actions
342 lines (307 loc) · 16.7 KB
/
Copy patheuro_dollar_framework.html
File metadata and controls
342 lines (307 loc) · 16.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eurodollar Framework · Monetary Observatory</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@400;500&family=Manrope:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.2/jspdf.plugin.autotable.min.js"></script>
<style>
:root{--bg:#0a0c10;--surface:#111318;--card:#161920;--border:#232730;--accent:#c8a96e;--accent2:#5c9eff;--accent3:#4ecb8a;--accent4:#e06b6b;--text:#e8e3d8;--muted:#7a7f8e;--font-display:'DM Serif Display',Georgia,serif;--font-body:'Manrope',sans-serif;--font-mono:'DM Mono',monospace;--radius:12px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.6;min-height:100vh}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");opacity:.4}
#app{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh}
/* Header */
header{border-bottom:1px solid var(--border);padding:18px 20px;display:flex;align-items:center;justify-content:space-between;background:rgba(10,12,16,.85);backdrop-filter:blur(12px);position:sticky;top:0;z-index:100}
.logo{display:flex;align-items:baseline;gap:8px}
.logo-title{font-family:var(--font-display);font-size:22px;color:var(--accent)}
.logo-sub{font-size:11px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;font-weight:600}
.header-right{display:flex;align-items:center;gap:12px}
.last-updated{font-size:11px;color:var(--muted);font-family:var(--font-mono)}
.btn{padding:7px 16px;border-radius:6px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:12px;cursor:pointer;transition:all .15s;font-weight:500;font-family:var(--font-body)}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn-accent{background:var(--accent);color:#000;border-color:var(--accent);font-weight:700}
.btn-accent:hover{background:#d4b87a;border-color:#d4b87a}
/* Main */
main{flex:1;padding:20px;max-width:1400px;margin:0 auto;width:100%}
.section{margin-bottom:32px}
.page-title{font-family:var(--font-display);font-size:28px;color:var(--accent);margin-bottom:6px;font-style:italic}
.page-sub{color:var(--muted);font-size:13px;margin-bottom:24px}
/* Grids */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr 1fr}.grid-2{grid-template-columns:1fr}}
@media(max-width:600px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}
/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.card-hero{background:linear-gradient(135deg,rgba(200,169,110,.08) 0%,rgba(22,25,32,0) 60%);border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px;position:relative;overflow:hidden}
.card-hero::before{content:'';position:absolute;top:-40px;right:-40px;width:280px;height:280px;background:radial-gradient(circle,rgba(200,169,110,.07) 0%,transparent 70%);pointer-events:none}
/* KPI */
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.kpi.gold::before{background:var(--accent)}.kpi.blue::before{background:var(--accent2)}.kpi.green::before{background:var(--accent3)}.kpi.red::before{background:var(--accent4)}
.kpi-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;font-weight:600;margin-bottom:6px}
.kpi-value{font-family:var(--font-mono);font-size:24px;font-weight:500;color:var(--text)}
.kpi-sub{font-size:11px;color:var(--muted);margin-top:4px}
.kpi-delta{font-size:12px;margin-top:6px;font-weight:600}
.kpi-delta.pos{color:var(--accent3)}.kpi-delta.neg{color:var(--accent4)}
/* Timeline */
.timeline{position:relative;margin:32px 0;padding-left:28px}
.timeline::before{content:'';position:absolute;left:12px;top:0;bottom:0;width:3px;background:var(--border)}
.event{position:relative;margin-bottom:28px;padding-left:32px}
.event::before{content:'';position:absolute;left:-3px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid var(--card)}
.event-date{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-bottom:4px}
.event-title{font-weight:700;margin-bottom:6px}
.event-desc{font-size:13px;color:var(--muted);line-height:1.5}
/* Progress / Legend */
.progress-wrap{margin-bottom:14px}
.progress-header{display:flex;justify-content:space-between;margin-bottom:5px}
.progress-label{font-size:12px;font-weight:600}
.progress-val{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.progress-bar{height:6px;background:var(--border);border-radius:99px;overflow:hidden}
.progress-fill{height:100%;border-radius:99px;transition:width .6s ease}
/* Chart */
.chart-wrap{position:relative;margin:12px 0}
/* List */
.key-list{line-height:1.8;font-size:13.5px;color:var(--muted);padding-left:20px}
.key-list li{margin-bottom:8px}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent3);margin-right:6px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.alert{padding:12px 16px;border-radius:8px;font-size:13px;border-left:4px solid var(--accent);background:rgba(200,169,110,.08);margin-bottom:16px}
</style>
</head>
<body>
<div id="app">
<!-- HEADER -->
<header>
<div class="logo">
<span class="logo-title">💱 Eurodollar Framework</span>
<span class="logo-sub">Global Monetary Plumbing</span>
</div>
<div class="header-right">
<span class="last-updated" id="last-updated-label">2026 · Eurodollar University Analysis</span>
<button class="btn" onclick="exportReport()">📄 Export PDF</button>
</div>
</header>
<main>
<!-- HERO -->
<div class="card-hero section">
<span class="live-dot"></span><span style="font-size:11px;color:var(--accent3);font-weight:700;letter-spacing:1px;text-transform:uppercase">Jeff Snider · Eurodollar University</span>
<h1 class="page-title">The Real Global Dollar System</h1>
<p class="page-sub" style="max-width:720px">There is no separate petrodollar system. Oil surpluses and commodity flows are absorbed into the private, elastic, offshore Eurodollar network of bank liabilities, collateral, and interbank credit. This framework has dominated global liquidity for decades.</p>
</div>
<!-- KPIs -->
<div class="grid-4 section">
<div class="kpi blue">
<div class="kpi-label">Eurodollar Market (est.)</div>
<div class="kpi-value">$25T+</div>
<div class="kpi-sub">Offshore dollar liabilities</div>
</div>
<div class="kpi gold">
<div class="kpi-label">USD Trade Settlement</div>
<div class="kpi-value">~88%</div>
<div class="kpi-delta pos">Global dominance</div>
</div>
<div class="kpi green">
<div class="kpi-label">Global Money Supply Impact</div>
<div class="kpi-value">Significant</div>
<div class="kpi-sub">Elastic credit creation</div>
</div>
<div class="kpi red">
<div class="kpi-label">Dollar Funding Stress</div>
<div class="kpi-value">Recurrent</div>
<div class="kpi-delta neg">2008 · 2020</div>
</div>
</div>
<!-- MYTH vs REALITY + FEEDBACK -->
<div class="grid-2 section">
<div class="card">
<h3>Myth vs Reality</h3>
<div class="chart-wrap" style="height:260px"><canvas id="mythRealityChart"></canvas></div>
</div>
<div class="card">
<h3>Asset Price Feedback Loop</h3>
<div class="chart-wrap" style="height:260px"><canvas id="feedbackChart"></canvas></div>
</div>
</div>
<!-- RELATIONSHIPS -->
<div class="card section">
<h3>Policy → Liquidity → Asset Prices</h3>
<div class="chart-wrap" style="height:320px"><canvas id="relationshipChart"></canvas></div>
<div style="margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px">
<div>
<div class="progress-wrap">
<div class="progress-header"><span class="progress-label">Monetary Policy (Fed/QE)</span><span class="progress-val">Indirect</span></div>
<div class="progress-bar"><div class="progress-fill" style="width:65%;background:var(--accent2)"></div></div>
</div>
</div>
<div>
<div class="progress-wrap">
<div class="progress-header"><span class="progress-label">Regulation (Basel III)</span><span class="progress-val">Direct</span></div>
<div class="progress-bar"><div class="progress-fill" style="width:88%;background:var(--accent)"></div></div>
</div>
</div>
<div>
<div class="progress-wrap">
<div class="progress-header"><span class="progress-label">Collateral Dynamics</span><span class="progress-val">Critical</span></div>
<div class="progress-bar"><div class="progress-fill" style="width:95%;background:var(--accent3)"></div></div>
</div>
</div>
</div>
</div>
<!-- MONEY SUPPLY IMPACT -->
<div class="card section">
<h3>Eurodollar Impact on Global Broad Money Supply</h3>
<p style="font-size:13px;color:var(--muted);margin-bottom:16px">Private offshore dollar credit creation has significantly expanded effective global liquidity beyond official M2 measures.</p>
<div class="chart-wrap" style="height:280px"><canvas id="moneySupplyChart"></canvas></div>
</div>
<!-- HISTORY TIMELINE -->
<div class="card section">
<h3>100-Year Evolution (1926–2026)</h3>
<div class="timeline" id="timeline-container"></div>
</div>
<!-- INDICATORS & FINDINGS -->
<div class="grid-2 section">
<div class="card">
<h3>Live Indicators</h3>
<div class="grid-3" style="gap:12px">
<div class="kpi gold">
<div class="kpi-label">Dollar Funding Spread</div>
<div class="kpi-value">+42bps</div>
</div>
<div class="kpi blue">
<div class="kpi-label">BIS Cross-Border Claims</div>
<div class="kpi-value">$28.4T</div>
</div>
<div class="kpi green">
<div class="kpi-label">Oil Curve</div>
<div class="kpi-value">Contango</div>
</div>
</div>
</div>
<div class="card">
<h3>Key Findings</h3>
<ul class="key-list">
<li>No petrodollar "backing" system was ever created</li>
<li>Eurodollars emerged in the 1950s–60s, predating 1971</li>
<li>Oil shocks tested — but did not create — the system</li>
<li>Collateral shortages drive real liquidity crises</li>
<li>Official policy transmission is limited and indirect</li>
<li>Asset prices strongly feedback into Eurodollar capacity</li>
</ul>
<div class="alert">Focus on bank balance sheets, collateral velocity, and offshore dollar claims — not commodity invoicing.</div>
</div>
</div>
</main>
<footer style="border-top:1px solid var(--border);padding:24px 20px;color:var(--muted);font-size:12px;text-align:center;background:rgba(17,19,24,.8)">
Inspired by Jeff Snider’s Eurodollar University • Educational & Analytical Framework • 2026
</footer>
</div>
<script>
// Data
const EVENTS = [
{year:"1933", title:"Gold Standard Collapse", desc:"US abandons convertibility — exposes rigidity of commodity anchors."},
{year:"1944", title:"Bretton Woods", desc:"Gold-dollar standard. Triffin dilemma sets stage for offshore growth."},
{year:"1950s", title:"Eurodollar Emergence", desc:"Private offshore dollar deposits & interbank lending begin."},
{year:"1971", title:"Nixon Shock", desc:"Gold window closed. Accelerates Eurodollar dominance."},
{year:"1973", title:"Oil Shock", desc:"Petrodollars absorbed into existing Eurodollar channels."},
{year:"1979", title:"Volcker Tightening", desc:"High rates stress global Eurodollar borrowers."},
{year:"2008", title:"Global Financial Crisis", desc:"Severe dollar shortages reveal collateral fragility."},
{year:"2022", title:"Sanctions & Hikes", desc:"Weaponization of dollar clearing + tightening."}
];
const MYTH_DATA = {
labels: ['Petrodollar Myth', 'Eurodollar Reality'],
datasets: [{ data: [85, 15], backgroundColor: ['#e06b6b', '#c8a96e'], borderColor: '#0a0c10', borderWidth: 3 }]
};
// Charts
let charts = {};
function initCharts() {
// Myth Reality Pie
const mythCtx = document.getElementById('mythRealityChart');
if (mythCtx) {
charts.myth = new Chart(mythCtx.getContext('2d'), {
type: 'pie',
data: MYTH_DATA,
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { color: '#e8e3d8', font: {size:12} } } } }
});
}
// Feedback Loop
const feedbackCtx = document.getElementById('feedbackChart');
if (feedbackCtx) {
charts.feedback = new Chart(feedbackCtx.getContext('2d'), {
type: 'line',
data: {
labels: ['Tight Liq.', 'Policy', 'Collateral ↑', 'Risk ↑', 'Asset Boom'],
datasets: [
{ label: 'Eurodollar Liquidity', data: [22, 48, 72, 88, 96], borderColor: '#c8a96e', tension: 0.4, fill: false },
{ label: 'Asset Prices', data: [28, 52, 78, 90, 94], borderColor: '#5c9eff', tension: 0.4, fill: false }
]
},
options: { responsive: true, maintainAspectRatio: false, scales: { y: { grid:{color:'#232730'}, ticks:{color:'#7a7f8e'} }, x:{grid:{color:'#232730'}, ticks:{color:'#7a7f8e'}} } }
});
}
// Radar Relationship
const relCtx = document.getElementById('relationshipChart');
if (relCtx) {
charts.relationship = new Chart(relCtx.getContext('2d'), {
type: 'radar',
data: {
labels: ['Monetary Policy', 'Regulation', 'Collateral', 'Interbank', 'Asset Prices', 'Oil Flows'],
datasets: [{ label: 'Eurodollar Influence', data: [62, 92, 96, 89, 84, 58], backgroundColor: 'rgba(200,169,110,0.15)', borderColor: '#c8a96e', borderWidth: 2.5 }]
},
options: { responsive: true, maintainAspectRatio: false, scales: { r: { grid:{color:'#232730'}, ticks:{color:'#7a7f8e',stepSize:20}, min:0, max:100, angleLines:{color:'#232730'} } } }
});
}
// Money Supply Impact Chart
const moneyCtx = document.getElementById('moneySupplyChart');
if (moneyCtx) {
charts.money = new Chart(moneyCtx.getContext('2d'), {
type: 'bar',
data: {
labels: ['1960s', '1970s', '1980s', '1990s', '2000s', '2010s', '2020s'],
datasets: [
{ label: 'Official Global M2 Growth (%)', data: [6.5, 9.2, 7.8, 6.1, 5.4, 4.8, 5.9], backgroundColor: '#5c9eff' },
{ label: 'Eurodollar Contribution (est.)', data: [12, 18, 22, 25, 28, 19, 15], backgroundColor: '#c8a96e' }
]
},
options: { responsive: true, maintainAspectRatio: false, scales: { y: { grid:{color:'#232730'}, ticks:{color:'#7a7f8e'} }, x:{grid:{color:'#232730'}, ticks:{color:'#7a7f8e'}} }, plugins: { legend: { labels: { color: '#e8e3d8' } } } }
});
}
}
// Timeline
function renderTimeline() {
const container = document.getElementById('timeline-container');
container.innerHTML = EVENTS.map(e => `
<div class="event">
<div class="event-date">${e.year}</div>
<div class="event-title">${e.title}</div>
<div class="event-desc">${e.desc}</div>
</div>
`).join('');
}
// Export
function exportReport() {
if (typeof window.jspdf === 'undefined') { alert('PDF library loading...'); return; }
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.setFillColor(22,25,32); doc.rect(0,0,220,40,'F');
doc.setTextColor(200,169,110); doc.setFontSize(20);
doc.text('Eurodollar Framework', 20, 22);
doc.setFontSize(11); doc.text('Global Monetary Plumbing • 2026', 20, 30);
doc.save('eurodollar-framework-report.pdf');
}
// Init
function init() {
initCharts();
renderTimeline();
document.getElementById('last-updated-label').textContent = 'Live 2026 Framework';
}
window.onload = init;
</script>
</body>
</html>