أنشئ موقعًا لمطعم أو مقهى غنيًا بالصور وسريعًا، مع قائمة طعام بصيغة HTML ومسار للحجز والموقع

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. أنشئ موقعًا جديدًا لمطعمي من الصفر على خادم الاستضافة الخاص بي [اسم الخادم]. التفاصيل: 1. الاسم: [اسم النشاط]، النوع: [مطعم / مقهى / مكان لتقديم الإفطار]، المطبخ: [نوع المطبخ] 2. قائمة الطعام مع الأقسام والأوصاف والأسعار: [القائمة والأسعار] 3. معلومات الأطباق النباتية والخالية من اللحوم ومنتجات الحيوان والخالية من الغلوتين ومسببات الحساسية: [المعلومات الغذائية] 4. ساعات العمل (بشكل منفصل للإفطار والعشاء إذا اختلفت): [ساعات العمل] 5. طريقة استقبال الحجوزات: [هاتف / WhatsApp / كلاهما]، الهاتف: [الهاتف]، WhatsApp: [WhatsApp] 6. العنوان وملاحظات الوصول: [العنوان]، [مواقف السيارات والمواصلات] 7. مصدر المكونات وقصتنا: [المنتجون والقصة] 8. النطاق: [النطاق]، الصور الحقيقية: [مكان الصور، أو "استخدم صورًا جاهزة"] أكّد الخادم أولًا باستخدام list_servers ثم شغّل scaffold_site مع style="restaurant"، أولًا مع confirm=false ثم مع confirm=true بعد موافقتي. اقرأ site_design_guide وsite_seo_guide. اكتب قرار تصميم طبيعيًا وعضويًا في _kaynak/ART.md واعرضه عليّ: خط عناوين دافئ بحواف (serif) من Fontshare (مثل Gambarino) مع خط نصوص ناعم (مثل Supreme)، وخلفية بلون الرمل، ونصوص بألوان ترابية، ولونان دافئان هما الأخضر الزيتي والتيراكوتا، ونفس الزاوية المستديرة في كل البطاقات. العنصر المميز هو صندوق "لوحة اليوم" في صفحة القائمة. إذا لم يكن في الخط الذي اخترته رمز ₺، فاكتب الأسعار بالصيغة "TL". الصفحات والـ schema: 1. الرئيسية: الشاشة الأولى تقول ما الذي تقدمه وأين، مع زرّي "احجز طاولة" و"شاهد القائمة" وصورة كبيرة واحدة. بعدها ثلاثة أطباق من القائمة، ومصدر المكونات، وملخص لساعات العمل والموقع، و4 أسئلة شائعة. الـ schema: WebPage وFAQPage، وأضف servesCuisine وacceptsReservations (رابط صفحة الحجز) وhasMenu إلى عقدة #business. 2. القائمة: بصيغة HTML وليس PDF. لكل قسم عنوان ورابط مرجعي، ولكل طبق اسمه ووصفه وسعره وعلامات النظام الغذائي، وأعلى الصفحة يعرض تاريخ آخر تحديث وملاحظة عن مسببات الحساسية. خذ الأسعار من القائمة التي أعطيتك إياها فقط؛ ولا تخترع أبدًا سعرًا ناقصًا. الـ schema: Menu مع MenuSection ضمن hasMenuSection وMenuItem ضمن hasMenuItem وOffer ضمن offers (price وpriceCurrency TRY) وsuitableForDiet حيثما ينطبق. 3. الحجز: كيف تتم الحجوزات، والهاتف وWhatsApp، ونموذج WhatsApp برسالة معبأة مسبقًا (التاريخ والوقت وعدد الأشخاص والحديقة أو الداخل)، و3 أسئلة شائعة (التأخر، المجموعات الكبيرة، الإلغاء). الـ schema: WebPage وFAQPage. 4. قصتنا والمنتجون: من يدير المكان، ومن أين تأتي المكونات، وجدول موسمي يوضح أي مكون يكون في القائمة في أي أشهر. الـ schema: AboutPage. 5. الموقع وساعات العمل: العنوان، وجدول ساعات العمل، ورابط "احصل على الاتجاهات"، وكيفية الوصول بالسيارة ومن وسط المدينة وبالمواصلات العامة، وملاحظة عن إمكانية الوصول. الـ schema: ContactPage. 6. صفحة 404. للبقاء سريعًا رغم الصور: صورة كبيرة واحدة في الشاشة الأولى وكل الصور الأخرى بتحميل lazy؛ صيغة WebP بجودة 60 إلى 65 وبحد أقصى ثماني صور في الصفحة؛ لا تحمّل مكتبة سلايدر للمعرض. بدون اختلاق: لا تكتب تقييمات أو درجات أو جوائز أو شهادات أو أعداد عملاء أو عبارات مثل "الأفضل" غير حقيقية. لا تضف إلى الـ schema أو النص ساعات عمل أو إحداثيات أو أسعارًا أو بريدًا إلكترونيًا لم أعطك إياها؛ اترك الحقل خارجًا وأدرجه كمعلومة ناقصة في التقرير. لا تستخدم الشرطات الطويلة ولا الشعارات الجاهزة، واجعل الفقرة الأولى في كل صفحة تجيب مباشرة عن سؤال تلك الصفحة. عمل SEO المشترك: كل صفحة تحصل على title فريد من 48 إلى 60 حرفًا، وdescription من 145 إلى 158 حرفًا، وH1 واحد، وcanonical ينتهي بشرطة مائلة. أضف عقدة WebPage خاصة بكل صفحة وBreadcrumbList، مرتبطتين بالرسم الأساسي عبر @id. في robots.txt اكتب Allow: / لكل من Googlebot وBingbot وOAI-SearchBot وChatGPT-User وGPTBot وClaude-SearchBot وClaude-User وClaudeBot وPerplexityBot وPerplexity-User وGoogle-Extended وApplebot-Extended وCCBot، واشرح القرار في تعليق ووضّح ما يجب تغييره إذا أردت حظر زواحف التدريب. يحتوي sitemap.xml على تواريخ lastmod حقيقية. يصف llms.txt النشاط بدقة في جملتين ويسرد NAP والصفحات المهمة مع الروابط. الإعداد التقني (المسار الافتراضي للحزمة غير مستخدم في هذا الموقع، للأسباب التالية): 1. جمّع Tailwind وتخلَّ عن CDN. تحمّل الحزمة Tailwind عبر Play CDN الذي يُجمَّع داخل المتصفح ويطبع تحذيرًا في وحدة التحكم ويخفض الأداء على الجوال. اكتب _kaynak/package.json باستخدام site_write_file، وثبّت باستخدام site_run_command("cd _kaynak && npm i -D tailwindcss@3 html-validate", background=true) وانتظر باستخدام site_command_status. في _kaynak/tailwind.config.js اجعل content هو "./*.html" و"./**/*.html" و"!./_kaynak/**" و"./_kaynak/chrome.mjs". انقل قواعد @font-face وأسطر @tailwind وحلقة التركيز ورابط التخطي وحارس overflow من app.css الخاص بالحزمة إلى _kaynak/site.css. اجعل المخرجات في assets/app.css لأن design-check.mjs يبحث عن الخطوط في هذا الملف، وأضف ?v=<hash المحتوى> إلى الرابط في كل صفحة حتى لا تقدّم ذاكرة الحافة (edge cache) الملف القديم أبدًا. 2. استضف الخطوط بنفسك. اقرأ رابط CSS لعائلات Fontshare التي اخترتها (api.fontshare.com/v2/css?f[]=...) باستخدام site_read_url، ونزّل ملفات woff2 الخاصة به باستخدام site_fetch إلى assets/fonts/، وعرّفها باستخدام @font-face مع font-display: swap. نفّذ preload لكل وزن مستخدم أعلى الطيّة باستخدام <link rel="preload" as="font" type="font/woff2" crossorigin>، بحد أقصى ثلاثة ملفات. إذا تخطيت هذا فإن تبديل الخط يزحزح التخطيط؛ في العرض التجريبي كان CLS على سطح المكتب 0.078 لهذا السبب وانخفض إلى 0 مع preload. 3. اجعل القائمة والتذييل HTML ثابتًا. مكوّنات <site-nav> و<site-footer> في الحزمة تعمل بـ JavaScript، ومعظم زواحف الذكاء الاصطناعي لا ترى القائمة ولا العنوان ولا رقم الهاتف أبدًا. أزل سكربتي chrome.js وmotion.js من كل الصفحات. في _kaynak/chrome.mjs اكتب دالتين تبنيان HTML الرأس والتذييل من assets/site.config.js؛ ابنِ قائمة الجوال بدون JavaScript باستخدام <details> و<summary>، وعلّم الصفحة الحالية بـ aria-current="page". اكتب build.mjs في جذر الموقع بحيث ينفّذ بالترتيب node seo-stamp.mjs، ثم يعيد ختم كل ما بين <!-- chrome:header:start --> و<!-- chrome:header:end --> (ونفس الشيء للتذييل) في كل الصفحات، ثم يجمّع Tailwind ويحدّث الـ hash في رابط CSS. بعد كل تعديل، شغّل فقط site_run_command("node build.mjs"). 4. الحركة عبر CSS فقط، وبلطف. ضع data-reveal على بطاقات الصور وابنِ تأثير الظهور بتحريك CSS مرتبط بالتمرير (animation-timeline: view()) باستخدام transform فقط؛ لا تحرّك opacity، لأن النص الذي يبدأ بشفافية صفر يختفي في المتصفحات بدون JavaScript ويفشل في فحص التباين في تدقيقات إمكانية الوصول. ضع القاعدة داخل @media (prefers-reduced-motion: no-preference) و@supports (animation-timeline: view()). لا تحمّل GSAP أو Lenis أو Swiper. 5. صغّر الصور. نزّل كل صورة باستخدام site_fetch في ملفات منفصلة باستخدام resize="480x" و"800x" و"1200x" و"1600x" وimage_format="webp" وجودة بين 60 و68. أعطِ كل <img> قيم srcset وsizes وwidth وheight تطابق النسبة الحقيقية؛ وإذا قصصت الصورة فأضف صنف نسبة مثل aspect-[4/3] مع object-cover، وإلا يتحرك التخطيط عند تحميل الصورة. صورة الشاشة الأولى تحصل على fetchpriority="high" وليست lazy؛ وكل الصور الأخرى تحصل على loading="lazy". نزّل صورة المشاركة بصيغة JPG بمقاس 1200x630 باستخدام site_fetch. 6. تفاصيل صغيرة تكلّف نقاطًا: أضف favicon بصيغة SVG باستخدام <link rel="icon"> (وإلا يطلب المتصفح /favicon.ico ويظهر الـ 404 كخطأ في وحدة التحكم وتنخفض درجة أفضل الممارسات). اكتب DOCTYPE بأحرف كبيرة، ولا تستخدم سمات style، ولا تترك مسافات زائدة في نهاية الأسطر. استخدم &nbsp; بدل المسافات في النص المرئي لروابط الهاتف (قاعدة tel-non-breaking في html-validate). يجب أن تكون الروابط في القائمة والتذييل ومسار التنقل والعناوين بارتفاع وعرض 44 بكسل على الأقل. لا تضمّن iframe من Google Maps؛ يجب ألا يجري الموقع أي طلبات خارجية، لذا اعرض العنوان ورابط "احصل على الاتجاهات". 7. يجب ألا يغادر أي طلب الموقع: الخطوط والسكربتات والأنماط والصور كلها على خادمك. لا يوجد معالج نماذج، لذا نموذج الاتصال هو نموذج method="get" يشير إلى https://wa.me/[رقم WhatsApp] مع textarea معبأ مسبقًا باسم "text"؛ ولا حاجة إلى JavaScript. البوابات (بهذا الترتيب؛ لا تعتبر العمل منتهيًا حتى تنجح كلها): 1. شغّل node build.mjs باستخدام site_run_command ثم node seo-check.mjs: 0 أخطاء، 0 تحذيرات. تحذير المحتوى المكرر يعني أن صفحتين ليستا مختلفتين بما يكفي؛ أعد كتابتهما. 2. node design-check.mjs: 0 أخطاء. إذا اخترت أسلوبًا بلا حركة، فاذكر تحذير "لا توجد حركة" كقرار متعمد مع السبب. 3. _kaynak/node_modules/.bin/html-validate على كل ملفات HTML: 0 أخطاء. ضع سطر _kaynak/ في ملف .htmlvalidateignore في جذر الموقع حتى لا تُفحص الاعتمادات. 4. شاهد كل صفحة باستخدام site_preview على view="mobile" وview="desktop" وأيضًا بعرض 360 و768. أصلح التمرير الأفقي والعناوين التي تفيض والأزرار الضيقة والنصوص غير المقروءة ثم شاهد مجددًا. 5. قس كل صفحة باستخدام core_web_vitals على strategy="mobile" وstrategy="desktop"، واحصل على درجات إمكانية الوصول وأفضل الممارسات وSEO باستخدام seo_audit. الهدف على الجوال هو 100 في إمكانية الوصول وأفضل الممارسات وSEO و95 على الأقل في الأداء؛ وعلى سطح المكتب 95 على الأقل في الأربعة. في الصفحة التي لا تحقق الهدف، شغّل core_web_vitals مع resources=true، وابحث عن عنصر LCP وأي صورة كبيرة الحجم، وأصلح ثم كرر seo_audit مع runs=2، لأن تشغيلًا مخبريًا واحدًا قد يتذبذب. 6. يجب ألا تحتوي طلبات الشبكة على أي عنوان خارج نطاق الموقع نفسه. بعد النشر: أرسل sitemap.xml باستخدام gsc_submit_sitemap وافحص الصفحة الرئيسية وأهم ثلاث صفحات باستخدام gsc_inspect_urls. لا توجد أداة تستطيع الضغط على "طلب الفهرسة"؛ اذكر ما يجب أن أطلبه يدويًا في Search Console. اختم بهذا التقرير: قائمة الصفحات مع درجات الجوال وسطح المكتب لكل صفحة في جدول (الأداء، إمكانية الوصول، أفضل الممارسات، SEO، LCP، CLS)، ونتيجة كل بوابة، والإصلاحات التي أجريتها، والمعلومات التي ما زلت تحتاجها مني. إذا لم يتحقق أحد الأهداف، فاذكر ذلك بوضوح بدلًا من اعتبار العمل منتهيًا.