Estatic

إستاتيك – قالب HTML لسوق العقارات وعرض الوحدات السكنية

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

إستاتيك واجهة أمامية متكاملة متعددة الصفحات لمكاتب العقارات وشركات التأجير والمطورين والمنصات العقارية. يضم ثماني عشرة صفحة جاهزة — الرئيسية، وفهرس العروض مع شريط تصفية ثابت، وسجل كامل للعقار، وقائمة المستشارين وملف المستشار، والخدمات، والأسعار، ومن نحن، والمدونة والمقال، وتواصل معنا، والأسئلة الشائعة، ونموذج إضافة عقار، وتسجيل الدخول، وإنشاء حساب، وصفحة 404، والشروط والخصوصية — وكلها تشترك في ترويسة وتذييل ونظام تصميم واحد. وقد أُعيد ترتيب الصفحة الرئيسية لا مجرد تغيير مظهرها: فبعد لوحة البحث مباشرة تأتي الالتزامات الأربعة التي تحدّد ما إذا كان أحد سيثق بالعرض أصلاً، ثم أحدث المنازل على شريط انزلاقي، فالمدن، فالمختارات الأربع، فآراء الملّاك، فالخطوات الثلاث، فالمستشارون، فالأرقام المدقّقة، فالشركاء، فالمدونة، ثم الدعوة الختامية. وأُعيدت كتابة عنوان كل قسم معها. كل نص في كل صفحة مترجم إلى الإنجليزية والعربية والصينية من قاموس واحد يضم 553 مفتاحاً. والإنجليزية مكتوبة داخل الصفحة نفسها، فتبقى كل صفحة كاملة وقابلة للفهرسة حتى مع تعطيل جافاسكربت؛ والتبديل فوري ولا يحتاج إعادة تحميل، ويُحفظ الاختيار بين الزيارات أو يُفرض عبر معامل ?lang=، وحتى النصوص التي يقرأها قارئ الشاشة مترجمة. والعربية انعكاس حقيقي لا مجرد محاذاة إلى اليمين — إذ كُتب ملف الأنماط بالكامل على الخصائص المنطقية في CSS دون ملف RTL منفصل، فتنعكس الهوامش والحشوات والحدود والمواضع والمحاذاة تلقائياً، وتُعكس الأسهم وأزرار الشرائح ذات الاتجاه لتتوافق معها، وتُعزل الأسعار وأرقام الهواتف والتواريخ والمساحات ثنائياً فتبقى علامة «+» في أولها و«م²» في آخرها في موضعها الصحيح داخل الجملة العربية. وتنتقل العربية إلى خط IBM Plex Sans Arabic والصينية إلى Noto Sans SC، لكل منهما ارتفاع سطر خاص ودون تباعد لاتيني، بينما تستخدم النصوص اللاتينية خط Sora للعناوين وManrope للمتن. والتصميم يبدأ من الجوال بالمعنى الدقيق: أحجام الخطوط معرَّفة بمقاس الهاتف وتكبر عبر clamp() وخطوات min-width فقط، وكل استعلام وسائط يضيف إمكانات ولا يسحبها، وقد جرى فحص الصفحات الثماني عشرة آلياً ضد التمدد الأفقي عند عرض 390 و1440 بكسل باللغات الثلاث. وهناك سلوكان مكتوبان خصيصاً لا موروثان: محرك الترجمة يكتب داخل العُقد النصية للعنصر نفسه لا في محتواه الكامل، فتبقى الأيقونات داخل الأزرار وعناصر القائمة المترجمة سليمة بعد تغيير اللغة؛ وأعمدة التصفية والتواصل ثابتة فعلياً بخاصية position:sticky، وقد جرى التحقق منها بتمرير كل صفحة وقياس موضع اللوحة لا بالنظر فقط. ولا توجد خطوة بناء ولا إطار عمل ولا jQuery — ملف أنماط واحد من 2950 سطراً، وملف سلوك من 194 سطراً، وقاموس واحد مولَّد. والشعار نص حي، أما الأيقونة المفضلة ومجموعة الأيقونات التسع والخمسين ومخطط طابق العقار فكلها SVG مرسومة يدوياً، والصور الثلاث والخمسون جميعها لقطات عقارية ومدنية وشخصية جديدة مقصوصة على المقاس الذي يتوقعه التخطيط بدقة.