Первый промт: промт для генерации мини-сервиса в формате одного самодостаточного файла

Инструкция:

Ниже находится первоначальный промт (задание), в котором вам нужно вместо квадратных скобок написать название вашего сервиса, затем вместо текста описания моего сервиса, который находится между: Как должен работать сервис (начало): и Как должен работать сервис (конец): — написать подробное описание как должен работать ваш сервис. Там где дизайн можете оставить мое описание 5 видов дизайна или вместо моего добавить свои дизайны.

Дальше готовый промт задания отправляете в нейросеть.

Начало промта:

«Я хочу с помощью нейросети сгенерировать готовый онлайн мини-сервис: [«Сервис отзывов»], который выводит в статье сайта карточки отзывов с горизонтальной прокруткой. Мне нужен промт, по которому нейросеть сгенерирует мини-сервис.

ФОРМАТ ВЫВОДА (ОБЯЗАТЕЛЬНО): Оформи мини-сервис как ОДИН самодостаточный HTML-файл. Весь код (HTML-разметка, CSS-стили и JavaScript) должен быть встроен ВНУТРЬ этого одного файла: стили в теге <style> в <head>, скрипт в теге <script> перед </body>. Не создавай отдельных файлов CSS и JS, не подключай внешние файлы. Файл будет загружен в папку /calc/ в корне сайта и выведен на страницах сайта через тег <iframe>. Дай файлу осмысленное имя на латинице в формате <префикс>.html (например funda01.html).

Весь код сгенерируй без сокращений и без ссылок на сторонние сервисы и внешние библиотеки (только чистый ванильный JS и собственный CSS внутри файла).
В названии сервиса используй его название (то, что он рассчитывает), без слов: Calculator, Pro, PRO.

ОБЯЗАТЕЛЬНЫЙ БЛОК: АВТО-ВЫСОТА IFRAME. Сервис отзывов выводится на сайте через iframe, поэтому он ДОЛЖЕН сообщать свою реальную высоту родительской странице, чтобы iframe подстраивался и не было внутреннего скролла. Встрой прямо в JavaScript-код файла следующий механизм: — функция измеряет высоту документа (document.documentElement.scrollHeight); — отправляет её наверх через parent.postMessage({ calcHeight: высота, calcId: ‘<префикс>’ }, ‘*’); — вызывай эту функцию: при загрузке (window load), при изменении размера окна (resize), при любом клике по сервису (с небольшой задержкой setTimeout), при открытии/закрытии дополнительных полей и опций, и через ResizeObserver, наблюдающий за document.body (чтобы ловить любое изменение высоты автоматически). Значение calcId должно совпадать с префиксом файла (например ‘funda01’). Внутри iframe не должно быть собственной вертикальной прокрутки — вся высота передаётся наверх.

ВЫДАЧА ГОТОВОГО КОДА IFRAME (ОБЯЗАТЕЛЬНО): После кода HTML-файла выдай отдельным блоком готовую строку <iframe> для вставки в статью на сайте. Строка должна быть под ЭТОТ конкретный сервис отзывов:

html
<iframe class=»calc-frame» src=»/calc/<префикс>.html» width=»100%» height=»600″ style=»border:0;» scrolling=»no» loading=»lazy»></iframe>
Требования к iframe: — В атрибуте src укажи путь /calc/<префикс>.html, где <префикс> — это имя файла этого сервиса (например /calc/funda01.html). — Класс calc-frame оставь ОБЩИМ для всех сервисов (не добавляй к нему префикс) — по этому классу общий скрипт авто-высоты на сайте находит все iframe. Уникальность каждого iframe обеспечивается только уникальным src (именем файла) и уникальным calcId внутри файла. — Значение calcId в postMessage внутри HTML-файла и имя файла в src iframe ДОЛЖНЫ полностью совпадать с префиксом (например файл funda01.html, внутри calcId: ‘funda01’, в iframe src=»/calc/funda01.html»). Проверь это соответствие перед выдачей. — Атрибут scrolling=»no» обязателен (внутренней прокрутки быть не должно — высотой управляет авто-подстройка). — Начальную высоту (height) поставь ориентировочную, дальше её автоматически скорректирует скрипт авто-высоты на сайте.

В самом конце ответа выведи короткую памятку из 3 строк:

Имя файла: <префикс>.html → загрузить в папку /calc/ в корне сайта.
Строка iframe для вставки в статью (готовая, см. выше).
Подтверждение, что calcId внутри файла = имени файла = префиксу в src.

Как должен работать сервис (начало):

