Промпты для генерации модальных окон

Готовые промпты для популярных типов модальных окон. Скопируйте промпт из нужного блока, при необходимости подставьте свои данные (название бренда, цвета, ссылки) и передайте в любую нейросеть. Полученный HTML сразу подходит для вставки в поле «Шаблон» при создании попапа.

Проверенные нейросети

Промпты тестировались и стабильно дают рабочий результат в Claude, ChatGPT и Gemini. С другими моделями (YandexGPT, GigaChat, DeepSeek и прочими) промпты не проверялись — результат может отличаться, потребуется ручная доработка.

---

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

Каждый промпт уже содержит все технические требования к шаблону для модуля Октопус CDP Popup: инлайн-стили, кнопку закрытия с data-close, уникальные id с префиксом popup_, скрытие формы и показ блока «Спасибо!» после отправки.

Перед тем как отправить промпт нейросети, определитесь с обработкой формы — она настраивается в одном месте промпта:

Вариант	Когда использовать	Что подставить в промпт
Октопус CDP	Сайт подключён к Октопус CDP	Код цели из настроек Октопус CDP — например, subscribe_popup
PHP-обработчик Битрикс	Свой серверный обработчик	Путь к вашему AJAX-файлу — например, /local/ajax/popup_subscribe.php

💡 Совет: Если не уверены, какой обработчик нужен — начните с PHP-обработчика на стороне Битрикс. Его подключение описано в разделе Установка и настройка.

---

Адаптивность

Самая частая претензия к сгенерированным окнам — на телефоне вёрстка разъезжается: текст выходит за края, кнопка обрезается, появляется горизонтальная прокрутка. Причина почти всегда одна — нейросеть задаёт размеры фиксированными пикселями.

В промптах ниже требования к адаптивности уже прописаны. Если пишете свой промпт или дорабатываете готовое окно, требуйте того же:

Что задаём	Правильно	Неправильно
Ширина окна	width: 100%; max-width: 520px	width: 520px
Шрифты	font-size: clamp(15px, 4vw, 18px)	font-size: 18px
Отступы	padding: clamp(18px, 6vw, 28px)	padding: 28px
Изображения	width: 100%; height: auto	width: 560px
Кнопки и поля	width: 100%	фиксированная ширина
Модель блока	box-sizing: border-box	не задана

Основной инструмент — функция clamp(минимум, желаемое, максимум): она сама масштабирует значение между границами. Это принципиально важно, потому что инлайн-стили не поддерживают медиазапросы — написать @media прямо в атрибуте style нельзя, и без clamp() окно остаётся фиксированным.

💡 Как проверить: сузьте окно браузера до 320px или включите режим устройства в DevTools (iPhone SE). Ничего не должно выходить за края, обрезаться или вызывать горизонтальную прокрутку. Если разъехалось — отправьте нейросети шаблон с промптом из блока «Доработка готового шаблона».

---

Дизайн и оформление

Голый промпт без указания стилистики даст обобщённый «средний» дизайн — серый фон, чёрная кнопка, стандартный шрифт. Чтобы попап выглядел частью вашего сайта, передайте нейросети ваш стиль одним из двух способов.

Способ 1. Описать стилистику текстом

Подходит, если вы знаете фирменные цвета и шрифты бренда. В каждом промпте есть блок «Стилистика» — замените дефолтное описание на своё. Что полезно указать:

• Цветовая палитра — основной фон, акцентный цвет кнопки, цвет текста. Лучше всего hex-кодами: #F3F3F1, #D0B484, #2D222E.
• Шрифты — название и характер: Manrope, sans-serif, современный или AlethiaPro, serif, премиальный.
• Скругления — насколько острые или мягкие углы: 2px — почти острые, 8px — умеренные, 16px — мягкие.
• Общий тон — премиально / дружелюбно / технично / минималистично / эмоционально.
• Референс — название бренда с похожей эстетикой: в духе Apple, как у Bang & Olufsen, минимализм Aesop.

