Промт для генерации онлайн калькуляторов

Ниже 2 промта (задания для нейросети), с помощью которых вы сгенерируете онлайн-калькуляторы (мини-сервисы) которые будут привлекать клиентов в ваш бизнес.

Рекомендую использовать вот этот (нажми и узнай) сервис с большим кол-вом нейросетей. В видео ниже, я использую именно его.

Видео-инструкция как сгенерировать онлайн калькулятор (мини-сервис) в формате WordPress плагина

• Или смотреть на RuTube — нажать, перейти и смотреть.
• Или смотреть на VK видео — нажать, перейти и смотреть.

Способ 1: (для генерации калькуляторов в виде WordPress плагина)

ШАГ 1: Промт для поиска идей онлайн калькуляторов (мини-сервисов)

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

КОНТЕКСТ:

• Тематика моего сайта/ниши: [отношения, финансы, универсальный развлекательный сайт]
• Целевая аудитория: [мужчины и женщины от 24 до 65 лет, маркетологи, фрилансеры, владельцы бизнеса, люди с другими интересами]
• Цель калькуляторов (мини-сервисов): [привлечение трафика из поиска, сбор email и монетизация рекламой]

ЗАДАЧА: Предложи 30 идей калькуляторов, которые соответствуют следующим критериям виральности:

1. Затрагивают личные интересы пользователя (его жизнь, тело, отношения, будущее)
2. Обещают быстрый и интригующий результат
3. Вызывают желание поделиться результатом в соцсетях
4. Имеют потенциал поискового трафика (люди реально ищут это в Google/Яндексе)
5. Просты в использовании (не более 3–7 полей ввода)

ФОРМАТ ОТВЕТА (для каждой идеи):

1. 🧮 Название калькулятора (мини-сервиса).
2. 📝 Краткое описание (3-5 предложения — что считает).
3. 📝 Формула расчета.
4. 🎯 Какую «боль» или любопытство закрывает.
5. 📥 Какие поля вводит пользователь (перечисли все возможные значения).
6. 🚀 Особенности ответа, дизайна и анимации (список что добавить для wow эффекта).
7. 📤 Какой результат получает (текст, процент, шкала, советы, рекомендации).
8. 🔥 Почему люди будут этим делиться (триггер виральности).
9. 🔍 Примерная поисковая частотность: высокая / средняя / низкая.
10. 💰 Способы монетизации (если применимо).

ДОПОЛНИТЕЛЬНО:

• Предлагай как классические идеи так и необычные/оригинальные.
• Разбей идеи на категории: [Отношения | Здоровье и тело | Финансы | Личность и психология | Развлечения и судьба | Родительство | Карьера | Заработок онлайн | Любовь |Бизнес |SEO | Маркетинг, допишите свои варианты или напишите только свои, удалив те, которые я указал].
• В конце сделай ТОП-5-7 самые перспективные идеи с обоснованием.»

ШАГ 2: ПЕРВОНАЧАЛЬНЫЙ промт для генерации онлайн калькулятора (мини-сервиса)

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

Начало Промта

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

Требования:

• Оформи калькулятор как полноценный плагин WordPress.
• WordPress плагин не должен конфликтовать с версией WordPress, с темой (тема не должна сбрасывать/перекрывать стили), с php.
• WordPress плагин работает для пользователей из России.
• WordPress плагин должен корректно работать независимо от кол-ва пользователей использующих его одновременно.
• Сделай так, чтобы нейросеть при генерации всех файлов плагина на каждом этапе генерации помнила структуру файлов WordPress плагина.
• Названия опций и кнопок, должны полностью отображаться на всех экранах мобильных устройств.
• Цифры значений должны полностью отображаться на всех экранах мобильных устройств.
• В полях выбора значений, там где предполагается ввод цифр значений, сделай: слайдер (ползунок) меняющий цифры значений и поле ручного ввода с синхронизацией со слайдером.
• В WordPress плагине калькулятора со слайдером используй нелинейную шкалу ползунка. Сам range работай в диапазоне позиций 0–1000, а реальное значение вычисляй через функции преобразования. Первые ~75% хода ползунка отведи под точную линейную зону до 1 000 000 (мелкий шаг, чтобы значения выбирались плавно и точно), а последние ~25% хода — под логарифмическую зону от 1 000 000 до максимума 1 000 000 000. Числовое поле ввода оставляй точным с ручным вводом любого значения до максимума и синхронизируй его с позицией ползунка в обе стороны. В логарифмической зоне округляй значения «красиво» по порядку величины.
• WordPress плагин калькулятор должен быть интерактивный и корректно работать и отображаться на всех экранах мобильных устройств.
• Без обращения к серверу — расчёт целиком на JS (быстро, не нагружает сайт).
• Админ панель не нужна. Настройки цветов/таймера/текстов, звук, лимит времени, кастомные тексты задаются только через параметры шорткода, без интерфейса в WordPress.
• Не делай опцию: Поделиться результатом.
• Сделай опцию: Скачать в pdf. Результат должен выводиться на 1-2 страницах, без шапки сайта. Результат не должен открываться в новой вкладке браузера и на отдельной странице.
• Сделай опцию: Распечатать. Результат должен выводиться на 1-5 страницах в зависимости от объема результата, без шапки сайта и без контента страницы. Результат не должен открываться в новой вкладке браузера и на отдельной странице.
• Сделай опцию: Сохранить. при нажатии на которую будет сохраняться только сам результата расчета (без шапки сайта, без интерфейса калькулятора и контента) в виде карточки.
• Чтобы при повторных прохождений калькулятора, прежние результаты сбрасывались и очищались.
• Кнопка «Показать результат» (или с другим названием) ВСЕГДА активна (не disabled). Если есть не выбранные (не указанные/не заданные) значения (параметры) и/или не выбранные/не отвеченные варианты ответов, то все пропущенные вопросы и значения, которые нужно выбрать — подсвечиваются красной рамкой (.mbti_missing), а под кнопкой выводится сообщение со списком номеров пропущенных значений или вопросов,  страница автоматически прокручивается (scrollIntoView, behavior smooth, block center) к первому пропущенному вопросу или к значения которое нужно выбрать;  внутри пропущенного вопроса показывается подпись «⚠️ На этот вопрос нужно ответить» (.mbti_missing_note, видна только при классе .mbti_missing); внутри пропущенного значения которое нужно выбрать показывается подпись «⚠️ Сделайте выбор в этом блоке» (.mbti_missing_note, видна только при классе .mbti_missing);  результат НЕ показывается, пока есть пропуски. Как только пользователь отвечает на вопрос или выбирает значение которой нужно выбрать — подсветка .mbti_missing с него снимается автоматически, а если все отвечены — сообщение очищается.
• Выпадающие списки должны прокручиваться с удобным выбором параметров и показываться над нижними параметрами), цифровые значения должны указываться удобным ползунком — под ним — поле для ручного ввода — оба способа синхронизированы.
• Выпадающие списки с прокруткой значений и удобным выбором нужного значения.
• На мобильных экранах элементы и контент калькулятор не должен вылезать за пределы экрана и элементы и контент не должны наезжать друг на друга.
• Сделай краткие и понятные пояснения под параметрами мелким но хорошо читаемым шрифтом.
• Сделай усиленную фиксацию прокрутки на мобильных, чтобы при выбора ответов или вариантов из списка значений, не происходила прокрутка вверх или вниз.
• Чтобы шорт код калькулятора был уникальным (чтобы он не повторял шорт коды других калькуляторов установленных на сайте).
• Все файлы плагина сгенерируй без сокращений и без ссылок на сторонние сервисы.
• В названии калькулятора используй его название (то что он рассчитывает) , без слов: Calculator, Pro, PRO.
• Чтобы при выборе информации, которую нужно предоставить (выбрать) для расчёта, на ПК и на всех экранах мобильных устройств открывался выпадающий список с выбором значений, которые нужно указать для расчета, а цифры и проценты — указывались ползунком и ручным способом — оба способа синхронизированы (под ползунком располагается поле для ручного ввода цифр/процентов).
• Вау-эффекты: конфетти при результате, анимированные progress-бары, плавное появление карточек, мягкий звук «успеха», прогресс-бар прохождения теста сверху, glassmorphism-карточки с градиентом.

