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>HemoSpace - مستقبل التحاليل الدموية</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, #6b46c1 0%, #3b82f6 100%); | |
| } | |
| .device-shadow { | |
| box-shadow: 0 20px 50px rgba(59, 130, 246, 0.3); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1); | |
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); | |
| } | |
| 70% { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); | |
| } | |
| } | |
| .fade-in { | |
| animation: fadeIn 1.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .section-divider { | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5), transparent); | |
| } | |
| .tab-button.active { | |
| border-bottom: 3px solid #6b46c1; | |
| color: #6b46c1; | |
| font-weight: bold; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .feature-card { | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white shadow-lg fixed w-full z-50"> | |
| <div class="container mx-auto px-6 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-heartbeat text-3xl"></i> | |
| <a href="#" class="text-xl font-bold">HemoSpace</a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-10"> | |
| <a href="#about" class="hover:text-gray-200">عن المنصة</a> | |
| <a href="#features" class="hover:text-gray-200">المميزات</a> | |
| <a href="#how-it-works" class="hover:text-gray-200">كيف تعمل</a> | |
| <a href="#tests" class="hover:text-gray-200">الفحوصات</a> | |
| <a href="#contact" class="hover:text-gray-200">تواصل معنا</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="menu-btn" class="text-white focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-indigo-700 px-2 pt-2 pb-3 space-y-1"> | |
| <a href="#about" class="block px-3 py-2 rounded-md text-white hover:bg-indigo-600">عن المنصة</a> | |
| <a href="#features" class="block px-3 py-2 rounded-md text-white hover:bg-indigo-600">المميزات</a> | |
| <a href="#how-it-works" class="block px-3 py-2 rounded-md text-white hover:bg-indigo-600">كيف تعمل</a> | |
| <a href="#tests" class="block px-3 py-2 rounded-md text-white hover:bg-indigo-600">الفحوصات</a> | |
| <a href="#contact" class="block px-3 py-2 rounded-md text-white hover:bg-indigo-600">تواصل معنا</a> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white pt-32 pb-20 md:pt-40 md:pb-32"> | |
| <div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-16 md:mb-0 fade-in"> | |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6"> | |
| نقطة دم واحدة، صورة كاملة لصحتك | |
| </h1> | |
| <p class="text-xl mb-8"> | |
| نظام متكامل للتحاليل الدموية الذكية باستخدام تقنيات الأشعة الطيفية والذكاء الاصطناعي لتقديم رعاية صحية شخصية لك ولأسرتك | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-indigo-700 hover:bg-gray-100 px-8 py-3 rounded-full font-semibold pulse-animation"> | |
| جرب الآن مجانًا <i class="fas fa-chevron-left mr-2"></i> | |
| </button> | |
| <button class="border-2 border-white text-white hover:bg-white hover:text-indigo-700 px-8 py-3 rounded-full font-semibold"> | |
| شاهد كيف يعمل <i class="fas fa-play-circle mr-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center fade-in"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/500x500" alt="HemoSpace Device" class="rounded-2xl device-shadow w-64 md:w-80"> | |
| <div class="absolute -bottom-6 -right-6 bg-white rounded-xl shadow-lg p-4"> | |
| <div class="text-indigo-700 text-center"> | |
| <i class="fas fa-chart-line text-3xl mb-2"></i> | |
| <p class="font-bold">تحليل فوري</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" 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">منصة HemoSpace السحابية</h2> | |
| <p class="max-w-2xl mx-auto text-lg text-gray-600"> | |
| حوار متكامل بين الحلول التقنية المبتكرة والممارسات الصحية لتقديم رعاية طبية أسرع وأكثر دقة | |
| </p> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center mb-16"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <img src="https://via.placeholder.com/600x400" alt="HemoSpace Cloud Platform" class="rounded-lg shadow-xl"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-2xl font-bold text-indigo-700 mb-6">مستقبل التحاليل الدموية في راحة يدك</h3> | |
| <p class="text-gray-600 mb-6"> | |
| تقدم HemoSpace نظامًا ثوريًا يجمع بين جهاز محمول ذكي وتطبيق جوال ومنصة سحابية متقدمة لتحليل الدم باستخدام تقنيات الأشعة الطيفية بدقة عالية، دون الحاجة إلى مختبرات تقليدية. | |
| </p> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 text-xl mt-1 mr-3"></i> | |
| <span class="text-gray-700">تحليل 24/7 في أي وقت ومكان</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 text-xl mt-1 mr-3"></i> | |
| <span class="text-gray-700">نتائج فورية ودقيقة باستخدام الذكاء الاصطناعي</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 text-xl mt-1 mr-3"></i> | |
| <span class="text-gray-700">ربط مباشر مع الأطباء والمراكز الصحية</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="section-divider my-16"></div> | |
| <div class="grid md:grid-cols-3 gap-10"> | |
| <div class="bg-indigo-50 rounded-xl p-8 text-center"> | |
| <div class="bg-indigo-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-mobile-alt text-indigo-700 text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-indigo-700">الجهاز الذكي</h3> | |
| <p class="text-gray-600"> | |
| جهاز محمول بحجم كف اليد يعمل بتقنيات الأشعة الطيفية لتحليل نقطة الدم بدقة عالية | |
| </p> | |
| </div> | |
| <div class="bg-blue-50 rounded-xl p-8 text-center"> | |
| <div class="bg-blue-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-mobile text-blue-700 text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-blue-700">التطبيق الذكي</h3> | |
| <p class="text-gray-600"> | |
| يعرض نتائج التحاليل فورًا ويقدم توصيات ذكية بناءً على الذكاء الاصطناعي | |
| </p> | |
| </div> | |
| <div class="bg-purple-50 rounded-xl p-8 text-center"> | |
| <div class="bg-purple-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-cloud text-purple-700 text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-purple-700">المنصة السحابية</h3> | |
| <p class="text-gray-600"> | |
| نظام متكامل لتخزين وتحليل البيانات الصحية على المدى الطويل | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section id="how-it-works" 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">كيف يعمل نظام HemoSpace؟</h2> | |
| <p class="max-w-2xl mx-auto text-lg text-gray-600"> | |
| ستة خطوات بسيطة تفصل بينك وبين نتائج تحاليلك الدموية الكاملة | |
| </p> | |
| </div> | |
| <div class="relative"> | |
| <div class="hidden md:block absolute h-full w-0.5 bg-gradient-to-b from-indigo-500 to-blue-500 left-1/2 -ml-0.5"></div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Step 1 --> | |
| <div class="md:pr-16"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg relative"> | |
| <div class="absolute -right-2 top-8 w-4 h-4 rounded-full bg-indigo-600 md:right-auto md:-left-2"></div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-100 rounded-full w-12 h-12 flex items-center justify-center mr-4"> | |
| <span class="text-indigo-700 font-bold text-xl">1</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-indigo-700">سحب عينة الدم</h3> | |
| </div> | |
| <p class="text-gray-600"> | |
| باستخدام إبرة دقيقة متطورة، يتم سحب نقطة دم واحدة فقط من طرف الإصبع في ثوانٍ معدودة ودون ألم تقريبًا | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="md:pl-16 md:mt-20"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg relative"> | |
| <div class="absolute -right-2 top-8 w-4 h-4 rounded-full bg-blue-600 md:right-auto md:-left-2"></div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 rounded-full w-12 h-12 flex items-center justify-center mr-4"> | |
| <span class="text-blue-700 font-bold text-xl">2</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-700">تحليل الأشعة الطيفية</h3> | |
| </div> | |
| <p class="text-gray-600"> | |
| يقوم الجهاز بتحليل العينة فورًا باستخدام تقنيات الأشعة الطيفية المتطورة لتحديد مكونات الدم المختلفة بدقة عالية | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="md:pr-16"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg relative"> | |
| <div class="absolute -right-2 top-8 w-4 h-4 rounded-full bg-indigo-600 md:right-auto md:-left-2"></div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-100 rounded-full w-12 h-12 flex items-center justify-center mr-4"> | |
| <span class="text-indigo-700 font-bold text-xl">3</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-indigo-700">الاتصال بالجوال الذكي</h3> | |
| </div> | |
| <p class="text-gray-600"> | |
| ينقل الجهاز النتائج الأولية عبر تقنية Bluetooth إلى التطبيق الخاص بنا على الهاتف الذكي في ثوانٍ معدودة | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="md:pl-16"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg relative"> | |
| <div class="absolute -right-2 top-8 w-4 h-4 rounded-full bg-blue-600 md:right-auto md:-left-2"></div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 rounded-full w-12 h-12 flex items-center justify-center mr-4"> | |
| <span class="text-blue-700 font-bold text-xl">4</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-700">عرض النتائج بصريًا</h3> | |
| </div> | |
| <p class="text-gray-600"> | |
| يعرض التطبيق النتائج بصورة واضحة وسهلة الفهم مع رسوم بيانية توضيحية ومقارنة مع القيم الطبيعية | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Step 5 --> | |
| <div class="md:pr-16"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg relative"> | |
| <div class="absolute -right-2 top-8 w-4 h-4 rounded-full bg-indigo-600 md:right-auto md:-left-2"></div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-100 rounded-full w-12 h-12 flex items-center justify-center mr-4"> | |
| <span class="text-indigo-700 font-bold text-xl">5</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-indigo-700">تحميل البيانات للسحابة</h3> | |
| </div> | |
| <p class="text-gray-600"> | |
| يتم تخزين النتائج تلقائيًا على المنصة السحابية لتكون متاحة لك ولطبيبك في أي وقت ومكان | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Step 6 --> | |
| <div class="md:pl-16"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg relative"> | |
| <div class="absolute -right-2 top-8 w-4 h-4 rounded-full bg-blue-600 md:right-auto md:-left-2"></div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 rounded-full w-12 h-12 flex items-center justify-center mr-4"> | |
| <span class="text-blue-700 font-bold text-xl">6</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-700">تحليل الذكاء الاصطناعي</h3> | |
| </div> | |
| <p class="text-gray-600"> | |
| تقوم خوارزميات الذكاء الاصطناعي بتحليل نتائجك وتقديم توقعات وتوصيات مبنية على أحدث الأبحاث الطبية | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" 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">لماذا تختار HemoSpace؟</h2> | |
| <p class="max-w-2xl mx-auto text-lg text-gray-600"> | |
| نقلة نوعية في عالم التحاليل الدموية تقدم لك مميزات لا مثيل لها | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card bg-gray-50 rounded-xl p-8 border border-gray-200"> | |
| <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mb-6"> | |
| <i class="fas fa-bolt text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-indigo-700">سرعة التحليل</h3> | |
| <p class="text-gray-600"> | |
| نتائج فورية خلال دقائق معدودة بدلًا من انتظار أيام كما في المختبرات التقليدية | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card bg-gray-50 rounded-xl p-8 border border-gray-200"> | |
| <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-6"> | |
| <i class="fas fa-lock text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-blue-700">خصوصية تامة</h3> | |
| <p class="text-gray-600"> | |
| تشفير متقدم لبياناتك الصحية وفق معايير HIPAA وGDPR العالمية لضمان خصوصيتك | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card bg-gray-50 rounded-xl p-8 border border-gray-200"> | |
| <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6"> | |
| <i class="fas fa-chart-line text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-purple-700">تتبع طويل الأجل</h3> | |
| <p class="text-gray-600"> | |
| مراقبة تطوراتك الصحية عبر الزمن مع رسوم بيانية تفاعلية وتنبيهات مهمة | |
| </p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="feature-card bg-gray-50 rounded-xl p-8 border border-gray-200"> | |
| <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mb-6"> | |
| <i class="fas fa-user-md text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-green-700">رعاية متكاملة</h3> | |
| <p class="text-gray-600"> | |
| تكامل مع الأطباء المتابعين لحالتك لضمان رعاية صحية متكاملة ودقيقة | |
| </p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="feature-card bg-gray-50 rounded-xl p-8 border border-gray-200"> | |
| <div class="w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center mb-6"> | |
| <i class="fas fa-battery-three-quarters text-yellow-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-yellow-700">جهاز طويل الأمد</h3> | |
| <p class="text-gray-600"> | |
| بطارية تدوم لأيام وقطع غيار متوفرة بسهولة لضمان استمرارية الخدمة | |
| </p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="feature-card bg-gray-50 rounded-xl p-8 border border-gray-200"> | |
| <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mb-6"> | |
| <i class="fas fa-shield-alt text-red-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-red-700">أمان ودقة</h3> | |
| <p class="text-gray-600"> | |
| نتائج معتمدة وموثوقة بدقة تصل إلى 99.8% مقارنة بالمختبرات المركزية | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tests Section --> | |
| <section id="tests" 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="max-w-2xl mx-auto text-lg text-gray-600"> | |
| مجموعة واسعة من التحاليل الحيوية التي يمكن إجراؤها فورًا باستخدام HemoSpace | |
| </p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg p-6 md:p-8"> | |
| <div class="flex flex-wrap justify-center mb-8"> | |
| <button class="tab-button active px-6 py-2 mx-2" onclick="openTab('general')"> | |
| الفحوصات العامة | |
| </button> | |
| <button class="tab-button px-6 py-2 mx-2" onclick="openTab('chronic')"> | |
| الأمراض المزمنة | |
| </button> | |
| <button class="tab-button px-6 py-2 mx-2" onclick="openTab('immune')"> | |
| المناعة والالتهابات | |
| </button> | |
| <button class="tab-button px-6 py-2 mx-2" onclick="openTab('nutrition')"> | |
| التغذية والفيتامينات | |
| </button> | |
| </div> | |
| <!-- General Tests Tab --> | |
| <div id="general" class="tab-content"> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="border border-gray-200 rounded-lg p-5"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-tint text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">تعداد الدم الكامل (CBC)</h4> | |
| <p class="text-gray-600 text-sm">خلايا الدم الحمراء والبيضاء والصفائح الدموية</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-5"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-syringe text-green-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">جلوكوز الدم</h4> | |
| <p class="text-gray-600 text-sm">مستويات السكر في الدم الصائم والفاطر</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-5"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-fire text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">الدهون والكوليسترول</h4> | |
| <p class="text-gray-600 text-sm">تحليل الكوليسترول الكلي والدهون الثلاثية</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-5"> | |
| <div class="flex items-start"> | |
| <div class="bg-red-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-burn text-red-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">وظائف الكبد</h4> | |
| <p class="text-gray-600 text-sm">إنزيمات الكبد وبروتينات الدم</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-5"> | |
| <div class="flex items-start"> | |
| <div class="bg-yellow-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-leaf text-yellow-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">وظائف الكلى</h4> | |
| <p class="text-gray-600 text-sm">الكرياتينين واليوريا وأملاح الدم</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-5"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-dna text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">الهيموجلوبين</h4> | |
| <p class="text-gray-600 text-sm">مستويات الهيموجلوبين وفحوصات الأنيميا</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chronic Diseases Tab (Hidden) --> | |
| <div id="chronic" class="tab-content hidden"> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="border border-gray-200 rounded-lg p-5"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-flask text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">السكري HbA1C</h4> | |
| <p class="text-gray-600 text-sm">متوسط مستويات السكر خلال 3 أشهر</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-5"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-heart text-green-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">بروتينات القلب</h4> | |
| <p class="text-gray-600 text-sm">توقع مخاطر أمراض القلب والأوعية</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-5"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-bone text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">هشاشة العظام</h4> | |
| <p class="text-gray-600 text-sm">قياس الفيتامينات والمعادن المرتبطة</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Immune Tests Tab (Hidden) --> | |
| <div id="immune" class="tab-content hidden"> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="border border-gray-200 rounded-lg p-5"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-bacteria text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">مؤشر الالتهاب CRP</h4> | |
| <p class="text-gray-600 text-sm">الكشف عن الالتهابات البكتيرية</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-5"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-allergies text-green-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">حساسية الدم</h4> | |
| <p class="text-gray-600 text-sm">قياس مستوى اليوزينيات والتحسس</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-5"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-virus text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">الأجسام المضادة</h4> | |
| <p class="text-gray-600 text-sm">فحص المناعة ضد الفيروسات</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Nutrition Tests Tab (Hidden) --> | |
| <div id="nutrition" class="tab-content hidden"> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="border border-gray-200 rounded-lg p-5"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-sun text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">فيتامين د</h4> | |
| <p class="text-gray-600 text-sm">قياس مستويات فيتامين د في الدم</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-5"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-vial text-green-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">مخزون الحديد</h4> | |
| <p class="text-gray-600 text-sm">الحديد والفيريتين وقدرة الربط</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-5"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-bolt text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">فيتامين ب12</h4> | |
| <p class="text-gray-600 text-sm">تشخيص نقص الفيتامينات الأساسية</p> | |
| </div> | |
| </div> | |
| </div> | |
| </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">من يمكنه الاستفادة من HemoSpace؟</h2> | |
| <p class="max-w-2xl mx-auto text-lg text-gray-600"> | |
| حل متكامل يلبي احتياجات قطاعات متنوعة في المجتمع الطبي | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Patients --> | |
| <div class="bg-indigo-50 rounded-xl p-8 text-center"> | |
| <div class="bg-white rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6 shadow-md"> | |
| <i class="fas fa-user-injured text-indigo-600 text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-indigo-700">مرضى الأمراض المزمنة</h3> | |
| <p class="text-gray-600 text-sm"> | |
| مرضى السكري، الضغط، القلب وغيرهم ممن يحتاجون متابعة مستمرة | |
| </p> | |
| </div> | |
| <!-- Elderly --> | |
| <div class="bg-blue-50 rounded-xl p-8 text-center"> | |
| <div class="bg-white rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6 shadow-md"> | |
| <i class="fas fa-users text-blue-600 text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-blue-700">كبار السن</h3> | |
| <p class="text-gray-600 text-sm"> | |
| رعاية صحية سهلة ومريحة في المنزل دون الحاجة للتنقل | |
| </p> | |
| </div> | |
| <!-- Clinics --> | |
| <div class="bg-purple-50 rounded-xl p-8 text-center"> | |
| <div class="bg-white rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6 shadow-md"> | |
| <i class="fas fa-clinic-medical text-purple-600 text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-purple-700">العيادات المنزلية</h3> | |
| <p class="text-gray-600 text-sm"> | |
| تحاليل كاملة خلال الزيارة المنزلية دون إرسال عينات للمختبر | |
| </p> | |
| </div> | |
| <!-- Humanitarian --> | |
| <div class="bg-green-50 rounded-xl p-8 text-center"> | |
| <div class="bg-white rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6 shadow-md"> | |
| <i class="fas fa-globe-africa text-green-600 text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-green-700">المنظمات الإنسانية</h3> | |
| <p class="text-gray-600 text-sm"> | |
| حل مثالي للمناطق النائية والطرود الطبية الإغاثية | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Security Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0 md:pr-10"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">أمان وخصوصية بمواصفات عالمية</h2> | |
| <p class="text-gray-600 mb-8"> | |
| نقدم أعلى معايير حماية البيانات الصحية وفق أحدث المواصفات العالمية لضمان خصوصيتك وسرية معلوماتك | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 rounded-full w-12 h-12 flex items-center justify-center mr-4"> | |
| <i class="fas fa-shield-alt text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1 text-indigo-700">تشفير متقدم</h4> | |
| <p class="text-gray-600 text-sm"> | |
| تشفير AES-256 لجميع البيانات المنقولة بين الجهاز والسحابة | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 rounded-full w-12 h-12 flex items-center justify-center mr-4"> | |
| <i class="fas fa-certificate text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1 text-blue-700">معايير HIPAA</h4> | |
| <p class="text-gray-600 text-sm"> | |
| امتثال كامل لمتطلبات HIPAA وGDPR لحماية المعلومات الصحية | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 rounded-full w-12 h-12 flex items-center justify-center mr-4"> | |
| <i class="fas fa-fingerprint text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1 text-purple-700">تحقق متعدد العوامل</h4> | |
| <p class="text-gray-600 text-sm"> | |
| المصادقة الثنائية للوصول إلى الحساب والبيانات الحساسة | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="bg-white p-8 rounded-xl shadow-xl max-w-md"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <h3 class="text-xl font-bold text-gray-800">مستوى أمان البيانات</h3> | |
| <div class="bg-indigo-600 text-white rounded-full px-4 py-1 text-sm font-bold"> | |
| 99.9% | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">التشفير أثناء النقل</span> | |
| <span class="text-indigo-600 font-bold">100%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-indigo-600 h-2.5 rounded-full w-full"></div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">النسخ الاحتياطي اليومي</span> | |
| <span class="text-indigo-600 font-bold">100%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-indigo-600 h-2.5 rounded-full w-full"></div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">امتثال HIPAA</span> | |
| <span class="text-indigo-600 font-bold">98%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 98%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-gray-600">تحكم المريض في البيانات</span> | |
| <span class="text-indigo-600 font-bold">95%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 gradient-bg text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">جاهز لبدء رحلتك مع HemoSpace؟</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto"> | |
| سجل الآن واحصل على عرض خاص لمستخدمينا الأوائل مع ضمان استرداد الأموال لمدة 30 يومًا | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-indigo-700 hover:bg-gray-100 px-8 py-4 rounded-full font-bold text-lg"> | |
| اشترك الآن <i class="fas fa-chevron-left ml-2"></i> | |
| </button> | |
| <button class="border-2 border-white text-white hover:bg-white hover:text-indigo-700 px-8 py-4 rounded-full font-bold text-lg"> | |
| تواصل مع الفريق <i class="fas fa-headset ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer id="contact" class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-4 gap-10 mb-12"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-6"> | |
| <i class="fas fa-heartbeat text-3xl text-indigo-400"></i> | |
| <span class="text-xl font-bold">HemoSpace</span> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| مستقبل التحاليل الدموية الذكية في راحة يدك | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6">روابط سريعة</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">الصفحة الرئيسية</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">عن المنصة</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">المميزات</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">كيف يعمل</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">تواصل معنا</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6">الفحوصات</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">فحوصات عامة</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">أمراض مزمنة</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">المناعة والالتهابات</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">التغذية والفيتامينات</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">جميع الفحوصات</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6">تواصل معنا</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-3 text-indigo-400"></i> | |
| <span class="text-gray-400">الرياض، السعودية</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-phone-alt mt-1 mr-3 text-indigo-400"></i> | |
| <span class="text-gray-400">+966 50 123 4567</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-envelope mt-1 mr-3 text-indigo-400"></i> | |
| <span class="text-gray-400">[email protected]</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 text-center text-gray-500 text-sm"> | |
| <p>© 2023 HemoSpace. جميع الحقوق محفوظة.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menu-btn').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Tab functionality | |
| function openTab(tabName) { | |
| const tabContents = document.getElementsByClassName('tab-content'); | |
| for (let i = 0; i < tabContents.length; i++) { | |
| tabContents[i].classList.add('hidden'); | |
| } | |
| const tabButtons = document.getElementsByClassName('tab-button'); | |
| for (let i = 0; i < tabButtons.length; i++) { | |
| tabButtons[i].classList.remove('active'); | |
| } | |
| document.getElementById(tabName).classList.remove('hidden'); | |
| event.currentTarget.classList.add('active'); | |
| } | |
| // Smooth scrolling for navigation | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| document.querySelector(targetId).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Scroll animation | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fadeIn'); | |
| } | |
| }); | |
| }, { | |
| threshold: 0.1 | |
| }); | |
| fadeElements.forEach(element => { | |
| observer.observe(element); | |
| }); | |
| </script> | |
| </html> |