Канвас: доски с вариантами дизайна

Канвас: доски с вариантами дизайна

Канвас — один файл <имя>.canvas.html, в котором лежат доски (<section data-board>): страницы, телефонные экраны, слайды, посты. Человек открывает его как любой результат: доски стоят рядом на бесконечной поверхности, их можно двигать и увеличивать. Правки он просит в чате («во втором варианте сделай кнопку крупнее»), агент меняет файл. Комментариев, версий и живого обновления в первой версии нет: канвас обновляется в конце хода агента.

Когда канвас, а когда одна страница

• Канвас — когда направление ещё открыто и нужно сравнить 2–4 варианта рядом (главная A/B/C, три стиля слайда, десктоп и телефон одного экрана) или когда у макета несколько экранов.
• Одна HTML-страница — когда решение принято и нужен один готовый результат; живой дашборд с данными (apps/) — тоже не канвас (см. «Дашборды»).
• Колода слайдов — всегда на канвасе, если это новая колода: слайды по порядку в одном ряду, затем plank_canvas_open и одна строка с предложением выгрузить в PDF или PowerPoint. Формат не спрашивайте: «нужен pptx» — это выгрузка в конце (export_canvas.py, раздел «Выгрузка в PDF и PowerPoint»). plank_deck.py (см. /help/presentations) — только для присланного шаблона .pptx/.potx или колоды, которую будут править в PowerPoint или Google Slides; правка готовой колоды — /help/deck-edit.

Формат файла

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Главная — варианты</title>
  <link rel="stylesheet" href="plank-canvas.css">
  <style>/* общий CSS для всех досок */</style>
</head>
<body>
  <section data-board="hero-a" data-page="Hero" data-title="A — спокойный"
           data-preset="desktop" data-x="0" data-y="0">…</section>
  <section data-board="hero-b" data-page="Hero" data-title="B — смелый"
           data-preset="desktop">…</section>
</body>
</html>

• data-board — стабильный id доски, уникальный в файле.
• data-title — название, по которому человек ссылается на доску в чате. У каждой доски оно должно быть.
• data-preset — размер доски; либо data-w/data-h для своего размера (целые числа от 1 до 8000).
• data-x/data-y — необязательны. Если их нет, окно раскладывает доски слева направо: 80 px между досками в ряду, 120 px между рядами. Ряд переносится на новую строку, когда следующая доска заходила бы за 8000 px: четыре слайда или пять десктопов в строке, так что девять слайдов — три строки, а не одна лента.
• data-row называет ряд досок («Hero», «Тарифы»); окно рисует название один раз над рядом — и над рядом из одной доски тоже; у перенесённого ряда название только над первой строкой. У досок без data-row названия ряда нет.
• data-page собирает доски в страницы (вкладки над канвасом, если страниц больше одной).
• <head> общий: окно подставляет его в каждую доску.
• Файл без data-board — не пустой канвас: он откроется как обычная HTML-страница, и окно скажет почему.
• Картинки — отдельные файлы рядом (img/hero.png), не base64. Выше 2 МБ проверка предупреждает.
• Вне Plank файл читается: plank-canvas.css ставит доски столбиком с подписями.

Пресеты

Два вида досок. Фиксированная — макет устройства, постер, пост, слайд: корень ровно w×h пресета. Страница — лендинг, дашборд, экран веб-приложения: data-fill на секции, гибкий корень (контейнер с max-width, %/rem/fr, сетки repeat(auto-fit, minmax(min(<мин>px, 100%), 1fr))); высота — высота содержимого при ширине w, а в фокусе доска занимает всю ширину окна. Лучше слишком высокая доска, чем обрезанная.

В доске с высотой по содержимому (desktop, phone, data-fill без data-h) не задавайте размеры в vh: высота окна такой доски и есть её высота, поэтому min-height: 100vh плюс что-то ещё растёт с каждым замером, а 50vh сжимается. Окно замечает это и замораживает доску на первой высоте, так что содержимое обрежется. Нужен экран ровно на окно — дайте доске пресет slide/post или data-h.

Команды

Инструменты запечены в образ контейнера и лежат в /opt/plank/canvas/ (ни один шаблон их не устанавливает). Там же README.md — эта справка коротко, без сети.

