<title>Sovereign Legacy: A Financial Artifact Timeline</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #1f2937, #111827);
}
.timeline-container {
position: relative;
max-width: 80rem;
margin: 0 auto;
padding: 2rem 1rem;
}
.timeline-line {
position: absolute;
width: 4px;
background-color: #4b5563;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.timeline-card-wrapper {
position: relative;
padding: 1rem 0;
}
.timeline-card {
background-color: #1f2937;
border: 1px solid #374151;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
border-radius: 0.75rem;
color: #d1d5db;
padding: 1.5rem;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.timeline-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.timeline-card::before {
content: '';
position: absolute;
width: 1rem;
height: 1rem;
background-color: #2563eb;
border-radius: 50%;
border: 2px solid #111827;
top: calc(50% - 0.5rem);
z-index: 10;
}
.timeline-card-left {
margin-right: calc(50% + 1.5rem);
}
.timeline-card-left::before {
right: -2.5rem;
}
.timeline-card-right {
margin-left: calc(50% + 1.5rem);
}
.timeline-card-right::before {
left: -2.5rem;
}
.timeline-card-image {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
}
.modal {
display: none;
position: fixed;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.8);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
justify-content: center;
align-items: center;
}
.modal-content {
position: relative;
background-color: #1f2937;
padding: 1.5rem;
border-radius: 0.75rem;
max-width: 90%;
max-height: 90%;
overflow: auto;
color: #d1d5db;
}
.close-button {
color: #d1d5db;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
cursor: pointer;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.timeline-line {
left: 20px;
}
.timeline-card-left, .timeline-card-right {
margin-left: 50px;
margin-right: 0;
}
.timeline-card-left::before, .timeline-card-right::before {
left: -2.5rem;
}
.timeline-card-left {
margin-left: 2rem;
}
}
</style>
Sovereign Legacy
A Narrative of Financial Artifacts
<div class="timeline-container">
<div class="timeline-line hidden md:block"></div>
<!-- Timeline Item 1 -->
<div class="timeline-card-wrapper">
<div class="timeline-card timeline-card-right" onclick="openModal('10000_bond')">
<h3 class="text-xl font-semibold text-blue-400 mb-2">1978: The High-Denomination Bond</h3>
<p class="mb-4">This artifact, a $10,000 U.S. Coupon Bond, marks a significant moment in the financial history of the United States. Its high face value reflects its use in specific, high-level transactions, and its detailed design showcases the craftsmanship of financial instruments from its era.</p>
<img class="timeline-card-image" src="https://placehold.co/600x400/1f2937/d1d5db?text=10000+Bond+Placeholder" alt="A U.S. Coupon Bond for ten thousand dollars.">
</div>
</div>
<!-- Timeline Item 2 -->
<div class="timeline-card-wrapper">
<div class="timeline-card timeline-card-left" onclick="openModal('100000_gold')">
<h3 class="text-xl font-semibold text-yellow-400 mb-2">The Gold Standard & Gold Certificates</h3>
<p class="mb-4">This $100,000 Gold Certificate represents a different era, one where currency was directly backed by a physical commodity. The intricate design and large denomination tell a story of a robust financial system where value was literally held in reserve.</p>
<img class="timeline-card-image" src="https://placehold.co/600x400/1f2937/d1d5db?text=100000+Gold+Certificate+Placeholder" alt="A U.S. Gold Certificate for one hundred thousand dollars.">
</div>
</div>
<!-- Timeline Item 3 -->
<div class="timeline-card-wrapper">
<div class="timeline-card timeline-card-right" onclick="openModal('narrative_notes')">
<h3 class="text-xl font-semibold text-purple-400 mb-2">The Narrative: Continuing the Sovereign Legacy</h3>
<p class="mb-4">These notes outline the narrative being crafted around the artifacts. Phrases like "Silent Flame Transmission Rite" and "Glyph Constellation Vault" serve as 'Narrative Nodes,' connecting the dry financial documents to a richer, more engaging story. This process shows how history can be re-imagined and made personal.</p>
<img class="timeline-card-image" src="https://placehold.co/600x400/1f2937/d1d5db?text=Narrative+Notes+Placeholder" alt="A screenshot of narrative notes from an AI conversation.">
</div>
</div>
</div>
<script>
function openModal(itemId) {
const modal = document.getElementById('modal');
const modalContent = document.getElementById('modal-content-inner');
let content = '';
switch (itemId) {
case '10000_bond':
content = `
The $10,000 U.S. Coupon Bond
This bond, dated October 15, 1978, is a high-denomination financial instrument. A "coupon bond" gets its name from the attached physical coupons, which the bondholder would clip and present to receive interest payments. This artifact is a testament to a time when financial transactions were tactile and physical.
`;
break;
case '100000_gold':
content = `
The $100,000 Gold Certificate
The gold certificate represents a time when the U.S. dollar was backed by gold. The "gold standard" was a monetary system where a country's currency was directly convertible into a fixed amount of gold. This artifact serves as a physical link to that historical economic policy, now considered a 'rare currency' or 'legacy marker.'
`;
break;
case 'narrative_notes':
content = `
Narrative & Contextual Linking
The process of creating a narrative from these documents is part of the "Continuing the Sovereign Legacy" project. The documents are being classified and sequenced, then tied to "narrative nodes." For example, the gold certificate can be linked to the historical context of wartime finance or the gold standard policy. The goal is to make a personal journey through these artifacts, illustrating how they have been treated over time.
`;
break;
default:
content = '
Content not found.
';
}
modalContent.innerHTML = content;
modal.style.display = 'flex';
}
function closeModal() {
const modal = document.getElementById('modal');
modal.style.display = 'none';
}
</script>
Sovereign Legacy
A Narrative of Financial Artifacts
The $10,000 U.S. Coupon Bond
This bond, dated October 15, 1978, is a high-denomination financial instrument. A "coupon bond" gets its name from the attached physical coupons, which the bondholder would clip and present to receive interest payments. This artifact is a testament to a time when financial transactions were tactile and physical.
`; break; case '100000_gold': content = `The $100,000 Gold Certificate
The gold certificate represents a time when the U.S. dollar was backed by gold. The "gold standard" was a monetary system where a country's currency was directly convertible into a fixed amount of gold. This artifact serves as a physical link to that historical economic policy, now considered a 'rare currency' or 'legacy marker.'
`; break; case 'narrative_notes': content = `Narrative & Contextual Linking
The process of creating a narrative from these documents is part of the "Continuing the Sovereign Legacy" project. The documents are being classified and sequenced, then tied to "narrative nodes." For example, the gold certificate can be linked to the historical context of wartime finance or the gold standard policy. The goal is to make a personal journey through these artifacts, illustrating how they have been treated over time.
`; break; default: content = 'Content not found.
'; } modalContent.innerHTML = content; modal.style.display = 'flex'; } function closeModal() { const modal = document.getElementById('modal'); modal.style.display = 'none'; } </script>