عندما تبدأ مشروع متجر أو نظام إدارة عملاء أو منصة خدمات، تحتاج إلى أكثر من صفحة مؤشرات جميلة: تحتاج إلى نماذج وأزرار وجداول وحالات واضحة للأخطاء والتحميل، وإلى طريقة موحدة تجمع هذه العناصر. حنين أوربت من حنين ويب يقدم هذه الأساسيات في قالب لوحة تحكم مجاني من ٣٢ صفحة لكل لغة.
في هذا الدليل سنمر على معظم صفحات اللوحة بصور فعلية، ونوضح ما يعمل داخل التجربة، وكيف تبدأ التخصيص، وما الذي تحتاج إلى ربطه في تطبيقك الحقيقي.
تنزيل النسخة العربية ومعاينتها · النسخة الإنجليزية
لمن صُممت هذه اللوحة؟
يمكن للمطورين والفرق الصغيرة استخدامها لبناء واجهات إدارة متجر، أو CRM، أو مشاريع ومهام، أو إدارة محتوى، أو مساحة عمل لخدمة رقمية. تختار الصفحات المناسبة وتربطها ببياناتك؛ القالب لا يحدد قواعد نشاطك التجاري ولا يستبدل تطوير التطبيق الخلفي.
عربية وإنجليزية: حزمتان مستقلتان
تحتوي كل نسخة على صفحاتها ومصدرها وخطوطها ودليلها. العربية تدعم اتجاه اليمين إلى اليسار، والإنجليزية اتجاه اليسار إلى اليمين. لا تحتاج إحدى الحزمتين إلى الأخرى كي تعمل. يدعم التصميم الهاتف والتابلت والكمبيوتر، مع وضع داكن وخيارات للمظهر.
محتويات الدليل
نظرة عامة تجمع المؤشرات الأساسية
تجمع الصفحة الرئيسية بطاقات الإيرادات والطلبات والعملاء والتحويل، مع رسم للإيرادات والمصروفات ومؤشر للهدف الشهري. يمكن تبديل الفترة المعروضة وفتح جدول بيانات الرسم وتصدير التقرير. الأرقام بيانات توضيحية منفصلة عن سجلات الطلبات الصغيرة، لتساعدك على تصور لوحة متابعة أعمال بعد ربط بيانات مشروعك.
التحليلات وفهم الأداء
تقدم صفحة التحليلات طريقة منظمة لعرض مصادر الزيارات والأجهزة والصفحات والأداء. تفيد هذه الأنماط في مواقع المحتوى والمتاجر ومنصات الخدمات، ويمكن إعادة استخدام بطاقات الأرقام والرسوم بدل بناء واجهة إحصاءات جديدة لكل مشروع.
المشاريع وتفاصيل العمل
تظهر المشاريع كبطاقات تحتوي على الاسم والتصنيف والحالة والتقدم والفريق. يمكن إضافة مشروع وتعديل بياناته وفتح تفاصيله والبحث عنه. حفظ التجربة محلي في المتصفح عندما يسمح بالتخزين، ويمكن استعادة البيانات الأصلية من الإعدادات.
لوحة المهام بأسلوب Kanban
تُوزع المهام على مراحل واضحة، ويمكن نقلها بالسحب أو باختيار الحالة من القائمة. يوفر الاختيار بديلًا مناسبًا للهاتف ولوحة المفاتيح. استخدم الهيكل لإدارة مهام فريق أو متابعة طلبات عمل، ثم أضف صلاحيات الأعضاء والمزامنة في نظامك الخلفي.
الطلبات: بحث وتصفية وتصدير
يتضمن جدول الطلبات البحث والتصفية بالحالة والترتيب وتحديد الصفوف والتنقل بين الصفحات. يمكن تصدير النتائج إلى CSV للاستخدام خارج الواجهة. يعالج البحث النص ككلمات حرفية، وتوجد حالة واضحة عند عدم العثور على نتائج.
إدارة بيانات العملاء
تقدم صفحة العملاء قائمة قابلة للبحث مع بيانات تعريفية وأرقام توضيحية، ونموذجًا لإضافة عميل أو تعديل بياناته. يمكن استخدامها كأساس لواجهة CRM أو قائمة مشتركين، مع ربط الخصوصية والتحقق والصلاحيات بالخادم عند الانتقال إلى بيانات فعلية.
الفواتير وعرض التفاصيل
تعرض الفواتير العميل والتاريخ والحالة والمبلغ، مع إمكانية إنشاء فاتورة تجريبية وفتح تفاصيلها. يوجد عرض مخصص للطباعة. هذه أمثلة واجهة؛ لا تنفذ تحصيلًا ماليًا أو ضرائب محاسبية أو ربطًا بمزود دفع.
التقويم والمواعيد
يمكن التنقل بين الشهور وإضافة حدث وتحديد وقته وحذفه من التجربة. يناسب هذا النمط المواعيد وخطط المحتوى ومراجعات المشاريع. تخزين الأحداث محلي، ولا توجد مزامنة تلقائية مع تقويم خارجي أو إرسال تذكيرات فعلية.
واجهة المحادثات
تعرض الرسائل قائمة محادثات ومنطقة لقراءة الرسائل وكتابتها. الرسائل التي تكتبها تظهر في المحادثة التجريبية محليًا، وتُعرض كنص آمن. لتقديم محادثات حقيقية بين مستخدمين، اربط الواجهة بخدمة رسائل ومصادقة وتخزين مناسب.
مكتبة العناصر المشتركة
تضم المكتبة الشارات والتنبيهات والألوان والخطوط والتبويبات والأقسام القابلة للطي والنوافذ والإشعارات المؤقتة. وجود نمط مشترك لهذه العناصر يحافظ على تناسق الشاشات ويسهل تطوير صفحات إضافية بنفس الهوية.
أزرار متعددة للاستخدامات اليومية
توجد أزرار أساسية وثانوية ومحددة وملونة، بأحجام وأشكال مختلفة، إضافة إلى المجموعات وأزرار الأيقونات والتلميحات وقائمة الإجراءات وحالة التحميل. يمكن فتح مثال HTML لقراءة نفس الكود المستخدم في العنصر المعروض.
بطاقات ومؤشرات قابلة لإعادة الاستخدام
تشمل هذه الصفحة بطاقات أرقام ومؤشرات تقدم وصورًا رمزية وحالات فارغة وهيكل تحميل توضيحي. بعض البطاقات تدعم الطي والتحديث التجريبي والإخفاء والاستعادة، مما يقدم أمثلة عملية لحالات الواجهة وليس شكل البطاقة فقط.
حقول نماذج متنوعة
تشمل الحقول النص والبريد والهاتف والرابط والأرقام، والاختيار العادي والمتعدد والاختيار القابل للبحث، ومربعات الاختيار والمفاتيح. توجد حقول للتاريخ والوقت واللون والمدى، ومجموعات إدخال وعدّاد نص وإظهار كلمة المرور. اختيار الملفات يعرض الأسماء والأحجام فقط، ولا يرفعها إلى خادم.
نموذج متدرج من ثلاث خطوات
يقسم النموذج الإعداد إلى بيانات المستخدم ومساحة العمل ثم المراجعة. يتم التحقق قبل الانتقال للخطوة التالية، ويمكن الرجوع مع الاحتفاظ بالقيم. يصلح هذا النمط لبداية الاشتراك أو إعداد مشروع أو جمع طلب متعدد الأجزاء، دون إنشاء حساب فعلي في التجربة.
التحقق ورسائل الأخطاء
تعرض صفحة التحقق أمثلة للحقول المطلوبة وصيغة البريد والرابط والرمز المرجعي وحدود الأرقام. تظهر رسائل قريبة من الحقول وتنتقل البؤرة إلى أول خطأ. النسخة العربية تعرض رسائلها بالعربية. يجب تكرار التحقق والصلاحيات على الخادم في التطبيق الفعلي.
تنسيقات الجداول
إلى جانب الجداول التفاعلية في صفحات العمل، تتوفر أمثلة للصفوف المتناوبة والجداول ذات الحدود والتنسيق المضغوط. يمكنك اختيار النمط المناسب لكثافة البيانات. التصدير المتاح في القالب CSV، ولا يُقدم تصديرًا جاهزًا إلى Excel أو PDF.
رسوم بيانية مع بيانات نصية
تضم مكتبة الرسوم أمثلة خطية ومساحية وأعمدة وحلقية، إضافة إلى الرسوم المصغرة في المؤشرات. الرسوم أصلية بصيغة SVG، ويمكن قراءة القيم في جداول نصية مرافقة. لا تحتاج إلى تثبيت مكتبة رسوم خارجية لتشغيل الأمثلة المرفقة.
مكتبة أيقونات أصلية
يمكن البحث في الأيقونات بالاسم ثم فتح كود SVG الخاص بالأيقونة. تتبع الأيقونات أسلوبًا بصريًا واحدًا وتتغير ألوانها مع السياق، مما يجعل استخدامها داخل الأزرار والتنقل والبطاقات أسهل عند تخصيص القالب.
خط زمني للأنشطة
يوضح الخط الزمني كيف تعرض مراحل مشروع أو تحديثات فريق أو سجل نشاط مرتبًا حسب الوقت. تجمع البطاقات عنوان الحدث والتاريخ والتفاصيل والشخص المرتبط به. يمكنك تبديل البيانات مع الحفاظ على نفس المكوّن المرئي.
محرر محتوى ومعاينة آمنة
يسمح المحرر بكتابة نص مع عناوين وقوائم ونص عريض ومائل وكود قصير، ومعاينته وتنزيله كملف نصي. يعرض HTML كنص ولا ينفذه. هذا جزء بسيط من Markdown، مناسب لأمثلة المحتوى، وليس محرر HTML بصريًا كاملًا أو نظام نشر مقالات متصلًا بخادم.
تخطيطات لمجالات مختلفة
جرّب ترتيب المحتوى في عمود أو عمودين أو ثلاثة، أو في مساحة رئيسية مع عمود جانبي. تتضمن الصفحة أمثلة توجهك إلى مكونات المتجر وإدارة العملاء والمحتوى ومنصات الخدمات. اختيار المجال يعتمد على المكونات التي تجمعها وقواعد التطبيق التي تضيفها.
المظهر والإعدادات
يمكن تبديل الوضع الفاتح والداكن أو اتباع مظهر النظام، واختيار اللون الأساسي وكثافة المسافات. توجد بيانات ملف شخصي وتفضيلات توضيحية وخيار لإعادة ضبط التجربة. لا تؤدي مفاتيح إشعارات المثال إلى إرسال بريد فعلي.
الملف الشخصي
تقدم صفحة الملف الشخصي غلافًا وصورة رمزية واسمًا ووصفًا وموقعًا ومهارات ومشاريع حديثة. يمكن تعديل بيانات المثال من الإعدادات. الهيكل مناسب لملف عضو فريق أو مسؤول أو مقدم خدمة بعد ربطه ببيانات التطبيق.
شاشات الدخول وإنشاء الحساب والاستعادة
تحتوي الحزمة على صفحات منفصلة للدخول وإنشاء حساب واستعادة كلمة المرور، بهوية متناسقة. تُختبر المدخلات وتطابق كلمات المرور داخل العرض، لكن القالب لا يسجل مستخدمين ولا يخزن كلمات المرور ولا يرسل رسالة استعادة. اربط هذه الصفحات بنظام مصادقة موثوق عند استخدامها فعليًا.
صفحة أسعار قابلة للتخصيص
توضح صفحة الأسعار عرض ثلاث خطط والتبديل بين الفترة الشهرية والسنوية. الاختيار يفتح نافذة توضيحية ولا ينشئ اشتراكًا. الأسعار الظاهرة داخل المثال ليست أسعار حنين أوربت؛ تنزيل القالب نفسه مجاني وفق الترخيص المرفق.
صفحة أسئلة ومساعدة قابلة للبحث
تجمع صفحة المساعدة أسئلة قابلة للطي والبحث، وتشرح تشغيل القالب وتخصيصه والترخيص وحدوده. إلى جانبها توجد صفحة بداية للمطور ودليل استخدام داخل الحزمة وصفحة 404، لتكتمل مجموعة الصفحات الأساسية.
الوضع الداكن والتناسق البصري
يتغير المظهر من الزر العلوي أو الإعدادات. الألوان والمسافات والخطوط مبنية على متغيرات مشتركة، لتكون التعديلات متناسقة عبر الصفحات. الصور التالية من نفس الواجهة في الوضع الداكن.
كيف تنزّل اللوحة وتشغّلها؟
- افتح صفحة النسخة المطلوبة من روابط التنزيل في هذا المقال.
- استخدم زر التنزيل واتبع تسجيل الدخول أو خطوات التنزيل المعمول بها في المتجر.
- فك ضغط ZIP، ثم افتح
index.htmlلتجربة الواجهة. - ابدأ القراءة من
START-HERE.txtوافتحdocumentation.htmlلشرح المكونات.
ماذا يوجد داخل الملفات؟
في الجذر توجد الصفحات الجاهزة ومجلد الأصول. يحتوي source على المصدر المشروح والقوالب المشتركة والنصوص والتنسيقات والسكربتات وأدوات البناء. يحتوي marketplace على مواد معاينة ووصف وصور وتقارير. كما توجد ملفات الترخيص وسجل الإصدار وإشعارات الخطوط.
تخصيص الألوان والنصوص وإضافة صفحة
ابدأ بملف source/src/styles/tokens.css لتعديل اللون الأساسي والخلفيات والمسافات والخطوط. النصوص العربية في locales/ar.mjs وlocales/library-ar.mjs داخل المصدر. التنقل والهيكل مشتركان في templates/layout.mjs، وقوالب الصفحات في templates/pages. عند إضافة صفحة جديدة، سجّلها في خريطة الصفحات وأداة البناء وفق الدليل.
لإعادة البناء تحتاج Node.js 20 أو أحدث. من مجلد source شغّل npm run build، ثم npm run check. يمكنك تشغيل npm run preview للمعاينة المحلية. لا توجد خطوة تثبيت لحزم npm. الناتج النهائي ملفات ثابتة يمكن رفعها إلى استضافة مناسبة.
ربط القالب بـLaravel أو أي خلفية أخرى
يمكن تقسيم الهيكل إلى قوالب مشروعك وربط النماذج والجداول بواجهات API أو مسارات الخادم. في Laravel مثلًا يمكن تحويل الأجزاء المشتركة إلى Blade، لكن الحزمة لا تشمل تطبيق Laravel جاهزًا. أضف المصادقة والصلاحيات والتحقق على الخادم وقاعدة البيانات ورفع الملفات والإشعارات حسب احتياجك. لا تعتمد على تخزين المتصفح لحماية بيانات العملاء أو معلومات الدفع.
كيف يعمل الحفظ داخل العرض؟
التجربة تحفظ بعض البيانات والتفضيلات في المتصفح عندما يكون التخزين متاحًا. في المعاينة المعزولة قد يُمنع التخزين؛ عندها تظهر رسالة مناسبة وتبقى التغييرات في ذاكرة الصفحة فقط. الانتقال إلى صفحة أخرى قد يعيد البيانات الأصلية في هذا السياق. هذا سلوك التجربة وليس فقدانًا لبيانات نظام حقيقي.
الفحوص والترخيص وحدود الإصدار
فُحصت ٣٢ صفحة لكل لغة على ثلاثة أحجام شاشة، بإجمالي ١٩٢ حالة عرض، إضافة إلى تجارب للتفاعلات والتحقق والتصدير. أُعيد بناء الحزمتين بشكل مستقل. هذا لا يمثل شهادة لجميع المتصفحات أو الأجهزة أو قارئات الشاشة.
القالب مجاني للاستخدام والتعديل في المشاريع النهائية الشخصية والتجارية وفق ملف الترخيص. لا يجوز إعادة بيع الملفات الأصلية أو إعادة توزيعها باعتبارها منتجًا خاصًا بك. الخطوط لها تراخيصها المرفقة. لا تشمل النسخة كل إضافات المكتبات الإدارية الأخرى؛ راجع تقرير المقارنة داخل الحزمة عند اختيار متطلبات مشروعك.
أسئلة سريعة قبل البدء
هل أحتاج إلى Bootstrap أو jQuery؟
لا، تعمل الأمثلة المرفقة باستخدام HTML وCSS وJavaScript مع أصول محلية. يمكنك دمجها مع تقنيات مشروعك مع مراجعة التعارضات.
هل المعاينة متاحة قبل التنزيل؟
نعم، افتح صفحة المنتج واستخدم رابط المعاينة المباشرة لتجربة الصفحات والمكونات.
هل توجد مدفوعات أو رسائل بريد حقيقية؟
لا. هذه واجهات توضيحية، وتحتاج الخدمات الفعلية إلى ربط خلفي. صفحة الأسعار تعرض خططًا نموذجية، ولا تغيّر مجانية تنزيل القالب.
من أين أبدأ؟
جرّب الصفحة الرئيسية، ثم افتح حقول النماذج والأزرار والجداول، واقرأ دليل التخصيص. اختر المكونات التي يحتاجها مشروعك وابدأ بصفحة البداية بدل إضافة أقسام غير لازمة.