PWA

2026-07-17 13:02:21 +08:00
parent 2fd8f3dc14
commit 8e6efd1c51
12 changed files with 355 additions and 0 deletions
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#0f766e" />
+    <title>暂时离线 | Bi's Blog</title>
+    <style>
+      * { box-sizing: border-box; }
+      body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px; color: #27313a; font-family: system-ui, "Microsoft YaHei", sans-serif; background: linear-gradient(145deg, #f7f5ef, #e5f5ef); }
+      main { width: min(520px, 100%); border: 1px solid rgba(255,255,255,.8); border-radius: 18px; padding: 40px; text-align: center; background: rgba(255,253,248,.82); box-shadow: 0 24px 70px rgba(44,55,63,.16); }
+      .icon { display: grid; width: 72px; height: 72px; margin: 0 auto 22px; place-items: center; border-radius: 20px; color: white; font-size: 30px; font-weight: 700; background: #0f766e; }
+      h1 { margin: 0; font-size: clamp(1.8rem, 6vw, 2.6rem); }
+      p { margin: 14px 0 26px; color: #686f78; line-height: 1.8; }
+      a, button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; border: 0; border-radius: 999px; padding: 9px 18px; color: white; font: inherit; font-weight: 700; text-decoration: none; background: #0f766e; cursor: pointer; }
+      a { margin-left: 8px; color: #0f766e; background: #dff5ed; }
+      @media (prefers-color-scheme: dark) { body { color: #eef4f6; background: #0b1014; } main { border-color: rgba(181,198,207,.2); background: #141b21; } p { color: #b6c3c9; } }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="icon" aria-hidden="true">Bi</div>
+      <h1>网络暂时走丢了</h1>
+      <p>已经读过的文章仍可从浏览器历史或返回按钮打开。网络恢复后，再来继续探索吧。</p>
+      <button type="button" onclick="location.reload()">重新连接</button>
+      <a href="/">返回首页</a>
+    </main>
+  </body>
+</html>