Interactive Triangle Constructor
details
summary
HTML page for building interactive triangles on mobile.
prompt
Create an interactive triangle constructor HTML page for mobile devices. The app language is Russian. Responsive Design: - Optimize for mobile using viewport and flexbox/grid. - Elements should fit comfortably on small screens. Core Functionality: - Include a canvas area for drawing the triangle. - Triangle adjusts in real-time by dragging vertices or entering values. - 'Random Triangle' button generates a valid triangle randomly. - Ensure smooth transitions for vertex movements. Input Controls: - Three sliders for side lengths. - Three text fields for angle inputs (degrees). - A checkbox for isosceles mode to equalize two sides. - A 'Reset' button to restore default settings. Additional Features: - Display the triangle's perimeter and area. - Automatically validate that angles sum to 180° and warn for impossible triangles. - Support a light theme with a toggle for dark mode (only light theme implemented). Animation and Style: - Smooth transitions without abrupt jumps. - Minimalistic style with rounded edges and shadows. - CSS animations for triangle transformations. Technology: - Use HTML, CSS, and JavaScript (no external libraries). - JavaScript updates the triangle in real-time. - Code must be clean and easily readable. FAQ: - What happens if a triangle is not possible? A red error message appears at the top and fades out.
original prompt
Создай страницу 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: светлая только.
generation cost summary
model name: claude-3-7-sonnet-latest
response time: 84.76 sec.
result tokens: 7,639
cost: $0.11706000