python3 /opt/plank/canvas/new_canvas.py site.canvas.html --title "Главная" [--lang ru]
python3 /opt/plank/canvas/board.py add site.canvas.html --id hero-a --title "A — спокойный" \
  --preset desktop --row Hero [--page Hero] [--w 1200 --h 800] [--fill]
python3 /opt/plank/canvas/board.py move site.canvas.html --id hero-a --x 0 --y 0   # или --clear
python3 /opt/plank/canvas/board.py remove site.canvas.html --id hero-a
python3 /opt/plank/canvas/board.py list site.canvas.html [--json]
python3 /opt/plank/canvas/check_canvas.py site.canvas.html [--json]   # без рендера; код 1 при любом FAIL
python3 /opt/plank/canvas/render_check.py site.canvas.html --out qa \
  [--boards hero-a,hero-b] [--max-boards 24] [--deadline 90] [--json]   # рендер и замеры; код 1 при FAIL

render_check.py — то, что запускает plank_check_canvas, только без его предела: рисует каждую доску в размере пресета (chrome-headless-shell из образа), меряет и кладёт картинки в --out как board-<n>.png (n — номер доски по порядку, С НУЛЯ: board-0.png — первая доска). --out можно задать относительным путём; --boards — id через запятую; --max-boards — сколько досок рисовать (по умолчанию 24, инструмент берёт 6); --deadline — предел всего прогона в секундах; --json — {boards: [{id, w, h, png}], findings: [...], scorecard: [...]}.

Всё это уже лежит в /opt/plank/canvas/ в каждом контейнере — ничего не скачивай и не пиши своих генераторов, проверщиков или рендера в PDF через pdftoppm: проверка — это plank_check_canvas (настоящий Chrome в размере доски).

Структуру (добавить, сдвинуть, убрать доску) меняют командой. Содержимое доски — обычным патчем одной <section>; файл целиком не переписывают. Человек мог править файл после прошлого хода — перечитай секцию перед патчем.

Цикл работы

1. Нарисовать: new_canvas.py, затем board.py add на каждую доску, содержимое каждой — патчем. Колода начинается уже разложенной: new_canvas.py deck.canvas.html --title "…" --slides N [--theme warm|forest|ink] [--topic "<english words>"] пишет N слайдов в разных раскладках с пустыми слотами ⟨…⟩ и всеми стилями; агент заполняет слоты, а не переписывает колоду и не пишет своего CSS. Слот, оставшийся пустым, — FAIL unfilled-slot. --theme — палитра из layouts.css; --topic сразу ищет фото обложки и печатает готовые команды photo.py get. Колода о чём-то реальном (бизнес, место, продукт, еда, природа, люди) получает фото на обложку; без него — только колода из данных или по-настоящему отвлечённая тема.
2. Проверить: plank_check_canvas — один вызов после последней правки. Он рисует каждую доску в размере пресета и измеряет: содержимое за пределами пресета (overflow), обрезанный текст (clipped-text: FAIL на slide/post, где обрезанный текст — сломанный слайд, и WARN на остальных), битые картинки (в том числе лежащие вне папки канваса), контраст ниже AA, текст, на который наехала картинка или фигура, и подписи, вылезающие за контур своей плашки (overlap, WARN: это эвристика, проверь по картинке), доски без data-title, повторы id, размер файла, секреты, шрифт не из кита на слайде (font-off-kit, WARN), эмодзи вместо иконки (emoji-icon, WARN), пустая нижняя треть слайда (empty-bottom, WARN) одна и та же крупная картинка на двух досках (duplicate-image, WARN), подпись <text>, нарисованная за краем своего <svg> (svg-text-clipped: FAIL на slide/post, WARN на остальных), колода из 6 и больше слайдов, где больше половины без визуала (text-only-deck, FAIL: нет ни графика, ни числа-KPI (≥ 160px, или ряд из двух и больше чисел ≥ 96px), ни схемы, ни нарисованной иллюстрации, ни фото; иконки не считаются — в сообщении номера слайдов и команда на каждый), колоду из одинаковых слайдов (layout-monotony, FAIL: ≥ 8 слайдов, и меньше 4 разных раскладок, одна раскладка 3 слайда подряд или ни одного слайда, где картинка или цветное поле занимает 40 %; колоде, где ≥ 40 % слайдов — графики и крупные числа, последнее прощается — в сообщении номера слайдов и раскладки на замену), и доски с примерными цифрами chart.py --example (example-data, WARN: назови эти слайды в ответе). После находок — сводка дизайна (design scorecard: иконки кита и эмодзи, токены палитры, графики, цифры в тексте, заглушки вида [ЦЕНА]) и до трёх следующих шагов с готовой командой; проверка всего канваса заканчивается правилами кита /opt/plank/design/RULES.md. График на доску рисует python3 /opt/plank/design/chart.py (см. /help/charts). Возвращает находки и картинку каждой нарисованной доски (JPEG шириной 960 px, не больше 2,5 МБ картинок за вызов — около 3,3 МБ в base64) — агент их видит. За раз не больше 6 досок: остальные — следующим вызовом с boards.
3. Исправить каждый FAIL и разобрать каждый overlap (обычно это настоящий наезд); прочие WARN — совет.
4. Посмотреть на каждую картинку. Проверка находит не всякий наезд и не видит дизайна. Исправь, что выглядит плохо: пустую или недорисованную схему, наезды, подписи за контуром фигур, большие пустоты, одну и ту же вёрстку на всех слайдах.
5. Открыть: plank_canvas_open(path) сразу после правок — второй проверки не нужно. Он объявляет канвас результатом задачи (как plank_present_result) и открывает его человеку. Отказывает при любом структурном FAIL (check_canvas.py): секрет, повтор id, незакрытая доска, неверный размер. Каждую доску slide/post, которую plank_check_canvas ещё не показывал в её нынешнем виде, он рисует и показывает в том же вызове: всё чисто — канвас открыт, есть FAIL — отказ с находками и картинками, после исправления — снова plank_canvas_open. render_check.py, запущенный в терминале, не считается: его картинок агент не видел. Модель, которая не видит картинок, получает вместо них строку об ошибке; находки текстом остаются полной проверкой.