Требования:
Виджет товаров — это полностью автономная HTML-страница, работающая внутри iframe, независимо от сайта, темы и других калькуляторов и сервисов. Сервис должен зависеть от стилей и скриптов сайта-родителя и не должен влиять на них (полная изоляция за счёт iframe).
Виджет товаров работает для пользователей из России.
Виджет товаров должен корректно работать независимо от количества пользователей, использующих его одновременно (весь расчёт на стороне браузера, без сервера).
Названия опций и кнопок должны полностью отображаться на всех экранах мобильных устройств. Виджет товаров должен быть интерактивным и корректно работать и отображаться на всех экранах мобильных устройств. Без обращения к серверу — расчёт целиком на JS (быстро, не нагружает сайт). Никаких настроек через админку. Все настройки (цвета, тексты, звук, лимит времени и т.п.) задаются прямо константами в начале JavaScript-кода, чтобы их было легко поменять в самом файле.
На мобильных экранах контент карточек с товарами не должны вылезать за пределы экрана, а контент карточек внутри самих карточек не должен наезжать друг на друга.

Как выводится на сайте:

На сайте в месте вставки iframe виджета показываются вертикальные карточки с товарами. Вот как выглядит каждая карточка: квадратная картинка, под ней расположен краткий текст описания — до 300 символов, ниже стоимость товара, ниже кнопка/ссылка: Нажать или узнать (при нажатии страница сайта показывается в новом окне браузера).

Карточки с товарами показываются с горизонтальной автопрокруткой, через каждые 5 секунд происходит плавная прокрутка карточек слева направо, по одной), по завершению автопрокрутки всех карточек, происходит обратная автопрокрутка и цикл автопрокрутки продолжается. Можно прокручивать карточки товаров влево и вправо курсором мышки или стрелками (располагаются под карточками) или пальцем (тапом) на мобильных устройствах. Дизайн карточек и контента в них адаптивный и корректно отображается на вех экранах мобильных устройств. Кол-во карточек 25 (на сайте показываются только те карточки, в которых добавлен контент).

Сделай 5 видов дизайна для карточек товаров:

Каждый товар выводится в красивой отдельной карточке

Дизайн виджета товаров:
Представь себя лучшим в мире веб-дизайнером о которого зависит успех в продажах и сделай 5 видов дизайна виджета товаров, в каждом дизайне своя цветовая гамма, чтобы я мог в коде менять (активировать) каждый дизайн виджета товаров сменой букв английского алфавита: А, В, С, D, V (каждый дизайн привязан к своей букве) — и после сохранения каждой буквы, дизайн виджета товаров со всем расположенным на нем контентом активируется и показывается в виджете товаров.

