برومبتات تعديل التصميم: أصلح وحسّن موقعك بجملة واحدة

اجعل الموقع كله باتجاه RTL كامل: أضف dir="rtl" و lang="ar" على عنصر html، واستبدل margin-left و padding-right وأمثالها بالخصائص المنطقية margin-inline و padding-inline، واجعل المحاذاة text-align: start. تأكد أن القائمة والشعار والأزرار والجداول والنماذج تبدأ من اليمين في كل الصفحات.

استخدم خط IBM Plex Sans Arabic للنصوص وخط El Messiri للعناوين من Google Fonts مع font-display: swap، واجعل ارتفاع السطر للنص العربي 1.7، وعرّف مقياسًا ثابتًا لأحجام العناوين والنص والتعليقات، وطبّقه على كل الصفحات.

أضف وضعًا داكنًا بزر تبديل في الشريط العلوي يحفظ اختيار الزائر ويتبع إعداد الجهاز في أول زيارة. عرّف الألوان كمتغيرات CSS لكل وضع، وتأكد أن النصوص والأزرار والحقول والصور والرسوم البيانية مقروءة بتباين كافٍ في الوضعين.

أصلح مشاكل اتجاه النص المختلط: غلّف أرقام الجوال والأسعار والتواريخ والكلمات الإنجليزية داخل النص العربي بعنصر bdi أو dir="ltr" المناسب، واجعل حقول الجوال والبريد باتجاه LTR، وتأكد أن الأقواس وعلامة % ورمز ر.س تظهر في مكانها الصحيح في كل الصفحات.

اعكس الأيقونات الاتجاهية في الواجهة العربية: أسهم التالي والسابق، أسهم القوائم الجانبية، أزرار السلايدر، ومؤشرات الخطوات، باستخدام transform: scaleX(-1) عند dir="rtl". لا تعكس الأيقونات غير الاتجاهية مثل البحث والسلة والساعة وعلامة الصح.

راجع التصميم للجوال أولًا على عرض 390 بكسل: اعتمد مقياس مسافات من مضاعفات 8، واجعل هوامش الأقسام الجانبية 16 بكسل، وارتفاع الأزرار والحقول 48 بكسل على الأقل، وأزل أي تمرير أفقي، وحوّل الجداول العريضة إلى بطاقات على الشاشات الصغيرة.

أضف زر واتساب عائمًا في الزاوية السفلية اليسرى (لأن الصفحة RTL) يفتح محادثة مع الرقم 966501234567 برسالة جاهزة فيها اسم الصفحة الحالية، بأيقونة SVG بحجم 56 بكسل، ولا يغطي زر الحجز أو الشريط السفلي على الجوال.

أضف على الجوال فقط شريطًا ثابتًا أسفل الشاشة فيه زر الإجراء الرئيسي (مثل «احجز الآن») والسعر الابتدائي، يظهر بعد تجاوز قسم الواجهة، مع مراعاة المساحة الآمنة أسفل شاشة iPhone، وهامش سفلي للصفحة حتى لا يغطي المحتوى الأخير.

اعرض كل الأسعار في الموقع شاملة ضريبة القيمة المضافة 15% مع عبارة صغيرة «شامل الضريبة»، وفي السلة وصفحة الملخص اعرض: المجموع قبل الضريبة، الضريبة 15%، والإجمالي، بتنسيق مثل «1,150 ر.س» وأرقام لاتينية، واحسب الضريبة في مكان واحد في الكود.

راجع تباين الألوان في كل الصفحات ليوافق مستوى AA على الأقل (4.5:1 للنص العادي)، وعدّل الألوان الضعيفة دون تغيير طابع الهوية، وأضف حالة focus واضحة لكل زر ورابط وحقل، ونصًا بديلًا وصفيًا بالعربية لكل صورة، وتسمية لكل حقل في النماذج.

سرّع الصور في الموقع: حوّلها إلى WebP بجودة 80، وأضف أحجامًا متعددة عبر srcset، واجعل الصور أسفل الواجهة بتحميل كسول loading="lazy"، وحدد width و height أو aspect-ratio لكل صورة حتى لا تقفز الصفحة، وأبقِ صورة الواجهة الرئيسية بتحميل مبكر.

أضف لكل صفحة عنوان title عربيًا فريدًا لا يتجاوز 60 حرفًا يبدأ بالكلمة التي يبحث عنها العميل مع اسم المدينة، ووصف meta بين 120 و155 حرفًا، وعنوان H1 واحدًا فقط، ووسوم Open Graph لمعاينة الرابط عند مشاركته في واتساب، و lang="ar"، وملف sitemap.xml.

اعرض التواريخ في الموقع بالتقويمين معًا مثل «الأحد 14 فبراير 2027 (7 شعبان 1448هـ)» باستخدام Intl.DateTimeFormat بتقويم islamic-umalqura، وأضف في التقويم والحجز سطرًا صغيرًا بالتاريخ الهجري تحت كل يوم، مع أرقام لاتينية.

تحقق من حقول الجوال في كل النماذج لتقبل الرقم السعودي بصيغة 05xxxxxxxx (10 أرقام تبدأ بـ 05)، واقبل أيضًا +9665 و 9665 وحوّلها تلقائيًا إلى صيغة موحدة عند الحفظ، واعرض رسالة خطأ عربية واضحة تحت الحقل، واجعل الحقل inputmode="tel" باتجاه LTR، وطبّق نفس التحقق في الخادم.