testdenoah commited on
Commit
cd4a00d
·
verified ·
1 Parent(s): 92bea12

Upload 10 files

Browse files
Files changed (10) hide show
  1. README.md +12 -0
  2. apropos.html +251 -0
  3. contact.html +221 -0
  4. espace-patient.html +127 -0
  5. gitattributes +35 -0
  6. index.html +411 -0
  7. ordonnance.html +344 -0
  8. prompts.txt +114 -0
  9. style.css +28 -0
  10. symptomes.html +301 -0
README.md ADDED
@@ -0,0 +1,12 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ title: premier-test-sant-ia
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: yellow
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
apropos.html ADDED
@@ -0,0 +1,251 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="À propos de PharmaCare - Notre mission, notre équipe et nos valeurs">
7
+ <title>À propos | PharmaCare</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
15
+ body {
16
+ font-family: 'Montserrat', sans-serif;
17
+ }
18
+ </style>
19
+ </head>
20
+ <body class="bg-white">
21
+ <!-- Navigation -->
22
+ <nav class="bg-white shadow-sm py-4 px-6 md:px-12 flex justify-between items-center sticky top-0 z-50">
23
+ <div class="flex items-center">
24
+ <span class="text-xl font-bold text-gray-800">Pharma<span class="text-green-600">Care</span></span>
25
+ </div>
26
+ <div class="hidden md:flex space-x-8">
27
+ <a href="index.html" class="text-gray-600 hover:text-blue-600">Accueil</a>
28
+ <a href="symptomes.html" class="text-gray-600 hover:text-blue-600">Symptômes & Diagnostic</a>
29
+ <a href="ordonnance.html" class="text-gray-600 hover:text-blue-600">Déposer ordonnance</a>
30
+ <a href="espace-patient.html" class="text-gray-600 hover:text-blue-600">Espace patient</a>
31
+ <a href="apropos.html" class="text-blue-600 font-medium">À propos</a>
32
+ <a href="contact.html" class="text-gray-600 hover:text-blue-600">Contact</a>
33
+ </div>
34
+ <button class="md:hidden">
35
+ <i data-feather="menu"></i>
36
+ </button>
37
+ </nav>
38
+
39
+ <!-- Hero Section -->
40
+ <section class="bg-gradient-to-r from-blue-50 to-green-50 py-16 px-6 md:px-12">
41
+ <div class="max-w-6xl mx-auto text-center">
42
+ <h1 class="text-3xl md:text-4xl font-bold text-gray-800 leading-tight mb-6" data-aos="fade-up">
43
+ À propos de PharmaCare
44
+ </h1>
45
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">
46
+ Découvrez notre mission, notre équipe et nos valeurs pour une santé meilleure et plus accessible.
47
+ </p>
48
+ </div>
49
+ </section>
50
+
51
+ <!-- Mission Section -->
52
+ <section class="py-20 px-6 md:px-12 bg-white">
53
+ <div class="max-w-6xl mx-auto">
54
+ <div class="grid md:grid-cols-2 gap-12 items-center">
55
+ <div data-aos="fade-right">
56
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">Notre mission</h2>
57
+ <p class="text-lg text-gray-600 mb-6">
58
+ PharmaCare est un projet étudiant en pharmacie visant à aider à l'orientation des patients grâce à l'intelligence artificielle. Notre objectif est de rendre l'information santé plus accessible tout en soulignant que notre service ne remplace pas un avis médical professionnel.
59
+ </p>
60
+ <p class="text-lg text-gray-600">
61
+ Nous croyons en une approche transparente et éducative de la santé, où la technologie sert à guider et informer, jamais à remplacer l'expertise d'un professionnel de santé.
62
+ </p>
63
+ </div>
64
+ <div data-aos="fade-left" class="text-center">
65
+ <div class="w-64 h-64 bg-blue-100 rounded-full flex items-center justify-center mx-auto">
66
+ <i data-feather="target" class="text-blue-600 w-16 h-16"></i>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </section>
72
+
73
+ <!-- Values Section -->
74
+ <section class="py-20 px-6 md:px-12 bg-gray-50">
75
+ <div class="max-w-6xl mx-auto">
76
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-16" data-aos="fade-up">Nos valeurs</h2>
77
+
78
+ <div class="grid md:grid-cols-3 gap-8">
79
+ <!-- Value 1 -->
80
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100" data-aos="fade-up" data-aos-delay="100">
81
+ <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
82
+ <i data-feather="shield" class="text-blue-600 w-6 h-6"></i>
83
+ </div>
84
+ <h3 class="text-xl font-semibold text-gray-800 mb-3 text-center">Transparence</h3>
85
+ <p class="text-gray-600 text-center">
86
+ Nous communiquons clairement sur les limites de notre service et l'importance de consulter un professionnel de santé.
87
+ </p>
88
+ </div>
89
+
90
+ <!-- Value 2 -->
91
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100" data-aos="fade-up" data-aos-delay="200">
92
+ <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-6 mx-auto">
93
+ <i data-feather="check-circle" class="text-green-600 w-6 h-6"></i>
94
+ </div>
95
+ <h3 class="text-xl font-semibold text-gray-800 mb-3 text-center">Fiabilité</h3>
96
+ <p class="text-gray-600 text-center">
97
+ Nos informations sont basées sur des sources médicales vérifiées et régulièrement mises à jour.
98
+ </p>
99
+ </div>
100
+
101
+ <!-- Value 3 -->
102
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100" data-aos="fade-up" data-aos-delay="300">
103
+ <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-6 mx-auto">
104
+ <i data-feather="lock" class="text-purple-600 w-6 h-6"></i>
105
+ </div>
106
+ <h3 class="text-xl font-semibold text-gray-800 mb-3 text-center">Confidentialité</h3>
107
+ <p class="text-gray-600 text-center">
108
+ La protection de vos données de santé est notre priorité absolue. Nous respectons les réglementations les plus strictes.
109
+ </p>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </section>
114
+
115
+ <!-- Team Section -->
116
+ <section class="py-20 px-6 md:px-12 bg-white">
117
+ <div class="max-w-6xl mx-auto">
118
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-16" data-aos="fade-up">Notre équipe</h2>
119
+
120
+ <div class="grid md:grid-cols-3 gap-8">
121
+ <!-- Team Member 1 -->
122
+ <div class="text-center" data-aos="fade-up" data-aos-delay="100">
123
+ <div class="w-32 h-32 bg-blue-100 rounded-full mx-auto mb-6 flex items-center justify-center">
124
+ <i data-feather="user" class="text-blue-600 w-12 h-12"></i>
125
+ </div>
126
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Dr. Martin Dupont</h3>
127
+ <p class="text-blue-600 font-medium mb-2">Pharmacien Fondateur</p>
128
+ <p class="text-gray-600">
129
+ Diplômé en pharmacie avec une spécialisation en santé digitale et innovation médicale.
130
+ </p>
131
+ </div>
132
+
133
+ <!-- Team Member 2 -->
134
+ <div class="text-center" data-aos="fade-up" data-aos-delay="200">
135
+ <div class="w-32 h-32 bg-green-100 rounded-full mx-auto mb-6 flex items-center justify-center">
136
+ <i data-feather="user" class="text-green-600 w-12 h-12"></i>
137
+ </div>
138
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Dr. Sophie Leroy</h3>
139
+ <p class="text-green-600 font-medium mb-2">Responsable IA Médicale</p>
140
+ <p class="text-gray-600">
141
+ Expert en intelligence artificielle appliquée au domaine de la santé et diagnostics.
142
+ </p>
143
+ </div>
144
+
145
+ <!-- Team Member 3 -->
146
+ <div class="text-center" data-aos="fade-up" data-aos-delay="300">
147
+ <div class="w-32 h-32 bg-purple-100 rounded-full mx-auto mb-6 flex items-center justify-center">
148
+ <i data-feather="user" class="text-purple-600 w-12 h-12"></i>
149
+ </div>
150
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Thomas Moreau</h3>
151
+ <p class="text-purple-600 font-medium mb-2">Développeur Full-Stack</p>
152
+ <p class="text-gray-600">
153
+ Spécialiste en développement d'applications santé sécurisées et conformes aux normes.
154
+ </p>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </section>
159
+
160
+ <!-- Disclaimer Section -->
161
+ <section class="py-12 px-6 md:px-12 bg-blue-50">
162
+ <div class="max-w-4xl mx-auto text-center">
163
+ <div class="bg-white p-6 rounded-xl shadow-sm border border-blue-100" data-aos="fade-up">
164
+ <div class="flex items-center justify-center mb-4">
165
+ <i data-feather="alert-triangle" class="text-blue-600 w-8 h-8 mr-3"></i>
166
+ <h3 class="text-xl font-bold text-blue-700">Information importante</h3>
167
+ </div>
168
+ <p class="text-blue-600">
169
+ PharmaCare est un projet de démonstration étudiant. Notre service d'analyse de symptômes fournit des orientations générales basées sur des informations limitées et ne constitue en aucun cas un diagnostic médical. Consultez toujours un professionnel de santé qualifié pour tout problème de santé.
170
+ </p>
171
+ </div>
172
+ </div>
173
+ </section>
174
+
175
+ <!-- Footer -->
176
+ <footer class="bg-gray-900 text-white py-12 px-6 md:px-12">
177
+ <div class="max-w-6xl mx-auto grid md:grid-cols-4 gap-12">
178
+ <!-- Logo & Description -->
179
+ <div>
180
+ <div class="flex items-center mb-4">
181
+ <span class="text-xl font-bold text-white">Pharma<span class="text-green-400">Care</span></span>
182
+ </div>
183
+ <p class="text-gray-400 mb-6">
184
+ Votre partenaire santé intelligent pour une meilleure qualité de vie.
185
+ </p>
186
+ <div class="flex space-x-4">
187
+ <a href="#" class="text-gray-400 hover:text-white transition">
188
+ <i data-feather="facebook"></i>
189
+ </a>
190
+ <a href="#" class="text-gray-400 hover:text-white transition">
191
+ <i data-feather="twitter"></i>
192
+ </a>
193
+ <a href="#" class="text-gray-400 hover:text-white transition">
194
+ <i data-feather="instagram"></i>
195
+ </a>
196
+ <a href="#" class="text-gray-400 hover:text-white transition">
197
+ <i data-feather="linkedin"></i>
198
+ </a>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- Links 1 -->
203
+ <div>
204
+ <h4 class="text-lg font-semibold mb-4">Navigation</h4>
205
+ <ul class="space-y-3">
206
+ <li><a href="index.html" class="text-gray-400 hover:text-white transition">Accueil</a></li>
207
+ <li><a href="symptomes.html" class="text-gray-400 hover:text-white transition">Symptômes & Diagnostic</a></li>
208
+ <极速赛车开奖直播</a></li>
209
+ <li><a href="espace-patient.html" class="text-gray-400 hover:text-white transition">Espace patient</a></li>
210
+ </ul>
211
+ </div>
212
+
213
+ <!-- Links 2 -->
214
+ <div>
215
+ <h4 class="text-lg font-semibold mb-4">Entreprise</h4>
216
+ <ul class="space-y-3">
217
+ <li><a href="apropos.html" class="text-gray-400 hover:text-white transition">À propos</a></li>
218
+ <li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact</a></li>
219
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Carrières</a></极速赛车开奖直播</li>
220
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
221
+ </ul>
222
+ </div>
223
+
224
+ <!-- Legal -->
225
+ <div>
226
+ <h4 class="text-lg font-semibold mb-极速赛车开奖直播4">Légal</h4>
227
+ <ul class="space-y-3">
228
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Mentions légales</a></li>
229
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a></li>
230
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions d'utilisation</a></li>
231
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Cookies</a></li>
232
+ </ul>
233
+ </div>
234
+ </div>
235
+
236
+ <div class="max-w-6xl mx-auto border-t border-gray-800 mt-12 pt-8 text-center text-gray-500 text-sm">
237
+ <p>© 2023 PharmaCare. Tous droits réservés.</p>
238
+ </div>
239
+ </footer>
240
+
241
+ <script>
242
+ AOS.init({
243
+ duration: 800,
244
+ easing: 'ease-in-out',
245
+ once: true
246
+ });
247
+
248
+ feather.replace();
249
+ </script>
250
+ </body>
251
+ </html>
contact.html ADDED
@@ -0,0 +1,221 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Contactez PharmaCare - Notre équipe est à votre écoute pour toute question">
7
+ <title>Contact | PharmaCare</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="极速赛车开奖直播https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
15
+ body {
16
+ font-family: 'Montserrat', sans-serif;
17
+ }
18
+ </style>
19
+ </head>
20
+ <body class="bg-white">
21
+ <!-- Navigation -->
22
+ <nav class="bg-white shadow-sm py-4 px-6 md:px-12 flex justify-between items-center sticky top-0 z-50">
23
+ <div class="flex items-center">
24
+ <span class="text-xl font-bold text-gray-800">Pharma<span class="text-green-600">Care</span></span>
25
+ </div>
26
+ <div class="hidden md:flex space-x-8">
27
+ <a href="index.html" class="text-gray-600 hover:text-blue-600">Accueil</a>
28
+ <a href="symptomes.html" class="text-gray极速赛车开奖直播-600 hover:text-blue-600">Symptômes & Diagnostic</a>
29
+ <a href="ordonnance.html" class="text-gray-600 hover:text-blue-600">Déposer ordonnance</a>
30
+ <a href="espace-patient.html" class="text-gray-600 hover:text-blue-600">Espace patient</a>
31
+ <a href="apropos.html" class="text-gray-600 hover:text-blue-600">À propos</a>
32
+ <a href="contact.html" class="text-blue-600 font-medium">Contact</a>
33
+ </div>
34
+ <button class="md:hidden">
35
+ <i data-feather="menu"></i>
36
+ </button>
37
+ </nav>
38
+
39
+ <!-- Hero Section -->
40
+ <section class="bg-gradient-to-r from-blue-50 to-green-50 py-16 px-6 md:px-12">
41
+ <div class="max-w-6xl mx-auto text-center">
42
+ <h1 class="text-3xl md:text-4xl font-bold text-gray-800 leading-tight mb-6" data-aos="fade-up">
43
+ Contactez-nous
44
+ </h1>
45
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">
46
+ Notre équipe est à votre écoute pour répondre à toutes vos questions et vous accompagner.
47
+ </p>
48
+ </div>
49
+ </section>
50
+
51
+ <!-- Contact Form -->
52
+ <section class="py-20 px-6 md:px-12 bg-white">
53
+ <div class="max-w-4xl mx-auto">
54
+ <div class="bg-white p-8 md:p-10 rounded-xl shadow-lg border border-gray-100" data-aos="fade-up">
55
+ <div class="flex items-center mb-8">
56
+ <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mr-6">
57
+ <i data-feather="mail" class="text-blue-600 w-6 h-6"></极速赛车开奖直播i>
58
+ </div>
59
+ <h2 class="text-2xl font-bold text-gray-800">Envoyez-nous un message</h2>
60
+ </div>
61
+
62
+ <form class="space-y-6">
63
+ <div class="grid md:grid-cols-2 gap-6">
64
+ <div>
65
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nom complet</label>
66
+ <input type="text" id="name" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:border-green-500 transition duration-300" placeholder="Votre nom">
67
+ </div>
68
+
69
+ <div>
70
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Adresse email</label>
71
+ <input type="email" id="email" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:border-green-500 transition duration-300" placeholder="votre@email.com">
72
+ </div>
73
+ </div>
74
+
75
+ <div>
76
+ <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Sujet</label>
77
+ <input type="text" id="subject" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:border-green-500 transition duration-300" placeholder="Objet de votre message">
78
+ </div>
79
+
80
+ <div>
81
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
82
+ <textarea id="message" required rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:border-green-500 transition duration-300" placeholder="Décrivez votre demande..."></textarea>
83
+ </div>
84
+
85
+ <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-4 rounded-lg transition duration-300">
86
+ Envoyer le message
87
+ </button>
88
+ </form>
89
+ </div>
90
+ </div>
91
+ </section>
92
+
93
+ <!-- Contact Info -->
94
+ <section class="py-20 px-6 md:px-12 bg-gray-50">
95
+ <div class="max-w-6xl mx-auto">
96
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-16" data-aos="fade-up">Nos coordonnées</h2>
97
+
98
+ <div class="grid md:grid-cols-3 gap-8">
99
+ <!-- Email -->
100
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 text-center" data-aos="fade-up" data-aos-delay="100">
101
+ <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
102
+ <i data-feather="mail" class="text-blue-600 w-6 h-6"></i>
103
+ </div>
104
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Email</h3>
105
+ <p class="text-gray-600">contact@pharmacare.fr</p>
106
+ <p class="text-gray-600">support@pharmacare.fr</p>
107
+ </div>
108
+
109
+ <!-- Phone -->
110
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 text-center" data-aos="fade-up" data-aos-delay="200">
111
+ <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-6 mx-auto">
112
+ <i data-feather="phone" class="text-green-600 w-6 h-6"></i>
113
+ </div>
114
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Téléphone</h3>
115
+ <p class="text-gray-600">+33 1 23 45 67 89</p>
116
+ <p class="text-gray-600">Lun-Ven: 9h-18h</p>
117
+ </div>
118
+
119
+ <!-- Address -->
120
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 text-center" data-aos="fade-up" data-aos-delay="300">
121
+ <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-6 mx-auto">
122
+ <i data-feather="map-pin" class="text-purple-600 w-6 h-6"></i>
123
+ </div>
124
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Adresse</h3>
125
+ <p class="text-gray-600">123 Avenue de la Santé</p>
126
+ <p class="text-gray-600">75000 Paris, France</p>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </section>
131
+
132
+ <!-- FAQ Preview -->
133
+ <section class="py-20 px-6 md:px-12 bg-white">
134
+ <div class="max-w-4xl mx-auto text-center">
135
+ <h2 class="text-3xl font-bold text-gray-800 mb-6" data-aos="fade-up">Questions fréquentes</h2>
136
+ <p class="text-lg text-gray-600 mb-8" data-aos="fade-up" data-aos-delay="100">
137
+ Consultez notre FAQ pour trouver rapidement des réponses à vos questions.
138
+ </p>
139
+ <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-8 rounded-full transition duration-300 transform hover:scale-105" data-aos="fade-up" data-aos-delay="200">
140
+ Voir la FAQ
141
+ </a>
142
+ </div>
143
+ </section>
144
+
145
+ <!-- Footer -->
146
+ <footer class="bg-gray-900 text-white py-12 px-6 md:px-12">
147
+ <div class="max-w-6xl mx-auto grid md:grid-cols-4 gap-12">
148
+ <!-- Logo & Description -->
149
+ <div>
150
+ <div class="flex items-center mb-4">
151
+ <span class="text-xl font-bold text-white">Pharma<span class="text-green-400极速赛车开奖直播">Care</span></span>
152
+ </div>
153
+ <p class="text-gray-400 mb-6">
154
+ Votre partenaire santé intelligent pour une meilleure qualité de vie.
155
+ </极速赛车开奖直播p>
156
+ <div class="flex space极速赛车开奖直播-x-4">
157
+ <a href="#" class="text-gray-400 hover:text-white transition">
158
+ <i data-feather="facebook"></i>
159
+ </a>
160
+ <a href="#" class="text-gray-400 hover:text-white transition">
161
+ <i data-feather="twitter"></i>
162
+ </a>
163
+ <a href="#" class="text-gray-400 hover:text-white transition">
164
+ <i data-feather="instagram"></i>
165
+ </a>
166
+ <a href="#" class="text-gray-400 hover:text-white transition">
167
+ <i data-feather="linkedin"></i>
168
+ </a>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Links 1 -->
173
+ <div>
174
+ <h4 class="text-lg font-semibold mb-4">Navigation</h4>
175
+ <ul class="space-y-3">
176
+ <li><a href="index.html" class="text-gray-400 hover:text-white transition">Accueil</a></li>
177
+ <li><a href="symptomes.html" class="text-gray-400 hover:text-white transition">Symptômes & Diagnostic</a></li>
178
+ <li><a href="ordonnance.html" class="text-gray-400 hover:text-white transition">Déposer ordonnance</a></li>
179
+ <li><a href="espace-patient.html" class="text-gray-400 hover:text-white transition">Espace patient</a></li>
180
+ </ul>
181
+ </div>
182
+
183
+ <!-- Links 2 -->
184
+ <div>
185
+ <h4 class="text-lg font-semibold mb-4">Entreprise</h4>
186
+ <ul class="space-y-3">
187
+ <li><a href="apropos.html" class="text-gray-400 hover:text-white transition">À propos</a></li>
188
+ <li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact</a></li>
189
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Carrières</a></li>
190
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
191
+ </ul>
192
+ </div>
193
+
194
+ <!-- Legal -->
195
+ <div>
196
+ <h4 class="text-lg font-semibold mb-4">Légal</h4>
197
+ <ul class="space-y-3">
198
+ <li><a href="#" class="极速赛车开奖直播text-gray-400 hover:text-white transition">Mentions légales</a></li>
199
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a></li>
200
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions d'utilisation极速赛车开奖直播</a></li>
201
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Cookies</极速赛车开奖直播</a></li>
202
+ </ul>
203
+ </div>
204
+ </div>
205
+
206
+ <div class="max-w-6xl mx-auto border-t border-gray-800 mt-12 pt-8 text-center text-gray-500 text-sm">
207
+ <p>© 2023 PharmaCare. Tous droits réservés.</p>
208
+ </div>
209
+ </footer>
210
+
211
+ <script>
212
+ AOS.init({
213
+ duration: 800,
214
+ easing: 'ease-in-out',
215
+ once: true
216
+ });
217
+
218
+ feather.replace();
219
+ </script>
220
+ </body>
221
+ </html>
espace-patient.html ADDED
@@ -0,0 +1,127 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Espace patient PharmaCare - Gérez vos ordonnances et suivi médical en ligne">
7
+ <title>Espace patient | PharmaCare</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
15
+ body {
16
+ font-family: 'Montserrat', sans-serif;
17
+ }
18
+ .login-card {
19
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
20
+ }
21
+ .form-input:focus {
22
+ box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="bg-gray-50">
27
+ <!-- Navigation -->
28
+ <nav class="bg-white shadow极速赛车开奖直播-sm py-4 px-6 md:px-12 flex justify-between items-center sticky top-0 z-50">
29
+ <div class="flex items-center">
30
+ <span class="text-xl font-bold text-gray-800">Pharma<span class="text-green-600">Care</span></span>
31
+ </div>
32
+ <div class="hidden md:flex space-x-6">
33
+ <a href="index.html" class="text-gray-600 hover:text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-50 transition duration-300">Accueil</a>
34
+ <a href="symptomes.html" class="text-gray-600 hover:text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-50 transition duration-300 whitespace-nowrap">Symptômes & Diagnostic</a>
35
+ 极速赛车开奖直播 <a href="ordonnance.html" class="text-gray-600 hover:text-blue-600 px-4 py-2 rounded-lg hover:bg-blue极速赛车开奖直播-50 transition duration-300 whitespace-nowrap">Déposer ordonnance</a>
36
+ <a href="espace-patient.html" class="text-blue-600 font-medium px-4 py-2 rounded-lg hover:bg-blue-50 transition duration-300 whitespace-nowrap">Espace patient</a>
37
+ <a href="apropos.html" class="text-gray-600 hover:text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-50 transition duration-300">À propos</a>
38
+ <a href="contact.html" class="text-gray-600 hover:text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-50 transition duration-300">Contact</a>
39
+ </div>
40
+ <button class="md:hidden">
41
+ <i data-feather="menu"></i>
42
+ </button>
43
+ </nav>
44
+
45
+ <!-- Hero Section -->
46
+ <section class="bg-gradient-to-r from-blue-50 to-green-50 py-16 px-6 md:px-12">
47
+ <div class="max-w-6xl mx-auto text-center">
48
+ <h1 class="text-3xl md:text-4xl font-bold text-gray-800 leading-tight mb-6" data-aos="fade-up">
49
+ Votre espace patient PharmaCare
50
+ </h1>
51
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">
52
+ Gérez vos ordonnances, vos symptômes et votre suivi médical en toute simplicité.
53
+ </p>
54
+ </div>
55
+ </section>
56
+
57
+ <!-- Login/Register Tabs -->
58
+ <section class="py-20 px-6 md:px-12">
59
+ <div class="max-w-md mx-auto">
60
+ <div class="flex border-b border-gray-200 mb-8">
61
+ <button class="flex-1 py-4 px-1 text-center border-b-2 font-medium text-sm border-blue-500 text-blue-600" id="loginTab">
62
+ Connexion
63
+ </button>
64
+ <button class="flex-1 py-4 px-1 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700" id="registerTab">
65
+ Inscription
66
+ </button>
67
+ </div>
68
+
69
+ <!-- Login Form -->
70
+ <div class="bg-white login-card p-8 rounded-xl" id="loginForm">
71
+ <div class="mb-8 text-center">
72
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
73
+ <i data-feather="user" class="text-blue-600 w-6 h-6"></i>
74
+ </div>
75
+ <h2 class="text-2xl font-bold text-gray-800">Connectez-vous</h2>
76
+ </div>
77
+
78
+ <form class="space-y-6" id="loginForm">
79
+ <div>
80
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Adresse email</label>
81
+ <input type="email" id="email" required class="form-input w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:border-green-500 transition duration-300" placeholder="votre@email.com">
82
+ </div>
83
+
84
+ <div>
85
+ <div class="flex justify-between items-center mb-1">
86
+ <label for="password" class="block text-sm font-medium text-gray-700">Mot de passe</label>
87
+ <a href="#" class="text-sm text-green-600 hover:text-green-500">Mot de passe oublié ?</a>
88
+ </div>
89
+ <input type="password" id="password" required class="form-input w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:border-green-500 transition duration-300" placeholder="••••••••">
90
+ </div>
91
+
92
+ <div class="flex items-center">
93
+ <input type="checkbox" id="remember" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
94
+ <label for="remember" class="ml-2 block text-sm text-gray-700">Se souvenir de moi</label>
95
+ </div>
96
+
97
+ <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-4 rounded-lg transition duration-300">
98
+ Se connecter
99
+ </button>
100
+ </form>
101
+
102
+ <div class="mt-6">
103
+ <div class="relative">
104
+ <div class="absolute inset-0 flex items-center">
105
+ <div class="w-full border-t border-gray-300"></div>
106
+ </div>
107
+ <div class="relative flex justify-center text-sm">
108
+ <span class="px-2 bg-white text-gray-500">Ou connectez-vous avec</span>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="mt-6 grid grid-cols-1 gap-3">
113
+ <button onclick="handleGoogleSignIn()" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 transition duration-300">
114
+ <i data-feather="google" class="text-red-600 w-5 h-5 mr-2"></i>
115
+ Se connecter avec Google
116
+ </button>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Register Form (Hidden by default) -->
122
+ <div class="bg-white login-card p-8 rounded-xl hidden" id="registerForm" data-aos="fade-up">
123
+ <div class="mb-8 text-center">
124
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
125
+ <i data-feather="user-plus" class="text-green-600 w
126
+ </body>
127
+ </html>
gitattributes ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ *.7z filter=lfs diff=lfs merge=lfs -text
2
+ *.arrow filter=lfs diff=lfs merge=lfs -text
3
+ *.bin filter=lfs diff=lfs merge=lfs -text
4
+ *.bz2 filter=lfs diff=lfs merge=lfs -text
5
+ *.ckpt filter=lfs diff=lfs merge=lfs -text
6
+ *.ftz filter=lfs diff=lfs merge=lfs -text
7
+ *.gz filter=lfs diff=lfs merge=lfs -text
8
+ *.h5 filter=lfs diff=lfs merge=lfs -text
9
+ *.joblib filter=lfs diff=lfs merge=lfs -text
10
+ *.lfs.* filter=lfs diff=lfs merge=lfs -text
11
+ *.mlmodel filter=lfs diff=lfs merge=lfs -text
12
+ *.model filter=lfs diff=lfs merge=lfs -text
13
+ *.msgpack filter=lfs diff=lfs merge=lfs -text
14
+ *.npy filter=lfs diff=lfs merge=lfs -text
15
+ *.npz filter=lfs diff=lfs merge=lfs -text
16
+ *.onnx filter=lfs diff=lfs merge=lfs -text
17
+ *.ot filter=lfs diff=lfs merge=lfs -text
18
+ *.parquet filter=lfs diff=lfs merge=lfs -text
19
+ *.pb filter=lfs diff=lfs merge=lfs -text
20
+ *.pickle filter=lfs diff=lfs merge=lfs -text
21
+ *.pkl filter=lfs diff=lfs merge=lfs -text
22
+ *.pt filter=lfs diff=lfs merge=lfs -text
23
+ *.pth filter=lfs diff=lfs merge=lfs -text
24
+ *.rar filter=lfs diff=lfs merge=lfs -text
25
+ *.safetensors filter=lfs diff=lfs merge=lfs -text
26
+ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
27
+ *.tar.* filter=lfs diff=lfs merge=lfs -text
28
+ *.tar filter=lfs diff=lfs merge=lfs -text
29
+ *.tflite filter=lfs diff=lfs merge=lfs -text
30
+ *.tgz filter=lfs diff=lfs merge=lfs -text
31
+ *.wasm filter=lfs diff=lfs merge=lfs -text
32
+ *.xz filter=lfs diff=lfs merge=lfs -text
33
+ *.zip filter=lfs diff=lfs merge=lfs -text
34
+ *.zst filter=lfs diff=lfs merge=lfs -text
35
+ *tfevents* filter=lfs diff=lfs merge=lfs -text
index.html ADDED
@@ -0,0 +1,411 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="PharmaCare - Plateforme santé innovante pour analyse de symptômes, conseils personnalisés et gestion d'ordonnances">
7
+ <title>PharmaCare - Votre partenaire santé intelligent</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
15
+ body {
16
+ font-family: 'Montserrat', sans-serif;
17
+ }
18
+ .hero-gradient {
19
+ background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ed 100%);
20
+ }
21
+ .feature-card:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
24
+ }
25
+ </style>
26
+ </head>
27
+ <body class="bg-white">
28
+ <!-- Navigation -->
29
+ <nav class="bg-white shadow-sm py-4 px-6 md:px-12 flex justify-between items-center sticky top-0 z-50">
30
+ <div class="flex items-center">
31
+ <span class="text-xl font-bold text-gray-800">Pharma<span class="text-green-600">Care</span></span>
32
+ </div>
33
+ <div class="hidden md:flex space-x-8">
34
+ <a href="index.html" class="text-blue-600 font-medium">Accueil</a>
35
+ <a href="symptomes.html" class="text-gray-600 hover:text-blue-600">Symptômes & Diagnostic</a>
36
+ <a href="ordonnance.html" class="text-gray-600 hover:text-blue-600">Déposer ordonnance</a>
37
+ <a href="espace-patient.html" class="text-gray-600 hover:text-blue-600">Espace patient</a>
38
+ <a href="apropos.html" class="text-gray-600 hover:text-blue-600">À propos</a>
39
+ <a href="contact.html" class="text-gray-600 hover:text-blue-600">Contact</a>
40
+ </div>
41
+ <button class="md:hidden">
42
+ <i data-feather="menu"></i>
43
+ </button>
44
+ </nav>
45
+
46
+ <!-- Hero Section -->
47
+ <section class="hero-gradient py-20 px-6 md:px-12">
48
+ <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
49
+ <div data-aos="fade-right">
50
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 leading-tight mb-6">
51
+ Décrivez vos symptômes et obtenez de l'aide immédiate avec PharmaCare
52
+ </h1>
53
+ <p class="text-lg text-gray-600 mb-8">
54
+ Notre plateforme intelligente vous guide vers les meilleures solutions santé, en toute sécurité et confidentialité.
55
+ </p>
56
+ <a href="symptomes.html#symptom-input" class="bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 inline-block" onclick="focusSymptomInput()">
57
+ Commencer maintenant
58
+ </a>
59
+ </div>
60
+ <div data-aos="fade-left" class="relative">
61
+ <div class="bg-white p-8 rounded-2xl shadow-lg border border-gray-100">
62
+ <a href="symptomes.html#symptom-input" class="h-64 bg-blue-50 rounded-lg flex items-center justify-center cursor-pointer hover:bg-blue-100 transition duration-300" onclick="focusSymptomInput()">
63
+ <div class="text-center">
64
+ <i data-feather="message-square" class="w-12 h-12 text-blue-500 mx-auto mb-4"></i>
65
+ <p class="text-gray-600">Espace pour l'interface IA de diagnostic</p>
66
+ </div>
67
+ </a>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </section>
72
+
73
+ <!-- Features Section -->
74
+ <section class="py-20 px-6 md:px-12 bg-white">
75
+ <div class="max-w-6xl mx-auto">
76
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-16" data-aos="fade-up">Comment PharmaCare vous aide</h2>
77
+
78
+ <div class="grid md:grid-cols-3 gap-8">
79
+ <!-- Feature 1 -->
80
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300" data-aos="fade-up" data-aos-delay="100">
81
+ <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6">
82
+ <i data-feather="activity" class="text-blue-600 w-6 h-6"></i>
83
+ </div>
84
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Analyse intelligente</h3>
85
+ <p class="text-gray-600">
86
+ Notre technologie IA analyse vos symptômes pour vous orienter vers les solutions les plus adaptées.
87
+ </p>
88
+ </div>
89
+
90
+ <!-- Feature 2 -->
91
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300" data-aos="fade-up" data-aos-delay="200">
92
+ <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-6">
93
+ <i data-feather="user" class="text-green-600 w-6 h-6"></i>
94
+ </div>
95
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Conseils personnalisés</h3>
96
+ <p class="text-gray-600">
97
+ Recevez des recommandations santé basées sur votre profil et vos antécédents médicaux.
98
+ </p>
99
+ </div>
100
+
101
+ <!-- Feature 3 -->
102
+ <div class="feature-card bg-white p-8 rounded-xl shadow-md border border-gray-100 transition duration-300" data-aos="fade-up" data-aos-delay="300">
103
+ <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-6">
104
+ <i data-feather="file-text" class="text-purple-600 w-6 h-6"></i>
105
+ </div>
106
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Gestion d'ordonnances</h3>
107
+ <p class="text-gray-600">
108
+ Déposez et suivez vos ordonnances en ligne simplement et en toute sécurité.
109
+ </p>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </section>
114
+
115
+ <!-- Testimonials -->
116
+ <section class="py-20 px-6 md:px-12 bg-gray-50">
117
+ <div class="max-w-6xl mx-auto">
118
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-16" data-aos="fade-up">Ce que disent nos utilisateurs</h2>
119
+
120
+ <div class="grid md:grid-cols-3 gap-8">
121
+ <!-- Testimonial 1 -->
122
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100" data-aos="fade-up" data-aos-delay="100">
123
+ <div class="flex items-center mb-4">
124
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
125
+ <i data-feather="user" class="text-blue-600"></i>
126
+ </div>
127
+ <div>
128
+ <h4 class="font-medium text-gray-800">Marie D.</h4>
129
+ <div class="flex text-yellow-400">
130
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
131
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
132
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
133
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
134
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ <p class="text-gray-600">
139
+ "PharmaCare m'a aidée à comprendre mes symptômes et à savoir quand consulter. Un gain de temps incroyable !"
140
+ </p>
141
+ </div>
142
+
143
+ <!-- Testimonial 2 -->
144
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100" data-aos="fade-up" data-aos-delay="200">
145
+ <div class="flex items-center mb-4">
146
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4">
147
+ <i data-feather="user" class="text-green-600"></i>
148
+ </div>
149
+ <div>
150
+ <h4 class="font-medium text-gray-800">Thomas L.</h4>
151
+ <div class="flex text-yellow-400">
152
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
153
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
154
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
155
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
156
+ <i data-feather="star" class="w-4 h-4"></i>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ <p class="text-gray-600">
161
+ "La gestion des ordonnances est révolutionnaire. Plus besoin de garder des papiers partout, tout est centralisé."
162
+ </p>
163
+ </div>
164
+
165
+ <!-- Testimonial 3 -->
166
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100" data-aos="fade-up" data-aos-delay="300">
167
+ <div class="flex items-center mb-4">
168
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
169
+ <i data-feather="user" class="text-purple-600"></i>
170
+ </div>
171
+ <div>
172
+ <h4 class="font-medium text-gray-800">Sophie R.</h4>
173
+ <div class="flex text-yellow-400">
174
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
175
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
176
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
177
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
178
+ <i data-feather="star" class="w-4 h-4 fill-current"></i>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ <p class="text-gray-600">
183
+ "Les conseils personnalisés m'ont permis d'améliorer mon hygiène de vie. Une application indispensable !"
184
+ </p>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </section>
189
+
190
+ <!-- FAQ Section -->
191
+ <section class="py-20 px-6 md:px-12 bg-white">
192
+ <div class="max-w-4xl mx-auto">
193
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-16" data-aos="fade-up">Questions fréquentes</h2>
194
+
195
+ <div class="space-y-6">
196
+ <!-- FAQ 1 -->
197
+ <div class="border border-gray-200 rounded-xl overflow-hidden" data-aos="fade-up" data-aos-delay="100">
198
+ <button class="w-full flex justify-between items-center p-6 text-left">
199
+ <h3 class="text-lg font-medium text-gray-800">PharmaCare remplace-t-il un médecin ?</h3>
200
+ <i data-feather="chevron-down" class="text-gray-500 transform transition-transform duration-300"></i>
201
+ </button>
202
+ <div class="px-6 pb-6 hidden">
203
+ <p class="text-gray-600">
204
+ Non, PharmaCare ne remplace pas une consultation médicale. Notre plateforme fournit des informations et des orientations basées sur vos symptômes, mais nous vous recommandons toujours de consulter un professionnel de santé pour un diagnostic précis.
205
+ </p>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- FAQ 2 -->
210
+ <div class="border border-gray-200 rounded-xl overflow-hidden" data-aos="fade-up" data-aos-delay="200">
211
+ <button class="w-full flex justify-between items-center p-6 text-left">
212
+ <h3 class="text-lg font-medium text-gray-800">Mes données sont-elles sécurisées ?</h3>
213
+ <i data-feather="chevron-down" class="text-gray-500 transform transition-transform duration-300"></i>
214
+ </button>
215
+ <div class="px-6 pb-6 hidden">
216
+ <p class="text-gray-600">
217
+ Absolument. Nous utilisons des protocoles de chiffrement avancés pour protéger vos données médicales. PharmaCare est conforme aux réglementations en vigueur sur la protection des données de santé.
218
+ </p>
219
+ </div>
220
+ </div>
221
+
222
+ <!-- FAQ 3 -->
223
+ <div class="border border-gray-200 rounded-xl overflow-hidden" data-aos="fade-up" data-aos-delay="300">
224
+ <button class="w-full flex justify-between items-center p-6 text-left">
225
+ <h3 class="text-lg font-medium text-gray-800">Comment fonctionne l'analyse des symptômes ?</h3>
226
+ <i data-feather="chevron-down" class="text-gray-500 transform transition-transform duration-300"></i>
227
+ </button>
228
+ <div class="px-6 pb-6 hidden">
229
+ <p class="text-gray-600">
230
+ Notre intelligence artificielle analyse les symptômes que vous décrivez en les comparant à une vaste base de connaissances médicales. Le système vous pose des questions complémentaires pour affiner son analyse et vous propose des orientations adaptées.
231
+ </p>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </section>
237
+
238
+ <!-- Blog Preview -->
239
+ <section class="py-20 px-6 md:px-12 bg-gray-50">
240
+ <div class="max-w-6xl mx-auto">
241
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-16" data-aos="fade-up">Notre blog santé</h2>
242
+
243
+ <div class="grid md:grid-cols-3 gap-8">
244
+ <!-- Blog 1 -->
245
+ <div class="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100" data-aos="fade-up" data-aos-delay="100">
246
+ <div class="h-48 bg-blue-100 flex items-center justify-center">
247
+ <i data-feather="file-text" class="w-12 h-12 text-blue-600"></i>
248
+ </div>
249
+ <div class="p-6">
250
+ <span class="text-sm text-blue-600 font-medium">Conseils santé</span>
251
+ <h3 class="text-xl font-semibold text-gray-800 mt-2 mb-3">10 astuces pour renforcer votre système immunitaire</h3>
252
+ <p class="text-gray-600 mb-4">Découvrez nos conseils pour rester en bonne santé toute l'année.</p>
253
+ <a href="#" class="text-blue-600 font-medium flex items-center">
254
+ Lire l'article
255
+ <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
256
+ </a>
257
+ </div>
258
+ </div>
259
+
260
+ <!-- Blog 2 -->
261
+ <div class="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100" data-aos="fade-up" data-aos-delay="200">
262
+ <div class="h-48 bg-green-100 flex items-center justify-center">
263
+ <i data-feather="file-text" class="w-12 h-12 text-green-600"></i>
264
+ </div>
265
+ <div class="p-6">
266
+ <span class="text-sm text-green-600 font-medium">Technologie</span>
267
+ <h3 class="text-xl font-semibold text-gray-800 mt-2 mb-3">Comment l'IA révolutionne le domaine de la santé</h3>
268
+ <p class="text-gray-600 mb-4">Exploration des avancées technologiques en médecine.</p>
269
+ <a href="#" class="text-green-600 font-medium flex items-center">
270
+ Lire l'article
271
+ <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
272
+ </a>
273
+ </div>
274
+ </div>
275
+
276
+ <!-- Blog 3 -->
277
+ <div class="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100" data-aos="fade-up" data-aos-delay="300">
278
+ <div class="h-48 bg-purple-100 flex items-center justify-center">
279
+ <i data-feather="file-text" class="w-12 h-12 text-purple-600"></i>
280
+ </div>
281
+ <div class="p-6">
282
+ <span class="text-sm text-purple-600 font-medium">Prévention</span>
283
+ <h3 class="text-xl font-semibold text-gray-800 mt-2 mb-3">Reconnaître les signes avant-coureurs des maladies courantes</h3>
284
+ <p class="text-gray-600 mb-4">Apprenez à identifier les symptômes importants.</p>
285
+ <a href="#" class="text-purple-600 font-medium flex items-center">
286
+ Lire l'article
287
+ <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
288
+ </a>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <div class="text-center mt-12" data-aos="fade-up">
294
+ <a href="#" class="inline-block border border-blue-600 text-blue-600 font-medium py-3 px-8 rounded-full hover:bg-blue-600 hover:text-white transition duration-300">
295
+ Voir tous les articles
296
+ </a>
297
+ </div>
298
+ </div>
299
+ </section>
300
+
301
+ <!-- CTA Section -->
302
+ <section class="py-20 px-6 md:px-12 bg-blue-600 text-white">
303
+ <div class="max-w-4xl mx-auto text-center" data-aos="fade-up">
304
+ <h2 class="text-3xl font-bold mb-6">Prêt à prendre en main votre santé ?</h2>
305
+ <p class="text-xl mb-8 opacity-90">
306
+ Rejoignez des milliers d'utilisateurs satisfaits et découvrez comment PharmaCare peut vous aider.
307
+ </p>
308
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
309
+ <button class="bg-white text-blue-600 hover:bg-gray-100 font-medium py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">
310
+ Commencer maintenant
311
+ </button>
312
+ <button class="border border-white text-white hover:bg-blue-700 font-medium py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">
313
+ En savoir plus
314
+ </button>
315
+ </div>
316
+ </div>
317
+ </section>
318
+
319
+ <!-- Footer -->
320
+ <footer class="bg-gray-900 text-white py-12 px-6 md:px-12">
321
+ <div class="max-w-6xl mx-auto grid md:grid-cols-4 gap-12">
322
+ <!-- Logo & Description -->
323
+ <div>
324
+ <div class="flex items-center mb-4">
325
+ <i data-feather="heart" class="text-blue-400 mr-2"></i>
326
+ <span class="text-xl font-bold text-white">Pharma<span class="text-green-400">Care</span></span>
327
+ </div>
328
+ <p class="text-gray-400 mb-6">
329
+ Votre partenaire santé intelligent pour une meilleure qualité de vie.
330
+ </p>
331
+ <div class="flex space-x-4">
332
+ <a href="#" class="text-gray-400 hover:text-white transition">
333
+ <i data-feather="facebook"></i>
334
+ </a>
335
+ <a href="#" class="text-gray-400 hover:text-white transition">
336
+ <i data-feather="twitter"></i>
337
+ </a>
338
+ <a href="#" class="text-gray-400 hover:text-white transition">
339
+ <i data-feather="instagram"></i>
340
+ </a>
341
+ <a href="#" class="text-gray-400 hover:text-white transition">
342
+ <i data-feather="linkedin"></i>
343
+ </a>
344
+ </div>
345
+ </div>
346
+
347
+ <!-- Links 1 -->
348
+ <div>
349
+ <h4 class="text-lg font-semibold mb-4">Navigation</h4>
350
+ <ul class="space-y-3">
351
+ <li><a href="index.html" class="text-gray-400 hover:text-white transition">Accueil</a></li>
352
+ <li><a href="symptomes.html" class="text-gray-400 hover:text-white transition">Symptômes & Diagnostic</a></li>
353
+ <li><a href="ordonnance.html" class="text-gray-400 hover:text-white transition">Déposer ordonnance</a></li>
354
+ <li><a href="espace-patient.html" class="text-gray-400 hover:text-white transition">Espace patient</a></li>
355
+ </ul>
356
+ </div>
357
+
358
+ <!-- Links 2 -->
359
+ <div>
360
+ <h4 class="text-lg font-semibold mb-4">Entreprise</h4>
361
+ <ul class="space-y-3">
362
+ <li><a href="apropos.html" class="text-gray-400 hover:text-white transition">À propos</a></li>
363
+ <li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact</a></li>
364
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Carrières</a></li>
365
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
366
+ </ul>
367
+ </div>
368
+
369
+ <!-- Legal -->
370
+ <div>
371
+ <h4 class="text-lg font-semibold mb-4">Légal</h4>
372
+ <ul class="space-y-3">
373
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Mentions légales</a></li>
374
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a></li>
375
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions d'utilisation</a></li>
376
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Cookies</a></li>
377
+ </ul>
378
+ </div>
379
+ </div>
380
+
381
+ <div class="max-w-6xl mx-auto border-t border-gray-800 mt-12 pt-8 text-center text-gray-500 text-sm">
382
+ <p>© 2023 PharmaCare. Tous droits réservés.</p>
383
+ </div>
384
+ </footer>
385
+
386
+ <script>
387
+ AOS.init({
388
+ duration: 800,
389
+ easing: 'ease-in-out',
390
+ once: true
391
+ });
392
+
393
+ feather.replace();
394
+
395
+ // FAQ toggle functionality
396
+ document.querySelectorAll('.border button').forEach(button => {
397
+ button.addEventListener('click', () => {
398
+ const content = button.nextElementSibling;
399
+ const icon = button.querySelector('i');
400
+
401
+ content.classList.toggle('hidden');
402
+ icon.classList.toggle('rotate-180');
403
+ });
404
+ });
405
+
406
+ function focusSymptomInput() {
407
+ localStorage.setItem('focusSymptomInput', 'true');
408
+ }
409
+ </script>
410
+ </body>
411
+ </html>
ordonnance.html ADDED
@@ -0,0 +1,344 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Déposez vos ordonnances en ligne avec PharmaCare - Simple, sécurisé et efficace">
7
+ <title>Déposer une ordonnance | PharmaCare</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
15
+ body {
16
+ font-family: 'Montserrat', sans-serif;
17
+ }
18
+ .upload-area {
19
+ border: 2px dashed #cbd5e0;
20
+ transition: all 0.3s ease;
21
+ }
22
+ .upload-area:hover {
23
+ border-color: #4299e1;
24
+ background-color: #f0f9ff;
25
+ }
26
+ .upload-area.dragover {
27
+ border-color: #4299e1;
28
+ background-color: #ebf8ff;
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="bg-white">
33
+ <!-- Navigation -->
34
+ <nav class="bg-white shadow-sm py-4 px-6 md:px-12 flex justify-between items-center sticky top-0 z-50">
35
+ <div class="flex items-center">
36
+ <span class="text-xl font-bold text-gray-800">Pharma<span class="text-green-600">Care</span></span>
37
+ </div>
38
+ <div class="hidden md:flex space-x-8">
39
+ <a href="index.html" class="text-gray-600 hover:text-blue-600">Accueil</a>
40
+ <a href="symptomes.html" class="text-gray-600 hover:text-blue-600">Symptômes & Diagnostic</a>
41
+ <a href="ordonnance.html" class="text-blue-600 font-medium">Déposer ordonnance</a>
42
+ <a href="espace-patient.html" class="text-gray-600 hover:text-blue-600">Espace patient</a>
43
+ <a href="apropos.html" class="text-gray-600 hover:text-blue-600">À propos</a>
44
+ <a href="contact.html" class="text-gray-600 hover:text-blue-600">Contact</a>
45
+ </div>
46
+ <button class="md:hidden">
47
+ <i data-feather="menu"></i>
48
+ </button>
49
+ </nav>
50
+
51
+ <!-- Hero Section -->
52
+ <section class="bg-blue-50 py-16 px-6 md:px-12">
53
+ <div class="max-w-6xl mx-auto text-center">
54
+ <h1 class="text-3xl md:text-4xl font-bold text-gray-800 leading-tight mb-6" data-aos="fade-up">
55
+ Déposer une ordonnance en ligne
56
+ </h1>
57
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">
58
+ Chargez vos documents médicaux en toute sécurité et simplifiez votre suivi de traitement.
59
+ </p>
60
+ </div>
61
+ </section>
62
+
63
+ <!-- Main Content -->
64
+ <section class="py-20 px-6 md:px-12 bg-white">
65
+ <div class="max-w-4xl mx-auto">
66
+ <div class="bg-white p-8 md:p-10 rounded-xl shadow-lg border border-gray-100" data-aos="fade-up">
67
+ <div class="flex items-center mb-8">
68
+ <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mr-6">
69
+ <i data-feather="upload" class="text-blue-600 w-6 h-6"></i>
70
+ </div>
71
+ <h2 class="text-2xl font-bold text-gray-800">Téléverser votre ordonnance</h2>
72
+ </div>
73
+
74
+ <div class="space-y-8">
75
+ <div class="upload-area rounded-xl p-12 text-center cursor-pointer" id="uploadArea">
76
+ <div class="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
77
+ <i data-feather="upload-cloud" class="text-blue-600 w-8 h-8"></i>
78
+ </div>
79
+ <h3 class="text-lg font-medium text-gray-700 mb-2">Glissez-déposez votre fichier ici</h3>
80
+ <p class="text-gray-500 mb-4">ou</p>
81
+ <label for="fileInput" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 cursor-pointer">
82
+ Sélectionner un fichier
83
+ </label>
84
+ <input type="file" id="fileInput" class="hidden" accept=".pdf,.jpg,.jpeg,.png">
85
+ <p class="text-sm text-gray-500 mt-4">Formats acceptés : PDF, JPG, PNG (max. 10MB)</p>
86
+ </div>
87
+
88
+ <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
89
+ <h3 class="font-medium text-gray-800 mb-3 flex items-center">
90
+ <i data-feather="info" class="text-blue-600 mr-2"></i>
91
+ Conseils pour un bon téléversement
92
+ </h3>
93
+ <ul class="text-gray-600 space-y-2">
94
+ <li class="flex items-start">
95
+ <i data-feather="check" class="text-green-500 w-4 h-4 mr-2 mt-1"></i>
96
+ <span>Assurez-vous que le document est bien lisible</span>
97
+ </li>
98
+ <li class="flex items-start">
99
+ <i data-feather="check" class="text-green-500 w-4 h-4 mr-2 mt-1"></i>
100
+ <span>Photographiez dans un endroit bien éclairé</span>
101
+ </li>
102
+ <li class="flex items-start">
103
+ <i data-feather="check" class="text-green-500 w-4 h-4 mr-2 mt-1"></i>
104
+ <span>Vérifiez que toutes les informations sont visibles</span>
105
+ </li>
106
+ </ul>
107
+ </div>
108
+
109
+ <div class="bg-blue-50 p-6 rounded-lg border border-blue-100">
110
+ <div class="flex items-center mb-3">
111
+ <i data-feather="lock" class="text-blue-600 mr-2"></i>
112
+ <h3 class="font-medium text-blue-800">Sécurité des données</h3>
113
+ </div>
114
+ <p class="text-blue-700">
115
+ Vos documents médicaux sont stockés de manière sécurisée et cryptée. Seuls les professionnels de santé autorisés peuvent y accéder dans le cadre de votre suivi médical.
116
+ </p>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </section>
122
+
123
+ <!-- How It Works -->
124
+ <section class="py-20 px-6 md:px-12 bg-gray-50">
125
+ <div class="max-w-6xl mx-auto">
126
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-16" data-aos="fade-up">Comment ça marche ?</h2>
127
+
128
+ <div class="grid md:grid-cols-3 gap-8">
129
+ <!-- Step 1 -->
130
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100" data-aos="fade-up" data-aos-delay="100">
131
+ <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6 text-blue-600 font-bold">1</div>
132
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Téléversez</h3>
133
+ <p class="text-gray-600">
134
+ Chargez votre ordonnance ou document médical via notre interface sécurisée.
135
+ </p>
136
+ </div>
137
+
138
+ <!-- Step 2 -->
139
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100" data-aos="fade-up" data-aos-delay="200">
140
+ <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-6 text-green-600 font-bold">2</div>
141
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Vérification</h3>
142
+ <p class="text-gray-600">
143
+ Notre équipe vérifie la validité de votre document sous 24h.
144
+ </p>
145
+ </div>
146
+
147
+ <!-- Step 3 -->
148
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100" data-aos="fade-up" data-aos-delay="300">
149
+ <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-6 text-purple-600 font-bold">3</div>
150
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Suivi</h3>
151
+ <p class="text-gray-600">
152
+ Accédez à votre espace patient pour suivre l'état de votre ordonnance.
153
+ </p>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </section>
158
+
159
+ <!-- Benefits -->
160
+ <section class="py-20 px-6 md:px-12 bg-white">
161
+ <div class="max-w-6xl mx-auto">
162
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-16" data-aos="fade-up">Les avantages du dépôt en ligne</h2>
163
+
164
+ <div class="grid md:grid-cols-2 gap-8">
165
+ <!-- Benefit 1 -->
166
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 flex" data-aos="fade-up" data-aos-delay="100">
167
+ <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mr-6 flex-shrink-0">
168
+ <i data-feather="clock" class="text-blue-600 w-6 h-6"></i>
169
+ </div>
170
+ <div>
171
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Gain de temps</h3>
172
+ <p class="text-gray-600">
173
+ Plus besoin de vous déplacer pour déposer vos ordonnances. Faites-le en quelques clics depuis chez vous.
174
+ </p>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Benefit 2 -->
179
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 flex" data-aos="fade-up" data-aos-delay="200">
180
+ <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mr-6 flex-shrink-0">
181
+ <i data-feather="shield" class="text-green-600 w-6 h-6"></i>
182
+ </div>
183
+ <div>
184
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Sécurité renforcée</h3>
185
+ <p class="text-gray-600">
186
+ Vos documents sont stockés de manière cryptée et protégés contre toute perte ou vol.
187
+ </p>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Benefit 3 -->
192
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 flex" data-aos="fade-up" data-aos-delay="300">
193
+ <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mr-6 flex-shrink-0">
194
+ <i data-feather="bell" class="text-purple-600 w-6 h-6"></i>
195
+ </div>
196
+ <div>
197
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Alertes et rappels</h3>
198
+ <p class="text-gray-600">
199
+ Recevez des notifications pour le renouvellement de vos traitements et la prise de vos médicaments.
200
+ </p>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Benefit 4 -->
205
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 flex" data-aos="fade-up" data-aos-delay="400">
206
+ <div class="w-14 h-14 bg-yellow-100 rounded-full flex items-center justify-center mr-6 flex-shrink-0">
207
+ <i data-feather="archive" class="text-yellow-600 w-6 h-6"></i>
208
+ </div>
209
+ <div>
210
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Historique complet</h3>
211
+ <p class="text-gray-600">
212
+ Consultez l'ensemble de vos ordonnances passées dans votre espace patient.
213
+ </p>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </section>
219
+
220
+ <!-- CTA -->
221
+ <section class="py-16 px-6 md:px-12 bg-blue-600 text-white">
222
+ <div class="max-w-4xl mx-auto text-center" data-aos="fade-up">
223
+ <h2 class="text-3xl font-bold mb-6">Vous n'avez pas encore de compte ?</h2>
224
+ <p class="text-xl mb-8 opacity-90">
225
+ Créez votre espace patient pour bénéficier de tous nos services.
226
+ </p>
227
+ <button class="bg-white text-blue-600 hover:bg-gray-100 font-medium py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">
228
+ S'inscrire maintenant
229
+ </button>
230
+ </div>
231
+ </section>
232
+
233
+ <!-- Footer -->
234
+ <footer class="bg-gray-900 text-white py-12 px-6 md:px-12">
235
+ <div class="max-w-6xl mx-auto grid md:grid-cols-4 gap-12">
236
+ <!-- Logo & Description -->
237
+ <div>
238
+ <div class="flex items-center mb-4">
239
+ <i data-feather="heart" class="text-blue-400 mr-2"></i>
240
+ <span class="text-xl font-bold text-white">Pharma<span class="text-green-400">Care</span></span>
241
+ </div>
242
+ <p class="text-gray-400 mb-6">
243
+ Votre partenaire santé intelligent pour une meilleure qualité de vie.
244
+ </p>
245
+ <div class="flex space-x-4">
246
+ <a href="#" class="text-gray-400 hover:text-white transition">
247
+ <i data-feather="facebook"></i>
248
+ </a>
249
+ <a href="#" class="text-gray-400 hover:text-white transition">
250
+ <i data-feather="twitter"></i>
251
+ </a>
252
+ <a href="#" class="text-gray-400 hover:text-white transition">
253
+ <i data-feather="instagram"></i>
254
+ </a>
255
+ <a href="#" class="text-gray-400 hover:text-white transition">
256
+ <i data-feather="linkedin"></i>
257
+ </a>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- Links 1 -->
262
+ <div>
263
+ <h4 class="text-lg font-semibold mb-4">Navigation</h4>
264
+ <ul class="space-y-3">
265
+ <li><a href="index.html" class="text-gray-400 hover:text-white transition">Accueil</a></li>
266
+ <li><a href="symptomes.html" class="text-gray-400 hover:text-white transition">Symptômes & Diagnostic</a></li>
267
+ <li><a href="ordonnance.html" class="text-gray-400 hover:text-white transition">Déposer ordonnance</a></li>
268
+ <li><a href="espace-patient.html" class="text-gray-400 hover:text-white transition">Espace patient</a></li>
269
+ </ul>
270
+ </div>
271
+
272
+ <!-- Links 2 -->
273
+ <div>
274
+ <h4 class="text-lg font-semibold mb-4">Entreprise</h4>
275
+ <ul class="space-y-3">
276
+ <li><a href="apropos.html" class="text-gray-400 hover:text-white transition">À propos</a></li>
277
+ <li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact</a></li>
278
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Carrières</a></li>
279
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
280
+ </ul>
281
+ </div>
282
+
283
+ <!-- Legal -->
284
+ <div>
285
+ <h4 class="text-lg font-semibold mb-4">Légal</h4>
286
+ <ul class="space-y-3">
287
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Mentions légales</a></li>
288
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a></li>
289
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions d'utilisation</a></li>
290
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Cookies</a></li>
291
+ </ul>
292
+ </div>
293
+ </div>
294
+
295
+ <div class="max-w-6xl mx-auto border-t border-gray-800 mt-12 pt-8 text-center text-gray-500 text-sm">
296
+ <p>© 2023 PharmaCare. Tous droits réservés.</p>
297
+ </div>
298
+ </footer>
299
+
300
+ <script>
301
+ AOS.init({
302
+ duration: 800,
303
+ easing: 'ease-in-out',
304
+ once: true
305
+ });
306
+
307
+ feather.replace();
308
+
309
+ // Upload area interaction
310
+ const uploadArea = document.getElementById('uploadArea');
311
+ const fileInput = document.getElementById('fileInput');
312
+
313
+ uploadArea.addEventListener('click', () => fileInput.click());
314
+
315
+ ['dragenter', 'dragover'].forEach(eventName => {
316
+ uploadArea.addEventListener(eventName, (e) => {
317
+ e.preventDefault();
318
+ uploadArea.classList.add('dragover');
319
+ });
320
+ });
321
+
322
+ ['dragleave', 'drop'].forEach(eventName => {
323
+ uploadArea.addEventListener(eventName, (e) => {
324
+ e.preventDefault();
325
+ uploadArea.classList.remove('dragover');
326
+ });
327
+ });
328
+
329
+ fileInput.addEventListener('change', (e) => {
330
+ if (fileInput.files.length) {
331
+ const fileName = fileInput.files[0].name;
332
+ uploadArea.innerHTML = `
333
+ <div class="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
334
+ <i data-feather="check" class="text-green-600 w-8 h-8"></i>
335
+ </div>
336
+ <h3 class="text-lg font-medium text-gray-700 mb-2">${fileName}</h3>
337
+ <p class="text-sm text-gray-500">Fichier prêt à être téléversé</p>
338
+ `;
339
+ feather.replace();
340
+ }
341
+ });
342
+ </script>
343
+ </body>
344
+ </html>
prompts.txt ADDED
@@ -0,0 +1,114 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ Crée un site web professionnel pour une plateforme santé appelée PharmaCare. Le site doit être moderne, rassurant et facile à utiliser, avec un design sobre (blanc, bleu clair, vert doux) et des icônes santé. Il doit être responsive pour mobile et desktop.
2
+
3
+ Structure et contenu à générer :
4
+ 1. Page d’accueil
5
+
6
+ Logo PharmaCare en haut à gauche.
7
+
8
+ Menu en haut à droite : Accueil, Symptômes & Diagnostic, Déposer ordonnance, Espace patient, À propos, Contact.
9
+
10
+ Section principale avec un espace visuel pour une future barre IA : texte d’accroche “Décrivez vos symptômes et obtenez de l’aide immédiate avec PharmaCare”.
11
+
12
+ Bouton “Commencer maintenant”.
13
+
14
+ 3 icônes avec arguments clés :
15
+
16
+ Analyse intelligente de vos symptômes
17
+
18
+ Conseils santé personnalisés
19
+
20
+ Dépôt d’ordonnances et suivi facile
21
+
22
+ Témoignages utilisateurs fictifs.
23
+
24
+ Pied de page : mentions légales, politique de confidentialité, réseaux sociaux.
25
+
26
+ 2. Symptômes & Diagnostic
27
+
28
+ Texte explicatif : “Décrivez vos symptômes et notre IA vous guidera avec un pré-diagnostic et des conseils adaptés.”
29
+
30
+ Espace visuel pour intégrer l’IA plus tard via EmbedAI.
31
+
32
+ Message de sécurité : “PharmaCare ne remplace pas un médecin. Consultez un professionnel en cas de doute.”
33
+
34
+ 3. Déposer une ordonnance
35
+
36
+ Texte explicatif : “Chargez vos documents médicaux en toute sécurité.”
37
+
38
+ Espace visuel pour bouton “Téléverser un fichier” (tu intégreras Google Forms ou un système d’upload plus tard).
39
+
40
+ 4. Espace patient
41
+
42
+ Texte expliquant la possibilité de créer un compte pour suivre ses symptômes et ordonnances.
43
+
44
+ Espace visuel pour formulaire d’inscription / connexion.
45
+
46
+ 5. À propos
47
+
48
+ Présentation du projet : mission, valeurs (transparence, fiabilité, confidentialité), équipe (fondé par jeunes pharmaciens).
49
+
50
+ 6. Contact
51
+
52
+ Formulaire de contact simple (Nom, Email, Message).
53
+
54
+ Liens vers réseaux sociaux (placeholders).
55
+
56
+ Extras
57
+
58
+ Section FAQ avec 2-3 questions types :
59
+
60
+ “PharmaCare remplace-t-il un médecin ?”
61
+
62
+ “Mes données sont-elles sécurisées ?”
63
+
64
+ Section Blog vide pour contenu futur.
65
+
66
+ Optimisation SEO : mots-clés santé, diagnostic, IA, pharmacie digital
67
+ Tu es un expert en développement web spécialisé en sites médicaux professionnels. Améliore mon site PharmaCare déjà existant, qui contient actuellement plusieurs pages statiques (index.html, symptomes.html, ordonnance.html, espace-patient.html). Je veux que tu refasses entièrement le site avec les corrections et améliorations suivantes :
68
+
69
+ 1. Navigation et structure :
70
+ - Ajoute une barre de navigation fixe en haut du site (visible sur toutes les pages) avec les onglets : Accueil, Symptômes, Ordonnance, Espace Patient, À propos, Contact.
71
+ - Le logo et le nom du site "PharmaCare" doivent être visibles dans le header.
72
+
73
+ 2. Design et UI :
74
+ - Utilise une palette moderne et cohérente : blanc (fond), bleu clair (éléments principaux), vert (boutons d’action), gris clair (fonds secondaires).
75
+ - Mets une police lisible et uniforme sur tout le site (exemple : Roboto ou Open Sans).
76
+ - Les boutons doivent être bien visibles, arrondis, avec une couleur contrastante (vert ou bleu) et un effet hover.
77
+ - Ajoute plus d’espaces/marges autour des sections pour rendre la lecture agréable.
78
+
79
+ 3. Contenu et texte :
80
+ - Mets un disclaimer visible en bas de chaque page :
81
+ "⚠️ PharmaCare ne remplace pas un médecin. En cas de symptômes graves, consultez un professionnel de santé."
82
+ - Sur la page À propos : ajoute un texte expliquant que PharmaCare est un projet étudiant en pharmacie, visant à aider à l’orientation des patients grâce à l’IA, mais que ce n’est pas un avis médical définitif.
83
+ - Sur la page Contact : ajoute un formulaire simple (Nom, Email, Message) avec un bouton Envoyer.
84
+
85
+ 4. Fonctionnalités :
86
+ - Sur la page Symptômes : ajoute un espace prévu pour intégrer une IA via un widget ou iframe (par exemple EmbedAI), avec un placeholder "Entrez vos symptômes ci-dessous".
87
+ - Sur la page Ordonnance : ajoute un formulaire de téléchargement de fichier (PDF ou image), avec message de confirmation après envoi.
88
+ - Sur l’Espace Patient : ajoute des sections factices pour "Historique des symptômes" et "Historique des ordonnances", même si ce n’est pas encore fonctionnel.
89
+
90
+ 5. Responsive et mobile :
91
+ - Le site doit être responsive (s’adapter parfaitement aux écrans de téléphone et tablette).
92
+ - Ajoute un menu hamburger sur mobile qui déploie les onglets.
93
+
94
+ 6. Confiance et légalité :
95
+ - Ajoute une page Mentions légales avec un texte générique expliquant que le site est un projet de démonstration étudiant, que les données ne sont pas stockées et qu’il respecte la confidentialité.
96
+ - Ajoute une page Politique de confidentialité expliquant que ce site ne collecte pas de données sensibles et que tout est fictif.
97
+
98
+ 7. Performance et SEO :
99
+ - Optimise le code HTML/CSS pour être léger et rapide.
100
+ - Mets des balises meta title et meta description sur chaque page pour le référencement.
101
+ - Ajoute un favicon simple avec une icône médicale (croix verte ou stéthoscope).
102
+
103
+ Le résultat final doit être un site complet, moderne, clair, rassurant, professionnel, avec un design harmonisé et prêt à recevoir un module IA plus tard. Fournis-moi le code HTML, CSS et les fichiers nécessaires pour toutes les pages.
104
+
105
+ maintenant modifie ce site en faisant quelques ajustements : lorsque je clique sur le bouton "commencer maintenant" a l'accueil, je veux que ça nous re dirige directement sur la barre "décrivez vos symptomes ici" de symptome et diagnostic, pour que l'ia réponde. Egalement, je voudrais que tu enlèves les petit coeur a gauche de "pharmacare" tout en haut a gauche. De plus, je voudrais que tu enlèves la couleur bleue ( ou du moins tu la laisse à quelques endroits de manière cohérente, mais la il y en a trop : par exemple le nom "pharmacare" je ne veux pas de bleu ). Egalement dans l'onglet "espace patient" ça ne fonctionne pas quand j'appuie sur les boutons pour me connecter... rend cette page fonctionnelle avec possibilité de se connecter via son compte google
106
+ je veux que la couleur de "pharmacare" en haut a gauche soit modifier meme quand je vais dans les autres onglets : il ne doit plus dutout y avoir de bleu ni le petit coeur. De plus, je veux que les onglets "à propos" et "contact" soit fonctionnel car la rien ne se passe quand on clique
107
+ je veux que la couleur de "pharmacare" en haut a gauche soit modifier meme quand je vais dans les autres onglets : il ne doit plus dutout y avoir de bleu ni le petit coeur. De plus, je veux que les onglets "à propos" et "contact" soit fonctionnel car la rien ne se passe quand on clique
108
+ je veux que la couleur de "pharmacare" en haut a gauche soit modifier meme quand je vais dans les autres onglets : il ne doit plus dutout y avoir de bleu ni le petit coeur. De plus, je veux que les onglets "à propos" et "contact" soit fonctionnel car la rien ne se passe quand on clique
109
+ parfait, maintenant je veux que lorsque l'on appuie sur "commencer maintenant" ça nous redirige vraiment sur la barre de recherche "décrivez vos symptomes ici..." dans le sens ou après avoir cliquer sur "commencer maintenant", on peut directement écrire sans avoir besoin de taper sur la barre de recherche dans symptomes et diagnostic. De plus, je voudrais que "espace pour l'interface IA de diagnostic" quand on clique dessus ça nous redirige aussi sur la barre de recherche pour directement écrire les symptomes. Egalement je voudrais que tu modifie le désigne des onglets tout en haut " accueil" , "symptomes et diagnostic" , "déposer ordonnance" etc : je voudrais qu'ils soient mieux organisés ( par exemple symptomes et diagnostic descendent trop bas sur la page a coté des autres et en + il y a un grand vide entre les deux mots à case du & ), plus visibles, mieux cadrés...
110
+ attention il y a un probleme que je veux que tu règles : quand je vais sur espace patient, il y a des écritures chinoise qui apparaissent à cote de symptomes et diagnostic. De plus, la redirection lorsque l'on appuie sur "commencer maintenant" n'est pas bonne, je voudrais que ça me redirige directement sur la barre de recherche pour dire ses symptomes immédiatement, comme lorsque l'on appuie sur "espace pour l'interface IA de diagnostic" qui lui est parfait.
111
+ attention il y a un probleme que je veux que tu règles : quand je vais sur espace patient, il y a des écritures chinoise qui apparaissent à cote de symptomes et diagnostic. De plus, la redirection lorsque l'on appuie sur "commencer maintenant" n'est pas bonne, je voudrais que ça me redirige directement sur la barre de recherche pour dire ses symptomes immédiatement, comme lorsque l'on appuie sur "espace pour l'interface IA de diagnostic" qui lui est parfait.
112
+ attention il y a un probleme que je veux que tu règles : quand je vais sur espace patient, il y a des écritures chinoise qui apparaissent à cote de symptomes et diagnostic. De plus, la redirection lorsque l'on appuie sur "commencer maintenant" n'est pas bonne, je voudrais que ça me redirige directement sur la barre de recherche pour dire ses symptomes immédiatement, comme lorsque l'on appuie sur "espace pour l'interface IA de diagnostic" qui lui est parfait.
113
+ lorsque je clique sur l'onglet "espace patient" il y a ça " 极速赛车开奖直播" qui s'affiche à coté de l'onglet symptome et diagnostic, je voudrais que tu enlèves ces écritures ( elles : "极速赛车开奖直播" )
114
+ lorsque je clique sur l'onglet "espace patient" il y a ça " 极速赛车开奖直播" qui s'affiche à coté de l'onglet symptome et diagnostic, je voudrais que tu enlèves ces écritures ( elles : "极速赛车开奖直播" )
style.css ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ padding: 2rem;
3
+ font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
+ }
5
+
6
+ h1 {
7
+ font-size: 16px;
8
+ margin-top: 0;
9
+ }
10
+
11
+ p {
12
+ color: rgb(107, 114, 128);
13
+ font-size: 15px;
14
+ margin-bottom: 10px;
15
+ margin-top: 5px;
16
+ }
17
+
18
+ .card {
19
+ max-width: 620px;
20
+ margin: 0 auto;
21
+ padding: 16px;
22
+ border: 1px solid lightgray;
23
+ border-radius: 16px;
24
+ }
25
+
26
+ .card p:last-child {
27
+ margin-bottom: 0;
28
+ }
symptomes.html ADDED
@@ -0,0 +1,301 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Décrivez vos symptômes et obtenez un pré-diagnostic avec PharmaCare">
7
+ <title>Symptômes & Diagnostic | PharmaCare</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
15
+ body {
16
+ font-family: 'Montserrat', sans-serif;
17
+ }
18
+ .symptom-bg {
19
+ background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ed 100%);
20
+ }
21
+ </style>
22
+ </head>
23
+ <body class="bg-white">
24
+ <!-- Navigation -->
25
+ <nav class="bg-white shadow-sm py-4 px-6 md:px-12 flex justify-between items-center sticky top-0 z-50">
26
+ <div class="flex items-center">
27
+ <span class="text-xl font-bold text-gray-800">Pharma<span class="text-green-600">Care</span></span>
28
+ </div>
29
+ <div class="hidden md:flex space-x-8">
30
+ <a href="index.html" class="text-gray-600 hover:text-blue-600">Accueil</a>
31
+ <a href="symptomes.html" class="text-blue-600 font-medium">Symptômes & Diagnostic</a>
32
+ <a href="ordonnance.html" class="text-gray-600 hover:text-blue-600">Déposer ordonnance</a>
33
+ <a href="espace-patient.html" class="text-gray-600 hover:text-blue-600">Espace patient</a>
34
+ <a href="apropos.html" class="text-gray-600 hover:text-blue-600">À propos</a>
35
+ <a href="contact.html" class="text-gray-600 hover:text-blue-600">Contact</a>
36
+ </div>
37
+ <button class="md:hidden">
38
+ <i data-feather="menu"></i>
39
+ </button>
40
+ </nav>
41
+
42
+ <!-- Hero Section -->
43
+ <section class="symptom-bg py-16 px-6 md:px-12">
44
+ <div class="max-w-6xl mx-auto text-center">
45
+ <h1 class="text-3xl md:text-4xl font-bold text-gray-800 leading-tight mb-6" data-aos="fade-up">
46
+ Décrivez vos symptômes et notre IA vous guidera
47
+ </h1>
48
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">
49
+ Notre technologie analyse vos symptômes pour vous proposer un pré-diagnostic et des conseils adaptés.
50
+ </p>
51
+ </div>
52
+ </section>
53
+
54
+ <!-- Main Content -->
55
+ <section class="py-20 px-6 md:px-12 bg-white">
56
+ <div class="max-w-4xl mx-auto">
57
+ <div class="bg-white p-8 md:p-10 rounded-xl shadow-lg border border-gray-100" data-aos="fade-up">
58
+ <div class="flex items-center mb-8">
59
+ <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mr-6">
60
+ <i data-feather="message-square" class="text-blue-600 w-6 h-6"></i>
61
+ </div>
62
+ <h2 class="text-2xl font-bold text-gray-800">Assistant santé intelligent</h2>
63
+ </div>
64
+
65
+ <div class="space-y-6">
66
+ <p class="text-gray-600">
67
+ Commencez par décrire vos symptômes en détail. Notre système vous posera ensuite des questions complémentaires pour affiner son analyse.
68
+ </p>
69
+
70
+ <div class="bg-gray-50 p-6 rounded-lg">
71
+ <div class="flex mb-4">
72
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
73
+ <i data-feather="user" class="text-blue-600 w-4 h-4"></i>
74
+ </div>
75
+ <div class="flex-1">
76
+ <div class="bg-white p-4 rounded-lg shadow-sm">
77
+ <p>Bonjour, je peux vous aider à comprendre vos symptômes. Pouvez-vous me décrire ce que vous ressentez ?</p>
78
+ </div>
79
+ </div>
80
+ </div>
81
+
82
+ <div class="flex">
83
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4">
84
+ <i data-feather="user" class="text-green-600 w-4 h-4"></i>
85
+ </div>
86
+ <div class="flex-1">
87
+ <textarea id="symptom-input" class="w-full p-4 border border-gray-200 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent" rows="3" placeholder="Décrivez vos symptômes ici..."></textarea>
88
+ <button class="mt-2 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300">
89
+ Envoyer
90
+ </button>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ <div class="bg-blue-50 p-6 rounded-lg border border-blue-100">
96
+ <div class="flex items-center mb-3">
97
+ <i data-feather="alert-triangle" class="text-blue-600 mr-2"></i>
98
+ <h3 class="font-medium text-blue-800">Important</h3>
99
+ </div>
100
+ <p class="text-blue-700">
101
+ PharmaCare ne remplace pas un médecin. Consultez toujours un professionnel de santé en cas de doute ou de symptômes graves. Notre service a pour but de vous orienter, pas de poser un diagnostic définitif.
102
+ </p>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </section>
108
+
109
+ <!-- How It Works -->
110
+ <section class="py-20 px-6 md:px-12 bg-gray-50">
111
+ <div class="max-w-6xl mx-auto">
112
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-16" data-aos="fade-up">Comment fonctionne notre analyse ?</h2>
113
+
114
+ <div class="grid md:grid-cols-3 gap-8">
115
+ <!-- Step 1 -->
116
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100" data-aos="fade-up" data-aos-delay="100">
117
+ <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6 text-blue-600 font-bold">1</div>
118
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Décrivez vos symptômes</h3>
119
+ <p class="text-gray-600">
120
+ Commencez par expliquer ce que vous ressentez avec le plus de détails possible.
121
+ </p>
122
+ </div>
123
+
124
+ <!-- Step 2 -->
125
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100" data-aos="fade-up" data-aos-delay="200">
126
+ <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-6 text-green-600 font-bold">2</div>
127
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Répondez aux questions</h3>
128
+ <p class="text-gray-600">
129
+ Notre IA vous posera des questions complémentaires pour affiner son analyse.
130
+ </p>
131
+ </div>
132
+
133
+ <!-- Step 3 -->
134
+ <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100" data-aos="fade-up" data-aos-delay="300">
135
+ <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-6 text-purple-600 font-bold">3</div>
136
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Recevez des conseils</h3>
137
+ <p class="text-gray-600">
138
+ Obtenez des orientations personnalisées basées sur vos réponses.
139
+ </p>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </section>
144
+
145
+ <!-- Common Symptoms -->
146
+ <section class="py-20 px-6 md:px-12 bg-white">
147
+ <div class="max-w-6xl mx-auto">
148
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-16" data-aos="fade-up">Symptômes fréquemment recherchés</h2>
149
+
150
+ <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-4">
151
+ <a href="#" class="bg-gray-50 hover:bg-blue-50 border border-gray-200 hover:border-blue-200 rounded-lg p-4 transition duration-300 flex items-center" data-aos="fade-up" data-aos-delay="100">
152
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
153
+ <i data-feather="thermometer" class="text-blue-600 w-4 h-4"></i>
154
+ </div>
155
+ <span class="font-medium text-gray-700">Fièvre</span>
156
+ </a>
157
+
158
+ <a href="#" class="bg-gray-50 hover:bg-blue-50 border border-gray-200 hover:border-blue-200 rounded-lg p-4 transition duration-300 flex items-center" data-aos="fade-up" data-aos-delay="150">
159
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
160
+ <i data-feather="activity" class="text-blue-600 w-4 h-4"></i>
161
+ </div>
162
+ <span class="font-medium text-gray-700">Maux de tête</span>
163
+ </a>
164
+
165
+ <a href="#" class="bg-gray-50 hover:bg-blue-50 border border-gray-200 hover:border-blue-200 rounded-lg p-4 transition duration-300 flex items-center" data-aos="fade-up" data-aos-delay="200">
166
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
167
+ <i data-feather="wind" class="text-blue-600 w-4 h-4"></i>
168
+ </div>
169
+ <span class="font-medium text-gray-700">Toux</span>
170
+ </a>
171
+
172
+ <a href="#" class="bg-gray-50 hover:bg-blue-50 border border-gray-200 hover:border-blue-200 rounded-lg p-4 transition duration-300 flex items-center" data-aos="fade-up" data-aos-delay="250">
173
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
174
+ <i data-feather="droplet" class="text-blue-600 w-4 h-4"></i>
175
+ </div>
176
+ <span class="font-medium text-gray-700">Nausées</span>
177
+ </a>
178
+
179
+ <a href="#" class="bg-gray-50 hover:bg-blue-50 border border-gray-200 hover:border-blue-200 rounded-lg p-4 transition duration-300 flex items-center" data-aos="fade-up" data-aos-delay="300">
180
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
181
+ <i data-feather="zap" class="text-blue-600 w-4 h-4"></i>
182
+ </div>
183
+ <span class="font-medium text-gray-700">Fatigue</span>
184
+ </a>
185
+
186
+ <a href="#" class="bg-gray-50 hover:bg-blue-50 border border-gray-200 hover:border-blue-200 rounded-lg p-4 transition duration-300 flex items-center" data-aos="fade-up" data-aos-delay="350">
187
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
188
+ <i data-feather="alert-circle" class="text-blue-600 w-4 h-4"></i>
189
+ </div>
190
+ <span class="font-medium text-gray-700">Douleurs musculaires</span>
191
+ </a>
192
+ </div>
193
+ </div>
194
+ </section>
195
+
196
+ <!-- Emergency Warning -->
197
+ <section class="py-12 px-6 md:px-12 bg-red-50">
198
+ <div class="max-w-4xl mx-auto text-center">
199
+ <div class="bg-white p-6 rounded-xl shadow-sm border border-red-100 inline-block" data-aos="fade-up">
200
+ <div class="flex flex-col md:flex-row items-center justify-center">
201
+ <div class="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center mb-4 md:mb-0 md:mr-6">
202
+ <i data-feather="alert-octagon" class="text-red-600 w-6 h-6"></i>
203
+ </div>
204
+ <div>
205
+ <h3 class="text-xl font-bold text-red-700 mb-2">Urgence médicale ?</h3>
206
+ <p class="text-red-600">
207
+ En cas d'urgence vitale (difficultés respiratoires, douleur thoracique, etc.), composez immédiatement le 15 (SAMU) ou le 112 (urgence européenne).
208
+ </p>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </section>
214
+
215
+ <!-- Footer -->
216
+ <footer class="bg-gray-900 text-white py-12 px-6 md:px-12">
217
+ <div class="max-w-6xl mx-auto grid md:grid-cols-4 gap-12">
218
+ <!-- Logo & Description -->
219
+ <div>
220
+ <div class="flex items-center mb-4">
221
+ <i data-feather="heart" class="text-blue-400 mr-2"></i>
222
+ <span class="text-xl font-bold text-white">Pharma<span class="text-green-400">Care</span></span>
223
+ </div>
224
+ <p class="text-gray-400 mb-6">
225
+ Votre partenaire santé intelligent pour une meilleure qualité de vie.
226
+ </p>
227
+ <div class="flex space-x-4">
228
+ <a href="#" class="text-gray-400 hover:text-white transition">
229
+ <i data-feather="facebook"></i>
230
+ </a>
231
+ <a href="#" class="text-gray-400 hover:text-white transition">
232
+ <i data-feather="twitter"></i>
233
+ </a>
234
+ <a href="#" class="text-gray-400 hover:text-white transition">
235
+ <i data-feather="instagram"></i>
236
+ </a>
237
+ <a href="#" class="text-gray-400 hover:text-white transition">
238
+ <i data-feather="linkedin"></i>
239
+ </a>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Links 1 -->
244
+ <div>
245
+ <h4 class="text-lg font-semibold mb-4">Navigation</h4>
246
+ <ul class="space-y-3">
247
+ <li><a href="index.html" class="text-gray-400 hover:text-white transition">Accueil</a></li>
248
+ <li><a href="symptomes.html" class="text-gray-400 hover:text-white transition">Symptômes & Diagnostic</a></li>
249
+ <li><a href="ordonnance.html" class="text-gray-400 hover:text-white transition">Déposer ordonnance</a></li>
250
+ <li><a href="espace-patient.html" class="text-gray-400 hover:text-white transition">Espace patient</a></li>
251
+ </ul>
252
+ </div>
253
+
254
+ <!-- Links 2 -->
255
+ <div>
256
+ <h4 class="text-lg font-semibold mb-4">Entreprise</h4>
257
+ <ul class="space-y-3">
258
+ <li><a href="apropos.html" class="text-gray-400 hover:text-white transition">À propos</a></li>
259
+ <li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact</a></li>
260
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Carrières</a></li>
261
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
262
+ </ul>
263
+ </div>
264
+
265
+ <!-- Legal -->
266
+ <div>
267
+ <h4 class="text-lg font-semibold mb-4">Légal</h4>
268
+ <ul class="space-y-3">
269
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Mentions légales</a></li>
270
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a></li>
271
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions d'utilisation</a></li>
272
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Cookies</a></li>
273
+ </ul>
274
+ </div>
275
+ </div>
276
+
277
+ <div class="max-w-6xl mx-auto border-t border-gray-800 mt-12 pt-8 text-center text-gray-500 text-sm">
278
+ <p>© 2023 PharmaCare. Tous droits réservés.</p>
279
+ </div>
280
+ </footer>
281
+
282
+ <script>
283
+ AOS.init({
284
+ duration: 800,
285
+ easing: 'ease-in-out',
286
+ once: true
287
+ });
288
+
289
+ feather.replace();
290
+
291
+ document.addEventListener('DOMContentLoaded', function() {
292
+ const symptomInput = document.getElementById('symptom-input');
293
+ if (symptomInput) {
294
+ setTimeout(() => {
295
+ symptomInput.focus();
296
+ }, 100);
297
+ }
298
+ });
299
+ </script>
300
+ </body>
301
+ </html>