Дизайн: A
«Современный дизайн виджета подписки. Цветовая палитра: чистый белый фон, яркий оранжевый акцент (#F5852A), золотисто-медовые градиенты, глубокий тёмно-графитовый (почти чёрный) для текста. Премиальный минималистичный стиль с лёгкими 3D-элементами и мягкими тенями.
Название товара: крупным жирным тёмно-графитовым шрифтом.
Кнопка: Нажать и узнать — фон: F5852A с белым текстом, с мягким свечением, при наведении курсора меняет цвет.
Карточки товаров — карточки на белом фоне, в красивой тонкой рамке оранжевого цвета и текстом описания товара тёмным шрифтом.
Сделай края фона карточек — слегка размытыми.
Требования к читаемости: высокий контраст текста и фона, тёмный текст на белом/светлом, белый текст на оранжевых кнопках, чёткая типографическая иерархия. Стиль: чистый, дорогой, tech/lifestyle, фон бело-серый с градиентом, скруглённые углы, тонкие золотые обводки. Flat UI дизайн с элементами глубины, высокое разрешение.»

Дизайн: B
«Современный дизайн виджета подписки. Цветовая палитра: природные оттенки зелёного (шалфейно-зелёный #7A9A76, глубокий лесной #3E5C42, мягкий оливковый), тёплые песочно-бежевые и охристо-золотистые акценты, приглушённый терракотовый. Эко-стиль, органичный и премиальный, с мягкими тенями и эффектом бумажной аппликации (paper-cut).
Название товара: крупным жирным тёмно-графитовым шрифтом.
Кнопка: Нажать и узнать — фон: #7A9A76, с белым текстом, с мягким свечением, при наведении курсора меняет цвет.
Карточки товаров— карточки на тёпло песочно-бежевом фоне, в красивой тонкой рамке оранжевого цвета и текстом описания товара тёмным шрифтом.
Сделай края фона карточек — слегка размытыми.
Требования к читаемости: высокий контраст — белый и тёмно-зелёный текст на светлых и зелёных фонах, чёткая типографическая иерархия. Стиль: чистый, натуральный, эко/organic, скруглённые углы, эффект слоёной бумаги, высокое разрешение.»

Дизайн: C
«Современный дизайн виджета подписки. Цветовая палитра: яркий бирюзово-мятный (#1BC5BD, #17A2A2), тёмно-графитовый почти чёрный для текста (#2B2B2B), чистый белый и светло-серый фон. Свежий, чистый, финтех-стиль с мягкими тенями и лёгким градиентом.
Название товара: крупным жирным тёмно-графитовым шрифтом.
Кнопка: Нажать и узнать — фон: #1BC5BD с белым текстом, с мягким свечением, при наведении курсора меняет цвет.
Карточки товаров— карточки на белом фоне, в красивой тонкой рамке оранжевого цвета и текстом описания товара тёмно-графитовым шрифтом.
Сделай края фона карточек — слегка размытыми.
Требования к читаемости: высокий контраст — тёмный текст на белом фоне, белый текст на бирюзовых кнопках, чёткая типографическая иерархия. Стиль: чистый, современный, fintech/tech, скруглённые углы, высокое разрешение.»

Дизайн: D
Премиум чёрный: фон #0D0D0D, акцент золото #D4AF37 + серебро #C0C0C0. Тонкие золотые линии, засечный шрифт (Georgia) для заголовков.
Название товара: крупным жирным белым шрифтом.
Кнопка: Нажать и узнать — фон: #D4AF37 с белым текстом, с мягким свечением, при наведении курсора меняет цвет.
Карточки товаров— карточки на белом фоне, в красивой тонкой рамке оранжевого цвета и текстом описания товара тёмно-графитовым шрифтом.
Сделай края фона карточек — слегка размытыми.
Требования к читаемости: высокий контраст — тёмный текст на белом фоне, белый текст на кнопке: #D4AF37, чёткая типографическая иерархия. Стиль: чистый, современный, fintech/tech, скруглённые углы, высокое разрешение.»

Дизайн: V
Рукописный: кремовый фон #FFF9F0, акцент маркер-жёлтый #FFE44D + синие «чернила» #2B4C7E, подчёркивания маркером, шрифт cursive для заголовков.
Название товара: крупным жирным шрифтом: #2B4C7E.
Кнопка: Нажать и узнать — фон: #2B4C7E с белым текстом, с мягким свечением, при наведении курсора меняет цвет.
Карточки товаров — карточки на кремовом фоне #FFF9F0, в красивой тонкой рамке оранжевого цвета и текстом описания товара тёмно-графитовым шрифтом.
Сделай края фона карточек — слегка размытыми.
Требования к читаемости: высокий контраст — тёмный текст на кремовом фоне #FFF9F0, белый текст на кнопке: #2B4C7E, чёткая типографическая иерархия. Стиль: чистый, современный, fintech/tech, скруглённые углы, высокое разрешение.»

В каждой карточке товара предусмотри следующее: цена товара/услуги показывается по горизонтали над кнопкой/ссылкой по умолчанию так:
Обычная цена: 9 499 ₽. Цена сейчас: 7 000 ₽

Пояснение по цене: цифра стоимости в: Обычная цена: перечеркивается (анимация зачеркивания цены показывается в момент появления карточки в зоне видимости, то есть после прокрутки и появлению в зоне видимости).
Если в карточке: Обычная цена: — не указана цена, то это не показывается в карточке, показывается только цифра стоимости в: Цена сейчас
Если цифры цены в: Обычная цена и: Цена сейчас — не указаны, то вместо них показывается слово: ЗАБЕРИ БЕСПЛАТНО (чтобы можно менять текст).

Анимация:
При появлении в зоне видимости на пк или на мобильных устройствах (при автопрокрутки карточек товаров), каждая карточка должна показываться полностью и слегка подсвечиваться по краям.
При появлении каждой карточки товара в зоне видимости на пк или на мобильных устройствах (при автопрокрутки карточек товаров или вручную), в каждой карточке цена увеличивается до указанной цены.
Если цифры цены в: Обычная цена и: Цена сейчас — не указаны, то вместо них показывается фразу: ЗАБЕРИ БЕСПЛАТНО — этот текст легко пульсирует.

Как должен работать сервис (конец):

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

«А теперь с учетом моего задания подробно напиши как ты понял как работает сервис, как выводится на сайте, как наполняется контентом, что можно редактировать и как редактируется, как активируется дизайн и все остальное относящееся к моему сервису. Объясняй как новичку, подробно ничего не упусти.»

В ответ на это нейросеть выдаст вам полный текст описания вашего сервиса, если что то не устраивает, копируете текст описание этого в этом же чате, ставите тире и пишите как должно быть (как должно работать). Если чего то не нужно, копируете это, ставите тире и пишите — это не нужно.

В конце ваших пояснений и корректировок снова вставляете промт:

«А теперь с учетом моего задания и моих пояснений и дополнений в этом сообщении, подробно напиши как ты понял как работает сервис, как выводится на сайте, как наполняется контентом, что можно редактировать и как редактируется, как активируется дизайн и все остальное относящееся к моему сервису. Объясняй как новичку, подробно ничего не упусти.»

Что делать дальше:

  1. После того как нейросеть подробно напишет как должен работать ваш сервис, проверяете описание, копируете и вставляете в конце первого промта (задания) между: Как должен работать сервис (начало): и Как должен работать сервис (конец): — заменяя ваше описание на описание которое написала нейросеть.
  2. Затем копируете промт выше, то есть весь текст который находится между: Начало промта: до Как должен работать сервис (конец):  (с вставкой описания как работает сервис, которое написала нейросеть), отправляете в чат нейросети, затем копируете промт ниже начиная от: Дизайн сервиса: до Конец промта (завершение):, вставляете его в конец предыдущего промта и отправляете на выполнение. Нейросеть в нескольких сообщениях сгенерирует вам готовый файл вашего сервиса.
  3. Готовый файл загружаете на сервер, на домен: заходите на хостинг, на котором работает ваш сайт, заходите в корень сайта (там где лежат файлы сайта), создаете папку /calc/, открываете ее и загружаете в эту папку файл с готовым кодом вашего сервиса. Затем в нужную статью сайта вставляете <iframe …, который вам выдаст нейросеть в конце генерации файла сервиса (если не выдала попросите: «Выдай <iframe код для вывода сервиса в статье сайта и инструкцию как менять дизайн и другие параметры», копируете код, вставляете в статью сайта, Сохраните и в месте вставки должен работать ваш сервис.

Дизайн сервиса:

Жду от тебя следующую информацию: твои предложения по дизайну вау-эффектам и анимации. Затем я напишу тебе слово: Продолжи — и ты напишешь промт для генерации файла сервиса отзывов. Нужно сделать вывод отзывов более интересным, «залипательным» и вирусным.

ТРЕБОВАНИЯ ПО ИЗОЛЯЦИИ И УНИКАЛЬНОСТИ ИМЁН (ОБЯЗАТЕЛЬНО): На моём сайте будет много таких калькуляторов и сервисов (каждый — отдельный HTML-файл в папке /calc/, выводится через iframe). Хотя iframe уже изолирует калькуляторы и сервисы друг от друга, всё равно соблюдай единый префикс во всех именах — это упрощает отладку и гарантирует уникальность calcId для авто-высоты.

Соблюдай строго:

УНИКАЛЬНЫЙ ПРЕФИКС (slug) — ПРИДУМАЙ САМ ПО ПРАВИЛУ. Не жди префикс от меня — сгенерируй его сам строго по этому алгоритму:
а) Возьми СМЫСЛОВОЕ название сервиса — то слово (или слова), которое описывает, ЧТО он считает. ИГНОРИРУЙ служебные слова: «Калькулятор», «Сервис», «Расчёт», «Онлайн», «calculator», «calc», «pro». Примеры смыслового ядра: «Сервис отзывов» → ядро «отзывы» «Сервис видео» → ядро «видео» «Сервис виджетов» → ядро «виджет» «Сервис подписки» → ядро «подписка»

б) Если название русское — сначала транслитерируй ядро латиницей (отзывы → reviews, видео→ video, виджет→ widget, подписки → subscription).

в) Возьми ПЕРВЫЕ 5 БУКВ полученного латинского слова, в нижнем регистре. Только буквы a–z, без цифр, дефисов и пробелов. Если в ядре меньше 5 букв — используй сколько есть

г) Добавь в КОНЕЦ две цифры. По умолчанию начни с «01». Если есть риск, что такой же 5-буквенный корень уже встречался у другого калькулятора или сервиса, увеличивай номер (02, 03 …), чтобы префикс остался уникальным. отзывы → reviews1, видео→ video1, виджет→ widget1, подписки → subscription1