Как должен работать калькулятор:

• [Посетитель должен иметь возможность выбрать сумму денег в рублях, которую готов откладывать каждый месяц в банк (от 1 000 до 50000 рублей).
• Посетитель должен иметь возможность выбрать кол-во лет вклада (от 1 года до 50 лет).
• Посетитель должен иметь возможность выбрать средний годовой процент по вкладу (от 3% до 35%)].

Посетитель должен иметь возможность выбрать:

Предложи свои варианты как должен работать калькулятор, на основании каких данных и как проводить расчет и что выдавать в ответе.

Что выдавать в ответе:

[В ответе пользователь должен получить сумму денег с учетом выбранных (указанных) настроек, рекомендации как повысить доход от вклада]. Предоставь что еще должен получать в ответе пользователь.

Формула расчета:

1. Калькулятор (мини-сервис) должен [рассчитать сумму вклада с учетом указанной (выбранной) информации, с учетом добавляемой суммы денег каждый месяц и с учетом начисления процентов на проценты].
2. Можешь предложить свое решение расчета и напиши формулу.

Устанавливать онлайн калькулятор буду на WordPress сайт, поэтому онлайн-калькулятор должен исправно устанавливаться и работать на любой версии движка, php и не конфликтовать с другими плагинами.

Дизайн:

Используй следующие цвета:
#10c6f0
#fcc45c
#fc0550

Дизайн онлайн калькулятора сделай с понятным интерфейсом, современным и красивым дизайном премиум уровня. Сделай так, чтобы люди выбирали информацию, которую нужно предоставить, а не вводили ее вручную.

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

Сгенерируй ВСЕ файлы плагина без сокращений по очереди. Используй кодировку UTF-8, русские тексты. Код чистый, прокомментированный.

В конце напиши краткий текст с пояснением в виде 10-15 предложений, что рассчитывает калькулятор и как им пользоваться, эти тексты я добавлю на страницу с калькулятором (мини-сервисом). Не делай опции: Поделиться результатом и опцию: Распечатать.

ТРЕБОВАНИЯ ПО ИЗОЛЯЦИИ И ОТСУТСТВИЮ КОНФЛИКТОВ (ОБЯЗАТЕЛЬНО):

На моём сайте установлено 35+ плагинов-калькуляторов, написанных по похожему
шаблону. Они конфликтуют между собой. Этот калькулятор ДОЛЖЕН быть полностью
автономным и не пересекаться ни с одним другим плагином. Соблюдай строго:

1. УНИКАЛЬНЫЙ ПРЕФИКС (slug) — ПРИДУМАЙ САМ ПО ПРАВИЛУ.
Не жди префикс от меня — сгенерируй его сам строго по этому алгоритму:

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

б) Если название русское — сначала транслитерируй ядро латиницей
(фундамент → fundament, кровля → krovlya, кирпич → kirpich, обои → oboi).

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

г) Добавь в КОНЕЦ две цифры. По умолчанию начни с «01». Если есть риск,
что такой же 5-буквенный корень уже встречался у другого калькулятора,
увеличивай номер (02, 03 …), чтобы префикс остался уникальным.
fundament → funda01
krovlya → krovl01
kirpich → kirpi01
oboi → oboi01

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

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

