أنشئ موقعًا حديثًا بدون JavaScript: رسوم CSS متحركة مرتبطة بالتمرير وView Transitions وcontainer queries

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. على خادم استضافة Opus Growth الخاص بي [اسم الخادم]، أنشئ موقعًا متعدد الصفحات لـ [اسم النشاط] لا يحمّل أي JavaScript إطلاقًا، وينفّذ حركته وانتقالات صفحاته بميزات CSS المدمجة في المتصفح. النشاط: [ما يفعله ولمن]، المدينة: [المدينة، الحي]. الخدمات أو المنتجات: [القائمة]. الأعمال: [لكل عمل: الاسم، الخامة أو النطاق، المدة، المشكلة التي تم حلها، رابط الصورة]. التواصل: [البريد الإلكتروني]، [الهاتف]، [رقم WhatsApp]، [العنوان]. النطاق: [النطاق]. الصفحات: الرئيسية (hero، أحدث الأعمال، طريقة العمل، الأسئلة الشائعة)، الأعمال (/isler/)، من نحن (/hakkimizda/)، اتصل بنا (/iletisim/، بدون نموذج)، الخصوصية (/gizlilik/) و404.html. الأسلوب: تحريري وطبيعي. خط عناوين serif (مثل Zodiak) مع خط نص هادئ (مثل Switzer)، خلفية بلون الكتان، لون مميز واحد داكن، مساحات واسعة. احتفظ بالجرأة لبطاقات الأعمال. قواعد CSS الحديثة (تحسين تدريجي؛ في متصفح لا يدعمها يجب أن تبقى الصفحة ثابتة لكن كاملة): 1. لا تحمّل أي ملف JavaScript إطلاقًا؛ لا GSAP ولا Lenis ولا Swiper. تعمل قائمة الجوال بوسم `<details>`. 2. انتقالات الصفحات (View Transitions بين صفحات الأصل نفسه): اكتب `@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }` وأبقِ المدة حوالي 0.35 ثانية. امنح الشريط العلوي view-transition-name: site-header. امنح صورة بطاقة عمل في الصفحة الرئيسية والصورة نفسها في صفحة الأعمال view-transition-name فريدًا واحدًا، حتى تكبر الصورة إلى مكانها في الصفحة الجديدة. استخدم كل اسم مرة واحدة فقط في الصفحة. 3. الحركات المرتبطة بالتمرير: خط تقدم في الأعلى ينمو بـ scaleX عبر `animation-timeline: scroll(root)` (يكون display:none افتراضيًا ويظهر فقط عند توفر الدعم)؛ على البطاقات وعناوين الأقسام `animation-timeline: view()` مع `animation-range: entry 0% entry 70%` باستخدام translateY فقط؛ وعلى صورة hero تكبير وإزاحة خفيفان أثناء وجودها في مجال الرؤية. لا تستخدم opacity: العناصر الباهتة الموجودة أسفل الشاشة تفشل في فحص التباين في Lighthouse. ضع كل هذه القواعد داخل `@supports (animation-timeline: scroll())` و`prefers-reduced-motion: no-preference`. 4. Container queries: اجعل بطاقة العمل مكوّنًا بـ `container-type: inline-size`. مع `@container (min-width: 34rem)` تكون الصورة في الأعلى في الحاوية الضيقة وبجانب النص في الحاوية العريضة. البطاقة نفسها ضيقة في شبكة من ثلاثة أعمدة في الصفحة الرئيسية وعريضة في عمود واحد في صفحة الأعمال. لا تحتوي نواة Tailwind 3 على فئات container query؛ اكتب هذه القواعد كـ CSS عادي في app.css. 5. يجب أن يناسب مستوى عنوان البطاقة الصفحة التي توجد فيها: في صفحة الأعمال ضع h2 بين h1 وعناوين h3 الخاصة بالبطاقات. عندما غاب هذا في العرض التجريبي انخفض Accessibility إلى 98 بسبب heading-order. 6. في صفحة الأعمال، أول صورة بطاقة تدخل الشاشة الأولى لا تكون lazy وتحصل على fetchpriority="high". الإعداد والمشكلات المعروفة (كل واحدة منها خفّضت درجة في قياسات العرض التجريبي، لا تتخطَّ أيًا منها): 1. إذا كان هناك موقع يعمل بالفعل على الخادم، أخبرني أولًا، لأن الإعداد يستبدل index.html ومجلد assets. اعرض معاينة scaffold_site مع confirm=false واستدعِها مع confirm=true بعد موافقتي. ثم اقرأ site_design_guide وsite_seo_guide. قبل كتابة الكود، ضع اتجاه التصميم (الخطوط، اللون، الشبكة، العنصر المميز، لغة الحركة، والمكتبات التي لن تُحمَّل) في ملف ART.md قصير خارج assets وأرِني إياه. 2. اجعل Tailwind مُجمّعًا بدل تحميله من CDN. ثبّته عبر site_run_command مع background=true: `npm i -D tailwindcss@3`، ثم تابعه بـ 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. استضف الخطوط بنفسك. اقرأ CSS لعائلات Fontshare التي اخترتها، ونزّل ملف woff2 لكل وزن إلى `assets/fonts/` عبر site_fetch، واكتب قواعد @font-face مع `font-display: swap` في `assets/app.css`؛ فـ design-check يبحث هناك عن خط مخصص. تحقق من اسم font-family في CSS الذي نزّلته، لأن Fontshare قد تعيد عائلة مختلفة عندما لا يتوفر وزن ما. نفّذ preload لخط عنوان الشاشة الأولى وخط النص في كل صفحة عبر `<link rel="preload" as="font" type="font/woff2" crossorigin>`؛ في العرض التجريبي أزال هذا إزاحة التخطيط الناتجة عن تبديل الخط (CLS من 0.024 إلى 0). معظم خطوط 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]]` بدل `{{...}}`، وإلا فسيقرؤها design-check وseo-check كصفحات غير مكتملة. ابنِ قائمة الجوال بدون JS باستخدام `<details>`. أبقِ اسم النشاط والعنوان والهاتف في التذييل كنص عادي. 5. حوّل الصور أثناء تنزيلها عبر site_fetch: اكتب الصورة نفسها في ملفات منفصلة مع resize="480x" و"800x" و"1200x"، وimage_format="webp"، وquality=65. امنح كل `<img>` srcset وsizes وwidth وheight. تحصل صورة الشاشة الأولى الرئيسية على fetchpriority="high" ولا تكون lazy أبدًا؛ وبقية الصور تحصل على loading="lazy" decoding="async". إذا كانت الصورة الرئيسية تملأ شاشة الهاتف، فقدّم قصّة أعرض وأصغر على الجوال عبر `<picture>` (في العرض التجريبي انخفض حجم hero على الجوال من 89 KB إلى 43 KB). 6. أنشئ favicon بصيغة PNG بحجم 48 px من الشعار عبر site_fetch وأضف `<link rel="icon">` إلى كل الصفحات. بدونه يسجّل المتصفح خطأ 404 وينخفض Best Practices إلى 96. 7. قواعد مدقق HTML: ابدأ كل مستند بـ `<!DOCTYPE html>` بأحرف كبيرة (ملفات البداية في الحزمة تستخدم أحرفًا صغيرة)، واستخدم `&nbsp;` للمسافات في النص المرئي لروابط tel:، ولا تستخدم سمة style="" أبدًا، وامنح كل زر type="button". SEO وAEO وGEO: 1. استخدم عناوين URL بنمط المجلدات مع شرطة مائلة في النهاية (/isler/ و/hakkimizda/ و/iletisim/ و/gizlilik/). املأ كتلة seo في site.config.js ونفّذ `node seo-stamp.mjs`. اكتب schema خاصًا بكل صفحة (الرئيسية: WebPage وFAQPage؛ الأعمال: CollectionPage مع CreativeWork واحد لكل عمل ضمن hasPart (مع material إن كانت معروفة)؛ من نحن: AboutPage؛ اتصل بنا: ContactPage؛ BreadcrumbList في الصفحات الداخلية. أدق نوع فرعي من LocalBusiness في site.config.js) في كتل `<script type="application/ld+json">` منفصلة واربطه بالرسم البياني الأساسي عبر @id. لا تدفن BreadcrumbList داخل @graph؛ امنحه كتلة خاصة به، لأن هذه هي الطريقة الوحيدة التي يراه بها seo-check. 2. عناوين من 48 إلى 60 حرفًا (يعدّ seo-check كل ما يتجاوز 65 خطأ)، وأوصاف من 145 إلى 158 حرفًا، وh1 واحد لكل صفحة. تحتاج كل صفحة إلى 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 على الأقل، ولا أخطاء في وحدة التحكم. فحص الدعم: يلتقط site_preview مع إيقاف الحركة، لذلك لا يستطيع إظهار الانتقالات. أخبرني كيف أتحقق في Chrome من أن الصورة تكبر إلى مكانها عند النقر على عمل في الصفحة الرئيسية، وأن الخط العلوي يمتلئ أثناء التمرير، وأن البطاقة تغيّر تخطيطها عند تضييق النافذة وتوسيعها، وأن الصفحة تُفتح كاملة في متصفح لا يدعم هذه الميزات. بعد النشر: اعرض معاينة القاعدة `/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)، ونتائج البوابات، وقائمة الإصلاحات التي طبّقتها.