Генератор кейсов E-commerce

Одностраничный инструмент для оформления кейсов по работе с маркетплейсами в едином формате и выгрузки их в PNG или PDF.

Что это

Это один HTML-файл (index.html), который открывается в браузере без установки (шрифт Montserrat, график Chart.js и библиотеки экспорта подгружаются с CDN, поэтому нужен интернет). Внутри — готовый шаблон кейса, который заполняется прямо на странице:

• Юр. лицо (ИП/ООО) и наименование, категория товара, даты работы.
• Блоки «Проблемы» и «Достижения» — свободный текст.
• Две точки сравнения — «Точка А» и «Точка Б» — с метриками воронки (переходы, корзины, заказы, продажи, выручка). Конверсии (CR в корзину, CR корзины в заказ, CRO, процент выкупа, CRP) считаются автоматически, но их можно переопределить вручную.
• Загрузка скриншота с графиком динамики и две перетаскиваемые вертикальные линии — отметки «Точка А» и «Точка Б» на графике.
• Выбор маркетплейса (Ozon, Wildberries, Я.Маркет, Мегамаркет или свой вариант).
• Экспорт готового кейса в PNG или PDF.

Зачем это

Раньше каждый кейс собирался вручную в редакторе: одинаковая вёрстка переделывалась заново, метрики и конверсии считались в калькуляторе, оформление от кейса к кейсу разъезжалось. Инструмент решает три задачи:

• Единый формат. Все кейсы выглядят одинаково и узнаваемо.
• Меньше ручной работы. Конверсии и форматирование чисел считаются сами; есть генератор демо-данных.
• Быстрая выгрузка. Готовый результат сохраняется в картинку или PDF одной кнопкой.

Как пользоваться

1. Открыть index.html в браузере.
2. Заполнить поля, при необходимости загрузить график и расставить линии «Точка А» / «Точка Б».
3. Нажать «Экспорт PNG» или «Экспорт PDF».

Кнопки на панели:

• «Заполнить примером» — подставляет демонстрационный кейс с готовым графиком.
• Кнопка с генератором — открывает окно настроек (юр. лицо, категория, даты ведения) и заполняет обе точки случайными метриками, где «Точка Б» всегда больше «Точки А». Проблемы, Достижения и график заполняются вручную.
• «Очистить» — сбрасывает все поля.

Структура

• index.html — весь инструмент: разметка, стили и логика.
• image/graph_temple.png — пример графика для кнопки «Заполнить примером».
• image/graph_temple.b64.js — тот же пример в виде data-URL (нужно для корректного экспорта локальной картинки).

Замена примера графика

Положить новый PNG в image/ и пересобрать data-URL:

cd "Генератор кейсов"
{ printf 'window.EXAMPLE_CHART="data:image/png;base64,'; base64 -i image/НОВЫЙ.png | tr -d '\n'; printf '";\n'; } > image/graph_temple.b64.js

Настройка масштаба

Размер листа на экране регулируется одной переменной в начале стилей index.html (на качество экспорта не влияет):

--scale: 0.8;   /* меньше — компактнее, больше — крупнее */