أنشئ موقعًا عقاريًا بشبكة عقارات قابلة للتصفية وصفحات إعلانات يتم توليدها من ملف JSON واحد

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. على موقع [اسم الخادم] في خادم استضافة Opus Growth الخاص بي، ابنِ موقع عقارات ثابتًا وسريعًا لوكالتي العقارية [اسم الوكالة] يُنشئ كل إعلان عقاري من ملف JSON واحد. الوكالة: [المدينة، الأحياء التي أعمل فيها، بيع أو إيجار]. رقم رخصتي لمزاولة التجارة العقارية (Taşınmaz Ticareti Yetki Belgesi): [رقم الترخيص]. الإعلانات: [for each listing the listing no, title, district, neighbourhood, rooms, gross and net square metres, floor, year built, heating, service charge, title deed status, price, listing date, a two-paragraph description, four key features, photo links and the location detail the owner has agreed to show]. للتواصل: [الهاتف]، [رقم WhatsApp]، [البريد الإلكتروني]، [عنوان المكتب]. النطاق: [النطاق]. الصفحات: الرئيسية (نموذج بحث حسب الحي والغرف والحد الأقصى للسعر، إعلانات مميزة، دليل الأحياء، أسئلة شائعة)، الإعلانات (/ilanlar/: عوامل التصفية، عدد النتائج، شبكة الإعلانات، أسئلة شائعة عن الإعلانات)، صفحة لكل إعلان (/ilanlar/[الحي-المنطقة-للبيع-الغرف-النوع]/)، من نحن (/hakkimizda/: خطوات الشراء والرخصة)، اتصل بنا (/iletisim/، بلا نموذج)، الخصوصية (/gizlilik/) و404.html. الأسلوب: عقارات تحريرية دافئة. خلفية رملية فاتحة، ونص بلون الحبر، ولون تمييز داكن واحد مثل الأخضر الصنوبري (نص أبيض على الأزرار)، وخط Serif من Fontshare للعناوين والأسعار (مثل Sentient 500) وخط Sans للنص الأساسي (مثل Ranade 400). بطاقات إعلانات بصورة بنسبة 4:3 وسعر كبير بخط Serif وعلامات صغيرة للغرف والمساحة بالمتر المربع والطابق. تتكبّر صورة البطاقة قليلًا عند تمرير المؤشر عليها. لا تُحمَّل أي مكتبة خرائط ولا إطار iframe من Google Maps ولا أي مكتبة معرض صور أو سلايدر. مصدر واحد وتوليد تلقائي: 1. تُحفظ كل بيانات الإعلانات في `assets/ilanlar.json`. اكتب ملف `ilan-build.mjs` صغيرًا ونفّذه عبر site_run_command بالأمر `node ilan-build.mjs`: (أ) يُنشئ `ilanlar/[slug]/index.html` لكل إعلان من القالب `_src/ilan.tpl`، (ب) يُدرج كل البطاقات بين `<!-- ilanlar:start --><!-- ilanlar:end -->` في `ilanlar/index.html` والمميزة بين `<!-- one-cikan:start --><!-- one-cikan:end -->` في الصفحة الرئيسية، (ج) يكتب مخطط ItemList الخاص بصفحة الإعلانات بين `<!-- ilan-ld:start --><!-- ilan-ld:end -->`. استخدم عناصر نائبة مثل `[[السعر]]` في القالب، وليس `{{...}}`. الترتيب: ilan-build، ثم chrome-stamp، ثم بناء Tailwind، ثم seo-stamp. يجب أن تعني إضافة إعلان أو إزالة إعلان تم بيعه تعديل ملف JSON ثم تنفيذ هذا الترتيب مجددًا؛ وعند حذف صفحة إعلان مُباع، أعد توجيه عنوان URL الخاص به إلى /ilanlar/ عبر site_redirects. 2. البطاقات HTML ثابت يُولَّد على الخادم، فيظهر كل إعلان مع تعطيل JS ولمحركات البحث. تحمل كل بطاقة السمات data-ilce وdata-oda وdata-fiyat وdata-m2 وdata-tarih لأغراض التصفية؛ ويجب ألا تتعارض أسماء فئات المكونات مع أدوات Tailwind (استخدم بادئة مثل lcard). قواعد التصفية: 1. التصفية نموذج حقيقي بالسمتين action="/ilanlar/" وmethod="get": قوائم select بعناوين للحي والغرف والحد الأدنى للسعر والحد الأقصى للسعر وترتيب العرض، مع زر "تصفية". عند تعطيل JS يملأ النموذج عنوان URL لكن القائمة لا تتغير؛ اذكر ذلك في جملة واحدة داخل `<noscript>`. 2. يُحمَّل `ilan-filtre.js` بالسمة defer في /ilanlar/ فقط: عند التحميل يقرأ ?ilce=&oda=&min=&max=&sira= باستخدام URLSearchParams (ويقبل القيم الموجودة في قوائم select فقط)، ويُخفي البطاقات ويُظهرها بالسمة hidden، ويعيد ترتيب DOM للفرز، ويحدّث عنوان URL بـ history.replaceState عند كل تغيير. يمكن مشاركة القائمة المصفّاة كرابط، ولا يمتلئ سجل زر الرجوع. 3. أعلن عدد النتائج في جملة بالسمة role="status" ("6 إعلانات، 2 منها تطابق عوامل التصفية"). وعند عدم وجود نتائج اعرض رسالة حالة فارغة ورابط "مسح عوامل التصفية". يقع مربع التصفية في الشاشة الأولى، لذا يجب ألا يضيف JS أو يخفي أي شيء هناك؛ تتغير البطاقات فقط، وإلا حدث انزياح في التخطيط (CLS). 4. في صفحة الإعلانات، لا تكون صورة البطاقة الأولى lazy وتكون البقية كذلك؛ وعناوين البطاقات h2 في هذه الصفحة وh3 تحت العنوان h2 "إعلانات مميزة" في الصفحة الرئيسية. صفحة الإعلان: 1. تلخّص الفقرة الأولى الإعلان في جملة واحدة: الحي والمنطقة وعدد الغرف والمساحة بالمتر المربع وسنة البناء والسعر. ثم شريط الصور: عناصر figure تُمرَّر أفقيًا بـ CSS scroll-snap دون JS، وتحتها صور مصغّرة هي روابط داخل الصفحة إلى كل صورة. يعترض `galeri.js` (في صفحات الإعلانات فقط) النقرات على الصور المصغّرة، ويمرّر الشريط فقط دون أن تقفز الصفحة، ويضع aria-current="true" على الصورة المصغّرة للصورة الظاهرة عبر IntersectionObserver. الصورة الأولى هي عنصر LCP في الصفحة: fetchpriority="high" وليست lazy. 2. مربع سعر ثابت (sticky) في العمود الأيمن: السعر، وقائمة حقائق (dl: السعر، رقم الإعلان، الغرف، المساحة الإجمالية والصافية بالمتر المربع، الطابق، سنة البناء، التدفئة، رسوم الخدمة، سند الملكية، تاريخ الإعلان)، ورابط WhatsApp برسالة مُعبّأة مسبقًا تتضمن رقم الإعلان، والهاتف ورقم الرخصة. تتوقع القواعد التركية وجود رقم الرخصة في إعلانات العقارات؛ ضعه في التذييل أيضًا. 3. الموقع: لا تنشر العنوان الكامل. استخدم صورة خريطة ثابتة محلية تُظهر الموقع التقريبي بالمستوى الذي وافق عليه المالك (غالبًا الحي) واذكر تحتها أن العنوان الكامل يُعطى عند المعاينة. إذا بنيت الخريطة من مربعات OpenStreetMap فاتبع سياسة استخدام المربعات (مرة واحدة لكل إعلان، وعدد قليل من المربعات، دون تنزيلات جماعية): اجلب المربعات بـ site_fetch إلى `_src/harita/`، وثبّت sharp عبر site_run_command مع background=true (`npm i -D sharp`)، ثم استخدم سكربتًا صغيرًا لدمج المربعات وقص الصورة حول المركز ووضع علامة على المنطقة التقريبية بدائرة نصف شفافة وحفظ ملفات WebP بعرض 480 و768 بكسل. إذا تجاوز القص منطقة المربعات ظهر شريط أسود عند الحافة؛ فاجلب 5x3 مربعات على الأقل حول المركز. اكتب إشارة "© OpenStreetMap contributors" داخل الصورة وكرابط تحتها أيضًا. تُحمَّل الخريطة بـ lazy ولا يدخل أي سكربت خريطة خارجي إلى الصفحة. المخطط: في صفحة الإعلان استخدم RealEstateListing (url وname وdescription وdatePosted ومصفوفة صور وoffers مع Offer: price وpriceCurrency بالقيمة "TRY" وavailability و@id للنشاط التجاري كـ seller) مع Apartment أو SingleFamilyResidence كـ mainEntity (numberOfRooms وnumberOfBedrooms وnumberOfBathroomsTotal وfloorSize كـ QuantitativeValue مع unitCode "MTK" وyearBuilt، وaddress يتضمن المنطقة والمحافظة والبلد فقط). لا تعرض Google نتيجة مميزة مخصصة لهذه الأنواع؛ والهدف أن تقرأ محركات البحث والذكاء الاصطناعي السعر وعدد الغرف والموقع قراءة صحيحة. استخدم CollectionPage وItemList في صفحة الإعلانات، وbusinessType "RealEstateAgent" في seo-stamp للوكالة، وBreadcrumbList في كل صفحة داخلية. خذ السعر والمساحة ورسوم الخدمة وتفاصيل السند من إفادة المالك الخطية فقط؛ واترك أي معلومة لا تعرفها خارج ملف JSON وخارج المخطط على السواء. الإعداد والمشكلات المعروفة (كلٌّ منها كلّف نقاطًا في قياسات العرض التجريبي، فلا تتجاوز أيًّا منها): 1. إذا كان هناك موقع يعمل بالفعل على الخادم فأخبرني أولًا، لأن الإعداد يستبدل index.html ومجلد assets. اعرض معاينة scaffold_site مع confirm=false، ولا تستدعه مع confirm=true إلا بعد موافقتي. ثم اقرأ site_design_guide وsite_seo_guide. قبل كتابة الشيفرة، ضع اتجاه التصميم (الخطوط والألوان والشبكة والعنصر المميز ولغة الحركة والمكتبات التي لن تُحمَّل) في ملف ART.md قصير خارج assets وأرِني إياه. 2. قم بتجميع Tailwind ولا تحمّله من CDN. ثبّته عبر site_run_command مع background=true (`npm i -D tailwindcss@3`) وتابع بـ site_command_status. يجب أن تغطي مسارات content في `tailwind.config.js` كل ملفات HTML وقوالب `_src` وأي ملف 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. استضف الخطوط بنفسك. اقرأ CSS لعائلة Fontshare التي اخترتها، ونزّل ملف woff2 لكل وزن على حدة بـ site_fetch إلى `assets/fonts/`، واكتب قواعد @font-face مع `font-display: swap` في `assets/app.css`، وهو المكان الذي يبحث فيه design-check عن خط مخصص. تحقق من اسم font-family في ملف CSS الذي نزّلته وتأكد من أن العائلة تحتوي على الحروف التركية ı وİ وş وğ (خط Tanker لا يحتوي على ı). نفّذ preload لـ كل وزن مستخدم في الشاشة الأولى بالوسم `<link rel="preload" as="font" type="font/woff2" crossorigin>` ويوضع قبل سطر ورقة الأنماط؛ وإذا زاد العدد على ثلاثة ملفات فاستخدم أوزانًا أقل. في العرض التجريبي دفع وزن واحد للنص الأساسي لم يُحمَّل مسبقًا بـ LCP على الجوال إلى 2.6 ثانية وبالأداء إلى 97. تفتقر معظم خطوط Fontshare إلى رمز ₺، لذا اكتب الأسعار بـ "TL". 4. اجعل القائمة والتذييل HTML ثابتًا. لا تحمّل chrome.js ولا motion.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" إلى الرابط النشط. استخدم عناصر نائبة مثل `[[NAV]]` بدل `{{...}}` ولا تعطِ القوالب الامتداد .html، وإلا عامل design-check وseo-check القوالب كصفحات غير مكتملة. ابنِ قائمة الجوال بوسم `<details>` دون JS. أبقِ اسم النشاط والعنوان والهاتف نصًا عاديًا في التذييل، واجعل ارتفاع روابط التذييل ومسار التنقل (breadcrumb) 44 بكسل على الأقل. 5. حوّل الصور أثناء جلبها بـ site_fetch: اكتب الصورة نفسها في ملفات منفصلة مع resize="480x" و"800x" و"1200x" وimage_format="webp" وquality=60 (لا يقصّ site_fetch الصور، لذا اطلب المصدر بالنسبة التي تحتاجها). أعطِ كل `<img>` السمات srcset وsizes وwidth وheight المطابقة للنسبة الفعلية. تحصل الصورة التي هي عنصر LCP في الصفحة على fetchpriority="high" وليست lazy؛ وكل صورة أخرى تحصل على loading="lazy" decoding="async". إذا ملأت صورة الشاشة الأولى على الجوال فقدّم للجوال قصًّا أصغر عبر `<picture>`. 6. أضف `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` إلى كل صفحة وأنشئ apple-touch-icon بحجم 180 بكسل من الشعار بـ site_fetch مع resize="180x180". بدون رابط favicon يطلب المتصفح /favicon.ico ويسجّل خطأ 404 وتنخفض الممارسات الفضلى (Best Practices) إلى 96. 7. قواعد مدقّق HTML: ابدأ كل مستند بـ `<!DOCTYPE html>` بأحرف كبيرة؛ يجب أن تكون كل مسافة في النص المرئي لرابط tel: هي `&nbsp;`، بما فيها المسافة بعد بادئة مثل "اتصل:&nbsp;0212..."؛ لا تستخدم style=""؛ أعطِ كل زر type؛ ضع aria-label على المعالم (landmarks) أو النماذج أو العناصر التفاعلية فقط (على ul أو div بلا role كان خطأ)؛ لا تعطِ معلمين الاسم نفسه؛ ولا تترك مسافات زائدة في نهاية الأسطر. 8. لا تتخطَّ مستويات العناوين: في صفحة قائمة، أدّت عناوين البطاقات بصيغة h3 مباشرةً بعد h1 إلى خفض إمكانية الوصول إلى 98. عند إعادة استخدام بطاقة اضبط مستوى العنوان لكل صفحة (h2 في صفحة قائمة، وh3 داخل قسم h2). 9. سمِّ سمة الحركة data-reveal (لا يتعرف design-check على الحركة إلا بهذا الاسم). يعطي JS الحالة المخفية الابتدائية فقط للكتل الواقعة أسفل الشاشة عند فتح الصفحة، ولا يُخفي أبدًا محتوى الشاشة الأولى؛ واستخدم transform، لأن التلاشي بـ opacity يخفض فحص التباين. ضع السمة على الكتلة التي تغلّف العنوان ووصفه، وليس على العنوان وحده؛ ففي العرض التجريبي انزلق عنوان في وضع الانتظار فوق الفقرة التي تحته. مع prefers-reduced-motion: reduce لا يُخفى شيء وتتعطل الرسوم المتحركة. السيو وAEO وGEO: 1. استخدم عناوين URL بنمط المجلدات مع شرطة مائلة في النهاية. املأ كتلة seo في site.config.js ونفّذ `node seo-stamp.mjs`. اكتب المخطط الخاص بكل صفحة في كتل `<script type="application/ld+json">` منفصلة مرتبطة بالمخطط الأساسي عبر @id. لا تُدخل BreadcrumbList داخل @graph؛ أبقِه في كتلته الخاصة، وهي الطريقة الوحيدة التي يراه بها seo-check. 2. العناوين بحد أقصى 60 حرفًا (يعدّ seo-check أي عنوان أقل من 25 أو أكثر من 65 خطأً)، والأوصاف من 130 إلى 158 حرفًا، وh1 واحد في كل صفحة، و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)؛ فإذا غاب محتوى في هذه اللقطة فالحالة الثابتة معطوبة. في لقطات الصفحة الكاملة قد تظهر عناصر ثابتة مثل شريط sticky في منتصف الصفحة وقد تبدو الصور lazy الأبعد فارغة؛ لا تحسب ذلك أخطاء، لكن تحقق من مساراتها. 3. نفّذ core_web_vitals لكل صفحة مع strategy="mobile" وstrategy="desktop". معيار القبول: على الجوال أداء 95 على الأقل (والهدف من 99 إلى 100) وإمكانية الوصول والممارسات الفضلى والسيو 100؛ وعلى سطح المكتب جميعها 100. للصفحة التي لا تحقق ذلك استخدم resources=true لإيجاد الملف الذي يؤخرها، وأصلحه ثم قِس مجددًا. بعد ذلك نفّذ seo_audit على الصفحة الرئيسية مع strategy="mobile" وruns=2. يجب ألا يبقى أي عنوان خارج نطاقك في قائمة طلبات الشبكة. 4. لا تمرير أفقي عند عرض 360 و390 و768 و1440 بكسل، وأهداف اللمس 44 بكسل على الأقل، ولا أخطاء في وحدة التحكم (console). فحص التفاعل: لا يستطيع site_preview تشغيل التصفية. أخبرني كيف أتحقق من أن فتح /ilanlar/?ilce=[الحي]&oda=3%2B1 يعرض الإعلانات المطابقة فقط ويملأ النموذج، وأن تغيير أي select يحدّث شريط العنوان، وأن رسالة الحالة الفارغة تظهر عند عدم وجود تطابق، وأن كل الإعلانات تظهر مع تعطيل 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)، ونتيجة كل بوابة، وقائمة الإصلاحات التي طبّقتها.