Skip to content

[codex] Add GitHub Pages PDF reader #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
ziyu111777 wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

[codex] Add GitHub Pages PDF reader #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-使用说明)
Expand Down
203 changes: 203 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>