Timmy Time
23b3f8fd72
Replaces blocking browser alert() dialogs with inline UI status
for safety plan save success/error feedback.
Changes:
- Added #sp-status element with role="status" and aria-live="polite"
- Added CSS for success (green) and error (red) states
- Replaced alert("Safety plan saved locally.") with inline success
- Replaced alert("Error saving plan.") with inline error
- Status auto-hides after 4 seconds
Closes #73
131 lines
4.6 KiB
HTML
131 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Service Worker Test</title>
|
|
<style>
|
|
body { font-family: monospace; padding: 20px; background: #0d1117; color: #e6edf3; }
|
|
h1 { color: #ff6b6b; }
|
|
.test { margin: 20px 0; padding: 15px; background: #161b22; border-radius: 8px; }
|
|
.pass { color: #2ea043; }
|
|
.fail { color: #c9362c; }
|
|
button { padding: 10px 20px; margin: 5px; background: #238636; color: white; border: none; border-radius: 4px; cursor: pointer; }
|
|
button:hover { background: #2ea043; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Service Worker Test — Issue #41</h1>
|
|
|
|
<div class="test">
|
|
<h2>Test 1: Service Worker Registration</h2>
|
|
<p id="sw-status">Checking...</p>
|
|
</div>
|
|
|
|
<div class="test">
|
|
<h2>Test 2: Cache Status</h2>
|
|
<p id="cache-status">Checking...</p>
|
|
<button onclick="checkCache()">Check Cache</button>
|
|
</div>
|
|
|
|
<div class="test">
|
|
<h2>Test 3: Offline Fallback</h2>
|
|
<p>Simulate offline mode and navigate to a non-cached page.</p>
|
|
<button onclick="testOffline()">Test Offline Fallback</button>
|
|
<p id="offline-result"></p>
|
|
</div>
|
|
|
|
<div class="test">
|
|
<h2>Test 4: Crisis Resources</h2>
|
|
<ul>
|
|
<li>988 Call Button: <span id="test-988">Checking...</span></li>
|
|
<li>Crisis Text Line: <span id="test-text">Checking...</span></li>
|
|
<li>Grounding Techniques: <span id="test-grounding">Checking...</span></li>
|
|
</ul>
|
|
<button onclick="testCrisisResources()">Test Crisis Resources</button>
|
|
</div>
|
|
|
|
<script>
|
|
// Test 1: Check service worker registration
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.getRegistration().then(function(registration) {
|
|
if (registration) {
|
|
document.getElementById('sw-status').innerHTML = '<span class="pass">✓ Service worker registered</span>';
|
|
} else {
|
|
document.getElementById('sw-status').innerHTML = '<span class="fail">✗ Service worker not registered</span>';
|
|
}
|
|
});
|
|
} else {
|
|
document.getElementById('sw-status').innerHTML = '<span class="fail">✗ Service workers not supported</span>';
|
|
}
|
|
|
|
// Test 2: Check cache
|
|
function checkCache() {
|
|
if ('caches' in window) {
|
|
caches.open('the-door-v3').then(function(cache) {
|
|
cache.keys().then(function(keys) {
|
|
var html = '<span class="pass">✓ Cache found with ' + keys.length + ' items:</span><br>';
|
|
keys.forEach(function(request) {
|
|
html += '• ' + request.url + '<br>';
|
|
});
|
|
document.getElementById('cache-status').innerHTML = html;
|
|
});
|
|
}).catch(function(error) {
|
|
document.getElementById('cache-status').innerHTML = '<span class="fail">✗ Cache error: ' + error + '</span>';
|
|
});
|
|
} else {
|
|
document.getElementById('cache-status').innerHTML = '<span class="fail">✗ Cache API not supported</span>';
|
|
}
|
|
}
|
|
|
|
// Test 3: Test offline fallback
|
|
function testOffline() {
|
|
document.getElementById('offline-result').innerHTML = 'Testing... (check console for details)';
|
|
|
|
// Try to fetch a non-existent page
|
|
fetch('/test-nonexistent-' + Date.now())
|
|
.then(function(response) {
|
|
return response.text();
|
|
})
|
|
.then(function(text) {
|
|
if (text.includes('988') || text.includes('crisis')) {
|
|
document.getElementById('offline-result').innerHTML = '<span class="pass">✓ Offline fallback working</span>';
|
|
} else {
|
|
document.getElementById('offline-result').innerHTML = '<span class="fail">✗ Unexpected response: ' + text.substring(0, 100) + '</span>';
|
|
}
|
|
})
|
|
.catch(function(error) {
|
|
document.getElementById('offline-result').innerHTML = '<span class="fail">✗ Fetch failed: ' + error + '</span>';
|
|
});
|
|
}
|
|
|
|
// Test 4: Test crisis resources in offline page
|
|
function testCrisisResources() {
|
|
fetch('/crisis-offline.html')
|
|
.then(function(response) {
|
|
return response.text();
|
|
})
|
|
.then(function(html) {
|
|
var has988 = html.includes('tel:988');
|
|
var hasText = html.includes('sms:741741');
|
|
var hasGrounding = html.includes('5-4-3-2-1');
|
|
|
|
document.getElementById('test-988').innerHTML = has988 ?
|
|
'<span class="pass">✓ Found</span>' : '<span class="fail">✗ Missing</span>';
|
|
document.getElementById('test-text').innerHTML = hasText ?
|
|
'<span class="pass">✓ Found</span>' : '<span class="fail">✗ Missing</span>';
|
|
document.getElementById('test-grounding').innerHTML = hasGrounding ?
|
|
'<span class="pass">✓ Found</span>' : '<span class="fail">✗ Missing</span>';
|
|
})
|
|
.catch(function(error) {
|
|
document.getElementById('test-988').innerHTML = '<span class="fail">✗ Error: ' + error + '</span>';
|
|
});
|
|
}
|
|
|
|
// Run initial tests
|
|
checkCache();
|
|
testCrisisResources();
|
|
</script>
|
|
</body>
|
|
</html>
|