94 lines
2.4 KiB
HTML
94 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta name="theme-color" content="#1a3d1a" />
|
||
<title>Offline – Jagd Apps Heidekreis</title>
|
||
<style>
|
||
/* Eigenständige Seite: sie wird vom Service Worker ausgeliefert, wenn das
|
||
Netz fehlt, und kann deshalb keine Stylesheets der App nachladen.
|
||
Palette und Schriftmodell entsprechen dem Portal, inklusive Nachtansicht. */
|
||
* { box-sizing: border-box; }
|
||
|
||
:root {
|
||
--bg: #e8e8e2;
|
||
--card: #f4f4ee;
|
||
--text: #1a1a1a;
|
||
--muted: #55554c;
|
||
--border: #c9c9b8;
|
||
--green: #2d5a2d;
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--bg: #14180f;
|
||
--card: #1e241a;
|
||
--text: #e9e7dd;
|
||
--muted: #a6a698;
|
||
--border: #333b28;
|
||
--green: #7fb36f;
|
||
}
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
min-height: 100dvh;
|
||
padding: 2rem 1.25rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||
text-align: center;
|
||
}
|
||
|
||
.card {
|
||
max-width: 26rem;
|
||
padding: 2rem 1.5rem;
|
||
background: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.icon { font-size: 3rem; line-height: 1; margin-bottom: 1rem; }
|
||
|
||
h1 {
|
||
margin: 0 0 0.5rem;
|
||
font-family: Georgia, 'Times New Roman', serif;
|
||
font-size: 1.5rem;
|
||
color: var(--text);
|
||
}
|
||
|
||
p { margin: 0 0 1.5rem; color: var(--muted); font-size: 1rem; line-height: 1.5; }
|
||
|
||
button {
|
||
min-height: 44px;
|
||
padding: 0.6rem 1.4rem;
|
||
background: var(--green);
|
||
color: var(--bg);
|
||
border: none;
|
||
border-radius: 2px;
|
||
font: inherit;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
}
|
||
|
||
button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="card">
|
||
<div class="icon" role="img" aria-label="Kein Empfang">📡</div>
|
||
<h1>Keine Verbindung</h1>
|
||
<p>
|
||
Im Funkloch sind die zuletzt geladenen Daten nicht verfügbar.
|
||
Sobald wieder Empfang besteht, lädt die Seite normal.
|
||
</p>
|
||
<button type="button" onclick="location.reload()">Erneut versuchen</button>
|
||
</div>
|
||
</body>
|
||
</html>
|