لُطف | Lutf Medical Services

🇸🇦 نظرة عامة

• منصة واجهات عربية تقدم حزمة خدمات طبية تشمل التحليل التشخيصي، الحجز، وصرف الأدوية عبر صفحات HTML متعددة.
• تصميم متجاوب يعتمد على Bootstrap مع تأثيرات AOS ورسومات Chart.js لتنفيذ تجربة تفاعلية للزوار.
• المحتوى مكتوب بالعربية الفصحى مع لهجة سعودية في التنبيهات، ما يمنح طابعًا محليًا للخدمة.
• يدعم المشروع ملفات مستقلة لكل خدمة (مثل diagnosis.html, booking.html, services.html) لتسهيل التوسع والتخصص.

🇸🇦 أهم المزايا

• استبيان تشخيصي تفاعلي يقيس احتمالية الأمراض الشائعة ويعرض النتائج عبر مخطط Doughnut.
• نموذج حساب مستخدم في الـ Navbar يسمح بعرض بيانات الزائر وتحديثها مع معاينة للصورة الشخصية.
• صفحات للأخبار الطبية، المقالات، الأطباء، التخصصات، وفرص التوظيف، مما يخلق بوابة معلوماتية متكاملة.
• تأثيرات حركة ناعمة باستخدام AOS وتغذية بصرية عبر صور WebP محسّنة.
• تنبيهات SweetAlert2 مخصّصة بالعربية لتوجيه المستخدم أثناء التفاعل مع النماذج.

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

• Frontend: HTML5, CSS3, JavaScript (Vanilla)
• أطر وأدوات: Bootstrap 5.3, AOS, Font Awesome 6, Google Fonts (Cairo)
• مكتبات تفاعلية: Chart.js للعروض البيانية، SweetAlert2 للتنبيهات المنبثقة

🇸🇦 هيكل المجلدات (مختصر)

├─ index.html            # الصفحة الرئيسية
├─ diagnosis.html        # التحليل التشخيصي التفاعلي
├─ booking.html          # الحجز وإدارة المواعيد
├─ services.html         # قائمة الخدمات الطبية
├─ doctors.html          # فريق الأطباء والتخصصات
├─ script.js             # منطق الاستبيان والرسوم
├─ style.css             # الأنماط المشتركة
└─ img/                  # أصول الصور (WebP)

🇸🇦 تشغيل المشروع محليًا

• افتح index.html مباشرة في المتصفح المفضل لديك.
• (اختياري) استخدم خادم بسيط لضمان تحميل الأصول عبر http:
  • PowerShell: npx serve .
  • أو python -m http.server 8000
• بعد تشغيل الخادم، انتقل إلى http://localhost:8000/index.html.

🇸🇦 نصائح للتطوير

• حافظ على تسمية الملفات بالعربية لانسجام التجربة، مع ترجمة المحتوى عند الحاجة داخل الصفحات.
• أضف اختبارات إمكانية استخدام (Accessibility) خاصة عند استخدام المكونات الديناميكية.
• راجع الأداء عند إضافة صور جديدة، وفضل WebP أو ضغط JPEG/PNG.

---

🇬🇧 Overview

• Arabic-first multi-page website delivering medical services such as diagnostic assessments, appointment booking, and prescription fulfillment.
• Responsive layout powered by Bootstrap, with AOS scroll animations and Chart.js visual feedback for an engaging UX.
• Content blends Modern Standard Arabic with Saudi dialect prompts to build local trust in alerts and guidance.
• Each major service lives in its own HTML page (e.g., diagnosis.html, booking.html, services.html) for straightforward maintenance and scaling.

🇬🇧 Key Features

• Interactive diagnostic questionnaire that estimates risk levels for common conditions and renders a doughnut chart summary.
• Profile modal in the navbar to preview and update visitor details, including client-side avatar preview.
• Dedicated sections for medical news, articles, doctors, specialties, and careers, forming a comprehensive health portal.
• Smooth scroll-in animations via AOS and optimized WebP imagery for a polished look and feel.
• SweetAlert2 pop-ups localized in Arabic to guide users through form validation and feedback.

🇬🇧 Tech Stack

• Frontend: HTML5, CSS3, Vanilla JavaScript
• Frameworks & Utilities: Bootstrap 5.3, AOS, Font Awesome 6, Google Fonts (Cairo)
• Interactivity Libraries: Chart.js for data visualization, SweetAlert2 for modal alerts

🇬🇧 Project Structure (trimmed)

├─ index.html            # Landing page
├─ diagnosis.html        # Interactive diagnostic flow
├─ booking.html          # Appointment scheduling
├─ services.html         # Medical services catalogue
├─ doctors.html          # Physician roster and specialties
├─ script.js             # Questionnaire logic & chart rendering
├─ style.css             # Shared styling rules
└─ img/                  # Visual assets (WebP)

🇬🇧 Running Locally

• Open index.html directly in your browser for a quick preview.
• (Optional) serve the project over HTTP to avoid cross-origin issues:
  • PowerShell: npx serve .
  • or python -m http.server 8000
• Visit http://localhost:8000/index.html once the server is running.

🇬🇧 Development Tips

• Keep Arabic file naming consistent; introduce bilingual content inside the pages when expanding the experience.
• Audit accessibility when adding new dynamic components or overlays.
• Optimize new imagery (favor WebP or compressed formats) to maintain fast load times.