2. ИМЕНА PHP-КЛАССА, КОНСТАНТ, ФУНКЦИЙ.
— Класс: <Префикс>_Calculator (а не FCalc_… и не Calculator).
— Все define(): уникальные (<ПРЕФИКС>_VERSION, <ПРЕФИКС>_URL и т.д.).
— ВСЕ глобальные функции с префиксом: <префикс>_render(), <префикс>_register().
НЕ называй функции gener-ически (calc_render, render_shortcode и т.п.).
— Оберни объявление класса в: if (!class_exists(‘<Префикс>_Calculator’)) { … }
— Оберни функции в: if (!function_exists(‘<префикс>_render’)) { … }

3. ШОРТКОД — УНИКАЛЬНЫЙ.
Имя шорткода тоже с префиксом, например [<префикс>_calculator].
НЕ используй общие имена ([calculator], [calc], [foundation_calculator]),
которые может занять другой плагин. Перед регистрацией проверяй:
if (!shortcode_exists(‘<префикс>_calculator’)) { add_shortcode(…); }

4. ХЕНДЛЫ (handle) СКРИПТОВ И СТИЛЕЙ — УНИКАЛЬНЫЕ.
wp_register_style(‘<префикс>-style’, …);
wp_register_script(‘<префикс>-script’, …);
НЕ используй общие handle вроде ‘fcalc-style’, ‘calc-script’, ‘style’, ‘script’.

5. CSS — ВСЕ СЕЛЕКТОРЫ ВЛОЖЕНЫ В КОРНЕВОЙ КЛАСС С ПРЕФИКСОМ.
Корневой контейнер: .<префикс>_root
КАЖДОЕ правило начинается с .<префикс>_root (например .<префикс>_root .card).
ЗАПРЕЩЕНО иметь «голые» глобальные селекторы (.card, .btn, .grid, .topbar и т.п.)
без префикса корня — они перетирают чужие плагины. Никаких стилей на body, html,
*, или на общие классы. CSS-переменные тоже с префиксом: —<префикс>-primary.

6. JS — ВСЁ В IIFE, БЕЗ ГЛОБАЛЬНЫХ ИМЁН.
Весь код в (function(){ ‘use strict’; … })();
НЕ создавай глобальных переменных/функций с общими именами
(calc, init, bootAll, FndCalc, $ и т.п. в window).
Если нужна точка в window — только с префиксом: window.<Префикс>Boot.
Инициализируй ТОЛЬКО свои контейнеры: document.querySelectorAll(‘.<префикс>_root’).
Ставь флаг инициализации с уникальным data-атрибутом: data-<префикс>-init,
чтобы не инициализироваться дважды и не цеплять чужие контейнеры.

7. ПУТИ К АССЕТАМ — ОТНОСИТЕЛЬНО ЭТОГО ФАЙЛА.
Используй plugin_dir_url(__FILE__). Структура:
/<папка-плагина>/<главный>.php
/<папка-плагина>/assets/css/<префикс>.css
/<папка-плагина>/assets/js/<префикс>.js
Имена файлов ассетов тоже с префиксом, чтобы не путать при отладке.

8. НИКАКИХ ЗАВИСИМОСТЕЙ ОТ jQuery, Bootstrap, чужих библиотек.
Только чистый ванильный JS и собственный CSS.

9. ПРОВЕРКА ПЕРЕД ВЫДАЧЕЙ.
Перед тем как выдать код, мысленно выполни поиск по всем файлам и убедись,
что НИ ОДНО имя (класс, функция, константа, шорткод, handle, CSS-класс,
CSS-переменная, JS-переменная в window) не существует без префикса
и не может совпасть с другим плагином. Подтверди это списком в конце ответа.»

Конец Промта

Пояснения по промту:

Первое: если калькулятор вам нужен не для сайта, работающего на движке WordPress, то удалите из промта следующее предложение: Устанавливать онлайн калькулятор буду на WordPress сайт, поэтому онлайн-калькулятор должен исправно устанавливаться и работать на любой версии движка, php и не конфликтовать с другими плагинами.

и вместо него напишите следующее предложение: «Я хочу с помощью нейросети сгенерировать готовый онлайн калькулятор (мини сервис): [«Как рассчитать пол ребенка»], получить его архив с файлами и установить архив с ним в корень сайта, а калькулятор вывести в любой статье сайта шорт-кодом.

Вместо текста из раздела: Как должен работать калькулятор — напиши свой текст, в котором опиши как должен работать твой калькулятор (мини-сервис).

Если нет формулы расчета напиши следующее: Напиши формулы расчёта и текстами результатов

Вместо текста из раздела: Какой ответ должен выдавать онлайн-калькулятор пользователям — напиши свой текст, в котором опиши какой ответ должен выдавать онлайн калькулятор (мини-сервис) после расчета.

Что делать если нейросеть остановится не доделав файлы калькулятора (мини-сервиса)? В этом же чате отправь ей сообщение в виде слова: продолжи. И она продолжит генерировать файлы онлайн-калькулятора (мини-сервиса). Отправляй слово: продолжить в том же чате, всякий раз как нейросеть будет останавливаться до тех пор, пока она не сгенерирует все файлы онлайн-калькулятора с инструкцией.

