Dashboard To-Do Tasks

نظرة عامة

هذا المشروع هو لوحة تحكم متكاملة لإدارة المهام (To-Do Dashboard) مصممة باستخدام HTML، CSS، وJavaScript. يتميز بواجهة مستخدم حديثة مع تركيز على الوظائف العملية لإدارة المهام اليومية، وتتبع الإنتاجية، وتنظيم الأعمال.

المميزات الرئيسية

هيكل لوحة التحكم:

شريط جانبي (Sidebar) مع قائمة تصنيف المهام

منطقة محتوى رئيسية مقسمة إلى أقسام وظيفية

شريط علوي (Topbar) مع إشعارات ومعلومات المستخدم

وحدات إدارة المهام:

لوحة المهام الرئيسية:

عرض المهام حسب الأولوية (عاجل، مهم، عادي)

إمكانية إضافة/حذف/تحرير المهام

تحديد المهام المكتملة (Checkbox)

تتبع الإنجاز:

مخطط دائري (Pie Chart) يظهر نسبة إنجاز المهام

إحصاءات عدد المهام المتبقية والمكتملة

تقويم المهام:

عرض المهام مرتبة حسب التاريخ

تمييز المواعيد النهائية (Deadlines)

أدوات تنظيمية متقدمة:

نظام تصنيف المهام (العمل، الدراسة، شخصي)

فلترة المهام حسب (الكل، المكتملة، قيد التنفيذ)

شريط بحث سريع عن المهام

إشعارات للمهام القريبة من الموعد النهائي

التقنيات المستخدمة

الهيكل الأساسي:

HTML5: بناء هيكل الصفحة

CSS3: Flexbox وGrid للتنظيم المتجاوب

Font Awesome للأيقونات

التفاعلية:

JavaScript (DOM Manipulation):

إضافة/حذف/تحديث المهام ديناميكياً

تحديث إحصائيات الإنجاز فورياً

حفظ البيانات في localStorage

Chart.js: لإنشاء مخططات الإنجاز البصرية

التصميم:

نظام ألوان هادئ: درجات الأزرق والرمادي

ظلال وانتقالات سلسة (Transitions)

تصميم بطاقات (Cards) بمؤثرات Hover

تفاصيل التصميم البصري

نظام الألوان:

الخلفيات: #f0f5ff (أزرق فاتح)

العناصر الرئيسية: #4a6cf7 (أزرق)

المهام العاجلة: #ff708b (وردي)

المهام المكتملة: #23b899 (أخضر)

الطباعة:

عناوين: Poppins (جريء)

محتوى: DM Sans (قابل للقراءة)

تأثيرات مميزة:

ظلال طبقات متعددة (Layered Shadows)

تحريك الأيقونات عند Hover

مؤشرات بصرية لحالة المهمة (ألوان/أيقونات)

الوظائف التفاعلية

إضافة مهمة جديدة:

نموذج سريع مع حقول (العنوان، الوصف، الفئة، الأولوية، التاريخ)

معاينة فورية للمهمة المضافة

إدارة الحالة:

تغيير حالة المهمة (مكتمل/قيد التنفيذ)

سحب وإفلات لإعادة ترتيب المهام

حذف متعدد المهام

تخصيص الواجهة:

تبديل وضع الليل (Dark Mode)

تغيير كثافة عرض المعلومات (Compact/Normal)

نقاط القوة

أداء عالي: تحميل فوري دون تأخير

تجاوبية ممتازة: تصميم يعمل على جميع الأجهزة

تخزين محلي: حفظ البيانات في المتصفح (localStorage)

تجربة مستخدم بديهية: تدفق عمل منطقي وسلس

إمكانيات التطوير المستقبلية

مزامنة البيانات مع السحابة

إضافة نظام تسجيل مستخدمين

دمج إشعارات المتصفح

إصدار تطبيق جوال (PWA)

إضافة تصدير/استيراد المهام

رابط المشروع على GitHub: HamzaElmanzari/Dashboard-To-Do-Tasks

رابط الموقع الحي: معاينة مباشرة