EduConnect Maroc هي منصة شاملة لإدارة المدارس في المغرب، مصممة خصيصاً لربط المعلمين والآباء والطلاب من خلال تقنية متطورة وسهلة الاستخدام.
- ✅ دعم كامل للغات الثلاث: العربية، الفرنسية، الإنجليزية
- ✅ دعم RTL/LTR تلقائي
- ✅ تصميم متجاوب (Responsive)
- ✅ أنيميشن متقدمة
- ✅ نظام إشعارات
- ✅ واجهة مستخدم حديثة
- ✅ تأثيرات تفاعلية
educonnect-maroc/
├── index.html # الصفحة الرئيسية
├── features.html # صفحة الميزات
├── pricing.html # صفحة الأسعار
├── contact.html # صفحة الاتصال
├── main.js # ملف JavaScript الرئيسي
├── README.md # هذا الملف
├── .htaccess # إعدادات Apache
└── resources/ # مجلد الصور (اختياري)
- خادم ويب (Apache, Nginx, أو أي خادم HTTP)
- متصفح حديث يدعم ES6+
- اتصال بالإنترنت (للمكتبات الخارجية)
-
حمّل جميع الملفات
# انسخ جميع الملفات إلى مجلد المشروع cp -r educonnect-maroc/ /var/www/html/ -
تأكد من الصلاحيات
chmod -R 755 /var/www/html/educonnect-maroc/
-
افتح في المتصفح
http://localhost/educonnect-maroc/ أو http://yourdomain.com/
في ملف main.js، سطر 13:
currentLanguage: 'ar', // غيّر إلى 'en' أو 'fr'في أي ملف HTML، قسم <style>:
:root {
--primary-teal: #2C5F5D; /* اللون الأساسي */
--terracotta: #C4704A; /* لون ثانوي */
--cream: #F7F5F3; /* لون الخلفية */
--gold: #D4AF37; /* لون التمييز */
}جميع المكتبات تُحمّل من CDN:
- Tailwind CSS v3.x - للتصميم
- Anime.js v3.2.1 - للأنيميشن
- p5.js v1.7.0 - للخلفيات التفاعلية
- Splide.js v4.1.4 - للسلايدر
- ECharts v5.4.3 - للرسوم البيانية
- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
- ✅ Opera 76+
- 📱 موبايل (320px+)
- 📱 تابلت (768px+)
- 💻 ديسكتوب (1024px+)
- 🖥️ شاشات كبيرة (1440px+)
- تأكد من تحميل
main.jsفي نهاية<body> - افتح Console (F12) وتحقق من الأخطاء
- تأكد من وجود IDs في HTML
- تحقق من اتصال الإنترنت (المكتبات من CDN)
- تأكد من تحميل جميع المكتبات قبل
main.js
- تحقق من تحميل Tailwind CSS
- امسح الكاش (Ctrl+Shift+R)
- البريد الإلكتروني: contact@educonnect.ma
- الهاتف: +212 5 22 123 456
- الموقع: https://educonnect.ma
© 2024 EduConnect Maroc. جميع الحقوق محفوظة.
للمساهمة في تطوير المشروع:
- Fork المشروع
- أنشئ فرع جديد (
git checkout -b feature/amazing-feature) - Commit التغييرات (
git commit -m 'Add amazing feature') - Push إلى الفرع (
git push origin feature/amazing-feature) - افتح Pull Request
- انسخ
index.htmlكقالب - غيّر المحتوى
- أضف رابط في Navigation
- أضف الترجمات في
main.js
في main.js:
translations: {
ar: {
'new-id': 'النص بالعربية'
},
en: {
'new-id': 'English text'
},
fr: {
'new-id': 'Texte français'
}
}في HTML:
<p id="new-id">النص الافتراضي</p>- جميع النماذج تحتاج إلى backend للتعامل مع البيانات
- لا تُخزن بيانات حساسة في JavaScript
- استخدم HTTPS في الإنتاج
- قم بتنظيف المدخلات قبل الإرسال
- استخدم Lazy Loading للصور
- ضغط ملفات CSS و JS في الإنتاج
- تفعيل Gzip على الخادم
- استخدام CDN للملفات الثابتة
لإضافة Google Analytics:
<!-- في <head> -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>- للتطوير: XAMPP, WAMP, MAMP
- للإنتاج:
- Vercel (مجاني)
- Netlify (مجاني)
- GitHub Pages (مجاني)
- DigitalOcean
- AWS S3 + CloudFront
- إضافة Backend (Node.js/PHP)
- نظام تسجيل الدخول
- قاعدة بيانات
- API للتواصل
- لوحة تحكم إدارية
- تطبيق موبايل
صنع بـ ❤️ في المغرب 🇲🇦