ВАЖНО СДЕЛАТЬ: Все тексты в квадратных скобках удали (вместе с квадратными скобками и напиши свои данные (название калькулятора, как он должен работать, формулу расчёта и другие, которые написаны в квадратных скобках).

Что добавить к готовому промту для генерации файлов калькулятора (мини-сервиса)

Текст ниже, нужно добавить в начало ОСНОВНОГО промта, который вам сгенерирует нейросеть в ответ на первоначальный промт с вашими данными, который находится выше.

Генерируй ПОЛНЫЙ код каждого файла СТРОГО без сокращений.
— ЗАПРЕЩЕНО: добавлять, удалять, переименовывать или перемещать файлы/папки.
— ЗАПРЕЩЕНО: менять пути, импорты и зависимости относительно схемы.
— ЗАПРЕЩЕНО: генерировать сокращенный код файлов.
— Если в процессе понадобится изменить структуру, что то добавить — сначала спроси разрешение, не меняй самостоятельно.
— Каждый файл начинай с заголовка: === путь/имя_файла ===
— Весь код должен относиться ТОЛЬКО к заявленной теме, без сокращений.

Способ 2 (отдельный): ПЕРВОНАЧАЛЬНЫЙ промт (текст вашего задания) для генерации онлайн калькулятора (мини-сервиса) в формате одного самодостаточного файла

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

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

Готовый файл вы загружаете в корень сайта (там где папки плагинов и тем) — создаете папку /calc/ и в нее загружаете файл каждого нового калькулятора.

Затем на страницу сайта добавляете код iframe — вам его выдаст нейросеть после того как сгенерирует полный файл калькулятора, если не выдаст (забудет) — напиши: «выдай iframe чтобы вывести калькулятор в статье сайта».

ШАГ 1

Начало задания для нейросети

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

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

Требования:

1. Калькулятор — это полностью автономная HTML-страница, работающая внутри iframe, независимо от сайта, темы и других калькуляторов. Калькулятор не должен зависеть от стилей и скриптов сайта-родителя и не должен влиять на них (полная изоляция за счёт iframe).
2. Калькулятор работает для пользователей из России.
3. Калькулятор должен корректно работать независимо от количества пользователей, использующих его одновременно (весь расчёт на стороне браузера, без сервера).
4. Названия опций и кнопок должны полностью отображаться на всех экранах мобильных устройств. Цифры значений должны полностью отображаться на всех экранах мобильных устройств. В полях выбора значений, там где предполагается ввод цифр значений, сделай: слайдер (ползунок), меняющий цифры значений, и поле ручного ввода с синхронизацией со слайдером.
5. Сделай выбор всех цифровых значений ползунками более точными — до 1 000 000 чтобы точно выбирать ползунками цифровые значения (размеры и цены) — дальше до 50 000 000 как обычно. То есть в калькуляторе со слайдером используй нелинейную шкалу ползунка. Сам range работает в диапазоне позиций 0–1000, а реальное значение вычисляй через функции преобразования. Первые ~75% хода ползунка отведи под точную линейную зону до 1 000 000 (мелкий шаг, чтобы значения выбирались плавно и точно), а последние ~25% хода — под логарифмическую зону от 1 000 000 до максимума 1 000 000 000. Числовое поле ввода оставляй точным с ручным вводом любого значения до максимума и синхронизируй его с позицией ползунка в обе стороны. В логарифмической зоне округляй значения «красиво» по порядку величины.
6. Калькулятор должен быть интерактивным и корректно работать и отображаться на всех экранах мобильных устройств. Без обращения к серверу — расчёт целиком на JS (быстро, не нагружает сайт). Никаких настроек через админку. Все настройки (цвета, тексты, звук, лимит времени и т.п.) задаются прямо константами в начале JavaScript-кода, чтобы их было легко поменять в самом файле.
7. Не делай опцию: Поделиться результатом.
8. Сделай опцию: Скачать в PDF. Результат должен выводиться на 1–2 страницах, без шапки сайта. Результат не должен открываться в новой вкладке браузера и на отдельной странице. Всё делается внутри iframe встроенными в файл средствами (без внешних библиотек и сторонних сервисов).
9. Сделай опцию: Сохранить, при нажатии на которую будет сохраняться только сам результат расчёта (без интерфейса калькулятора и без лишнего оформления) в виде карточки-картинки. Реализуй встроенными в файл средствами, без ссылок на сторонние сервисы.
10. Сделай кнопку «Сбросить», которая возвращает все параметры в исходное состояние для нового расчёта, сбрасывая все ранее указанные значения. При этом под калькулятором не появляются большие пробелы — то есть после расчёта и после «Сбросить» высота должна корректно уменьшаться.
11. При выборе дополнительных параметров (если они предусмотрены в калькуляторе)и при расширении калькулятора по высоте, чтобы не появлялись большие пробелы под калькулятором в случае отключения этих параметров.
12. Кнопка «Показать результат» (или с другим названием) ВСЕГДА активна (не disabled). Если есть невыбранные (не указанные/не заданные) значения (параметры) и/или невыбранные/неотвеченные варианты ответов, то все пропущенные вопросы и значения, которые нужно выбрать, подсвечиваются красной рамкой (.<префикс>_missing), а под кнопкой выводится сообщение со списком номеров пропущенных значений или вопросов; страница (внутри iframe) автоматически прокручивается (scrollIntoView, behavior smooth, block center) к первому пропущенному вопросу или к значению, которое нужно выбрать; внутри пропущенного вопроса показывается подпись «⚠️ На этот вопрос нужно ответить» (.<префикс>_missing_note, видна только при классе .<префикс>_missing); внутри пропущенного значения показывается подпись «⚠️ Сделайте выбор в этом блоке» (.<префикс>_missing_note, видна только при классе .<префикс>_missing); результат НЕ показывается, пока есть пропуски. Как только пользователь отвечает на вопрос или выбирает нужное значение — подсветка .<префикс>_missing с него снимается автоматически, а если всё заполнено — сообщение очищается.
13. При нажатии на кнопку: Рассчитать, чтобы происходила прокрутка в начало результата расчета.
14. Выпадающие списки должны прокручиваться с удобным выбором параметров и раскрываться поверх нижних параметров (над нижними параметрами). Цифровые значения должны указываться удобным ползунком, под ним — поле для ручного ввода, оба способа синхронизированы. Выпадающие списки с прокруткой значений и удобным выбором нужного значения.
15. Выпадающие списки не должны подлазить под нижние параметры и под края калькулятора. Высота должна измеряться по реальной высоте блока калькулятора (massa01Root), а не по scrollHeight документа.
16. Логика открытия выпадающих списков — направление (вверх/вниз) теперь определяется по свободному месту внутри самого калькулятора (до его нижнего края), а не по окну браузера. Выпадающие списки не должны обрезаться нижним краем калькулятора. Если снизу места не хватает, список открывается вверх.
17. Выпадающий список должен разворачиваться вверх, если снизу не хватает места относительно родительской карточки/рамки, а не только окна.
    Добавь запас, чтобы длинные выпадающие списки точно помещались.
    Сделай чтобы при нехватке места для полного открытия снизу, выпадающий список открывался вверх.
    Нужно открывать выпадающий список вверх, если снизу просто не хватает места, а сверху его достаточно.
18. Если калькулятор состоит из нескольких вкладок, то на каждой вкладке один блок на котором располагаются все параметры и опции вкладки.
19. На мобильных экранах элементы и контент калькулятора не должны вылезать за пределы экрана, элементы и контент не должны наезжать друг на друга.
20. Сделай краткие и понятные пояснения с примерами под каждым параметром мелким, но хорошо читаемым шрифтом.
21. Если в калькуляторе есть параметры размеров и цен, то везде в каждом параметре напиши пример и пояснение как указывать размеры и цены. Напиши понятно как объясняешь новичку.
22. Сделай чтобы в полях ручного ввода можно указывать любое кол-во цифр, в том числе и с точками.
23. Сделай усиленную фиксацию прокрутки на мобильных, чтобы при выборе ответов или вариантов из списка значений не происходила прокрутка вверх или вниз.
24. Весь код сгенерируй без сокращений и без ссылок на сторонние сервисы и внешние библиотеки (только чистый ванильный JS и собственный CSS внутри файла).
25. В названии калькулятора используй его название (то, что он рассчитывает), без слов: Calculator, Pro, PRO. Чтобы при выборе информации, которую нужно предоставить (выбрать) для расчёта, на ПК и на всех экранах мобильных устройств открывался выпадающий список с выбором значений, а цифры и проценты указывались ползунком и ручным способом, оба способа синхронизированы (под ползунком располагается поле для ручного ввода цифр/процентов). Дополнительные раскрывающиеся поля/опции: если в калькуляторе есть раскрывающиеся дополнительные поля, опции или блоки, при их открытии высота калькулятора должна корректно увеличиваться, а при закрытии — уменьшаться (см. блок про авто-высоту iframe ниже).
26. Вау-эффекты: конфетти при результате, анимированные progress-бары, плавное появление карточек, мягкий звук «успеха» (генерируемый встроенно, без внешних аудиофайлов и сервисов), прогресс-бар прохождения сверху, glassmorphism-карточки с градиентом.

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

=== ИНТЕГРАЦИЯ С САЙТОМ (ОБЯЗАТЕЛЬНО) ===
На сайте (WordPress) уже установлен ОДИН универсальный скрипт-приёмник высоты, менять его нельзя. Он ждёт сообщение строго такого формата:
parent.postMessage({ calcId: ‘<ID>’, calcHeight: <высота> }, ‘*’); и подставляет высоту в <iframe class=»calc-frame»>, у которого в src есть <ID>.

Поэтому калькулятор ДОЛЖЕН:
— Отправлять высоту именно так: parent.postMessage({calcId:'<ID>’, calcHeight: document.documentElement.scrollHeight}, ‘*’); (ключевые поля — именно calcHeight и calcId; НЕ использовать type:’resize’/height). — Отправлять при загрузке, через ResizeObserver на body и при любом изменении контента, высоту считать через requestAnimationFrame как document.documentElement.scrollHeight.

В конце ответа выдать iframe для вставки строго в таком виде:
<iframe class=»calc-frame» src=»/путь/<ID>.html»
style=»width:100%;border:none;overflow:hidden;» scrolling=»no»></iframe>
Никакого дополнительного <script> к iframe НЕ прикладывать — приёмник на сайте уже есть.

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

<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) поставь ориентировочную, дальше её автоматически скорректирует скрипт авто-высоты на сайте.

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

js

parent.postMessage({ calcId: ‘<префикс>’, calcHeight: document.documentElement.scrollHeight }, ‘*’);
— Обязательные поля — именно calcId и calcHeight (НЕ используй type:’resize’ и НЕ используй поле height — такой формат приёмник не поймёт).
— Отправляй высоту при загрузке страницы, при любом изменении контента (например через ResizeObserver на document.body), а сам расчёт высоты оборачивай в requestAnimationFrame.
— НЕ добавляй к iframe отдельный <script> для высоты — приёмник на сайте уже есть, дублировать его не нужно.

Памятка (3 строки):

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

Как должен работать калькулятор (последовательно, подробно и понятно опиши как должен работать твой калькулятор (мини-сервис):

[Вместо квадратных скобок и текста в них — здесь описание калькулятора]
Предложи свои варианты, как должен работать калькулятор, на основании каких данных и как проводить расчёт и что выдавать в ответе.

Что выдавать в ответе:
[Вместо квадратных скобок и текста в них — здесь описание калькулятора]
Предложи, что должен получать в ответе пользователь.

Формула расчёта:
Предложи своё решение расчёта и напиши формулу.

Дизайн: Дизайн онлайн-калькулятора сделай с понятным интерфейсом, современным и красивым дизайном премиум-уровня. Сделай так, чтобы люди выбирали информацию, которую нужно предоставить, а не вводили её вручную.

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

Не делай опции: Поделиться результатом и опцию: Распечатать.

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

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

1. УНИКАЛЬНЫЙ ПРЕФИКС (slug) — ПРИДУМАЙ САМ ПО ПРАВИЛУ. Не жди префикс от меня — сгенерируй его сам строго по этому алгоритму:

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

б) Если название русское — сначала транслитерируй ядро латиницей (фундамент → fundament, кровля → krovlya, кирпич → kirpich, обои → oboi).

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

г) Добавь в КОНЕЦ две цифры. По умолчанию начни с «01». Если есть риск, что такой же 5-буквенный корень уже встречался у другого калькулятора, увеличивай номер (02, 03 …), чтобы префикс остался уникальным. fundament → funda01 krovlya → krovl01 kirpich → kirpi01 oboi → oboi01

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

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

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

Конец задания для нейросети

Пояснение по промту выше:

Готовый текст задания вставляете в чат нейросети, только из списка удалите то что вам не нужно, например: пункты: Скачать в PDF, Распечатать, Поделиться результатом — если они вам не нужны — рекомендую убрать эти пункты.

ШАГ 2

После того как нейросеть сгенерирует вам финальный промт для генерации файла калькулятора, скопируйте его, вставьте в нейросеть и добавьте в конце финального промта текст ниже и отправляй на генерацию файла калькулятора:

«=== ОБЯЗАТЕЛЬНЫЕ ПРАВИЛА: НИКАКИХ ПУСТЫХ ПРОБЕЛОВ СНИЗУ КАЛЬКУЛЯТОРА ===

Калькулятор работает внутри iframe и сам сообщает родительской странице свою высоту через postMessage. Строго соблюдай ВСЕ правила ниже, чтобы после расчёта, сворачивания секций и особенно после нажатия кнопки «Сбросить» НИКОГДА не появлялся пустой пробел снизу калькулятора.

1. Высоту всегда измеряй ТОЛЬКО по реальной высоте корневого контейнера калькулятора через getBoundingClientRect().height. КАТЕГОРИЧЕСКИ ЗАПРЕЩЕНО использовать document.body.scrollHeight или document.documentElement.scrollHeight — они не уменьшаются ниже высоты окна и оставляют пробел снизу после сброса и пересчёта. Если открыт выпадающий список, направленный вниз, — учитывай его нижний край.

2. Все скрытые элементы (блок результата, блок ошибки, таблицы, подсказки, любые опциональные секции) в скрытом состоянии убирай ТОЛЬКО через display:none. ЗАПРЕЩЕНО использовать visibility:hidden или opacity:0 для скрытия — такие элементы продолжают занимать высоту и создают пробел.

3. Сворачиваемые секции делай через max-height: 0 + overflow:hidden в закрытом виде и max-height по контенту в открытом (класс .open или аналог). В закрытом состоянии высота секции должна быть равна нулю.

4. Функцию отправки высоты вызывай ПОСЛЕ КАЖДОГО изменения содержимого: после расчёта, после сброса, после открытия/закрытия любой секции, после переключения вкладок, после выбора пункта в выпадающем списке, после открытия/закрытия выпадающих списков.

5. Обработчик кнопки «Сбросить» ОБЯЗАН:

очистить все поля ввода; вернуть выпадающие списки в состояние-заглушку; скрыть блок результата и блок ошибки через display:none; свернуть и скрыть все опциональные секции; убрать все подсветки незаполненных полей; и в самом конце вызвать отправку высоты ДВАЖДЫ — сразу и повторно через setTimeout ~100 мс, чтобы замер прошёл уже после завершения любых CSS-анимаций сворачивания.

6. Для секций с CSS-анимацией высоты (transition max-height и т.п.) отправляй высоту дважды: сразу и повторно через setTimeout ~500 мс, чтобы отправить уже финальную уменьшенную высоту после анимации.

7. Обязательно добавь страховочные механизмы пересчёта высоты: обработчики window ‘load’ и ‘resize’; ResizeObserver на корневом контейнере калькулятора; и
setInterval с интервалом ~1500 мс. Также вызови отправку высоты один раз при инициализации.

8. В CSS для html и body задай: margin:0; padding:0; overflow-x:hidden. НЕ задавай body или html фиксированную большую высоту (min-height:100vh и подобное) — иначе iframe залипнет на высоте окна и появится пробел снизу.

Итог: высота меряется по реальному блоку (getBoundingClientRect), скрытые блоки убраны через display:none, свёрнутые секции имеют нулевую высоту, отправка высоты дублируется после сброса и анимаций, а ResizeObserver и setInterval подстраховывают от зависшей высоты. Благодаря этому пустого пространства снизу калькулятора не будет никогда.»

Что делать если проверили калькулятор на сайте, а он не работает или работает, но в некоторых местах что то не показывается, глючит и т.д.

ПЕРВЫЙ ВАРИАНТ:

В этом случае, сначала проверьте работу калькулятора на ПК и на мобильном устройстве (на телефоне), затем:

1. В чате пишите подробное описания всех ошибок с указанием параметра или опции где это происходит.
2. Затем откройте файл вашего мини-сервиса (калькулятора) скопируйте полный код файла вашего калькулятора (мини-сервиса).
3. Добавьте весь код файла вашего калькулятора в чат после вашего сообщения (после описания ошибок).

После кода файла, добавьте следующий текст:

«Проверь код калькулятора на все ошибки о которых я тебе написал в этом сообщении, напиши как ты каждую из 8 ошибок решишь. А затем напиши какой текст предупреждения мне тебе нужно отправить, чтобы ты точно и без обмана сгенерировал полный рабочий код файла калькулятора со всеми исправлениями, о которых прошу в этом сообщении, чтобы сделанные тобой изменения (правки) не сломали все то, что сейчас уже работает в калькуляторе.
На WordPress сайте на который установлен калькулятор установлен плагин: WPcode и в нем вставлен код:
<script>
window.addEventListener(‘message’, function(e){
var d = e.data;
if (!d) return;
// поддержка обоих форматов
var height = d.calcHeight || (d.type === ‘resize’ ? d.height : null);
var id = d.calcId;
if (!height) return;
var frames = document.querySelectorAll(‘iframe.calc-frame’);
frames.forEach(function(f){
if (!id || f.src.indexOf(id) !== -1) {
f.style.height = height + ‘px’;
}
});
});
</script>.»

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

Что дальше:

1. В ответ на это в нескольких сообщениях нейросеть отправит тебе полный код файла калькулятора (мини-сервиса).
2. Сохрани его, с сервера удали прежний файл калькулятора (мини-сервиса).
3. Загрузи на сервер (в папку с файлами калькуляторов) новый, обнови страницу и проверь калькулятор на ПК и на телефоне. НО обязательно обнови страницу с калькулятором, так как часто бывает что обновляешь много раз нажатием на кнопки Ctrl + F5, но все равно показывается прежняя версия калькулятора (мини-сервиса), поэтому обнови историю и кэш и после этого проверяй работу своего калькулятора (мини-сервиса).

Проверяй работу калькулятора (мини-сервиса) на ПК и на мобильных устройствах. Если появились другие проблемы повтори действия, о которых сейчас прочитал.

НО каждый раз отправляй полный код файла с новой генерации, а прежние файлы удаляй.

ВТОРОЙ ВАРИАНТ — делайте правки в нейросети: https://chat.deepseek.com

Сначала проверьте работу калькулятора на ПК и на мобильном устройстве (на телефоне), затем:

1. Зайдите в нейросеть https://chat.deepseek.com/, зарегистрируйтесь и в  чате напишите подробное описания всех ошибок с указанием параметра или опции где это происходит.
2. Затем откройте файл вашего мини-сервиса (калькулятора) скопируйте полный код файла вашего калькулятора (мини-сервиса).
3. Добавьте весь код файла вашего калькулятора в чат после вашего сообщения (после описания ошибок).

После кода файла, добавьте следующий текст:

«Отправляю тебе полный код файла калькулятора. В нем есть следующие проблемы:

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

Проверь, чтобы на всех вкладках все выпадающие списки открывались поверх нижних параметров, а если внизу места не хватает, чтобы выпадающие списки открывались вверх.

Отправляю тебе полный код файла калькулятора, внеси в него изменения о которых прошу и выдай полный рабочий код файла в нескольких сообщениях. Больше ничего не меняй, я буду писать тебе слово: Продолжи, а ты будет продолжать генерацию файла калькулятора от начала и до </html> с исправлениями о которых прошу в этом сообщении.»

Что дальше:

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

1. Каждую часть кода вставляй в файл калькулятора, в конце предыдущего. В завершении сохрани готовый файл.
2. Загрузи на сервер (в папку с файлами калькуляторов) новый, обнови страницу и проверь калькулятор на ПК и на телефоне. НО обязательно обнови страницу с калькулятором, так как часто бывает что обновляешь много раз нажатием на кнопки Ctrl + F5, но все равно показывается прежняя версия калькулятора (мини-сервиса), поэтому обнови историю и кэш и после этого проверяй работу своего калькулятора (мини-сервиса).

Проверяй работу калькулятора (мини-сервиса) на ПК и на мобильных устройствах. Если появились другие проблемы повтори действия, о которых сейчас прочитал.

НО каждый раз отправляй полный код файла с новой генерации, а прежние файлы удаляй.

Что нужно добавить на WordPress сайт 1 раз для способа 2?

Установите на WordPress сайт плагин код-сниппетов (проще всего, рекомендую): WPCode или Code Snippets (в видео выше я показал это).

Там:

• Создаёте новый сниппет.
• Тип — HTML / Footer (или «Universal / Footer»).
• Вставляете код (ниже).
• Сохраняете и активируете.
• Готово. Работает на всём сайте.

На сайт нужно добавить код:

Код на САЙТЕ (один раз в подвал темы / через код-сниппет):

<script>
window.addEventListener(‘message’, function(e){
var d = e.data;
if (!d) return;
// поддержка обоих форматов
var height = d.calcHeight || (d.type === ‘resize’ ? d.height : null);
var id = d.calcId;
if (!height) return;
var frames = document.querySelectorAll(‘iframe.calc-frame’);
frames.forEach(function(f){
if (!id || f.src.indexOf(id) !== -1) {
f.style.height = height + ‘px’;
}
});
});
</script>

Работает для всех калькуляторов сразу.

Этот код добавляется ОДИН раз для ВСЕХ калькуляторов в WordPress сайт. Не для каждого. Один раз — и он обслуживает все калькуляторы. Он нужен для одной задачи: ловить сообщение от iframe «моя высота изменилась» и менять высоту iframe. Логика одинаковая для любого калькулятора, поэтому код один.

Видео-инструкция как сгенерировать онлайн калькулятор (мини-сервис) в формате самодостаточного файла

Или смотреть на RuTube — нажать, перейти и смотреть.

Или смотреть на VK видео — нажать, перейти и смотреть.

Бонус: Способ №1: как бесплатно привлекать клиентов

Чтобы привлекать клиентов на страницы с вашими онлайн-калькуляторами (мини-сервисами), вам нужно сделать следующее:

Создать группу в ВКонтакте, канал в Дзен, канал на RuTube, профиль на Пинтерест. Желательно создать канал на YouTube, публиковать видео на VK видео и создать профиль в соцсети Инстаграм* и ТикТок.

На сайте создайте рубрику с примерно таким названием: Сервисы или дайте другое название. В этой рубрике для каждого калькулятора создавайте статью, в которой шорт кодом выводите готовый калькулятор и небольшой текст описания его работы и выдаваемого результата.

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

В профиле на каждом перечисленном сайте (ВКонтакте, Дзен, RuTube, YouTube, VK видео, Пинтерест, Инстаграм, ТикТок) укажите ссылку на рубрику, в которой у вас находятся статьи с калькуляторами (мини сервисами) и еще 5-7 ссылок на статьи с самими калькуляторами и краткое описание в виде призыва перейти по ссылке и воспользоваться калькуляторами (можете даже перечислить несколько).

Начните каждый день создавать по 1 видео вертикального формата (Shorts и Reels) длительностью до 30-60 секунд, в котором сами, снимая себя рассказывайте про каждый калькулятор и в конце видео предлагайте перейти в профиль, с него по ссылке и воспользоваться калькулятором.

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

Пример запросов к нейросети:

Первый запрос (промт):

«У меня на сайте работает калькулятор [вместо квадратных скобок и текста в них, здесь, напишите название своего калькулятора], он [вместо этого текста и квадратных скобок здесь, напишите что рассчитывает ваш калькулятор и какую информацию выдает после расчета]. Ты опытный маркетолог, напиши мне рекламный текст для поста/поста-карусели, в котором нужно предложить людям воспользоваться моим калькулятором, перейдя с профиля по ссылке на мой сайт. Кол-во символов: 500-600 знаков.»

Пояснение: промт выше отправьте нейросети и она напишет вам текст для вашей картинки (поста, поста-карусели).

Второй запрос (промт):

Дальше идете в нейросеть, которая генерирует картинки и отправляете ей следующий промт:

«Сгенерируй картинку, на которой красиво напиши текст, который прилепляю ниже. По центру картинки напиши название [вместо квадратных скобок и текста в них, здесь напишите название своего калькулятора], а под ним — призыв перейти в профиль, с него по ссылке в калькулятор.

Вот текст для картинки:

[вместо квадратных скобок и текста в них, здесь, напишите текст, который тебе сгенерировала нейросеть по промту выше]».

Пояснение: промт выше отправьте нейросети, которая сгенерирует для вас картинку с текстом, которую вам нужно опубликовать на: Пинтерест. Затем эту картинку нужно загрузить в любой видеоредактор, например в CapCut (можно скачать на компьютер и на телефон: на ПК на бесплатном тарифе можно собирать и генерировать видеоролики разных форматов, на телефоне к этим возможностям добавляется еще и автогенерация субтитров) и сохранить ее как видео длительностью до 12-15 секунд.

В итоге у вас будет статическая картинка которая будет показываться как видеоролик, которое загружаете на все сайты из указанного выше списка.

Что в итоге:

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

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

Но скорее всего вам это не понадобится, потому что ваши первоначальные вертикальные видео (Shorts и Reels), будут привлекать пользователей с различных сайтов, которые воспользуются вашими калькуляторами и часть из них, будут рекомендовать ваши видео своей аудитории, то есть запустится «сарафанное радио» и люди сами будут распространять информацию о ваших мини-сервисах уже своей аудитории (подписчикам).

И среди этой аудитории всегда будут и ваши потенциальные клиенты, денег на привлечение которых вы не потратите ни копейки. Чем больше калькуляторов будет создано и запущено, тем больше клиентов будете бесплатно привлекать в свой бизнес.

Рекомендую создать отдельный сайт с калькуляторами, распределив их по разделам: Отношения, Семья, Психология, Бизнес, Развлечения и т.д., подходящие для вас и вашим клиентам. Онлайн калькуляторы генерируйте на темы интересные вашей целевой аудитории и на общие темы: Любовь, Отношения, Работа, Психология и т.д., так как в этих нишах охватов будет больше и среди них найдутся и ваши клиенты, которые готовы будут купить или заказать то что вы рекламируете.

Способ №2: как бесплатно привлекать клиентов

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

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

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

Но публикация статей, которые вызывают аудиторию на эмоции, на Миралинксе вы можете и не обязательно на трастовых сайтах, главное чтобы его возраст был от 3, желательно от 5 лет и старше и есть посещаемость. Публикация на таких сайтах ваших статей вам обойдется гораздо дешевле.

Пояснение: провокационные статьи это статьи в которых вы пишите что то такое, что вызовет у людей триггерную реакцию (раздражение, гнев), а заголовки таких статей будут привлекать внимание. Но такие статьи не должны нарушать УК РФ, помните об этом.

Бонус: Как зарегистрироваться на хостинге, зарегистрировать домен и как создать сайт на WordPress

1. Смотреть видео на VK видео — нажать, перейти и  смотреть (в этом видео с начала и до 9 минуты, показываю как проверить домен на занятость, как зарегистрироваться на хостинге и как зарегистрировать домен — дальше показываю как создать и настроить сайт на WordPress, управлять им и публиковать sero оптимизированные статьи). Дополнительная информация по созданию сайта на этой странице (нажми и узнай).
2. Смотреть видео на YouTube — нажать, перейти и  смотреть.

Ссылки на сайты, которые использовал в видео:

• Проверить домен на занятость на RUCENTER.RU — нажать, перейти и проверить.
• Хостинг (лучший в плане услуг и поддержки) для регистрации домена и размещения сайта — нажать, перейти и узнать).

