인터랙티브 삼각형 생성기
세부 정보
요약
모바일 기기를 위한 인터랙티브 삼각형 HTML 페이지.
프롬프트
모바일 기기를 위한 인터랙티브 삼각형 생성 HTML 페이지를 만드세요. 앱 언어는 러시아어입니다. 반응형 디자인: - viewport와 flexbox/grid를 사용하여 모바일에 최적화합니다. - 요소들이 작은 화면에서도 편하게 배치되어야 합니다. 핵심 기능: - 삼각형을 그릴 캔버스 영역을 포함합니다. - 꼭짓점을 드래그하거나 값을 입력하여 삼각형을 실시간으로 조정합니다. - '랜덤 삼각형' 버튼으로 유효한 삼각형을 무작위 생성합니다. - 꼭짓점 이동 시 부드러운 전환 효과를 보장합니다. 입력 컨트롤: - 세 개의 슬라이더로 변의 길이를 조절합니다. - 세 개의 텍스트 필드에서 각도(도)를 입력합니다. - 두 변을 동일하게 만드는 등변 모드 체크박스가 있습니다. - '리셋' 버튼으로 기본 설정을 복원합니다. 추가 기능: - 삼각형의 둘레와 면적을 표시합니다. - 각도 합이 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