أنشئ موقع تقرير سنوي أو تقرير أثر بأسلوب scrollytelling مع رسوم بيانية تُرسم أثناء التمرير

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. على خادم استضافة Opus Growth الخاص بي [اسم الخادم]، أنشئ تقرير الأثر لعام [السنة] الخاص بـ [اسم المنظمة] كموقع يروي قصته أثناء التمرير. المنظمة: [ما تفعله، ومكانها، وسنة التأسيس]. الرسالة الرئيسية للتقرير: [جملة واحدة]. الأرقام الرئيسية الأربعة: [الرقم، الوحدة، شرح في جملة واحدة]. بيانات الرسوم البيانية: [لكل رسم بياني: العنوان والفترات والقيم]. الميزانية: [مصادر الدخل وبنود المصروفات، والمبالغ والنسب]. الفصول: [أسماء الفصول والنص أو الملاحظات الخاصة بكل فصل]. خطة العام القادم: [البنود]. مصدر الأرقام وحدودها: [أي السجلات استُخدمت، وكيف عولجت البيانات الناقصة]. إعداد ونشر: [اسم المحرر، التاريخ]. للتواصل: [البريد الإلكتروني]، [الهاتف]، [العنوان]. النطاق: [النطاق]. الصور: [الروابط؛ دون وجوه الأطفال أو المستفيدين]. الصفحات: التقرير (/: عنوان الغلاف، فقرة ملخص تبدأ بالإجابة، المؤلف والتاريخ، صورة الغلاف، تنقل ثابت بين الفصول، ثم بالترتيب: ملخص العام، الفصول، الميزانية، خطة العام القادم، والأسئلة حول التقرير)، المنهجية (/yontem/: مصدر كل رقم وحدوده)، المنظمة والتواصل (/dernek/ أو اسم يناسب منظمتك)، الخصوصية وKVKK (/gizlilik/) و404.html. اكتب الرسوم البيانية كـ SVG ثابت يُولَّد من القيم التي قدمتها، دون Chart.js أو D3؛ لا تقرّب القيم وتحقق من أن المجاميع صحيحة. اعرض الميزانية كـ `<table>` دون أي حد أدنى للعرض، لا كرسم بياني. الأسلوب: قراءة طويلة تشبه قصة بيانات في صحيفة. خلفية بلون الورق، وخط سيريف من Fontshare للعناوين (مثل Bespoke Serif)، وخط نصوص مقروء يدعم tabular-nums (مثل Epilogue)، مع لونين على الأكثر للرسوم البيانية. على سطح المكتب قائمة فصول ثابتة بعرض 220 px على اليسار؛ وعلى الهاتف شريط فصول قابل للتمرير أفقيًا يثبت في الأعلى، وتحته خط رفيع لتقدم القراءة. قواعد الحركة (أصعب جزء، التزم بها حرفيًا): 1. المكتبات: نواة GSAP 3.13 وScrollTrigger فقط، وفي صفحة التقرير فقط. لا يُحمَّل Lenis، لأن التمرير الأصلي أكثر راحة للقراءة الطويلة؛ ولا تُحمَّل SplitText ولا مكتبات الرسوم البيانية. لا أي سكربتات في صفحات المنهجية والمنظمة والخصوصية. 2. الرسوم الخطية: كل خط هو `<path pathLength="1">` ويكون مرسومًا بالكامل في HTML. يضبط JS القيمتين strokeDasharray 1 وstrokeDashoffset 1 فقط على الرسوم الواقعة أسفل الشاشة عند التحميل، ويُنزل الإزاحة إلى 0 عبر ScrollTrigger scrub (start "top 75%" وend "bottom 65%")؛ وتظهر نقاط البيانات تباعًا مع مرور الخط بها. اجعل نص SVG بحجم 22 وحدة على الأقل في viewBox بعرض 600 وحدة ليبقى فوق 12 px على الهواتف، واترك 40 وحدة على الأقل إلى اليمين كي لا تُقتطع آخر تسمية للمحور. 3. كل رسم بياني هو `<svg role="img" aria-labelledby>` مع title وdesc يذكر جميع القيم في جملة؛ ويعرض figcaption المصدر ويرتبط بملاحظة المنهجية، وبعد الـ figure مباشرة يحتوي عنصر `<details>` بتسمية "عرض البيانات كجدول" على `<table>` حقيقي. هذا الجدول هو النسخة النصية من البيانات لإمكانية الوصول وللبحث بالذكاء الاصطناعي معًا. 4. العدّادات: تُكتب القيمة النهائية في HTML بالصيغة التركية (مثل 31.540). يوضع الرقم المرئي في span بسمة aria-hidden، وتوضع القيمة نفسها في span بصنف sr-only لقارئات الشاشة. يعيد JS إلى الصفر فقط العدّادات الواقعة أسفل الشاشة عند التحميل، ويعدّها تصاعديًا باستخدام Intl.NumberFormat("tr-TR") عند دخولها الشاشة؛ ولا تُرجع أبدًا رقمًا ظاهرًا بالفعل إلى الصفر. طبّق tabular-nums على الرقم وحدًا أدنى للعرض يساوي عدد أحرف القيمة النهائية (بصنف Tailwind، لا بسمة style) كي لا يتحرك السطر أثناء العد. 5. التنقل بين الفصول: الروابط عبارة عن مراسي تعمل دون JS. يستخدم JS ‏ScrollTrigger لكل فصل لتحديد الفصل النشط، ويضبط aria-current="true" على رابطه، ويمرر شريط الهاتف أفقيًا ليظهر الرابط النشط (الشريط لا الصفحة). ضع خاصية الثبات على الشريط الجانبي (aside) الذي هو ابن مباشر للشبكة الممتدة على كامل التقرير، لا على nav الداخلي؛ ففي النسخة التجريبية لم يثبت sticky على nav الداخلي في الهواتف قط. 6. لا حركة أخرى سوى خط تقدم القراءة والصور التي تظهر بسمة data-reveal. الإعداد والفخاخ المعروفة (كل واحد منها كلّف نقاطًا أو كسر شيئًا في قياس النسخة التجريبية، فلا تتجاوز أيًّا منها): 1. إذا كان هناك موقع يعمل بالفعل على الخادم فأخبرني أولًا، لأن الإعداد يستبدل index.html ومجلد assets. اعرض معاينة scaffold_site مع confirm=false، ثم استدعِ confirm=true بعد موافقتي. بعد ذلك اقرأ site_design_guide وsite_seo_guide. قبل كتابة الكود، ضع اتجاه التصميم (الطباعة، اللون، الشبكة، العنصر المميز، لغة الحركة، والمكتبات التي لن تُحمَّل) في ملف ART.md قصير خارج assets واعرضه عليّ. 2. قم بتجميع Tailwind ولا تحمّله من CDN. ثبّت `npm i -D tailwindcss@3` عبر site_run_command مع background=true وراقبه بـ site_command_status. يجب أن تغطي مسارات content في `tailwind.config.js` كل ملفات HTML وكل القوالب وكل ملفات JS التي تكتب أصنافًا. يحتوي `_src/tw.css` على سطر `@import "../assets/app.css";` وأسطر `@tailwind` الثلاثة؛ جمّعه في ملف واحد بالأمر `npx tailwindcss -c tailwind.config.js -i _src/tw.css -o assets/site.css --minify`. أزل سكربت cdn.tailwindcss.com وإعداد tailwind.config المضمّن من الصفحات واربط `/assets/site.css` فقط. أعد التجميع بعد كل تعديل على HTML. 3. استضف الخطوط بنفسك. تحقق أولًا من أن عائلة Fontshare التي تختارها تحتوي على الحروف التركية (ş, ğ, ı, İ, ç, ö, ü): في النسخة التجريبية لم يكن في Tanker حرف ı دون نقطة ولم يكن في Outfit حروف ş وğ وİ، فكانت هذه الحروف ستنتقل إلى خط آخر في العناوين. نزّل ملف woff2 لكل وزن على حدة عبر site_fetch إلى `assets/fonts/`، واكتب قواعد @font-face مع `font-display: swap` في `assets/app.css` (يبحث design-check عن الخط المخصص هناك) وتحقق من اسم font-family في ملف CSS الذي نزّلته. نفّذ preload لخطي العناوين والنصوص المستخدمين أعلى الصفحة في كل الصفحات بالوسم `<link rel="preload" as="font" type="font/woff2" crossorigin>` قبل ورقة الأنماط؛ ولا تُجرِ preload لأكثر من ملفين، لأن preload لوزن ثالث في النسخة التجريبية زاد LCP على الهاتف بمقدار 0.2 ثانية. معظم خطوط Fontshare تفتقر إلى رمز ₺، لذا اكتب "TL" في الأسعار. 4. اجعل القائمة والتذييل HTML ثابتًا. لا تحمّل chrome.js ولا site.config.js في الصفحات. اكتب `chrome-stamp.mjs` صغيرًا يقرأ قائمة التنقل من site.config.js ويختم `_src/header.tpl` و`_src/footer.tpl` بين العلامتين `<!-- nav:start --><!-- nav:end -->` و`<!-- footer:start --><!-- footer:end -->` في كل صفحة، مضيفًا aria-current="page" إلى الرابط النشط. يجب ألا تنتهي القوالب بـ .html، وأن تستخدم عناصر نائبة مثل `[[NAV]]` بدل `{{...}}`. ابنِ قائمة الهاتف دون JS باستخدام `<details>`. أبقِ اسم المنظمة والعنوان والهاتف كنص عادي في التذييل، واجعل كل هدف لمس بحجم 44x44 px على الأقل، بما في ذلك روابط التذييل وفتات التنقل. 5. حوّل الصور أثناء تنزيلها بـ site_fetch: احفظ الصورة نفسها بـ resize="480x" و"800x" و"1200x" مع image_format="webp" وquality=65 في ملفات منفصلة. لا يقتطع site_fetch الصور أبدًا؛ فإذا احتاجت صورة Unsplash إلى نسبة أبعاد أخرى، فنزّل النسخة المقتطعة بإضافة معلمات مثل `?w=1600&h=1200&fit=crop` إلى عنوانها. أعطِ كل `<img>` قيم srcset وsizes وwidth وheight تطابق النسبة الحقيقية. تحصل الصورة الرئيسية أعلى الصفحة على fetchpriority="high" ولا تكون lazy؛ وتحصل البقية على loading="lazy" decoding="async". إذا كانت الصورة الرئيسية تملأ الشاشة على الهاتف، فقدّم اقتطاعًا أصغر عبر `<picture>`. 6. اكتب نسخة SVG من الشعار باسم favicon.svg عبر site_write_file وأضف `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` إلى كل صفحة. دون أيقونة favicon يسجّل المتصفح خطأ 404 وينخفض تقييم Best Practices إلى 96. 7. قواعد مدقق HTML: ابدأ بـ `<!DOCTYPE html>` بأحرف كبيرة، واستخدم `&nbsp;` للمسافات في النص المرئي لروابط tel:، ولا تستخدم سمة style="" أبدًا، وأعطِ كل زر type="button"، ولا تضع `<details>` داخل `<figure>` بعد figcaption. 8. نزّل مكتبات الحركة (GSAP وScrollTrigger) من jsdelivr إلى `assets/vendor/` عبر site_fetch، وثبّت الإصدار، وحمّلها في صفحة التقرير فقط. لا تستخدم `<script defer>`؛ بل ضع محمّلًا صغيرًا في نهاية الصفحة ينتظر حدث load ثم استدعاءين لـ requestAnimationFrame ثم requestIdleCallback، ويُلحق السكربتات بالترتيب مع async=false. يضيف سكربت من سطر واحد في `<head>` الصنف `js` إلى `<html>` والصنف `anim` ما لم تكن قيمة prefers-reduced-motion هي "reduce"؛ ودون `anim` لا ينزّل المحمّل شيئًا. عرّف حالات البداية المخفية تحت `.anim` فقط، وأضف حركة CSS كشبكة أمان تُظهر كل العناصر المخفية بعد 2.5 ثانية في حال لم تصل المكتبة أبدًا. في نسخ تجريبية سابقة دفعت المكتبات المؤجلة LCP على الهاتف إلى 3.2 ثانية؛ ومع هذا المحمّل سجلت الصفحات من 99 إلى 100. سمِّ السمة الخاصة بالعناصر التي تظهر عند التمرير data-reveal؛ فـ design-check لا يتعرف على الحركة إلا بهذا الاسم. SEO وAEO وGEO: 1. استخدم عناوين URL بنمط المجلدات مع شرطة مائلة أخيرة (/yontem/ و/dernek/ و/gizlilik/). املأ كتلة seo في site.config.js ونفّذ `node seo-stamp.mjs`. اكتب مخطط schema الخاص بكل صفحة (صفحة التقرير: WebPage مع Report كـ mainEntity، تتضمن headline وdatePublished وdateModified وimage وauthor (Person، أي المحرر) وpublisher، إضافة إلى FAQPage؛ المنهجية: Article؛ صفحة المنظمة: AboutPage مع نوع فرعي يناسب المنظمة (مثل NGO)؛ وBreadcrumbList في الصفحات الداخلية. إذا لم يكن هناك مكتب يزوره الناس فاضبط localBusiness:false في site.config.js) في كتل `<script type="application/ld+json">` منفصلة واربطها بالرسم البياني الأساسي عبر @id. لا تضع BreadcrumbList داخل @graph؛ أبقه في كتلته الخاصة، لأن هذه هي الطريقة الوحيدة التي يراه بها seo-check. 2. أبقِ العناوين عند 60 حرفًا أو أقل (يعدّ seo-check أي عنوان فوق 65 خطأ)، والأوصاف بين 120 و158 حرفًا، وh1 واحدًا في كل صفحة، ودون تخطي أي مستوى من العناوين (h3 مباشرة بعد h1 خفّض إمكانية الوصول إلى 98). تحتاج كل صفحة إلى 150 كلمة على الأقل من المحتوى الرئيسي؛ وتميل صفحتا التواصل والخصوصية إلى النقص في ذلك. 3. الفقرة الأولى في كل صفحة تجيب مباشرة عن سؤال الصفحة. اكتب أسئلة شائعة خاصة بكل صفحة باستخدام `<details>` ووسّمها كـ FAQPage. اعرض المنظمة الناشرة وتاريخ "آخر تحديث" داخل `<time>`. 4. في robots.txt، دوّن قرارك وبرّره لكل من GPTBot وOAI-SearchBot وChatGPT-User وClaudeBot وClaude-User وClaude-SearchBot وPerplexityBot وPerplexity-User وGoogle-Extended وApplebot-Extended وBingbot وCCBot، وأشر إلى خريطة الموقع. ضع في sitemap.xml تواريخ lastmod حقيقية. يحتوي llms.txt على ملخص دقيق للموقع في جملتين، والحقائق الأساسية، وقائمة بالصفحات المهمة. 5. لا اختلاق: لا تكتب مراجعات أو تقييمات أو جوائز أو أعداد عملاء أو شهادات أو ساعات عمل أو إحداثيات أو أسعارًا دون أن تسألني. اترك أي حقل لا تعرفه خارج schema تمامًا. بوابات الفحص (بالترتيب؛ لا تقل "تم" حتى تنجح جميعها): 1. عبر site_run_command نفّذ `node chrome-stamp.mjs` وبناء Tailwind و`node seo-stamp.mjs` و`node seo-check.mjs` (0 أخطاء، 0 تحذيرات) و`node design-check.mjs` (0 أخطاء؛ وبرّر أي تحذير متبقٍ) و`npx html-validate "**/*.html"` (0 أخطاء). 2. اعرض كل صفحة بـ site_preview مع view="mobile" وview="desktop". يلتقط site_preview الصفحة مع إيقاف الحركة (reduced-motion)؛ فإذا نقص محتوى في هذه اللقطة فحالة عدم الحركة معطوبة. قد تظهر الصور lazy الواقعة في الأسفل فارغة في لقطة الصفحة الكاملة؛ لا تعدّ ذلك خطأ، لكن تحقق من مساراتها. 3. نفّذ core_web_vitals مع strategy="mobile" وstrategy="desktop" لكل صفحة. معيار القبول: على الهاتف يكون Performance عند 95 على الأقل وتكون Accessibility وBest Practices وSEO عند 100؛ وعلى سطح المكتب تكون النتائج الأربع كلها 95 على الأقل. وللصفحة التي لا تحقق ذلك، حدد الملف البطيء عبر resources=true وأصلحه وأعد القياس. ثم نفّذ seo_audit على الصفحة الرئيسية مع strategy="mobile" وruns=2. يجب ألا يبقى أي عنوان خارج نطاقك الخاص في قائمة طلبات الشبكة. 4. لا تمرير أفقي عند 360 و390 و768 و1440 px، وأهداف لمس بحجم 44 px على الأقل، ولا أخطاء في وحدة التحكم. ويجب أن يبدو الموقع سليمًا تمامًا داخل إطار 390x790 وإطار 1440x898 كما في صفحات المطالبات. فحص الحركة: لا يستطيع site_preview عرض الحركة، لذا أخبرني بما يجب أن أراقبه في متصفحي. على سطح المكتب يجب أن تعدّ العدّادات من الصفر إلى القيمة النهائية عند ظهورها، وأن تُرسم خطوط الرسوم من اليسار إلى اليمين أثناء التمرير مع ظهور النقاط تباعًا، وأن تُظهر قائمة الفصول على اليسار الفصل الذي تقرؤه. وعلى الهاتف يجب أن يبقى شريط الفصول ثابتًا في الأعلى وأن يمرر الفصل النشط إلى المجال المرئي. ومع تفعيل تقليل الحركة ومع إيقاف JavaScript، يعرض كل رقم قيمته النهائية ويظهر كل رسم بياني مرسومًا بالكامل، ويمكن فتح جداول البيانات. بعد النشر: عاين قاعدة `/assets/* Cache-Control: public, max-age=31536000, immutable` عبر site_headers وطبّقها بعد موافقتي؛ ومن ثم غيّر رقم إصدار اسم الملف كلما تغيّر CSS أو JS (site-v2.css وهكذا). أرسل sitemap.xml عبر gsc_submit_sitemap وافحص الصفحة الرئيسية بـ gsc_url_inspect. وفي النهاية زوّدني بـ: جدول نتائج لكل صفحة (الصفحة، النتائج الأربع على الهاتف، النتائج الأربع على سطح المكتب، LCP، CLS)، ونتائج بوابات الفحص، ونتيجة التفاعلات التي جرّبتها في متصفح، وقائمة الإصلاحات التي طبّقتها.