أنشئ موقع تعريف لتطبيق جوال مع نموذج هاتف تتغير شاشته أثناء التمرير

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. على خادم الاستضافة الخاص بي في Opus Growth باسم [اسم الخادم]، ابنِ موقع هبوط لتطبيق الجوال [اسم التطبيق]. التطبيق: [ما يفعله ولمن هو موجّه]، المنصات والحد الأدنى للإصدارات: [إصدارات iOS وAndroid]. الميزات الرئيسية الأربع وما تعرضه كل شاشة: [الميزة، وصف بجملة واحدة، العناصر على الشاشة]. الباقات والأسعار: [اسم الباقة، السعر، المدة، الميزات المتضمنة، مدة التجربة؛ شامل ضريبة القيمة المضافة أو غير شامل]. روابط المتاجر: [رابط App Store]، [رابط Google Play]. أسئلة الدعم: [إجابات حقيقية عن حذف الحساب والإلغاء وتصدير البيانات وغيرها]. الشركة وبيانات التواصل: [اسم الشركة]، [العنوان]، [بريد الدعم الإلكتروني]، [الهاتف]. النطاق: [النطاق]. لقطات شاشة حقيقية: [روابط أو "لا يوجد، ارسمها بـ HTML"]. الصفحات: الرئيسية (/: قسم البطل، قصة الميزات بقيادة الهاتف #ozellikler، من يستخدمه، الأسعار #fiyatlar، الأسئلة الشائعة، دعوة لاتخاذ إجراء للتحميل #indir)، الدعم (/destek/: الأسئلة الشائعة وبيانات التواصل مع الدعم)، الخصوصية وKVKK (/gizlilik/: تغطي التطبيق والموقع معًا؛ فالمتاجر تطلب رابط سياسة الخصوصية) وصفحة 404.html. يتضمن قسم الأسعار بطاقات الباقات وتحتها مقارنة في `<table>` حقيقي؛ لا تعطِ الجدول min-width، لأن عرضًا أدنى ثابتًا في النسخة التجريبية دفع الأعمدة خارج الشاشة على الهواتف. الأسلوب: صفحة هبوط دافئة وموثوقة للتطبيق. خلفية بلون كريمي، ولون أساسي داكن للعلامة، ولون تمييز ساطع واحد يُستخدم كخلفية فقط. خط عرض مستدير وودود من Fontshare (مثل Chillax) وخط نصوص مقروء (مثل Manrope). ارسم إطار الهاتف بـ CSS (aspect-ratio 9/19، زوايا مستديرة، نتوء علوي) وابنِ الشاشات بـ HTML وCSS بدلًا من ملفات الصور؛ بطاقات الشاشات زخرفة بخاصية aria-hidden والنص المجاور لها يصف الميزة. لتطبيق حقيقي، نزّل شارات Apple وGoogle الرسمية إلى خادمك الخاص لأزرار المتاجر والتزم بإرشاداتهما؛ وأضف ملاحظة العلامات التجارية في تذييل الصفحة. قواعد الحركة (الجزء الأصعب، اتبعها حرفيًا): 1. المكتبات: نواة GSAP 3.13 وScrollTrigger فقط، وفي الصفحة الرئيسية فقط. مكتبات Lenis وSplitText وSwiper وLottie والفيديو لا تُحمَّل؛ ولا سكربتات إطلاقًا في صفحتي الدعم والخصوصية. 2. يحمل كل قسم ميزة هاتفه الصغير وشاشته الخاصين في HTML. على الهواتف، وبدون JS ومع تقليل الحركة، تظهر كل ميزة مع شاشتها الخاصة، مرتبة فوق بعضها (جنبًا إلى جنب على الشاشات الأوسع)؛ ويجب أن تكون هذه الحالة مكتملة بذاتها. 3. عند عرض 1024 بكسل فأكثر، وعندما تكون الحركة مسموحة، ينسخ JS الشاشات من الأقسام إلى الهاتف الوحيد في العمود الأيمن، ويضيف الفئة `has-phone` إلى القسم، ويخفي الهواتف الصغيرة. لا تكتب الشاشات مرتين في HTML. وبما أن قسم الميزات يقع أسفل الشاشة الأولى، فإن تغيير الفئة هذا لا يُحتسب ضمن تحوّل التخطيط؛ وقد قاست النسخة التجريبية CLS بقيمة 0. 4. ثبّت الهاتف في مكانه بـ `position: sticky` في CSS (top: calc(50vh - نصف ارتفاع الهاتف)) بدلًا من تثبيت ScrollTrigger. لا يُضاف pin-spacer، ويعمل بدون JS ولا تقفز الصفحة. 5. تبديل الشاشة: لكل قسم ميزة استخدم ScrollTrigger.create مع start "top 55%" وend "bottom 55%" وonToggle؛ أظهر الشاشة النشطة بـ autoAlpha من gsap وأخفِ السابقة بـ autoAlpha 0. لا تستخدم opacity وحدها؛ يجب أن تكون الشاشات المخفية visibility:hidden حتى لا يقرأها تدقيق إمكانية الوصول. يتغير لون عنوان القسم النشط (دون تلاشٍ بـ opacity)، وتبيّن نقاط بجانب الهاتف أي ميزة نشطة. 6. تظهر البطاقات وصناديق الأسعار بـ data-reveal، وتنزلق للأعلى بمقدار 20 بكسل عند التمرير؛ امسح الشاشات المنسوخة في دالة التراجع الخاصة بـ matchMedia حتى لا يتعطل التخطيط عند تضييق النافذة. الإعداد والمطبّات المعروفة (كلٌّ منها كلّف نقاطًا أو عطّل شيئًا في قياس النسخة التجريبية، فلا تتجاوز أيًّا منها): 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>`، قبل ورقة الأنماط؛ ولا تحمّل مسبقًا أكثر من ملفين، لأن التحميل المسبق لوزن ثالث في النسخة التجريبية زاد 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 بكسل على الأقل، بما في ذلك روابط التذييل ومسار التنقل (breadcrumb). 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">` إلى كل صفحة. بدون أيقونة موقع يسجّل المتصفح خطأ 404 وينخفض تقييم أفضل الممارسات إلى 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 بنمط المجلدات مع شرطة مائلة أخيرة (/destek/، /gizlilik/). املأ كتلة seo في site.config.js ونفّذ `node seo-stamp.mjs`. اكتب المخطط الخاص بكل صفحة (الرئيسية: WebPage وMobileApplication (operatingSystem وapplicationCategory ورابطا المتجرين كـ downloadUrl والباقات التي أعطيتك إياها كـ offers بأسعار TRY؛ ولا تضف aggregateRating، لأن تقييم المتجر ليس مراجعة جُمعت على موقعك) وFAQPage؛ الدعم: WebPage وFAQPage؛ الخصوصية: WebPage؛ و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. ممنوع الاختلاق: لا تكتب مراجعات أو تقييمات أو جوائز أو أعداد عملاء أو شهادات أو ساعات عمل أو إحداثيات أو أسعارًا دون أن تسألني. اترك أي حقل لا تعرفه خارج المخطط تمامًا. بوابات الفحص (بالترتيب؛ لا تقل "تم" حتى تنجح كلها): 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 بكسل، وأهداف لمس لا تقل عن 44 بكسل، ولا أخطاء في وحدة التحكم (console). ويجب أن يبدو الموقع سليمًا تمامًا أيضًا داخل إطار 390x790 وإطار 1440x898، كما في صفحات الـ prompts. فحص الحركة: لا يستطيع site_preview عرض الحركة، فأخبرني بما يجب أن أراقبه في متصفحي. على سطح المكتب، عند الوصول إلى قسم الميزات يجب أن يبقى الهاتف ثابتًا في منتصف الشاشة على اليمين، وتتبدل شاشته إلى كل ميزة عندما يصل عنوانها إلى المنتصف، ويكتسب العنوان لونًا وتتقدم النقطة بجانبه. وعلى الجوال ومع تفعيل تقليل الحركة، تعرض كل ميزة شاشتها الصغيرة الخاصة ولا شيء مثبّت في مكانه. ويجب أن تفتح أزرار المتاجر المتجر الصحيح. بعد النشر: اعرض معاينة قاعدة `/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)، ونتائج بوابات الفحص، ونتيجة التفاعلات التي جرّبتها في المتصفح، وقائمة الإصلاحات التي طبّقتها.