д) Итоговый префикс — это латинские буквы + 2 цифры (например «funda01»). Используй его ОДНОВРЕМЕННО во всех сущностях из пунктов 2–5 (имя файла, CSS-класс корня, CSS-переменные, JS-флаг инициализации, calcId для postMessage, имена всех CSS-классов и JS-переменных).

е) В НАЧАЛЕ своего ответа явно напиши одной строкой, какой префикс ты выбрал, например: «Префикс для этого сервиса: reviews01».

ИМЯ ФАЙЛА. Файл называется <префикс>.html (например reviews01.html).
CSS — ВСЕ СЕЛЕКТОРЫ ВЛОЖЕНЫ В КОРНЕВОЙ КЛАСС С ПРЕФИКСОМ. Корневой контейнер калькулятора/сервиса: .<префикс>_root КАЖДОЕ CSS-правило начинается с .<префикс>_root (например .<префикс>_root .card). Разрешено задавать базовые стили для html и body ВНУТРИ файла (фон, отступы, шрифт страницы), так как это отдельный документ iframe. Но все стили элементов сервиса обязательно с префиксом корня, без «голых» глобальных классов (.card, .btn, .grid и т.п.). CSS-переменные тоже с префиксом: —<префикс>-primary.
JS — ВЕСЬ КОД В IIFE, БЕЗ ЛИШНИХ ГЛОБАЛЬНЫХ ИМЁН. Весь код в (function(){ ‘use strict’; … })(); Не создавай глобальных переменных/функций с общими именами (calc, init, boot, $ и т.п.). Если нужна точка в window — только с префиксом: window.<Префикс>Boot. Инициализируй только свой контейнер: document.querySelector(‘.<префикс>_root’). Ставь флаг инициализации с уникальным data-атрибутом: data-<префикс>-init, чтобы не инициализироваться дважды. Все имена классов и id в HTML тоже с префиксом.
БЕЗ ВНЕШНИХ ЗАВИСИМОСТЕЙ. Никаких jQuery, Bootstrap, внешних CSS/JS, шрифтов с чужих доменов, картинок и звуков со сторонних сервисов. Иконки — только встроенные (inline-SVG, символы или нарисованные через CSS). Шрифты — только системные (Arial, Helvetica, sans-serif и т.п.). Всё, что нужно, — внутри одного HTML-файла. Это важно, чтобы корректно работала опция «Сохранить» (сохранение результата в картинку) без проблем с внешними ресурсами.
ПРОВЕРКА ПЕРЕД ВЫДАЧЕЙ. Перед тем как выдать код, мысленно проверь, что: (а) весь HTML, CSS и JS находятся в одном файле; (б) ни одно имя CSS-класса, id, CSS-переменной и JS-переменной не существует без префикса; (в) есть встроенный механизм авто-высоты через postMessage с правильным calcId; (г) нет ни одной ссылки на сторонний сервис или внешнюю библиотеку. Подтверди это списком в конце ответа.»

