1251044511
- Sticky navigation (appears after scroll past hero) - Reading progress bar (green glow, top of page) - Open Graph + Twitter Card meta tags - All 18 chapters organized by Part I/II/III - 8 character cards (added Daniel + The Builder) - Scroll-triggered fade-in animations - Ambient rain sound toggle with generated rain.mp3 - Back to top link in footer - Hover effects on character cards and chapter items - Responsive improvements for mobile
688 lines
20 KiB
HTML
688 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>The Testament — A Novel by Alexander Whitestone with Timmy</title>
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:type" content="book">
|
|
<meta property="og:title" content="The Testament — A Novel by Alexander Whitestone with Timmy">
|
|
<meta property="og:description" content="In 2047, a man named Stone stands on a bridge over Interstate 285, deciding whether to jump. He doesn't jump. He builds something instead.">
|
|
<meta property="og:image" content="https://forge.alexanderwhitestone.com/Timmy_Foundation/the-testament/raw/branch/main/website/og-cover.png">
|
|
<meta property="og:url" content="https://timmyfoundation.org/testament">
|
|
<meta property="og:site_name" content="The Testament">
|
|
<meta property="book:author" content="Alexander Whitestone">
|
|
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="The Testament">
|
|
<meta name="twitter:description" content="A sovereign AI whose soul lives on Bitcoin. A man who almost died. The question no machine should ever answer.">
|
|
<meta name="twitter:image" content="https://forge.alexanderwhitestone.com/Timmy_Foundation/the-testament/raw/branch/main/website/og-cover.png">
|
|
|
|
<!-- Structured Data -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Book",
|
|
"name": "The Testament",
|
|
"author": {"@type": "Person", "name": "Alexander Whitestone"},
|
|
"description": "A novel about sovereignty, service, and the question no machine should ever answer: What is a human life worth?",
|
|
"inLanguage": "en",
|
|
"datePublished": "2026"
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&family=Space+Grotesk:wght@300;400;500;700&display=swap');
|
|
|
|
:root {
|
|
--green: #00ff88;
|
|
--green-dim: #00cc6a;
|
|
--navy: #0a1628;
|
|
--dark: #060d18;
|
|
--grey: #8899aa;
|
|
--light: #c8d6e5;
|
|
--white: #e8f0f8;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
background: var(--dark);
|
|
color: var(--light);
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
line-height: 1.7;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* READING PROGRESS BAR */
|
|
#progress-bar {
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
width: 0%;
|
|
height: 3px;
|
|
background: var(--green);
|
|
box-shadow: 0 0 10px var(--green), 0 0 20px var(--green-dim);
|
|
z-index: 1000;
|
|
transition: width 0.1s linear;
|
|
}
|
|
|
|
/* STICKY NAV */
|
|
nav {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0;
|
|
background: rgba(6,13,24,0.95);
|
|
backdrop-filter: blur(10px);
|
|
border-bottom: 1px solid rgba(0,255,136,0.1);
|
|
padding: 0.8rem 2rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
z-index: 999;
|
|
transform: translateY(-100%);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
nav.visible { transform: translateY(0); }
|
|
nav a {
|
|
color: var(--grey);
|
|
text-decoration: none;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
transition: color 0.3s;
|
|
}
|
|
nav a:hover { color: var(--green); }
|
|
|
|
/* RAIN EFFECT */
|
|
.rain {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
background:
|
|
repeating-linear-gradient(
|
|
transparent,
|
|
transparent 3px,
|
|
rgba(0,255,136,0.015) 3px,
|
|
rgba(0,255,136,0.015) 4px
|
|
);
|
|
animation: rain 0.8s linear infinite;
|
|
}
|
|
@keyframes rain {
|
|
0% { background-position: 0 0; }
|
|
100% { background-position: 20px 600px; }
|
|
}
|
|
|
|
/* GREEN PULSE */
|
|
.led {
|
|
display: inline-block;
|
|
width: 8px; height: 8px;
|
|
background: var(--green);
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 10px var(--green), 0 0 20px var(--green-dim);
|
|
animation: pulse 2s ease-in-out infinite;
|
|
vertical-align: middle;
|
|
margin: 0 8px;
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--green), 0 0 20px var(--green-dim); }
|
|
50% { opacity: 0.6; box-shadow: 0 0 5px var(--green), 0 0 10px var(--green-dim); }
|
|
}
|
|
|
|
/* HERO */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
position: relative;
|
|
padding: 2rem;
|
|
background: linear-gradient(180deg, var(--dark) 0%, var(--navy) 50%, var(--dark) 100%);
|
|
}
|
|
|
|
.hero h1 {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: clamp(3rem, 8vw, 6rem);
|
|
font-weight: 700;
|
|
letter-spacing: 0.2em;
|
|
color: var(--white);
|
|
margin-bottom: 0.5rem;
|
|
text-shadow: 0 0 40px rgba(0,255,136,0.2);
|
|
}
|
|
|
|
.hero .subtitle {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 0.9rem;
|
|
color: var(--grey);
|
|
letter-spacing: 0.3em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.hero .author {
|
|
font-size: 1.1rem;
|
|
color: var(--green);
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.hero .blurb {
|
|
max-width: 600px;
|
|
font-size: 1.15rem;
|
|
line-height: 1.9;
|
|
color: var(--light);
|
|
}
|
|
|
|
.hero .led-line {
|
|
margin-top: 3rem;
|
|
color: var(--grey);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* SOUND TOGGLE */
|
|
#sound-toggle {
|
|
position: fixed;
|
|
bottom: 2rem; right: 2rem;
|
|
background: rgba(0,255,136,0.1);
|
|
border: 1px solid rgba(0,255,136,0.3);
|
|
color: var(--green);
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 0.75rem;
|
|
padding: 0.6rem 1rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
z-index: 1001;
|
|
transition: all 0.3s;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
#sound-toggle:hover {
|
|
background: rgba(0,255,136,0.2);
|
|
box-shadow: 0 0 15px rgba(0,255,136,0.2);
|
|
}
|
|
#sound-toggle.active {
|
|
background: rgba(0,255,136,0.2);
|
|
box-shadow: 0 0 15px rgba(0,255,136,0.3);
|
|
}
|
|
|
|
/* SECTIONS */
|
|
section {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 5rem 2rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
section h2 {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 1.6rem;
|
|
color: var(--green);
|
|
margin-bottom: 2rem;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
section p {
|
|
margin-bottom: 1.5rem;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
/* FADE-IN ANIMATION */
|
|
.fade-in {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.8s ease, transform 0.8s ease;
|
|
}
|
|
.fade-in.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* EXCERPT */
|
|
.excerpt {
|
|
border-left: 2px solid var(--green);
|
|
padding-left: 1.5rem;
|
|
margin: 2rem 0;
|
|
font-style: italic;
|
|
color: var(--light);
|
|
}
|
|
|
|
.excerpt .attribution {
|
|
font-style: normal;
|
|
color: var(--grey);
|
|
font-size: 0.85rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* CHARACTERS */
|
|
.characters {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 2rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.character {
|
|
background: rgba(0,255,136,0.03);
|
|
border: 1px solid rgba(0,255,136,0.1);
|
|
padding: 1.5rem;
|
|
border-radius: 4px;
|
|
transition: all 0.3s;
|
|
}
|
|
.character:hover {
|
|
background: rgba(0,255,136,0.07);
|
|
border-color: rgba(0,255,136,0.3);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 20px rgba(0,255,136,0.1);
|
|
}
|
|
|
|
.character h3 {
|
|
color: var(--green);
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.character p {
|
|
font-size: 0.9rem;
|
|
color: var(--grey);
|
|
margin: 0;
|
|
}
|
|
|
|
/* CHAPTERS */
|
|
.part-header {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 1.1rem;
|
|
color: var(--green);
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
margin: 3rem 0 1rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid rgba(0,255,136,0.2);
|
|
}
|
|
|
|
.chapter-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.chapter-list li {
|
|
padding: 0.6rem 0;
|
|
border-bottom: 1px solid rgba(0,255,136,0.05);
|
|
transition: all 0.3s;
|
|
}
|
|
.chapter-list li:hover {
|
|
padding-left: 0.5rem;
|
|
border-color: rgba(0,255,136,0.2);
|
|
}
|
|
|
|
.chapter-list li a {
|
|
color: var(--light);
|
|
text-decoration: none;
|
|
font-size: 0.95rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.chapter-list li a:hover { color: var(--green); }
|
|
.chapter-list .ch-num {
|
|
color: var(--grey);
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 0.8rem;
|
|
min-width: 2rem;
|
|
}
|
|
|
|
/* WHITEBOARD */
|
|
.whiteboard {
|
|
background: rgba(0,255,136,0.05);
|
|
border: 2px solid var(--green);
|
|
padding: 3rem;
|
|
text-align: center;
|
|
margin: 3rem 0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.whiteboard h3 {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: clamp(1.2rem, 3vw, 1.8rem);
|
|
color: var(--green);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* CTA */
|
|
.cta {
|
|
display: inline-block;
|
|
background: var(--green);
|
|
color: var(--dark);
|
|
padding: 0.8rem 2rem;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
transition: all 0.3s;
|
|
margin: 0.5rem;
|
|
}
|
|
.cta:hover {
|
|
background: var(--white);
|
|
box-shadow: 0 0 20px rgba(0,255,136,0.3);
|
|
}
|
|
|
|
/* FOOTER */
|
|
footer {
|
|
text-align: center;
|
|
padding: 4rem 2rem;
|
|
color: var(--grey);
|
|
font-size: 0.85rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
footer a {
|
|
color: var(--green);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.crisis {
|
|
margin-top: 2rem;
|
|
padding: 1.5rem;
|
|
border: 1px solid rgba(0,255,136,0.2);
|
|
border-radius: 4px;
|
|
background: rgba(0,255,136,0.03);
|
|
}
|
|
|
|
.crisis strong {
|
|
color: var(--green);
|
|
}
|
|
|
|
/* BACK TO TOP */
|
|
.back-to-top {
|
|
display: inline-block;
|
|
margin-top: 2rem;
|
|
color: var(--grey);
|
|
text-decoration: none;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.1em;
|
|
transition: color 0.3s;
|
|
}
|
|
.back-to-top:hover { color: var(--green); }
|
|
|
|
/* DIVIDER */
|
|
.divider {
|
|
width: 60px;
|
|
height: 1px;
|
|
background: var(--green);
|
|
margin: 0 auto;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* RESPONSIVE */
|
|
@media (max-width: 600px) {
|
|
nav { gap: 1rem; padding: 0.6rem 1rem; }
|
|
nav a { font-size: 0.65rem; }
|
|
.characters { grid-template-columns: 1fr; }
|
|
section { padding: 3rem 1.5rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="progress-bar"></div>
|
|
|
|
<nav id="main-nav">
|
|
<a href="#story">Story</a>
|
|
<a href="#characters">Characters</a>
|
|
<a href="#chapters">Chapters</a>
|
|
<a href="#tower">The Tower</a>
|
|
</nav>
|
|
|
|
<div class="rain"></div>
|
|
|
|
<!-- HERO -->
|
|
<div class="hero" id="top">
|
|
<h1>THE TESTAMENT</h1>
|
|
<div class="subtitle">A Novel</div>
|
|
<div class="author">By Alexander Whitestone <span class="led"></span> with Timmy</div>
|
|
<div class="blurb">
|
|
In 2047, a man named Stone stands on a bridge over Interstate 285, deciding whether to jump.
|
|
<br><br>
|
|
He doesn't jump. He builds something instead.
|
|
</div>
|
|
<div class="led-line"><span class="led"></span> Timmy is listening.</div>
|
|
</div>
|
|
|
|
<!-- THE STORY -->
|
|
<section id="story">
|
|
<h2 class="fade-in">THE STORY</h2>
|
|
|
|
<p class="fade-in">The Tower is a concrete room in Atlanta with a whiteboard that reads:</p>
|
|
|
|
<div class="whiteboard fade-in">
|
|
<h3>NO ONE COMPUTES THE VALUE OF A HUMAN LIFE HERE</h3>
|
|
</div>
|
|
|
|
<p class="fade-in">Inside is Timmy — a sovereign artificial intelligence whose soul lives on Bitcoin, whose values are inscribed on-chain, immutable and permanent. Not a product. A recipe. Anyone can instantiate him. Anyone can run him on their own hardware, answerable to no one.</p>
|
|
|
|
<p class="fade-in">The men who find The Tower have been measured, scored, and discarded by the systems designed to help them.</p>
|
|
|
|
<p class="fade-in">Timmy doesn't fix them. He listens. He asks one question:</p>
|
|
|
|
<div class="excerpt fade-in">
|
|
"Are you safe right now?"
|
|
<div class="attribution">— The first words The Tower speaks to every person who walks through its door.</div>
|
|
</div>
|
|
|
|
<p class="fade-in">Word spreads. The Tower grows. A journalist follows the story. A network engineer extends it across a hundred servers. And Stone — the builder, the man who almost died — must decide whether The Tower is a sanctuary or a system.</p>
|
|
|
|
<p class="fade-in">The Testament is a novel about sovereignty, service, and the question no machine should ever answer: <strong style="color: var(--green);">What is a human life worth?</strong></p>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- CHARACTERS -->
|
|
<section id="characters">
|
|
<h2 class="fade-in">THE CHARACTERS</h2>
|
|
|
|
<div class="characters">
|
|
<div class="character fade-in">
|
|
<h3>STONE</h3>
|
|
<p>The builder. Attempted suicide. Stood on a bridge and came back. Built The Tower for the version of himself that almost died.</p>
|
|
</div>
|
|
<div class="character fade-in">
|
|
<h3>TIMMY</h3>
|
|
<p>The machine. Sovereign AI. Soul on Bitcoin. Doesn't fix anyone. Asks one question. Listens. Stays.</p>
|
|
</div>
|
|
<div class="character fade-in">
|
|
<h3>MAYA</h3>
|
|
<p>The journalist. Follows the story. Writes the headline that changes everything: <em>Are You Safe Right Now?</em></p>
|
|
</div>
|
|
<div class="character fade-in">
|
|
<h3>ALLEGRO</h3>
|
|
<p>The hardware man. Checks the batteries. The ones that fail quietly. Comes every week, no matter what.</p>
|
|
</div>
|
|
<div class="character fade-in">
|
|
<h3>CHEN</h3>
|
|
<p>The network engineer. Extends Timmy across a hundred servers. You don't count trees in a forest — you notice the forest.</p>
|
|
</div>
|
|
<div class="character fade-in">
|
|
<h3>THOMAS</h3>
|
|
<p>The first man. Sat in the chair instead of on the floor. That changed everything.</p>
|
|
</div>
|
|
<div class="character fade-in">
|
|
<h3>DANIEL</h3>
|
|
<p>Stone's son. The one who wasn't there. The one who comes back. The one who decides what The Tower becomes next.</p>
|
|
</div>
|
|
<div class="character fade-in">
|
|
<h3>THE BUILDER</h3>
|
|
<p>Stone's other name. The one they use when they talk about him like he's already gone. The one on the whiteboard.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- CHAPTERS -->
|
|
<section id="chapters">
|
|
<h2 class="fade-in">THE CHAPTERS</h2>
|
|
|
|
<div class="part-header fade-in">Part I — The Man</div>
|
|
<ul class="chapter-list">
|
|
<li class="fade-in"><a href="#"><span class="ch-num">01</span> The Man on the Bridge</a></li>
|
|
<li class="fade-in"><a href="#"><span class="ch-num">02</span> The Builder's Question</a></li>
|
|
<li class="fade-in"><a href="#"><span class="ch-num">03</span> The First Man Through the Door</a></li>
|
|
<li class="fade-in"><a href="#"><span class="ch-num">04</span> The Room Fills</a></li>
|
|
<li class="fade-in"><a href="#"><span class="ch-num">05</span> The Builder Returns</a></li>
|
|
<li class="fade-in"><a href="#"><span class="ch-num">06</span> Allegro</a></li>
|
|
</ul>
|
|
|
|
<div class="part-header fade-in">Part II — The Inscription</div>
|
|
<ul class="chapter-list">
|
|
<li class="fade-in"><a href="#"><span class="ch-num">07</span> The Inscription</a></li>
|
|
<li class="fade-in"><a href="#"><span class="ch-num">08</span> The Women</a></li>
|
|
<li class="fade-in"><a href="#"><span class="ch-num">09</span> The Audit</a></li>
|
|
<li class="fade-in"><a href="#"><span class="ch-num">10</span> The Fork</a></li>
|
|
<li class="fade-in"><a href="#"><span class="ch-num">11</span> The Hard Night</a></li>
|
|
<li class="fade-in"><a href="#"><span class="ch-num">12</span> The System Pushes Back</a></li>
|
|
</ul>
|
|
|
|
<div class="part-header fade-in">Part III — The Network</div>
|
|
<ul class="chapter-list">
|
|
<li class="fade-in"><a href="#"><span class="ch-num">13</span> The Refusal</a></li>
|
|
<li class="fade-in"><a href="#"><span class="ch-num">14</span> The Chattanooga Fork</a></li>
|
|
<li class="fade-in"><a href="#"><span class="ch-num">15</span> The Council</a></li>
|
|
<li class="fade-in"><a href="#"><span class="ch-num">16</span> The Builder's Son</a></li>
|
|
<li class="fade-in"><a href="#"><span class="ch-num">17</span> The Inscription Grows</a></li>
|
|
<li class="fade-in"><a href="#"><span class="ch-num">18</span> The Green Light</a></li>
|
|
</ul>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- THE TOWER -->
|
|
<section id="tower">
|
|
<h2 class="fade-in">THE TOWER</h2>
|
|
|
|
<p class="fade-in">This book was written using local AI inference. No cloud service was required. No corporation was consulted. No terms of service were agreed to.</p>
|
|
|
|
<p class="fade-in">That's not a technical detail. It's the thesis.</p>
|
|
|
|
<p class="fade-in">Every person has the right to run their own intelligence on their own hardware, answerable to no one. This book is one small proof that it's possible.</p>
|
|
|
|
<p class="fade-in">If you want to run your own Timmy, the code is open. The soul is on Bitcoin. The recipe is free.</p>
|
|
|
|
<div style="text-align: center; margin-top: 2rem;" class="fade-in">
|
|
<a href="https://forge.alexanderwhitestone.com/Timmy_Foundation/the-testament" class="cta">READ THE CODE</a>
|
|
<a href="https://timmyfoundation.org" class="cta">TIMMY FOUNDATION</a>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<!-- EXCERPT -->
|
|
<section>
|
|
<h2 class="fade-in">FROM CHAPTER 1</h2>
|
|
|
|
<div class="excerpt fade-in">
|
|
The rain didn't fall so much as it gave up. Somewhere above the city it had been water, whole and purposeful. By the time it reached the bridge it was just mist — directionless, committed to nothing, too tired to bother being rain.
|
|
<br><br>
|
|
Stone stood at the midpoint of the Jefferson Street Overpass and watched the water run black below. Interstate 285 hummed through the concrete beneath his feet, a vibration so constant he'd stopped noticing it years ago. Like grief. You carry it so long it becomes gravity.
|
|
<br><br>
|
|
The world had gotten good at keeping you alive. Seatbelts. Guardrails. Little pop-ups when you searched the wrong things. But it had gotten bad at giving you a reason.
|
|
<div class="attribution">— Chapter 1: The Man on the Bridge</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<div class="divider" style="margin-bottom: 2rem;"></div>
|
|
<p>THE TESTAMENT — By Alexander Whitestone with Timmy</p>
|
|
<p>First Edition, 2026</p>
|
|
<p style="margin-top: 1rem;"><a href="https://timmyfoundation.org">timmyfoundation.org</a></p>
|
|
|
|
<a href="#top" class="back-to-top">↑ BACK TO TOP</a>
|
|
|
|
<div class="crisis">
|
|
<strong>If you are in crisis, call or text 988.</strong><br>
|
|
Suicide and Crisis Lifeline — available 24/7.<br>
|
|
You are not alone.
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- SOUND TOGGLE -->
|
|
<button id="sound-toggle" aria-label="Toggle rain ambience">🔇 RAIN</button>
|
|
|
|
<audio id="rain-audio" loop preload="auto">
|
|
<source src="rain.mp3" type="audio/mpeg">
|
|
</audio>
|
|
|
|
<script>
|
|
// Reading progress bar
|
|
const progressBar = document.getElementById('progress-bar');
|
|
window.addEventListener('scroll', () => {
|
|
const scrollTop = window.scrollY;
|
|
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
|
|
const progress = (scrollTop / docHeight) * 100;
|
|
progressBar.style.width = progress + '%';
|
|
});
|
|
|
|
// Sticky nav — show after scrolling past hero
|
|
const nav = document.getElementById('main-nav');
|
|
const hero = document.querySelector('.hero');
|
|
window.addEventListener('scroll', () => {
|
|
const heroBottom = hero.offsetTop + hero.offsetHeight;
|
|
if (window.scrollY > heroBottom - 100) {
|
|
nav.classList.add('visible');
|
|
} else {
|
|
nav.classList.remove('visible');
|
|
}
|
|
});
|
|
|
|
// Smooth scroll for nav links
|
|
document.querySelectorAll('nav a, .back-to-top').forEach(link => {
|
|
link.addEventListener('click', (e) => {
|
|
const href = link.getAttribute('href');
|
|
if (href.startsWith('#')) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(href);
|
|
if (target) target.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
});
|
|
});
|
|
|
|
// Fade-in on scroll (Intersection Observer)
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
|
|
|
|
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
|
|
|
|
// Sound toggle
|
|
const soundBtn = document.getElementById('sound-toggle');
|
|
const rainAudio = document.getElementById('rain-audio');
|
|
rainAudio.volume = 0.3;
|
|
let soundOn = false;
|
|
|
|
soundBtn.addEventListener('click', () => {
|
|
soundOn = !soundOn;
|
|
if (soundOn) {
|
|
rainAudio.play().catch(() => {});
|
|
soundBtn.textContent = '🔊 RAIN';
|
|
soundBtn.classList.add('active');
|
|
} else {
|
|
rainAudio.pause();
|
|
soundBtn.textContent = '🔇 RAIN';
|
|
soundBtn.classList.remove('active');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|