[FEATURE] PWA + Showcase Grid

2026-07-12 18:10:26 +02:00
parent 9df764d065
commit acb2f5964f
11 changed files with 4771 additions and 93 deletions
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Keine Verbindung — Dialect Charts</title>
+<style>
+  :root {
+    color-scheme: light dark;
+    --dialect-primary: #e86c00;
+    --dialect-secondary: #f6b93b;
+    --dialect-bg: light-dark(#f4f6f9, #14171f);
+    --dialect-surface: light-dark(#ffffff, #1c2029);
+    --dialect-ink: light-dark(#14171f, #e6eaf0);
+    --dialect-ink-muted: light-dark(#5b6472, #9aa3b2);
+    --dialect-border: light-dark(#e6eaf0, #2b303b);
+    --dialect-radius: 14px;
+    --dialect-shadow-1: light-dark(0 6px 20px rgba(20, 23, 31, 0.08), 0 6px 20px rgba(0, 0, 0, 0.35));
+    --dialect-shadow-2: light-dark(0 1px 2px rgba(20, 23, 31, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3));
+  }
+
+  * { box-sizing: border-box; }
+
+  html, body {
+    height: 100%;
+    margin: 0;
+  }
+
+  body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    padding: 24px;
+    background: var(--dialect-bg);
+    color: var(--dialect-ink);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  }
+
+  .card {
+    width: 100%;
+    max-width: 420px;
+    background: var(--dialect-surface);
+    border-radius: var(--dialect-radius);
+    box-shadow: var(--dialect-shadow-1), var(--dialect-shadow-2);
+    padding: 40px 32px;
+    text-align: center;
+  }
+
+  .icon {
+    width: 56px;
+    height: 56px;
+    margin: 0 auto 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--dialect-primary) 14%, transparent);
+    color: var(--dialect-primary);
+  }
+
+  .icon svg {
+    width: 28px;
+    height: 28px;
+  }
+
+  h1 {
+    margin: 0 0 10px;
+    font-size: 1.3rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+  }
+
+  p {
+    margin: 0 0 28px;
+    color: var(--dialect-ink-muted);
+    font-size: 0.95rem;
+    line-height: 1.5;
+  }
+
+  button {
+    appearance: none;
+    border: none;
+    border-radius: 8px;
+    padding: 10px 22px;
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: #fff;
+    background: var(--dialect-primary);
+    cursor: pointer;
+  }
+
+  button:hover {
+    background: color-mix(in srgb, var(--dialect-primary) 88%, black);
+  }
+
+  .hint {
+    margin-top: 18px;
+    margin-bottom: 0;
+    font-size: 0.8rem;
+    color: var(--dialect-ink-muted);
+  }
+
+  .hint::before {
+    content: "";
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    margin-right: 6px;
+    border-radius: 999px;
+    background: var(--dialect-secondary);
+  }
+</style>
+</head>
+<body>
+  <div class="card">
+    <div class="icon">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M1 9a17 17 0 0 1 22 0"></path>
+        <path d="M5 13a11 11 0 0 1 14 0"></path>
+        <path d="M9 17a5 5 0 0 1 6 0"></path>
+        <line x1="1" y1="1" x2="23" y2="23"></line>
+      </svg>
+    </div>
+    <h1>Keine Verbindung</h1>
+    <p>Dialect Charts ist derzeit offline. Bitte prüfen Sie Ihre Internetverbindung und versuchen Sie es erneut.</p>
+    <button id="retry-button">Erneut versuchen</button>
+    <p class="hint">Die Seite wird automatisch neu geladen, sobald die Verbindung wiederhergestellt ist.</p>
+  </div>
+  <script>
+    function reconnect() {
+      location.reload();
+    }
+    document.getElementById('retry-button').addEventListener('click', reconnect);
+    window.addEventListener('online', reconnect);
+  </script>
+</body>
+</html>