Pharmacy Show case website - موقع عرض اعمال وتسويق صيدلية
تفاصيل العمل
CareWell Pharmacy - موقع صيدلية احترافي
========================================
وصف المشروع
------------
موقع ويب متكامل لصيدلية CareWell مصمم بتقنيات الويب الأساسية (HTML5, CSS3, JavaScript) بدون استخدام أي إطارات عمل خارجية. يوفر الموقع تجربة مستخدم سلسة وحديثة للعملاء الباحثين عن خدمات صيدلانية احترافية.
الهدف من المشروع
-----------------
تطوير موقع إلكتروني احترافي يعرض خدمات الصيدلية ويسهل التواصل مع العملاء، مع التركيز على الأداء العالي والتصميم المتجاوب.
التقنيات المستخدمة
-------------------
• HTML5: بنية دلالية (Semantic) لتحسين محركات البحث وإمكانية الوصول
• CSS3 النقي: نظام تصميم متكامل باستخدام CSS Variables، Grid، Flexbox
• Vanilla JavaScript ES6+: وظائف تفاعلية بدون مكتبات خارجية
• Font Awesome: أيقونات احترافية
• Google Fonts: خط Plus Jakarta Sans
المميزات الرئيسية
------------------
1. تصميم متجاوب بالكامل
- متوافق مع جميع الأجهزة (موبايل، تابلت، ديسكتوب)
- نهج Mobile-First في التطوير
- محسّن خصيصاً لأجهزة iPad
2. واجهة مستخدم حديثة
- تصميم عصري بألوان متناسقة (Teal & Coral)
- ظلال وتأثيرات بصرية جذابة
- رسوم متحركة سلسة عند التمرير (Scroll Animations)
3. أربع صفحات متكاملة
- الرئيسية: Hero section مع خلفية صورة، عرض الخدمات الرئيسية
- الخدمات: عرض شامل للخدمات والمنتجات مع جدول أسعار
- من نحن: قصة الشركة، الرؤية، الفروع، إحصائيات
- اتصل بنا: نموذج تواصل مع التحقق الفوري من البيانات
4. نموذج تواصل ذكي
- التحقق الفوري من البيانات (Real-time Validation)
- رسائل خطأ واضحة ومفيدة
- تأكيد بصري للحقول الصحيحة
- تجربة مستخدم سلسة
5. تحسين الأداء
- تحميل الصور الكسول (Lazy Loading)
- ملف CSS واحد لتقليل طلبات HTTP
- كود JavaScript محسّن وخفيف
- استخدام Intersection Observer API للرسوم المتحركة
6. إمكانية الوصول (Accessibility)
- استخدام HTML الدلالي
- دعم التنقل بلوحة المفاتيح
- تباين ألوان متوافق مع معايير WCAG 2.1 AA
- نصوص بديلة للصور وأيقونات ARIA
طريقة التنفيذ
--------------
البنية المعمارية:
• 4 صفحات HTML (index, services, about, contact)
• ملف CSS واحد منظم بنظام BEM
• ملفين JavaScript (main.js, form-validation.js)
• مجلد الصور والأصول
نظام التصميم:
• متغيرات CSS: ألوان، مسافات، ظلال موحدة
• Grid System: نظام شبكي مرن (1-4 أعمدة)
• Typography Scale: أحجام خطوط متدرجة
• Spacing Scale: نظام مسافات ثابت (8px base)
الوظائف التفاعلية:
• قائمة تنقل متجاوبة (Hamburger Menu)
• تمييز الصفحة النشطة تلقائياً
• زر العودة للأعلى
• رسوم متحركة عند ظهور العناصر
• نموذج تواصل بتحقق شامل
النتائج
--------
• موقع سريع وخفيف (بدون dependencies ثقيلة)
• متوافق مع جميع المتصفحات الحديثة
• تجربة مستخدم سلسة على جميع الأجهزة
• كود نظيف وقابل للصيانة
• جاهز للنشر مباشرة بدون عملية Build
========================================
تم التطوير باستخدام: HTML5 | CSS3 | Vanilla JavaScript
النوع: موقع ويب متجاوب (Responsive Website)
الصفحات: 4 صفحات متكاملة
========================================