fix(pwa): add offline fallback route

2026-06-30 15:08:18 +08:00
parent ba6ce57e62
commit 2c96d5144c
2 changed files with 88 additions and 4 deletions
@@ -0,0 +1,84 @@
+import Link from "next/link";
+
+import { ROUTES } from "@/router/routes";
+
+export default function OfflinePage() {
+  return (
+    <main
+      style={{
+        minHeight: "100dvh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "2rem",
+        background:
+          "radial-gradient(circle at 20% 20%, rgba(246, 87, 160, 0.18), transparent 32%), #fcf3f4",
+      }}
+    >
+      <section
+        style={{
+          width: "min(100%, 420px)",
+          border: "1px solid rgba(246, 87, 160, 0.18)",
+          borderRadius: "28px",
+          padding: "2rem",
+          background: "rgba(255, 255, 255, 0.86)",
+          boxShadow: "0 18px 48px rgba(246, 87, 160, 0.16)",
+          textAlign: "center",
+        }}
+      >
+        <p
+          style={{
+            margin: "0 0 0.5rem",
+            color: "#f657a0",
+            fontSize: "0.875rem",
+            fontWeight: 700,
+            letterSpacing: "0.08em",
+            textTransform: "uppercase",
+          }}
+        >
+          Offline
+        </p>
+        <h1
+          style={{
+            margin: 0,
+            color: "#1e1e1e",
+            fontSize: "2rem",
+            lineHeight: 1.1,
+          }}
+        >
+          You are offline
+        </h1>
+        <p
+          style={{
+            margin: "1rem 0 1.5rem",
+            color: "#6b5b62",
+            fontSize: "1rem",
+            lineHeight: 1.6,
+          }}
+        >
+          Check your connection, then return to CozSweet when the network is
+          available again.
+        </p>
+        <Link
+          href={ROUTES.splash}
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            minHeight: "44px",
+            padding: "0 1.25rem",
+            borderRadius: "999px",
+            background: "linear-gradient(135deg, #ff67e0, #f657a0)",
+            color: "#fff",
+            fontSize: "0.95rem",
+            fontWeight: 700,
+            textDecoration: "none",
+            boxShadow: "0 10px 22px rgba(246, 87, 160, 0.28)",
+          }}
+        >
+          Back to start
+        </Link>
+      </section>
+    </main>
+  );
+}