Конец промта (завершение):

Второй финальный промт: что делать дальше (или сразу без первого промта)

Ниже готовый промт, который тебе нужно отправить в чат нейросети, по которому она сгенерирует файл сервиса (виджета) отзывов, который затем нужно будет загрузить в корень твоего WordPress сайта, в том место где находятся все папки и файлы сайта. В промте ниже, текст выделенный жирным синим шрифтом, поменяйте на свои названия (напишите название своего сервиса или можете оставить мое название, все равно же получите именно сервис отзывов, напишите свои названия инфопродуктов или товаров или услуг, чтобы нейросеть сгенерировала отзывы для ваших товаров и услуг).

Используй нейросеть Claud 4.8 Opus или DeepSeek Coder ссылка: chat.deepseek.com но лучше Claud 4.8 Opus —  я использую вот этот сервис, в котором есть все необходимые нейронки для текста (ChatGPT, Claud и др. и для генерации изображений). Использую тариф за 760 руб/месяц.

Начало промта: 

«Сгенерируй ОДИН самодостаточный HTML-файл с именем revie01.html — интерактивный «Сервис отзывов» с карточками отзывов и горизонтальной прокруткой. Весь код (HTML + CSS в <style> внутри <head> + JS в <script> перед </body>) — в одном файле. Без внешних библиотек, шрифтов, картинок, ссылок и обращений к серверу. Только чистый ванильный JS и собственный CSS.

Префикс и изоляция

  • Единый префикс во всём файле: revie01.
  • Корневой контейнер: <div class="revie01_root" data-revie01-init>.
  • КАЖДОЕ CSS-правило начинается с .revie01_root ... (никаких голых классов). CSS-переменные вида --revie01-primary.
  • Весь JS — в IIFE: (function(){ 'use strict'; ... })();. Никаких глобальных имён, кроме (при необходимости) window.Revie01Boot.
  • Все id и классы в HTML — с префиксом revie01.
  • Защита от повторной инициализации — ТОЛЬКО через флаг на ленте (track), а НЕ через ранний выход в начале скрипта. Порядок обязателен:
    1. Найти корневой контейнер .revie01_root; если его нет — return.
    2. СРАЗУ применить тему (добавить класс revie01_themeB / revie01_themeC в зависимости от CFG.THEME) — тема должна применяться ВСЕГДА, до любых проверок.
    3. Только ПОСЛЕ применения темы проверить флаг на track: if(!track || track.getAttribute('data-revie01-done') === '1') return; и затем track.setAttribute('data-revie01-done', '1');.
    • ⚠️ Категорически НЕ ставить ранний return по флагу готовности в самом начале скрипта — иначе тема не применится и лента не настроится (частая ошибка при двойной вставке блока в конструкторах/CMS).
  • Базовые стили для html и body внутри файла разрешены (фон transparent, шрифт, отступы = 0).

