Заготовки для вёрстки
Компоненты тетрадки
Заготовки для вёрстки остальных страниц. Каждый компонент — разметка, стиль и скрипт; на вход — данные JSON. Ниже живой пример на условных данных и код вызова: скопируйте, замените данные, вставьте на страницу или в notebook.json. Подробно — library/notebook/HANDOFF.md.
Графики спроса
Яндекс — всегда первый цвет, Google — второй, на всех страницах.
Спрос по направлениям: Яндекс и Google рядом demand-directions
Сравнить спрос по направлениям и поисковикам. Строка — направление, две полосы — Яндекс и Google; вторая очередь (памятники, уборка) отделена от основных.
Код вызова
<figure class="nb-c" data-nb="demand-directions"><script type="application/json">
{
"title": "Спрос по направлениям: Яндекс и Google",
"subtitle": "Гомель, запросов в месяц; Яндекс — точная частота Wordstat, Google — средний объём за 12 месяцев",
"series": [
{
"key": "yandex",
"label": "Яндекс"
},
{
"key": "google",
"label": "Google"
}
],
"groups": {
"main": "Основные направления",
"second": "Вторая очередь — решение через 2–3 месяца"
},
"rows": [
{
"label": "Организация похорон под ключ",
"sub": "похороны гомель, организация похорон",
"yandex": 1840,
"google": 760
},
{
"label": "Морг, документы, пособие",
"yandex": 980,
"google": 520
},
{
"label": "Ритуальные товары",
"sub": "гробы, венки, одежда",
"yandex": 720,
"google": 190
},
{
"label": "Перевозка умершего",
"sub": "по городу, межгород, груз 200",
"yandex": 610,
"google": 240
},
{
"label": "Кремация",
"yandex": 540,
"google": 310
},
{
"label": "Поминальные обеды",
"yandex": 430,
"google": 150
},
{
"label": "Отпевание",
"yandex": 120,
"google": 40
},
{
"label": "Договор заранее",
"yandex": 60,
"google": null,
"note": "Google: фраз с объёмом нет"
},
{
"label": "Памятники и ограды",
"yandex": 2100,
"google": 980,
"group": "second"
},
{
"label": "Благоустройство и уход за могилами",
"yandex": 380,
"google": 120,
"group": "second"
}
],
"source": {
"text": "Wordstat (регион 155), Topvisor Google (Беларусь)",
"ids": [
"WB-0110",
"WB-0111"
],
"date": "2026-11-10",
"label": "ok"
}
}
</script></figure>Сезонность: месяцы, индекс среднего seasonality
Как спрос меняется по месяцам. Ряды разного масштаба — с "index": true (среднее = 100), чтобы не было второй оси.
Код вызова
<figure class="nb-c" data-nb="seasonality"><script type="application/json">
{
"title": "Сезонность спроса",
"index": true,
"x": [
"2025-11",
"2025-12",
"2026-01",
"2026-02",
"2026-03",
"2026-04",
"2026-05",
"2026-06",
"2026-07",
"2026-08",
"2026-09",
"2026-10"
],
"series": [
{
"key": "yandex",
"label": "Яндекс",
"values": [
8200,
9100,
9800,
9400,
8700,
8300,
8100,
7900,
7700,
7800,
8000,
8400
]
},
{
"key": "google",
"label": "Google",
"values": [
3100,
3450,
3900,
3650,
3300,
3150,
3000,
2950,
2880,
2980,
3050,
3250
]
}
],
"source": {
"text": "Wordstat, история по месяцам; Topvisor Google",
"ids": [
"WB-0110",
"WB-0111"
],
"date": "2026-11-10",
"label": "ok"
}
}
</script></figure>Сезонность: один ряд в абсолютных числах seasonality
Один ряд — без индекса: заливка под линией, подпись последнего значения.
Код вызова
<figure class="nb-c" data-nb="seasonality"><script type="application/json">
{
"title": "Яндекс: «похороны гомель», точная частота",
"x": [
"2025-11",
"2025-12",
"2026-01",
"2026-02",
"2026-03",
"2026-04",
"2026-05",
"2026-06",
"2026-07",
"2026-08",
"2026-09",
"2026-10"
],
"series": [
{
"key": "ya",
"label": "Яндекс",
"values": [
760,
860,
930,
890,
820,
790,
770,
750,
730,
740,
760,
820
]
}
],
"source": {
"text": "Wordstat, регион 155",
"id": "WB-0110",
"date": "2026-11-10",
"label": "ok"
}
}
</script></figure>Гомель и область geo-split
Какая часть спроса области приходится на город. Длина полосы — вся область, синий отрезок — город, процент — доля города.
Код вызова
<figure class="nb-c" data-nb="geo-split"><script type="application/json">
{
"title": "Гомель и область",
"subtitle": "Яндекс, запросов в месяц: длина полосы — вся область, синим — город",
"parts": {
"city": "Гомель (регион 155)",
"rest": "Остальная область"
},
"groups": {
"main": "Срочные услуги",
"second": "Вторая очередь"
},
"rows": [
{
"label": "Организация похорон",
"city": 1840,
"region": 2950
},
{
"label": "Морг и документы",
"city": 980,
"region": 1510
},
{
"label": "Перевозка умершего",
"city": 610,
"region": 1160
},
{
"label": "Кремация",
"city": 540,
"region": 690
},
{
"label": "Памятники и ограды",
"city": 2100,
"region": 3900,
"group": "second"
}
],
"source": {
"text": "Wordstat, регионы 155 и 29631",
"id": "WB-0110",
"date": "2026-11-10",
"label": "ok"
}
}
</script></figure>Директ
Деньги — с валютой; курс и дата пересчёта — в подписи.
CPC и бюджет по группам direct-groups
Обсуждение рекламы: сколько стоит клик и сколько уйдёт в месяц по каждой группе. Две столбиковые колонки — у каждой своя шкала, без второй оси.
Код вызова
<figure class="nb-c" data-nb="direct-groups"><script type="application/json">
{
"title": "Директ: ставки и бюджет по группам",
"currency": "₽",
"period": "месяц",
"position": "вход в спецразмещение",
"rate": "Курс для пересчёта в BYN — НБРБ на дату прогноза",
"rows": [
{
"group": "Организация похорон",
"shows": 12400,
"clicks": 610,
"cpc": 48.5,
"budget": 29585
},
{
"group": "Ритуальные услуги",
"shows": 9800,
"clicks": 420,
"cpc": 41.2,
"budget": 17304
},
{
"group": "Перевозка умершего",
"shows": 3100,
"clicks": 150,
"cpc": 63,
"budget": 9450
},
{
"group": "Кремация",
"shows": 2600,
"clicks": 140,
"cpc": 37.5,
"budget": 5250
},
{
"group": "Морг и документы",
"shows": 5200,
"clicks": 230,
"cpc": 22.4,
"budget": 5152
},
{
"group": "Ритуальные товары",
"shows": 4300,
"clicks": 160,
"cpc": 18.9,
"budget": 3024
}
],
"source": {
"text": "JSON SEO direct-forecast, регион 155",
"id": "WB-0112",
"date": "2026-11-10",
"label": "ok"
}
}
</script></figure>Воронка «показы → клики → бюджет» funnel
Показать, как из показов получаются клики и деньги. Допущения (конверсия в звонок) — отдельной строкой с меткой.
Код вызова
<figure class="nb-c" data-nb="funnel"><script type="application/json">
{
"title": "Воронка Директа за месяц",
"subtitle": "сумма по шести группам, вход в спецразмещение",
"stages": [
{
"label": "Показы",
"value": 37400,
"unit": "показов"
},
{
"label": "Клики",
"value": 1710,
"unit": "кликов"
},
{
"label": "Бюджет",
"value": 69765,
"unit": "₽ в месяц",
"kind": "money",
"formula": "1 710 кликов × 40,80 ₽ — средняя цена клика"
}
],
"steps": [
{
"label": "CTR",
"value": "4,6 %"
},
{
"label": "CPC",
"value": "40,80 ₽"
}
],
"extra": [
{
"label": "Звонков при конверсии 8 %:",
"value": 137,
"unit": "в месяц",
"tag": "мнение",
"note": "конверсия — допущение, настоящую знает владелец"
}
],
"source": {
"text": "JSON SEO direct-forecast, регион 155",
"id": "WB-0112",
"date": "2026-11-10"
}
}
</script></figure>Конкуренты
Таблица-сравнение с сортировкой compare-table
Сравнить конкурентов по одинаковым признакам. Клик по заголовку сортирует; наша строка подсвечена; пустая клетка с меткой «владелец» ждёт его данных.
Код вызова
<figure class="nb-c" data-nb="compare-table"><script type="application/json">
{
"title": "Конкуренты: сравнение",
"subtitle": "цены «от» — минимальный пакет на сайте; состав пакетов различается",
"sortBy": "reviews",
"order": "desc",
"highlight": "Мы",
"columns": [
{
"key": "name",
"label": "Компания",
"link": "href"
},
{
"key": "sites",
"label": "Сайтов",
"type": "number"
},
{
"key": "price",
"label": "Под ключ, от",
"unit": "BYN",
"type": "money"
},
{
"key": "cremation",
"label": "Кремация",
"type": "bool"
},
{
"key": "intercity",
"label": "Межгород",
"type": "bool"
},
{
"key": "rating",
"label": "Рейтинг",
"type": "rating"
},
{
"key": "reviews",
"label": "Отзывов",
"type": "number"
},
{
"key": "direct",
"label": "Директ",
"type": "bool"
},
{
"key": "check",
"label": "Проверка",
"type": "label",
"sort": false
}
],
"rows": [
{
"name": "Компания А",
"href": "docs/C01-01_kompaniya-a.html",
"sites": 2,
"price": {
"value": 1450,
"label": "ok"
},
"cremation": true,
"intercity": true,
"rating": 4.6,
"reviews": 312,
"direct": true,
"check": "ok"
},
{
"name": "Компания Б",
"href": "docs/C01-02_kompaniya-b.html",
"sites": 1,
"price": {
"value": 1100,
"label": "part"
},
"cremation": false,
"intercity": true,
"rating": 4.2,
"reviews": 87,
"direct": true,
"check": "part"
},
{
"name": "Компания В",
"sites": 1,
"price": 980,
"cremation": false,
"intercity": false,
"rating": 3.9,
"reviews": 41,
"direct": false,
"check": "ok"
},
{
"name": "Компания Г",
"sites": 3,
"price": {
"value": 1700,
"label": "unk"
},
"cremation": true,
"intercity": true,
"rating": 4.8,
"reviews": 520,
"direct": true,
"check": "part"
},
{
"name": "Компания Д",
"sites": 1,
"price": null,
"cremation": null,
"intercity": false,
"rating": 4.1,
"reviews": 19,
"direct": false,
"check": "unk"
},
{
"name": "Мы",
"sites": 2,
"price": {
"value": null,
"label": "own"
},
"cremation": true,
"intercity": true,
"rating": null,
"reviews": null,
"direct": false,
"check": "own"
}
],
"source": {
"text": "сайты компаний и карты",
"ids": [
"WB-0201",
"WB-0202",
"WB-0205"
],
"date": "2026-11-10"
}
}
</script></figure>Карта позиционирования: две оси positioning-map
Показать, где кто стоит по двум оценкам (цена × полнота услуг). Это мнение — основание оценки пишется под картой.
Код вызова
<figure class="nb-c" data-nb="positioning-map"><script type="application/json">
{
"title": "Карта позиционирования",
"subtitle": "оценка 0–10 по двум осям",
"x": {
"label": "Цена",
"min": "дешевле",
"max": "дороже"
},
"y": {
"label": "Полнота услуг",
"min": "базовый набор",
"max": "под ключ"
},
"domain": [
0,
10
],
"quadrants": [
"Дёшево и под ключ",
"Дорого и под ключ",
"Дёшево и базово",
"Дорого и базово"
],
"points": [
{
"label": "Компания А",
"x": 7.2,
"y": 8.1,
"note": "пакет от 1 450 BYN, свой транспорт"
},
{
"label": "Компания Б",
"x": 4.1,
"y": 6.2,
"note": "дешевле за счёт базового пакета"
},
{
"label": "Компания В",
"x": 2.8,
"y": 3.4,
"note": "только перевозка и товары"
},
{
"label": "Компания Г",
"x": 8.4,
"y": 8.8,
"note": "зал прощания, кремация, межгород"
},
{
"label": "Компания Д",
"x": 6.1,
"y": 3.9,
"note": "цен на сайте нет"
},
{
"label": "Мы",
"x": 5,
"y": 7.6,
"self": true,
"note": "положение — гипотеза до цен владельца"
}
],
"basis": "Положение — оценка по ценам с сайтов и составу услуг, не факт: шкалы и баллы объяснены в документе C00-01.",
"source": {
"text": "оценка по сайтам компаний",
"ids": [
"WB-0201",
"WB-0202",
"WB-0203"
],
"date": "2026-11-10"
}
}
</script></figure>Карточка конкурента competitor-card
Сводка по одному конкуренту в начале его документа: юрлицо, сайты, цены с пруфами, обещания, реклама, сильное и слабое.
Код вызова
<figure class="nb-c" data-nb="competitor-card"><script type="application/json">
{
"name": "Компания А",
"legal": {
"text": "ООО «Пример А», УНП 000000000",
"label": "ok",
"source": "WB-0204"
},
"region": "Гомель, круглосуточно",
"sites": [
{
"url": "https://example.com/a",
"note": "основной"
},
{
"url": "https://example.com/a/promo",
"note": "посадочная для Директа"
}
],
"stats": [
{
"label": "Под ключ, от",
"value": "1 450 BYN",
"check": "ok",
"note": "базовый пакет"
},
{
"label": "Рейтинг",
"value": "4,6",
"check": "ok",
"note": "312 отзывов на картах"
},
{
"label": "Выдача",
"value": "Я 2 · G 4",
"note": "«похороны гомель»"
},
{
"label": "Реклама",
"value": "Директ",
"check": "ok",
"note": "спецразмещение"
}
],
"services": [
"Организация похорон",
"Перевозка",
"Кремация",
"Ритуальные товары",
"Поминальные обеды"
],
"second": [
"Памятники",
"Уход за могилами"
],
"prices": [
{
"item": "Похороны «под ключ»",
"value": "от 1 450 BYN",
"check": "ok",
"url": "https://example.com/a/ceny",
"date": "2026-11-10"
},
{
"item": "Перевозка по городу",
"value": "120 BYN",
"check": "ok",
"source": "WB-0201"
},
{
"item": "Перевозка в другой город",
"value": "1,4 BYN/км",
"check": "part",
"date": "2025-06-01"
}
],
"promises": [
{
"text": "Приедем за 30 минут в любой район",
"check": "op",
"source": "WB-0101"
}
],
"ads": [
{
"text": "Ключи: «похороны гомель», «ритуальные услуги гомель»",
"check": "ok",
"source": "WB-0101",
"date": "2026-11-10"
}
],
"strengths": [
"Два сайта и реклама по всем главным ключам",
"Много отзывов, высокий рейтинг"
],
"weaknesses": [
"Состав пакета «под ключ» на сайте не расписан",
"Доплаты сверх пакета — частая жалоба в отзывах"
],
"sources": [
"WB-0201",
"WB-0204",
"WB-0205"
],
"updated": "2026-11-10"
}
</script></figure>Фактчек
Метки решения 002: ✓ подтверждено, ~ частично, ✗ опровергнуто, ? не найдено, мнение, владелец. Цвет всегда вместе со значком или словом.
Плашки меток в тексте и легенда labels
В документах генератор ставит плашки сам из [✓] [~] [✗] [?] [без основания] [мнение] [владелец]. Вручную — в своих блоках; легенда — там, где читатель видит метки впервые.
Цена базового пакета — от 1 450 BYN (WB-0201, открыто 10.11.2026). Перевозка в другой город — 1,4 BYN/км : цена 2025 года. Тезис исследования без ссылки без основания. Обещание «приедем за 30 минут» мнение, маржа на заказе владелец. Кремация в Гомеле , цена поминального обеда .
Код вызова
В тексте документа метки пишутся как есть — генератор сам превращает их в плашки:
Цена — от 1 450 BYN [✓] (WB-0201, https://example.com/a/ceny, 10.11.2026: «цитата»).
Тезис без пруфа [без основания], обещание [мнение], маржа [владелец].
Плашка вручную (HTML):
<span class="nb-l is-icon" data-l="ok" title="подтверждено"><span class="nb-vh">подтверждено</span></span>
<span class="nb-l" data-l="unfounded" title="неподтверждённый тезис исследования">без основания</span>
<span class="nb-l" data-l="own" title="знает только владелец">владелец</span>
data-l: ok ✓ · part ~ · no ✗ · unk ? · unfounded без основания · op мнение · own владелец
Легенда меток (компонент):
<div class="nb-c" data-nb="labels"><script type="application/json">{}</script></div>
<div class="nb-c" data-nb="labels"><script type="application/json">{ "wide": true, "items": ["ok", "part", "no", "unk", "unfounded"] }</script></div>Счётчик статусов по блоку status-counter
Сколько утверждений блока или документа проверено и с каким итогом. Процент считается от проверяемых (✓ ~ ✗ ? без основания), мнения и данные владельца — отдельно.
Код вызова
<figure class="nb-c" data-nb="status-counter"><script type="application/json">
{
"title": "Блок C — проверка фактов",
"counts": {
"ok": 48,
"part": 12,
"no": 5,
"unk": 9,
"unfounded": 4,
"op": 21,
"own": 6
}
}
</script></figure>Счётчик статусов, компактный status-counter
В карточке блока, в шапке документа, в строке списка — без заголовка и процента.
Код вызова
<figure class="nb-c" data-nb="status-counter"><script type="application/json">
{
"counts": {
"ok": 14,
"part": 3,
"no": 1,
"unk": 2,
"unfounded": 1,
"op": 4,
"own": 2
},
"compact": true
}
</script></figure>Мнение 1 / Мнение 2 → проверка → итог opinions
Два и больше мнений из разных материалов по одному вопросу. В документах собирается сам из абзацев «**Мнение N** (источники): …», «Проверка: …», «Итог: …».
Код вызова
<figure class="nb-c" data-nb="opinions"><script type="application/json">
{
"topic": "Что приносит клиентов: срочный вызов или договор заранее",
"opinions": [
{
"n": 1,
"sources": [
"NB-S04",
"LG-012"
],
"text": "Основной поток — срочные обращения в первые часы: человек ищет «ритуальные услуги» и звонит первому, кто ответил.",
"check": {
"label": "ok",
"text": "Срочные запросы — 71 % спроса на тему похорон в Wordstat за 12 месяцев.",
"url": "https://example.com/wordstat/155",
"date": "2026-11-10",
"sources": [
"WB-0110"
]
}
},
{
"n": 2,
"sources": [
"NB-S13"
],
"text": "Главный рост — договоры «заранее»: их продают как страховку, это стабильные деньги.",
"check": {
"label": "no",
"text": "На «похороны заранее» — около 60 запросов в месяц, в тридцать раз меньше срочных.",
"url": "https://example.com/wordstat/155-zaranee",
"date": "2026-11-10",
"sources": [
"WB-0113"
]
}
}
],
"verdict": {
"winner": 1,
"label": "ok",
"text": "Подтверждено мнение 1: реклама и сайт строятся под срочный вызов, «заранее» — второй сценарий."
},
"emphasis": {
"model": "claude-opus-5.5",
"text": "Материалы S13 делают «заранее» главным направлением роста; по спросу это второстепенный сценарий, решение лучше отложить до данных владельца."
}
}
</script></figure>Числа и пруфы
KPI-плитки kpi
Три–четыре главных числа страницы. Изменение — к названному периоду; цвет — хорошо или плохо, а не вверх или вниз. Без числа — плитка ждёт данных.
Код вызова
<figure class="nb-c" data-nb="kpi"><script type="application/json">
{
"tiles": [
{
"label": "Спрос в Гомеле, Яндекс",
"value": 9640,
"unit": "запросов/мес",
"delta": {
"value": 6.5,
"unit": "%",
"vs": "к прошлому году",
"good": "up"
},
"spark": [
8200,
9100,
9800,
9400,
8700,
8300,
8100,
7900,
7700,
7800,
8000,
8400
],
"source": "WB-0110",
"date": "2026-11-10",
"check": "ok"
},
{
"label": "Спрос в Гомеле, Google",
"value": 3980,
"unit": "запросов/мес",
"delta": {
"value": -2.1,
"unit": "%",
"vs": "к прошлому году",
"good": "up"
},
"spark": [
3100,
3450,
3900,
3650,
3300,
3150,
3000,
2950,
2880,
2980,
3050,
3250
],
"source": "WB-0111",
"date": "2026-11-10",
"check": "part"
},
{
"label": "Средняя цена клика в Директе",
"value": 40.8,
"unit": "₽",
"type": "money",
"digits": 2,
"basis": "вход в спецразмещение",
"source": "WB-0112",
"date": "2026-11-10",
"check": "ok"
},
{
"label": "Средний чек «Содействия»",
"value": null,
"unit": "BYN",
"check": "own"
}
]
}
</script></figure>Таблица с числами num-table
Точные числа: выравнивание вправо, единицы в заголовке, итог, источник и дата под таблицей; полоска в ячейке — для одной главной колонки.
Код вызова
<figure class="nb-c" data-nb="num-table"><script type="application/json">
{
"title": "Самые частые запросы по Гомелю",
"subtitle": "запросов в месяц; CPC — прогноз Директа, вход в спецразмещение",
"bars": [
"ya_exact"
],
"columns": [
{
"key": "phrase",
"label": "Запрос"
},
{
"key": "ya_exact",
"label": "Яндекс, точная",
"type": "number",
"unit": "в мес"
},
{
"key": "ya_base",
"label": "Яндекс, базовая",
"type": "number",
"unit": "в мес"
},
{
"key": "google",
"label": "Google",
"type": "number",
"unit": "в мес"
},
{
"key": "cpc",
"label": "CPC",
"type": "money",
"unit": "₽",
"digits": 2
},
{
"key": "check",
"label": "Проверка",
"type": "label"
}
],
"rows": [
{
"phrase": "похороны гомель",
"ya_exact": 820,
"ya_base": 1640,
"google": 390,
"cpc": 48.5,
"check": "ok"
},
{
"phrase": "ритуальные услуги гомель",
"ya_exact": 610,
"ya_base": 1380,
"google": 720,
"cpc": 41.2,
"check": "ok"
},
{
"phrase": "морг гомель",
"ya_exact": 540,
"ya_base": 990,
"google": 260,
"cpc": 22.4,
"check": "ok"
},
{
"phrase": "кремация гомель",
"ya_exact": 310,
"ya_base": 540,
"google": 170,
"cpc": 37.5,
"check": "part"
},
{
"phrase": "перевозка умершего гомель",
"ya_exact": 140,
"ya_base": 330,
"google": null,
"cpc": 63,
"check": "unk"
}
],
"total": {
"phrase": "Всего по пяти фразам",
"ya_exact": 2420,
"ya_base": 4880,
"google": 1540
},
"source": {
"text": "Wordstat (регион 155), Topvisor Google, JSON SEO",
"ids": [
"WB-0110",
"WB-0111",
"WB-0112"
],
"date": "2026-11-10"
}
}
</script></figure>Цитата-пруф со ссылкой quote-proof
Показать, на чём стоит проверка: цитата до 300 знаков, сайт, полный адрес, дата открытия, ID источника и метка.
Код вызова
<figure class="nb-c" data-nb="quote-proof"><script type="application/json">
{
"quote": "Похороны под ключ — от 1 450 BYN. Агент выезжает круглосуточно, оформление документов входит в пакет.",
"url": "https://example.com/a/ceny",
"date": "2026-11-10",
"label": "ok",
"source": "WB-0201",
"claim": "утверждение WB-0201-C004"
}
</script></figure>