242 lines
6.4 KiB
HTML
242 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="theme-color" content="#0d1117">
|
|
<meta name="description" content="Offline crisis resources from The Door. Call or text 988 for immediate help.">
|
|
<title>Offline Crisis Resources | The Door</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: dark;
|
|
--bg: #0d1117;
|
|
--panel: #161b22;
|
|
--panel-urgent: #1c1210;
|
|
--border: #30363d;
|
|
--accent: #c9362c;
|
|
--accent-soft: #ff6b6b;
|
|
--text: #e6edf3;
|
|
--muted: #8b949e;
|
|
--safe: #2ea043;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
main {
|
|
max-width: 760px;
|
|
margin: 0 auto;
|
|
padding: 24px 16px 48px;
|
|
}
|
|
|
|
.status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 12px;
|
|
border-radius: 999px;
|
|
background: rgba(201, 54, 44, 0.15);
|
|
border: 1px solid rgba(255, 107, 107, 0.35);
|
|
color: var(--accent-soft);
|
|
font-size: 0.9rem;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
h1 {
|
|
font-size: clamp(2rem, 6vw, 2.75rem);
|
|
line-height: 1.15;
|
|
margin: 0 0 12px;
|
|
}
|
|
|
|
.lede {
|
|
color: var(--muted);
|
|
font-size: 1.05rem;
|
|
margin: 0 0 28px;
|
|
}
|
|
|
|
.urgent-box,
|
|
.panel {
|
|
border-radius: 18px;
|
|
padding: 20px;
|
|
margin-bottom: 18px;
|
|
border: 1px solid var(--border);
|
|
background: var(--panel);
|
|
}
|
|
|
|
.urgent-box {
|
|
background: linear-gradient(180deg, rgba(201, 54, 44, 0.18), rgba(28, 18, 16, 0.95));
|
|
border-color: rgba(255, 107, 107, 0.35);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.2rem;
|
|
margin: 0 0 12px;
|
|
}
|
|
|
|
.actions {
|
|
display: grid;
|
|
gap: 12px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
gap: 8px;
|
|
min-height: 52px;
|
|
padding: 14px 18px;
|
|
border-radius: 12px;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
background: var(--accent);
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.action-btn.secondary {
|
|
background: #1f6feb;
|
|
}
|
|
|
|
.action-btn.retry {
|
|
background: transparent;
|
|
color: var(--text);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.action-btn:focus,
|
|
.action-btn:hover,
|
|
button.action-btn:hover,
|
|
button.action-btn:focus {
|
|
outline: 3px solid rgba(255, 107, 107, 0.4);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
ul, ol {
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
li + li {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.grounding-steps li::marker {
|
|
color: var(--accent-soft);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.small {
|
|
color: var(--muted);
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
gap: 18px;
|
|
}
|
|
|
|
@media (min-width: 700px) {
|
|
.grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div class="status" role="status" aria-live="polite">
|
|
<span class="status-dot" aria-hidden="true"></span>
|
|
<span id="connection-status-text">Offline crisis resources are ready on this device.</span>
|
|
</div>
|
|
|
|
<h1>You are not alone right now.</h1>
|
|
<p class="lede">
|
|
Your connection is weak or offline. These crisis resources are saved locally so you can still reach help.
|
|
</p>
|
|
|
|
<section class="urgent-box" aria-labelledby="urgent-help-title">
|
|
<h2 class="section-title" id="urgent-help-title">Immediate help</h2>
|
|
<p>If you might act on suicidal thoughts, contact a real person now. Stay with another person if you can.</p>
|
|
<div class="actions">
|
|
<a class="action-btn" href="tel:988" aria-label="Call 988 now">Call 988 now</a>
|
|
<a class="action-btn secondary" href="sms:741741&body=HOME" aria-label="Text HOME to 741741 for Crisis Text Line">Text HOME to 741741 — Crisis Text Line</a>
|
|
<button class="action-btn retry" id="retry-connection" type="button">Retry connection</button>
|
|
</div>
|
|
<p class="small" style="margin-top: 14px;">If you are in immediate danger or have already taken action, call emergency services now.</p>
|
|
</section>
|
|
|
|
<div class="grid">
|
|
<section class="panel" aria-labelledby="grounding-title">
|
|
<h2 class="section-title" id="grounding-title">5-4-3-2-1 grounding</h2>
|
|
<ol class="grounding-steps">
|
|
<li>5 things you can see</li>
|
|
<li>4 things you can feel</li>
|
|
<li>3 things you can hear</li>
|
|
<li>2 things you can smell</li>
|
|
<li>1 thing you can taste</li>
|
|
</ol>
|
|
<p class="small" style="margin-top: 14px;">Say each one out loud if you can. Slow is okay.</p>
|
|
</section>
|
|
|
|
<section class="panel" aria-labelledby="next-steps-title">
|
|
<h2 class="section-title" id="next-steps-title">Next small steps</h2>
|
|
<ul>
|
|
<li>Put some distance between yourself and anything you could use to hurt yourself.</li>
|
|
<li>Move closer to another person, a front desk, or a public place if possible.</li>
|
|
<li>Drink water or hold something cold in your hand.</li>
|
|
<li>Breathe in for 4, hold for 4, out for 6. Repeat 5 times.</li>
|
|
<li>Text or call one safe person and say: “I need you with me right now.”</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="panel" aria-labelledby="hope-title">
|
|
<h2 class="section-title" id="hope-title">Stay through the next ten minutes</h2>
|
|
<p>Do not solve your whole life right now. Stay for the next breath. Then the next one.</p>
|
|
<p class="small">If the connection comes back, you can return to The Door chat. Until then, the fastest path to a real person is still 988.</p>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
(function () {
|
|
var statusText = document.getElementById('connection-status-text');
|
|
var retryButton = document.getElementById('retry-connection');
|
|
|
|
function updateStatus() {
|
|
statusText.textContent = navigator.onLine
|
|
? 'Connection is back. You can reopen chat now.'
|
|
: 'Offline crisis resources are ready on this device.';
|
|
}
|
|
|
|
retryButton.addEventListener('click', function () {
|
|
if (navigator.onLine) {
|
|
window.location.href = '/';
|
|
return;
|
|
}
|
|
window.location.reload();
|
|
});
|
|
|
|
window.addEventListener('online', updateStatus);
|
|
window.addEventListener('offline', updateStatus);
|
|
updateStatus();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|