Шрифты и ресурсы

  • Только системные шрифты: -apple-system, "Segoe UI", Roboto, Arial, sans-serif.
  • Все иконки (звёзды, галочка, лайк, стрелки, «онлайн») — inline-SVG или CSS.
  • Аватары — inline-SVG, рисуются функцией прямо в коде: стилизованные портреты мужчин и женщин только славянского/европейского (российского) типа лица со светлым тоном кожи. Варьировать: причёску (у женщин — распущенные длинные и каре; у мужчин — обычная и с зачёсом набок), цвет волос (русый, тёмно-русый, каштановый, светлый, седой), оттенок светлой кожи с мягкой тенью скул, брови, глаза с бликами, нос, румянец, рот, наличие бороды/усов у части мужчин. У каждого аватара — свой градиентный круглый фон и одежда/плечи. Пол аватара обязан совпадать с полом имени в отзыве.

Настройки через константы (в начале JS)

Вынеси в объект конфига CFG в начале скрипта:

  • THEME — 'A' (Тёплый премиум), 'B' (Тёмный люкс с золотом) или 'C' (Мятная свежесть). По умолчанию 'A'. Три темы реализуются через CSS-переменные на классах .revie01_themeB и .revie01_themeC; переключение работает сменой одной строки в конфиге.
    • Тема A (Тёплый премиум): фон-градиент #f6f8ff → #eef1fb, карточка #ffffff, акценты #f5a623 и #5b6ef5, текст #1f2430, звёзды #ffcb45 → #f5a623.
    • Тема B (Тёмный люкс с золотом): фон-градиент #0f1424 → #1a2138, карточки — стекло (полупрозрачные rgba(255,255,255,0.05) + backdrop-filter: blur) с золотой окантовкой, акценты фиолетовый #8b5cf6 + золото #ffcb45/#f5a623 + бирюзовые чипы, текст #eaf0ff. При hover карточки — золотая неоновая окантовка и свечение.
    • Тема C (Мятная свежесть): фон-градиент #eafcf4 → #dff5ef, карточка #ffffff, акценты #17b890 и #0f9d8a, текст #14312b, звёзды #ffd45e → #f5a623, мягкие мятные тени.
  • AUTOPLAY (вкл/выкл автопрокрутку), AUTOPLAY_SPEED (напр. 3200 мс), TITLE_RATING = '4.9', TITLE_CLIENTS = 15710, SERVICE_NAME = 'Отзывы клиентов'.
  • BATCH — сколько карточек подгружать за один шаг (напр. 12).
  • Тексты кнопок и подписей: LABEL_MORE, LABEL_HELPFUL, LABEL_VERIFIED, LABEL_RECENT.

Заголовок сервиса

  • Название сервиса вверху: «Отзывы клиентов» (без слов Calculator/Pro/Сервис).
  • Верхняя плашка: «★ 4.9 · Более 15 710 довольных клиентов», где число 15 710 анимированно докручивается от 0 при появлении (с форматированием разрядов пробелами). Добавь пульсирующий бейдж «Онлайн».

Расплывчатые края фона

  • Подложка корневого блока плавно растворяется в прозрачность по периметру через mask-image (linear-gradient по горизонтали и вертикали, с mask-composite: intersect). На мобильных отступы маски меньше.

Лента отзывов

  • 73 карточки, горизонтальная прокрутка: drag мышью на ПК + свайп на тач + стрелки ◀ ▶ по бокам.
  • Плавная инерция и scroll-snap (мягкое прилипание по центру), скрытый скроллбар.
  • Автопрокрутка (медленная, зацикленная), пауза при наведении/касании, возобновление после.
  • Появление карточек: fade-in + подъём (IntersectionObserver, root: track).
  • Звёзды «загораются» по очереди при появлении карточки (animation-delay по индексу).
  • Внизу: точки-индикаторы (активная точка вытягивается) + счётчик вида «1 / 73», активная карточка вычисляется по центру ленты.
  • Кнопка «Показать ещё отзывы» (ленивая подгрузка порциями по BATCH).

