Create currency-timeline.html
· 1 year ago
3c0c96956e61580c568d7900118f916d4448a7c9
Parent:
b526bbf77
1 file changed +580 −0
- currency-timeline.html +580 −0
Diff
--- /dev/null +++ b/currency-timeline.html @@ -0,0 +1,580 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>A Visual History of Global Monetary Standards - Saifedean Perspective</title> + <!-- Google Fonts --> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,700;1,400&family=Roboto+Slab:wght@300;400;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet"> + <!-- Bootstrap CSS --> + <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> + <!-- Bootstrap Icons --> + <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet"> + <style> + :root { + --font-main-heading: 'Roboto Slab', serif; + --font-era-heading: 'EB Garamond', serif; + --font-body: 'Lato', sans-serif; + --color-text: #22272b; + --color-gold: #B08D57; + --color-silver: #9ea3a8; + --color-bronze-commodity: #8C7853; + --color-fiat-era: #52585d; + --color-bitcoin: #E47A16; /* Slightly adjusted Bitcoin orange */ + --color-intermediate: #5c3b8e; /* Purple for intermediate */ + --timeline-line-color: #cbd3db; + --bg-main: #f8f9fa; /* Lighter for contrast */ + --nav-bg: #2c3e50; /* Deeper, more serious nav */ + --content-bg: #ffffff; + --intro-bg: #f1f3f5; + } + + html { scroll-behavior: smooth; } + + body { + font-family: var(--font-body); + background-color: var(--bg-main); + color: var(--color-text); + line-height: 1.7; + margin-left: 260px; /* Wider nav */ + } + + .left-nav { + position: fixed; + left: 0; + top: 0; + width: 260px; + height: 100vh; + background-color: var(--nav-bg); + padding-top: 25px; + box-shadow: 3px 0 15px rgba(0,0,0,0.1); + z-index: 1000; + overflow-y: auto; + } + .left-nav-header { + padding: 18px 25px; + color: #ecf0f1; + font-family: var(--font-era-heading); + font-style: italic; + font-size: 1.7em; + font-weight: 500; + border-bottom: 1px solid #4a627a; + margin-bottom: 20px; + text-align: center; + } + .left-nav ul { list-style: none; padding: 0; margin: 0; } + .left-nav li a { + display: flex; + align-items: center; + padding: 14px 25px; + color: #bdc3c7; /* Lighter grey for readability */ + text-decoration: none; + font-size: 0.95em; + transition: background-color 0.2s, color 0.2s, border-left-color 0.2s; + border-left: 4px solid transparent; + } + .left-nav li a i { margin-right: 15px; font-size: 1.3em; width: 24px; text-align: center;} + .left-nav li a:hover { + background-color: #34495e; + color: #fff; + border-left-color: var(--color-gold); + } + .left-nav li a.active { + background-color: #1c2833; + color: #fff; + font-weight: 700; + border-left-color: var(--color-gold); + } + + .timeline-container { max-width: 950px; margin: 0 auto; padding: 30px 20px; position: relative; } + .timeline-container::before { + content: ''; position: absolute; left: 50%; top: 0; bottom: 0; + width: 3px; background-color: var(--timeline-line-color); transform: translateX(-50%); + } + + .standard-section { margin-bottom: 50px; padding-top: 70px; } + .standard-title-wrapper { display: flex; align-items: center; justify-content: center; margin-bottom: 25px; } + .standard-title { + font-family: var(--font-era-heading); font-weight: 700; font-size: 2.8em; + color: var(--color-text); position: relative; padding-bottom: 15px; margin-right: 15px; + } + .standard-title::after { + content: ''; position: absolute; left: 0; bottom: 0; + width: 100%; height: 3px; /* Full width underline */ + } + .intro-toggle { font-size: 0.7em; vertical-align: middle; cursor: pointer; } + + .era-intro { + background-color: var(--intro-bg); + padding: 15px 20px; + margin: 0 auto 35px auto; /* Centered intro text */ + max-width: calc(100% - 80px); /* Slightly inset */ + border-radius: 6px; + border-left: 4px solid; /* Color from era */ + font-size: 0.95em; + font-style: italic; + color: #454f58; + line-height: 1.6; + } + .era-intro p { margin-bottom: 0.5em; } + + .timeline-item { padding: 10px 0; position: relative; margin-bottom: 30px; } + .timeline-item:nth-child(odd) .timeline-content-wrapper { float: left; padding-right: 50px; width: calc(50% - 25px); } + .timeline-item:nth-child(even) .timeline-content-wrapper { float: right; padding-left: 50px; width: calc(50% - 25px); } + .timeline-item::after { content: ""; display: table; clear: both; } + + .timeline-icon { + position: absolute; left: 50%; top: 0px; transform: translate(-50%, 5px); + width: 40px; height: 40px; border-radius: 50%; background-color: var(--bg-main); + border: 3px solid; display: flex; align-items: center; justify-content: center; + z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.06); + } + .timeline-icon i, .timeline-icon span { font-size: 1em; } + + .timeline-content { + background-color: var(--content-bg); padding: 20px 25px; border-radius: 6px; + box-shadow: 0 3px 10px rgba(0,0,0,0.05); border: 1px solid #dde2e7; + transition: box-shadow 0.3s ease, transform 0.2s ease; + } + .timeline-content:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.08); transform: translateY(-2px); } + + /* Standard Color Styling */ + .standard-commodity .standard-title::after, .standard-commodity .era-intro { border-color: var(--color-bronze-commodity); } + .standard-commodity .timeline-icon { border-color: var(--color-bronze-commodity); } + .standard-commodity .timeline-icon i { color: var(--color-bronze-commodity); } + + .standard-classical-coinage .standard-title::after, .standard-classical-coinage .era-intro { border-color: var(--color-silver); } + .standard-classical-coinage .timeline-icon { border-color: var(--color-silver); } + .standard-classical-coinage .timeline-icon i, .standard-classical-coinage .timeline-icon span { color: #333; } + + .standard-intermediate .standard-title::after, .standard-intermediate .era-intro { border-color: var(--color-intermediate); } + .standard-intermediate .timeline-icon { border-color: var(--color-intermediate); } + .standard-intermediate .timeline-icon i, .standard-intermediate .timeline-icon span { color: var(--color-intermediate); } + + .standard-gold .standard-title::after, .standard-gold .era-intro { border-color: var(--color-gold); } + .standard-gold .timeline-icon { border-color: var(--color-gold); } + .standard-gold .timeline-icon i, .standard-gold .timeline-icon span { color: var(--color-gold); } + + .standard-fiat .standard-title::after, .standard-fiat .era-intro { border-color: var(--color-fiat-era); } + .standard-fiat .timeline-icon { border-color: var(--color-fiat-era); } + .standard-fiat .timeline-icon i, .standard-fiat .timeline-icon span { color: var(--color-fiat-era); } + + .standard-digital-sound .standard-title::after, .standard-digital-sound .era-intro { border-color: var(--color-bitcoin); } + .standard-digital-sound .timeline-icon { border-color: var(--color-bitcoin); } + .standard-digital-sound .timeline-icon i { color: var(--color-bitcoin); } + + .timeline-content img { max-width: 100%; height: auto; border-radius: 4px; margin-bottom: 15px; border: 1px solid #eef1f3;} + .timeline-content h3 { + font-family: var(--font-era-heading); color: #1a1c1e; margin-top: 0; + font-size: 1.4em; font-weight: 500; margin-bottom: 6px; + } + .timeline-content .year { + font-size: 0.75em; font-weight: 700; color: #495057; display: block; + margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; + } + .timeline-content p { font-size: 0.95em; margin-bottom: 0.8em; } + .timeline-content ul { padding-left: 18px; margin-bottom: 0.8em; font-size: 0.92em;} + .timeline-content li { margin-bottom: 0.25em;} + .timeline-content .currency-detail, .timeline-content .quantitative-detail { + font-style: normal; color: #343a40; font-size: 0.88em; background-color: #eef1f3; + padding: 7px 10px; border-radius: 3px; display: block; margin-top: 10px; + border-left: 2px solid; + } + .standard-gold .quantitative-detail, .standard-gold .currency-detail { border-left-color: var(--color-gold); } + .standard-fiat .quantitative-detail, .standard-fiat .currency-detail { border-left-color: var(--color-fiat-era); } + .standard-digital-sound .quantitative-detail, .standard-digital-sound .currency-detail { border-left-color: var(--color-bitcoin); } + + .main-header { text-align: center; padding: 45px 20px; background: var(--nav-bg); color: #fff; margin-bottom: 35px; } + .main-header h1 { font-family: var(--font-main-heading); font-weight: 700; font-size: 3.2em; } + .main-header .sub-title { font-family: var(--font-body); font-weight: 300; font-size: 1.3em; color: #dfe6ec; margin-top: 8px; } + .footer-note { text-align: center; margin-top: 50px; padding: 25px 0; font-size: 0.88em; color: #5a6268; border-top: 1px solid var(--timeline-line-color);} + + @media (max-width: 1024px) { + body { margin-left: 0; padding-top: 50px; } + .left-nav { height: 50px; flex-direction: row; align-items: center; justify-content: center; overflow-x: auto; overflow-y: hidden; } + .left-nav-header { display: none; } + .left-nav ul { display: flex; flex-direction: row; width: 100%; justify-content: space-around; } + .left-nav li a { padding: 8px 12px; font-size: 0.8em; border-left: none; border-bottom: 3px solid transparent; white-space: nowrap;} + .left-nav li a i { font-size: 1em; margin-right: 4px;} + .main-header { margin-top: 0; padding: 25px 15px;} + .main-header h1 { font-size: 2.2em;} + .standard-title { font-size: 2.2em;} + .era-intro { max-width: 100%; margin-left: 0; margin-right: 0;} + } + @media (max-width: 768px) { + .timeline-container::before { left: 18px; } + .timeline-item:nth-child(odd) .timeline-content-wrapper, + .timeline-item:nth-child(even) .timeline-content-wrapper { + width: calc(100% - 38px); float: right; padding-left: 30px; padding-right: 0; + } + .timeline-icon { left: -2px; } /* Adjusted for thinner line */ + .left-nav ul { justify-content: flex-start; } + .standard-title {font-size: 2.0em;} + .timeline-content h3 {font-size: 1.25em;} + } + </style> +</head> +<body> + <nav class="left-nav"> + <div class="left-nav-header">Monetary Standards</div> + <ul> + <li><a href="#standard-commodity"><i class="bi bi-stack"></i> Commodity & Barter</a></li> + <li><a href="#standard-classical-coinage"><i class="bi bi-shield-shaded"></i> Classical Coinage</a></li> + <li><a href="#standard-intermediate"><i class="bi bi-globe2"></i> Intermediate & Globalizing</a></li> + <li><a href="#standard-gold"><i class="bi bi-award-fill"></i> The Gold Standard</a></li> + <li><a href="#standard-fiat"><i class="bi bi-printer"></i> The Fiat Experiment</a></li> + <li><a href="#standard-digital-sound"><i class="bi bi-lightning-charge-fill"></i> Digital Sound Money</a></li> + </ul> + </nav> + + <div class="timeline-container"> + <header class="main-header"> + <h1>A History of Global Monetary Standards</h1> + <p class="sub-title">The Quest for Sound Money: From Tangible Value to Abstract Promises, and Back?</p> + </header> + + <!-- ERA I --> + <div id="standard-commodity" class="standard-section standard-commodity"> + <div class="standard-title-wrapper"> + <h2 class="standard-title">I. Commodity Money</h2> + <button class="btn btn-sm btn-outline-secondary intro-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#introCommodity" aria-expanded="false" aria-controls="introCommodity"> + <i class="bi bi-info-circle"></i> Intro + </button> + </div> + <div class="collapse era-intro" id="introCommodity"> + <p>Humanity's earliest monetary systems emerged from the direct utility of goods. Money <em>was</em> the commodity, valued for its use or established social convention. This represented a step beyond simple barter, providing a more common medium but still tied to physical utility and local availability, with varying degrees of "hardness" or difficulty to produce.</p> + </div> + <!-- Items for Commodity Money --> + <div class="timeline-item"> + <div class="timeline-icon"><i class="bi bi-arrow-left-right-circle"></i></div> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">Antiquity - ~700 BC</span><h3>Origins: From Barter to Common Commodities</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Square_Shoulder_Spade.jpg/300px-Square_Shoulder_Spade.jpg" alt="Ancient Chinese Spade Money"> + <p>Preceding formal money, direct barter (goods for goods) dominated. Gradually, certain widely desired commodities with inherent usefulness, divisibility, and portability emerged as early forms of money across different cultures (e.g., cattle in pastoral societies, salt in Africa & Europe, grain in agricultural centers like Mesopotamia).</p> + <p class="currency-detail"><strong>Challenge:</strong> Low salability across time and space; high storage and transport costs for bulk commodities.</p> + </div></div> + </div> + <div class="timeline-item"> + <div class="timeline-icon"><i class="bi bi-shells"></i></div> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">~3000 BC - Various Eras</span><h3>Shells, Beads, and Ornamental Monies</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Cowry_shells_for_sale.jpg/600px-Cowry_shells_for_sale.jpg" alt="Cowrie Shells"> + <p>Cowrie shells (Indo-Pacific, Africa, China) became a widespread commodity money due to their uniformity, durability, and relative scarcity (difficulty to "produce" inland). Similar roles were played by Wampum beads (Native North America) and other ornamental items, their value often tied to labor in production or acquisition.</p> + <p class="quantitative-detail"><strong>Geographical Flavor:</strong> Cowries connected vast trade networks across the Indian Ocean basin.</p> + </div></div> + </div> + </div> + + <!-- ERA II --> + <div id="standard-classical-coinage" class="standard-section standard-classical-coinage"> + <div class="standard-title-wrapper"> + <h2 class="standard-title">II. Classical Coinage</h2> + <button class="btn btn-sm btn-outline-secondary intro-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#introClassical" aria-expanded="false" aria-controls="introClassical"> + <i class="bi bi-info-circle"></i> Intro + </button> + </div> + <div class="collapse era-intro" id="introClassical"> + <p>The invention of coinage marked a pivotal step: metals, already valued for their scarcity and properties, were now standardized by weight and purity, often under state authority. This improved the salability of money across space, making it more efficient for trade and tax collection. However, it also introduced the perpetual temptation for rulers to debase the currency for short-term gain.</p> + </div> + <!-- Items for Classical Coinage --> + <div class="timeline-item"> + <div class="timeline-icon"><i class="bi bi-lightning"></i></div> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">~650 BC (Lydia)</span><h3>The Lydian Innovation: Electrum Coins</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Lydian_Lion_Electrum_Coin.jpg/600px-Lydian_Lion_Electrum_Coin.jpg" alt="Lydian Lion Coin"> + <p>Kingdom of Lydia (Western Anatolia) pioneers the first true coins made from electrum (a natural gold-silver alloy), stamped with official insignia. This innovation spread rapidly to Greek city-states.</p> + </div></div> + </div> + <div class="timeline-item"> + <div class="timeline-icon"><i class="bi bi-yin-yang"></i></div> <!-- Greek/Eastern Icon --> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">~600 BC - ~300 BC</span><h3>Parallel Developments: Greece, India, China</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Indian_punch-marked_coins_from_Taxila%2C_4th_century_BC.jpg/600px-Indian_punch-marked_coins_from_Taxila%2C_4th_century_BC.jpg" alt="Indian Punch-Marked Coins"> + <ul> + <li><strong>Greece:</strong> Silver coinage (e.g., Athenian Owl Drachma, ~4.3g silver) becomes dominant in Mediterranean trade.</li> + <li><strong>India:</strong> Punch-marked silver coins (Karshapana) emerge.</li> + <li><strong>China:</strong> Cast bronze spade and knife money, later round coins with holes (Ban Liang, Wu Zhu).</li> + </ul> + </div></div> + </div> + <div class="timeline-item"> + <div class="timeline-icon"><span>R</span></div> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">~269 BC - ~270 AD</span><h3>Roman Coinage: Rise and Debasement</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Denier_Auguste_Lugdunum_revers.jpg/600px-Denier_Auguste_Lugdunum_revers.jpg" alt="Roman Denarius of Augustus"> + <p>Rome's silver Denarius (initially ~4.5g, >95% pure) and gold Aureus facilitate imperial expansion. Systematic debasement begins with Nero and accelerates dramatically by the 3rd Century AD (Crisis of the Third Century).</p> + <p class="quantitative-detail"><strong>Debasement:</strong> Denarius silver content falls from ~98% under Augustus to <5% by Gallienus' reign (260s AD), leading to hyperinflation and severe economic disruption. Diocletian's Edict on Maximum Prices (301 AD) fails to curb it.</p> + </div></div> + </div> + <div class="timeline-item"> + <div class="timeline-icon"><i class="bi bi-shield-fill-plus"></i></div> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">~312 AD - ~1070s AD</span><h3>Byzantine Solidus: A Beacon of Stability</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Solidus_of_Constantine_the_Great.jpg/600px-Solidus_of_Constantine_the_Great.jpg" alt="Byzantine Solidus Coin"> + <p>Constantine I reforms Roman currency, introducing the gold Solidus (~4.5g, high purity). It maintained its weight and fineness for over 7 centuries, becoming the trusted international currency of the Mediterranean world, underpinning Byzantine economic power. Known as the "dollar of the Middle Ages."</p> + <p class="currency-detail"><strong>Global Impact:</strong> Its stability was a key factor in long-distance trade; widely imitated (e.g., early Islamic Dinar).</p> + </div></div> + </div> + </div> + + <!-- ERA III --> + <div id="standard-intermediate" class="standard-section standard-intermediate"> + <div class="standard-title-wrapper"> + <h2 class="standard-title">III. Intermediate & Globalizing Standards</h2> + <button class="btn btn-sm btn-outline-secondary intro-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#introIntermediate" aria-expanded="false" aria-controls="introIntermediate"> + <i class="bi bi-info-circle"></i> Intro + </button> + </div> + <div class="collapse era-intro" id="introIntermediate"> + <p>Following Rome's decline in the West, new centers of economic power emerged. Islamic Caliphates established sound coinage, while China experimented extensively with paper money. Italian city-states revived gold coinage in Europe, and later, the influx of New World silver created a truly global metallic standard for the first time, albeit one subject to the whims of empires and inflationary pressures from increased supply.</p> + </div> + <div class="timeline-item"> + <div class="timeline-icon"><i class="bi bi-moon-stars"></i></div> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">~690s AD - Medieval Era</span><h3>Islamic Gold Dinar & Silver Dirham</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Dinar_cropped.jpg/600px-Dinar_cropped.jpg" alt="Islamic Gold Dinar"> + <p>Umayyad Caliphate introduces standardized Gold Dinar (~4.25g, inspired by Solidus) and Silver Dirham (~2.97g). These generally sound currencies fueled extensive trade networks from Al-Andalus (Spain) across North Africa, the Middle East, and Central Asia to India and China.</p> + </div></div> + </div> + <div class="timeline-item"> + <div class="timeline-icon"><i class="bi bi-receipt-cutoff"></i></div> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">~10th - 15th Century (China)</span><h3>Chinese Paper Currency: Promise & Peril</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Ming_banknote_1_Kuan_1368-1399.jpg/500px-Ming_banknote_1_Kuan_1368-1399.jpg" alt="Ming Dynasty Banknote"> + <p>Song, Jin, and Yuan dynasties develop various forms of paper money (e.g., Jiaozi, Guanzi). While initially facilitating commerce, repeated episodes of over-issuance by the state, particularly under the Yuan and early Ming, led to hyperinflation and eventual abandonment of paper money for centuries in favor of silver.</p> + <p class="currency-detail"><strong>Lesson:</strong> State monopoly on unbacked paper money historically leads to its depreciation. (Gresham's Law also observed: bad money drives out good).</p> + </div></div> + </div> + <div class="timeline-item"> + <div class="timeline-icon"><i class="bi bi-flower1"></i></div> <!-- Florin/Flower Icon --> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">~1252 AD (Florence/Venice)</span><h3>European Gold Revival: Florin & Ducat</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Gold_florin_of_Florence%2C_Italy%2C_1252-1303_AD%2C_RICAM_2008.0.242-001.jpg/600px-Gold_florin_of_Florence%2C_Italy%2C_1252-1303_AD%2C_RICAM_2008.0.242-001.jpg" alt="Florentine Florin"> + <p>Italian maritime republics, leading European trade, reintroduce gold coinage: Florentine Florin (~3.54g, 24-carat gold) and Venetian Ducat/Sequin (similar weight/purity). Their stability and recognizability made them the dominant currencies for high-value European commerce for centuries.</p> + </div></div> + </div> + <div class="timeline-item"> + <div class="timeline-icon"><i class="bi bi-tsunami"></i></div> <!-- Wave for global silver flow --> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">~1500s - ~1800s</span><h3>The Spanish Silver Dollar: First True Global Currency</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Spaanse_mat_Ferdinand_VI_1757.jpg/600px-Spaanse_mat_Ferdinand_VI_1757.jpg" alt="Spanish Silver Dollar (Piece of Eight)"> + <p>Vast silver output from Spanish American mines (PotosÃ, Zacatecas) leads to the mass minting of the Spanish Silver Dollar (Real de a Ocho, ~25.5g fine silver). Uniformity and wide availability made it the dominant currency for international trade for over 200 years, accepted across Europe, the Americas, and Asia (especially China, where it became a de facto standard).</p> + <p class="quantitative-detail"><strong>Impact - Price Revolution:</strong> The massive influx of silver into Europe contributed to a prolonged period of general price inflation (16th-17th centuries), illustrating the quantity theory of money.</p> + </div></div> + </div> + </div> + + <!-- ERA IV --> + <div id="standard-gold" class="standard-section standard-gold"> + <div class="standard-title-wrapper"> + <h2 class="standard-title">IV. The Classical Gold Standard</h2> + <button class="btn btn-sm btn-outline-secondary intro-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#introGold" aria-expanded="false" aria-controls="introGold"> + <i class="bi bi-info-circle"></i> Intro + </button> + </div> + <div class="collapse era-intro" id="introGold"> + <p>The 19th and early 20th centuries witnessed the zenith of gold as the international monetary anchor. Nations formally defined their currency units as a specific weight of gold, creating a system of fixed exchange rates and imposing a degree of discipline on national monetary policies. This era fostered unprecedented global trade and capital flows but was ultimately undone by the fiscal demands of war and political pressures for monetary expansion.</p> + </div> + <div class="timeline-item"> + <div class="timeline-icon"><span>£</span></div> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">~1717 (de facto) / 1816 (official) - 1914</span><h3>Great Britain & The Gold Standard</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/GB_sovereign_Victoria_1887.jpg/600px-GB_sovereign_Victoria_1887.jpg" alt="British Gold Sovereign"> + <p>Britain, under Sir Isaac Newton as Master of the Mint, effectively moves to a gold standard by overvaluing gold relative to silver. Formally adopted in 1816, the Pound Sterling (£), redeemable for gold sovereigns (7.322g fine gold), becomes the world's premier reserve currency during Pax Britannica. Many nations follow suit.</p> + <p class="currency-detail"><strong>Characteristics:</strong> Promoted price stability (long-term), fixed exchange rates, facilitated international trade and investment, but limited government's ability to inflate.</p> + </div></div> + </div> + <div class="timeline-item"> + <div class="timeline-icon"><span>$</span></div> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">1870s (de facto) / 1900 (official) - 1933</span><h3>United States Joins the Gold Standard</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/1907_Liberty_Head_double_eagle_gold_coin_obverse.jpg/600px-1907_Liberty_Head_double_eagle_gold_coin_obverse.jpg" alt="US Gold Double Eagle Coin"> + <p>After the Civil War, the US gradually returns to specie payments, formally adopting the gold standard with the Gold Standard Act of 1900 (1 USD = ~1.505g fine gold). This period saw significant US industrial growth and economic expansion. Domestic gold convertibility suspended in 1933 during the Great Depression; gold ownership by citizens criminalized.</p> + </div></div> + </div> + <div class="timeline-item"> + <div class="timeline-icon"><i class="bi bi-building-exclamation"></i></div> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">1914 - 1944</span><h3>Interwar Period: Breakdown & Attempts to Restore</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Bundesarchiv_Bild_102-13304%2C_Berlin%2C_Inflationsgeld_wird_verbrannt.jpg/600px-Bundesarchiv_Bild_102-13304%2C_Berlin%2C_Inflationsgeld_wird_verbrannt.jpg" alt="Burning German Marks during Hyperinflation"> + <p>WWI leads to suspension of gold standard by most belligerents to finance war efforts via inflation. Attempts to restore it in the 1920s (e.g., Gold Exchange Standard) prove fragile. Competitive devaluations and economic nationalism contribute to the Great Depression.</p> + <p class="quantitative-detail"><strong>Case Study - Weimar Hyperinflation:</strong> Germany's suspension of gold convertibility and massive money printing to pay war reparations led to catastrophic hyperinflation (1921-1923), destroying savings and social order.</p> + </div></div> + </div> + </div> + + <!-- ERA V --> + <div id="standard-fiat" class="standard-section standard-fiat"> + <div class="standard-title-wrapper"> + <h2 class="standard-title">V. The Global Fiat Experiment</h2> + <button class="btn btn-sm btn-outline-secondary intro-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#introFiat" aria-expanded="false" aria-controls="introFiat"> + <i class="bi bi-info-circle"></i> Intro + </button> + </div> + <div class="collapse era-intro" id="introFiat"> + <p>The mid-20th century saw a move towards a system where national currencies were linked to a gold-convertible US dollar. Its collapse in 1971 ushered in the current era of purely fiat currencies—government-issued money unbacked by any physical commodity. This system grants states immense power over money supply, leading to persistent inflation, boom-bust cycles, and a distortion of economic calculation and time preference.</p> + </div> + <div class="timeline-item"> + <div class="timeline-icon"><i class="bi bi-diagram-3-fill"></i></div> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">1944 - 1971</span><h3>Bretton Woods: Dollar Hegemony, Fraying Gold Link</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Bretton_Woods_Conference_delegates_July_1944_Colorized.jpg/600px-Bretton_Woods_Conference_delegates_July_1944_Colorized.jpg" alt="Bretton Woods Conference Delegates"> + <p>Post-WWII, the Bretton Woods system established the USD as the world reserve currency, pegged to gold at $35/ounce (convertible only for foreign central banks). Other currencies pegged to the USD. This "gold-exchange standard" relied heavily on US commitment to maintain gold backing.</p> + <p class="quantitative-detail"><strong>Fatal Flaw (Triffin Dilemma):</strong> Increasing global demand for USD reserves required the US to run persistent balance of payments deficits, undermining confidence in the dollar's gold backing.</p> + </div></div> + </div> + <div class="timeline-item"> + <div class="timeline-icon"><i class="bi bi-door-closed-fill"></i></div> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">August 15, 1971</span><h3>Nixon Closes the Gold Window</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Richard_Nixon_pardons_turkey_1971.jpg/600px-Richard_Nixon_pardons_turkey_1971.jpg" alt="Richard Nixon"> + <p>Facing dwindling gold reserves due to foreign redemptions, President Nixon "temporarily" suspends USD convertibility into gold. This act definitively ends any formal link between the global monetary system and gold, launching the era of pure fiat money worldwide.</p> + <p class="currency-detail"><strong>The Great Unraveling:</strong> Marks the final stage in the centuries-long process of states detaching money from physical scarcity.</p> + </div></div> + </div> + <div class="timeline-item"> + <div class="timeline-icon"><i class="bi bi-infinity"></i></div> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">1971 - Present</span><h3>The Age of Pure Fiat & Its Manifestations</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Zimbabwe_%24100_trillion_2009_Obverse.jpg/600px-Zimbabwe_%24100_trillion_2009_Obverse.jpg" alt="Zimbabwe $100 Trillion Banknote"> + <p>National currencies (USD, EUR, JPY, etc.) operate without intrinsic backing. This era is characterized by:</p> + <ul> + <li><strong>Persistent Inflation:</strong> Continuous erosion of purchasing power as a feature, not a bug.</li> + <li><strong>Credit Expansion & Debt Cycles:</strong> Unconstrained money creation fuels unsustainable booms and inevitable busts.</li> + <li><strong>Hyperinflationary Episodes:</strong> Numerous countries (e.g., Zimbabwe, Venezuela, Argentina, Lebanon) demonstrate fiat's terminal trajectory when abused.</li> + <li><strong>Central Bank Dominance:</strong> Monetary policy becomes a primary tool for economic management, often with distorting effects.</li> + </ul> + <p class="quantitative-detail"><strong>Purchasing Power Lost:</strong> By 2023, the US Dollar had lost approximately 97-98% of its 1913 (pre-Federal Reserve) purchasing power. A majority of this loss accelerated post-1971.</p> + </div></div> + </div> + </div> + + <!-- ERA VI --> + <div id="standard-digital-sound" class="standard-section standard-digital-sound"> + <div class="standard-title-wrapper"> + <h2 class="standard-title">VI. Digital Sound Money: Bitcoin</h2> + <button class="btn btn-sm btn-outline-secondary intro-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#introDigital" aria-expanded="false" aria-controls="introDigital"> + <i class="bi bi-info-circle"></i> Intro + </button> + </div> + <div class="collapse era-intro" id="introDigital"> + <p>In response to the inherent instability and inflationary nature of fiat currencies, the digital age has produced a novel invention: Bitcoin. It represents a potential return to the principles of sound money—scarcity, difficulty of production, and resistance to censorship or debasement—but in a purely digital, globally accessible form, independent of state control.</p> + </div> + <div class="timeline-item"> + <div class="timeline-icon"><i class="bi bi-puzzle-fill"></i></div> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">2008-2009</span><h3>Bitcoin's Genesis: A Solution to Fiat's Flaws</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Bitcoin.svg/400px-Bitcoin.svg.png" alt="Bitcoin Logo"> + <p>Satoshi Nakamoto publishes the Bitcoin whitepaper (2008) and launches the network (Jan 2009). The Genesis Block contains the message: "The Times 03/Jan/2009 Chancellor on brink of second bailout for banks," a direct critique of the fiat system's instability.</p> + <p class="currency-detail"><strong>Core Innovation:</strong> A decentralized, peer-to-peer electronic cash system with a strictly limited supply of 21 million coins, enforced by a distributed consensus mechanism (Proof-of-Work).</p> + </div></div> + </div> + <div class="timeline-item"> + <div class="timeline-icon"><i class="bi bi-shield-check"></i></div> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">2010 - 2017</span><h3>Early Growth, Challenges & Protocol Resilience</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Bitcoin_Transaction_Visualisation.gif/600px-Bitcoin_Transaction_Visualisation.gif" alt="Bitcoin Transaction Visualization"> + <ul> + <li><strong>First Transactions:</strong> Pizza for 10,000 BTC establishes early exchange value.</li> + <li><strong>Exchange Hacks (e.g., Mt. Gox):</strong> Highlight risks of custodial solutions, reinforcing "not your keys, not your coins."</li> + <li><strong>Blocksize Wars & SegWit (2017):</strong> Demonstrates protocol's resistance to contentious changes and ability to upgrade via community consensus, preserving its core properties.</li> + </ul> + </div></div> + </div> + <div class="timeline-item"> + <div class="timeline-icon"><i class="bi bi-graph-up-arrow"></i></div> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">2012, 2016, 2020, 2024...</span><h3>The Halvings: Programmatic Scarcity in Action</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Bitcoin_Block_Reward_Halving_Schedule_Logarithmic.png/600px-Bitcoin_Block_Reward_Halving_Schedule_Logarithmic.png" alt="Bitcoin Halving Schedule Chart"> + <p>Approximately every four years, the rate of new bitcoin creation ("block reward") is halved. This programmatic reduction in supply issuance contrasts sharply with fiat currencies' potential for unlimited creation, reinforcing Bitcoin's "digital gold" narrative and store of value proposition.</p> + </div></div> + </div> + <div class="timeline-item"> + <div class="timeline-icon"><i class="bi bi-building"></i></div> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">2020 - Present</span><h3>Institutional & Nation-State Recognition</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Flag_of_El_Salvador.svg/600px-Flag_of_El_Salvador.svg.png" alt="Flag of El Salvador"> + <ul> + <li><strong>Corporate Treasuries:</strong> Public companies (e.g., MicroStrategy) begin allocating capital to Bitcoin as a reserve asset, citing inflation hedging and store of value properties.</li> + <li><strong>El Salvador (2021):</strong> Becomes the first nation-state to adopt Bitcoin as legal tender, a landmark event signaling its potential as a monetary alternative outside traditional systems.</li> + <li><strong>Spot Bitcoin ETFs (USA, 2024):</strong> Approval by the SEC allows mainstream investors easier access to Bitcoin exposure, further legitimizing it as an asset class.</li> + </ul> + <p class="currency-detail"><strong>Shift:</strong> Bitcoin moves from niche interest to consideration within mainstream finance and geopolitics.</p> + </div></div> + </div> + <div class="timeline-item"> + <div class="timeline-icon"><i class="bi bi-shield-shaded"></i></div> + <div class="timeline-content-wrapper"><div class="timeline-content"> + <span class="year">Ongoing</span><h3>Bitcoin vs. CBDCs & Fiat System</h3> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Gavel_clip_art.svg/500px-Gavel_clip_art.svg.png" alt="Gavel - Representing Regulation/State"> + <p>As Bitcoin gains prominence, governments and central banks explore Central Bank Digital Currencies (CBDCs). CBDCs represent digitized fiat, retaining centralized control and inflationary potential, contrasting with Bitcoin's decentralized, scarce nature. The ongoing dialogue highlights the fundamental differences between state-controlled money and a non-sovereign, sound money alternative.</p> + <p class="currency-detail"><strong>Core Conflict:</strong> The battle between decentralized, hard money principles and centralized, elastic fiat systems in the digital age.</p> + </div></div> + </div> + </div> + + <div class="footer-note"> + <p>A Saifedean Ammous-inspired interpretation of monetary history. Focus on scarcity, soundness, and the consequences of monetary manipulation. Images: Wikimedia Commons.</p> + </div> + </div> + + <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> + <script> + document.addEventListener('DOMContentLoaded', function () { + const navLinks = document.querySelectorAll('.left-nav a[href^="#"]'); + const sections = document.querySelectorAll('.standard-section'); + + // Smooth scroll for nav links + navLinks.forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const targetId = this.getAttribute('href'); + const targetElement = document.querySelector(targetId); + if (targetElement) { + const navHeight = (window.innerWidth <= 1024 && window.innerWidth > 0) ? document.querySelector('.left-nav').offsetHeight : 0; + const elementPosition = targetElement.getBoundingClientRect().top; + const offsetPosition = elementPosition + window.pageYOffset - navHeight - 15; // Adjusted offset + + window.scrollTo({ top: offsetPosition, behavior: "smooth" }); + } + }); + }); + + // Active state for nav links on scroll + function setActiveLink() { + let current = ''; + const navHeight = (window.innerWidth <= 1024 && window.innerWidth > 0) ? document.querySelector('.left-nav').offsetHeight : 0; + // Adjust scrollOffset based on whether nav is top bar or side bar for more accurate active state + const scrollOffset = navHeight + (window.innerWidth > 1024 ? 80 : 30) ; + + sections.forEach(section => { + const sectionTop = section.offsetTop; + if (window.pageYOffset >= sectionTop - scrollOffset) { + current = section.getAttribute('id'); + } + }); + + navLinks.forEach((link) => { + link.classList.remove('active'); + if (link.getAttribute('href').substring(1) === current) { + link.classList.add('active'); + } + }); + } + + // Initial call and event listeners + setActiveLink(); + window.addEventListener('scroll', setActiveLink); + window.addEventListener('resize', setActiveLink); // Recalculate on resize for nav height changes + + // Ensure Bootstrap collapse works + var collapseElementList = [].slice.call(document.querySelectorAll('.collapse')) + var collapseList = collapseElementList.map(function (collapseEl) { + return new bootstrap.Collapse(collapseEl, { toggle: false }) // Initialize with toggle false + }); + }); + </script> +</body> +</html> \ No newline at end of file