Интерактивный конструктор треугольника
подробности
краткое описание
HTML-страница для построения треугольника на мобильных устройствах.
теги
промпт
Создайте интерактивную HTML-страницу для конструирования треугольника на мобильных устройствах. Язык приложения – русский. Адаптивный дизайн: - Оптимизируйте для мобильных с использованием viewport и flexbox/grid. - Элементы должны удобно располагаться на небольших экранах. Основной функционал: - Добавьте область canvas для рисования треугольника. - Треугольник изменяется в реальном времени при перетаскивании вершин или вводе значений. - Кнопка 'Случайный треугольник' генерирует корректный треугольник случайным образом. - Обеспечьте плавные переходы при перемещении вершин. Элементы ввода: - Три слайдера для длин сторон. - Три текстовых поля для ввода углов (в градусах). - Флажок для режима равнобедренного треугольника, выравнивающий две стороны. - Кнопка 'Сброс' для восстановления настроек по умолчанию. Дополнительные возможности: - Отображение периметра и площади треугольника. - Автоматическая проверка суммы углов (180°) с предупреждением для невозможного треугольника. - Поддержка светлой темы с переключателем на тёмный режим (реализована только светлая тема). Анимация и стиль: - Плавные анимации без резких скачков. - Минималистичный стиль с закруглёнными углами и тенями. - CSS-анимации для превращения треугольника. Технологии: - Используйте HTML, CSS и JavaScript (без внешних библиотек). - JavaScript обновляет треугольник в реальном времени. - Код должен быть чистым и легко читаемым. FAQ: - Что происходит, если построить треугольник невозможно? Появляется красное сообщение об ошибке вверху, которое затем исчезает.
оригинальный промпт
Создай страницу HTML для мобильного телефона, на которой будет интерактивный конструктор треугольников. Требования к странице: 1. Адаптивность • Дизайн должен быть адаптирован для мобильных устройств (использовать viewport, flexbox/grid). • Все элементы должны удобно располагаться на небольшом экране. 2. Основной функционал • На странице должно быть поле с холстом (Canvas), на котором будет рисоваться треугольник. • Треугольник можно изменять в реальном времени, двигая вершины пальцем или вводя числовые значения. • Кнопка “Случайный треугольник” должна случайным образом генерировать корректный треугольник. • Треугольник должен изменяться плавно при перемещении точек. 3. Контролы для ввода параметров • Три ползунка (input range) для изменения длины сторон. • Три текстовых поля для ручного ввода значений углов (градусы). • Чекбокс для включения/выключения равнобедренного режима, который делает две стороны равными. • Кнопка “Сбросить”, чтобы вернуть параметры в начальное состояние. 4. Дополнительные функции • Отображение периметра и площади треугольника. • Автоматическая проверка на корректность значений (сумма углов = 180°). • Если треугольник невозможен, отображать предупреждение. • Поддержка темной и светлой темы, переключаемой кнопкой. 5. Анимация и стили • Все изменения должны происходить плавно, без резких скачков. • Применить минималистичный стиль с плавными закруглениями углов и тенями. • Использовать CSS-анимации для изменения формы треугольника. 6. Технологии • HTML + CSS + JavaScript (без сторонних библиотек). • JavaScript должен обновлять треугольник в реальном времени. • Код должен быть чистым и легко читаемым. Q: Что должно происходить при создании некорректного треугольника? A: Некорректный тругольник создать нельзя Q: Как должно выглядеть предупреждение о невозможности треугольника? A: просто выводиться ошибка красным цветом сверху и исчезать. Q: Какие темы должны быть предусмотрены для страницы? A: светлая только.
стоимость генерации
название модели: claude-3-7-sonnet-latest
время ответа: 84.76 sec.
токены результата: 7,639
стоимость: $0.11706000