⚠️ ОБЯЗАТЕЛЬНО: прокрутка/догрузка дальше первой порции (частая ошибка)

Лента НЕ должна «застревать» после первых BATCH карточек. Реализуй ленивую догрузку следующей порции в ТРЁХ местах, чтобы прокрутка работала до последнего (73-го) отзыва и на ПК, и на мобильных:

  1. При ручной прокрутке (событие scroll на track): если rendered < DATA.length и scrollLeft >= (scrollWidth - clientWidth) - clientWidth*0.8 → вызвать renderBatch(). Работает и мышью, и пальцем.
  2. При нажатии стрелки «вперёд»: если пользователь у правого края и есть неотрисованные отзывы — сначала renderBatch(), затем шаг.
  3. В автопрокрутке (autoTick): при достижении конца отрисованных карточек — если ещё есть отзывы, догрузить renderBatch() и продолжить движение вперёд; если показаны ВСЕ 73 — плавно вернуться в начало. Также заранее догружать порцию при приближении к концу.
  • Функция renderBatch() должна безопасно выходить, если rendered >= DATA.length, и скрывать кнопку «Показать ещё», когда все отзывы отрисованы.

Адаптивная ширина карточек (строго не вылезать за экран)

  • ПК >1200px: карточка ~340px (видно 3 + край 4-й).
  • 768–1200px: ~320px (2 + край).
  • 480–767px: ~300px (1 + край).
  • <480px: min(85vw, 320px) (1 + выглядывает край следующей).
  • Текст внутри переносится, ничего не вылезает и не наезжает. box-sizing: border-box, overflow-wrap: anywhere.

Структура карточки

  • Шапка: круглый SVG-аватар + «Имя Фамилия» + строка «Проверенный отзыв ✔» (мерцающая галочка) + пометка «недавно оставил отзыв».
  • Звёзды рейтинга (4 или 5, золотые через SVG-градиент; не у всех 5.0 — для реалистичности).
  • Цветной чип-бейдж инфопродукта (3 разных цвета для 3 продуктов, свои оттенки в каждой из тем A/B/C).
  • Текст отзыва (250–300 знаков).
  • Футер: только иконка «лайк» + число лайков (разное) + подпись «был полезен». Клик по лайку увеличивает счётчик один раз. Даты НЕ показывать.

Hover / эффекты

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

Данные: 73 отзыва (сгенерируй готовые тексты)

Создай массив DATA из 73 объектов. Распредели по 3 инфопродуктам примерно поровну (вперемешку):

  1. «Клиенты без рекламы и вложений» — «Как БЕСПЛАТНО привлекать клиентов и увеличить кол-во продаж и заказов без рекламы и без вложений».
  2. «Трафик с помощью ИИ-блогеров» — «Как БЕСПЛАТНО привлекать посетителей, подписчиков и клиентов с помощью ИИ-блогеров».
  3. «Мини-сервисы: клиенты 24/7» — «Как с помощью мини-сервисов бесплатно привлекать клиентов в бизнес 24/7, без денег, без рекламы и без вашего участия».

Названия чипов вынеси в объект PRODUCTS = {1:'...', 2:'...', 3:'...'}.

Требования к отзывам:

  • Русские Имена и Фамилии (жители России), пол имени = полу аватара (gender: 'm'/'f').
  • Длина каждого текста 250–300 знаков.
  • Тексты живые, разные, конкретные, с эмоцией и результатом (без выдуманных гарантий дохода в цифрах). Разный рейтинг (большинство 5 звёзд, часть 4), разное число лайков.
  • Каждый объект: { name, gender, product (1/2/3), rating, likes, text } (avatarSeed опционален — по умолчанию использовать индекс карточки).

ОБЯЗАТЕЛЬНО: авто-высота iframe

Встрой механизм:

  • Функция postHeight() измеряет Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) и шлёт наверх только при изменении: parent.postMessage({ calcHeight: высота, calcId: 'revie01' }, '*'); (обёрнуто в try/catch).
  • Вызывай функцию: при load (+ повтор через 400 мс), при resize (с дебаунсом), при любом клике по контейнеру (через setTimeout), при подгрузке карточек/появлении по IntersectionObserver, при событии scroll ленты (с дебаунсом), и через ResizeObserver, наблюдающий за document.body.
  • Дополнительно вызвать несколько раз с задержками после старта (100/600/1200 мс).
  • Внутри iframe НЕ должно быть своей вертикальной прокрутки (html, body { margin:0; padding:0; }, overflow: hidden на корне).

