أنشئ موقعًا سريعًا لمنتج ذكاء اصطناعي بخلفية شفق بـ CSS وبطاقات زجاجية ومبدّل بين السمة الداكنة والفاتحة

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. ابنِ موقع منتج متعدد الصفحات بخلفية أورورا وبطاقات زجاجية مصنفرة ومظهرين فاتح وداكن لـ [اسم منتج الذكاء الاصطناعي] على موقع [اسم الخادم] في خادم استضافة Opus Growth الخاص بي. المنتج: [ما يقدمه، ولمن]. طريقة العمل: [ثلاث خطوات]. ما ينتجه أو يفعله: [من 4 إلى 6 ميزات]. البيانات والأمان: [مكان تخزين البيانات، ولمدة كم، وهل تُستخدم لتدريب النماذج]. مسار التجربة أو التسجيل: [مدة التجربة، URL التسجيل]. التواصل: [البريد الإلكتروني], [الهاتف], [رقم WhatsApp], [العنوان]. النطاق: [النطاق]. ألوان العلامة التجارية: [الألوان، أو "أنت تختار"]. لقطات شاشة أو صور للمنتج: [الروابط، أو "لا يوجد"]. الصفحات: الرئيسية (/)، الميزات (/ozellikler/)، الأمان (/guvenlik/)، التواصل (/iletisim/)، الخصوصية (/gizlilik/) و404.html. أقسام الصفحة الرئيسية بالترتيب: القسم الرئيسي hero (h1، مقدمة من جملتين، زران وبطاقة المنتج التي هي العنصر المميز)، ثلاث خطوات، لمن هو (مع صورة)، الأسئلة الشائعة ودعوة ختامية لاتخاذ إجراء. في منتجات الذكاء الاصطناعي تمثل صفحة الأمان نصف قرار الشراء؛ اذكر مدة الاحتفاظ بالبيانات والوصول إليها وتدريب النماذج بوضوح. لا نموذج في صفحة التواصل، لأن الخادم يقدّم ملفات ثابتة فقط. الأسلوب: أورورا وزجاج. ضوء ناعم متعدد الألوان يتحرك ببطء في الخلفية (الأورورا)، مع وضع المحتوى على بطاقات زجاجية مصنفرة. لا لوحة ألوان من البنفسجي إلى الأزرق؛ اختر ثلاث درجات ناعمة تناسب العلامة التجارية، مثل النعناعي والمشمشي والأزرق الجليدي. الخطوط: خط عناوين سيريف ناعم من Fontshare (مثل Gambetta 500) مع خط نص هادئ (مثل Synonym 400 و600). استخدم التأثير الزجاجي على أسطح البطاقات فقط؛ لا تغرق الصفحة بالزجاج. لا canvas ولا WebGL ولا فيديو ولا GSAP ولا Lenis ولا Swiper. JavaScript الوحيد هو مبدّل مظهر صغير مضمّن. العنصر المميز: بطاقة زجاجية في القسم الرئيسي تحتوي على مثال HTML حقيقي لما يفعله المنتج (مثل قرار ومهمة مستخرجين من نص اجتماع). قواعد الأورورا والزجاج والمظهر (حيث يتعرض هذا الأسلوب للإخلال بالأداء والتباين بسهولة أكبر): 1. اصنع الأورورا بـ CSS خالص: طبقة واحدة `position: fixed` مع aria-hidden، وعنصران وهميان (::before و::after) وثلاثة radial-gradients كبيرة داخلهما. حرّك باستخدام transform فقط (translate3d وrotate وscale) في حلقة `alternate` مدتها من 25 إلى 35 ثانية وأضف `will-change: transform`. لا تحرّك التدرج نفسه ولا background-position ولا filter: blur؛ فهذه تعيد الرسم في كل إطار. ضع الحركة داخل `@media (prefers-reduced-motion: no-preference)`؛ ومع تقليل الحركة تتوقف الأورورا لكنها تبقى ظاهرة. 2. عرّف الألوان كمتغيرات CSS (--bg و--fg و--mute و--line و--card و--solid و--acc و--accfg ودرجات الأورورا) ووجّه ألوان Tailwind إليها (مثل colors: {bg: "var(--bg)"}). اكتب القيم الداكنة تحت كل من `:root[data-theme="dark"]` و`@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) }`، ليُطبَّق مظهر النظام حتى مع تعطيل JavaScript. 3. مبدّل المظهر: سكربت من سطر واحد في `<head>` بعد ملف الأنماط، يقرأ الاختيار المحفوظ من localStorage ويكتب data-theme على `<html>` ويضيف الفئة `js`؛ ولأنه يعمل قبل أول رسم، لا تومض الصفحة بالمظهر الخاطئ أبدًا. غلّف الوصول إلى localStorage بـ try. سكربت صغير في نهاية الصفحة يبدّل المظهر عند النقر ويحفظ الاختيار ويحدّث الزر عند تغيّر مظهر النظام. الزر هو `<button type="button">` حقيقي مع `aria-pressed` صحيح أثناء تفعيل الداكن، ويحتفظ باسمه المتاح للوصول ("Dark theme") حتى حين تظهر الأيقونة فقط على الجوال. أخفِ الزر بدون JavaScript (`html:not(.js) .theme-toggle { display: none }`). أضف أيضًا `<meta name="color-scheme" content="light dark">`. 4. أبقِ البطاقة الزجاجية في فئة `.glass` واحدة: خلفية صلبة أولًا (--solid)، ثم داخل `@supports (backdrop-filter: blur(1px))` خلفية شبه شفافة مع `backdrop-filter: blur(18px) saturate(140%)` (مع البادئة -webkit- لمتصفح Safari). تحت `@media (prefers-reduced-transparency: reduce), (prefers-contrast: more)` تصبح البطاقة صلبة وتُخفى الأورورا. لا تستخدم أداة backdrop-blur في HTML؛ إذ يحذّر design-check من "الزجاجية في كل مكان" عندما يرى أكثر من خمسة منها في الصفحة. 5. قِس التباين في المظهرين معًا. يدقق Lighthouse المظهر الفاتح فقط؛ وإذا لم تفحص الداكن بشكل منفصل، فسيمر النص الباهت في الوضع الداكن دون ملاحظة. اجعل الخلفية شبه الشفافة للبطاقة معتمة بما يكفي ليبقى النص فوق 4.5:1 حتى فوق أسطع ألوان الأورورا (في العرض التجريبي: أبيض بنسبة 66 بالمئة في الفاتح وأخضر داكن بنسبة 58 بالمئة في الداكن). بدّل لون نص زر التمييز حسب المظهر (أبيض على أخضر صنوبري داكن في الفاتح، وأخضر داكن على نعناعي فاتح في الداكن). 6. امنح بطاقة القسم الرئيسي حركة دخولها باستخدام transform فقط وسمة data-reveal (يتعرف design-check على الحركة بهذه السمة)؛ ولا تُخفِ h1 ولا تجعله يتلاشى أبدًا، لأنه عنصر LCP. الإعداد والمزالق المعروفة (كلٌّ منها كلّف نقاطًا أو أفشل بوابة في قياس العرض التجريبي، فلا تتجاوزها): 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. ولأن ألوان المظهر متغيرات، فإن اختصارات الشفافية في Tailwind (مثل bg-fg/50) لا تعمل؛ عرّف متغيرًا منفصلًا إذا احتجت إلى لون شبه شفاف. 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 وينخفض Best Practices إلى 96. 7. قواعد مدقق HTML: ابدأ كل مستند بـ `<!DOCTYPE html>` بأحرف كبيرة، وضع السمات بين علامات اقتباس مزدوجة، واستخدم `&nbsp;` للمسافات في النص المرئي لروابط tel:، ولا تستخدم سمة style="" أبدًا (وإذا احتجت إلى متغير CSS فاستخدم فئة خاصية اعتباطية في Tailwind مثل `[--r:-4deg]`)، وأعطِ كل زر type="button"، ولا تضع aria-label على عناصر بلا دور مثل `<ul>` أو `<div>`، واستخدم `<section aria-label="...">` بدل role="region". SEO وAEO وGEO: 1. استخدم عناوين URL بنمط المجلدات مع شرطة مائلة في النهاية (/ozellikler/ و/guvenlik/ و/iletisim/ و/gizlilik/ أو ما يعادلها بلغتك). املأ كتلة seo في site.config.js ونفّذ `node seo-stamp.mjs`. بالنسبة لشركة برمجيات بلا متجر فعلي، اضبط localBusiness:false في site.config.js. مخططات الصفحات: الرئيسية WebPage وFAQPage؛ الميزات SoftwareApplication (applicationCategory وoperatingSystem وfeatureList) وFAQPage؛ الأمان WebPage وFAQPage؛ التواصل ContactPage؛ وBreadcrumbList في الصفحات الداخلية. لا تدرج شهادة أمان أو وثيقة امتثال لا تملكها؛ وإذا كنت تملكها فاذكر رقمها وتاريخ صلاحيتها. اكتب كل مخطط خاص بصفحة في كتلة `<script type="application/ld+json">` خاصة به واربطه بالرسم الأساسي عبر @id. لا تُدخل BreadcrumbList داخل @graph؛ أبقه في كتلته الخاصة، لأن هذه هي الطريقة الوحيدة التي يراه بها seo-check. 2. العناوين من 48 إلى 60 حرفًا (يعدّ seo-check ما يزيد على 65 خطأ)، والأوصاف من 145 إلى 158 حرفًا، وh1 واحد في كل صفحة. المحتوى الرئيسي لكل صفحة 150 كلمة على الأقل. في العرض التجريبي جاءت صفحتا التواصل والخصوصية بـ 84 و116 كلمة من المحاولة الأولى، واستُكملتا بمعلومات حقيقية مثل "ماذا يحدث خلال التجربة" و"مع من تُشارَك البيانات". 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 في الأسفل فارغة في لقطة الصفحة الكاملة؛ لا تعدّ ذلك خطأ، لكن تحقق من مساراتها. افحص المظهر الداكن أيضًا: ولأن site_preview لا يستطيع تغيير مظهر النظام، نفّذ تدقيق تباين في الوضع الداكن (مثل قاعدة color-contrast في axe-core مع prefers-color-scheme: dark)، أو اجعل الداكن افتراضيًا مؤقتًا واعرضه مرة واحدة. 3. نفّذ core_web_vitals لكل صفحة مع strategy="mobile" وstrategy="desktop". معيار القبول: على الجوال Performance 95 على الأقل وAccessibility وBest Practices وSEO بـ 100؛ وعلى سطح المكتب تكون الأربعة 95 على الأقل والهدف 100. للصفحة التي لا تحقق ذلك، اعثر على الملف البطيء باستخدام resources=true وأصلحه وقِس مجددًا. ثم نفّذ seo_audit على الصفحة الرئيسية مع strategy="mobile" وruns=2. يجب ألا تحتوي قائمة طلبات الشبكة على أي عنوان خارج نطاقك الخاص (روابط المتجر وWhatsApp روابط وليست طلبات). 4. لا تمرير أفقي عند عرض 360 و390 و768 و1440 بكسل، وأهداف اللمس 44 بكسل على الأقل، ولا أخطاء في وحدة التحكم. فحص التفاعل: ولأن 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) ونتائج البوابات وقائمة الإصلاحات التي طبّقتها.