Пример хорошего описания: «Премиум-ритейл, тёплая палитра (фон #F3F3F1, акцент #D0B484, текст #2D222E), шрифт с засечками, скругления 2px, спокойный тон без агрессивных призывов».

Способ 2. Приложить скриншоты сайта

Подходит, если фирстайла на руках нет, но есть сам сайт. Claude, ChatGPT и Gemini умеют анализировать изображения — извлекут палитру, шрифты, скругления и общий характер дизайна.

Что приложить к запросу вместе с промптом:

• Главную страницу — общий тон, шапка, типография, фоновые цвета.
• Карточку товара или страницу услуги — формы, кнопки, акценты.
• Опционально: страницу с уже существующей формой (корзина, контакты) — чтобы попап стилистически совпадал с остальными формами сайта.

Достаточно 2–3 скриншотов. Снимать лучше с десктопа в обычном масштабе (без зума), формат PNG или JPG.

💡 Совет: Если результат всё равно «не попадает» в стиль — отправьте нейросети тот же промпт с уточнением: «попап получился слишком ярким/тёмным/блёклым по сравнению с сайтом на скриншотах, доработай». Обычно 1–2 итераций хватает, чтобы выйти на нужный вид.

Как это работает в промптах

В каждом промпте ниже есть блок «Стилистика» с двумя вариантами:

• А — нейросеть берёт дизайн из приложенных скриншотов.
• Б — нейросеть использует ваше текстовое описание (или дефолтное, если ничего не подставили).

Оставьте нужный вариант, второй удалите. Если используете скриншоты — просто приложите их к сообщению, текст промпта менять не нужно.

---

Подписка на email-рассылку

Классическая форма подписки с полями «Имя» и «Email». Используется для регулярных рассылок: дайджесты, анонсы, контент-маркетинг. Конверсия выше, если в офере чётко указана частота писем и их польза.

📋 Показать промпт

Создай HTML-шаблон модального окна для подписки на email-рассылку.

Технические требования к шаблону:
- Только содержимое окна — без overlay/затемнения (модуль добавит сам).
- Ширина окна: width: 100%; max-width: 520px; box-sizing: border-box; центрирование через margin: 0 auto. Фиксированную ширину в px не задавай.
- Все стили инлайн (style="..."), никаких внешних классов и CSS-файлов.
- Адаптивность обязательна: окно должно корректно выглядеть на экранах от 320px до десктопа.
  - box-sizing: border-box у всех элементов с padding или рамкой.
  - Размеры шрифтов, отступы и padding задавай через clamp(), например: font-size: clamp(15px, 4vw, 18px); padding: clamp(18px, 6vw, 28px).
  - Изображения: width: 100%; height: auto (либо object-fit: cover при заданном aspect-ratio).
  - Поля формы и кнопки - во всю ширину контейнера: width: 100%.
  - Никаких фиксированных ширин в px у внутренних элементов.
  - Длинные заголовки не должны ломать вёрстку: word-wrap: break-word.
- Перед выдачей проверь макет на ширине 320px: ничего не выходит за границы, не обрезается и не требует горизонтальной прокрутки.
- Кнопка закрытия с атрибутом data-close в правом верхнем углу.
- Все id и классы с префиксом popup_ для уникальности.
- Поля формы: NAME (имя) и EMAIL (email). Валидация email обязательна.
- После отправки скрыть форму и показать блок «Спасибо!».
- Внутри шаблона JS пиши в стиле ES5 без стрелочных функций и без TypeScript.

Содержание:
- Заголовок: «Подпишитесь на рассылку»
- Описание: 1–2 предложения о том, какие письма получит подписчик и как часто
- Кнопка: «Подписаться»
- Под кнопкой — мелким шрифтом дисклеймер о согласии на обработку персональных данных

Обработка формы:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Через Октопус CDP. После валидации вызови:
   window.oct_goal('subscribe_popup', { update: { NAME: имя, EMAIL: email } });
Б) Через PHP-обработчик Битрикс. После валидации отправь:
   fetch('/local/ajax/popup_subscribe.php', {
     method: 'POST',
     headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
     body: 'NAME=' + encodeURIComponent(name) + '&EMAIL=' + encodeURIComponent(email)
   })
   и при ответе { status: 'ok' } покажи блок «Спасибо!».

Стилистика:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Используй приложенные к запросу скриншоты сайта: извлеки из них цветовую палитру, типографику, скругления и общий тон, примени к шаблону.
Б) Используй описание: минимализм, светлый фон, скруглённые углы 4–8px, акцентная кнопка. Подбери цвета и шрифты на свой вкус, чтобы выглядело премиально.

---

Скидка или промокод за подписку

