Интерактивный треугольник
подробности
краткое описание
Интерактивная страница для создания и настройки треугольника на мобильных устройствах.
промпт
Создай интерактивную страницу-конструктор треугольника на русском языке, оптимизированную для мобильных устройств. Макет и адаптивность - Используй настройки viewport и flexbox/grid для создания мобильного макета. - Обеспечь удобное расположение элементов на небольших экранах для лёгкого взаимодействия. Основной функционал - Включи область canvas, где треугольник будет рисоваться и изменяться в реальном времени. - Позволь изменять треугольник с помощью ползунков или ввода числовых значений. - Добавь кнопку «Случайный треугольник» для автоматической генерации корректного треугольника. - Обеспечь плавность переходов при изменении положения вершин. Элементы управления - Три ползунка для регулировки длин сторон. - Три текстовых поля для ручного ввода углов (в градусах). - Флажок для переключения режима равнобедренного треугольника (две стороны равны). - Кнопку «Сброс», возвращающую стандартные параметры. Дополнительные функции - Отображай периметр и площадь треугольника. - Автоматически проверяй ввод (сумма углов должна быть 180°) и предупреждай, если треугольник невозможен. - При ошибке показывай красное сообщение вверху, которое исчезает через 2 секунды. - Поддерживай переключение между светлой и тёмной темами, с предпочтением светлой. Анимация и стиль - Изменения должны быть плавными и естественными, без резких скачков. - Минималистичный стиль с мягкими закруглёнными углами и тенями. - Используй CSS-анимации для изменения формы треугольника. Технологии - Применяй HTML, CSS и JavaScript без сторонних библиотек. - Обеспечь обновление треугольника в реальном времени с помощью JavaScript. - Код должен быть чистым и легко читаемым.
оригинальный промпт
Создай страницу 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: сообщение об ошибке красным цветом которое появляется сверху и исчезает через 2 секунды.
стоимость генерации
название модели: claude-3-7-sonnet-latest
время ответа: 86.80 sec.
токены результата: 7,626
стоимость: $0.11675400