مجلد الوسائط - assets
نظام ذكي لحماية الخوادم من التهديدات الإلكترونية
مقدمة
يحتوي هذا المجلد على جميع ملفات الوسائط والرسوم التوضيحية المستخدمة في مشروع نظام الحارس التلقائي. جميع الملفات مصممة بتنسيق SVG (Scalable Vector Graphics) لضمان جودة عالية على جميع الشاشات.
قائمة الملفات
| الملف | الوصف | الأبعاد | الاستخدام |
|---|---|---|---|
banner.svg |
البانر الرئيسي للمشروع | 1200×400 | رأس ملف README.md |
dashboard.svg |
لوحة التحكم التوضيحية | 800×600 | قسم لقطات الشاشة |
slack-alert.svg |
نموذج تنبيه Slack | 600×400 | قسم لقطات الشاشة |
discord-alert.svg |
نموذج تنبيه Discord | 600×400 | قسم لقطات الشاشة |
تفاصيل الملفات
banner.svg
البانر الرئيسي للمشروع الذي يظهر في أعلى ملف README.md.
المكونات:
- خلفية تدرجية زرقاء داكنة تعكس الطابع الأمني والتقني
- أيقونة درع أمان في الجانب الأيسر
- خطوط شبكية خفيفة في الخلفية
- عنوان المشروع بالعربية والإنجليزية
- شارات الترخيص والتقنيات المستخدمة
- رابط المستودع في الأسفل
مواصفات التصميم:
العرض: 1200 بكسل
الارتفاع: 400 بكسل
التنسيق: SVG متجهي
الحجم: ~10 KB
dashboard.svg
لوحة تحكم تفاعلية تعرض الحالة الأمنية للنظام.
المكونات:
- رأس مع الشعار والمعلومات
- أربع بطاقات إحصائية رئيسية
- التهديدات المحظورة (أحمر)
- معدل النجاح (أخضر)
- المشكلات المفتوحة (برتقالي)
- زمن الاستجابة (أزرق)
- مخطط دائري لتوزيع المشاكل
- رسم بياني خطي لنشاط الفحص
- جدول المشاكل الحديثة
مواصفات التصميم:
العرض: 800 بكسل
الارتفاع: 600 بكسل
التنسيق: SVG متجهي
الحجم: ~25 KB
slack-alert.svg
نموذج لرسالة تنبيه كما تظهر في منصة Slack.
المكونات:
- رأس القناة مع أيقونة #
- معلومات البوت (Auto-Guardian)
- صندوق تنبيه باللون الأحمر
- تفاصيل الهجوم (المصدر، المنفذ، عدد المحاولات)
- حالة "تم الحظر" باللون الأخضر
- أزرار التفاعل
مواصفات التصميم:
العرض: 600 بكسل
الارتفاع: 400 بكسل
التنسيق: SVG متجهي
الحجم: ~15 KB
discord-alert.svg
نموذج لرسالة إشعار بتنسيق Discord Embed.
المكونات:
- رأس الرسالة مع أيقونة البوت
- شريط لون الخطورة
- عنوان ووصف التهديد
- حقول منظمة للمعلومات
- طابع زمني
- أزرار التفاعل
مواصفات التصميم:
العرض: 600 بكسل
الارتفاع: 400 بكسل
التنسيق: SVG متجهي
الحجم: ~15 KB
لماذا نستخدم SVG؟
مميزات تنسيق SVG
جودة متجاوبة:
ملفات SVG هي ملفات متجهية، مما يعني أنها يمكن تكبيرها إلى أي حجم دون فقدان الجودة. هذا مثالي للشاشات عالية الدقة (Retina) والأجهزة المختلفة.
حجم صغير:
ملفات SVG عادة ما تكون أصغر بكثير من ملفات PNG المكافئة، مما يساعد في سرعة تحميل صفحات الويب وتحسين أداء الموقع.
سهولة التعديل:
يمكن تعديل ألوان ونصوص وأي عنصر في ملف SVG باستخدام أي محرر نصوص بسيط. لا تحتاج لبرنامج تصميم متقدم لإجراء تعديلات بسيطة.
دعم GitHub:
GitHub يعرض ملفات SVG مباشرة في Markdown، مما يعني أنها ستظهر تلقائياً في ملف README.md دون الحاجة لاستضافة خارجية.
كيفية إضافة صور جديدة
الخطوة 1: إنشاء التصميم
يمكنك استخدام أحد البرامج التالية لإنشاء رسومات متجهة:
| البرنامج | النوع | السعر |
|---|---|---|
| Inkscape | مفتوح المصدر | مجاني |
| Figma | ويب | مجاني |
| Canva | ويب | مجاني/مدفوع |
| Adobe Illustrator | سطح مكتب | مدفوع |
الخطوة 2: التصدير
عند تصدير التصميم:
- اختر تنسيق SVG
- تأكد من إزالة البيانات الوصفية غير الضرورية
- استخدم الإعدادات الموصى بها:
- عدم تضمين صور نقطية (PNG/JPG)
- استخدام خطوط قياسية أو تضمين الخطوط
- الحفاظ على الأبعاد المناسبة
الخطوة 3: التحقق
قبل إضافة الملف، تحقق من:
- الملف يعمل بشكل صحيح عند فتحه في المتصفح
- النص قابل للقراءة على الخلفيات المختلفة
- الأبعاد مناسبة للاستخدام المقصود
- حجم الملف معقول (أقل من 100 KB)
الخطوة 4: الإضافة
لإضافة صورة جديدة:
# نسخ الصورة إلى مجلد assets
cp new-image.svg assets/
# إضافة إلى Git
git add assets/new-image.svg
# إنشاء التزام
git commit -m "docs: إضافة صورة توضيحية جديدة"
# رفع إلى GitHub
git push origin main
معايير التصميم
الألوان المستخدمة
| الاستخدام | اللون | الكود |
|---|---|---|
| الرئيسي | أزرق داكن | #1a365d |
| الثانوية | أزرق متوسط | #2b6cb0 |
| التأكيد | أزرق فاتح | #4299e1 |
| الخطورة الحرجة | أحمر | #e01e5a |
| النجاح | أخضر | #48bb78 |
| التحذير | برتقالي | #f59e0b |
| النص الفاتح | أبيض/رمادي فاتح | #ffffff / #d1d5db |
| النص الغامق | رمادي | #374151 |
الخطوط
نستخدم خطوطاً قياسية لضمان التوافق:
- العربية: Noto Sans Arabic, Arial, Tahoma
- الإنجليزية: Arial, Roboto, Open Sans
- الكود: Monaco, Consolas, Courier New
نصائح للصيانة
فحص الملفات
# التحقق من وجود جميع الملفات
ls -la assets/
# التحقق من حجم الملفات
du -h assets/*
# التحقق من صحة SVG
python3 -c "
import xml.etree.ElementTree as ET
for f in ['banner.svg', 'dashboard.svg', 'slack-alert.svg', 'discord-alert.svg']:
try:
ET.parse(f'assets/{f}')
print(f'✓ {f} - صالح')
except Exception as e:
print(f'✗ {f} - خطأ: {e}')
"
ضغط الصور
إذا كانت الملفات كبيرة جداً، يمكنك ضغطها:
# باستخدام svgo (أداة Node.js)
npx svgo assets/*.svg
# أو باستخدام أدوات أخرى متاحة
الموارد الإضافية
أدوات مفيدة
- SVGOMG - ضغط SVG عبر الويب
- SVG Preview - عرض SVG عبر الويب
- Inkscape - محرر SVG مجاني
- Boxy SVG - محرر SVG على الويب
مراجع التصميم
- Material Design Icons - أيقونات Material
- Font Awesome - أيقونات شاملة
- Heroicons - أيقونات SVG
التحديثات
| التاريخ | التغيير | بواسطة |
|---|---|---|
| 2024-10-13 | إضافة جميع الصور الأولية | AbdulElah Othman |
صُنع بـ ❤️ بواسطة عبد الإله عثمان غويث