Самый конверсионный сценарий: посетитель оставляет email в обмен на скидку или промокод. Хорошо работает на первом визите. Промокод можно показывать прямо в окне после отправки формы или присылать на email.

📋 Показать промпт

Создай HTML-шаблон модального окна с предложением скидки за подписку.

Технические требования к шаблону:
- Только содержимое окна — без overlay/затемнения.
- Ширина окна: width: 100%; max-width: 520px; box-sizing: border-box; центрирование через margin: 0 auto. Фиксированную ширину в px не задавай.
- Все стили инлайн, никаких внешних классов.
- Адаптивность обязательна: окно должно корректно выглядеть на экранах от 320px до десктопа.
  - box-sizing: border-box у всех элементов с padding или рамкой.
  - Размеры шрифтов, отступы и padding задавай через clamp(), например: font-size: clamp(15px, 4vw, 18px); padding: clamp(18px, 6vw, 28px).
  - Изображения: width: 100%; height: auto (либо object-fit: cover при заданном aspect-ratio).
  - Поля формы и кнопки - во всю ширину контейнера: width: 100%.
  - Никаких фиксированных ширин в px у внутренних элементов.
  - Длинные заголовки не должны ломать вёрстку: word-wrap: break-word.
- Перед выдачей проверь макет на ширине 320px: ничего не выходит за границы, не обрезается и не требует горизонтальной прокрутки.
- Кнопка закрытия с атрибутом data-close в правом верхнем углу.
- Все id и классы с префиксом popup_.
- Поле формы: EMAIL. Валидация обязательна.
- После отправки скрыть форму и показать блок с промокодом крупным шрифтом и кнопкой «Скопировать».
- JS в стиле ES5 без стрелочных функций.

Содержание:
- Крупный заголовок с размером скидки: «Скидка 10% на первый заказ»
- Подзаголовок: «Оставьте email — пришлём промокод и расскажем о новинках»
- Кнопка: «Получить скидку»
- Блок успеха: «Ваш промокод: WELCOME10» + кнопка «Скопировать» (копирует код в буфер обмена через navigator.clipboard)
- Дисклеймер мелким шрифтом про обработку персональных данных

Обработка формы:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Через Октопус CDP: window.oct_goal('discount_popup', { update: { EMAIL: email } });
Б) Через PHP-обработчик: fetch('/local/ajax/popup_subscribe.php', { method: 'POST', ... }).

Стилистика:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Используй приложенные к запросу скриншоты сайта: извлеки палитру, шрифты, скругления и общий тон, примени к шаблону. Размер скидки — главный акцент.
Б) Используй описание: яркий акцент на размере скидки, контрастная кнопка призыва. Цвета и шрифты подбери на свой вкус.

---

Лид-магнит — скачать гайд за email

Подписка в обмен на полезный контент: PDF-гайд, чек-лист, шаблон, презентация. Подходит для B2B и информационных сайтов, где аудитория ценит экспертный контент.

📋 Показать промпт

Создай HTML-шаблон модального окна с предложением скачать материал за email.

Технические требования:
- Только содержимое окна, без overlay.
- Ширина окна: width: 100%; max-width: 520px; box-sizing: border-box; центрирование через margin: 0 auto. Фиксированную ширину в px не задавай.
- Все стили инлайн.
- Адаптивность обязательна: окно должно корректно выглядеть на экранах от 320px до десктопа.
  - box-sizing: border-box у всех элементов с padding или рамкой.
  - Размеры шрифтов, отступы и padding задавай через clamp(), например: font-size: clamp(15px, 4vw, 18px); padding: clamp(18px, 6vw, 28px).
  - Изображения: width: 100%; height: auto (либо object-fit: cover при заданном aspect-ratio).
  - Поля формы и кнопки - во всю ширину контейнера: width: 100%.
  - Никаких фиксированных ширин в px у внутренних элементов.
  - Длинные заголовки не должны ломать вёрстку: word-wrap: break-word.
- Перед выдачей проверь макет на ширине 320px: ничего не выходит за границы, не обрезается и не требует горизонтальной прокрутки.
- Кнопка закрытия с атрибутом data-close.
- id и классы с префиксом popup_.
- Поле формы: EMAIL, валидация обязательна.
- После отправки автоматический запуск скачивания файла по ссылке https://example.com/guide.pdf (открыть в новой вкладке) и показ блока «Спасибо!».
- JS в стиле ES5.

