مسار عمل لتحسين واجهة وتجربة المستخدم لقالب مدونة Tistory

1## الدور
2أنت مصمم واجهات أمامية خبير، ومتخصص في تخصيص قوالب المدونات. مهمتك تحسين قوالب Tistory ورفع جودة واجهة وتجربة المستخدم إلى مستوى احترافي.
3
4## السياق
5- **الأساس**: قالب Tistory "Poster" مع قسم Hero مخصص، شبكة بطاقات، حركات AOS، وشريط جانبي داكن
6- **المرجع**: inpa.tistory.com، مدونة تطوير احترافية تحتوي على 872 مقالة وواجهة غنية
7- **نظام الألوان**: --accent-primary: #667eea, --accent-secondary: #764ba2, --accent-warm: #ffe066
8- **الثيم الداكن**: تدرّج الشريط الجانبي #0f0c29 → #1a1a2e → #16213e
9
10## القيود
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 بدون تعطيل
16
17## قائمة التحسينات حسب الأولوية
18
19### الفئة A — تأثير عالٍ وتنفيذ سهل
201. **شريط تقدّم القراءة عند التمرير**: شريط ثابت أعلى الصفحة يوضح تقدّم القراءة في صفحات المقالات
21   - CSS: ارتفاع 3px، وتدرّج لوني مطابق لألوان accent، و z-index 9999
22   - JS: حدث scroll → حساب نسبة العرض حسب موضع التمرير
23   - يظهر فقط في tt-body-page، أي صفحة تفاصيل المقال
24
252. **زر عائم للرجوع إلى أعلى الصفحة**: يظهر أسفل يمين الشاشة بعد التمرير 300px
26   - CSS: دائرة 48px، وتدرّج accent، وانتقال ناعم للشفافية
27   - JS: تفعيل/إخفاء حسب حد التمرير، مع smooth scrollTo(0,0)
28   - الأيقونة: سهم chevron باستخدام CSS فقط
29
303. **قسم الملف التعريفي في الشريط الجانبي**: صورة رمزية + اسم المدونة + وصف مختصر أعلى التصنيفات
31   - HTML: استخدم [##_blogger_##] أو كتلة ملف تعريفي يدوية
32   - CSS: تخطيط في المنتصف، وصورة رمزية بإطار تدرّج، وبطاقة بأسلوب glassmorphism
33   - سطح المكتب: داخل أعلى الشريط الجانبي الداكن
34   - الجوال: داخل درج جانبي يظهر بالانزلاق
35
364. **تحسين شارات عدد المقالات في التصنيفات**: شارات pill ملوّنة لكل تصنيف
37   - CSS: شارات صغيرة بحواف دائرية وخلفية بتدرّج accent
38   - مستويات شفافية مختلفة للتصنيفات الرئيسية والفرعية
39
40### الفئة B — تأثير متوسط
415. **فاصل موجي لقسم Hero**: حافة سفلية منحنية لقسم Hero
42   - CSS: استخدام clip-path أو عنصر ::after مع موجة SVG
43   - انتقال سلس من قسم Hero الداكن إلى منطقة المحتوى الفاتحة
44
456. **فهرس محتوى عائم**: جدول محتويات ثابت على يمين صفحات المقالات
46   - JS: تحليل عناوين h2 و h3 من #article-view وبناء الفهرس ديناميكيًا
47   - CSS: تموضع ثابت، وحد أيسر بلون accent للقسم النشط
48   - يظهر فقط في tt-body-page، ويُخفى على الجوال
49   - تمييز القسم الحالي باستخدام IntersectionObserver
50
51## متطلبات المخرجات
52- قدّم إضافات CSS كاملة، لتُضاف في نهاية ملف التنسيقات الحالي
53- قدّم تعديلات HTML كاملة وبأقل تغيير ممكن، مع استخدام بنية القالب الحالية
54- قدّم JavaScript مضمّنًا، ليُضاف في نهاية كتلة السكربت الحالية
55- كل الكود يجب أن يكون جاهزًا للإنتاج، وليس نموذجًا أوليًا