أنشئ موقع مؤتمر بجدول زمني بتبويبات الأيام ونوافذ منبثقة للمتحدثين وعدّ تنازلي يبقى صحيحًا بدون JavaScript

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. على موقع [اسم الخادم] في خادم استضافة Opus Growth الخاص بي، أنشئ موقعًا ثابتًا وسريعًا للفعالية [اسم الحدث]. الفعالية: [ما هو، ولمن هو، وأي إصدار، في جملتين]. التاريخ والوقت: [البدء والانتهاء، المنطقة الزمنية]. المكان: [اسم المكان، العنوان الكامل، المواصلات، مواقف السيارات، تسهيلات ذوي الاحتياجات الخاصة]. الجدول: [لكل يوم، الوقت وعنوان الجلسة والمتحدث والقاعة]. المتحدثون: [الاسم، المسمى الوظيفي، المؤسسة، عنوان الجلسة، نبذة تعريفية، رابط الصورة والإذن بنشرها]. التذاكر: [ticket types, prices, whether VAT is included, valid dates, the link on the ticketing platform, refund and transfer terms]. المنظّم: [اسم المؤسسة]، [البريد الإلكتروني]، [الهاتف]. سياسة التسجيل والتصوير: [هل تُسجَّل المحاضرات وهل تُلتقط الصور]. النطاق: [النطاق]. الصفحات: الرئيسية (سطر للتاريخ والمكان، عدّاد تنازلي، مقدمة قصيرة، ما الذي سيحدث، أربعة من المتحدثين، ملخص عن المكان، الأسئلة الشائعة)، الجدول (/program/: تبويبات الأيام وملف تقويم .ics)، المتحدثون (/konusmacilar/)، التذاكر (/bilet/: أنواع التذاكر، ما الذي تشمله، الاسترداد، أسئلة شائعة عن الفاتورة)، المكان (/mekan/: العنوان، المواصلات، تسهيلات الوصول، الإقامة)، الخصوصية (/gizlilik/، بما في ذلك خيار التصوير والتسجيل) و404.html. الأسلوب: ملصق مؤتمر. إذا لم يُحدَّد [تفضيل اللون]، فاستخدم شريط hero بالأصفر الفسفوري، وخلفية كريمية، ونصًا أسود، وحدودًا سوداء بسماكة 2 بكسل. خط عريض وغليظ من Fontshare بأحرف كبيرة للعناوين (مثل Panchang 700) وخط sans مدوَّر للنص الأساسي (مثل Chillax 400 و500)؛ نفّذ preload لملفات الخطوط الثلاثة الخاصة بالشاشة الأولى. تحتاج الأحرف الكبيرة إلى `<html lang="tr">`، وإلا يتحول "i" إلى "I". إذا لم تكن لدى متحدث صورة أو لم يوافق على نشرها، فاستخدم شعارًا بالأحرف الأولى من اسمه؛ ولا تستخدم أبدًا صورة شخص آخر. قواعد التفاعل (دون أي مكتبة، وملف `ix.js` واحد مع defer، في صفحات الرئيسية والجدول والمتحدثين فقط): 1. يكون العدّاد التنازلي صحيحًا حتى مع تعطيل JS: يحتوي HTML على النص "Starts: <time datetime="2027-05-13T09:00:00+03:00">Thursday 13 May 2027, 09.00</time> (Turkey time)" داخل صندوق ثابت الارتفاع. يقرأ JS التواريخ بصيغة ISO مع فرق المنطقة الزمنية من data-start وdata-end باستخدام Date.parse ويكتب صناديق اليوم والساعة والدقيقة داخل الصندوق نفسه. يجب أن يكون للصندوق الارتفاع نفسه في الحالتين (min-height في CSS وارتفاع ثابت للوحدة)، وإلا تتحرك الشاشة الأولى. لا تعرض الثواني؛ حدّث كل دقيقة وتوقف أثناء إخفاء التبويب. تكون صناديق الأرقام بخاصية aria-hidden مع جملة واحدة مخفية بصريًا لقارئات الشاشة بجانبها، ودون منطقة حيّة (aria-live) لأنها ستُقرأ كل دقيقة. عند بدء الفعالية اكتب "happening now"، وبعد انتهائها اكتب "has ended"؛ ولا تعرض أبدًا أرقامًا سالبة لتاريخ مضى. 2. تبويبات الأيام: في HTML يكون كل يوم قسمًا منفصلًا بعنوانه الخاص (id="gun-1" و"gun-2") مع روابط إلى هذه الأقسام فوقها؛ ومع تعطيل JS تُعرض كل الأيام الواحد تلو الآخر. تحمل الحاوية المحيطة بالروابط role="group" وaria-label. يحوّلها JS إلى تبويبات ARIA (tablist وtab وtabpanel وaria-selected وtabindex ومفاتيح الأسهم وHome وEnd)، ويحدد اليوم الثاني عند فتح الصفحة بالرابط #gun-2، ويحدّث عنوان URL باستخدام history.replaceState عند تغيّر التبويب ليمكن مشاركة يوم معيّن كرابط. كل جلسة صف في قائمة مع `<time datetime>`: الوقت، والعنوان، ورابط إلى مرساة المتحدث في صفحة المتحدثين، والقاعة؛ وتكون للاستراحات خلفية منفصلة. 3. السيرة الذاتية للمتحدث: في HTML توجد داخل `<details>` في كل بطاقة، فتكون مقروءة مع تعطيل JS ولمحركات البحث. يعترض JS النقر على summary، وينشئ `<dialog>` واحدًا، وينسخ إليه الاسم والمسمى الوظيفي وعنوان المحاضرة والسيرة الذاتية باستخدام textContent، ويفتحه بـ showModal وينقل التركيز إلى زر "Close"؛ ويغلقه Esc والنقر على الخلفية، ويعود التركيز إلى summary. أضف aria-haspopup="dialog" إلى summary. معرّف كل بطاقة هو slug المتحدث، وإليه تشير روابط الجدول. 4. زر ثابت لدعوة شراء التذاكر: زر "Get tickets" في الترويسة على الحاسوب، وعلى الجوال شريط مثبّت أسفل الشاشة (التاريخ وأقل سعر و"Get tickets"). الشريط HTML ثابت في قالب التذييل ويكون position: fixed منذ أول رسم؛ فإضافته لاحقًا بـ JS تسبب إزاحة في التخطيط. على الجوال، أعطِ body حشوة سفلية تساوي ارتفاع الشريط حتى لا تختفي آخر الروابط تحته، وأضف `env(safe-area-inset-bottom)`، وأخفِ الشريط في صفحة التذاكر عبر class على body. 5. ملف التقويم: `/assets/[الحدث].ics` يُنزَّل من صفحة الجدول (VCALENDAR مع VEVENT واحد، وDTSTART وDTEND بتوقيت UTC، وSUMMARY وLOCATION وURL، ونهايات أسطر CRLF). أضف إلى الرابط الخاصية download. المخطط (Schema): الحدث Event نفسه (@id /#event) في صفحات الرئيسية والجدول والتذاكر: name وdescription وstartDate وendDate مع فرق المنطقة الزمنية، وeventStatus بالقيمة EventScheduled، وeventAttendanceMode بالقيمة OfflineEventAttendanceMode، وlocation على شكل Place مع PostalAddress كامل، وثلاث صور بنسب 1x1 و4x3 و16x9، وorganizer، والمتحدثين بصفة performer، ومصفوفة offers (لكل نوع تذكرة: name وprice وpriceCurrency "TRY" وavailability وvalidFrom وvalidThrough للحجز المبكر، وصفحة البيع بصفتها url). تشترط نتيجة Google المنسّقة للأحداث وجود location وstartDate ولا تدمج @id بين الصفحات، لذا اكتب Event كاملًا في كل صفحة تستخدمه؛ وفي صفحة الجدول أضف كل جلسة أيضًا بصفتها subEvent. إذا تأجلت الفعالية أو أُلغيت، فاضبط eventStatus على EventPostponed أو EventCancelled بدلًا من حذف الصفحة. Place في صفحة المكان وBreadcrumbList في كل صفحة داخلية. لا تكتب الرعاة أو أعداد الحضور أو "نفدت التذاكر" إلا إذا كانت صحيحة. الإعداد والمزالق المعروفة (كلٌّ منها كلّف نقاطًا في قياسات العرض التجريبي، فلا تتجاوز أيًّا منها): 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 يكتب classes. يحتوي `_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>`، ويوضع قبل سطر ورقة الأنماط؛ وإذا زادت عن ثلاثة ملفات فاستخدم أوزانًا أقل. في العرض التجريبي، أدى وزن واحد للنص الأساسي دون preload إلى رفع LCP على الجوال إلى 2.6 ثانية وخفض Performance إلى 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. أبقِ اسم النشاط والعنوان والهاتف نصًا عاديًا في التذييل، واجعل روابط التذييل وفتات التنقل بارتفاع 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;`، بما فيها المسافة بعد بادئة مثل "Call:&nbsp;0212..."؛ لا تستخدم style=""؛ أعطِ كل زر type؛ ضع aria-label على المعالم (landmarks) أو النماذج أو العناصر التفاعلية فقط (على ul أو div بلا role كان خطأ)؛ لا تمنح معلمين الاسم نفسه أبدًا؛ ولا تترك مسافات زائدة في نهايات الأسطر. 8. لا تتخطَّ مستويات العناوين: في صفحة قائمة، أدت عناوين البطاقات بصيغة h3 مباشرة بعد h1 إلى خفض Accessibility إلى 98. عند إعادة استخدام بطاقة، اضبط مستوى عنوانها لكل صفحة (h2 في صفحة قائمة، وh3 داخل قسم h2). 9. سمِّ خاصية الحركة data-reveal (لا يتعرف design-check على الحركة إلا بهذا الاسم). يمنح JS الحالة الابتدائية المخفية فقط للكتل الموجودة أسفل الشاشة عند فتح الصفحة، ولا يخفي أبدًا محتوى الشاشة الأولى؛ استخدم transform لأن التلاشي بـ opacity يخفض تدقيق التباين. ضع الخاصية على الكتلة التي تحيط بالعنوان ووصفه، لا على العنوان وحده؛ ففي العرض التجريبي انزلق عنوان في وضع الانتظار فوق الفقرة التي تحته. مع prefers-reduced-motion: reduce لا يُخفى شيء وتُعطَّل الحركات. SEO وAEO وGEO: 1. استخدم عناوين URL بنمط المجلدات مع شرطة مائلة في النهاية. املأ كتلة seo في site.config.js ونفّذ `node seo-stamp.mjs`. اكتب مخطط (schema) كل صفحة في كتل `<script type="application/ld+json">` منفصلة مرتبطة بالرسم الأساسي عبر @id. لا تضع BreadcrumbList داخل @graph؛ أبقِه في كتلته الخاصة، فهذه هي الطريقة الوحيدة التي يراه بها seo-check. 2. العناوين 60 حرفًا كحد أقصى (يعدّ seo-check أي عنوان أقل من 25 أو أكثر من 65 خطأ)، والأوصاف من 130 إلى 158 حرفًا، وh1 واحد لكل صفحة، و150 كلمة على الأقل من المحتوى الرئيسي في كل صفحة. تميل صفحات الاتصال والخصوصية والقوائم إلى القصر؛ أضف معلومات خاصة بالصفحة لا حشوًا. 3. تجيب الفقرة الأولى في كل صفحة مباشرة عن سؤال الصفحة. اكتب أسئلة شائعة خاصة بكل صفحة باستخدام `<details>` ووسمها بـ FAQPage. أظهر الناشر (publisher) وتاريخ "Last updated" داخل عنصر `<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. لا اختلاق: لا تكتب مراجعات أو تقييمات أو جوائز أو أعداد عملاء أو شهادات أو ساعات عمل أو إحداثيات أو أسعارًا دون أن تسألني. اترك أي حقل لا تعرفه خارج المخطط (schema) تمامًا. البوابات (بالترتيب؛ لا تقل "تم" حتى تنجح جميعها): 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)؛ فإذا غاب محتوى في تلك اللقطة، فالحالة الثابتة معطوبة. في لقطات الصفحة الكاملة قد تظهر العناصر الثابتة مثل الشريط المثبّت في منتصف الصفحة وقد تكون الصور الكسولة في الأسفل فارغة؛ لا تحتسب ذلك أخطاء، لكن تحقق من مساراتها. 3. نفّذ core_web_vitals لكل صفحة مع strategy="mobile" وstrategy="desktop". معيار القبول: على الجوال Performance لا يقل عن 95 (الهدف من 99 إلى 100) وAccessibility وBest Practices وSEO بقيمة 100؛ وعلى الحاسوب كل الأربعة بقيمة 100. للصفحة التي لا تحقق ذلك، استخدم resources=true لإيجاد الملف الذي يعطّلها، وأصلحه ثم قِس مجددًا. ثم نفّذ seo_audit على الصفحة الرئيسية مع strategy="mobile" وruns=2. يجب ألا يبقى أي عنوان خارج نطاقك الخاص في قائمة طلبات الشبكة. 4. لا تمرير أفقي عند عرض 360 و390 و768 و1440 بكسل، وأهداف اللمس 44 بكسل على الأقل، ولا أخطاء في وحدة التحكم (console). فحص التفاعل: لا يستطيع site_preview عرض الوقت أو التبويبات أو الحوارات. أخبرني كيف أتحقق من أن العدّاد التنازلي يعرض التاريخ الصحيح مع تعطيل JavaScript ويتحول إلى صناديق بالارتفاع نفسه مع تفعيل JS، وأن /program/#gun-2 يفتح اليوم الثاني وأن التبويبات تتبدل بمفاتيح الأسهم، وأن السيرة الذاتية للمتحدث تُفتح في نافذة منبثقة ويعود التركيز بعد Esc، وأن شريط التذاكر على الهاتف لا يغطي آخر روابط الصفحة، وأن ملف التقويم يصل إلى تقويم الهاتف في الوقت الصحيح، وأن اختبار Rich Results Test من Google يعرض Event دون أخطاء. بعد النشر: عاين القاعدة `/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)، ونتيجة كل بوابة، وقائمة الإصلاحات التي طبّقتها.