Подпись макета вида «Login:»/«Token:» рядом со значением может сработать как секрет. Переформулируй подпись или поставь явную заглушку.

Правила хорошей доски

Перед первой доской

• Сначала контекст. Хай-фай доска опирается на то, что есть: файлы бренда пространства, сайт или приложение клиента, скриншоты, существующий канвас. Прочитай их до рисования. Макет с нуля — крайнее средство; недостающая иконка или картинка — подписанная заглушка, это лучше плохой попытки нарисовать настоящую.
• Маленькая дизайн-система. Если у пространства есть бренд — бери его (точные цвета, шрифты, радиусы). Иначе выбери одну, исходя из темы: 1–3 шрифта (Google Fonts, у каждого системный запасной), фон, 0–2 акцента близкой насыщенности и светлоты. Назови стиль одной строкой. На страницах и экранах цвета и шрифты — через токены plank-canvas.css: --plank-ground, --plank-surface, --plank-ink, --plank-muted, --plank-line, --plank-accent, --plank-font, --plank-mono (у каждого светлое и тёмное значение).
• Спроси один раз или не спрашивай. Если человек в чате и бриф оставляет два и более открытых решения, меняющих результат, задай ОДНУ карточку-вопрос до 4 вопросов, написанных по его материалам, с 2–4 конкретными вариантами в каждом, твой выбор первым. Недостающий ФАКТ — чья компания, какие цифры, названия — не решение и никогда не вопрос, а для колоды не бывает и карточки-вопроса: делай на подписанных допущениях и заглушках ([НАЗВАНИЕ], chart.py --example), а в ответе перечисли, что заменить. В автоматическом запуске или на «просто сделай» реши сам и назови допущения одной строкой. Не заканчивай ход вопросом, на который некому ответить. Не переспрашивай решённое.

Варианты

• Пока направление открыто (общий вид, структура первого экрана, пара шрифтов, плотность), сначала реши его: 2–4 по-настоящему РАЗНЫЕ доски рядом в одном ряду, каждая по названной оси («тёплый редакционный» против «плотный, данные вперёд»), а не пять оттенков одной идеи. Для выбора достаточно низкой детализации.
• Мотив и главный компромисс каждого варианта — в ответе в чате, не на доске; у каждого варианта честный довод.
• Названия вариантов стабильны: «Вариант B» остаётся «Вариантом B» от хода к ходу, чтобы человек мог сказать «во втором варианте…».

