مكتبة إلكترونية متكاملة صُمِّمت خصيصًا لتوفير تجربة قراءة وشراء سلسة للزوار، مع دعم ثلاث لغات (العربية، الإنجليزية، التركية). يهدف المشروع إلى عرض كتب مجانية ومدفوعة بأسلوبٍ جذاب، وتمكين المستخدم من ترجمة النصوص في الصفحة بشكل فوري، بالإضافة إلى فئات وفلترة سهلة للعثور على المحتوى المطلوب
دعم تعدد اللغات (عربي–إنجليزي–تركي):
واجهة المستخدم تحتوي على أزرار ترجمة فورية تتيح للزائر إدخال نص في مربعٍ واحد والحصول عليه مترجمًا بشكل آني إلى أي من اللغات الثلاث.
جميع عناصر القائمة والعناوين والنُصوص الثابتة قابلة للترجمة دون إعادة تحميل الصفحة.
تصميم متجاوب 100% (Responsive):
استخدام (CSS3 Grid وFlexbox) لضمان ترتيب العناصر تلقائيًا وفقًا لحجم الشاشة.
اختبارات على الهواتف الذكية، التابلت، وشاشات سطح المكتب للتأكد من سهولة التنقل والقراءة في جميع الأجهزة.
عرض الكتب ديناميكيًا من ملف بيانات (JSON):
جميع معلومات الكتب (العنوان، الناشر، تاريخ النشر، النوع الورقي أو الرقمي، السعر، رابط التحميل، الوصف) محفوظة في ملف موحد (books.json).
عند تحميل الصفحة، يتم جلب البيانات عبر JavaScript وإنشاء بطاقات عرض لكل كتاب تلقائيًا، مما يسهل إضافة أو تعديل الكتب دون الحاجة لتعديل HTML.
تقسيم الكتب إلى فئتين رئيسيتين:
كتب مجانية جديدة (Free Books New): تعرض أحدث الإصدارات المجانية مع معلومات كاملة ورابط تحميل iKitab للأجهزة اللوحية والهواتف الذكية.
كتب مميزة ومدفوعة (Books Amazing): تعرض أكثر الكتب مبيعًا وكتب الجوائز النادرة بنماذج ورقية وإلكترونية، مع تحديد السعر وخيار “عرض المزيد” لقراءة نبذة تفصيلية.
نظام “عرض المزيد” (Show More) مُدمج في البطاقات:
عند النقر على زر “عرض المزيد” ضمن بطاقة أي كتاب، يظهر نافذة منبثقة (Modal) تعرض الوصف الكامل، صيغ الكتاب المتوفرة، رابط التحميل المباشر أو إمكانية الشراء.
قوائم أقسام متنوعة وأكسسوارات:
تصنيفات في الصفحة الرئيسية تشمل: العودة للمدارس، أكسسوارات الكتب، أكسسوارات منزلية، ملابس، حقائب، حلي، صابون، مأكولات، مناسبات، وصندوق القراءة “كتب بلا حدود”.
يمكن للمستخدم الضغط على أي قسم لرؤية الكتب المرتبطة به (تصفية JavaScript بسيطة تقوم بإظهار/إخفاء البطاقات بناءً على الخاصية data-category).
شريط تنقل علوي (Navbar) ثابت وسهل الاستخدام:
رابط مباشر إلى الصفحة الرئيسية، روابط للأقسام الفرعية (Home – Trips – إلخ)، مع شريط بحث في أعلى الصفحة للبحث النصي داخل جميع الكتب في الوقت الحقيقي (Instant Search).
خاصية “اشتراك بالبريد الإلكتروني” (Join Us / Subscribe):
نموذج بسيط في أسفل الصفحة لإدخال البريد الإلكتروني.
عند الضغط على “Subscribe Now”، يتم التحقق من صحة البريد عبر JavaScript ثم إرسال الطلب (ثابت أو وهمي) إلى خدمة رسائل تسويقية أو API خارجية (قابلة للربط لاحقًا مع MailChimp).
قائمة أيقونات التواصل الاجتماعي في التذييل:
أيقونات لصفحات فيسبوك، تويتر، إنستاغرام، جيتهاب، ويوتيوب.
عند الضغط على أي أيقونة، يفتح الرابط في نافذة جديدة (target="_blank") لتشجيع التفاعل.
قسم “معلومات الاتصال” وبيانات الشركة:
عرض رقم الهاتف والعنوان (Sana’a) والفاكس في القسم السفلي من الصفحة.
فقرة تعريفية بسيطة عن الشركة (“Good Company” – “Your health is more important”) والرؤية المستقبلية (“Services for all” – “Provide best services” – “You will be better than before”).
تحسين تجربة الاستخدام (UX):
ألوان متناسقة وواضحة (خلفية بيضاء أو فاتحة للقراءة، أزرار بألوان متباينة للفت الانتباه).
تباعد بين العناصر (Spacing) وخطوط مقروءة (Font-size مناسب) لراحة العين.
رسوم انتقالية (Transition) خفيفة على الأزرار وعند فتح النوافذ المنبثقة لخلق انسيابية سلسة.
تهيئة الأداء (Performance):
ضغط الصور (Compression) قبل إضافتها داخل مجلد assets/images/.
تصغير ملفات CSS وJavaScript النهائية (Minification) لتسريع التحميل.
تحميل مكتبات خارجية (jQuery، Bootstrap، المكتبات الخاصة بالترجمة) عبر CDN للاستفادة من التخزين المؤقت (Cache).