インタラクティブ三角形ビルダー
詳細
概要
モバイル向けのインタラクティブな三角形作成ページ。
プロンプト
ロシア語で作成された、モバイルに最適化されたインタラクティブな三角形ビルダーページを作成してください。 レイアウトとレスポンシブデザイン - viewport設定およびflexbox/gridを利用して、モバイル対応のレイアウトを実現します。 - 小さな画面でもすべての要素が適切に収まるようにして、操作しやすくします。 コア機能 - キャンバス領域を含め、リアルタイムで三角形を描画および調整できるようにします。 - スライダーや数値入力によって三角形の変更を可能にします。 - 有効な三角形を自動生成する「ランダム三角形」ボタンを設置します。 - 頂点の位置が変わるとき、三角形がスムーズに移行するようにします。 入力コントロール - 側面の長さを調整するための3つのスライダー。 - 角度(度単位)を手動で入力するための3つのテキストフィールド。 - 2辺を等しくするなど、二等辺モードを切り替えるチェックボックス。 - パラメータを初期状態に戻す「リセット」ボタン。 追加機能 - 三角形の周囲長と面積を表示します。 - 入力値(角の和 = 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