مشروع أداة توليد القوائم التفاعلية

هذا المشروع عبارة عن أداة لإنشاء قوائم HTML/CSS مخصصة و تفاعلية بتصميم عصري و جذاب و بدون الحاجة لكتابة كود.

مميزاته

• معاينة مباشرة: رؤية التغييرات فورياً.
• نسخ بنقرة واحدة: نسخ الكود المولد إلى الحافظة.
• تصميم متجاوب: يعمل على جميع الأجهزة.
• واجهة باللغة العربية: دعم كامل للغة العربية.
• أنواع القوائم: نقطية (Bulleted) أو رقمية (Numbered).
• 4 أنماط تصميم: عصري، كلاسيكي، مبسط، ومتدرج.
• تحكم كامل في الألوان: أداة انتقاء الألوان + ألوان محددة مسبقاً.
• أيقونات مخصصة: مجموعة من الأيقونات الجاهزة أو بدون أيقونات.
• تحكم في المسافات: مضغوط، عادي، أو واسع.
• تأثيرات الحوم: تفاعل بصري عند تمرير المؤشر.
• حركات متقدمة: انتقالات سلسة و متدرجة.
• ظلال ثلاثية الأبعاد: لإضافة عمق بصري.
• حواف مدورة: لمظهر عصري و ناعم.

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

• HTML: لبناء الصفحة.
• CSS: لتنسيق محتوى الصفحة و إظهارها بشكل أفضل.
• JavaScript: لقراءة مدخلات المستخدم و توليد القوائم بناءاً على اختيارات المستخدم.

طريقة التشغيل

1. قم بتحميل المشروع.
2. فك الضغط عنه.
3. إفتح الملف index.html من خلال أي متصفح (كروم، فايرفوكس، آيدج إلخ..) لتفتح الأداة.

طريقة الإستخدام

بشكل عام، عليك إختيار الإعدادات، ثم إدخال المحتوى، و يليه تخصيص التأثيرات كما تحتاج و في النهاية توليد الكود كما يلي:

1. حدد نوع القائمة (نقطية أو رقمية).
2. اختر النمط المطلوب (عصري، كلاسيكي، مبسط، أو متدرج).
3. حدد الأيقونة المناسبة أو اتركها فارغة.
4. إختر اللون المطلوب باستخدام أداة الألوان.
5. أدخل عناصر القائمة في منطقة النص (كل عنصر في سطر منفصل).
6. فعل أو أوقف تأثيرات الحوم.
7. إختر الحركات المتقدمة.
8. أضف الظلال والحواف المدورة.
9. إضغط على زر "توليد الكود".
10. إضغط على المربع المحتوي على الكود لنسخه.
11. ألصق الكود في موقعك أو مشروعك.

التخصيص المتقدم

1- يمكنك إضافة ألوان جديدة للأداة عبر تعديل المتغيرات في الملف style.css كما يلي.

:root {
  --primary-color: #13b981;
  --secondary-color: #f0fdf7;
  --accent-color: #059669;
}

2- لإضافة المزيد من الأيقونات، إفتح ملف index.html ثم أضف أي أيقونات تريدها في القائمة الخاصة بالأيقونات كما يلي.

<option value="🔥">🔥 نار</option>
<option value="⚡">⚡ برق</option>
<option value="🎨">🎨 فن</option>

يمكنك تجربة المشروع بشكل مباشر من الرابط التالي:

https://cdn.harmash.com/projects/215/6272354bbfd74645944063cbba757d1e/index.html