Compare commits
1 Commits
queue/38-1
...
dawn/41-17
| Author | SHA1 | Date | |
|---|---|---|---|
|
5dd69e83d8 |
2
Makefile
2
Makefile
@@ -34,7 +34,7 @@ deploy-bash:
|
||||
|
||||
push:
|
||||
rsync -avz --exclude='.git' --exclude='deploy' \
|
||||
index.html manifest.json sw.js about.html testimony.html system-prompt.txt \
|
||||
index.html manifest.json sw.js about.html crisis-offline.html testimony.html system-prompt.txt \
|
||||
root@$(VPS):/var/www/the-door/
|
||||
ssh root@$(VPS) "chown -R www-data:www-data /var/www/the-door"
|
||||
|
||||
|
||||
241
crisis-offline.html
Normal file
241
crisis-offline.html
Normal file
@@ -0,0 +1,241 @@
|
||||
<!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>
|
||||
140
index.html
140
index.html
@@ -80,64 +80,6 @@ html, body {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
#chat-header {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 10px 12px;
|
||||
background: #10161d;
|
||||
border-bottom: 1px solid #21262d;
|
||||
}
|
||||
|
||||
.chat-header-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#chat-header-title {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #e6edf3;
|
||||
}
|
||||
|
||||
#chat-header-subtitle {
|
||||
font-size: 0.75rem;
|
||||
color: #8b949e;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.safety-link-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
min-height: 40px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #30363d;
|
||||
background: transparent;
|
||||
color: #8b949e;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s, border-color 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
.safety-link-btn:hover,
|
||||
.safety-link-btn:focus {
|
||||
color: #e6edf3;
|
||||
border-color: #58a6ff;
|
||||
background: rgba(88, 166, 255, 0.08);
|
||||
outline: 2px solid rgba(88, 166, 255, 0.35);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.safety-link-btn svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
@@ -637,19 +579,6 @@ html, body {
|
||||
#chat-area { padding: 20px 24px 8px; }
|
||||
#input-area { padding: 10px 24px; }
|
||||
#banner-988 a { font-size: 0.95rem; }
|
||||
#chat-header { padding: 12px 24px; }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
#chat-header {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.safety-link-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
@@ -713,24 +642,13 @@ html, body {
|
||||
<a href="sms:741741&body=HOME" class="crisis-btn" aria-label="Text HOME to 741741 for Crisis Text Line">
|
||||
Text HOME to 741741
|
||||
</a>
|
||||
<button class="crisis-btn" id="crisis-safety-plan-btn" type="button" aria-label="Open my safety plan" aria-controls="safety-plan-modal" aria-haspopup="dialog" style="background:#3d3d3d;">
|
||||
<button class="crisis-btn" id="crisis-safety-plan-btn" aria-label="Open my safety plan" style="background:#3d3d3d;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
|
||||
My Safety Plan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="chat-header" role="region" aria-label="Chat tools">
|
||||
<div class="chat-header-copy">
|
||||
<p id="chat-header-title">Talk to Timmy</p>
|
||||
<p id="chat-header-subtitle">No login. No tracking. Just someone to listen.</p>
|
||||
</div>
|
||||
<button id="chat-safety-plan-btn" class="safety-link-btn" type="button" aria-label="Open my safety plan" aria-controls="safety-plan-modal" aria-haspopup="dialog">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
|
||||
<span>Safety plan</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Chat messages -->
|
||||
<div id="chat-area" role="log" aria-label="Chat messages" aria-live="polite" tabindex="0">
|
||||
<!-- Messages inserted here -->
|
||||
@@ -763,7 +681,7 @@ html, body {
|
||||
<!-- Footer -->
|
||||
<footer id="footer">
|
||||
<a href="/about" aria-label="About The Door">about</a>
|
||||
<button id="safety-plan-btn" type="button" aria-label="Open My Safety Plan" aria-controls="safety-plan-modal" aria-haspopup="dialog">my safety plan</button>
|
||||
<button id="safety-plan-btn" aria-label="Open My Safety Plan">my safety plan</button>
|
||||
<button id="clear-chat-btn" aria-label="Clear chat history">clear chat</button>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -783,16 +701,16 @@ html, body {
|
||||
</div>
|
||||
|
||||
<!-- Safety Plan Modal -->
|
||||
<div id="safety-plan-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="safety-plan-title" aria-hidden="true">
|
||||
<div id="safety-plan-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="safety-plan-title">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 id="safety-plan-title">My Safety Plan</h2>
|
||||
<button class="close-modal" id="close-safety-plan" type="button" aria-label="Close modal">
|
||||
<button class="close-modal" id="close-safety-plan" aria-label="Close modal">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p id="safety-plan-description" style="font-size: 0.85rem; color: #8b949e; margin-bottom: 16px;">This plan is saved only on your device. No one else can see it.</p>
|
||||
<p style="font-size: 0.85rem; color: #8b949e; margin-bottom: 16px;">This plan is saved only on your device. No one else can see it.</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="sp-warning-signs">1. Warning signs (thoughts, moods, behaviors)</label>
|
||||
@@ -820,8 +738,8 @@ html, body {
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" id="cancel-safety-plan" type="button">Cancel</button>
|
||||
<button class="btn btn-primary" id="save-safety-plan" type="button">Save Plan</button>
|
||||
<button class="btn btn-secondary" id="cancel-safety-plan">Cancel</button>
|
||||
<button class="btn btn-primary" id="save-safety-plan">Save Plan</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -894,8 +812,7 @@ Sovereignty and service always.`;
|
||||
var statusText = document.getElementById('status-text');
|
||||
|
||||
// Safety Plan Elements
|
||||
var chatSafetyPlanBtn = document.getElementById('chat-safety-plan-btn');
|
||||
var footerSafetyPlanBtn = document.getElementById('safety-plan-btn');
|
||||
var safetyPlanBtn = document.getElementById('safety-plan-btn');
|
||||
var crisisSafetyPlanBtn = document.getElementById('crisis-safety-plan-btn');
|
||||
var safetyPlanModal = document.getElementById('safety-plan-modal');
|
||||
var closeSafetyPlan = document.getElementById('close-safety-plan');
|
||||
@@ -908,7 +825,6 @@ Sovereignty and service always.`;
|
||||
var isStreaming = false;
|
||||
var overlayTimer = null;
|
||||
var crisisPanelShown = false;
|
||||
var lastSafetyPlanTrigger = null;
|
||||
|
||||
// ===== SERVICE WORKER =====
|
||||
if ('serviceWorker' in navigator) {
|
||||
@@ -1201,50 +1117,25 @@ Sovereignty and service always.`;
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
function openSafetyPlanModal(trigger) {
|
||||
lastSafetyPlanTrigger = trigger || document.activeElement;
|
||||
safetyPlanBtn.addEventListener('click', function() {
|
||||
loadSafetyPlan();
|
||||
safetyPlanModal.classList.add('active');
|
||||
safetyPlanModal.setAttribute('aria-hidden', 'false');
|
||||
document.getElementById('sp-warning-signs').focus();
|
||||
}
|
||||
|
||||
function closeSafetyPlanModal() {
|
||||
safetyPlanModal.classList.remove('active');
|
||||
safetyPlanModal.setAttribute('aria-hidden', 'true');
|
||||
if (lastSafetyPlanTrigger && typeof lastSafetyPlanTrigger.focus === 'function') {
|
||||
lastSafetyPlanTrigger.focus();
|
||||
}
|
||||
}
|
||||
|
||||
chatSafetyPlanBtn.addEventListener('click', function() {
|
||||
openSafetyPlanModal(chatSafetyPlanBtn);
|
||||
});
|
||||
|
||||
footerSafetyPlanBtn.addEventListener('click', function() {
|
||||
openSafetyPlanModal(footerSafetyPlanBtn);
|
||||
});
|
||||
|
||||
// Crisis panel safety plan button (if crisis panel is visible)
|
||||
if (crisisSafetyPlanBtn) {
|
||||
crisisSafetyPlanBtn.addEventListener('click', function() {
|
||||
openSafetyPlanModal(crisisSafetyPlanBtn);
|
||||
loadSafetyPlan();
|
||||
safetyPlanModal.classList.add('active');
|
||||
});
|
||||
}
|
||||
|
||||
closeSafetyPlan.addEventListener('click', function() {
|
||||
closeSafetyPlanModal();
|
||||
safetyPlanModal.classList.remove('active');
|
||||
});
|
||||
|
||||
cancelSafetyPlan.addEventListener('click', function() {
|
||||
closeSafetyPlanModal();
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && safetyPlanModal.classList.contains('active')) {
|
||||
e.preventDefault();
|
||||
closeSafetyPlanModal();
|
||||
}
|
||||
safetyPlanModal.classList.remove('active');
|
||||
});
|
||||
|
||||
saveSafetyPlan.addEventListener('click', function() {
|
||||
@@ -1257,7 +1148,7 @@ Sovereignty and service always.`;
|
||||
};
|
||||
try {
|
||||
localStorage.setItem('timmy_safety_plan', JSON.stringify(plan));
|
||||
closeSafetyPlanModal();
|
||||
safetyPlanModal.classList.remove('active');
|
||||
alert('Safety plan saved locally.');
|
||||
} catch (e) {
|
||||
alert('Error saving plan.');
|
||||
@@ -1407,7 +1298,8 @@ Sovereignty and service always.`;
|
||||
// Check for URL params (e.g., ?safetyplan=true for PWA shortcut)
|
||||
var urlParams = new URLSearchParams(window.location.search);
|
||||
if (urlParams.get('safetyplan') === 'true') {
|
||||
openSafetyPlanModal(chatSafetyPlanBtn);
|
||||
loadSafetyPlan();
|
||||
safetyPlanModal.classList.add('active');
|
||||
// Clean up URL
|
||||
window.history.replaceState({}, document.title, window.location.pathname);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
[pytest]
|
||||
testpaths = crisis
|
||||
python_files = tests.py
|
||||
testpaths = crisis tests
|
||||
python_files = tests.py test_*.py
|
||||
python_classes = Test*
|
||||
python_functions = test_*
|
||||
|
||||
219
sw.js
219
sw.js
@@ -1,118 +1,153 @@
|
||||
const CACHE_NAME = 'the-door-v2';
|
||||
const ASSETS = [
|
||||
const CACHE_NAME = 'the-door-v3';
|
||||
const NAVIGATION_TIMEOUT_MS = 2500;
|
||||
const OFFLINE_FALLBACK_PATH = '/crisis-offline.html';
|
||||
const PRECACHE_ASSETS = [
|
||||
'/',
|
||||
'/index.html',
|
||||
'/about',
|
||||
'/manifest.json'
|
||||
'/about.html',
|
||||
'/manifest.json',
|
||||
'/crisis-offline.html',
|
||||
'/testimony.html'
|
||||
];
|
||||
|
||||
// Crisis resources to show when everything fails
|
||||
const CRISIS_OFFLINE_RESPONSE = `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>You're Not Alone | The Door</title>
|
||||
<style>
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0d1117;color:#e6edf3;max-width:600px;margin:0 auto;padding:20px;line-height:1.6}
|
||||
h1{color:#ff6b6b;font-size:1.5rem;margin-bottom:1rem}
|
||||
.crisis-box{background:#1c1210;border:2px solid #c9362c;border-radius:12px;padding:20px;margin:20px 0;text-align:center}
|
||||
.crisis-box a{display:inline-block;background:#c9362c;color:#fff;text-decoration:none;padding:16px 32px;border-radius:8px;font-weight:700;font-size:1.2rem;margin:10px 0}
|
||||
.hope{color:#8b949e;font-style:italic;margin-top:30px;padding-top:20px;border-top:1px solid #30363d}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>You are not alone.</h1>
|
||||
<p>Your connection is down, but help is still available.</p>
|
||||
<div class="crisis-box">
|
||||
<p><strong>Call or text 988</strong><br>Suicide & Crisis Lifeline<br>Free, 24/7, Confidential</p>
|
||||
<a href="tel:988">Call 988 Now</a>
|
||||
<p style="margin-top:15px"><strong>Or text HOME to 741741</strong><br>Crisis Text Line</p>
|
||||
</div>
|
||||
<p><strong>When you're ready:</strong></p>
|
||||
<ul>
|
||||
<li>Take five deep breaths</li>
|
||||
<li>Drink some water</li>
|
||||
<li>Step outside if you can</li>
|
||||
<li>Text or call someone you trust</li>
|
||||
</ul>
|
||||
<p class="hope">
|
||||
"The Lord is close to the brokenhearted and saves those who are crushed in spirit." — Psalm 34:18
|
||||
</p>
|
||||
<p style="font-size:0.85rem;color:#6e7681;margin-top:30px">
|
||||
This page was created by The Door — a crisis intervention project.<br>
|
||||
Connection will restore automatically. You don't have to go through this alone.
|
||||
</p>
|
||||
</body>
|
||||
</html>`;
|
||||
function isSameOrigin(request) {
|
||||
return new URL(request.url).origin === self.location.origin;
|
||||
}
|
||||
|
||||
function canCache(response) {
|
||||
return Boolean(response && response.ok && response.type !== 'opaque');
|
||||
}
|
||||
|
||||
async function precache() {
|
||||
const cache = await caches.open(CACHE_NAME);
|
||||
await cache.addAll(PRECACHE_ASSETS);
|
||||
}
|
||||
|
||||
async function cleanupOldCaches() {
|
||||
const keys = await caches.keys();
|
||||
await Promise.all(
|
||||
keys
|
||||
.filter((key) => key !== CACHE_NAME)
|
||||
.map((key) => caches.delete(key))
|
||||
);
|
||||
}
|
||||
|
||||
async function putInCache(request, response) {
|
||||
if (!isSameOrigin(request) || !canCache(response)) {
|
||||
return response;
|
||||
}
|
||||
|
||||
const cache = await caches.open(CACHE_NAME);
|
||||
await cache.put(request, response.clone());
|
||||
return response;
|
||||
}
|
||||
|
||||
async function fetchWithTimeout(request, timeoutMs) {
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
|
||||
|
||||
try {
|
||||
return await fetch(request, { signal: controller.signal });
|
||||
} finally {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
}
|
||||
|
||||
async function offlineTextResponse() {
|
||||
return new Response('Offline. Call 988 or text HOME to 741741 for immediate help.', {
|
||||
status: 503,
|
||||
statusText: 'Service Unavailable',
|
||||
headers: new Headers({ 'Content-Type': 'text/plain; charset=utf-8' })
|
||||
});
|
||||
}
|
||||
|
||||
async function handleNavigation(request) {
|
||||
const cache = await caches.open(CACHE_NAME);
|
||||
const cachedPage = await cache.match(request);
|
||||
const offlineFallback = await cache.match(OFFLINE_FALLBACK_PATH);
|
||||
|
||||
try {
|
||||
const response = await fetchWithTimeout(request, NAVIGATION_TIMEOUT_MS);
|
||||
return await putInCache(request, response);
|
||||
} catch (error) {
|
||||
if (cachedPage) {
|
||||
return cachedPage;
|
||||
}
|
||||
|
||||
if (offlineFallback) {
|
||||
return offlineFallback;
|
||||
}
|
||||
|
||||
return offlineTextResponse();
|
||||
}
|
||||
}
|
||||
|
||||
async function handleStaticRequest(request) {
|
||||
const cache = await caches.open(CACHE_NAME);
|
||||
const cached = await cache.match(request);
|
||||
|
||||
if (cached) {
|
||||
fetch(request)
|
||||
.then((response) => putInCache(request, response))
|
||||
.catch(() => null);
|
||||
return cached;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(request);
|
||||
return await putInCache(request, response);
|
||||
} catch (error) {
|
||||
return offlineTextResponse();
|
||||
}
|
||||
}
|
||||
|
||||
async function handleOtherRequest(request) {
|
||||
try {
|
||||
const response = await fetch(request);
|
||||
return await putInCache(request, response);
|
||||
} catch (error) {
|
||||
const cached = await caches.match(request);
|
||||
if (cached) {
|
||||
return cached;
|
||||
}
|
||||
|
||||
return offlineTextResponse();
|
||||
}
|
||||
}
|
||||
|
||||
// Install event - cache core assets
|
||||
self.addEventListener('install', (event) => {
|
||||
event.waitUntil(
|
||||
caches.open(CACHE_NAME).then((cache) => {
|
||||
return cache.addAll(ASSETS);
|
||||
})
|
||||
precache().then(() => self.skipWaiting())
|
||||
);
|
||||
self.skipWaiting();
|
||||
});
|
||||
|
||||
// Activate event - cleanup old caches
|
||||
self.addEventListener('activate', (event) => {
|
||||
event.waitUntil(
|
||||
caches.keys().then((keys) => {
|
||||
return Promise.all(
|
||||
keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key))
|
||||
);
|
||||
})
|
||||
cleanupOldCaches().then(() => self.clients.claim())
|
||||
);
|
||||
self.clients.claim();
|
||||
});
|
||||
|
||||
// Fetch event - network first, fallback to cache for static,
|
||||
// but for the crisis front door, we want to ensure the shell is ALWAYS available.
|
||||
self.addEventListener('fetch', (event) => {
|
||||
const url = new URL(event.request.url);
|
||||
const request = event.request;
|
||||
const url = new URL(request.url);
|
||||
|
||||
// Skip API calls - they should always go to network
|
||||
if (url.pathname.startsWith('/api/')) {
|
||||
if (request.method !== 'GET') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Skip non-GET requests
|
||||
if (event.request.method !== 'GET') {
|
||||
if (!isSameOrigin(request) || url.pathname.startsWith('/api/')) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.respondWith(
|
||||
fetch(event.request)
|
||||
.then((response) => {
|
||||
// If we got a valid response, cache it for next time
|
||||
if (response.ok && ASSETS.includes(url.pathname)) {
|
||||
const copy = response.clone();
|
||||
caches.open(CACHE_NAME).then((cache) => cache.put(event.request, copy));
|
||||
}
|
||||
return response;
|
||||
})
|
||||
.catch(() => {
|
||||
// If network fails, try cache
|
||||
return caches.match(event.request).then((cached) => {
|
||||
if (cached) return cached;
|
||||
if (event.request.mode === 'navigate') {
|
||||
event.respondWith(handleNavigation(request));
|
||||
return;
|
||||
}
|
||||
|
||||
// If it's a navigation request and we're offline, show offline crisis page
|
||||
if (event.request.mode === 'navigate') {
|
||||
return new Response(CRISIS_OFFLINE_RESPONSE, {
|
||||
status: 200,
|
||||
headers: new Headers({ 'Content-Type': 'text/html' })
|
||||
});
|
||||
}
|
||||
if (PRECACHE_ASSETS.includes(url.pathname)) {
|
||||
event.respondWith(handleStaticRequest(request));
|
||||
return;
|
||||
}
|
||||
|
||||
// For other requests, return a simple offline message
|
||||
return new Response('Offline. Call 988 for immediate help.', {
|
||||
status: 503,
|
||||
statusText: 'Service Unavailable',
|
||||
headers: new Headers({ 'Content-Type': 'text/plain' })
|
||||
});
|
||||
});
|
||||
})
|
||||
);
|
||||
event.respondWith(handleOtherRequest(request));
|
||||
});
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
from pathlib import Path
|
||||
|
||||
INDEX_HTML = Path(__file__).resolve().parents[1] / 'index.html'
|
||||
HTML = INDEX_HTML.read_text()
|
||||
|
||||
|
||||
def _between(start_marker: str, end_marker: str) -> str:
|
||||
start = HTML.index(start_marker)
|
||||
end = HTML.index(end_marker)
|
||||
return HTML[start:end]
|
||||
|
||||
|
||||
def test_persistent_safety_plan_button_lives_in_chat_header():
|
||||
assert 'id="chat-header"' in HTML, 'expected a dedicated chat header area'
|
||||
|
||||
header_html = _between('<div id="chat-header"', '<div id="chat-area"')
|
||||
|
||||
assert 'id="chat-safety-plan-btn"' in header_html
|
||||
assert 'aria-label="Open my safety plan"' in header_html
|
||||
assert 'aria-controls="safety-plan-modal"' in header_html
|
||||
assert 'aria-haspopup="dialog"' in header_html
|
||||
|
||||
|
||||
def test_chat_header_entry_point_reuses_same_modal_open_flow():
|
||||
assert "var chatSafetyPlanBtn = document.getElementById('chat-safety-plan-btn');" in HTML
|
||||
assert 'function openSafetyPlanModal(trigger) {' in HTML
|
||||
assert 'loadSafetyPlan();' in HTML
|
||||
assert "safetyPlanModal.classList.add('active');" in HTML
|
||||
assert "safetyPlanModal.setAttribute('aria-hidden', 'false');" in HTML
|
||||
assert 'openSafetyPlanModal(chatSafetyPlanBtn);' in HTML
|
||||
assert 'openSafetyPlanModal(footerSafetyPlanBtn);' in HTML
|
||||
assert 'openSafetyPlanModal(crisisSafetyPlanBtn);' in HTML
|
||||
|
||||
|
||||
def test_modal_returns_focus_and_supports_escape_to_close():
|
||||
assert 'var lastSafetyPlanTrigger = null;' in HTML
|
||||
assert 'lastSafetyPlanTrigger = trigger || document.activeElement;' in HTML
|
||||
assert 'document.getElementById(\'sp-warning-signs\').focus();' in HTML
|
||||
assert 'closeSafetyPlanModal();' in HTML
|
||||
assert "safetyPlanModal.setAttribute('aria-hidden', 'true');" in HTML
|
||||
assert 'lastSafetyPlanTrigger.focus();' in HTML
|
||||
assert "if (e.key === 'Escape' && safetyPlanModal.classList.contains('active'))" in HTML
|
||||
55
tests/test_service_worker_offline.py
Normal file
55
tests/test_service_worker_offline.py
Normal file
@@ -0,0 +1,55 @@
|
||||
import pathlib
|
||||
import unittest
|
||||
|
||||
ROOT = pathlib.Path(__file__).resolve().parents[1]
|
||||
SERVICE_WORKER = (ROOT / 'sw.js').read_text(encoding='utf-8')
|
||||
CRISIS_OFFLINE_PAGE = ROOT / 'crisis-offline.html'
|
||||
MAKEFILE = (ROOT / 'Makefile').read_text(encoding='utf-8')
|
||||
|
||||
|
||||
class TestServiceWorkerOffline(unittest.TestCase):
|
||||
def test_crisis_offline_page_exists(self):
|
||||
self.assertTrue(CRISIS_OFFLINE_PAGE.exists(), 'crisis-offline.html should exist')
|
||||
|
||||
def test_service_worker_precaches_crisis_offline_page(self):
|
||||
self.assertIn('/crisis-offline.html', SERVICE_WORKER)
|
||||
|
||||
def test_service_worker_has_navigation_timeout_for_intermittent_connections(self):
|
||||
self.assertIn('NAVIGATION_TIMEOUT_MS', SERVICE_WORKER)
|
||||
self.assertIn('AbortController', SERVICE_WORKER)
|
||||
|
||||
def test_service_worker_uses_crisis_offline_fallback_for_navigation(self):
|
||||
self.assertIn("event.request.mode === 'navigate'", SERVICE_WORKER)
|
||||
self.assertIn("/crisis-offline.html", SERVICE_WORKER)
|
||||
|
||||
def test_make_push_includes_crisis_offline_page(self):
|
||||
self.assertIn('crisis-offline.html', MAKEFILE)
|
||||
|
||||
|
||||
class TestCrisisOfflinePage(unittest.TestCase):
|
||||
@classmethod
|
||||
def setUpClass(cls):
|
||||
cls.html = CRISIS_OFFLINE_PAGE.read_text(encoding='utf-8') if CRISIS_OFFLINE_PAGE.exists() else ''
|
||||
cls.lower_html = cls.html.lower()
|
||||
|
||||
def test_has_clickable_988_link(self):
|
||||
self.assertIn('href="tel:988"', self.html)
|
||||
|
||||
def test_has_crisis_text_line(self):
|
||||
self.assertIn('Crisis Text Line', self.html)
|
||||
self.assertIn('741741', self.html)
|
||||
|
||||
def test_has_grounding_techniques(self):
|
||||
required_phrases = [
|
||||
'5 things you can see',
|
||||
'4 things you can feel',
|
||||
'3 things you can hear',
|
||||
'2 things you can smell',
|
||||
'1 thing you can taste',
|
||||
]
|
||||
for phrase in required_phrases:
|
||||
self.assertIn(phrase, self.lower_html)
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
unittest.main()
|
||||
Reference in New Issue
Block a user