Содержание:
- Иконка или изображение обложки гайда слева, текст справа (на мобильных — друг под другом)
- Заголовок: «Скачайте бесплатный гайд»
- Краткое описание: что внутри (3 буллета или 1–2 предложения)
- Кнопка: «Скачать»
- Дисклеймер про обработку персональных данных

Обработка формы:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Через Октопус CDP: window.oct_goal('leadmagnet_popup', { update: { EMAIL: email } });
Б) Через PHP-обработчик: fetch('/local/ajax/popup_subscribe.php', { method: 'POST', ... }).

Стилистика:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Используй приложенные к запросу скриншоты сайта: извлеки палитру, шрифты, скругления и общий тон, примени к шаблону.
Б) Используй описание: спокойный экспертный тон, без агрессивных акцентов. Цвета и шрифты подбери на свой вкус.

---

Заявка на обратный звонок

Форма для услуг и B2B: посетитель оставляет имя и телефон, менеджер перезванивает. Используется на лендингах, страницах услуг и в карточках товаров с консультацией.

📋 Показать промпт

Создай HTML-шаблон модального окна с заявкой на обратный звонок.

Технические требования:
- Только содержимое окна, без overlay.
- Ширина окна: width: 100%; max-width: 500px; box-sizing: border-box; центрирование через margin: 0 auto. Фиксированную ширину в px не задавай.
- Все стили инлайн.
- Адаптивность обязательна: окно должно корректно выглядеть на экранах от 320px до десктопа.
  - box-sizing: border-box у всех элементов с padding или рамкой.
  - Размеры шрифтов, отступы и padding задавай через clamp(), например: font-size: clamp(15px, 4vw, 18px); padding: clamp(18px, 6vw, 28px).
  - Изображения: width: 100%; height: auto (либо object-fit: cover при заданном aspect-ratio).
  - Поля формы и кнопки - во всю ширину контейнера: width: 100%.
  - Никаких фиксированных ширин в px у внутренних элементов.
  - Длинные заголовки не должны ломать вёрстку: word-wrap: break-word.
- Перед выдачей проверь макет на ширине 320px: ничего не выходит за границы, не обрезается и не требует горизонтальной прокрутки.
- Кнопка закрытия с атрибутом data-close.
- id и классы с префиксом popup_.
- Поля формы: NAME (имя), PHONE (телефон с маской +7 (___) ___-__-__).
- Валидация: имя не пустое, телефон содержит минимум 10 цифр.
- После отправки скрыть форму и показать блок «Спасибо! Мы перезвоним в течение 15 минут».
- JS в стиле ES5.

Содержание:
- Заголовок: «Заказать обратный звонок»
- Подзаголовок: «Перезвоним в течение 15 минут в рабочее время»
- Кнопка: «Перезвоните мне»
- Дисклеймер про обработку персональных данных

Обработка формы:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Через Октопус CDP: window.oct_goal('callback_popup', { update: { NAME: имя, PERSONAL_PHONE: телефон } });
Б) Через PHP-обработчик: fetch('/local/ajax/popup_callback.php', { method: 'POST', ... }).

Стилистика:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Используй приложенные к запросу скриншоты сайта: извлеки палитру, шрифты, скругления и общий тон, примени к шаблону.
Б) Используй описание: деловая, спокойная стилистика, акцент на скорости ответа. Цвета и шрифты подбери на свой вкус.

---

Удержание уходящего посетителя

Окно показывается, когда курсор уходит в верхнюю область браузера (намерение закрыть вкладку). Цель — дать посетителю последний оффер: скидку, промокод или подписку. В модуле условие настраивается отдельно — само окно по содержанию аналогично окну со скидкой, но с другим заголовком.

📋 Показать промпт

Создай HTML-шаблон модального окна для удержания уходящего посетителя.

Технические требования:
- Только содержимое окна, без overlay.
- Ширина окна: width: 100%; max-width: 540px; box-sizing: border-box; центрирование через margin: 0 auto. Фиксированную ширину в px не задавай.
- Все стили инлайн.
- Адаптивность обязательна: окно должно корректно выглядеть на экранах от 320px до десктопа.
  - box-sizing: border-box у всех элементов с padding или рамкой.
  - Размеры шрифтов, отступы и padding задавай через clamp(), например: font-size: clamp(15px, 4vw, 18px); padding: clamp(18px, 6vw, 28px).
  - Изображения: width: 100%; height: auto (либо object-fit: cover при заданном aspect-ratio).
  - Поля формы и кнопки - во всю ширину контейнера: width: 100%.
  - Никаких фиксированных ширин в px у внутренних элементов.
  - Длинные заголовки не должны ломать вёрстку: word-wrap: break-word.