Содержание

• Без заполнителей: никакого lorem ipsum, выдуманных цифр, отзывов и статистики, никаких секций «для объёма». Недостающий факт — видимая заглушка [ЦЕНА], [АДРЕС]. Не добавляй материал, о котором не просили, не спросив.
• Текст конкретен для продукта и клиентов человека и на его языке (lang на <html>).
• Без примет «сделано ИИ»: декоративные градиентные «ореолы», карточки с цветной левой полосой, эмодзи вместо иконок. Иконки (маленький знак у подписи, до ~48 px) — inline SVG с обводкой из встроенного набора: python3 /opt/plank/design/icon.py svg <имя> (/help/icons).
• Иллюстрации и схемы рисуй сам — картинка, которая несёт мысль слайда (солнце с лучами, лист, клетка → хлоропласт, процесс со стрелками), это inline SVG с заливками и несколькими цветами; в школьной или питч-колоде их несколько. Lucide иллюстрацию не заменяет: большая контурная иконка — не иллюстрация, и сводка проверки считает их отдельно.
• Графики на доске — по методу /help/charts (форма по задаче, проверенная палитра /opt/plank/design/palette.css, проверка цветов validate_palette.py — только для серий графиков и статусов; акцентный фон слайда и палитра иллюстраций свободны в пределах контраста); схемы — по /help/diagrams; общие правила HTML-страницы — /help/html-design.

Вёрстка

• Группы соседних элементов — flex/grid с gap, а не отступами и пустотой.
• Доступно как нарисовано: настоящие <button>, <a href>, <input> с <label>; контраст текста ≥ 4,5:1 (3:1 от 24 px), подписи тоже; цвета, которые надо различать, различаются и по светлоте.
• Цели касания на phone-досках ≥ 44 px; без поддельной строки статуса и клавиатуры.
• Доска-страница работает на ширине телефона: меню складывается, панели переносятся, широкие таблицы прокручиваются в своём блоке.
• Проверь светлую и тёмную тему (страницы и экраны; у колоды слайдов своя палитра).

Правки

• Маленькая просьба меняет только это: не «улучшай» другие доски, отступы и цвета. Более широкое изменение предложи в ответе, а не применяй.
• Новая доска следует словарю канваса.

Слайды и посты (slide, post)

Доска slide — постер, а не веб-страница. Проверяет её только plank_check_canvas: plank_deck.py и plank_deck_qa.py на канвасе не нужны, не скачивайте их. Правила те же, что в /help/presentations: колода остаётся колодой, где бы её ни рисовали. Отличаются только шрифты и картинки, потому что канвас живёт в пространстве и открывается в Plank, а не уходит отдельным файлом. Новая колода — на канвасе; plank_deck.py — только для присланного шаблона или правки в PowerPoint. Метод колоды — один файл, /opt/plank/canvas/DECK.md (без сети): сюжет из заголовков-утверждений, форма каждого слайда (график, KPI, diagram.py funnel/flow/timeline/compare/cycle, план, иллюстрация, фото), примерные цифры chart.py --example, фото со свободной лицензией, проверка и передача. Его чек-лист печатают new_canvas.py --deck и board.py add на первом слайде; ниже — правила вёрстки.

