diff --git a/html/open-browser.html b/html/open-browser.html
new file mode 100644
index 0000000..580fca7
--- /dev/null
+++ b/html/open-browser.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>请在浏览器中打开</title>
+  <style>
+    body {
+      margin: 0;
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #f5f7fb;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
+      color: #1f2937;
+    }
+    .box {
+      width: min(88vw, 420px);
+      padding: 34px 26px;
+      border-radius: 12px;
+      background: #fff;
+      box-shadow: 0 12px 40px rgba(15, 23, 42, .12);
+      text-align: center;
+    }
+    h1 {
+      margin: 0 0 14px;
+      font-size: 24px;
+    }
+    p {
+      margin: 10px 0;
+      line-height: 1.7;
+      font-size: 16px;
+      color: #4b5563;
+    }
+    .tip {
+      margin-top: 22px;
+      padding: 14px;
+      border-radius: 8px;
+      background: #f3f4f6;
+      color: #111827;
+    }
+  </style>
+</head>
+<body>
+  <div class="box">
+    <h1>请在浏览器中打开</h1>
+    <p>当前页面不支持在微信或 QQ 内置浏览器访问。</p >
+    <div class="tip">
+      点击右上角菜单，选择“在浏览器中打开”。
+    </div>
+  </div>
+
+  <script>
+    const ua = navigator.userAgent || "";
+    const inApp = /MicroMessenger|QQ\/[0-9]/i.test(ua);
+    const prefix = "?redirect=";
+
+    if (!inApp && location.search.indexOf(prefix) === 0) {
+      const target = location.search.slice(prefix.length);
+      if (target && target.charAt(0) === "/" && target.indexOf("//") !== 0) {
+        location.replace(target);
+      }
+    }
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/html/upgrade.html b/html/upgrade.html
new file mode 100644
index 0000000..3949628
--- /dev/null
+++ b/html/upgrade.html
@@ -0,0 +1,311 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="robots" content="noindex, nofollow">
+  <title>网站升级中</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --page: #f4f7f8;
+      --ink: #17212b;
+      --muted: #5f6f7e;
+      --line: #d9e2e7;
+      --panel: #ffffff;
+      --accent: #0f7b78;
+      --accent-dark: #075c5a;
+      --warm: #f2c166;
+      --shadow: 0 20px 70px rgba(31, 49, 65, .15);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    html,
+    body {
+      min-height: 100%;
+    }
+
+    body {
+      margin: 0;
+      display: grid;
+      place-items: center;
+      padding: 28px;
+      background:
+        linear-gradient(135deg, rgba(15, 123, 120, .08), transparent 34%),
+        linear-gradient(315deg, rgba(242, 193, 102, .16), transparent 38%),
+        var(--page);
+      color: var(--ink);
+      font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
+    }
+
+    .wrap {
+      width: min(100%, 760px);
+    }
+
+    .panel {
+      position: relative;
+      overflow: hidden;
+      display: grid;
+      grid-template-columns: 160px 1fr;
+      gap: 34px;
+      align-items: center;
+      padding: 42px;
+      border: 1px solid rgba(217, 226, 231, .9);
+      border-radius: 8px;
+      background: rgba(255, 255, 255, .92);
+      box-shadow: var(--shadow);
+    }
+
+    .panel::before {
+      content: "";
+      position: absolute;
+      inset: 0 0 auto;
+      height: 5px;
+      background: linear-gradient(90deg, var(--accent), var(--warm));
+    }
+
+    .mark {
+      position: relative;
+      width: 150px;
+      height: 150px;
+      border: 1px solid var(--line);
+      border-radius: 50%;
+      background:
+        radial-gradient(circle at 50% 48%, rgba(15, 123, 120, .12), transparent 48%),
+        #fbfcfc;
+    }
+
+    .ring {
+      position: absolute;
+      inset: 20px;
+      border: 10px solid rgba(15, 123, 120, .16);
+      border-top-color: var(--accent);
+      border-radius: 50%;
+      animation: spin 1.35s linear infinite;
+    }
+
+    .wrench {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: 54px;
+      height: 54px;
+      transform: translate(-50%, -50%) rotate(-28deg);
+    }
+
+    .wrench::before,
+    .wrench::after {
+      content: "";
+      position: absolute;
+      background: var(--accent-dark);
+    }
+
+    .wrench::before {
+      left: 23px;
+      top: 8px;
+      width: 10px;
+      height: 42px;
+      border-radius: 10px;
+    }
+
+    .wrench::after {
+      left: 14px;
+      top: 2px;
+      width: 28px;
+      height: 18px;
+      border-radius: 16px 16px 4px 4px;
+      box-shadow: 0 34px 0 var(--accent-dark);
+    }
+
+    .eyebrow {
+      margin: 0 0 12px;
+      color: var(--accent-dark);
+      font-size: 13px;
+      font-weight: 700;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: clamp(28px, 5vw, 42px);
+      line-height: 1.16;
+      font-weight: 800;
+    }
+
+    .desc {
+      max-width: 500px;
+      margin: 18px 0 0;
+      color: var(--muted);
+      font-size: 17px;
+      line-height: 1.8;
+    }
+
+    .status {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-top: 26px;
+    }
+
+    .pill {
+      display: inline-flex;
+      align-items: center;
+      min-height: 38px;
+      padding: 8px 13px;
+      border: 1px solid var(--line);
+      border-radius: 999px;
+      background: #f8fafb;
+      color: #314250;
+      font-size: 14px;
+    }
+
+    .dot {
+      width: 8px;
+      height: 8px;
+      margin-right: 9px;
+      border-radius: 50%;
+      background: var(--warm);
+      box-shadow: 0 0 0 5px rgba(242, 193, 102, .18);
+    }
+
+    .actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      margin-top: 30px;
+    }
+
+    button,
+    a {
+      min-height: 44px;
+      padding: 0 18px;
+      border-radius: 6px;
+      font: inherit;
+      font-size: 15px;
+      font-weight: 700;
+      cursor: pointer;
+      text-decoration: none;
+    }
+
+    button {
+      border: 0;
+      background: var(--accent);
+      color: #fff;
+    }
+
+    button:hover {
+      background: var(--accent-dark);
+    }
+
+    a {
+      display: inline-flex;
+      align-items: center;
+      border: 1px solid var(--line);
+      background: #fff;
+      color: var(--ink);
+    }
+
+    .foot {
+      margin: 18px 4px 0;
+      color: #7b8791;
+      font-size: 13px;
+      text-align: center;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    @media (max-width: 680px) {
+      body {
+        padding: 18px;
+      }
+
+      .panel {
+        grid-template-columns: 1fr;
+        gap: 24px;
+        padding: 34px 24px;
+        text-align: center;
+      }
+
+      .mark {
+        margin: 0 auto;
+        width: 126px;
+        height: 126px;
+      }
+
+      .status,
+      .actions {
+        justify-content: center;
+      }
+
+      button,
+      a {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .ring {
+        animation: none;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="wrap" aria-labelledby="page-title">
+    <section class="panel">
+      <div class="mark" aria-hidden="true">
+        <div class="ring"></div>
+        <div class="wrench"></div>
+      </div>
+
+      <div>
+        <p class="eyebrow">SYSTEM MAINTENANCE</p>
+        <h1 id="page-title">网站正在升级中</h1>
+        <p class="desc">
+          我们正在部署新版本，部分页面暂时无法访问。请稍后刷新页面，正常服务会尽快恢复。
+        </p>
+
+        <div class="status" aria-label="当前状态">
+          <span class="pill"><span class="dot"></span>预计很快恢复</span>
+          <span class="pill">页面将在 <strong id="countdown">15</strong> 秒后自动刷新</span>
+        </div>
+
+        <div class="actions">
+          <button type="button" id="refresh">立即刷新</button>
+          <a href="/">返回首页</a>
+        </div>
+      </div>
+    </section>
+
+    <p class="foot">如果长时间无法访问，请稍后再试。</p>
+  </main>
+
+  <script>
+    (function () {
+      var seconds = 15;
+      var countdown = document.getElementById("countdown");
+      var refresh = document.getElementById("refresh");
+
+      refresh.addEventListener("click", function () {
+        window.location.reload();
+      });
+
+      window.setInterval(function () {
+        seconds -= 1;
+        if (seconds <= 0) {
+          window.location.reload();
+          return;
+        }
+        countdown.textContent = seconds;
+      }, 1000);
+    })();
+  </script>
+</body>
+</html>