- Перед выдачей проверь макет на ширине 320px: ничего не выходит за границы, не обрезается и не требует горизонтальной прокрутки.
- Кнопка закрытия с атрибутом data-close.
- id и классы с префиксом popup_.
- Поле формы: EMAIL, валидация обязательна.
- После отправки скрыть форму и показать промокод крупным шрифтом + кнопку «Скопировать».
- JS в стиле ES5.

Содержание:
- Эмоциональный заголовок: «Подождите!» или «Не уходите без подарка»
- Подзаголовок: «Оставьте email и получите скидку 15% на любой заказ»
- Кнопка: «Хочу скидку»
- Вторая ссылка-кнопка «Нет, спасибо» — с атрибутом data-close
- Блок успеха: «Ваш промокод: BACK15» + «Скопировать»
- Дисклеймер про обработку персональных данных

Обработка формы:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Через Октопус CDP: window.oct_goal('exit_intent_popup', { update: { EMAIL: email } });
Б) Через PHP-обработчик: fetch('/local/ajax/popup_subscribe.php', { method: 'POST', ... }).

Стилистика:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Используй приложенные к запросу скриншоты сайта: извлеки палитру, шрифты, скругления и общий тон, примени к шаблону. Допусти чуть более эмоциональный акцент.
Б) Используй описание: чуть более эмоциональная стилистика, акцент на «последнем шансе», но без агрессии. Цвета и шрифты подбери на свой вкус.

---

Уведомление о поступлении товара

Форма для карточек товаров «Нет в наличии»: посетитель оставляет email, чтобы получить уведомление, когда товар появится. Также удобно использовать для предзаказов и ожидаемых новинок.

📋 Показать промпт

Создай HTML-шаблон модального окна для подписки на уведомление о поступлении товара.

Технические требования:
- Только содержимое окна, без overlay.
- Ширина окна: width: 100%; max-width: 480px; box-sizing: border-box; центрирование через margin: 0 auto. Фиксированную ширину в px не задавай.
- Все стили инлайн.
- Адаптивность обязательна: окно должно корректно выглядеть на экранах от 320px до десктопа.
  - box-sizing: border-box у всех элементов с padding или рамкой.
  - Размеры шрифтов, отступы и padding задавай через clamp(), например: font-size: clamp(15px, 4vw, 18px); padding: clamp(18px, 6vw, 28px).
  - Изображения: width: 100%; height: auto (либо object-fit: cover при заданном aspect-ratio).
  - Поля формы и кнопки - во всю ширину контейнера: width: 100%.
  - Никаких фиксированных ширин в px у внутренних элементов.
  - Длинные заголовки не должны ломать вёрстку: word-wrap: break-word.
- Перед выдачей проверь макет на ширине 320px: ничего не выходит за границы, не обрезается и не требует горизонтальной прокрутки.
- Кнопка закрытия с атрибутом data-close.
- id и классы с префиксом popup_.
- Поле формы: EMAIL, валидация обязательна.
- Скрытое поле PRODUCT_ID (заполняется JS со значением data-атрибута на странице, оставь TODO в коде).
- После отправки скрыть форму и показать блок «Сообщим, как только товар появится».
- JS в стиле ES5.

Содержание:
- Заголовок: «Сообщить о поступлении»
- Подзаголовок: «Оставьте email — пришлём письмо, когда товар снова появится в наличии»
- Кнопка: «Сообщить мне»
- Дисклеймер про обработку персональных данных

Обработка формы:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Через Октопус CDP: window.oct_goal('restock_popup', { update: { EMAIL: email } }); PRODUCT_ID не передавай в update — это не поле клиента, оно нужно только для PHP-обработчика.
Б) Через PHP-обработчик: fetch('/local/ajax/popup_restock.php', { method: 'POST', ... }).

Стилистика:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Используй приложенные к запросу скриншоты сайта: извлеки палитру, шрифты, скругления и общий тон, примени к шаблону.
Б) Используй описание: лаконично, без акций и распродажных акцентов. Цвета и шрифты подбери на свой вкус.

