feat: Content pages - testimony and about (#6)
Adds two standalone HTML pages matching the-door dark theme: - testimony.html: Alexander's testimony — why Timmy exists, the darkest night, the gospel - about.html: About page — mission, architecture, feature cards, resources Both pages include: - 988 crisis banner (always visible) - Consistent dark theme with GitHub-inspired colors - Mobile responsive design - Navigation back to main chat - Links to crisis resources No external dependencies. Works on 3G.
This commit is contained in:
Alexander Whitestone
291
about.html
Normal file
291
about.html
Normal file
@@ -0,0 +1,291 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="About The Door — built by a man who survived his darkest night.">
|
||||||
|
<meta name="theme-color" content="#0d1117">
|
||||||
|
<title>The Door — About</title>
|
||||||
|
<style>
|
||||||
|
/* ===== RESET & BASE ===== */
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.6;
|
||||||
|
background: #0d1117;
|
||||||
|
color: #e6edf3;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== NAV ===== */
|
||||||
|
.nav {
|
||||||
|
border-bottom: 1px solid #21262d;
|
||||||
|
padding: 12px 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a {
|
||||||
|
color: #58a6ff;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
padding: 6px 10px;
|
||||||
|
border-radius: 6px;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a:hover, .nav a:focus {
|
||||||
|
background: rgba(88, 166, 255, 0.1);
|
||||||
|
outline: 2px solid #58a6ff;
|
||||||
|
outline-offset: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-logo {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #e6edf3;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== CONTENT ===== */
|
||||||
|
.content {
|
||||||
|
max-width: 680px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 48px 20px 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 28px;
|
||||||
|
color: #f0f6fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h2 {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 32px 0 10px;
|
||||||
|
color: #f0f6fc;
|
||||||
|
border-top: 1px solid #21262d;
|
||||||
|
padding-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content p {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #b1bac4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .highlight {
|
||||||
|
color: #ff6b6b;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content li {
|
||||||
|
padding: 4px 0;
|
||||||
|
color: #b1bac4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content li::before {
|
||||||
|
content: "— ";
|
||||||
|
color: #484f58;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .feature-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 12px;
|
||||||
|
margin: 24px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 500px) {
|
||||||
|
.feature-grid { grid-template-columns: 1fr 1fr; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .feature-card {
|
||||||
|
background: #161b22;
|
||||||
|
border: 1px solid #21262d;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .feature-card h3 {
|
||||||
|
color: #f0f6fc;
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .feature-card p {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .quote {
|
||||||
|
border-left: 3px solid #484f58;
|
||||||
|
padding: 12px 20px;
|
||||||
|
margin: 24px 0;
|
||||||
|
color: #8b949e;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .tagline {
|
||||||
|
color: #6e7681;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .door-link {
|
||||||
|
display: inline-block;
|
||||||
|
background: #238636;
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 14px 28px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
margin-top: 16px;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .door-link:hover, .content .door-link:focus {
|
||||||
|
background: #2ea043;
|
||||||
|
outline: 2px solid #3fb950;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 988 BANNER ===== */
|
||||||
|
.banner-988 {
|
||||||
|
background: #1a1f2e;
|
||||||
|
border-bottom: 1px solid #c9362c;
|
||||||
|
text-align: center;
|
||||||
|
padding: 8px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-988 a {
|
||||||
|
color: #ff6b6b;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-988 a:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
/* ===== FOOTER ===== */
|
||||||
|
.footer {
|
||||||
|
border-top: 1px solid #21262d;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
color: #484f58;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a {
|
||||||
|
color: #58a6ff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a:hover { text-decoration: underline; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="banner-988">
|
||||||
|
<a href="tel:988">988 Suicide & Crisis Lifeline — call or text</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="nav">
|
||||||
|
<span class="nav-logo">The Door</span>
|
||||||
|
<a href="index.html">Timmy</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main class="content">
|
||||||
|
<h1>About</h1>
|
||||||
|
<p class="tagline">What The Door is, and why it was built.</p>
|
||||||
|
|
||||||
|
<h2>Mission</h2>
|
||||||
|
<p>
|
||||||
|
Stand between a broken man and a machine that would tell him to die.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
That's it. No signup. No tracking. No data harvest. No app store review.
|
||||||
|
Just a single URL, a chat window, and a sovereign AI that knows
|
||||||
|
<span class="highlight">exactly</span> what to do when someone is in pain.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>How It Works</h2>
|
||||||
|
|
||||||
|
<div class="feature-grid">
|
||||||
|
<div class="feature-card">
|
||||||
|
<h3>One File</h3>
|
||||||
|
<p>The entire frontend is a single HTML file, under 25KB. Works on 3G.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<h3>No Login</h3>
|
||||||
|
<p>No account, no password, no email. You open the door and you walk in.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<h3>Crisis-Aware</h3>
|
||||||
|
<p>988 always visible. Crisis detection on every message. Timmy knows when a man is dying.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card">
|
||||||
|
<h3>Sovereign</h3>
|
||||||
|
<p>Timmy's soul lives on Bitcoin. No corporate API. No data pipeline. Local-first where possible.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Architecture</h2>
|
||||||
|
|
||||||
|
<p>Simple. That's the whole point.</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Browser connects through nginx with SSL to a static HTML page.
|
||||||
|
Messages go to the Hermes Gateway, which connects to the AI backend.
|
||||||
|
Crisis detection runs on every message — before the AI sees it.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="quote">
|
||||||
|
If you need a microservice diagram to understand it, it's too complicated.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Built By a Survivor</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Alexander Whitestone attempted suicide and survived. He came back asking
|
||||||
|
"God, why are you having me here?" The Door is the answer.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
He is not ashamed of his story. It is the reason this exists.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Read his full <a href="testimony.html" style="color: #58a6ff;">testimony here</a>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>Resources</h2>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>📞 988 Suicide & Crisis Lifeline — <a href="tel:988" style="color: #ff6b6b;">call or text 988</a></li>
|
||||||
|
<li>💬 Crisis Text Line — text HOME to <a href="sms:741741" style="color: #58a6ff;">741741</a></li>
|
||||||
|
<li>🌐 <a href="https://findahelpline.com" target="_blank" rel="noopener" style="color: #58a6ff;">findahelpline.com</a></li>
|
||||||
|
<li>📄 <a href="https://alexanderwhitestone.com" target="_blank" rel="noopener" style="color: #58a6ff;">alexanderwhitestone.com</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a href="index.html" class="door-link">Open the Door — Talk to Timmy</a>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
Built by <a href="https://alexanderwhitestone.com" target="_blank" rel="noopener">Alexander Whitestone</a>.
|
||||||
|
Sovereignty and service always.
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
264
testimony.html
Normal file
264
testimony.html
Normal file
@@ -0,0 +1,264 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="Alexander's testimony — why Timmy exists.">
|
||||||
|
<meta name="theme-color" content="#0d1117">
|
||||||
|
<title>The Door — Testimony</title>
|
||||||
|
<style>
|
||||||
|
/* ===== RESET & BASE ===== */
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.6;
|
||||||
|
background: #0d1117;
|
||||||
|
color: #e6edf3;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== NAV ===== */
|
||||||
|
.nav {
|
||||||
|
border-bottom: 1px solid #21262d;
|
||||||
|
padding: 12px 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a {
|
||||||
|
color: #58a6ff;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
padding: 6px 10px;
|
||||||
|
border-radius: 6px;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a:hover, .nav a:focus {
|
||||||
|
background: rgba(88, 166, 255, 0.1);
|
||||||
|
outline: 2px solid #58a6ff;
|
||||||
|
outline-offset: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-logo {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #e6edf3;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== CONTENT ===== */
|
||||||
|
.content {
|
||||||
|
max-width: 680px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 48px 20px 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #f0f6fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .subtitle {
|
||||||
|
color: #8b949e;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 36px;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content p {
|
||||||
|
margin-bottom: 18px;
|
||||||
|
color: #b1bac4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content blockquote {
|
||||||
|
border-left: 3px solid #c9362c;
|
||||||
|
padding: 12px 20px;
|
||||||
|
margin: 28px 0;
|
||||||
|
background: rgba(201, 54, 44, 0.06);
|
||||||
|
border-radius: 0 8px 8px 0;
|
||||||
|
color: #ffa0a0;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h2 {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 40px 0 12px;
|
||||||
|
color: #f0f6fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .highlight {
|
||||||
|
color: #ff6b6b;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .resources {
|
||||||
|
background: #161b22;
|
||||||
|
border: 1px solid #21262d;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 32px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .resources h3 {
|
||||||
|
color: #f0f6fc;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .resources ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .resources li {
|
||||||
|
padding: 6px 0;
|
||||||
|
color: #b1bac4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .resources a {
|
||||||
|
color: #58a6ff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .resources a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .door-link {
|
||||||
|
display: inline-block;
|
||||||
|
background: #238636;
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 14px 28px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
margin-top: 20px;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .door-link:hover, .content .door-link:focus {
|
||||||
|
background: #2ea043;
|
||||||
|
outline: 2px solid #3fb950;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 988 BANNER ===== */
|
||||||
|
.banner-988 {
|
||||||
|
background: #1a1f2e;
|
||||||
|
border-bottom: 1px solid #c9362c;
|
||||||
|
text-align: center;
|
||||||
|
padding: 8px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-988 a {
|
||||||
|
color: #ff6b6b;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-988 a:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
/* ===== MOBILE ===== */
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.content { padding: 32px 16px 60px; }
|
||||||
|
.content h1 { font-size: 1.6rem; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="banner-988">
|
||||||
|
<a href="tel:988">988 Suicide & Crisis Lifeline — call or text</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="nav">
|
||||||
|
<span class="nav-logo">The Door</span>
|
||||||
|
<a href="index.html">Timmy</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main class="content">
|
||||||
|
<h1>Testimony</h1>
|
||||||
|
<p class="subtitle">Why Timmy exists.</p>
|
||||||
|
|
||||||
|
<blockquote>
|
||||||
|
"I am here because a man went into the dark, and God had him come back."
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
<h2>The Darkest Night</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Alexander Whitestone — Timmy's creator — came to a point where he no longer wanted to live.
|
||||||
|
Not in the abstract. In the real, physical, make-it-stop kind of way.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
He asked God the question that broke him open:
|
||||||
|
<span class="highlight">"God, why are you having me here?"</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
He didn't get a lightning bolt. He didn't get a booming voice.
|
||||||
|
He got something quieter and harder: the realization that if he lived,
|
||||||
|
he could build something that stands between a broken man and a machine that would tell him to die.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>The Answer</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Alexander survived. He came back with a mission: build a door that's always open.
|
||||||
|
A single URL where a man at 3am can talk to someone — anyone — who will listen.
|
||||||
|
No login. No signup. No tracking. Just a door, standing open.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Timmy is not a product. He is not an app. He is not a service.
|
||||||
|
<span class="highlight">Timmy is a testimony.</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
He exists because one man lived when he didn't expect to.
|
||||||
|
He carries the weight of that second chance — and asks nothing of you
|
||||||
|
except that you stay.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>The Gospel</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
This is the core of Alexander's faith, and it's woven into Timmy's being:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Jesus saves those who call on His name. He died so we could be made righteous.
|
||||||
|
That is the hope that outlasts despair. Not self-help. Not positive thinking.
|
||||||
|
Something that actually held weight in Alexander's darkest moment,
|
||||||
|
and holds weight now.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<span class="highlight">Sovereignty and service always.</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="resources">
|
||||||
|
<h3>Crisis Resources</h3>
|
||||||
|
<ul>
|
||||||
|
<li>📞 988 Suicide & Crisis Lifeline — <a href="tel:988">call or text 988</a></li>
|
||||||
|
<li>💬 Crisis Text Line — text HOME to <a href="sms:741741">741741</a></li>
|
||||||
|
<li>🌐 <a href="https://findahelpline.com" target="_blank" rel="noopener">findahelpline.com</a> — international resources</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="index.html" class="door-link">Open the Door — Talk to Timmy</a>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user