Полезная информация

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

DeepSeek Chat / DeepSeek Coder

• Бесплатная нейросеть, отлично генерирует код.
• Полностью бесплатно без жёстких лимитов.
• Ссылка: chat.deepseek.com

Qwen Chat (от Alibaba)

• Qwen 2.5 / Qwen3 — генерирует HTML-лендинги ботов.
• Есть режим Artifacts с превью.
• Полностью бесплатно
• Ссылка: chat.qwen.ai

Вас может заинтересовать:

Как за 30 минут создать лендинг премиум-уровня — без дизайнера, программиста и навыков, почти или совсем без вложений.

Полезные ссылки

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

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

Список цветов для дизайна сайта — нажми и узнай.

На вашем персональном компьютере должен быть установлен Notepad++ — это бесплатный текстовый редактор и редактор исходного кода с открытым исходным кодом для операционной системы Windows. В поисковой строке Яндекса введите запрос: Notepad++  скачать, нажмите на кнопку Найти и перед вами откроется множество сайтов, на которых вы можете скачать этот редактор, который нужно установить на свой ПК (если сайт не открывается, нужен сервис из трех букв, который используют для того чтобы зайти в Нельзяграм, а теперь и в Telegram).

Вопрос — Ответ

*Инстаграм продукт компании Мета, которые на территории России (РФ) признаны террористическими и экстремистскими.