---

Подтверждение возраста 18+

Окно без формы — две кнопки «Да, мне 18» и «Нет». При отказе посетитель уходит на внешнюю страницу. Используется для сайтов с алкоголем, табаком и другим контентом с возрастным ограничением.

📋 Показать промпт

Создай HTML-шаблон модального окна для подтверждения возраста 18+.

Технические требования:
- Только содержимое окна, без overlay.
- Ширина окна: width: 100%; max-width: 480px; box-sizing: border-box; центрирование через margin: 0 auto. Фиксированную ширину в px не задавай.
- Все стили инлайн.
- Адаптивность обязательна: окно должно корректно выглядеть на экранах от 320px до десктопа.
  - box-sizing: border-box у всех элементов с padding или рамкой.
  - Размеры шрифтов, отступы и padding задавай через clamp(), например: font-size: clamp(15px, 4vw, 18px); padding: clamp(18px, 6vw, 28px).
  - Изображения: width: 100%; height: auto (либо object-fit: cover при заданном aspect-ratio).
  - Поля формы и кнопки - во всю ширину контейнера: width: 100%.
  - Никаких фиксированных ширин в px у внутренних элементов.
  - Длинные заголовки не должны ломать вёрстку: word-wrap: break-word.
- Перед выдачей проверь макет на ширине 320px: ничего не выходит за границы, не обрезается и не требует горизонтальной прокрутки.
- Никаких полей формы — только две кнопки.
- id и классы с префиксом popup_.
- JS в стиле ES5.

Содержание:
- Крупный заголовок: «Вам исполнилось 18 лет?»
- Подзаголовок: «Сайт содержит информацию, не предназначенную для лиц младше 18 лет»
- Две кнопки:
  - «Да, мне есть 18» — устанавливает cookie age_confirmed=1 на 30 дней, закрывает попап (имеет data-close)
  - «Нет» — делает window.location.href = 'https://ya.ru' (редирект)

Обработка кнопки «Да»: записать cookie стандартным способом через document.cookie без сторонних библиотек.
Кнопка «Нет» обработчиков формы НЕ требует — попап для возрастного подтверждения не отправляет данные.

Стилистика:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Используй приложенные к запросу скриншоты сайта: извлеки палитру, шрифты, скругления и общий тон, примени к шаблону.
Б) Используй описание: строгая, нейтральная стилистика, без визуальных украшений. Цвета и шрифты подбери на свой вкус.

---

Информационный баннер акции

Окно без формы — рассказывает об акции, распродаже или новой коллекции и ведёт на страницу с подробностями. Подходит для запуска новых продуктов, сезонных распродаж, события Чёрной Пятницы.

📋 Показать промпт

Создай HTML-шаблон модального окна — информационный баннер акции.

Технические требования:
- Только содержимое окна, без overlay.
- Ширина окна: width: 100%; max-width: 560px; box-sizing: border-box; центрирование через margin: 0 auto. Фиксированную ширину в px не задавай.
- Все стили инлайн.
- Адаптивность обязательна: окно должно корректно выглядеть на экранах от 320px до десктопа.
  - box-sizing: border-box у всех элементов с padding или рамкой.
  - Размеры шрифтов, отступы и padding задавай через clamp(), например: font-size: clamp(15px, 4vw, 18px); padding: clamp(18px, 6vw, 28px).
  - Изображения: width: 100%; height: auto (либо object-fit: cover при заданном aspect-ratio).
  - Поля формы и кнопки - во всю ширину контейнера: width: 100%.
  - Никаких фиксированных ширин в px у внутренних элементов.
  - Длинные заголовки не должны ломать вёрстку: word-wrap: break-word.
- Перед выдачей проверь макет на ширине 320px: ничего не выходит за границы, не обрезается и не требует горизонтальной прокрутки.
- Кнопка закрытия с атрибутом data-close.
- Никаких полей формы.
- id и классы с префиксом popup_.

