أنشئ موقع lookbook للأزياء بانتقالات صفحات View Transitions وGSAP Flip

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. أنشئ موقعًا متعدد الصفحات بأسلوب اللوك بوك للأزياء أو نمط الحياة، مع انتقالات صور بين الصفحات، لـ [اسم العلامة التجارية] على موقع [اسم الخادم] في خادم الاستضافة الخاص بي على Opus Growth. العلامة التجارية: [ما ينتجه، وأين، ولمن]. اسم الموسم أو المجموعة: [الاسم]. المنتجات: [لكل منها، الاسم والفئة واللون والخامة والسعر ورابط الصورة]. جدول المقاسات: [القياسات، أو "لا يوجد"]. طريقة الشراء: [عنوان الورشة أو المتجر، رقم WhatsApp، رابط المتجر إن وجد]. الشحن والإرجاع: [إن وجد]. التواصل: [البريد الإلكتروني]، [الهاتف]، [العنوان]. النطاق: [النطاق]. صور اللوك بوك: [الروابط]. الصفحات: الصفحة الرئيسية للوك بوك (/)، المجموعة (/koleksiyon/)، صفحة مستقلة لكل منتج (/urun/[اسم-المنتج]/)، الورشة أو من نحن (/atolye/)، التواصل (/iletisim/) و404.html. أقسام الصفحة الرئيسية: الواجهة الرئيسية (h1، تعريف قصير بالعلامة، زران، وصورة رئيسية طويلة)، ثم لوك بوك من ثلاث صور تحتها، حيث تقود كل صورة إلى منتج، وقصة الخامة أو التصنيع، والأسئلة الشائعة. صفحة المجموعة: عوامل تصفية الفئات وشبكة المنتجات. صفحة المنتج: صورة كبيرة، الاسم، السعر، فقرة أولى توضح ما هو المنتج، قائمة بالخامة واللون والمقاسات والعناية، صندوق "كيف أشتري؟"، جدول المقاسات ومنتجان من المجموعة نفسها. لا سلة مشتريات ولا دفع إلكتروني؛ الشراء يتم عبر WhatsApp أو في المتجر أو في الورشة، وتذكر كل صفحة منتج ذلك بوضوح. الأسلوب: أزياء تحريرية، كأنها لوك بوك مطبوع. خلفية بلون القماش، وصور بعرض كامل بزوايا حادة، وخطوط رفيعة بسماكة 1 بكسل، وتسميات صغيرة بأحرف كبيرة مع تباعد بين الحروف، ومساحات بيضاء واسعة. الخطوط: خط سيريف أنيق عالي التباين من Fontshare (مثل Melodrama بوزني 400 و600) مع خط نص هادئ من نوع grotesk (مثل Archivo بوزني 400 و500). لون مميز واحد (مثل لون الطين) فقط لحلقات التركيز والتمرير. وزّع ثلاثي اللوك بوك على 5 و4 و3 أعمدة من شبكة من 12 عمودًا مع إزاحة رأسية متدرجة. هناك عنصران مميزان: انتقال الصورة بين الصفحات والمعاينة السريعة بـ Flip في شبكة المجموعة. لا يتم تحميل Lenis وSwiper وScrollTrigger وSplitText. قواعد انتقال الصفحة وFlip (اتبعها حرفيًا): 1. انتقالات View Transitions بين المستندات: اكتب `@view-transition { navigation: auto; }` في `assets/app.css`. صورة بطاقة المجموعة والصورة الرئيسية في صفحة المنتج تحملان نفس view-transition-name؛ حدده بفئة خاصية عشوائية من Tailwind (`[view-transition-name:u-product-name]`)، وليس بـ style="". يمكن أن يظهر كل اسم مرة واحدة فقط في الصفحة، لأن المتصفح يلغي الانتقال عندما يتشارك عنصران الاسم نفسه؛ ويمكن لبطاقات "المجموعة نفسها" في صفحة المنتج أن تحمل أسماء منتجاتها الخاصة. امنح القائمة العلوية `view-transition-name: site-header` لتبقى ثابتة أثناء الانتقال. مدة المجموعة 0.5 ثانية، والتلاشي المتقاطع للجذر 0.3 ثانية. داخل `@media (prefers-reduced-motion: reduce)` اكتب `@view-transition { navigation: none; }`. المتصفحات غير الداعمة تتنقل بشكل عادي ببساطة؛ لا تكتب بديلًا بـ JavaScript. 2. حمّل GSAP وFlip في صفحة المجموعة فقط؛ لا تحتوي أي صفحة أخرى على أي سكربت. نزّل نواة GSAP 3.13 وإضافة Flip من jsdelivr إلى `assets/vendor/` باستخدام site_fetch وثبّت الإصدار. سكربت من سطر واحد في `<head>` يضيف الفئة `js` إلى `<html>`، والفئة `anim` ما لم تكن قيمة prefers-reduced-motion هي "reduce". محمّل صغير في نهاية الصفحة ينتظر حدث load واستدعاءين لـ requestAnimationFrame وrequestIdleCallback، ولا ينزّل شيئًا إذا لم تكن `anim` موجودة، وإلا يضيف gsap.min.js وFlip.min.js وملفًا صغيرًا يحتوي على `gsap.registerPlugin(Flip)` بهذا الترتيب مع async=false. 3. افصل التفاعل عن Flip: يشغّل `assets/koleksiyon.js` (بـ defer) التصفية والمعاينة السريعة بدون Flip أيضًا. عند كل تغيير، إذا كان Flip و`anim` موجودين، التقط أولًا `Flip.getState(cards)`، ثم غيّر DOM، ثم استدع `Flip.from(state, {duration: 0.6, ease: "power3.inOut", nested: true})`؛ وإلا طبّق التغيير فورًا. بهذه الطريقة يستطيع الزائر الذي لا يريد الحركة استخدام التصفية والمعاينة السريعة. 4. التصفية: أزرار "الكل" والفئات داخل حاوية بـ `role="group"` وaria-label، ولكل منها `aria-pressed`. البطاقات غير المطابقة تحصل على `hidden`؛ في Flip استخدم `absolute: true`، وonEnter للبطاقات الداخلة (opacity وscale من 0.92 إلى 1) وonLeave للخارجة. عنصر بـ `aria-live="polite"` يعلن النتيجة، مثل "تم عرض 3 منتجات". 5. المعاينة السريعة (تحويل الصورة من الشبكة إلى التفاصيل): لكل بطاقة زر "نظرة سريعة" مع `aria-expanded` و`aria-controls` ولوحة تفاصيل بـ `hidden` (الوصف، نصيحة تنسيق، رابط إلى صفحة المنتج). عند الفتح تمتد البطاقة بعرض كامل بـ `grid-column: 1 / -1` وتنقسم على سطح المكتب إلى عمودين، الصورة على اليسار والتفاصيل على اليمين؛ ويحرّك Flip نمو الصورة من المربع الصغير إلى العرض الكبير. حدّث `sizes` للصورة المفتوحة للعرض الكبير حتى يتم تحميل ملف أكبر. تُفتح بطاقة واحدة فقط في كل مرة، ويتحول نص الزر إلى "إغلاق" وينتقل التركيز إلى اللوحة التي تحمل tabindex="-1". 6. بدون JavaScript تُخفى أزرار التصفية والمعاينة السريعة (يظهر `.js-only` فقط تحت `.js`)، وتبقى جميع روابط البطاقات وصفحات المنتجات تعمل. الرابط الرئيسي للبطاقة يقود دائمًا إلى صفحة المنتج؛ والمعاينة السريعة زر منفصل. الإعداد والمزالق المعروفة (كل واحدة منها كلّفت نقاطًا أو فشلت في اختبار أثناء قياس العرض التجريبي، فلا تتجاوزها): 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 بما فيها المجلدات الفرعية وقوالب `_src/*.tpl` وأي ملف 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 المضمّن وchrome.js وmotion.js، واربط `/assets/site.css` فقط. أعد الترجمة بعد كل تعديل على HTML. أضف `assets/koleksiyon.js` إلى قائمة content أيضًا، لأنه يكتب فئات مثل `is-open`. 3. استضف الخطوط ذاتيًا. اقرأ CSS الخاص بـ Fontshare بطلب واحد لكل عائلة ووزن (`https://api.fontshare.com/v2/css?f[]=family@weight`)، ونزّل كل ملف woff2 إلى `assets/fonts/` باستخدام site_fetch واكتب قواعد @font-face مع `font-display: swap` في `assets/app.css`؛ إذ يبحث design-check عن الخط المخصص هناك. حمّل مسبقًا (preload) كل وزن مستخدم في الجزء الظاهر من الصفحة (العنوان والنص والأزرار) في كل صفحة باستخدام `<link rel="preload" as="font" type="font/woff2" crossorigin>` وضع هذه الأسطر قبل رابط ملف الأنماط. معظم خطوط Fontshare لا تحتوي على رمز ₺، لذا اكتب الأسعار بـ "TL". 4. اجعل القائمة والتذييل HTML ثابتًا. اكتب `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]]` بدلًا من `{{...}}`. ابنِ قائمة الجوال بـ `<details>` ودون JS. أبقِ اسم النشاط والعنوان والهاتف في التذييل كنص عادي، واجعل ارتفاع روابط التذييل ومسار التنقل 44 بكسل على الأقل. 5. حوّل الصور أثناء تنزيلها بـ site_fetch: احفظ الصورة نفسها في ملفات منفصلة مع resize="480x" و"800x" و"1120x" (أو العروض التي تحتاجها الصفحة)، وimage_format="webp" وquality=65. امنح كل `<img>` الخصائص srcset وsizes وwidth وheight بما يطابق النسبة الفعلية. الصورة الرئيسية في الجزء الظاهر من الصفحة تحصل على fetchpriority="high" وليست lazy؛ امنح fetchpriority فقط لعنصر LCP الحقيقي، وloading="lazy" decoding="async" لبقية الصور. 6. اكتب ملف `favicon.svg` صغيرًا في جذر الموقع وأضف `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` إلى كل صفحة؛ وإذا كان هناك شعار PNG، فأنشئ apple-touch-icon باستخدام site_fetch مع resize="180x180" وimage_format="png". بدون favicon يسجل المتصفح خطأ 404 لـ /favicon.ico وتنخفض الممارسات الفضلى إلى 96. 7. قواعد مدقق HTML: ابدأ كل مستند بـ `<!DOCTYPE html>` بأحرف كبيرة، واجعل قيم السمات بين علامتي اقتباس مزدوجتين، واستخدم `&nbsp;` للمسافات في النص المرئي لروابط tel:، ولا تستخدم سمة style="" أبدًا (إذا احتجت متغير CSS فاستخدم فئة خاصية عشوائية من Tailwind مثل `[--r:-4deg]`)، وامنح كل زر type="button"، ولا تضع aria-label على عناصر بلا role مثل `<ul>` أو `<div>`، واستخدم `<section aria-label="...">` بدلًا من role="region". 8. نزّل صور المنتجات بـ site_fetch بنسبة عمودية 4:5 مع resize="400x" و"640x" و"960x"؛ وأبقِ كل صور المنتجات بالنسبة نفسها لتبقى الشبكة متناسقة ولا يقفز انتقال Flip. الصورة الرئيسية في صفحة المنتج هي عنصر LCP لتلك الصفحة وتحصل على fetchpriority="high". 9. افحص أرقام خط العرض: في العرض التجريبي كان الصفر في Melodrama مشطوبًا وبدا "2026" في h1 من بعيد كأنه "2Ø26". أبقِ الأرقام خارج العناوين المكتوبة بخط العرض، أو اضبط الأرقام بخط النص. SEO وAEO وGEO: 1. استخدم عناوين URL بنمط المجلدات مع شرطة مائلة في النهاية (/koleksiyon/ و/urun/[اسم-المنتج]/ و/atolye/ و/iletisim/ أو ما يقابلها بلغتك). املأ كتلة seo في site.config.js ثم شغّل `node seo-stamp.mjs`. إذا كانت هناك ورشة أو متجر فعلي، فحدد في site.config.js أدق businessType (مثل ClothingStore) والعنوان؛ وأضف ساعات العمل فقط إذا زودتك بها. مخططات الصفحات: الرئيسية WebPage وFAQPage؛ المجموعة CollectionPage وItemList لكل url منتج؛ كل صفحة منتج ItemPage وProduct (name وdescription وimage وsku وcolor وmaterial وcategory وbrand وOffer مع price وpriceCurrency TRY وavailability وitemCondition وurl وseller @id)؛ الورشة AboutPage؛ التواصل ContactPage؛ وBreadcrumbList في الصفحات الداخلية (اللوك بوك، المجموعة، المنتج). حتى بدون دفع إلكتروني تحمل Offer السعر الصحيح وحالة المخزون؛ وإذا زودتك بشروط الشحن والإرجاع، فأضف shippingDetails وhasMerchantReturnPolicy إلى Offer. لا تختلق تقييمات أو درجات (aggregateRating). اكتب كل مخطط خاص بصفحة في كتلة `<script type="application/ld+json">` مستقلة واربطه بالرسم الأساسي عبر @id. لا تضع BreadcrumbList داخل @graph؛ أبقِه في كتلته المستقلة، لأن هذه هي الطريقة الوحيدة التي يراه بها seo-check. 2. العناوين من 48 إلى 60 حرفًا (يعدّ seo-check ما يزيد على 65 خطأً)، والأوصاف من 145 إلى 158 حرفًا، وh1 واحد في كل صفحة. المحتوى الرئيسي لكل صفحة 150 كلمة على الأقل. في العرض التجريبي جاءت صفحتا الورشة والتواصل بـ 113 و95 كلمة في المحاولة الأولى، وتم استكمالهما بمعلومات حقيقية مثل "ماذا نفعل في الورشة" و"ما الذي تضمّنه عند مراسلتنا". في صفحات المنتجات، اكتب الجمل المشتركة (العناية، القماش) كعناصر قائمة قصيرة واكتب الوصف بشكل منفصل لكل منتج؛ يحذّر seo-check من المحتوى المكرر عندما تتشارك الصفحات أكثر من 50 بالمئة من جملها. 3. الفقرة الأولى في كل صفحة تجيب مباشرة عن سؤال الصفحة، ويُصاغ h1 على شكل هذا السؤال. اكتب الأسئلة الشائعة الخاصة بالصفحة بـ `<details>` وعلّمها بوصفها FAQPage. اعرض الجهة الناشرة وتاريخ "آخر تحديث" باستخدام `<time datetime>`. 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. لا اختلاق: لا تكتب تقييمات أو درجات أو جوائز أو أعداد عملاء أو شهادات أو ساعات عمل أو إحداثيات أو أسعارًا أو أرقام منتجات دون أن تسألني. اترك أي حقل لا تعرفه خارج المخطط تمامًا. البوابات (بالترتيب؛ لا تقل "تم" قبل اجتيازها جميعًا): 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 الصفحة مع إيقاف الحركة؛ فإذا لم يكن المحتوى مكتملًا في تلك اللقطة، فحالة عدم الحركة معطلة. قد تظهر الصور lazy في أسفل الصفحة فارغة في لقطة الصفحة الكاملة؛ لا تعدّ ذلك خطأً، لكن افحص مساراتها. 3. شغّل core_web_vitals لكل صفحة مع strategy="mobile" وstrategy="desktop". معيار القبول: على الجوال Performance لا تقل عن 95 وإمكانية الوصول والممارسات الفضلى وSEO عند 100؛ وعلى سطح المكتب جميعها لا تقل عن 95 والهدف 100. للصفحة التي لا تحقق ذلك، ابحث عن الملف البطيء باستخدام resources=true وأصلحه وأعد القياس. ثم شغّل seo_audit على الصفحة الرئيسية مع strategy="mobile" وruns=2. يجب ألا تحتوي قائمة طلبات الشبكة على أي عنوان خارج نطاقك الخاص (روابط المتجر وWhatsApp هي روابط وليست طلبات). 4. لا تمرير أفقي عند عرض 360 و390 و768 و1440 بكسل، وأهداف اللمس 44 بكسل على الأقل، ولا أخطاء في وحدة التحكم. فحص التفاعل: بما أن site_preview لا يستطيع إظهار الحركة، أخبرني بما يجب أن أراقبه في متصفحي: في Chrome أو Edge، يؤدي النقر على منتج في المجموعة إلى نمو الصورة من بطاقتها إلى موضعها في صفحة المنتج بينما تبقى القائمة ثابتة؛ وفي Firefox تُفتح الصفحة ببساطة؛ وعند الضغط على عامل تصفية تنزلق البطاقات إلى ترتيب جديد؛ و"نظرة سريعة" تفتح البطاقة داخل الشبكة وتنمو الصورة؛ ومع تفعيل تقليل الحركة تحدث الإجراءات نفسها فورًا؛ ومع إيقاف JavaScript يظهر كل منتج. وفي فحص محلي رأيت أيضًا أن `document.documentElement.matches(':active-view-transition')` تعيد true في صفحة المنتج أثناء الانتقال؛ يمكنك تشغيل الفحص نفسه. بعد النشر: اعرض معاينة القاعدة `/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)، ونتائج البوابات، وقائمة الإصلاحات التي طبّقتها.