Qitaf

قِطاف – قالب HTML لمتجر زهور ومصمّم باقات ثلاثي الأبعاد

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

قِطاف واجهة متجر متكاملة لمحال الزهور واستوديوهات تنسيق الباقات وخدمات التوصيل في اليوم نفسه. يضم سبع عشرة صفحة جاهزة — الرئيسية، والمتجر، والمناسبات، وسجلاً كاملاً للمنتج، والسلة، وإتمام الشراء، ولوحة تحكم الحساب، وتسجيل الدخول، وإنشاء حساب، والمدونة والمقال، والمعرض، والأسئلة الشائعة، ومن نحن، وتواصل معنا، وصفحة 404، ومصمّم الباقات — وكلها تشترك في ترويسة وتذييل ودرج سلة ونافذة بحث ومبدّل لغة واحد. وقد أُعيد ترتيب الصفحة الرئيسية لا مجرد تغيير مظهرها: فوعود الطزاجة والتوصيل الأربعة انتقلت إلى ما تحت القسم الرئيسي مباشرة حيث تجيب عن أول سؤال يخطر ببال المشتري فعلاً، والمتجر يسبق حديث الاستوديو عن نفسه، وحظي المصمّم ثلاثي الأبعاد بقسم خاص به لأن لا نظير له في السوق، واختفى تماماً جدار النصوص الوهمية الذي كان القالب الأصلي يضعه فوق المنتجات. وأُعيدت كتابة عنوان كل قسم معها، وتحمل اثنتا عشرة باقة وأربع مناسبات وستة مقالات وشهادتان نصوصاً حقيقية لا نصوصاً وهمية. والمصمّم هو سبب وجود هذا القالب. في ثماني خطوات موجّهة — الحجم، والزهور، والخضرة، والتغليف، والشريطة، والمعاينة، والبطاقة، والتأكيد — تُبنى الباقة على الشاشة بتقنية WebGL، وكل بتلة فيها مولّدة هندسياً لا مأخوذة من صورة أرشيفية، ويستطيع العميل تدويرها وتقريبها وتغيير رأيه، بل وتصوير التصميم النهائي على الخادم قبل الدفع. ويبقى التنسيق بيد بائع الزهور عن قصد: العميل يختار المكوّنات والمحرّك يقرر موضع كل ساق، لأن ترك الناس يحرّكون السيقان واحدة واحدة ينتج باقات يستحيل تنفيذها يدوياً. وتعيش كل قواعد الانتقال بين الخطوات في دالة واحدة، ويتحدّث الإجمالي وقائمة السيقان مع كل نقرة، ويخرج التصميم النهائي صورةً مرفقة بتفاصيل الطلب أسفلها — جاهزاً للسلة أو للإرسال عبر واتساب. كل نص في كل صفحة مترجم إلى الإنجليزية والعربية والألمانية من قاموس واحد يضم 326 مفتاحاً يُولَّد أثناء البناء، فلا يمكن أن ينحرف نص عن مقابله في القاموس. والإنجليزية مكتوبة داخل صفحة HTML نفسها، ما يبقي كل صفحة كاملة وقابلة للفهرسة حتى مع تعطيل جافاسكربت. والعربية انعكاس حقيقي لا مجرد محاذاة إلى اليمين: إذ يُعاد كتابة ملف أنماط القالب برمجياً بالخصائص المنطقية في CSS — 168 تصريحاً مادياً جرى تحويله، مع ذيل مُولَّد آلياً لاختصارات الحواف الدائرية وإشارات التحويلات واتجاهات التدرّجات مما لا تستطيع الخصائص المنطقية التعبير عنه — ويُحسم اتجاه الصفحة في ترويسة المستند قبل أول رسم، فلا تومض الصفحة العربية من اليسار إلى اليمين، وتتلقى الشرائح إشارة الاتجاه عند التهيئة. وتُعزل الأسعار ثنائي الاتجاه فلا تنقلب عملتها داخل الجملة العربية، وينعكس الاستوديو ثلاثي الأبعاد أيضاً بأسماء الزهور والألوان وأوصاف التغليف. وتجمع النصوص اللاتينية بين خط Fraunces للعناوين وOutfit للمتن، بينما تستخدم العربية خطي Cairo وTajawal. وأُعيد بناء لوحة الألوان في المصدر لا كطبقة تجاوزات فوقه — لون الكاكي البرتقالي مقابل القطيفي والمريمي والكاكاو — فلم تبقَ حالة تمرير أو شارة أو تركيز تُظهر اللون القديم. والتصميم يبدأ من الجوال بالمعنى الدقيق: فملف أنماط القالب الأصلي مبني للشاشات الكبيرة أولاً، لذا تعلوه طبقة مكتوبة يدوياً تبدأ من أصغر شاشة، وقد جرى فحص كل صفحة آلياً ضد التمدد الأفقي عند 360 و768 و1440 بكسل باللغات الثلاث، إلى جانب فحص للتباين يمرّ على كل نص ويرفض أي نص يطابق لون ما خلفه. والصور الثلاث والأربعون جميعها مقصوصة على المقاس الذي يتوقعه التخطيط بدقة ومتوافقة لونياً كمجموعة واحدة، والشعار مكتوب بالخط دون أي أيقونة، وكل العلامات ورموز الأقسام وأيقونة الموقع رسومات SVG مرسومة يدوياً. والبناء قابل لإعادة الإنتاج من طرفه إلى طرفه — فالصور والأيقونات وتحويل ملف الأنماط والقاموس والصفحات السبع عشرة كلها تُولَّد بأمر واحد يفحص مخرجاته أيضاً بحثاً عن الروابط المعطلة والملفات المفقودة والمفاتيح غير المترجمة.