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