retoor
3c55ae1bb1
Implement progressive web app capabilities including VAPID-based push notification infrastructure, service worker with offline caching, PWA install prompt handling, and manifest configuration. Add push.py module for VAPID key generation and notification delivery, PushManager and PwaInstaller JavaScript classes, service worker with precache and push event handling, offline fallback page, and app icons at multiple resolutions.
70 lines
2.1 KiB
HTML
70 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<!-- retoor <retoor@molodetz.nl> -->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Offline - DevPlace</title>
|
|
<style>
|
|
:root {
|
|
--bg-primary: #0f0a1a;
|
|
--bg-card: #221436;
|
|
--accent: #ff6b35;
|
|
--text-primary: #f0e8f8;
|
|
--text-muted: #9a8db0;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
padding: 1.5rem;
|
|
}
|
|
.offline-card {
|
|
max-width: 360px;
|
|
text-align: center;
|
|
background: var(--bg-card);
|
|
border-radius: 16px;
|
|
padding: 2.5rem 2rem;
|
|
}
|
|
.offline-mark {
|
|
width: 72px;
|
|
height: 72px;
|
|
margin: 0 auto 1.25rem;
|
|
border-radius: 16px;
|
|
background: var(--accent);
|
|
color: var(--bg-primary);
|
|
font-size: 2.75rem;
|
|
font-weight: 700;
|
|
line-height: 72px;
|
|
}
|
|
h1 { font-size: 1.375rem; margin: 0 0 0.5rem; }
|
|
p { color: var(--text-muted); line-height: 1.5; margin: 0 0 1.5rem; }
|
|
button {
|
|
background: var(--accent);
|
|
color: var(--bg-primary);
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="offline-card">
|
|
<div class="offline-mark">D</div>
|
|
<h1>You are offline</h1>
|
|
<p>DevPlace could not reach the network. Check your connection and try again.</p>
|
|
<button type="button" onclick="location.reload()">Retry</button>
|
|
</div>
|
|
</body>
|
|
</html>
|