أنشئ موقعًا لنشاط عائلي عريق بمظهر كلاسيكي ومعايير حديثة

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. ابنِ موقعًا بمظهر تقليدي لعملنا العائلي على خادم استضافة Opus Growth الخاص بي [اسم الخادم]. النشاط: [اسم النشاط]، [ما ننتجه، مثل زيت الزيتون أو الحلقوم التركي]، [المدينة]، [سنة التأسيس والجيل، فقط إن كان صحيحًا]. المنتجات: [لكل منتج: الاسم، حجم العبوة، وصف قصير والسعر المنشور، أو "بدون سعر"]. مراحل الإنتاج: [قائمة قصيرة]. كيف يطلب الناس: [هاتف، متجر، توصيل]. الهاتف: [الهاتف]، البريد الإلكتروني: [البريد الإلكتروني]، عنوان المتجر: [العنوان]، النطاق: [النطاق]. صور العائلة والأرشيف: [أين هي، أو "لا توجد"]. المظهر قديم، والبناء جديد. يجب أن يبدو كملصق قديم أو لافتة محل أو دفتر حصاد، ومع ذلك يجب أن تُفتح الصفحات بلا أي مشكلة على الهاتف، وألا تُحمّل أي JavaScript، وأن تُقاس كل صفحة. المظهر القديم ليس عذرًا أبدًا لضعف الوضوح أو التباين. اتجاه التصميم تقليدي: 1. الخطوط: عائلة خط serif كلاسيكية واحدة من Fontshare (مثل Gambetta 400 و400 مائل و600). أحرف كبيرة صغيرة باستخدام font-variant-caps: all-small-caps مع تباعد واسع بين الأحرف في القائمة والأزرار والتسميات؛ عناوين في المنتصف. 2. الألوان: خلفية بلون الورق، ونص بني حبري، وبني ثانوي، ولون رئيسي واحد (مثل الأخضر الزيتي)، مع لون دافئ ثانٍ على التسميات الصغيرة فقط. كلها بتباين لا يقل عن 4.5:1. 3. الملمس: ملمس ورق للخلفية على شكل SVG بتقنية feTurbulence كـ data URI داخل CSS؛ بلا ملف صورة إضافي وبلا طلب إضافي. 4. العنصر المميز: إطار ملصق قديم، وصندوق بخطين مزدوجين مع زخارف في الزوايا (border وoutline-offset و::before و::after)، وزخرفة صغيرة مرسومة بـ SVG مضمّن بين الأقسام (مثل غصن زيتون)، مع aria-hidden. 5. التخطيط: في المنتصف وضيق؛ المنتجات في بطاقات ملصقات مؤطرة، عمود واحد على الهاتف. 6. الحركة: لا شيء. 7. الصور: استخدم أرشيف العائلة إن وُجد. وإلا يمكنك استخدام صور أرشيفية من الملكية العامة أو بترخيص مفتوح، لكن اذكر المصدر والترخيص في التعليق ولا تقدمها أبدًا على أنها تخص العائلة. الصفحات والمخطط (schema) الخاص بكل منها: 1. index.html: شاشة أولى مؤطرة تجيب فقرتها الافتتاحية عن "من، يصنع ماذا، أين، يبيع كيف"، وملصقات المنتجات، وقسم العائلة، وكيفية الطلب. WebPage. اضبط النوع الفرعي الأنسب للنشاط في site.config.js (مثل Store أو FoodEstablishment). 2. urunler.html: كل منتج في بطاقة ملصق خاصة به مع الاسم وحجم العبوة والوصف والسعر المنشور. CollectionPage وعنصر Product لكل منتج (brand وmanufacturer #business وoffers مع price وpriceCurrency وavailability). لا تكتب أبدًا سعرًا لم أعطك إياه؛ وإن لم يوجد سعر فاترك offers خارجًا تمامًا. 3. hikayemiz.html: القصة الحقيقية، جيلًا بعد جيل. AboutPage. 4. uretim.html: المراحل من الحصاد أو المادة الخام إلى العبوة، والتعريف الرسمي لدرجة المنتج واللائحة التي يستند إليها (مثل مدونة الغذاء التركية). WebPage وHowTo. 5. sss.html: ست أسئلة حقيقية عن الطلب والتوصيل والتخزين. FAQPage. 6. iletisim.html: هاتف الطلب وعنوان المتجر ورابط الخريطة؛ اترك ساعات العمل خارجًا إن كانت تتغير بتغير الموسم. ContactPage. 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. استضف الخطوط بنفسك. يستخدم هذا الموقع عائلة خط serif كلاسيكية واحدة وثلاثة ملفات على الأكثر. نزّل 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 مطلوب: فبدونه يطلب المتصفح /favicon.ico ويتلقى 404، ويخفض خطأ وحدة التحكم درجة أفضل الممارسات. 6. الصور. نزّل الصور باستخدام site_fetch مع resize وimage_format="webp" بعدة عروض (480 و800 و1200 و1600 لصورة الشاشة الأولى، و480 و800 و1200 لبقية الصور؛ بجودة بين 60 و75، وأقل للصور الدقيقة التفاصيل). كل <img> لها srcset وsizes مطابقة للتخطيط الفعلي وwidth وheight (CLS صفر) ونص 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؛ إضافة إلى Product مع Offer لكل منتج في صفحة المنتجات، وHowTo في صفحة الإنتاج، و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، صور حقيقية، ساعات العمل وغير ذلك).