feat(ui): build responsive cookbook, editor and persistent cooking assistant

public/offline.html

@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="de">
+  <meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" /><meta
+    name="theme-color"
+    content="#365747"
+  /><title>HamHam · Offline</title
+  ><style>
+    body {
+      background: #faf8f4;
+      color: #253b32;
+      font: 16px/1.7 system-ui;
+      margin: 0;
+      padding: 50px 25px;
+    }
+    main {
+      max-width: 600px;
+      margin: auto;
+    }
+    h1 {
+      font: 44px Georgia;
+    }
+    a {
+      color: #365747;
+    }
+    li {
+      margin: 12px 0;
+    }
+    button {
+      background: #365747;
+      color: white;
+      border: 0;
+      padding: 14px 22px;
+      border-radius: 9px;
+      font: inherit;
+    }
+  </style>
+  <main>
+    <p>HAMHAM · DEIN KOCHBUCH</p>
+    <h1>Ein Moment ohne Netz.</h1>
+    <p>
+      Diese Seite ist noch nicht auf deinem Gerät gespeichert. Bereits online geöffnete Rezept- und
+      Kochseiten findest du hier. Für neue Rezepte und die Verwaltung brauchst du eine Verbindung.
+    </p>
+    <ul id="recipes"></ul>
+    <button onclick="location.reload()">Verbindung erneut prüfen</button>
+  </main>
+  <script>
+    caches
+      .open('hamham-public-v1')
+      .then((c) => c.keys())
+      .then((keys) => {
+        const list = document.querySelector('#recipes');
+        keys
+          .filter((r) => new URL(r.url).pathname.startsWith('/rezepte/'))
+          .forEach((r) => {
+            let li = document.createElement('li'),
+              a = document.createElement('a'),
+              url = new URL(r.url);
+            a.href = r.url;
+            let cook = url.pathname.endsWith('/kochen');
+            a.textContent =
+              (cook ? 'Kochvorgang fortsetzen' : 'Gespeichertes Rezept öffnen') +
+              ' · ' +
+              url.pathname.split('/')[2].slice(0, 8);
+            li.append(a);
+            list.append(li);
+          });
+      });
+  </script>
+</html>