Mark

مارك – قالب HTML لمتجر الإلكترونيات والأجهزة الذكية

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

مارك واجهة متجر متكاملة متعددة الصفحات لتجار الإلكترونيات ومحال الأجهزة الذكية والمتاجر أحادية العلامة. يضم ثلاثاً وعشرين صفحة جاهزة — الرئيسية، والكتالوج، وكتالوج مُصفّى بشريط تصفية ثابت، وسجل كامل للمنتج مع معرض صور وجدول مواصفات وتقييمات، والسلة، وإتمام الشراء، والمفضلة، وجدول مقارنة من أربعة أعمدة، وتتبع الطلب، ولوحة تحكم الحساب، وتسجيل الدخول، وإنشاء حساب، واستعادة كلمة المرور، ومن نحن، وتواصل معنا، ومركز المساعدة، والشحن والإرجاع، والمدونة والمقال، والخصوصية، والشروط، وقريباً، وصفحة 404 — وكلها تشترك في ترويسة وتذييل ودرج سلة ونافذة بحث ونافذة عرض سريع واحدة. وقد أُعيد ترتيب الصفحة الرئيسية لا مجرد تغيير مظهرها: فالوعود الأربعة الخاصة بالتوصيل والضمان انتقلت إلى ما تحت القسم الرئيسي مباشرة حيث تجيب عن أول سؤال يخطر ببال المتسوق فعلاً، والمنتجات الجديدة تسبق الكتالوج العميق، ولافتات العروض تكسر جدار المنتجات، والتقييمات نزلت إلى النهاية حيث يصبح هناك ما يستحق التقييم. وأُعيدت كتابة عنوان كل قسم معها، ويحمل كتالوج من أربعة وعشرين منتجاً واثنا عشر قسماً وستة مقالات نصوصاً حقيقية لا نصوصاً وهمية. كل نص في كل صفحة مترجم إلى الإنجليزية والعربية والصينية من قاموس واحد يضم 393 مفتاحاً يُولَّد أثناء البناء، فلا يمكن أن ينحرف نص عن مقابله في القاموس. والإنجليزية مكتوبة داخل صفحة HTML نفسها، ما يبقي كل صفحة كاملة وقابلة للفهرسة حتى مع تعطيل جافاسكربت. والعربية انعكاس حقيقي لا مجرد محاذاة إلى اليمين: إذ يُحوَّل ملف أنماط القالب برمجياً إلى ملف ثانٍ منعكس بالكامل — تُبدَّل جهات الخصائص، وتُدوَّر الاختصارات الرباعية، وتُعاد مزاوجة زوايا الحواف الدائرية، وتُعكس التحويلات والظلال على المحور الأفقي — ويُقدَّم إلى جانب نسخة Bootstrap 5.3 الرسمية لليمين إلى اليسار. ويُحسم اتجاه الصفحة في ترويسة المستند قبل طلب أي ملف أنماط، فلا تُرسم الصفحة العربية من اليسار إلى اليمين ثم تنقلب. وتتلقى الشرائح إشارة الاتجاه وأسهمها المعكوسة عند التهيئة، ويتحدث العدّاد التنازلي بلغة الصفحة، وتُعزل الأسعار وأرقام الطلبات وأعداد التقييمات ثنائياً فتبقى علامة «$» في موضعها الصحيح داخل الجملة العربية. وتستخدم العربية خط IBM Plex Sans Arabic والصينية خط Noto Sans SC، لكل منهما ارتفاع سطر خاص ودون تباعد لاتيني، بينما تجمع النصوص اللاتينية بين Space Grotesk للعناوين وManrope للمتن. وأُعيد بناء لوحة الألوان من الأساس — بنفسجي كهربائي مقابل كهرماني زاهٍ، وكلاهما يتجاوز نسبة تباين 4.5:1 على الأبيض — وطُبِّقت في المصدر لا كطبقة تجاوزات فوقه، فلم تبقَ حالة تمرير أو تركيز أو شارة تُظهر اللون القديم. والتصميم يبدأ من الجوال بالمعنى الدقيق: أحجام الخطوط محسوبة بدالة clamp لا بقفزات عند كل نقطة توقف، وأزرار الأيقونات محكومة بمساحة لمس لا تقل عن 44 بكسل، وقد جرى فحص كل صفحة آلياً ضد التمدد الأفقي عند 320 و390 و768 بكسل باللغات الثلاث. والصور الثمانون جميعها لقطات جديدة للمنتجات ولأسلوب الحياة وللأشخاص، كل منها مقصوصة على المقاس الذي يتوقعه التخطيط بدقة ومتوافقة لونياً كمجموعة واحدة؛ والشعار محوَّل إلى مسارات فيظهر بالشكل نفسه داخل وسم img، أما الأيقونات السبع والعشرون وعلامات الدفع وشارات المتاجر ورمز QR وأشكال القسم الرئيسي فكلها SVG مرسومة يدوياً. والبناء قابل لإعادة الإنتاج من طرفه إلى طرفه — فالصور والأيقونات وتحويل ملف الأنماط والقاموس والصفحات الثلاث والعشرون كلها تُولَّد بأمر واحد يفحص مخرجاته أيضاً بحثاً عن الروابط المعطلة والملفات المفقودة.