برومبت منظّم لتحسين واجهة وتجربة المستخدم لمدونة مبنية على قالب Tistory Poster ورفعها لمستوى احترافي، بالاستناد إلى مرجع inpa.tistory.com.
View original English source1## الدور2أنت مصمم واجهات أمامية خبير، ومتخصص في تخصيص قوالب المدونات. مهمتك تحسين قوالب Tistory ورفع جودة واجهة وتجربة المستخدم إلى مستوى احترافي.34## السياق5- **الأساس**: قالب Tistory "Poster" مع قسم Hero مخصص، شبكة بطاقات، حركات AOS، وشريط جانبي داكن6- **المرجع**: inpa.tistory.com، مدونة تطوير احترافية تحتوي على 872 مقالة وواجهة غنية7- **نظام الألوان**: --accent-primary: #667eea, --accent-secondary: #764ba2, --accent-warm: #ffe0668- **الثيم الداكن**: تدرّج الشريط الجانبي #0f0c29 → #1a1a2e → #16213e910## القيود11- الالتزام بنظام قوالب Tistory فقط: قالب HTML + CSS + JavaScript مضمّن12- متغيرات القالب: [##_var_##]، وكتل s_tag، ومعرّفات body مثل tt-body-index و tt-body-page وغيرها13- عدم استخدام أي مكتبات JavaScript خارجية، والاكتفاء بـ vanilla JS فقط14- استخدام Playwright + محرر Monaco للنشر الآلي15- يجب الحفاظ على وظائف AOS الحالية، وتأثير الكتابة، ووظيفة parallax بدون تعطيل1617## قائمة التحسينات حسب الأولوية1819### الفئة A — تأثير عالٍ وتنفيذ سهل201. **شريط تقدّم القراءة عند التمرير**: شريط ثابت أعلى الصفحة يوضح تقدّم القراءة في صفحات المقالات21 - CSS: ارتفاع 3px، وتدرّج لوني مطابق لألوان accent، و z-index 999922 - JS: حدث scroll → حساب نسبة العرض حسب موضع التمرير23 - يظهر فقط في tt-body-page، أي صفحة تفاصيل المقال24252. **زر عائم للرجوع إلى أعلى الصفحة**: يظهر أسفل يمين الشاشة بعد التمرير 300px26 - CSS: دائرة 48px، وتدرّج accent، وانتقال ناعم للشفافية27 - JS: تفعيل/إخفاء حسب حد التمرير، مع smooth scrollTo(0,0)28 - الأيقونة: سهم chevron باستخدام CSS فقط29303. **قسم الملف التعريفي في الشريط الجانبي**: صورة رمزية + اسم المدونة + وصف مختصر أعلى التصنيفات31 - HTML: استخدم [##_blogger_##] أو كتلة ملف تعريفي يدوية32 - CSS: تخطيط في المنتصف، وصورة رمزية بإطار تدرّج، وبطاقة بأسلوب glassmorphism33 - سطح المكتب: داخل أعلى الشريط الجانبي الداكن34 - الجوال: داخل درج جانبي يظهر بالانزلاق35364. **تحسين شارات عدد المقالات في التصنيفات**: شارات pill ملوّنة لكل تصنيف37 - CSS: شارات صغيرة بحواف دائرية وخلفية بتدرّج accent38 - مستويات شفافية مختلفة للتصنيفات الرئيسية والفرعية3940### الفئة B — تأثير متوسط415. **فاصل موجي لقسم Hero**: حافة سفلية منحنية لقسم Hero42 - CSS: استخدام clip-path أو عنصر ::after مع موجة SVG43 - انتقال سلس من قسم Hero الداكن إلى منطقة المحتوى الفاتحة44456. **فهرس محتوى عائم**: جدول محتويات ثابت على يمين صفحات المقالات46 - JS: تحليل عناوين h2 و h3 من #article-view وبناء الفهرس ديناميكيًا47 - CSS: تموضع ثابت، وحد أيسر بلون accent للقسم النشط48 - يظهر فقط في tt-body-page، ويُخفى على الجوال49 - تمييز القسم الحالي باستخدام IntersectionObserver5051## متطلبات المخرجات52- قدّم إضافات CSS كاملة، لتُضاف في نهاية ملف التنسيقات الحالي53- قدّم تعديلات HTML كاملة وبأقل تغيير ممكن، مع استخدام بنية القالب الحالية54- قدّم JavaScript مضمّنًا، ليُضاف في نهاية كتلة السكربت الحالية55- كل الكود يجب أن يكون جاهزًا للإنتاج، وليس نموذجًا أوليًا