• Сначала план. Напиши заголовки всех слайдов до любого слайда, в ОДНОЙ грамматике (темы или заголовки-действия); одни заголовки уже рассказывают историю. Покажи их в ответе. Без «Это не X, а Y», без вердиктов и псевдо-инсайтов: заголовок вводит слайд.
• Одна мысль на слайд. Утверждение лучше списка; списки превращай в таблицы, ряды карточек, крупные числа, цитаты или картинки. Два коротких слайда лучше одного перегруженного.
• Размеры — шкала /help/presentations для слайда высотой 1080 px: вспомогательный текст не меньше 36 px, основной 40–48 px, заголовок слайда 72–88 px, раздел или утверждение 110–160 px, одно главное число от 200 px. Мельче 36 px — только служебная строка: надстрочник и подвал, 24–28 px, капитель с разрядкой 2–4 px. Мельче 24 px — ничего. Интерлиньяж заголовков 1,05–1,15 с отрицательной разрядкой, текста 1,3–1,45; в строке 45–75 знаков.
• Поля 128 px (внутри 1664×824). Обрезанный текст на slide/post — FAIL: не влезает — раздели слайд, а не уменьшай шрифт.
• Шрифты. По умолчанию — var(--plank-font) (Inter: он есть и в контейнере, где идёт проверка, и в стеке кита). Другая гарнитура — через Google Fonts <link> в <head> канваса (это разрешено) (доска пускает лишь fonts.googleapis.com и fonts.gstatic.com) с системным запасным. Шрифт, которого у человека может не быть (DejaVu, Noto…), его браузер подменит — переносы и вылеты будут не те, что проверены; проверка помечает это WARN font-off-kit. Не вшивай шрифт в base64: правило «вшейте шрифт» из /help/presentations — для автономного файла-колоды, а канвас держит предел 2 МБ. Проверь кириллицу и казахские буквы.
• Палитра. Один тёмный и один светлый фон, 1–2 акцента, не чистые #fff/#000; тёмный для открытия и финала, светлый для содержания, акцент — на ОДНОМ запоминающемся слайде. Контраст основного текста ≥ 4,5:1 по каждой паре, включая текст на фото. У колоды своя палитра: задай цвета на доске (или переопредели --plank-* внутри секции), чтобы тема системы её не перекрашивала.
• Картинки. Питчу, запуску и бренд-колоде картинки нужны: обложка и разделители несут изображение (/help/presentations, «Изображения»). На канвасе это файлы рядом (img/cover.png), не data:-URI; текст поверх фото держит 4,5:1 по отрисованным пикселям. Фото — object-fit:cover, скриншоты и схемы — contain.
• Градиенты — как в /help/presentations: linear-gradient и radial-gradient можно (затемнение под текстом на фото, фон слайда); декоративных «ореолов» нет; repeating-linear-gradient, repeating-radial-gradient и conic-gradient — никогда. Повторяющаяся текстура — SVG-плитка в background-image.
• Вертикальный бюджет — арифметикой. Заголовок ≈ размер × строки × 1,1; строка таблицы ≈ 2,1 × размер шрифта на строку текста; карточка = строки × размер × интерлиньяж + отступы, а не меньшая фиксированная высота. Слишком высоко — раздели слайд.
• Ритм. Однотипные слайды — одна разметка; заголовок на одной высоте у верхнего поля на каждом слайде содержания (колонку с заголовком не центрируй по вертикали — заголовок «прыгает»); тело распределяй justify-content:space-between или распорной flex:1. По центру только утверждения и цитаты. Подвал (страница, источник, логотип) — одна строка на bottom:64px, на таком слайде padding-bottom:160px. Две одинаковые формы подряд не ставь.
• Идиомы вёрстки. Ряд карточек — flex + gap + flex:1; матрица — ОДНА сетка, а не столбцы стопок; столбики диаграммы стоят на одной базовой линии в треке фиксированной высоты, значения сверху, подписи снизу; подписи поверх картинки — настоящий текст в блоке position:relative, а не нарисованный в SVG.

Хорошая колода

Восемь раскладок — заготовки в /opt/plank/canvas/DECK.md («Layouts») и они же нарисованные в /opt/plank/canvas/example-slides.canvas.html: обложка с картинкой на весь слайд, половина картинки и половина текста, тезис крупно, большое число, график с выводом рядом, карточки, шаги, цитата на цветном поле. Классы .l-* лежат в layouts.css, и new_canvas.py --deck кладёт их в <style> канваса. В колоде из 8+ слайдов — не меньше 4 раскладок, одна раскладка не больше 2 слайдов подряд, и хотя бы один слайд, где картинка или цветное поле занимает 40 %. Если нет — FAIL layout-monotony сам называет, какой слайд в какой класс перевести, так что достаточно сделать это один раз. Фото для обложки и половины — python3 /opt/plank/design/photo.py search "…", затем photo.py get <id> --out img/cover.jpg: только свободные лицензии Wikimedia Commons, файл ложится рядом с канвасом, строка автора печатается для подвала. Бери раскладку и сетку, а не тему и не текст.

