Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>فاحص | FAHIS - النظام الذكي لفحص الوافدين</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #0d9488 0%, #115e59 100%); | |
| } | |
| .device-mockup { | |
| background: url('https://images.unsplash.com/photo-1579113800032-c38bd7635818?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80') center/cover no-repeat; | |
| height: 500px; | |
| position: relative; | |
| border-radius: 30px; | |
| overflow: hidden; | |
| } | |
| .device-mockup::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(6, 95, 70, 0.7); | |
| } | |
| .step-card { | |
| transition: all 0.3s ease; | |
| } | |
| .step-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .feature-icon { | |
| width: 70px; | |
| height: 70px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| font-size: 30px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-6 py-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4 rtl:space-x-reverse"> | |
| <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center"> | |
| <i class="fas fa-medkit text-teal-800 text-xl"></i> | |
| </div> | |
| <div class="text-xl font-bold">فاحص <span class="font-normal">| FAHIS</span></div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-10 rtl:space-x-reverse"> | |
| <a href="#" class="hover:text-teal-200">الرئيسية</a> | |
| <a href="#" class="hover:text-teal-200">عن النظام</a> | |
| <a href="#" class="hover:text-teal-200">المميزات</a> | |
| <a href="#" class="hover:text-teal-200">الاسئلة الشائعة</a> | |
| <a href="#" class="hover:text-teal-200">اتصل بنا</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button class="mobile-menu-button"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-20"> | |
| <div class="container mx-auto px-6 flex flex-col-reverse md:flex-row items-center"> | |
| <div class="md:w-1/2 flex flex-col items-start mt-10 md:mt-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">نظام <span class="text-teal-200">فاحص</span> الذكي لفحص الوافدين</h1> | |
| <p class="text-xl mb-8 text-teal-100">صحتك مسؤوليتنا... وموثوقيتك أولوية</p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <button class="bg-white text-teal-800 hover:bg-teal-100 px-8 py-3 rounded-lg font-bold transition duration-300 flex items-center"> | |
| <i class="fas fa-download ml-2"></i> حمل التطبيق الآن | |
| </button> | |
| <button class="border-2 border-white text-white hover:bg-white hover:text-teal-800 px-8 py-3 rounded-lg font-bold transition duration-300"> | |
| <i class="fas fa-play-circle ml-2"></i> شاهد الفيديو | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="device-mockup w-full"> | |
| <div class="absolute inset-0 flex items-center justify-center p-10"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-white rounded-full mx-auto flex items-center justify-center mb-4"> | |
| <i class="fas fa-heartbeat text-teal-800 text-2xl"></i> | |
| </div> | |
| <h3 class="text-white text-xl font-bold mb-2">فحص طبي دقيق</h3> | |
| <p class="text-teal-100">نتائج فورية خلال دقائق</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About System --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">تعزيز موثوقية فحص الوافدين</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">نظام تكاملي يستخدم أحدث التقنيات الذكية للفحص الطبي للوافدين إلى المملكة العربية السعودية</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-10"> | |
| <div class="bg-gray-50 rounded-lg p-8 shadow-lg text-center step-card"> | |
| <div class="feature-icon bg-teal-100 text-teal-800 mx-auto mb-6"> | |
| <i class="fas fa-microchip"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">الجهاز الذكي</h3> | |
| <p class="text-gray-600">جهاز محمول بحجم كف اليد لفحص الدم والتصوير باستخدام تقنيات متقدمة بدون جراحة</p> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-8 shadow-lg text-center step-card"> | |
| <div class="feature-icon bg-teal-100 text-teal-800 mx-auto mb-6"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">تطبيق موبايل</h3> | |
| <p class="text-gray-600">ربط الجهاز بالهاتف الذكي لعرض النتائج الأولية ورفع البيانات إلى المنصة المركزية</p> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-8 shadow-lg text-center step-card"> | |
| <div class="feature-icon bg-teal-100 text-teal-800 mx-auto mb-6"> | |
| <i class="fas fa-server"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">منصة سحابية</h3> | |
| <p class="text-gray-600">معالجة البيانات وتحليلها باستخدام الذكاء الاصطناعي واتخاذ القرارات الطبية</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">كيف يعمل نظام فاحص؟</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">4 خطوات بسيطة لفحص آمن ودقيق</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div class="bg-white rounded-lg p-6 shadow-md text-center step-card"> | |
| <div class="w-16 h-16 bg-teal-100 text-teal-800 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-2xl font-bold">1</span> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2">تسجيل البيانات</h3> | |
| <p class="text-gray-600 text-sm">يقوم الوافد بتسجيل بياناته الشخصية عبر التطبيق أو في مراكز الفحص المعتمدة</p> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 shadow-md text-center step-card"> | |
| <div class="w-16 h-16 bg-teal-100 text-teal-800 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-2xl font-bold">2</span> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2">إجراء الفحص</h3> | |
| <p class="text-gray-600 text-sm">يتم إجراء الفحص الطبي باستخدام الجهاز الذكي الذي يأخذ عينة دم ويقوم بالتحليل</p> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 shadow-md text-center step-card"> | |
| <div class="w-16 h-16 bg-teal-100 text-teal-800 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-2xl font-bold">3</span> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2">تحليل البيانات</h3> | |
| <p class="text-gray-600 text-sm">يتم تحليل البيانات بواسطة الذكاء الاصطناعي وإرسال النتائج للمنصة المركزية</p> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 shadow-md text-center step-card"> | |
| <div class="w-16 h-16 bg-teal-100 text-teal-800 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-2xl font-bold">4</span> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2">إصدار النتيجة</h3> | |
| <p class="text-gray-600 text-sm">إصدار نتيجة الفحص وإرسالها تلقائيًا للجهات المعنية في أقل من 15 دقيقة</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">مميزات نظام فاحص</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">تقنيات متطورة لصحة أفضل وأمان أعلى</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10"> | |
| <div class="flex items-start"> | |
| <div class="bg-teal-100 text-teal-800 p-3 rounded-full mr-4 mt-1"> | |
| <i class="fas fa-bolt text-lg"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">نتائج فورية</h3> | |
| <p class="text-gray-600">الحصول على نتائج الفحص خلال دقائق معدودة بدقة عالية</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-teal-100 text-teal-800 p-3 rounded-full mr-4 mt-1"> | |
| <i class="fas fa-shield-alt text-lg"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">آمان تام</h3> | |
| <p class="text-gray-600">تشريفر متكامل وحماية قوية للبيانات الشخصية والطبية</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-teal-100 text-teal-800 p-3 rounded-full mr-4 mt-1"> | |
| <i class="fas fa-brain text-lg"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">ذكاء اصطناعي</h3> | |
| <p class="text-gray-600">تحليل متقدم للبيانات الطبية باستخدام أحدث تقنيات الذكاء الاصطناعي</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-teal-100 text-teal-800 p-3 rounded-full mr-4 mt-1"> | |
| <i class="fas fa-link text-lg"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">تكامل حكومي</h3> | |
| <p class="text-gray-600">ربط مباشر مع أنظمة وزارة الصحة والجهات الحكومية المختصة</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-teal-100 text-teal-800 p-3 rounded-full mr-4 mt-1"> | |
| <i class="fas fa-history text-lg"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">سجل طبي</h3> | |
| <p class="text-gray-600">حفظ جميع الفحوصات السابقة ونتائجها في سجل طبي رقمي</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-teal-100 text-teal-800 p-3 rounded-full mr-4 mt-1"> | |
| <i class="fas fa-globe text-lg"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2">دعم متعدد اللغات</h3> | |
| <p class="text-gray-600">واجهة مستخدم متعددة اللغات لتلبية احتياجات جميع الوافدين</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tests Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">الفحوصات الطبية المتاحة</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">نقدم مجموعة شاملة من الفحوصات الأساسية للوافدين</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="bg-white p-6 rounded-lg shadow-md border-r-4 border-teal-500"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-teal-100 text-teal-800 p-2 rounded-full mr-3"> | |
| <i class="fas fa-viruses"></i> | |
| </div> | |
| <h3 class="font-bold">فحوصات الأمراض المعدية</h3> | |
| </div> | |
| <ul class="text-gray-600 text-sm space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-teal-500 mr-2"></i> الإيدز (HIV) | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-teal-500 mr-2"></i> التهاب الكبد B و C | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-teal-500 mr-2"></i> الملاريا | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-teal-500 mr-2"></i> السل الرئوي | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md border-r-4 border-green-500"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-green-100 text-green-800 p-2 rounded-full mr-3"> | |
| <i class="fas fa-heartbeat"></i> | |
| </div> | |
| <h3 class="font-bold">فحوصات الدم</h3> | |
| </div> | |
| <ul class="text-gray-600 text-sm space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> صورة الدم الكاملة (CBC) | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> فصيلة الدم | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> أنيميا الدم | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> تخثر الدم | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md border-r-4 border-blue-500"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-blue-100 text-blue-800 p-2 rounded-full mr-3"> | |
| <i class="fas fa-x-ray"></i> | |
| </div> | |
| <h3 class="font-bold">تصوير طبي</h3> | |
| </div> | |
| <ul class="text-gray-600 text-sm space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> تصوير الرئة | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> فحص الكشف عن TB | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> فحص الكشف عن تليف الكبد | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md border-r-4 border-purple-500"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-purple-100 text-purple-800 p-2 rounded-full mr-3"> | |
| <i class="fas fa-flask"></i> | |
| </div> | |
| <h3 class="font-bold">فحوصات بيوكيميائية</h3> | |
| </div> | |
| <ul class="text-gray-600 text-sm space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-500 mr-2"></i> وظائف الكبد | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-500 mr-2"></i> وظائف الكلى | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-500 mr-2"></i> السكري | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-purple-500 mr-2"></i> الدهون الثلاثية | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Statistics --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div> | |
| <div class="text-4xl font-bold mb-2" id="happyUsers">0</div> | |
| <div class="text-teal-200">حالة فحص يوميًا</div> | |
| </div> | |
| <div> | |
| <div class="text-4xl font-bold mb-2" id="testsDone">0</div> | |
| <div class="text-teal-200">فحص مكتمل</div> | |
| </div> | |
| <div> | |
| <div class="text-4xl font-bold mb-2" id="govPartners">0</div> | |
| <div class="text-teal-200">جهة حكومية متكاملة</div> | |
| </div> | |
| <div> | |
| <div class="text-4xl font-bold mb-2" id="labsNetwork">0</div> | |
| <div class="text-teal-200">مختبر معتمد</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Target Audience --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">الفئات المستهدفة</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">نظام فاحص مصمم خصيصًا للفئات التالية</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="bg-gray-50 rounded-lg p-6 shadow-md text-center transition-transform hover:scale-105"> | |
| <div class="w-20 h-20 bg-teal-100 text-teal-800 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-house-user text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">العمالة المنزلية</h3> | |
| <p class="text-gray-600 text-sm">العاملات المنزليات والمربيات وسائقات المنازل</p> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-6 shadow-md text-center transition-transform hover:scale-105"> | |
| <div class="w-20 h-20 bg-blue-100 text-blue-800 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-user-md text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">القطاع الطبي</h3> | |
| <p class="text-gray-600 text-sm">الأطباء والممرضين والفنيين العاملين في المجال الصحي</p> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-6 shadow-md text-center transition-transform hover:scale-105"> | |
| <div class="w-20 h-20 bg-orange-100 text-orange-800 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-hard-hat text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">العمالة الإنشائية</h3> | |
| <p class="text-gray-600 text-sm">العاملين في قطاع البناء والتشييد والمقاولات</p> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-6 shadow-md text-center transition-transform hover:scale-105"> | |
| <div class="w-20 h-20 bg-purple-100 text-purple-800 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-plane-departure text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">الزوار</h3> | |
| <p class="text-gray-600 text-sm">الوافدين لأغراض طويلة الأمد مثل الدراسة والعمل</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-teal-700 text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">جاهز لبدء استخدام نظام فاحص؟</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">انضم إلى المنصة الأكثر تطورًا لفحص الوافدين في المملكة العربية السعودية</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-white text-teal-800 hover:bg-teal-100 px-8 py-3 rounded-lg font-bold transition duration-300 flex items-center justify-center"> | |
| <i class="fas fa-user-tie ml-2"></i> تسجيل جهة حكومية | |
| </button> | |
| <button class="border-2 border-white hover:bg-white hover:text-teal-800 px-8 py-3 rounded-lg font-bold transition duration-300 flex items-center justify-center"> | |
| <i class="fas fa-hospital ml-2"></i> تسجيل مختبر معتمد | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-16 pb-8"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-10"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-medkit text-teal-800"></i> | |
| </div> | |
| <div class="text-xl font-bold">فاحص</div> | |
| </div> | |
| <p class="text-gray-400 text-sm">صحتك مسؤوليتنا... وموثوقيتك أولوية</p> | |
| <div class="flex space-x-4 rtl:space-x-reverse mt-6"> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-teal-700"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-teal-700"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-teal-700"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-teal-700"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">روابط سريعة</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-teal-400">الرئيسية</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-teal-400">عن النظام</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-teal-400">المميزات</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-teal-400">الاسئلة الشائعة</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-teal-400">اتصل بنا</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">تواصل معنا</h3> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-2 text-teal-400"></i> | |
| <span>المملكة العربية السعودية، الرياض</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-phone-alt mt-1 mr-2 text-teal-400"></i> | |
| <span>920000000</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-envelope mt-1 mr-2 text-teal-400"></i> | |
| <span>info@fahis.sa</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">حمل التطبيق</h3> | |
| <div class="space-y-3"> | |
| <a href="#" class="flex items-center bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg transition"> | |
| <i class="fab fa-apple text-2xl mr-3"></i> | |
| <div> | |
| <div class="text-xs">Download on the</div> | |
| <div class="font-bold">App Store</div> | |
| </div> | |
| </a> | |
| <a href="#" class="flex items-center bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg transition"> | |
| <i class="fab fa-google-play text-2xl mr-3"></i> | |
| <div> | |
| <div class="text-xs">Get it on</div> | |
| <div class="font-bold">Google Play</div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="text-gray-400 text-sm mb-4 md:mb-0"> | |
| © 2023 فاحص FAHIS. جميع الحقوق محفوظة. | |
| </div> | |
| <div class="flex space-x-6 rtl:space-x-reverse"> | |
| <a href="#" class="text-gray-400 hover:text-teal-400 text-sm">شروط الخدمة</a> | |
| <a href="#" class="text-gray-400 hover:text-teal-400 text-sm">سياسة الخصوصية</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.querySelector('.mobile-menu-button').addEventListener('click', function() { | |
| // This would toggle a mobile menu - implementation depends on your need | |
| console.log('Mobile menu clicked'); | |
| }); | |
| // Counter animation for statistics | |
| function animateValue(id, start, end, duration) { | |
| const obj = document.getElementById(id); | |
| let startTimestamp = null; | |
| const step = (timestamp) => { | |
| if (!startTimestamp) startTimestamp = timestamp; | |
| const progress = Math.min((timestamp - startTimestamp) / duration, 1); | |
| obj.innerHTML = Math.floor(progress * (end - start) + start); | |
| if (progress < 1) { | |
| window.requestAnimationFrame(step); | |
| } | |
| }; | |
| window.requestAnimationFrame(step); | |
| } | |
| // Animate counters when they come into view | |
| window.addEventListener('scroll', function() { | |
| const statsSection = document.querySelector('section.bg-teal-800'); | |
| if (isInViewport(statsSection)) { | |
| animateValue("happyUsers", 0, 5000, 2000); | |
| animateValue("testsDone", 0, 25000, 2000); | |
| animateValue("govPartners", 0, 12, 1500); | |
| animateValue("labsNetwork", 0, 85, 2000); | |
| // Remove the event listener after the animation runs | |
| window.removeEventListener('scroll', this); | |
| } | |
| }); | |
| function isInViewport(element) { | |
| if (!element) return false; | |
| const rect = element.getBoundingClientRect(); | |
| return ( | |
| rect.top <= (window.innerHeight || document.documentElement.clientHeight) && | |
| rect.bottom >= 0 | |
| ); | |
| } | |
| </script> | |
| </html> |