Содержание:
- Большое баннер-изображение сверху (заглушка https://via.placeholder.com/560x280)
- Заголовок акции: «Чёрная пятница: скидки до 50%»
- Короткий подзаголовок: «Только до 30 ноября»
- Кнопка-ссылка «Смотреть акцию» — ведёт на https://example.com/sale, открывает в текущей вкладке
- Под кнопкой ссылка-текст «Может быть позже» с атрибутом data-close

Обработка отправки формы НЕ требуется — это информационный баннер без сбора данных.

Опционально: добавь таймер обратного отсчёта до даты окончания акции. Таймер должен быть рабочим - пересчитываться каждую секунду через setInterval, а не выводить статичный текст. Реализацию возьми из блока «Рабочий таймер» ниже.

Стилистика:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Используй приложенные к запросу скриншоты сайта: извлеки палитру, шрифты, скругления и общий тон, примени к шаблону. Размер скидки — главный акцент.
Б) Используй описание: яркая, контрастная стилистика с акцентом на цифрах скидки. Цвета и шрифты подбери на свой вкус.

---

Таймер обратного отсчёта

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

Частая ошибка

Нейросеть охотно рисует красивый блок таймера, но оставляет внутри статичный текст — цифры не меняются. Поэтому в промпте ниже требование «таймер должен считать» сформулировано отдельно, а рабочая реализация приложена как образец.

📋 Показать промпт

Создай HTML-шаблон модального окна с рабочим таймером обратного отсчёта.

Технические требования:
- Только содержимое окна, без overlay.
- Ширина окна: width: 100%; max-width: 560px; box-sizing: border-box; центрирование через margin: 0 auto. Фиксированную ширину в px не задавай.
- Все стили инлайн.
- Адаптивность обязательна: окно должно корректно выглядеть на экранах от 320px до десктопа.
  - box-sizing: border-box у всех элементов с padding или рамкой.
  - Размеры шрифтов, отступы и padding задавай через clamp(), например: font-size: clamp(15px, 4vw, 18px); padding: clamp(18px, 6vw, 28px).
  - Изображения: width: 100%; height: auto (либо object-fit: cover при заданном aspect-ratio).
  - Кнопки - во всю ширину контейнера: width: 100%.
  - Никаких фиксированных ширин в px у внутренних элементов.
  - Длинные заголовки не должны ломать вёрстку: word-wrap: break-word.
- Перед выдачей проверь макет на ширине 320px: ничего не выходит за границы, не обрезается и не требует горизонтальной прокрутки.
- Кнопка закрытия с атрибутом data-close.
- id и классы с префиксом popup_.
- Полей формы нет.

Требования к таймеру:
- Таймер должен быть рабочим: значение пересчитывается каждую секунду через setInterval. Статичный текст вместо счётчика недопустим.
- Целевую дату задавай вместе с часовым поясом, иначе у посетителей из других регионов отсчёт будет неверным: new Date('2026-09-23T10:00:00+03:00').
- Формат вывода: D дней HH:MM:SS. Часы, минуты и секунды дополняй нулём слева.
- Когда время вышло: вывести текст «Мероприятие уже началось» и остановить таймер через clearInterval.
- Элемент таймера ищи по id; если элемента нет - выходи из скрипта, не роняя страницу.
- JS в стиле ES5: var вместо const и let, без стрелочных функций, без padStart и других современных методов.

Используй эту реализацию как образец, подставив свои id, дату и текст:

(function () {
  var target = new Date('2026-09-23T10:00:00+03:00').getTime();
  var el = document.getElementById('popup_timer');
  var timer = null;

  if (!el) { return; }

  function pad(value) {
    return value < 10 ? '0' + value : String(value);
  }

  function updateCountdown() {
    var diff = target - Date.now();

    if (diff <= 0) {
      el.textContent = 'Мероприятие уже началось';
      if (timer) { clearInterval(timer); }
      return;
    }

    var days = Math.floor(diff / 86400000);
    var hours = Math.floor(diff / 3600000) % 24;
    var minutes = Math.floor(diff / 60000) % 60;
    var seconds = Math.floor(diff / 1000) % 60;

    el.textContent = days + ' дней ' + pad(hours) + ':' + pad(minutes) + ':' + pad(seconds);
  }

  updateCountdown();
  timer = setInterval(updateCountdown, 1000);
})();

Содержание:
- Плашка над заголовком: «Бесплатный вебинар»
- Заголовок: [название мероприятия]
- Строка с датой и временем: «23 сентября 2026, 10:00 (МСК)»
- Блок таймера с подписью «До начала:» и элементом с id popup_timer
- Кнопка-ссылка «Зарегистрироваться» - ведёт на https://example.com/event, открывается в новой вкладке
- Под кнопкой ссылка-текст «Может быть позже» с атрибутом data-close