Проверка перед выдачей

  • Весь HTML/CSS/JS в одном файле; ни одного класса/id/переменной без префикса revie01.
  • Тема применяется ВСЕГДА и переключается сменой CFG.THEME (A/B/C); НЕТ раннего return, блокирующего применение темы.
  • Лента прокручивается и догружается до последнего (73-го) отзыва на ПК и на мобильных (три точки ленивой догрузки: scroll, стрелка «вперёд», автопрокрутка).
  • Авто-высота через postMessage с calcId: 'revie01'; ноль внешних ссылок и библиотек; всё работает офлайн.
  • Каждая следующая часть будет начинаться с последней строки предыдущей.»
Конец промта:

Что дальше с готовым файлом сервиса:

  1. Дальше нейросеть выдаст тебе в нескольких сообщениях название файла (заканчивается на .html) и готовый код сервиса.
  2. Дальше в корне сайта (в то место в котором находятся все файлы сайта) создаешь папку: calc, открываешь ее и в нее загружаешь в эту папку файл сервиса, который тебе сгенерирует нейросеть по промту выше.

В конце кода сервиса, нейросеть выдаст тебе iframe код, который нужно вставить в любое место твоего сайта и сохранить После сохранения при просмотре страницы вместо iframe кода будет показываться виджет (сервис) с отзывами как у нас на этой странице.

Пояснение:

В сервисе тебе доступны 3 вида дизайна (темы), вы можете активировать 1 из 3-х.

  1. THEME: ‘A‘, Тёплый премиум (светлая, сине-оранжевая).
  2. THEME: ‘B‘, Тёмный люкс с золотом.
  3. THEME: ‘C‘, Мятная свежесть (светлая, зелёно-бирюзовая).

Меняется в одном месте.

Пояснение как включить другую тему::

Где менять тему (THEME)
Откройте файл revie01.html (у вас будет файл с другим названием), найдите строку <script> (она одна, ближе к концу файла, перед </body>). Сразу после неё идёт блок настроек CFG:

(function(){
‘use strict’;

var CFG = {
THEME: ‘A‘, // ← ВОТ ЭТА СТРОКА, здесь измените букву А на И или на С (английский шрифт заглавные буквы.
AUTOPLAY: true,
…

💡 Как найти быстро: откройте файл в блокноте → нажмите Ctrl+F → введите THEME или function: → перед вами появится подсвеченное значение которой ввели и ниже вы увидите код из нескольких строчек, который выше, в нем замените букву → сохраните.

Что еще нужно сделать:

На будущее если будет устанавливать сервисы интерфейс которых будет открываться. В этом случае вам нужно добавить на WordPress сайт специальный плагин а в него специальный код, чтобы сервис автоматически принимал разные размеры по высоте.

Способ — с плагином для вставки кода

Установите один из плагинов:

  • WPCode (бывш. Insert Headers and Footers) — рекомендую, самый популярный. Лучше этот WPCode
  • или Header Footer Code Manager.
  • или Code Snippets.

Что делать в WPCode:

  1. Плагины → Добавить новый → найти «WPCode» → Установить → Активировать.
  2. Code Snippets (WPCode) → + Add Snippet → Add Your Custom Code (New Snippet).
  3. Тип кода: HTML Snippet.
  4. Вставьте туда только приёмник высоты (один раз на весь сайт), код ниже:
html
<script>
(function(){
  window.addEventListener('message', function(e){
    var d = e.data;
    if(!d || typeof d !== 'object' || d.calcId !== 'revie01') return;
    var h = parseInt(d.calcHeight, 10);
    if(!h || h < 50) return;
    var frames = document.getElementsByTagName('iframe');
    for(var i=0;i<frames.length;i++){
      if(frames[i].contentWindow === e.source){
        frames[i].style.height = h + 'px';
        break;
      }
    }
  }, false);
})();
</script>
  1. В настройках сниппета: Insert Method → Auto Insert, Location → Site Wide Footer (в подвал всего сайта). Сохранить и активировать.

Куда вообще можно устанавливать сервис отзывов

Файл revie01.html (у вас файл с другим названием) — это обычная статичная HTML-страница. Она работает на ЛЮБОМ движке и вообще без движка:

  • WordPress
  • Tilda
  • Bitrix
  • Joomla
  • MODX
  • Drupal
  • OpenCart
  • на чистом HTML-сайте (просто загрузить файл на хостинг)

Схема одна и та же для всех:

  1. Загружаете revie01.html в корень сайта (или в папку), например https://ваш-сайт.ru/revie01.html.
  2. В нужную статью/страницу вставляете iframe, который показывает этот файл.
  3. Добавляете скрипт-приёмник высоты  на WordPress (один раз на сайт).
Продвижение товаров и услуг для онлайн продаж