• Одна мысль на слайд, и заголовок — сама мысль («Цепь передаёт усилие колесу»), а не тема («Цепь»).
• Схема показывает механизм: что куда идёт и почему — стрелки, номера, подписи по номерам. Картинка ради украшения — не схема; пустая рамка «здесь будет схема» — недоделанный слайд.
• Одна сетка на всю колоду: те же поля, надстрочник → заголовок → тело, подвал на одной высоте; раскладки при этом меняются от слайда к слайду.
• Без больших пустот: тело заполняет место под заголовком. Пустая половина слайда — укрупни или раздели.
• Объясняющая колода: начни с вопроса-крючка, дай пример из жизни, закончи вопросами для проверки.

Выгрузка в PDF и PowerPoint

Когда колода понравилась, файл пишет одна команда:

python3 /opt/plank/canvas/export_canvas.py deck.canvas.html --pdf    # deck.pdf рядом с канвасом
python3 /opt/plank/canvas/export_canvas.py deck.canvas.html --pptx   # deck.pptx рядом с канвасом

Берутся только доски slide одного ряда (по умолчанию первого; другой — --row "<ряд>"), по порядку на канвасе. PDF — один лист на слайд в размере слайда, текст остаётся текстом и ищется. PPTX — картинка каждого слайда во весь лист, а его текст — в заметках докладчика. Так задумано: PowerPoint не умеет рисовать HTML канваса, и картинка совпадает с тем, что человек видел. Если текст нужно править в PowerPoint, ту же колоду пересобирают редактируемой через plank_deck.py. Код выхода: 0 — файлы готовы, 1 — рендер не справился, 2 — на канвасе нет слайдов для выгрузки.

Хорошая и плохая доска

Хорошая: у доски есть data-title, она в ряду с соседними вариантами, цвета через токены, иконка — SVG, нехватка факта — заглушка.

<section data-board="hero-a" data-row="Hero" data-title="A — спокойный"
         data-preset="desktop" data-fill>
  <main style="max-width:1120px;margin:0 auto;padding:96px 32px;display:grid;gap:24px">
    <h1 style="font:600 56px/1.1 var(--plank-font);letter-spacing:-.03em">Бухгалтерия без ручной сверки</h1>
    <p style="font-size:20px;line-height:1.6;max-width:56ch">Агент собирает выписки и отчёты сам. Тариф: [ЦЕНА]</p>
    <a href="#" style="min-height:44px;display:inline-flex;align-items:center;padding:0 24px;border-radius:8px;background:var(--plank-accent);color:#fff">Попробовать</a>
  </main>
</section>

Плохая: нет названия, нет data-row, один вариант вместо сравнения, выдуманные цифры, эмодзи вместо иконки, градиент-«ореол» ради украшения, картинка в base64, шрифт мельче нормы, цвета «из головы».

<section data-board="b1" data-preset="desktop">
  <div style="background:linear-gradient(135deg,#f0f,#0ff);font-size:11px">
    <h1>🚀 Мы №1! 10 000+ клиентов</h1>
    <p>Lorem ipsum dolor sit amet…</p>
    <img src="data:image/png;base64,iVBORw0KGgo…">
  </div>
</section>

Где что показывается

Канвас регистрируется сам: ход, записавший *.canvas.html, уже сообщает о нём, как о дашборде. Он виден во вкладке «Канвасы» раздела «Дашборды», в «Мои» и в Файлах; «Убрать»/«Вернуть» работают как у дашбордов. На телефоне вместо поверхности — лента досок по ширине экрана, касание открывает доску на весь экран. По публичной ссылке канвас открывается тем же окном, только на чтение.

Ограничения первой версии

Нет комментариев, версий и живого обновления; выгрузка — только колоды слайдов в PDF/PPTX (export_canvas.py), других досок — нет; нет переходов между досками и контролов-«твиков». Каждая доска открывается в изолированной рамке: запросы в сеть (fetch, данные из apps/, картинки и стили с чужих адресов) заблокированы, картинки и CSS берутся из папки файла, шрифты — из Google Fonts. Полной изоляции от сети нет: доска может перейти в своей рамке на другой адрес и унести данные в самом адресе, поэтому ничего секретного в доску не клади. Одновременно «живыми» рисуются не более 8 досок, и только при масштабе от 8 %; на телефоне живая одна — та, на которой лента. Остальные — карточки с названием и «Нажмите, чтобы открыть». Подписи досок и названия рядов на поверхности не масштабируются; при сильном уменьшении они скрываются. Доска, которая сейчас не «живая», показывает своё название крупно, поверх серой карточки.