01 / 规模与任务
一座在任何屏幕上都易读的原典图书馆
最初的任务，是让人们通常在 PDF 和扫描件里读的内容变得易读：梵文原文旁边是学术转写和译文，还有注释和带说明的术语。任何一颂都应该几秒钟内找到，长长的一章读起来也不累眼睛。
因此界面同时像一本书和一本工具书：左侧是目录和栏目，右侧是安静的文字栏。围绕阅读，逐渐长出了百科、词汇表、家庭疗法、饮食时间表和体质测试——它们都生活在同一套组件系统里。
02 / 界面结构
左侧导航、单栏阅读，别无多余
屏幕由两个区域构成。宽280 px 的左栏是导航：标志、语言与主题切换、全书搜索、选书、按部分（sthana）列出的章节，以及十个应用栏目。右侧是内容区：首页是欢迎语和书籍卡片，阅读器里则是行宽舒适的窄文字栏。
底部固定着一条细栏，含 Telegram 频道和机器人的链接以及访客计数器；上方是可关闭的折叠式医疗免责声明。在手机上，左栏会变成滑出式菜单。
颂卡片的构成
- 颂编号11 px，700，小型大写，字距 0.88 px，颜色 --verse-num
- 天城体Noto Sans Devanagari，18 px，行高 36 px——梵文以大字号呈现
- IASTGeorgia 斜体，14 px，安静的灰褐色——学术转写
- 译文Georgia，15.5 px，行高 1.82——主要的意义层
- 操作分享这一颂，朗读梵文、俄文或英文译文（Web Speech API）
- 注释可折叠的“注释”块，左侧有绿色竖条并标注作者
03 / 界面截图
九个栏目——一套系统
各栏目内容不同，但都由同样的部件构成：同样的卡片、芯片、搜索框、图标和间距。这样用户不必在每个屏幕上重新学习界面。
04 / 设计系统
完整的设计系统：颜色、字体、图标、组件与状态
设计系统存在于 CSS 变量和一套共用组件中——所有屏幕都建立在它之上。下面对它做完整拆解：两种主题的颜色变量、三个字体族与字阶、91个图标、实时组件，以及圆角、阴影、层级和动画。本页的所有示例都是真正的 HTML，而不是图片。
颜色
温暖的“纸张”色板，浅色与深色主题色板围绕温暖的纸张和褐色“墨水”强调线构建：背景是温暖的奶油色，文字是近黑的褐色，强调色是深金色。界面中没有冷色——只有图标的颜色编码和测试中的三种 dosha 颜色会用到。所有颜色都是 :root 上的变量，深色主题通过 body.dark 类覆盖它们。
浅色主题
深色主题
体质测试中的 dosha 颜色
强调色会随主题变化：浅色中为 #7a5c2e（深金色），深色中为 #c9a96e（浅金色），以保持按钮和链接的对比度。交互状态的颜色取自 --bg-hover 和 --bg-active，术语高亮则取自 --term-bg 和 --term-border。
字体排印
Georgia · system-ui · Noto Sans Devanagari系统有三个字体族，各司其职。Georgia（衬线体）用于标题、译文和转写：带来“书本”的语气。system-ui 用于界面和正文：操作系统自带字体，无需加载。Noto Sans Devanagari 是唯一需要加载的字体，用于梵文。
| 角色 | 字体族 | 字号 / 行高 | 字重 | 样式 / 字距 |
|---|---|---|---|---|
| 标题 | Georgia, Times New Roman, serif | 27–32 px / 34–38 px | 700 | 常规 |
| 正文 | system-ui, -apple-system, sans-serif | 15–16 px / 27 px | 400 | 常规 |
| 梵文 | Noto Sans Devanagari, serif | 18 px / 36 px | 400 | +0.36 px |
| IAST 与译文 | Georgia | 14–15.5 px / 25–28 px | 400 | IAST 用斜体，+0.14 px |
| 标签 | system-ui | 9–11 px / 16 px | 700 | 小型大写，+0.8–1 px |
| 按钮与输入框 | Arial | 11–13 px | 600 | +0.24–0.33 px |
四档阅读字号
用户通过“A”按钮选择文字大小，并保存在浏览器中：缩放会作用于正文和所有衍生字号。
小
标准
大
特大
图标
91个线性 SVG，统一风格所有图标都按统一风格重新绘制：24×24网格，1.8 px 圆端线条，以及圆角为6.5、透明度16%的彩色圆角底板。底板和线条用同一种颜色，每个图标各有自己的颜色。这有助于眼睛区分栏目，也让菜单整齐划一。图标以 JS 字典“键 → 颜色 + 轮廓”存储，并通过一个函数插入界面。
- 网格
- 24 × 24 px，viewBox 0 0 24 24
- 底板
- rect 21 × 21，rx 6.5，fill-opacity 0.16
- 线条
- stroke 1.8，圆端点与圆连接
- 颜色
- 每个图标一种颜色：底板与轮廓
栏目菜单 · 11
界面 · 17
典籍 · 9
饮食时间表 · 9
百科 · 45
图标在浅色和深色主题下看起来一致：底板是半透明的，所以会“染上”背景的颜色。
组件
按钮、输入框、卡片、颂、注释、测试组件由同样的变量实时搭建——把鼠标移上去就能看到各种状态。下面是主要的几种。
按钮、芯片与开关
所有交互元素都是圆角为8–20 px 的“胶囊”或方块；激活状态用 --bg-active 填充，主要操作用强调色。
输入框与选书
搜索正文…选择典籍
栏目菜单
栏目
章节列表
第1颂
रागादि-रोगान् सततानुषक्तान् अ-शेष-काय-प्रसृतान् अ-शेषान्
rāgādi-rogān satatānuṣaktān a-śeṣa-kāya-prasṛtān a-śeṣān
现在我们来讲述“长寿的追求”这一章——阿低哩耶和其他圣者如是说。
第1颂
रागादि-रोगान् सततानुषक्तान् अ-शेष-काय-प्रसृतान् अ-शेषान्
rāgādi-rogān satatānuṣaktān a-śeṣa-kāya-prasṛtān a-śeṣān
现在我们来讲述“长寿的追求”这一章——阿低哩耶和其他圣者如是说。
▸ 注释I.I. 韦特罗夫
术语高亮
……他消除了诸如 raga（贪欲）和 moha（迷惑）之类的疾病……
典籍与栏目卡片
三种体质类型，以及如何判断自己的类型。
主要植物：特性、用法与剂量。
测试与时间轴
状态
- Default平静状态
- Hover--bg-hover，强调色边框，卡片上浮2 px
- Active--bg-active 与更粗的文字
- Focusfocus-visible：轮廓；输入框为强调色边框
- Disabledopacity 0.4
- Playing朗读按钮上的 --accent-glow
间距、圆角、阴影、层级、动画
系统的其余变量除了颜色和字体，系统还描述形状与行为：哪些元素用什么圆角，卡片“躺”得有多深，什么压在什么之上，以及一切如何动起来。
| 圆角 | |
|---|---|
| 2–4 px | 术语高亮、小元素 |
| 8 px | --radius：按钮、输入框、颂卡片 |
| 10–14 px | 典籍与栏目卡片、操作按钮 |
| 16–20 px | 芯片、章节标题按钮 |
| 24 px 与 999 px | 胶囊、进度条与开关 |
| 50% | 圆形图标与头像 |
| 阴影 | |
|---|---|
| --shadow-sm | 0 1px 3px rgba(0,0,0,.06) |
| --shadow-md | 0 4px 16px rgba(0,0,0,.08) |
| Popover | 0 6px 24px rgba(0,0,0,.25) |
| Modal | 0 12px 48px rgba(0,0,0,.3) |
| Sidebar | 4px 0 32px rgba(0,0,0,.22) |
| Focus ring | 0 0 0 2px var(--accent) |
| z-index 层级 | |
|---|---|
| 10 | 吸附元素 |
| 200–300 | 左侧面板与遮罩 |
| 350–500 | 弹窗与聊天 |
| 9000–9999 | 提示与横幅 |
| 动画与过渡 | |
|---|---|
| --transition | 0.18s ease——悬停与状态 |
| versePulse | 通过链接跳转时的颂高亮 |
| verseTargetPulse | 目标颂的柔和脉动 |
| chatDots | 聊天机器人的输入指示 |
| 断点 | |
|---|---|
| ≤ 700 px | 主栏、列表、卡片 |
| ≤ 640 px | 章节标题、按钮、密度 |
| ≤ 600 px | 左侧面板变成滑出式菜单 |
深色主题
body.dark · 变量覆盖深色主题不是简单反色，而是一套独立的色板：背景变为深褐色，强调色变为浅金色，卡片比背景略亮。切换开关位于左侧面板顶部，所选主题会记在浏览器中。图片和图标不变：图标底板是透明的。
05 / 移动端版本
手机是主要的阅读场景
大多数人用手机阅读，所以移动端版本不是缩小的桌面版。左侧面板变成滑出式菜单，阅读界面占满整个宽度，长列表会折叠。
06 / 技术说明
不使用打包工具的纯 JavaScript 静态网站
该应用是一个静态单页网站：HTML、一个 CSS 文件和 ES 模块，没有框架，也没有构建环节。它直接在浏览器中打开，无需注册，首次访问后可作为 PWA 离线使用。
架构
- 单页网站，采用哈希路由：形如
#ashtanga/c0的链接会指向具体章节。 - ES 模块：app.js 是核心，books.js 是典籍注册表，另有 glossary、diseases、quiz、foodtable、cabinet、chatbot、icons。
- 数据：每本书是单独的文件，打开时才加载，因此首屏很轻。
- 文本摘自印刷版本，统一为“原文 → IAST → 译文”的格式。
PWA 与离线
- Service worker：静态资源 Cache First，数据 Network First；缓存带版本号（
ayurveda-v565）。 - Manifest：standalone 模式、192 和 512 px 图标、maskable 图标以及“八支心要”快捷方式。
- 离线横幅提示已读过的书籍仍可使用。
- Cache busting：index.html、app.js、books.js 和 sw.js 中统一的
?v=NN版本号。
浏览器端功能
- 搜索：在客户端检索全部典籍，匹配处高亮，并显示结果数量。
- 朗读：通过 Web Speech API 朗读颂文——梵文（hi-IN）、俄文和英文。
- Share API：分享颂的链接，也可复制链接。
- 设置保存在 localStorage：主题、文字大小、界面语言。
- 双语：界面和数据都有俄文与英文字段（*_en）。
服务端
- 专家后台：通过 Telegram Login Widget 登录，无需密码；章节修订和众包建议。
- 后端：Vercel 上的 serverless 函数；若不可用，网站仍保持静态。
- AI 助手：检索已加载的颂文并调用 Gemini API。
- Telegram 机器人与频道：订阅和附带颂文的每日推送。
- 统计：访客计数器和 Yandex.Metrica。
| 文件 | 大小 | 用途 |
|---|---|---|
| style.css | ~92 KB | 唯一的样式文件：变量、组件、两种主题、3个断点 |
| app.js | ~201 KB | 核心：路由、阅读、搜索、朗读、设置 |
| books.js | ~244 KB | 九部典籍的注册表，部分与章节名称（RU/EN） |
| glossary.js | ~206 KB | 397个梵语术语与文中提示 |
| quiz.js | ~21 KB | 60道题与体质计分 |
| icons.js | ~14 KB | 91个图标与 icon(key) 函数 |
| sw.js | ~3 KB | 用于离线模式的 service worker |
代码片段：作为函数的图标
// 键 → 颜色与轮廓；底板和线条共用同一种颜色 export function icon(key) { const [c, paths] = G[key]; return `<svg class="app-icon" viewBox="0 0 24 24" fill="none"> <rect x="1.5" y="1.5" width="21" height="21" rx="6.5" fill="${c}" fill-opacity="0.16"/> <g stroke="${c}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${paths}</g></svg>`; }
07 / 无障碍与细节
注重细节：从跳转链接到朗读
- 页面开头有“跳到内容”链接，按钮上有有意义的 aria 标签。
- 为读屏软件提供的 live region，以及带 role=status 的独立离线横幅。
- 文字大小分四档，选择会被保存。
- 适合晚上阅读的深色主题。
- 颂的朗读：梵文、俄文、英文。
- 清晰可见的键盘焦点，以及操作图标上的提示。
- 可关闭但始终可用的医疗免责声明。
- 每篇百科文章都有出处区块。
08 / SEO 与元数据
搜索引擎看到的内容
页面带有扩展的元数据：含关键搜索词（“阿育吠陀经典文献”“八支心要”“遮罗迦本集”“体质测试”）的 title 和 description、canonical、带1200×630图片的 Open Graph 和 Twitter Card、manifest 以及主屏幕图标。站内搜索和百科文章为文本带来大量长尾搜索词。
- Title：“阿育吠陀经典文献——免费在线图书馆”
- 含数字的 description：颂、典籍、词汇表、百科
- Open Graph 与 Twitter Card，1200×630图片
- Canonical、manifest、apple-touch-icon
- 关键词：阿育吠陀、本集、八支心要、遮罗迦、妙闻
09 / 链接
在线项目与源代码
| 网站 | ayurvedareader.ru |
| 源代码 | github.com/maksutovdesign/ayurveda-reader |
| Telegram 频道 | @AyurvedaReader |
| Telegram 机器人 | @AyurvedaReaderBot |
| 项目页面 | 阿育吠陀读本——产品与开发 |
洽谈项目
10 / 本服务的其他项目
▸ 注释I.I. 韦特罗夫