منشئ مثلث تفاعلي
تفاصيل
ملخص
صفحة HTML تفاعلية لبناء مثلثات على الأجهزة المحمولة.
سؤال
أنشئ صفحة HTML تفاعلية لإنشاء مثلث على الأجهزة المحمولة. لغة التطبيق هي الروسية. تصميم استجابة: - حسّن العرض على الأجهزة المحمولة باستخدام viewport وتقنيات flexbox/grid. - يجب أن تتكيف العناصر بشكل مريح مع الشاشات الصغيرة. الوظائف الأساسية: - تضمين منطقة canvas لرسم المثلث. - يجب تعديل المثلث في الوقت الفعلي عبر سحب الرؤوس أو إدخال القيم. - زر 'مثلث عشوائي' يُولد مثلثًا صالحًا بشكل عشوائي. - ضمان انتقالات سلسة عند تحريك الرؤوس. عناصر الإدخال: - ثلاث أشرطة تمرير لأطوال الأضلاع. - ثلاث حقول نصية لإدخال الزوايا (بالدرجات). - خانة اختيار لوضع المثلث المتساوي لتسوية ضلعين. - زر 'إعادة التعيين' لاستعادة الإعدادات الافتراضية. الميزات الإضافية: - عرض محيط ومساحة المثلث. - التحقق تلقائيًا من مجموع الزوايا (180°) وتحذير عند مثلث مستحيل. - دعم للوضع الفاتح مع زر للتبديل إلى الوضع الداكن (تم تطبيق الوضع الفاتح فقط). الحركة والأناقة: - انتقالات سلسة دون قفزات مفاجئة. - تصميم بسيط مع حواف دائرية وظلال. - استخدام حركات 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: светлая только.
ملخص تكلفة التوليد
اسم النموذج: claude-3-7-sonnet-latest
وقت الاستجابة: 84.76 sec.
رموز النتيجة: 7,639
التكلفة: $0.11706000