أنشئ موقعًا مؤسسيًا متعدد الصفحات بدون JavaScript وسلّمه بدرجة 100

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. أنشئ موقعًا مؤسسيًا متعدد الصفحات وثابتًا بالكامل لنشاطي التجاري على خادم استضافة Opus Growth الخاص بي [اسم الخادم]. النشاط: [اسم النشاط التجاري]، [القطاع، مثل مكتب هندسة وعمارة]، [المدينة/منطقة الخدمة]. الخدمات: [الخدمات مع وصف قصير لكل منها]. الهاتف: [الهاتف]، البريد الإلكتروني: [البريد الإلكتروني]، العنوان: [العنوان]، النطاق: [النطاق]. تفضيل الألوان: [تفضيل اللون/العلامة التجارية، أو "اختيارك"]. الصور: [مكان الصور الحقيقية، أو "استخدم صورًا مناسبة من مكتبات الصور"]. يضع هذا الموقع السرعة وإمكانية الوصول في المقام الأول. لا سطر JavaScript واحد في أي صفحة؛ ولا يتم تحميل GSAP وLenis وSwiper أبدًا. كل شيء، بما في ذلك القائمة وقائمة الجوال والأسئلة الشائعة، يعمل بـ HTML وCSS. اتجاه التصميم هو "لوحة الرسم الهندسي": 1. الخطوط: خط عناوين غروتسك مضغوط من Fontshare (مثل Cabinet Grotesk 800) وخط نص هادئ (مثل General Sans 400 و600). ثلاثة ملفات خطوط كحد أقصى. 2. اللون: خلفية فاتحة بلون الورق، ونص بحبر داكن، ورمادي ثانوي، ولون تمييز واحد كإشارة. يظهر لون التمييز فقط في التسميات والخطوط الرفيعة والزر الرئيسي. يصل كل لون نص إلى تباين 4.5:1 على الأقل. 3. الشبكة: 12 عمودًا، وتفصل بين الأقسام خطوط بسمك 1 بكسل؛ بدون ظلال أو زوايا مستديرة أو تدرجات. 4. العنصر المميز: تحت صورة الشاشة الأولى، شريط من أربع خلايا بتصميم يشبه لوحة بيانات الرسم المعماري (مثل نوع المشروع، الكود المتبع، المقياس، رقم اللوحة)، وشبكة مليمترية خافتة جدًا مرسومة بـ CSS فقط خلف الشاشة الأولى. 5. الحركة: لا شيء. ولا حتى مدد انتقال؛ فقط يتغير التسطير واللون فورًا عند التمرير بالمؤشر. الصفحات والمخطط الخاص بكل منها: 1. index.html: شاشة أولى تجيب فقرتها الافتتاحية مباشرة عن سؤال "ماذا تفعلون، ولمن، وأين"، وثلاث بطاقات خدمات (كل منها يرتبط بقسمه)، وعملية من أربع خطوات (مرقمة "الخطوة 1" بعداد CSS، وليس 01/02)، ومثالان على المشاريع، وشريط للهاتف. WebPage. 2. hizmetler.html: قسم لكل خدمة؛ وتجيب الفقرة الأولى عن "متى تلزم، وماذا تفعل"، ثم قائمة النطاق، والمدة المعتادة، والمخرجات. WebPage بالإضافة إلى Service لكل خدمة (provider #business، areaServed). 3. projeler.html: أمثلة مع نوع المبنى والطريقة والنتيجة؛ ولا تُذكر أسماء العملاء إلا بإذنهم. CollectionPage. 4. hakkimizda.html: من نحن، وقواعد عملنا، وأين نعمل. AboutPage. 5. sss.html: ستة أسئلة حقيقية على الأقل داخل <details>. WebPage وFAQPage. 6. iletisim.html: الهاتف والبريد الإلكتروني والعنوان داخل <address>، ورابط خريطة؛ واترك ساعات العمل إن لم تكن تعرفها. ContactPage مع mainEntity #business. 7. kvkk.html (إشعار الخصوصية) و404.html. القواعد التقنية. اتبعها حرفيًا، لأن الاختبارات أدناه تقيس هذه الأمور بالضبط: 1. الإعداد. شغّل scaffold_site كمعاينة أولًا، وأرني قائمة الملفات، ثم ثبّت باستخدام confirm=true بعد موافقتي. بعد ذلك اقرأ site_design_guide وsite_seo_guide بالكامل. قبل كتابة أي كود، اكتب الاتجاه في _kaynak/ART.md (الإحساس العام، ثنائية الخطوط، الألوان مع نسب التباين، الشبكة، العنصر المميز، قرار الحركة، قائمة الصفحات) وأرني إياه. 2. أزل JavaScript. لا تحمّل أي صفحة في هذا الموقع أي JavaScript. أزل من كل صفحة سكربت cdn.tailwindcss.com وسطر tailwind.config ووسوم GSAP وScrollTrigger وSplitText وLenis وSwiper ووسوم سكربت motion.js وchrome.js وsite.config.js؛ واحذف assets/chrome.js وassets/motion.js. أبقِ على assets/site.config.js، لكن فقط كمصدر للعلامة التجارية وبيانات الاتصال وseo لصالح seo-stamp.mjs؛ ولا يتم تحميله في المتصفح أبدًا. 3. القائمة والتذييل بصيغة HTML ثابتة. يتم رسم المكونين <site-nav> و<site-footer> بواسطة JavaScript، لذلك لا تستطيع زواحف البحث والذكاء الاصطناعي رؤية القائمة والروابط الداخلية وبيانات الاتصال. اكتب الترويسة في _kaynak/ust.inc والتذييل (الاسم، العنوان، الهاتف، البريد الإلكتروني، روابط كل الصفحات، إشعار الخصوصية، "Web: Opus Growth") في _kaynak/alt.inc. استخدم الامتداد .inc حتى لا يعامل seo-stamp وhtml-validate هذه الأجزاء كصفحات. تحمل كل صفحة العلامات <!-- ust:bas --><!-- ust:son --> و<!-- alt:bas --><!-- alt:son -->. ثم اكتب سكربت Node بلا اعتماديات باستخدام site_write_file في _kaynak/parca-bas.mjs: يضع الجزأين بين العلامات في كل ملف HTML، ويضيف aria-current="page" إلى رابط القائمة للصفحة الحالية، ويعيد كتابة sitemap.xml مستخدمًا dateModified من JSON-LD لكل صفحة كـ lastmod (مع تخطي 404 والصفحات noindex). ابنِ قائمة الجوال بدون JavaScript باستخدام <details><summary>Menu</summary>؛ وقائمتا سطح المكتب والجوال عنصرا <nav> منفصلان بقيمتي aria-label مختلفتين. 4. استضف الخطوط بنفسك. يستخدم هذا الموقع ثلاثة ملفات خطوط كحد أقصى. نزّل CSS الخاص بـ Fontshare (https://api.fontshare.com/v2/css?f[]=family@400,600&display=swap، ورمز الوزن 401 للخط المائل) باستخدام site_fetch إلى _kaynak/fontshare.css، واقرأه بـ site_read_file وخذ فقط روابط woff2 للعائلة التي طلبتها؛ فالخدمة تضيف أحيانًا عائلة لم تطلبها. نزّل كل ملف woff2 باستخدام site_fetch إلى assets/fonts/. ضع قواعد @font-face (مع font-display: swap) داخل assets/app.css، لأن design-check.mjs يبحث عن الخط المخصص في هذا الملف فقط. لا تستخدم الخطوط الافتراضية Inter وRoboto وPoppins وMontserrat. 5. اجعل Tailwind يُترجم. يصبح assets/app.css مصدر Tailwind: @tailwind base; @tailwind components; @tailwind utilities; في الأعلى، ثم @font-face، وحلقة التركيز، ورابط التخطي، وقاعدة prefers-reduced-motion، وفئات المكونات الخاصة بك داخل @layer components. لا تسمِّ فئة مكوّن أبدًا باسم فئة Tailwind (list-item وtable وgrid وcontainer وhidden وغيرها)، لأن التعارض يكسر التخطيط بصمت بعد الترجمة. اكتب tailwind.config.js في الجذر (content: ["./*.html", "./**/*.html", "./_kaynak/*.inc"]، والألوان وfontFamily). شغّل "npx --yes tailwindcss@3 -i assets/app.css -o assets/site.css --minify" باستخدام site_run_command مع background=true، وانتظر باستخدام site_command_status. يحتوي <head> في كل صفحة، بهذا الترتيب، على: عنصر واحد <link rel="stylesheet" href="/assets/site.css">، ثم سطر preload واحد لكل ملف خط مستخدم في الشاشة الأولى (العناوين والتمييز والنص؛ as="font" type="font/woff2" crossorigin). أسطر preload الموضوعة قبل ملف الأنماط تؤخر CSS وتزيد LCP؛ والخط في الشاشة الأولى بلا preload يتبدل متأخرًا ويزحزح الصفحة ويرفع CLS، و<link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">. سطر الأيقونة إلزامي: بدونه يطلب المتصفح /favicon.ico ويحصل على 404، ويخفض خطأ وحدة التحكم درجة أفضل الممارسات. 6. الصور. نزّل الصور باستخدام site_fetch مع resize وimage_format="webp" بعدة عروض (480 و800 و1200 و1600 لصورة الشاشة الأولى، و480 و800 و1200 للبقية؛ بجودة بين 60 و75، وأقل للصور كثيرة التفاصيل). لكل <img> سمة srcset وsizes تطابق التخطيط الفعلي وwidth وheight (انزياح صفري) ونص alt مفيد وصادق. توضع fetchpriority="high" فقط على الصورة التي يحددها Lighthouse كعنصر LCP، ولا تكون هذه الصورة lazy؛ وكل صورة أخرى تستخدم loading="lazy". إذا كان عنصر LCP نصًا، فلا تحصل أي صورة على fetchpriority. جهّز أيضًا assets/img/logo.png وassets/img/og.jpg بمقاس 1200x630 وassets/img/favicon.svg. 7. قواعد HTML (الإعدادات الافتراضية لـ html-validate). <!DOCTYPE html> بأحرف كبيرة؛ لا سمة style مضمّنة (بما فيها style="background:var(--brand)" الخاصة بالحزمة، استخدم فئة بدلًا منها)؛ استخدم &nbsp; بدل المسافات العادية في نص روابط tel:؛ سمة type في كل <button>؛ لا مسافات زائدة في نهاية الأسطر؛ جداول بـ <thead> و<tbody> وth scope. الروابط داخل الفقرات تحتها خط؛ وروابط القائمة والتذييل ومسار التنقل والأزرار لها مساحة لمس لا تقل عن 44x44 بكسل (min-h-[44px] min-w-[44px]). 8. البيانات المنظمة. املأ كتلة seo في site.config.js (siteUrl وdescription وlogo وصورة og ونوع النشاط وحقول العنوان) وشغّل "node seo-stamp.mjs" باستخدام site_run_command؛ فهو يضع Organization وWebSite، وعند الحاجة نوعًا فرعيًا من LocalBusiness، بالإضافة إلى وسوم canonical وOG. أضف يدويًا المخطط الخاص بكل صفحة: في كل صفحة عقدة WebPage مع @id (أو AboutPage أو ContactPage أو CollectionPage أو ProfilePage)، وdatePublished وdateModified، وisPartOf #site، وabout #business أو #org، وbreadcrumb يشير إلى BreadcrumbList؛ بالإضافة إلى Service لكل خدمة في صفحة الخدمات وFAQPage في صفحة الأسئلة الشائعة. اكتب كل عقدة في كتلة <script type="application/ld+json"> خاصة بها ولا تستخدم غلاف @graph، لأن seo-check.mjs يقرأ فقط @type في المستوى الأعلى ولا يلتقط BreadcrumbList داخل @graph. اربط العقد بـ @id. لا تختلق أبدًا ساعات عمل أو إحداثيات أو تقييمات أو مراجعات أو جوائز أو أعداد عملاء أو شهادات؛ واترك الحقول غير المعروفة. 9. وصول الذكاء الاصطناعي. اكتب robots.txt: الموقع كله مفتوح، و/_kaynak/ فقط مغلق؛ Allow: / لكل من GPTBot وOAI-SearchBot وChatGPT-User وClaudeBot وClaude-User وClaude-SearchBot وPerplexityBot وPerplexity-User وGoogle-Extended وApplebot-Extended وBingbot؛ وقرارك بشأن CCBot مع السبب في تعليق؛ وسطر Sitemap أخيرًا. أضف llms.txt في الجذر: ملخص صحيح للنشاط في جملتين، والصفحات المهمة بسطر لكل منها، وبيانات الاتصال. اكتب 404.html (noindex، مع علامات الترويسة والتذييل). 10. الكتابة. كل صفحة تحتوي على 150 كلمة على الأقل من نص أصلي داخل <main>، وتجيب الفقرة الأولى مباشرة عن السؤال الرئيسي للصفحة. تتراوح العناوين بين 48 و60 حرفًا، والأوصاف بين 145 و158، وتكون فريدة في كل صفحة. بلا شرطات طويلة أو متوسطة، ولا شعارات جاهزة، ولا وعود فارغة. إذا كان أي شيء في الموقع غير حقيقي، فاذكر بوضوح أنه خيالي. الاختبارات. بعد كل تغيير، شغّلها باستخدام site_run_command بهذا الترتيب ولا تنتقل إلى التالي حتى يكون كل اختبار نظيفًا: 1. node _kaynak/parca-bas.mjs، ثم node seo-stamp.mjs، ثم ترجمة Tailwind (مرة أخرى إن أضفت فئات). 2. node seo-check.mjs: 0 أخطاء و0 تحذيرات. إذا ظهر التحذير "gövde kısa" (النص قصير جدًا)، فأضف نصًا حقيقيًا وليس حشوًا. 3. node design-check.mjs: 0 أخطاء. التحذير الوحيد المسموح به هو "Hiç hareket yok" (لا توجد حركة)؛ فهذا اختيار متعمد لهذا الموقع، فاذكر السبب في التقرير. 4. npx --yes html-validate "**/*.html": 0 أخطاء. 5. افحص كل صفحة باستخدام site_preview عند view="mobile" وview="desktop"، وافحص الصفحة الرئيسية أيضًا عند 360 و768 بكسل. أصلح أي تجاوز أفقي أو عنوان ضيق أو هدف لمس أصغر من 44 بكسل ثم افحص مرة أخرى. 6. قِس كل صفحة باستخدام core_web_vitals عند strategy="mobile" وstrategy="desktop"، ثم دقّق الصفحة الرئيسية وأطول صفحة باستخدام seo_audit. الهدف: على الجوال، إمكانية الوصول وأفضل الممارسات وSEO بدرجة 100 والأداء 95 على الأقل؛ وعلى سطح المكتب الأربعة 95 على الأقل. يجب ألا يخرج أي طلب واحد من الموقع. إذا كان LCP مرتفعًا، فاستخدم resources=true لإيجاد الملف الذي يعطله: غالبًا أسطر preload الموضوعة قبل ملف الأنماط، أو fetchpriority الممنوحة لصورة ليست عنصر LCP. وإذا تجاوز CLS القيمة 0.1، فابحث عن خط في الشاشة الأولى لا يملك preload. لا تعتبر العمل منتهيًا حتى تنجح كل هذه الاختبارات. بعد النشر، أرسل https://[النطاق]/sitemap.xml باستخدام gsc_submit_sitemap وافحص الصفحة الرئيسية باستخدام gsc_url_inspect. إذا لم يكن هناك موقع مضاف في Search Console، فأخبرني؛ ولا تحاول ربط واحد بنفسك. تقرير التسليم: جدول بدرجات Lighthouse الأربع وLCP لكل صفحة على الجوال وسطح المكتب، ونتيجة الاختبارات الأربعة، وسبب أي تحذير من design-check، وقائمة بالمعلومات في الموقع التي تكون خيالية أو ناقصة، وما لا يزال عليّ فعله (Business Profile، وصور حقيقية، وساعات العمل وغيرها).