wasmdashai commited on
Commit
7aa04a6
·
verified ·
1 Parent(s): 52eed9f

رائع، ما تقترحه هو **منصة صحية ذكية** مع **جهاز محمول** يقوم بتحليل الدم باستخدام تقنيات تصوير متقدمة (مثل الرنين أو الأشعة الطيفية) ويرتبط بالجوال لإرسال النتائج إلى منصة تحليلية على السحابة. هذا النموذج يجمع بين **الذكاء الاصطناعي**، **الأجهزة القابلة للحمل**، و**تحليلات البيانات الصحية**. دعنا نصمم مكونات **المنصة** و**التطبيق** بناءً على رؤيتك: --- ## 🧠 **اسم مقترح للمنصة** **HemoSpace** – مستقبل التحاليل الدموية في راحة يدك. --- ## 🧬 **فكرة المشروع** "منصة رقمية متكاملة تعتمد على جهاز محمول بحجم كف اليد، قادر على تحليل الدم من خلال تقنيات غير تقليدية (مثل الرنين أو الأشعة الطيفية) دون الحاجة لمختبر، ويرتبط بالجوال مباشرةً. يقوم الجهاز بسحب نقطة دم واحدة وتحليلها، ثم يرسل النتائج إلى منصة ذكية تستخدم الذكاء الاصطناعي لمراقبة مؤشرات المريض الحيوية وتقديم تحليلات تنبؤية وعلاجية دقيقة." --- ## 🧱 **مكونات المنصة (من حيث التقنية والوظائف)** ### 1. **الجهاز المحمول (العتاد الذكي)** * بحجم كف اليد، يعمل بالبطارية. * يحتوي على: * إبرة دقيقة لسحب نقطة دم. * وحدة تحليل بالأشعة أو الرنين الطيفي (NIR أو MRI مصغّر). * معالج دقيق لتحليل أولي. * اتصال Bluetooth / Wi-Fi بالجوال. ### 2. **التطبيق الذكي (Android / iOS)** * يستقبل النتائج من الجهاز. * يعرض النتائج لحظيًا. * يرسل البيانات إلى السحابة. * يسمح للمريض بمراقبة: * نسبة الجلوكوز، الكريات، البروتينات، الالتهابات، الخ. * سلوكيات الدم عبر الزمن. * يوفر تنبيهات حسب تغير الحالة. ### 3. **المنصة السحابية / الواجهة الإدارية** * لوحة تحكم للأطباء والمراكز الصحية. * تحليلات ذكية باستخدام الذكاء الاصطناعي: * تنبؤ بالأمراض المزمنة. * مراقبة الاستجابات الدوائية. * تحليل سلوكيات الدم عبر الزمن. * تقارير قابلة للتصدير. * سجل صحي إلكتروني. * تكامل مع قواعد بيانات طبية عالمية. --- ## 📡 **الواجهة الرئيسية للموقع الإلكتروني** ### ✳️ الصفحة الرئيسية تشمل: * **شعار المنصة** * **عنوان رئيسي جذاب:** > "نقطة دم واحدة، صورة كاملة لصحتك" * **فيديو توضيحي أو عرض تفاعلي** * **زر**: "طلب تجربة مجانية" أو "شاهد كيف يعمل" --- ### ✳️ أقسام رئيسية: #### ✅ كيف يعمل النظام؟ 1. سحب الدم باستخدام الجهاز. 2. تحليل فوري باستخدام الأشعة / الرنين الطيفي. 3. عرض النتائج عبر الجوال. 4. إرسال البيانات للمنصة السحابية. 5. تحليل بالذكاء الاصطناعي. 6. تنبيهات وتحليلات دورية. #### ✅ المزايا: * جهاز محمول بحجم اليد. * بدون حاجة لمختبر. * تقنيات تصوير طيفي دقيقة. * ربط مباشر مع الهاتف الذكي. * تحاليل AI تنبؤية. * خصوصية وأمان البيانات. #### ✅ الفحوصات التي يغطيها: * تعداد دم شامل (CBC) * مستويات السكر والكوليسترول * علامات الالتهاب (CRP) * مؤشرات الأمراض المناعية * تتبع فعالية الأدوية --- ## 🧑‍⚕️ **الفئة المستهدفة** * الأفراد الذين يعانون من أمراض مزمنة (السكري، المناعة، أمراض الدم) * كبار السن * العيادات المنزلية * المستشفيات الميدانية * المنظمات الإنسانية * المستشفيات الذكية --- ## 🔒 **الخصوصية والأمان** * تشفير البيانات من الجهاز إلى السحابة. * دعم بروتوكولات HIPAA / GDPR. * لوحة تحكم للمريض والطبيب. --- ## 📲 هل تريد الآن؟ * **مخطط معماري للنظام؟** * **تصميم واجهة الموقع؟** * **عرض تقديمي للعرض أمام مستثمرين؟** * **نموذج MVP لتطبيق الموبايل؟** أخبرني بما تريد البدء به لأساعدك خطوة بخطوة. - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +935 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Hemospace
3
- emoji:
4
- colorFrom: purple
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: hemospace
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,935 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>HemoSpace - مستقبل التحاليل الدموية</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
11
+
12
+ body {
13
+ font-family: 'Tajawal', sans-serif;
14
+ }
15
+
16
+ .gradient-bg {
17
+ background: linear-gradient(135deg, #6b46c1 0%, #3b82f6 100%);
18
+ }
19
+
20
+ .device-shadow {
21
+ box-shadow: 0 20px 50px rgba(59, 130, 246, 0.3);
22
+ }
23
+
24
+ .pulse-animation {
25
+ animation: pulse 2s infinite;
26
+ }
27
+
28
+ @keyframes pulse {
29
+ 0% {
30
+ transform: scale(1);
31
+ box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
32
+ }
33
+ 70% {
34
+ transform: scale(1.05);
35
+ box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
36
+ }
37
+ 100% {
38
+ transform: scale(1);
39
+ box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
40
+ }
41
+ }
42
+
43
+ .fade-in {
44
+ animation: fadeIn 1.5s ease-in;
45
+ }
46
+
47
+ @keyframes fadeIn {
48
+ from { opacity: 0; }
49
+ to { opacity: 1; }
50
+ }
51
+
52
+ .section-divider {
53
+ width: 100%;
54
+ height: 2px;
55
+ background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5), transparent);
56
+ }
57
+
58
+ .tab-button.active {
59
+ border-bottom: 3px solid #6b46c1;
60
+ color: #6b46c1;
61
+ font-weight: bold;
62
+ }
63
+
64
+ .feature-card:hover {
65
+ transform: translateY(-10px);
66
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
67
+ }
68
+
69
+ .feature-card {
70
+ transition: all 0.3s ease;
71
+ }
72
+ </style>
73
+ </head>
74
+ <body class="bg-gray-50 text-gray-800">
75
+
76
+ <!-- Navigation -->
77
+ <nav class="gradient-bg text-white shadow-lg fixed w-full z-50">
78
+ <div class="container mx-auto px-6 py-3 flex justify-between items-center">
79
+ <div class="flex items-center space-x-2">
80
+ <i class="fas fa-heartbeat text-3xl"></i>
81
+ <a href="#" class="text-xl font-bold">HemoSpace</a>
82
+ </div>
83
+ <div class="hidden md:flex items-center space-x-10">
84
+ <a href="#about" class="hover:text-gray-200">عن المنصة</a>
85
+ <a href="#features" class="hover:text-gray-200">المميزات</a>
86
+ <a href="#how-it-works" class="hover:text-gray-200">كيف تعمل</a>
87
+ <a href="#tests" class="hover:text-gray-200">الفحوصات</a>
88
+ <a href="#contact" class="hover:text-gray-200">تواصل معنا</a>
89
+ </div>
90
+ <div class="md:hidden">
91
+ <button id="menu-btn" class="text-white focus:outline-none">
92
+ <i class="fas fa-bars text-2xl"></i>
93
+ </button>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- Mobile menu -->
98
+ <div id="mobile-menu" class="hidden md:hidden bg-indigo-700 px-2 pt-2 pb-3 space-y-1">
99
+ <a href="#about" class="block px-3 py-2 rounded-md text-white hover:bg-indigo-600">عن المنصة</a>
100
+ <a href="#features" class="block px-3 py-2 rounded-md text-white hover:bg-indigo-600">المميزات</a>
101
+ <a href="#how-it-works" class="block px-3 py-2 rounded-md text-white hover:bg-indigo-600">كيف تعمل</a>
102
+ <a href="#tests" class="block px-3 py-2 rounded-md text-white hover:bg-indigo-600">الفحوصات</a>
103
+ <a href="#contact" class="block px-3 py-2 rounded-md text-white hover:bg-indigo-600">تواصل معنا</a>
104
+ </div>
105
+ </nav>
106
+
107
+ <!-- Hero Section -->
108
+ <section class="gradient-bg text-white pt-32 pb-20 md:pt-40 md:pb-32">
109
+ <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
110
+ <div class="md:w-1/2 mb-16 md:mb-0 fade-in">
111
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">
112
+ نقطة دم واحدة، صور�� كاملة لصحتك
113
+ </h1>
114
+ <p class="text-xl mb-8">
115
+ نظام متكامل للتحاليل الدموية الذكية باستخدام تقنيات الأشعة الطيفية والذكاء الاصطناعي لتقديم رعاية صحية شخصية لك ولأسرتك
116
+ </p>
117
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
118
+ <button class="bg-white text-indigo-700 hover:bg-gray-100 px-8 py-3 rounded-full font-semibold pulse-animation">
119
+ جرب الآن مجانًا <i class="fas fa-chevron-left mr-2"></i>
120
+ </button>
121
+ <button class="border-2 border-white text-white hover:bg-white hover:text-indigo-700 px-8 py-3 rounded-full font-semibold">
122
+ شاهد كيف يعمل <i class="fas fa-play-circle mr-2"></i>
123
+ </button>
124
+ </div>
125
+ </div>
126
+ <div class="md:w-1/2 flex justify-center fade-in">
127
+ <div class="relative">
128
+ <img src="https://via.placeholder.com/500x500" alt="HemoSpace Device" class="rounded-2xl device-shadow w-64 md:w-80">
129
+ <div class="absolute -bottom-6 -right-6 bg-white rounded-xl shadow-lg p-4">
130
+ <div class="text-indigo-700 text-center">
131
+ <i class="fas fa-chart-line text-3xl mb-2"></i>
132
+ <p class="font-bold">تحليل فوري</p>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </section>
139
+
140
+ <!-- About Section -->
141
+ <section id="about" class="py-20 bg-white">
142
+ <div class="container mx-auto px-6">
143
+ <div class="text-center mb-16">
144
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">منصة HemoSpace السحابية</h2>
145
+ <p class="max-w-2xl mx-auto text-lg text-gray-600">
146
+ حوار متكامل بين الحلول التقنية المبتكرة والممارسات الصحية لتقديم رعاية طبية أسرع وأكثر دقة
147
+ </p>
148
+ </div>
149
+
150
+ <div class="flex flex-col md:flex-row items-center mb-16">
151
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
152
+ <img src="https://via.placeholder.com/600x400" alt="HemoSpace Cloud Platform" class="rounded-lg shadow-xl">
153
+ </div>
154
+ <div class="md:w-1/2">
155
+ <h3 class="text-2xl font-bold text-indigo-700 mb-6">مستقبل التحاليل الدموية في راحة يدك</h3>
156
+ <p class="text-gray-600 mb-6">
157
+ تقدم HemoSpace نظامًا ثوريًا يجمع بين جهاز محمول ذكي وتطبيق جوال ومنصة سحابية متقدمة لتحليل الدم باستخدام تقنيات الأشعة الطيفية بدقة عالية، دون الحاجة إلى مختبرات تقليدية.
158
+ </p>
159
+ <ul class="space-y-4">
160
+ <li class="flex items-start">
161
+ <i class="fas fa-check-circle text-green-500 text-xl mt-1 mr-3"></i>
162
+ <span class="text-gray-700">تحليل 24/7 في أي وقت ومكان</span>
163
+ </li>
164
+ <li class="flex items-start">
165
+ <i class="fas fa-check-circle text-green-500 text-xl mt-1 mr-3"></i>
166
+ <span class="text-gray-700">نتائج فورية ودقيقة باستخدام الذكاء الاصطناعي</span>
167
+ </li>
168
+ <li class="flex items-start">
169
+ <i class="fas fa-check-circle text-green-500 text-xl mt-1 mr-3"></i>
170
+ <span class="text-gray-700">ربط مباشر مع الأطباء والمراكز الصحية</span>
171
+ </li>
172
+ </ul>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="section-divider my-16"></div>
177
+
178
+ <div class="grid md:grid-cols-3 gap-10">
179
+ <div class="bg-indigo-50 rounded-xl p-8 text-center">
180
+ <div class="bg-indigo-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6">
181
+ <i class="fas fa-mobile-alt text-indigo-700 text-3xl"></i>
182
+ </div>
183
+ <h3 class="text-xl font-bold mb-3 text-indigo-700">الجهاز الذكي</h3>
184
+ <p class="text-gray-600">
185
+ جهاز محمول بحجم كف اليد يعمل بتقنيات الأشعة الطيفية لتحليل نقطة الدم بدقة عالية
186
+ </p>
187
+ </div>
188
+ <div class="bg-blue-50 rounded-xl p-8 text-center">
189
+ <div class="bg-blue-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6">
190
+ <i class="fas fa-mobile text-blue-700 text-3xl"></i>
191
+ </div>
192
+ <h3 class="text-xl font-bold mb-3 text-blue-700">التطبيق الذكي</h3>
193
+ <p class="text-gray-600">
194
+ يعرض نتائج التحاليل فورًا ويقدم توصيات ذكية بناءً على الذكاء الاصطناعي
195
+ </p>
196
+ </div>
197
+ <div class="bg-purple-50 rounded-xl p-8 text-center">
198
+ <div class="bg-purple-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6">
199
+ <i class="fas fa-cloud text-purple-700 text-3xl"></i>
200
+ </div>
201
+ <h3 class="text-xl font-bold mb-3 text-purple-700">المنصة السحابية</h3>
202
+ <p class="text-gray-600">
203
+ نظام متكامل لتخزين وتحليل البيانات الصحية على المدى الطويل
204
+ </p>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </section>
209
+
210
+ <!-- How It Works Section -->
211
+ <section id="how-it-works" class="py-20 bg-gray-50">
212
+ <div class="container mx-auto px-6">
213
+ <div class="text-center mb-16">
214
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">كيف يعمل نظام HemoSpace؟</h2>
215
+ <p class="max-w-2xl mx-auto text-lg text-gray-600">
216
+ ستة خطوات بسيطة تفصل بينك وبين نتائج تحاليلك الدموية الكاملة
217
+ </p>
218
+ </div>
219
+
220
+ <div class="relative">
221
+ <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>
222
+
223
+ <div class="grid md:grid-cols-2 gap-8">
224
+ <!-- Step 1 -->
225
+ <div class="md:pr-16">
226
+ <div class="bg-white p-8 rounded-xl shadow-lg relative">
227
+ <div class="absolute -right-2 top-8 w-4 h-4 rounded-full bg-indigo-600 md:right-auto md:-left-2"></div>
228
+ <div class="flex items-center mb-4">
229
+ <div class="bg-indigo-100 rounded-full w-12 h-12 flex items-center justify-center mr-4">
230
+ <span class="text-indigo-700 font-bold text-xl">1</span>
231
+ </div>
232
+ <h3 class="text-xl font-bold text-indigo-700">سحب عينة الدم</h3>
233
+ </div>
234
+ <p class="text-gray-600">
235
+ باستخدام إبرة دقيقة متطورة، يتم سحب نقطة دم واحدة فقط من طرف الإصبع في ثوانٍ معدودة ودون ألم تقريبًا
236
+ </p>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Step 2 -->
241
+ <div class="md:pl-16 md:mt-20">
242
+ <div class="bg-white p-8 rounded-xl shadow-lg relative">
243
+ <div class="absolute -right-2 top-8 w-4 h-4 rounded-full bg-blue-600 md:right-auto md:-left-2"></div>
244
+ <div class="flex items-center mb-4">
245
+ <div class="bg-blue-100 rounded-full w-12 h-12 flex items-center justify-center mr-4">
246
+ <span class="text-blue-700 font-bold text-xl">2</span>
247
+ </div>
248
+ <h3 class="text-xl font-bold text-blue-700">تحليل الأشعة الطيفية</h3>
249
+ </div>
250
+ <p class="text-gray-600">
251
+ يقوم الجهاز بتحليل العينة فورًا باستخدام تقنيات الأشعة الطيفية المتطورة لتحديد مكونات الدم المختلفة بدقة عالية
252
+ </p>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- Step 3 -->
257
+ <div class="md:pr-16">
258
+ <div class="bg-white p-8 rounded-xl shadow-lg relative">
259
+ <div class="absolute -right-2 top-8 w-4 h-4 rounded-full bg-indigo-600 md:right-auto md:-left-2"></div>
260
+ <div class="flex items-center mb-4">
261
+ <div class="bg-indigo-100 rounded-full w-12 h-12 flex items-center justify-center mr-4">
262
+ <span class="text-indigo-700 font-bold text-xl">3</span>
263
+ </div>
264
+ <h3 class="text-xl font-bold text-indigo-700">��لاتصال بالجوال الذكي</h3>
265
+ </div>
266
+ <p class="text-gray-600">
267
+ ينقل الجهاز النتائج الأولية عبر تقنية Bluetooth إلى التطبيق الخاص بنا على الهاتف الذكي في ثوانٍ معدودة
268
+ </p>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- Step 4 -->
273
+ <div class="md:pl-16">
274
+ <div class="bg-white p-8 rounded-xl shadow-lg relative">
275
+ <div class="absolute -right-2 top-8 w-4 h-4 rounded-full bg-blue-600 md:right-auto md:-left-2"></div>
276
+ <div class="flex items-center mb-4">
277
+ <div class="bg-blue-100 rounded-full w-12 h-12 flex items-center justify-center mr-4">
278
+ <span class="text-blue-700 font-bold text-xl">4</span>
279
+ </div>
280
+ <h3 class="text-xl font-bold text-blue-700">عرض النتائج بصريًا</h3>
281
+ </div>
282
+ <p class="text-gray-600">
283
+ يعرض التطبيق النتائج بصورة واضحة وسهلة الفهم مع رسوم بيانية توضيحية ومقارنة مع القيم الطبيعية
284
+ </p>
285
+ </div>
286
+ </div>
287
+
288
+ <!-- Step 5 -->
289
+ <div class="md:pr-16">
290
+ <div class="bg-white p-8 rounded-xl shadow-lg relative">
291
+ <div class="absolute -right-2 top-8 w-4 h-4 rounded-full bg-indigo-600 md:right-auto md:-left-2"></div>
292
+ <div class="flex items-center mb-4">
293
+ <div class="bg-indigo-100 rounded-full w-12 h-12 flex items-center justify-center mr-4">
294
+ <span class="text-indigo-700 font-bold text-xl">5</span>
295
+ </div>
296
+ <h3 class="text-xl font-bold text-indigo-700">تحميل البيانات للسحابة</h3>
297
+ </div>
298
+ <p class="text-gray-600">
299
+ يتم تخزين النتائج تلقائيًا على المنصة السحابية لتكون متاحة لك ولطبيبك في أي وقت ومكان
300
+ </p>
301
+ </div>
302
+ </div>
303
+
304
+ <!-- Step 6 -->
305
+ <div class="md:pl-16">
306
+ <div class="bg-white p-8 rounded-xl shadow-lg relative">
307
+ <div class="absolute -right-2 top-8 w-4 h-4 rounded-full bg-blue-600 md:right-auto md:-left-2"></div>
308
+ <div class="flex items-center mb-4">
309
+ <div class="bg-blue-100 rounded-full w-12 h-12 flex items-center justify-center mr-4">
310
+ <span class="text-blue-700 font-bold text-xl">6</span>
311
+ </div>
312
+ <h3 class="text-xl font-bold text-blue-700">تحليل الذكاء الاصطناعي</h3>
313
+ </div>
314
+ <p class="text-gray-600">
315
+ تقوم خوارزميات الذكاء الاصطناعي بتحليل نتائجك وتقديم توقعات وتوصيات مبنية على أحدث الأبحاث الطبية
316
+ </p>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </section>
323
+
324
+ <!-- Features Section -->
325
+ <section id="features" class="py-20 bg-white">
326
+ <div class="container mx-auto px-6">
327
+ <div class="text-center mb-16">
328
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">لماذا تختار HemoSpace؟</h2>
329
+ <p class="max-w-2xl mx-auto text-lg text-gray-600">
330
+ نقلة نوعية في عالم التحاليل الدموية تقدم لك مميزات لا مثيل لها
331
+ </p>
332
+ </div>
333
+
334
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
335
+ <!-- Feature 1 -->
336
+ <div class="feature-card bg-gray-50 rounded-xl p-8 border border-gray-200">
337
+ <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mb-6">
338
+ <i class="fas fa-bolt text-indigo-600 text-2xl"></i>
339
+ </div>
340
+ <h3 class="text-xl font-bold mb-3 text-indigo-700">سرعة التحليل</h3>
341
+ <p class="text-gray-600">
342
+ نتائج فور��ة خلال دقائق معدودة بدلًا من انتظار أيام كما في المختبرات التقليدية
343
+ </p>
344
+ </div>
345
+
346
+ <!-- Feature 2 -->
347
+ <div class="feature-card bg-gray-50 rounded-xl p-8 border border-gray-200">
348
+ <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-6">
349
+ <i class="fas fa-lock text-blue-600 text-2xl"></i>
350
+ </div>
351
+ <h3 class="text-xl font-bold mb-3 text-blue-700">خصوصية تامة</h3>
352
+ <p class="text-gray-600">
353
+ تشفير متقدم لبياناتك الصحية وفق معايير HIPAA وGDPR العالمية لضمان خصوصيتك
354
+ </p>
355
+ </div>
356
+
357
+ <!-- Feature 3 -->
358
+ <div class="feature-card bg-gray-50 rounded-xl p-8 border border-gray-200">
359
+ <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mb-6">
360
+ <i class="fas fa-chart-line text-purple-600 text-2xl"></i>
361
+ </div>
362
+ <h3 class="text-xl font-bold mb-3 text-purple-700">تتبع طويل الأجل</h3>
363
+ <p class="text-gray-600">
364
+ مراقبة تطوراتك الصحية عبر الزمن مع رسوم بيانية تفاعلية وتنبيهات مهمة
365
+ </p>
366
+ </div>
367
+
368
+ <!-- Feature 4 -->
369
+ <div class="feature-card bg-gray-50 rounded-xl p-8 border border-gray-200">
370
+ <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mb-6">
371
+ <i class="fas fa-user-md text-green-600 text-2xl"></i>
372
+ </div>
373
+ <h3 class="text-xl font-bold mb-3 text-green-700">رعاية متكاملة</h3>
374
+ <p class="text-gray-600">
375
+ تكامل مع الأطباء المتابعين لحالتك لضمان رعاية صحية متكاملة ودقيقة
376
+ </p>
377
+ </div>
378
+
379
+ <!-- Feature 5 -->
380
+ <div class="feature-card bg-gray-50 rounded-xl p-8 border border-gray-200">
381
+ <div class="w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center mb-6">
382
+ <i class="fas fa-battery-three-quarters text-yellow-600 text-2xl"></i>
383
+ </div>
384
+ <h3 class="text-xl font-bold mb-3 text-yellow-700">جهاز طويل الأمد</h3>
385
+ <p class="text-gray-600">
386
+ بطارية تدوم لأيام وقطع غيار متوفرة بسهولة لضمان استمرارية الخدمة
387
+ </p>
388
+ </div>
389
+
390
+ <!-- Feature 6 -->
391
+ <div class="feature-card bg-gray-50 rounded-xl p-8 border border-gray-200">
392
+ <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mb-6">
393
+ <i class="fas fa-shield-alt text-red-600 text-2xl"></i>
394
+ </div>
395
+ <h3 class="text-xl font-bold mb-3 text-red-700">أمان ودقة</h3>
396
+ <p class="text-gray-600">
397
+ نتائج معتمدة وموثوقة بدقة تصل إلى 99.8% مقارنة بالمختبرات المركزية
398
+ </p>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </section>
403
+
404
+ <!-- Tests Section -->
405
+ <section id="tests" class="py-20 bg-gray-50">
406
+ <div class="container mx-auto px-6">
407
+ <div class="text-center mb-16">
408
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">الفحوصات المتاحة</h2>
409
+ <p class="max-w-2xl mx-auto text-lg text-gray-600">
410
+ مجموعة واسعة من التحاليل الحيوية التي يمكن إجراؤها فورًا باستخدام HemoSpace
411
+ </p>
412
+ </div>
413
+
414
+ <div class="bg-white rounded-xl shadow-lg p-6 md:p-8">
415
+ <div class="flex flex-wrap justify-center mb-8">
416
+ <button class="tab-button active px-6 py-2 mx-2" onclick="openTab('general')">
417
+ الفحوصات العامة
418
+ </button>
419
+ <button class="tab-button px-6 py-2 mx-2" onclick="openTab('chronic')">
420
+ الأمراض المزمنة
421
+ </button>
422
+ <button class="tab-button px-6 py-2 mx-2" onclick="openTab('immune')">
423
+ المناعة والالتهابات
424
+ </button>
425
+ <button class="tab-button px-6 py-2 mx-2" onclick="openTab('nutrition')">
426
+ التغذية والفيتامينات
427
+ </button>
428
+ </div>
429
+
430
+ <!-- General Tests Tab -->
431
+ <div id="general" class="tab-content">
432
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
433
+ <div class="border border-gray-200 rounded-lg p-5">
434
+ <div class="flex items-start">
435
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
436
+ <i class="fas fa-tint text-blue-600"></i>
437
+ </div>
438
+ <div>
439
+ <h4 class="font-bold text-lg mb-1">تعداد الدم الكامل (CBC)</h4>
440
+ <p class="text-gray-600 text-sm">خلايا الدم الحمراء والبيضاء والصفائح الدموية</p>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ <div class="border border-gray-200 rounded-lg p-5">
445
+ <div class="flex items-start">
446
+ <div class="bg-green-100 p-3 rounded-full mr-4">
447
+ <i class="fas fa-syringe text-green-600"></i>
448
+ </div>
449
+ <div>
450
+ <h4 class="font-bold text-lg mb-1">جلوكوز الدم</h4>
451
+ <p class="text-gray-600 text-sm">مستويات السكر في الدم الصائم والفاطر</p>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ <div class="border border-gray-200 rounded-lg p-5">
456
+ <div class="flex items-start">
457
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
458
+ <i class="fas fa-fire text-purple-600"></i>
459
+ </div>
460
+ <div>
461
+ <h4 class="font-bold text-lg mb-1">الدهون والكوليسترول</h4>
462
+ <p class="text-gray-600 text-sm">تحليل الكوليسترول الكلي والدهون الثلاثية</p>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ <div class="border border-gray-200 rounded-lg p-5">
467
+ <div class="flex items-start">
468
+ <div class="bg-red-100 p-3 rounded-full mr-4">
469
+ <i class="fas fa-burn text-red-600"></i>
470
+ </div>
471
+ <div>
472
+ <h4 class="font-bold text-lg mb-1">وظائف الكبد</h4>
473
+ <p class="text-gray-600 text-sm">إنزيمات الكبد وبروتينات الدم</p>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ <div class="border border-gray-200 rounded-lg p-5">
478
+ <div class="flex items-start">
479
+ <div class="bg-yellow-100 p-3 rounded-full mr-4">
480
+ <i class="fas fa-leaf text-yellow-600"></i>
481
+ </div>
482
+ <div>
483
+ <h4 class="font-bold text-lg mb-1">وظائف الكلى</h4>
484
+ <p class="text-gray-600 text-sm">الكرياتينين واليوريا وأملاح الدم</p>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ <div class="border border-gray-200 rounded-lg p-5">
489
+ <div class="flex items-start">
490
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
491
+ <i class="fas fa-dna text-indigo-600"></i>
492
+ </div>
493
+ <div>
494
+ <h4 class="font-bold text-lg mb-1">الهيموجلوبين</h4>
495
+ <p class="text-gray-600 text-sm">مستويات الهيموجلوبين وفحوصات الأنيميا</p>
496
+ </div>
497
+ </div>
498
+ </div>
499
+ </div>
500
+ </div>
501
+
502
+ <!-- Chronic Diseases Tab (Hidden) -->
503
+ <div id="chronic" class="tab-content hidden">
504
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
505
+ <div class="border border-gray-200 rounded-lg p-5">
506
+ <div class="flex items-start">
507
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
508
+ <i class="fas fa-flask text-blue-600"></i>
509
+ </div>
510
+ <div>
511
+ <h4 class="font-bold text-lg mb-1">السكري HbA1C</h4>
512
+ <p class="text-gray-600 text-sm">متوسط مستويات السكر خلال 3 أشهر</p>
513
+ </div>
514
+ </div>
515
+ </div>
516
+ <div class="border border-gray-200 rounded-lg p-5">
517
+ <div class="flex items-start">
518
+ <div class="bg-green-100 p-3 rounded-full mr-4">
519
+ <i class="fas fa-heart text-green-600"></i>
520
+ </div>
521
+ <div>
522
+ <h4 class="font-bold text-lg mb-1">بروتينات القلب</h4>
523
+ <p class="text-gray-600 text-sm">توقع مخاطر أمراض القلب والأوعية</p>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ <div class="border border-gray-200 rounded-lg p-5">
528
+ <div class="flex items-start">
529
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
530
+ <i class="fas fa-bone text-purple-600"></i>
531
+ </div>
532
+ <div>
533
+ <h4 class="font-bold text-lg mb-1">هشاشة العظام</h4>
534
+ <p class="text-gray-600 text-sm">قياس الفيتامينات والمعادن المرتبطة</p>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ </div>
539
+ </div>
540
+
541
+ <!-- Immune Tests Tab (Hidden) -->
542
+ <div id="immune" class="tab-content hidden">
543
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
544
+ <div class="border border-gray-200 rounded-lg p-5">
545
+ <div class="flex items-start">
546
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
547
+ <i class="fas fa-bacteria text-blue-600"></i>
548
+ </div>
549
+ <div>
550
+ <h4 class="font-bold text-lg mb-1">مؤشر الالتهاب CRP</h4>
551
+ <p class="text-gray-600 text-sm">الكشف عن الالتهابات البكتيرية</p>
552
+ </div>
553
+ </div>
554
+ </div>
555
+ <div class="border border-gray-200 rounded-lg p-5">
556
+ <div class="flex items-start">
557
+ <div class="bg-green-100 p-3 rounded-full mr-4">
558
+ <i class="fas fa-allergies text-green-600"></i>
559
+ </div>
560
+ <div>
561
+ <h4 class="font-bold text-lg mb-1">حساسية الدم</h4>
562
+ <p class="text-gray-600 text-sm">قياس مستوى اليوزينيات والتحسس</p>
563
+ </div>
564
+ </div>
565
+ </div>
566
+ <div class="border border-gray-200 rounded-lg p-5">
567
+ <div class="flex items-start">
568
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
569
+ <i class="fas fa-virus text-purple-600"></i>
570
+ </div>
571
+ <div>
572
+ <h4 class="font-bold text-lg mb-1">الأجسام المضادة</h4>
573
+ <p class="text-gray-600 text-sm">فحص المناعة ضد الفيروسات</p>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+ </div>
579
+
580
+ <!-- Nutrition Tests Tab (Hidden) -->
581
+ <div id="nutrition" class="tab-content hidden">
582
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
583
+ <div class="border border-gray-200 rounded-lg p-5">
584
+ <div class="flex items-start">
585
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
586
+ <i class="fas fa-sun text-blue-600"></i>
587
+ </div>
588
+ <div>
589
+ <h4 class="font-bold text-lg mb-1">فيتامين د</h4>
590
+ <p class="text-gray-600 text-sm">قياس مستويات فيتامين د في الدم</p>
591
+ </div>
592
+ </div>
593
+ </div>
594
+ <div class="border border-gray-200 rounded-lg p-5">
595
+ <div class="flex items-start">
596
+ <div class="bg-green-100 p-3 rounded-full mr-4">
597
+ <i class="fas fa-vial text-green-600"></i>
598
+ </div>
599
+ <div>
600
+ <h4 class="font-bold text-lg mb-1">مخزون الحديد</h4>
601
+ <p class="text-gray-600 text-sm">الحديد والفيريتين وقدرة الربط</p>
602
+ </div>
603
+ </div>
604
+ </div>
605
+ <div class="border border-gray-200 rounded-lg p-5">
606
+ <div class="flex items-start">
607
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
608
+ <i class="fas fa-bolt text-purple-600"></i>
609
+ </div>
610
+ <div>
611
+ <h4 class="font-bold text-lg mb-1">فيتامين ب12</h4>
612
+ <p class="text-gray-600 text-sm">تشخيص نقص الفيتامينات الأساسية</p>
613
+ </div>
614
+ </div>
615
+ </div>
616
+ </div>
617
+ </div>
618
+ </div>
619
+ </div>
620
+ </section>
621
+
622
+ <!-- Target Audience -->
623
+ <section class="py-20 bg-white">
624
+ <div class="container mx-auto px-6">
625
+ <div class="text-center mb-16">
626
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">من يمكنه الاستفادة من HemoSpace؟</h2>
627
+ <p class="max-w-2xl mx-auto text-lg text-gray-600">
628
+ حل متكامل يلبي احتياجات قطاعات متنوعة في المجتمع الطبي
629
+ </p>
630
+ </div>
631
+
632
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
633
+ <!-- Patients -->
634
+ <div class="bg-indigo-50 rounded-xl p-8 text-center">
635
+ <div class="bg-white rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6 shadow-md">
636
+ <i class="fas fa-user-injured text-indigo-600 text-3xl"></i>
637
+ </div>
638
+ <h3 class="text-xl font-bold mb-3 text-indigo-700">مرضى الأمراض المزمنة</h3>
639
+ <p class="text-gray-600 text-sm">
640
+ مرضى السكري، الضغط، القلب وغيرهم ممن يحتاجون متابعة مستمرة
641
+ </p>
642
+ </div>
643
+
644
+ <!-- Elderly -->
645
+ <div class="bg-blue-50 rounded-xl p-8 text-center">
646
+ <div class="bg-white rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6 shadow-md">
647
+ <i class="fas fa-users text-blue-600 text-3xl"></i>
648
+ </div>
649
+ <h3 class="text-xl font-bold mb-3 text-blue-700">كبار السن</h3>
650
+ <p class="text-gray-600 text-sm">
651
+ رعاية صحية سهلة ومريحة في المنزل دون الحاجة للتنقل
652
+ </p>
653
+ </div>
654
+
655
+ <!-- Clinics -->
656
+ <div class="bg-purple-50 rounded-xl p-8 text-center">
657
+ <div class="bg-white rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6 shadow-md">
658
+ <i class="fas fa-clinic-medical text-purple-600 text-3xl"></i>
659
+ </div>
660
+ <h3 class="text-xl font-bold mb-3 text-purple-700">العيادات المنزلية</h3>
661
+ <p class="text-gray-600 text-sm">
662
+ تحاليل كاملة خلال الزيارة المنزلية دون إرسال عينات للمختبر
663
+ </p>
664
+ </div>
665
+
666
+ <!-- Humanitarian -->
667
+ <div class="bg-green-50 rounded-xl p-8 text-center">
668
+ <div class="bg-white rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6 shadow-md">
669
+ <i class="fas fa-globe-africa text-green-600 text-3xl"></i>
670
+ </div>
671
+ <h3 class="text-xl font-bold mb-3 text-green-700">المنظمات الإنسانية</h3>
672
+ <p class="text-gray-600 text-sm">
673
+ حل مثالي للمناطق النائية والطرود الطبية الإغاثية
674
+ </p>
675
+ </div>
676
+ </div>
677
+ </div>
678
+ </section>
679
+
680
+ <!-- Security Section -->
681
+ <section class="py-20 bg-gray-50">
682
+ <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
683
+ <div class="md:w-1/2 mb-12 md:mb-0 md:pr-10">
684
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">أمان وخصوصية بمواصفات عالمية</h2>
685
+ <p class="text-gray-600 mb-8">
686
+ نقدم أعلى معايير حماية البيانات الصحية وفق أحدث المواصفات العالمية لضمان خصوصيتك وسرية معلوماتك
687
+ </p>
688
+
689
+ <div class="space-y-6">
690
+ <div class="flex items-start">
691
+ <div class="bg-indigo-100 rounded-full w-12 h-12 flex items-center justify-center mr-4">
692
+ <i class="fas fa-shield-alt text-indigo-600"></i>
693
+ </div>
694
+ <div>
695
+ <h4 class="font-bold text-lg mb-1 text-indigo-700">تشفير متقدم</h4>
696
+ <p class="text-gray-600 text-sm">
697
+ تشفير AES-256 لجميع البيانات المنقولة بين الجهاز والسحابة
698
+ </p>
699
+ </div>
700
+ </div>
701
+
702
+ <div class="flex items-start">
703
+ <div class="bg-blue-100 rounded-full w-12 h-12 flex items-center justify-center mr-4">
704
+ <i class="fas fa-certificate text-blue-600"></i>
705
+ </div>
706
+ <div>
707
+ <h4 class="font-bold text-lg mb-1 text-blue-700">معايير HIPAA</h4>
708
+ <p class="text-gray-600 text-sm">
709
+ امتثال كامل لمتطلبات HIPAA وGDPR لحماية المعلومات الصحية
710
+ </p>
711
+ </div>
712
+ </div>
713
+
714
+ <div class="flex items-start">
715
+ <div class="bg-purple-100 rounded-full w-12 h-12 flex items-center justify-center mr-4">
716
+ <i class="fas fa-fingerprint text-purple-600"></i>
717
+ </div>
718
+ <div>
719
+ <h4 class="font-bold text-lg mb-1 text-purple-700">تحقق متعدد العوامل</h4>
720
+ <p class="text-gray-600 text-sm">
721
+ المصادقة الثنائية للوصول إلى الحساب والبيانات الحساسة
722
+ </p>
723
+ </div>
724
+ </div>
725
+ </div>
726
+ </div>
727
+
728
+ <div class="md:w-1/2 flex justify-center">
729
+ <div class="bg-white p-8 rounded-xl shadow-xl max-w-md">
730
+ <div class="flex items-center justify-between mb-8">
731
+ <h3 class="text-xl font-bold text-gray-800">مستوى أمان البيانات</h3>
732
+ <div class="bg-indigo-600 text-white rounded-full px-4 py-1 text-sm font-bold">
733
+ 99.9%
734
+ </div>
735
+ </div>
736
+
737
+ <div class="mb-6">
738
+ <div class="flex justify-between mb-2">
739
+ <span class="text-gray-600">التشفير أثناء النقل</span>
740
+ <span class="text-indigo-600 font-bold">100%</span>
741
+ </div>
742
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
743
+ <div class="bg-indigo-600 h-2.5 rounded-full w-full"></div>
744
+ </div>
745
+ </div>
746
+
747
+ <div class="mb-6">
748
+ <div class="flex justify-between mb-2">
749
+ <span class="text-gray-600">النسخ الاحتياطي اليومي</span>
750
+ <span class="text-indigo-600 font-bold">100%</span>
751
+ </div>
752
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
753
+ <div class="bg-indigo-600 h-2.5 rounded-full w-full"></div>
754
+ </div>
755
+ </div>
756
+
757
+ <div class="mb-6">
758
+ <div class="flex justify-between mb-2">
759
+ <span class="text-gray-600">امتثال HIPAA</span>
760
+ <span class="text-indigo-600 font-bold">98%</span>
761
+ </div>
762
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
763
+ <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 98%"></div>
764
+ </div>
765
+ </div>
766
+
767
+ <div class="mb-6">
768
+ <div class="flex justify-between mb-2">
769
+ <span class="text-gray-600">تحكم المريض في البيانات</span>
770
+ <span class="text-indigo-600 font-bold">95%</span>
771
+ </div>
772
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
773
+ <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 95%"></div>
774
+ </div>
775
+ </div>
776
+ </div>
777
+ </div>
778
+ </div>
779
+ </section>
780
+
781
+ <!-- CTA Section -->
782
+ <section class="py-20 gradient-bg text-white">
783
+ <div class="container mx-auto px-6 text-center">
784
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">جاهز لبدء رحلتك مع HemoSpace؟</h2>
785
+ <p class="text-xl mb-8 max-w-2xl mx-auto">
786
+ سجل الآن واحصل على عرض خاص لمستخدمينا الأوائل مع ضمان استرداد الأموال لمدة 30 يومًا
787
+ </p>
788
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
789
+ <button class="bg-white text-indigo-700 hover:bg-gray-100 px-8 py-4 rounded-full font-bold text-lg">
790
+ اشترك الآن <i class="fas fa-chevron-left ml-2"></i>
791
+ </button>
792
+ <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">
793
+ تواصل مع الفريق <i class="fas fa-headset ml-2"></i>
794
+ </button>
795
+ </div>
796
+ </div>
797
+ </section>
798
+
799
+ <!-- Footer -->
800
+ <footer id="contact" class="bg-gray-900 text-white py-12">
801
+ <div class="container mx-auto px-6">
802
+ <div class="grid md:grid-cols-4 gap-10 mb-12">
803
+ <div>
804
+ <div class="flex items-center space-x-2 mb-6">
805
+ <i class="fas fa-heartbeat text-3xl text-indigo-400"></i>
806
+ <span class="text-xl font-bold">HemoSpace</span>
807
+ </div>
808
+ <p class="text-gray-400 mb-4">
809
+ مستقبل التحاليل الدموية الذكية في راحة يدك
810
+ </p>
811
+ <div class="flex space-x-4">
812
+ <a href="#" class="text-gray-400 hover:text-white">
813
+ <i class="fab fa-twitter text-xl"></i>
814
+ </a>
815
+ <a href="#" class="text-gray-400 hover:text-white">
816
+ <i class="fab fa-facebook text-xl"></i>
817
+ </a>
818
+ <a href="#" class="text-gray-400 hover:text-white">
819
+ <i class="fab fa-linkedin text-xl"></i>
820
+ </a>
821
+ <a href="#" class="text-gray-400 hover:text-white">
822
+ <i class="fab fa-instagram text-xl"></i>
823
+ </a>
824
+ </div>
825
+ </div>
826
+
827
+ <div>
828
+ <h3 class="text-lg font-bold mb-6">روابط سريعة</h3>
829
+ <ul class="space-y-3">
830
+ <li><a href="#" class="text-gray-400 hover:text-white">الصفحة الرئيسية</a></li>
831
+ <li><a href="#" class="text-gray-400 hover:text-white">عن المنصة</a></li>
832
+ <li><a href="#" class="text-gray-400 hover:text-white">المميزات</a></li>
833
+ <li><a href="#" class="text-gray-400 hover:text-white">كيف يعمل</a></li>
834
+ <li><a href="#" class="text-gray-400 hover:text-white">تواصل معنا</a></li>
835
+ </ul>
836
+ </div>
837
+
838
+ <div>
839
+ <h3 class="text-lg font-bold mb-6">الفحوصات</h3>
840
+ <ul class="space-y-3">
841
+ <li><a href="#" class="text-gray-400 hover:text-white">فحوصات عامة</a></li>
842
+ <li><a href="#" class="text-gray-400 hover:text-white">أمراض مزمنة</a></li>
843
+ <li><a href="#" class="text-gray-400 hover:text-white">المناعة والالتهابات</a></li>
844
+ <li><a href="#" class="text-gray-400 hover:text-white">التغذية والفيتامينات</a></li>
845
+ <li><a href="#" class="text-gray-400 hover:text-white">جميع الفحوصات</a></li>
846
+ </ul>
847
+ </div>
848
+
849
+ <div>
850
+ <h3 class="text-lg font-bold mb-6">تواصل معنا</h3>
851
+ <ul class="space-y-3">
852
+ <li class="flex items-start">
853
+ <i class="fas fa-map-marker-alt mt-1 mr-3 text-indigo-400"></i>
854
+ <span class="text-gray-400">الرياض، السعودية</span>
855
+ </li>
856
+ <li class="flex items-start">
857
+ <i class="fas fa-phone-alt mt-1 mr-3 text-indigo-400"></i>
858
+ <span class="text-gray-400">+966 50 123 4567</span>
859
+ </li>
860
+ <li class="flex items-start">
861
+ <i class="fas fa-envelope mt-1 mr-3 text-indigo-400"></i>
862
+ <span class="text-gray-400">[email protected]</span>
863
+ </li>
864
+ </ul>
865
+ </div>
866
+ </div>
867
+
868
+ <div class="pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
869
+ <p>© 2023 HemoSpace. جميع الحقوق محفوظة.</p>
870
+ </div>
871
+ </div>
872
+ </footer>
873
+
874
+ <script>
875
+ // Mobile menu toggle
876
+ document.getElementById('menu-btn').addEventListener('click', function() {
877
+ const menu = document.getElementById('mobile-menu');
878
+ menu.classList.toggle('hidden');
879
+ });
880
+
881
+ // Tab functionality
882
+ function openTab(tabName) {
883
+ const tabContents = document.getElementsByClassName('tab-content');
884
+ for (let i = 0; i < tabContents.length; i++) {
885
+ tabContents[i].classList.add('hidden');
886
+ }
887
+
888
+ const tabButtons = document.getElementsByClassName('tab-button');
889
+ for (let i = 0; i < tabButtons.length; i++) {
890
+ tabButtons[i].classList.remove('active');
891
+ }
892
+
893
+ document.getElementById(tabName).classList.remove('hidden');
894
+ event.currentTarget.classList.add('active');
895
+ }
896
+
897
+ // Smooth scrolling for navigation
898
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
899
+ anchor.addEventListener('click', function (e) {
900
+ e.preventDefault();
901
+
902
+ const targetId = this.getAttribute('href');
903
+ if (targetId === '#') return;
904
+
905
+ document.querySelector(targetId).scrollIntoView({
906
+ behavior: 'smooth'
907
+ });
908
+
909
+ // Close mobile menu if open
910
+ const mobileMenu = document.getElementById('mobile-menu');
911
+ if (!mobileMenu.classList.contains('hidden')) {
912
+ mobileMenu.classList.add('hidden');
913
+ }
914
+ });
915
+ });
916
+
917
+ // Scroll animation
918
+ const fadeElements = document.querySelectorAll('.fade-in');
919
+
920
+ const observer = new IntersectionObserver((entries) => {
921
+ entries.forEach(entry => {
922
+ if (entry.isIntersecting) {
923
+ entry.target.classList.add('animate-fadeIn');
924
+ }
925
+ });
926
+ }, {
927
+ threshold: 0.1
928
+ });
929
+
930
+ fadeElements.forEach(element => {
931
+ observer.observe(element);
932
+ });
933
+ </script>
934
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=wasmdashai/hemospace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
935
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ رائع، ما تقترحه هو **منصة صحية ذكية** مع **جهاز محمول** يقوم بتحليل الدم باستخدام تقنيات تصوير متقدمة (مثل الرنين أو الأشعة الطيفية) ويرتبط بالجوال لإرسال النتائج إلى منصة تحليلية على السحابة. هذا النموذج يجمع بين **الذكاء الاصطناعي**، **الأجهزة القابلة للحمل**، و**تحليلات البيانات الصحية**. دعنا نصمم مكونات **المنصة** و**التطبيق** بناءً على رؤيتك: --- ## 🧠 **اسم مقترح للمنصة** **HemoSpace** – مستقبل التحاليل الدموية في راحة يدك. --- ## 🧬 **فكرة المشروع** "منصة رقمية متكاملة تعتمد على جهاز محمول بحجم كف اليد، قادر على تحليل الدم من خلال تقنيات غير تقليدية (مثل الرنين أو الأشعة الطيفية) دون الحاجة لمختبر، ويرتبط بالجوال مباشرةً. يقوم الجهاز بسحب نقطة دم واحدة وتحليلها، ثم يرسل النتائج إلى منصة ذكية تستخدم الذكاء الاصطناعي لمراقبة مؤشرات المريض الحيوية وتقديم تحليلات تنبؤية وعلاجية دقيقة." --- ## 🧱 **مكونات المنصة (من حيث التقنية والوظائف)** ### 1. **الجهاز المحمول (العتاد الذكي)** * بحجم كف اليد، يعمل بالبطارية. * يحتوي على: * إبرة دقيقة لسحب نقطة دم. * وحدة تحليل بالأشعة أو الرنين الطيفي (NIR أو MRI مصغّر). * معالج دقيق لتحليل أولي. * اتصال Bluetooth / Wi-Fi بالجوال. ### 2. **التطبيق الذكي (Android / iOS)** * يستقبل النتائج من الجهاز. * يعرض النتائج لحظيًا. * يرسل البيانات إلى السحابة. * يسمح للمريض بمراقبة: * نسبة الجلوكوز، الكريات، البروتينات، الالتهابات، الخ. * سلوكيات الدم عبر الزمن. * يوفر تنبيهات حسب تغير الحالة. ### 3. **المنصة السحابية / الواجهة الإدارية** * لوحة تحكم للأطباء والمراكز الصحية. * تحليلات ذكية باستخدام الذكاء الاصطناعي: * تنبؤ بالأمراض المزمنة. * مراقبة الاستجابات الدوائية. * تحليل سلوكيات الدم عبر الزمن. * تقارير قابلة للتصدير. * سجل صحي إلكتروني. * تكامل مع قواعد بيانات طبية عالمية. --- ## 📡 **الواجهة الرئيسية للموقع الإلكتروني** ### ✳️ الصفحة الرئيسية تشمل: * **شعار المنصة** * **عنوان رئيسي جذاب:** > "نقطة دم واحدة، صورة كاملة لصحتك" * **فيديو توضيحي أو عرض تفاعلي** * **زر**: "طلب تجربة مجانية" أو "شاهد كيف يعمل" --- ### ✳️ أقسام رئيسية: #### ✅ كيف يعمل النظام؟ 1. سحب الدم باستخدام الجهاز. 2. تحليل فوري باستخدام الأشعة / الرنين الطيفي. 3. عرض النتائج عبر الجوال. 4. إرسال البيانات للمنصة السحابية. 5. تحليل بالذكاء الاصطناعي. 6. تنبيهات وتحليلات دورية. #### ✅ المزايا: * جهاز محمول بحجم اليد. * بدون حاجة لمختبر. * تقنيات تصوير طيفي دقيقة. * ربط مباشر مع الهاتف الذكي. * تحاليل AI تنبؤية. * خصوصية وأمان البيانات. #### ✅ الفحوصات التي يغطيها: * تعداد دم شامل (CBC) * مستويات السكر والكوليسترول * علامات الالتهاب (CRP) * مؤشرات الأمراض المناعية * تتبع فعالية الأدوية --- ## 🧑‍⚕️ **الفئة المستهدفة** * الأفراد الذين يعانون من أمراض مزمنة (السكري، المناعة، أمراض الدم) * كبار السن * العيادات المنزلية * المستشفيات الميدانية * المنظمات الإنسانية * المستشفيات الذكية --- ## 🔒 **الخصوصية والأمان** * تشفير البيانات من الجهاز إلى السحابة. * دعم بروتوكولات HIPAA / GDPR. * لوحة تحكم للمريض والطبيب. --- ## 📲 هل تريد الآن؟ * **مخطط معماري للنظام؟** * **تصميم واجهة الموقع؟** * **عرض تقديمي للعرض أمام مستثمرين؟** * **نموذج MVP لتطبيق الموبايل؟** أخبرني بما تريد البدء به لأساعدك خطوة بخطوة.