diff --git a/README.md b/README.md
index 4ed0ca5..da43c5a 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,14 @@
 > 本文以 2026-06-22 可访问的 Codex App、Codex CLI、Codex IDE Extension、Codex Web / Cloud 公开能力和实测界面为参考。Codex 更新很快，安装方式、模型名称、额度、入口位置和命令参数都可能变化；涉及具体功能和价格时，请以 OpenAI 官方文档、Codex 当前版本和你账号实际显示为准。  
 > CC Switch、DeepSeek 等第三方工具和模型接入方案仅作为扩展方法记录，不属于 OpenAI 官方功能。
 
+## 阅读入口
+
+- [在线阅读](https://bozhoudev.github.io/codex-orange-book/)
+- [下载 PDF](https://raw.githubusercontent.com/bozhouDev/codex-orange-book/main/Codex%E6%A9%99%E7%9A%AE%E4%B9%A6.pdf)
+- [Markdown 原文](https://github.com/bozhouDev/codex-orange-book/blob/main/README.md)
+
+> GitHub 文件页可能无法稳定预览较大的 PDF，并显示“无法渲染代码块”等误导提示。建议使用上面的在线阅读入口，或直接下载 PDF。
+
 ## 目录
 
 - [0. 使用说明](#0-使用说明)
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1d162c4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,203 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Codex 橙皮书在线阅读</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --ink: #181410;
+      --muted: #665e55;
+      --line: #d8d1c8;
+      --paper: #fbfaf8;
+      --panel: #ffffff;
+      --orange: #f2660a;
+      --orange-deep: #b74600;
+      --blue: #24558f;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    html,
+    body {
+      margin: 0;
+      min-height: 100%;
+      background: var(--paper);
+      color: var(--ink);
+      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif;
+    }
+
+    body {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 24px;
+      padding: 18px 24px;
+      border-bottom: 1px solid var(--line);
+      background: var(--panel);
+    }
+
+    .title {
+      min-width: 0;
+    }
+
+    .eyebrow {
+      margin: 0 0 4px;
+      color: var(--orange-deep);
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: .14em;
+      text-transform: uppercase;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: clamp(20px, 3vw, 30px);
+      line-height: 1.18;
+      letter-spacing: 0;
+    }
+
+    .summary {
+      margin: 7px 0 0;
+      color: var(--muted);
+      font-size: 14px;
+      line-height: 1.55;
+    }
+
+    .reader-note {
+      margin: 5px 0 0;
+      color: var(--muted);
+      font-size: 13px;
+      line-height: 1.5;
+    }
+
+    .actions {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      gap: 10px;
+      flex: none;
+    }
+
+    .button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 38px;
+      padding: 0 14px;
+      border: 1px solid var(--line);
+      border-radius: 6px;
+      background: var(--panel);
+      color: var(--ink);
+      font-size: 14px;
+      font-weight: 650;
+      text-decoration: none;
+      white-space: nowrap;
+    }
+
+    .button.primary {
+      border-color: var(--orange);
+      background: var(--orange);
+      color: #fff;
+    }
+
+    .button:hover,
+    .button:focus-visible {
+      border-color: var(--blue);
+      outline: none;
+    }
+
+    .viewer {
+      flex: 1;
+      min-height: 0;
+      padding: 16px;
+    }
+
+    .pdf-frame {
+      display: block;
+      width: 100%;
+      height: calc(100vh - 146px);
+      min-height: 620px;
+      border: 1px solid var(--line);
+      border-radius: 6px;
+      background: var(--panel);
+    }
+
+    .fallback {
+      display: grid;
+      place-items: center;
+      min-height: 420px;
+      padding: 32px;
+      color: var(--muted);
+      text-align: center;
+    }
+
+    .fallback p {
+      max-width: 560px;
+      margin: 0 0 18px;
+      line-height: 1.7;
+    }
+
+    @media (max-width: 760px) {
+      .topbar {
+        align-items: stretch;
+        flex-direction: column;
+        padding: 16px;
+      }
+
+      .actions {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+      }
+
+      .button {
+        padding-inline: 10px;
+      }
+
+      .viewer {
+        padding: 10px;
+      }
+
+      .pdf-frame {
+        height: calc(100vh - 238px);
+        min-height: 460px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <header class="topbar">
+    <div class="title">
+      <p class="eyebrow">Unofficial Codex Guide</p>
+      <h1>Codex 橙皮书</h1>
+      <p class="summary">从安装到实战案例的全链路使用指南</p>
+      <p class="reader-note">若下方预览未加载内容，请直接打开或下载 PDF。</p>
+    </div>
+    <nav class="actions" aria-label="阅读操作">
+      <a class="button primary" href="./Codex橙皮书.pdf" target="_blank" rel="noopener">打开 PDF</a>
+      <a class="button" href="./Codex橙皮书.pdf" download="Codex橙皮书.pdf">下载 PDF</a>
+      <a class="button" href="https://github.com/bozhouDev/codex-orange-book/blob/main/README.md">Markdown 原文</a>
+    </nav>
+  </header>
+
+  <main class="viewer">
+    <object class="pdf-frame" data="./Codex橙皮书.pdf#view=FitH" type="application/pdf" aria-label="Codex 橙皮书 PDF 在线阅读">
+      <div class="fallback">
+        <div>
+          <p>当前浏览器没有加载内嵌 PDF 预览。请直接打开 PDF，或下载到本地阅读。</p>
+          <a class="button primary" href="./Codex橙皮书.pdf" target="_blank" rel="noopener">打开 PDF</a>
+          <a class="button" href="./Codex橙皮书.pdf" download="Codex橙皮书.pdf">下载 PDF</a>
+        </div>
+      </div>
+    </object>
+  </main>
+</body>
+</html>
