اجعل حنين ويب على طريقتك.
كل ما تحتاجه لفهم الواجهة وتخصيصها وتجهيزها.
البداية السريعة
افتح index.html لتشغيل اللوحة. جميع الخطوط والملفات محلية، ولا تحتاج إلى تثبيت مكتبات أو اتصال بالإنترنت. للاستخدام المنشور ارفع ملفات الواجهة إلى استضافة ثابتة.
لتعديل المصدر، افتح مجلد source وشغّل الأوامر التالية باستخدام Node.js 20 أو أحدث. لا توجد حزم npm مطلوبة.
npm run build npm run check npm run preview
هيكل الملفات
تحتوي الحزمة على واجهة جاهزة في الجذر، ومصدر قابل للتعديل داخل source، وملفات نشر داخل docs/marketplace. نسخة العربية مستقلة ولا تحتاج إلى ملفات الإنجليزية.
src/ locales/ # Edition text templates/ # Shared shell and page renderers scripts/ # Core and page interactions styles/ # Tokens, shell, components, pages assets/ # Original identity and local fonts scripts/ build.mjs # Generate the static edition check.mjs # Verify links, locales, and pure helpers serve.mjs # Local preview server dist/ # Generated, runnable interface
التخصيص
عدّل الألوان والمسافات والخطوط في src/styles/tokens.css. أنماط الهيكل في layout.css، والمكونات في components.css، والصفحات في pages.css. الألوان البديلة والوضع الداكن يستخدمان نفس المتغيرات.
النصوص في src/locales/ar.mjs. قائمة التنقل مشتركة في src/templates/layout.mjs. لإضافة صفحة، سجّل اسمها في pageNames داخل ui.mjs وأضف قالبها إلى خريطة الصفحات في scripts/build.mjs. حدّث عنوانها في ملف اللغة وأضف رابطها إلى التنقل إن لزم.
المصدر العربي يستخدم الخصائص المنطقية مثل margin-inline-start. لا تقلب الرسوم والأرقام عشوائيًا: التسلسل الزمني للرسوم ثابت، بينما تتحول القوائم ومحاذاة الواجهة حسب اتجاه اللغة.
واجهات المكونات
الواجهة المشتركة متاحة عبر window.HaneenWeb بعد تحميل core.js. توفر toast(message) للإشعارات النصية، وdialog(title, trustedHtml, setup) للنوافذ، وvalidate(form) للتحقق، وdownloadCSV(name, headers, rows) للتصدير.
data(type) يقرأ بيانات التجربة، وsaveData(type, rows) يحفظها ويعيد قيمة منطقية تدل على نجاح الحفظ الدائم. استخدم notifySave(result) لعرض حالة الحفظ الصحيحة. قد تمنع معاينة المتجر التخزين؛ عندها تعمل البيانات في ذاكرة الصفحة.
مرّر النصوص غير الموثوقة عبر HaneenWeb.escape(value) قبل إدخالها في قوالب HTML، أو استخدم textContent. قيم حواراتنا ونماذجنا تُعالج بهذه الطريقة. فصل الوظائف والتعليقات موجود داخل كل ملف مصدر.
HaneenWeb.toast(HaneenWeb.s.saved); // A plain-text value is escaped before it enters HTML. HaneenWeb.dialog(HaneenWeb.s.details, '<p>' + HaneenWeb.escape(userText) + '</p>');
مكتبة الواجهة
تضم النسخة ٧٢ صفحة. مكتبة المكونات في templates/pages/library.mjs، وأنماطها في styles/library.css، وتفاعلاتها في scripts/library.js. النصوص الإضافية في locales/library-ar.mjs. افتح «عرض مثال HTML» داخل المكتبة للحصول على نفس الكود المستخدم في العرض.
ابدأ من الأزرار والبطاقات والأيقونات، ثم حقول النماذج والنموذج المتدرج والتحقق، أو استخدم الجداول والرسوم والتخطيطات في مشروعك. المحرر يدعم جزءًا بسيطًا من Markdown مع معاينة آمنة، ولا يمثل محرر HTML كاملًا. اختيار الملفات يعرض أسماءها وأحجامها محليًا فقط. حقول التاريخ والوقت والأرقام الأصلية تتبع إعدادات المتصفح.
صفحة الأسعار مثال للتصميم وليست تسعيرًا لقالب حنين ويب المدفوع. لا تنشئ الأزرار اشتراكات أو حسابات فعلية. للمقارنة مع المرجع، راجع docs/marketplace/REFERENCE-REVIEW.txt.
إمكانية الوصول
توجد وصلة لتجاوز التنقل، وتسميات للأزرار والحقول، وحالات تركيز واضحة، ونوافذ أصلية تدعم Escape. تعمل علامات التبويب بالأسهم وHome وEnd، ويمكن نقل المهام من قائمة الحالة دون سحب. يتوفر جدول نصي موازٍ للرسم البياني.
تُخفّض الحركة عند تفعيل تفضيل النظام. عند تخصيص الألوان افحص تباين النصوص، واختبر الصفحات على الهاتف ولوحة المفاتيح وقارئ الشاشة؛ وجود هذه المزايا لا يشكّل شهادة امتثال.
حدود النسخة التجريبية
يمكنك إضافة وتعديل المشاريع والعملاء والمهام، ونقل المهام، وتصفية وترتيب وتصدير الجداول، وإنشاء فواتير تجريبية وطباعتها، وإضافة أحداث ورسائل محلية، وحفظ التفضيلات. زر إعادة الضبط في الإعدادات يستعيد بيانات التجربة.
لا يوجد خادم أو قاعدة بيانات أو نظام حسابات أو مدفوعات. صفحات التسجيل والدخول واستعادة كلمة المرور أمثلة تحقق فقط؛ لا تُخزّن كلمات المرور ولا تُرسل رسائل. الإشعارات والتقارير والأرقام توضيحية. اربط نظامك الخلفي قبل استخدام بيانات حقيقية، مع التحقق والصلاحيات على الخادم.
اللوحة الرئيسية تعرض مؤشرات نموذجية لفترة زمنية؛ صفحات الطلبات والعملاء تعرض مجموعة سجلات أصغر مستقلة للتجربة. تاريخ بيانات المثال أكتوبر–نوفمبر ٢٠٢٦، ويمكن الانتقال لأي شهر في التقويم.
الترخيص والمصادر
الكود والتصميم الأصليان من حنين ويب. معلومات الملكية والتوزيع مرفقة في docs/LICENSE.txt. الخطوط Manrope وIBM Plex Sans Arabic موزعة بترخيص SIL Open Font License؛ نصوص تراخيصها داخل docs/licenses.
الأيقونات والعلامة والرسوم مرسومة خصيصًا لهذا القالب. لم تُضمّن ملفات AdminLTE أو Bootstrap أو jQuery. مصادر الخطوط موثقة في docs/THIRD-PARTY-NOTICES.txt.