c13b61cd03
- Add web app manifest for home screen installation - Implement service worker with offline caching strategy - Create offline fallback page with auto-reconnect - Generate PWA icons in multiple sizes (72px-512px) - Add PWA meta tags and Apple Touch icons to all pages - Register service worker with graceful degradation - Update documentation with PWA installation instructions - Add browserconfig.xml for Windows tile support Features: - Installable on mobile and desktop - Offline functionality with cached resources - App-like experience in standalone mode - Automatic updates when online - Works seamlessly with existing progressive enhancement 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
89 lines
No EOL
3 KiB
HTML
89 lines
No EOL
3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Offline - Great Lakes Ice Report</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<style>
|
|
.offline-container {
|
|
max-width: 600px;
|
|
margin: 50px auto;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.offline-icon {
|
|
font-size: 4rem;
|
|
margin-bottom: 1rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.offline-message {
|
|
background: var(--card-bg);
|
|
color: var(--text-color);
|
|
padding: 2rem;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.retry-btn {
|
|
margin-top: 1rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background-color: var(--primary-color, #2196F3);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.retry-btn:hover {
|
|
opacity: 0.9;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="offline-container">
|
|
<div class="offline-message">
|
|
<div class="offline-icon">📡</div>
|
|
<h1>You're Offline</h1>
|
|
<p>It looks like you've lost your internet connection. The Great Lakes Ice Report needs an internet connection to show current road conditions and submit new reports.</p>
|
|
|
|
<p><strong>When you're back online, you'll be able to:</strong></p>
|
|
<ul style="text-align: left; max-width: 400px; margin: 1rem auto;">
|
|
<li>View current ice condition reports</li>
|
|
<li>Submit new hazard reports</li>
|
|
<li>Get real-time location updates</li>
|
|
<li>Access the interactive map</li>
|
|
</ul>
|
|
|
|
<button class="retry-btn" onclick="window.location.reload()">
|
|
🔄 Try Again
|
|
</button>
|
|
|
|
<p style="margin-top: 1rem; font-size: 0.9rem; opacity: 0.8;">
|
|
This app works best with an internet connection for up-to-date safety information.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Auto-reload when connection is restored
|
|
window.addEventListener('online', () => {
|
|
window.location.reload();
|
|
});
|
|
|
|
// Apply theme from localStorage if available
|
|
(function() {
|
|
const savedTheme = localStorage.getItem('theme') || 'auto';
|
|
if (savedTheme === 'auto') {
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
|
|
} else {
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |