⭐️ Калькулятор товаров можно собрать с ИИ — и сделать жизнь покупателя чуть проще 👍В Вайбкодинге PR-CY мы сделали калькулятор плитки, чтобы прикинуть, сколько коробок брать.
ПосмотретьИспользовали промпт — забирайте и адаптируйте ⤵️
Создай страницу с онлайн-калькулятором плитки для магазина.
Задача — ответить на вопрос: «Сколько плитки мне нужно заказать?»
Пользователь указывает размеры помещения и параметры плитки, а калькулятор рассчитывает площадь, необходимое количество упаковок с учетом запаса и стоимость заказа.
Это именно калькулятор для покупки плитки. Не создавай схемы помещения, чертежи, 3D-модели, визуализацию раскладки или планировщик.
ЗАГОЛОВОК «Калькулятор плитки: сколько нужно заказать»
Подзаголовок:«Укажите размеры помещения и плитки — узнаете, сколько упаковок нужно купить и сколько будет стоить заказ.»
ФОРМА
Первый блок — «Что рассчитываем»
Сделай заметный сегментированный переключатель:
[ ПОЛ ] [ СТЕНЫ ]
По умолчанию выбран «ПОЛ».
Обе кнопки должны выглядеть как элементы управления, а не как обычный текст. Активная кнопка должна иметь отличающийся фон и контрастный текст. Неактивная — нейтральный фон. Пользователь должен понимать, что кнопки кликабельны и какой вариант выбран. При переключении меняются поля ниже.
РАСЧЕТ ПОЛА
Показывай два поля:
- Длина помещения, м
- Ширина помещения, м
РАСЧЕТ СТЕН
Показывай три поля:
- Длина помещения, м
- Ширина помещения, м
- Высота помещения, м
Калькулятор сам рассчитывает площадь четырех стен по периметру помещения.
Не перегружай основную форму.
Добавь свернутый необязательный блок:
«Есть участки без плитки?»
При открытии покажи:
- Площадь, которую нужно исключить, м²
Подсказка:
«Например, дверной или оконный проем.» Пользователь может оставить поле пустым.
ПАРАМЕТРЫ ПОКУПКИ
Добавь:
- Площадь в одной упаковке, м²
- Цена одной упаковки, ₽
Оба поля обязательны.
ЗАПАС
Добавь простой выбор:
5% | 10% | 15%
По умолчанию выбран 10%.
Под ним короткая подсказка:
«Запас нужен на подрезку и бой.»
РЕЗУЛЬТАТ
Сделай результат самым заметным элементом страницы.
Главный результат:
«Нужно заказать: XX упаковок»
Ниже покажи:
Площадь поверхности: XX м²
С учетом запаса: XX м²
В одной упаковке: XX м²
Фактически будет куплено: XX м²
Стоимость заказа: XX ₽
Количество упаковок всегда округляй вверх до целого числа.
Например:
Площадь поверхности — 18,2 м²
Запас 10% — 20,02 м²
В упаковке — 1,44 м²
Нужно заказать — 14 упаковок
Фактически будет куплено — 20,16 м
Стоимость — 42 000 ₽
Под результатом:
«Расчет ориентировочный. Фактический расход зависит от раскладки и количества подрезки.»
ЛОГИКА
Для пола: площадь = длина × ширина
Для стен: периметр = (длина + ширина) × 2
площадь стен = периметр × высота
Из площади вычесть указанную пользователем площадь участков без плитки.
Площадь с запасом = площадь × (1 + выбранный процент запаса)
Количество упаковок = площадь с запасом / площадь одной упаковки
Количество упаковок округлить вверх до целого числа.
Фактически купленная площадь = количество упаковок × площадь одной упаковки
Стоимость заказа = количество упаковок × цена одной упаковки
Результат должен автоматически пересчитываться при изменении любого значения.
Сделай путь пользователя максимально коротким:
1. Выбрать «Пол» или «Стены».
2. Ввести размеры.
3. При необходимости указать площадь участков без плитки.
4. Указать площадь в упаковке и цену.
5. Выбрать запас.
6. Получить количество упаковок и стоимость.
На десктопе размести форму слева, а результат справа. Результат должен быть хорошо заметен.
На мобильном сначала показывай форму, затем результат.
Добавь кнопку «Рассчитать», но результат также должен обновляться автоматически после ввода данных.
Добавь кнопку «Начать заново».
Если пользователь вводит некорректное или отрицательное значение, покажи понятную ошибку рядом с полем.
Современный простой интерфейс агазина плитки. Светлый фон, крупные поля, понятные подписи. Не используй сложные декоративные элементы. Главный визуальный акцент — результат:«Нужно заказать XX упаковок» и «Стоимость XX ₽».
Сделать калькулятор 🔗
https://pr-cy.ru/vibe/chat____
@prcynews 
