Читатель аюрведы
Веб-приложение для чтения классических текстов аюрведы: 9 книг, 841 глава и более 34 500 стихов в оригинале, транслитерации и переводе. Я спроектировал интерфейс, собрал дизайн-систему со светлой и тёмной темами, нарисовал 91 иконок, продумал мобильную версию и реализовал всё на чистом JavaScript.
01 / масштаб и задача
Библиотека первоисточников, которую удобно читать на любом экране
Исходная задача — сделать читаемым то, что обычно читают в PDF и сканах: санскритский текст рядом с научной транслитерацией и переводом, комментарии, термины с пояснениями. Любой стих должен находиться за секунды, а длинная глава — читаться без усталости глаз.
Поэтому интерфейс устроен как книга и справочник одновременно: слева — оглавление и разделы, справа — спокойная колонка текста. Вокруг чтения выросли энциклопедия, глоссарии, домашние средства, расписание питания и тест конституции — и всё это живёт в одной системе компонентов.
02 / структура интерфейса
Левая навигация, одна колонка чтения и ничего лишнего
Экран собран из двух зон. Левая колонка шириной 280 px — навигация: логотип, переключатель языка и темы, поиск по всем книгам, выбор книги, главы по частям (стханам) и десять разделов приложения. Правая область — контент: на главной это приветствие и карточки книг, в читателе — узкая колонка текста с комфортной длиной строки.
Снизу закреплена тонкая полоса со ссылками на Telegram-канал и бот и счётчиком посетителей, а над ней — свёрнутый медицинский дисклеймер, который можно закрыть. На телефоне левая колонка превращается в выезжающее меню.
Анатомия карточки стиха
- Номер стиха11 px, 700, капитель с разрядкой 0,88 px, цвет --verse-num
- ДеванагариNoto Sans Devanagari, 18 px, интерлиньяж 36 px — санскрит читается крупно
- IASTGeorgia italic, 14 px, спокойный серо-коричневый — научная транслитерация
- ПереводGeorgia, 15,5 px, интерлиньяж 1,82 — основной смысловой слой
- Действияподелиться стихом, озвучить санскрит, русский или английский перевод (Web Speech API)
- Комментарийсворачиваемый блок «Комментарий» с зелёной полосой слева и автором
03 / экраны
Девять разделов — одна система
Разделы разные по содержанию, но собраны из одних и тех же деталей: те же карточки, чипы, поля поиска, иконки и отступы. Благодаря этому пользователь не учит интерфейс заново на каждом экране.
04 / дизайн-система
Полная дизайн-система: цвета, шрифты, иконки, компоненты и состояния
Дизайн-система живёт в CSS-переменных и одном общем наборе компонентов — на ней держатся все экраны. Ниже она разобрана целиком: токены цвета для двух тем, три шрифтовых семейства и типографическая шкала, 91 иконок, компоненты в живом виде, а также радиусы, тени, слои и анимации. Все примеры на этой странице — настоящий HTML, а не картинки.
Цвета
Тёплая «бумажная» палитра, светлая и тёмная темыПалитра построена вокруг тёплой бумаги и коричневой «чернильной» акцентной линии: фон — тёплый кремовый, текст — почти чёрный коричневый, акцент — тёмное золото. Холодных цветов в интерфейсе нет — их использует только цветовая кодировка иконок и три цвета дош в тесте. Все цвета заданы переменными на :root, а тёмная тема переопределяет их классом body.dark.
Светлая тема
Тёмная тема
Цвета дош в тесте конституции
Акцент меняется между темами: в светлой — #7a5c2e (тёмное золото), в тёмной — #c9a96e (светлое золото), так что контраст кнопок и ссылок сохраняется. Интерактивные состояния получают цвет из --bg-hover и --bg-active, а подсветка терминов — из --term-bg и --term-border.
Типографика
Georgia · system-ui · Noto Sans DevanagariВ системе три шрифтовых семейства, и у каждого своя роль. Georgia (serif) — для заголовков, перевода и транслитерации: он даёт «книжный» тон. 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, round caps и joins
- Цвет
- один цвет на иконку: подложка и контур
Меню разделов · 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
Теперь мы изложим главу Аюшкамия (стремление к долгой жизни) – так сказал Атрея и остальные мудрецы.
▸ КомментарийИ.И. Ветров
Подсветка терминов
…которые разрушил болезни, такие как рага (страсть) и моха (заблуждение)…
Карточки книг и разделов
Три типа конституции, как определить свой тип.
Ключевые растения: свойства, применение и дозировки.
Тест и таймлайн
Состояния
- 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). - Манифест: standalone-режим, иконки 192 и 512 px, maskable-иконки и ярлык «Аштанга-хридая».
- Офлайн-баннер сообщает, что доступны уже прочитанные книги.
- Cache busting: единая версия
?v=NNв index.html, app.js, books.js и sw.js.
Функции в браузере
- Поиск по всем книгам на клиенте с подсветкой совпадений и счётчиком результатов.
- Озвучка стиха через Web Speech API: санскрит (hi-IN), русский и английский.
- Share API для ссылки на стих, копирование ссылки.
- Настройки в localStorage: тема, размер текста, язык интерфейса.
- Двуязычность: интерфейс и данные имеют русские и английские поля (*_en).
Серверная часть
- Кабинет эксперта: вход через Telegram Login Widget, без паролей; правки глав и краудсорс-предложения.
- Backend: serverless-функции на Vercel; если они недоступны, сайт остаётся статикой.
- AI-помощник: поиск по загруженным стихам и вызов Gemini API.
- Telegram-бот и канал: подписка и ежедневный пост со стихом.
- Аналитика: счётчик посетителей и Яндекс.Метрика.
| Файл | Размер | Назначение |
|---|---|---|
| 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 / доступность и детали
Внимание к мелочам: от skip-ссылки до озвучки
- Ссылка «Перейти к содержанию» в начале страницы и осмысленные aria-метки на кнопках.
- Live-регион для скринридеров и отдельный офлайн-баннер с role=status.
- Размер текста — четыре уровня, выбор сохраняется.
- Тёмная тема для чтения вечером.
- Озвучка стиха: санскрит, русский, английский.
- Видимый фокус с клавиатуры и подсказки (tooltip) у иконок-действий.
- Медицинский дисклеймер, который можно закрыть, но он всегда доступен.
- Блок источников в каждой статье энциклопедии.
08 / SEO и метаданные
Что видит поисковик
У страницы расширенные метаданные: title и description с ключевыми запросами («классические самхиты аюрведы», «Аштанга-хридая», «Чарака-самхита», «тест пракрити»), canonical, Open Graph и Twitter Card с картинкой 1200×630, 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 / другие проекты услуги
▸ КомментарийИ.И. Ветров