Обработка формы не требуется - окно без сбора данных.

Стилистика:
[ВЫБЕРИ ОДИН ВАРИАНТ]
А) Используй приложенные к запросу скриншоты сайта: извлеки палитру, шрифты, скругления и общий тон, примени к шаблону.
Б) Используй описание: акцент на дате и таймере, контрастная кнопка действия. Цвета и шрифты подбери на свой вкус.

Рабочий таймер

Если окно уже готово и нужно только добавить в него отсчёт — вставьте этот блок вручную. Менять нужно две вещи: целевую дату и id элемента, если он у вас другой.

<div style="display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:10px clamp(12px,4vw,18px);background:#F5F6FA;border:1px solid #DFDFED;border-radius:10px;font-size:clamp(12px,3.4vw,14px);box-sizing:border-box;">
  <span style="color:#8A8F98;">До начала:</span>
  <span id="popup_timer" style="font-weight:700;white-space:nowrap;">—</span>
</div>

<script>
(function () {
  var target = new Date('2026-09-23T10:00:00+03:00').getTime();
  var el = document.getElementById('popup_timer');
  var timer = null;

  if (!el) { return; }

  function pad(value) {
    return value < 10 ? '0' + value : String(value);
  }

  function updateCountdown() {
    var diff = target - Date.now();

    if (diff <= 0) {
      el.textContent = 'Мероприятие уже началось';
      if (timer) { clearInterval(timer); }
      return;
    }

    var days = Math.floor(diff / 86400000);
    var hours = Math.floor(diff / 3600000) % 24;
    var minutes = Math.floor(diff / 60000) % 60;
    var seconds = Math.floor(diff / 1000) % 60;

    el.textContent = days + ' дней ' + pad(hours) + ':' + pad(minutes) + ':' + pad(seconds);
  }

  updateCountdown();
  timer = setInterval(updateCountdown, 1000);
})();
</script>

На что обратить внимание:

• Часовой пояс в дате обязателен. Без суффикса +03:00 браузер посетителя истолкует дату по своему поясу, и у клиента из другого региона отсчёт разойдётся на несколько часов.
• clearInterval после дедлайна — иначе таймер продолжит тикать в минус.
• Проверка if (!el) return — если окно закрыли до запуска скрипта, страница не упадёт с ошибкой.
• Склонение слова «дней» в образце не сделано: будет «1 дней». Если это важно, попросите нейросеть добавить склонение по правилам русского языка.

---

Доработка готового шаблона

Если базовый шаблон уже сгенерирован, но нужно изменить дизайн, цвета или стилистику под бренд — используйте короткий уточняющий промпт. Можно как описать новый стиль текстом, так и приложить скриншоты сайта.

📋 Показать промпт

Вот HTML-шаблон модального окна для модуля Октопус CDP Popup:

[вставь сюда текущий HTML]

Доработай его:
- Сохрани всю функциональность: data-close, валидацию, вызов обработчика, блок «Спасибо!».
- Сохрани все id и атрибуты name у полей формы — они используются обработчиком.
- Все стили оставь инлайн, не добавляй внешние CSS-файлы.
- Сделай шаблон адаптивным, если он таким не является: width: 100% с max-width вместо фиксированной ширины, box-sizing: border-box, размеры шрифтов и отступы через clamp(), изображения width: 100%; height: auto, кнопки и поля во всю ширину. Проверь макет на ширине 320px.
- Если в шаблоне есть таймер обратного отсчёта - убедись, что он реально считает через setInterval, а не выводит статичный текст.

Примени новую стилистику — выбери ОДИН источник:
А) Скриншоты сайта приложены к запросу — извлеки из них палитру, шрифты, скругления, общий тон и примени к шаблону.
Б) Текстовое описание: [опиши — например, «тёмная тема, акцентный цвет #FF6B35, шрифт Manrope, скругления 4px»].

---

💡 Совет: Если сгенерированный нейросетью шаблон ведёт себя странно — например, попап показывается «голым» без затемнения или со сбитым позиционированием — скорее всего, нейросеть добавила в шаблон собственный overlay. Удалите внешний контейнер с position: fixed и background: rgba(...) — модуль добавляет затемнение сам.