Hugging Face's logo

Spaces:
Maheri
/
secmed
Running

App Files Community
Maheri commited on
Commit
cf9f491
·
verified ·
1 Parent(s): 628376b

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +608 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Secmed
3
- emoji: 🐢
4
- colorFrom: green
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: secmed
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,608 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SécurityMed | Expertise en Cybersécurité Médicale</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <script type="application/ld+json">
11
+ {
12
+ "@context": "https://schema.org",
13
+ "@type": "MedicalOrganization",
14
+ "name": "SécurityMed",
15
+ "url": "https://www.securitymed.fr",
16
+ "logo": "https://securitymed.fr/logo.png",
17
+ "description": "Expert en cybersécurité pour infrastructures d'imagerie médicale, protection des flux DICOM et conformité LI 27001",
18
+ "medicalSpecialty": "Cyberprotection médicale",
19
+ "areaServed": "France"
20
+ }
21
+ </script>
22
+ <script>
23
+ tailwind.config = {
24
+ theme: {
25
+ extend: {
26
+ colors: {
27
+ 'medical-blue': '#0d3b66',
28
+ 'security-green': '#38b000',
29
+ 'light-blue': '#f0f7ff',
30
+ },
31
+ fontFamily: {
32
+ 'heading': ['Montserrat', 'sans-serif'],
33
+ 'body': ['Open Sans', 'sans-serif']
34
+ }
35
+ }
36
+ }
37
+ }
38
+ </script>
39
+ <style>
40
+ body {
41
+ font-family: 'body', sans-serif;
42
+ }
43
+
44
+ h1, h2, h3, h4 {
45
+ font-family: 'heading', sans-serif;
46
+ }
47
+
48
+ .navbar-fixed {
49
+ @apply fixed z-50 bg-white bg-opacity-90 backdrop-blur;
50
+ box-shadow: 0 2px 20px rgba(13, 59, 102, 0.1);
51
+ }
52
+
53
+ .process-step {
54
+ position: relative;
55
+ min-height: 120px;
56
+ padding-top: 60px;
57
+ padding-left: 25px;
58
+ }
59
+
60
+ .process-step:before {
61
+ content: '';
62
+ @apply absolute top-0 left-0 w-16 h-16 rounded-full flex items-center justify-center bg-security-green text-white font-bold;
63
+ font-family: 'heading';
64
+ font-size: 1.5rem;
65
+ line-height: 1.5;
66
+ }
67
+
68
+ .process-step:nth-child(1):before { content: '1'; }
69
+ .process-step:nth-child(2):before { content: '2'; }
70
+ .process-step:nth-child(3):before { content: '3'; }
71
+ .process-step:nth-child(4):before { content: '4'; }
72
+
73
+ @keyframes pulse {
74
+ 0% { transform: scale(1); }
75
+ 50% { transform: scale(1.05); }
76
+ 100% { transform: scale(1); }
77
+ }
78
+
79
+ .security-icon {
80
+ @apply w-16 h-16 flex items-center justify-center rounded-full mb-4;
81
+ background-color: rgba(56, 176, 0, 0.1);
82
+ }
83
+
84
+ .hero-pattern {
85
+ background:
86
+ radial-gradient(circle at 10% 50%, rgba(13, 59, 102, 0.05) 0%, transparent 20%),
87
+ radial-gradient(circle at 90% 30%, rgba(56, 176, 0, 0.05) 0%, transparent 15%);
88
+ }
89
+ </style>
90
+ </head>
91
+ <body>
92
+ <!-- Navigation bar -->
93
+ <header class="w-full py-4 transition-all duration-300" id="navbar">
94
+ <div class="container mx-auto px-4 flex justify-between items-center">
95
+ <!-- Logo & company name -->
96
+ <div class="flex items-center">
97
+ <div class="w-10 h-10 bg-medical-blue rounded-full mr-3 flex items-center justify-center">
98
+ <i class="fas fa-shield-alt text-white text-xl"></i>
99
+ </div>
100
+ <span class="text-medical-blue text-xl font-bold">Sécurity<span class="text-security-green">Med</span></span>
101
+ </div>
102
+
103
+ <!-- Desktop Navigation -->
104
+ <nav class="hidden md:flex items-center space-x-10">
105
+ <a href="#solutions" class="text-medical-blue font-medium hover:text-security-green transition">Solutions</a>
106
+ <a href="#expertise" class="text-medical-blue font-medium hover:text-security-green transition">Expertise</a>
107
+ <a href="#norms" class="text-medical-blue font-medium hover:text-security-green transition">Normes</a>
108
+ <a href="#contact" class="text-medical-blue font-medium hover:text-security-green transition">Contact</a>
109
+ </nav>
110
+
111
+ <!-- CTA Button -->
112
+ <button class="hidden md:block bg-security-green hover:bg-medical-blue text-white font-bold py-2 px-6 rounded-full transition-all duration-300 transform hover:-translate-y-1">
113
+ Audit de sécurité gratuit
114
+ </button>
115
+
116
+ <!-- Mobile menu button -->
117
+ <button id="mobileMenuBtn" class="md:hidden text-medical-blue">
118
+ <i class="fas fa-bars text-2xl"></i>
119
+ </button>
120
+ </div>
121
+
122
+ <!-- Mobile Menu -->
123
+ <div id="mobileMenu" class="hidden bg-white py-4 px-4 absolute w-full left-0 top-20 z-50 shadow-lg">
124
+ <nav class="flex flex-col space-y-4">
125
+ <a href="#solutions" class="text-medical-blue font-medium hover:text-security-green transition">Solutions</a>
126
+ <a href="#expertise" class="text-medical-blue font-medium hover:text-security-green transition">Expertise</a>
127
+ <a href="#norms" class="text-medical-blue font-medium hover:text-security-green transition">Normes</a>
128
+ <a href="#contact" class="text-medical-blue font-medium hover:text-security-green transition">Contact</a>
129
+ <button class="bg-security-green hover:bg-medical-blue text-white font-bold py-3 px-4 rounded-full transition w-full">
130
+ Audit de sécurité gratuit
131
+ </button>
132
+ </nav>
133
+ </div>
134
+ </header>
135
+
136
+ <!-- Hero Banner -->
137
+ <section class="hero-pattern bg-light-blue py-16 md:py-24 relative overflow-hidden">
138
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
139
+ <div class="md:w-1/2 mb-12 md:mb-0">
140
+ <h1 class="text-3xl md:text-5xl font-bold text-medical-blue leading-tight mb-6">
141
+ <span class="relative z-10">Sécurisez vos images médicales contre les cybermenaces</span>
142
+ </h1>
143
+ <p class="text-lg md:text-xl text-gray-700 mb-8 leading-relaxed">
144
+ Solutions conformes LI 27001 pour flux DICOM et réseaux hospitaliers - Protégez vos données patients et votre infrastructure médicale.
145
+ </p>
146
+ <div class="flex flex-wrap gap-4">
147
+ <button class="bg-security-green hover:bg-medical-blue text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:-translate-y-1 flex items-center">
148
+ Diagnostic gratuit
149
+ <i class="fas fa-arrow-right ml-3"></i>
150
+ </button>
151
+ <button class="bg-medical-blue hover:bg-blue-900 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300">
152
+ Nos certifications
153
+ </button>
154
+ </div>
155
+ </div>
156
+
157
+ <div class="md:w-1/2 flex justify-center relative">
158
+ <div class="relative w-full max-w-xl">
159
+ <div class="relative p-8 rounded-3xl overflow-hidden" style="background: linear-gradient(145deg, #0d3b66, #092848);">
160
+ <div class="flex justify-center mb-6">
161
+ <div class="security-icon">
162
+ <i class="fas fa-shield-alt text-security-green text-3xl"></i>
163
+ </div>
164
+ <div class="security-icon ml-6">
165
+ <i class="fas fa-heartbeat text-security-green text-3xl"></i>
166
+ </div>
167
+ </div>
168
+
169
+ <div class="mb-6 text-center">
170
+ <h3 class="text-xl font-bold text-white mb-2">Protection réseau DICOM</h3>
171
+ <div class="flex justify-center mb-4">
172
+ <div class="bg-yellow-500 text-xs px-2 py-1 rounded-full mr-2">Port 104</div>
173
+ <div class="bg-green-500 text-xs px-2 py-1 rounded-full">SSL/TLS</div>
174
+ </div>
175
+ <div class="bg-blue-900 rounded-lg p-4 border border-blue-700 mb-2">
176
+ <div class="flex items-center">
177
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
178
+ <span class="text-sm text-blue-200">CT Scanner HL7 → DICOM Secured</span>
179
+ </div>
180
+ </div>
181
+ <div class="bg-blue-900 rounded-lg p-4 border border-blue-700 mb-2">
182
+ <div class="flex items-center">
183
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
184
+ <span class="text-sm text-blue-200">Serveur PACS ↔ Station radiologique</span>
185
+ </div>
186
+ </div>
187
+ </div>
188
+
189
+ <div class="text-center">
190
+ <div class="inline-flex items-center text-white bg-medical-blue rounded-full px-4 py-2">
191
+ <i class="fas fa-certificate text-security-green mr-2"></i>
192
+ <span>LI 27001 Certified</span>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-security-green rounded-full opacity-20"></div>
197
+ <div class="absolute -top-6 -left-6 w-24 h-24 bg-medical-blue rounded-full opacity-10"></div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </section>
202
+
203
+ <!-- Section Expertise -->
204
+ <section id="expertise" class="py-16 md:py-24 bg-white">
205
+ <div class="container mx-auto px-4">
206
+ <div class="text-center max-w-3xl mx-auto mb-16">
207
+ <h2 class="text-3xl md:text-4xl font-bold text-medical-blue mb-6">Notre expertise unique</h2>
208
+ <p class="text-gray-600 text-lg">Spécialisés dans la sécurisation des infrastructures médicales et des flux DICOM</p>
209
+ </div>
210
+
211
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
212
+ <!-- Expertise 1 -->
213
+ <div class="bg-light-blue p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-300">
214
+ <div class="flex flex-col items-center text-center">
215
+ <div class="security-icon">
216
+ <i class="fas fa-shield-alt text-security-green text-3xl"></i>
217
+ </div>
218
+ <h3 class="text-xl font-bold text-medical-blue my-4">Protection DICOM</h3>
219
+ <p class="text-gray-600">
220
+ Chiffrement des flux d'images, contrôle d'accès HL7 sécurisé, authentification multifacteur pour vos systèmes PACs/RIS.
221
+ </p>
222
+ <div class="mt-6 inline-block bg-medical-blue text-white px-4 py-2 rounded-full text-sm font-medium">
223
+ En savoir plus
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <!-- Expertise 2 -->
229
+ <div class="bg-light-blue p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-300">
230
+ <div class="flex flex-col items-center text-center">
231
+ <div class="security-icon">
232
+ <i class="fas fa-network-wired text-security-green text-3xl"></i>
233
+ </div>
234
+ <h3 class="text-xl font-bold text-medical-blue my-4">Analyse réseau médical</h3>
235
+ <p class="text-gray-600">
236
+ Surveillance Wireshark spécialisée équipements médicaux, détection des anomalies dans les flux DICOM, cartographie sécurisée.
237
+ </p>
238
+ <div class="mt-6 inline-block bg-medical-blue text-white px-4 py-2 rounded-full text-sm font-medium">
239
+ En savoir plus
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <!-- Expertise 3 -->
245
+ <div class="bg-light-blue p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-300">
246
+ <div class="flex flex-col items-center text-center">
247
+ <div class="security-icon">
248
+ <i class="fas fa-certificate text-security-green text-3xl"></i>
249
+ </div>
250
+ <h3 class="text-xl font-bold text-medical-blue my-4">Conformité normative</h3>
251
+ <p class="text-gray-600">
252
+ Certification LI 27001 & adaptation RGPD santé, préparation aux audits ANSSI, solutions HDS pour la santé.
253
+ </p>
254
+ <div class="mt-6 inline-block bg-medical-blue text-white px-4 py-2 rounded-full text-sm font-medium">
255
+ En savoir plus
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ </section>
262
+
263
+ <!-- Section Normes & Process -->
264
+ <section id="norms" class="py-16 md:py-24 bg-medical-blue text-white">
265
+ <div class="container mx-auto px-4">
266
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
267
+ <!-- Normes & Certifications -->
268
+ <div>
269
+ <h2 class="text-3xl md:text-4xl font-bold mb-8">Conformité aux normes de sécurité médicale</h2>
270
+ <p class="text-lg text-blue-100 mb-10">
271
+ Nous garantissons le respect des réglementations les plus strictes pour la protection de vos données de santé.
272
+ </p>
273
+
274
+ <div class="grid grid-cols-2 gap-4">
275
+ <div class="bg-blue-900 bg-opacity-50 rounded-2xl p-6 flex flex-col items-center text-center">
276
+ <div class="w-16 h-16 rounded-lg bg-white flex items-center justify-center mb-4">
277
+ <span class="text-medical-blue font-bold">LI 27001</span>
278
+ </div>
279
+ <h3 class="font-bold">Label Informatique</h3>
280
+ <p class="text-blue-100 text-sm mt-2">Cybersécurité des SI de santé</p>
281
+ </div>
282
+
283
+ <div class="bg-blue-900 bg-opacity-50 rounded-2xl p-6 flex flex-col items-center text-center">
284
+ <div class="w-16 h-16 rounded-lg bg-white flex items-center justify-center mb-4">
285
+ <span class="text-medical-blue font-bold">DICOM</span>
286
+ </div>
287
+ <h3 class="font-bold">DICOM Secured</h3>
288
+ <p class="text-blue-100 text-sm mt-2">Sécurité des flux d'imagerie</p>
289
+ </div>
290
+
291
+ <div class="bg-blue-900 bg-opacity-50 rounded-2xl p-6 flex flex-col items-center text-center">
292
+ <div class="w-16 h-16 rounded-lg bg-white flex items-center justify-center mb-4">
293
+ <span class="text-medical-blue font-bold">HIPAA</span>
294
+ </div>
295
+ <h3 class="font-bold">Health Insurance</h3>
296
+ <p class="text-blue-100 text-sm mt-2">Protection données patients</p>
297
+ </div>
298
+
299
+ <div class="bg-blue-900 bg-opacity-50 rounded-2xl p-6 flex flex-col items-center text-center">
300
+ <div class="w-16 h-16 rounded-lg bg-white flex items-center justify-center mb-4">
301
+ <span class="text-medical-blue font-bold">HDS</span>
302
+ </div>
303
+ <h3 class="font-bold">Hébergeur de Santé</h3>
304
+ <p class="text-blue-100 text-sm mt-2">Certification de conformité</p>
305
+ </div>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- Processus -->
310
+ <div>
311
+ <h3 class="text-2xl font-bold mb-8">Notre processus d'accompagnement</h3>
312
+ <div class="space-y-8">
313
+ <div class="process-step">
314
+ <h4 class="font-bold text-lg mb-2">Audit sécurité approfondi</h4>
315
+ <p class="text-blue-100">Analyse complète de votre infrastructure et des flux DICOM</p>
316
+ </div>
317
+
318
+ <div class="process-step">
319
+ <h4 class="font-bold text-lg mb-2">Hardening des systèmes</h4>
320
+ <p class="text-blue-100">Renforcement de la sécurité serveurs et équipements</p>
321
+ </div>
322
+
323
+ <div class="process-step">
324
+ <h4 class="font-bold text-lg mb-2">Formation spécifique</h4>
325
+ <p class="text-blue-100">Personnalisée pour vos équipes médicales et techniques</p>
326
+ </div>
327
+
328
+ <div class="process-step">
329
+ <h4 class="font-bold text-lg mb-2">Surveillance continue</h4>
330
+ <p class="text-blue-100">Monitoring et réponse aux incidents 24/7</p>
331
+ </div>
332
+ </div>
333
+
334
+ <div class="mt-10">
335
+ <button class="bg-security-green hover:bg-green-600 text-white font-bold py-4 px-8 rounded-full shadow-lg flex items-center">
336
+ Télécharger notre livre blanc
337
+ <i class="fas fa-download ml-3"></i>
338
+ </button>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </section>
344
+
345
+ <!-- Section Clients & Testimonials -->
346
+ <section class="py-16 md:py-24 bg-white">
347
+ <div class="container mx-auto px-4">
348
+ <div class="text-center max-w-3xl mx-auto mb-16">
349
+ <h2 class="text-3xl md:text-4xl font-bold text-medical-blue mb-6">Ils nous font confiance</h2>
350
+ <p class="text-gray-600 text-lg">Hôpitaux, cliniques et fabricants nous font confiance pour sécuriser leur infrastructure médicale</p>
351
+ </div>
352
+
353
+ <!-- Testimonial -->
354
+ <div class="max-w-3xl mx-auto bg-light-blue rounded-2xl p-8 md:p-12 mb-16 relative">
355
+ <div class="absolute top-0 left-0 text-medical-blue opacity-10" style="font-size: 120px; transform: translate(-20%, -40%)">
356
+ <i class="fas fa-quote-left"></i>
357
+ </div>
358
+ <div class="relative z-10">
359
+ <div class="flex items-center mb-6">
360
+ <div class="w-16 h-16 rounded-full overflow-hidden mr-4">
361
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
362
+ </div>
363
+ <div>
364
+ <h4 class="font-bold text-lg text-medical-blue">Dr. Martin Dubois</h4>
365
+ <p class="text-blue-700">Responsable SI, CHU de Bordeaux</p>
366
+ </div>
367
+ </div>
368
+ <p class="text-lg italic text-gray-700">
369
+ "Grâce à SécurityMed, notre système PACS a obtenu la certification LI 27001 en seulement 3 mois. Leur expertise spécifique aux réseaux d'imagerie médicale a été déterminante pour répondre aux exigences les plus strictes tout en maintenant notre continuité de service."
370
+ </p>
371
+ <div class="flex mt-6">
372
+ <i class="fas fa-star text-yellow-400"></i>
373
+ <i class="fas fa-star text-yellow-400"></i>
374
+ <i class="fas fa-star text-yellow-400"></i>
375
+ <i class="fas fa-star text-yellow-400"></i>
376
+ <i class="fas fa-star text-yellow-400"></i>
377
+ </div>
378
+ </div>
379
+ </div>
380
+
381
+ <!-- Client Logos -->
382
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center justify-center">
383
+ <div class="bg-gray-100 h-16 flex items-center justify-center rounded-lg p-4">
384
+ <span class="text-medical-blue font-bold text-lg">CHU Paris</span>
385
+ </div>
386
+ <div class="bg-gray-100 h-16 flex items-center justify-center rounded-lg p-4">
387
+ <span class="text-medical-blue font-bold text-lg">Clinique Lyon</span>
388
+ </div>
389
+ <div class="bg-gray-100 h-16 flex items-center justify-center rounded-lg p-4">
390
+ <span class="text-medical-blue font-bold text-lg">Imagerie Sud</span>
391
+ </div>
392
+ <div class="bg-gray-100 h-16 flex items-center justify-center rounded-lg p-4">
393
+ <span class="text-medical-blue font-bold text-lg">ScanMed</span>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ </section>
398
+
399
+ <!-- Contact Section -->
400
+ <section id="contact" class="py-16 md:py-24 bg-light-blue">
401
+ <div class="container mx-auto px-4">
402
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
403
+ <div>
404
+ <h2 class="text-3xl md:text-4xl font-bold text-medical-blue mb-6">Contactez nos experts</h2>
405
+ <p class="text-gray-700 mb-8">
406
+ Nos spécialistes en sécurité des réseaux médicaux sont à votre disposition pour évaluer vos besoins et protéger votre infrastructure.
407
+ </p>
408
+ <div class="bg-white p-6 rounded-xl shadow-sm mb-8">
409
+ <div class="flex items-start mb-4">
410
+ <div class="text-security-green text-xl mr-4">
411
+ <i class="fas fa-history"></i>
412
+ </div>
413
+ <div>
414
+ <h4 class="font-bold text-medical-blue">Spécialistes depuis 2015</h4>
415
+ <p class="text-gray-600">Plus de 8 ans d'expertise dédiée à la cybersécurité médicale</p>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ <div class="space-y-6">
420
+ <div class="flex items-center">
421
+ <div class="w-12 h-12 bg-medical-blue rounded-full flex items-center justify-center text-white mr-4">
422
+ <i class="fas fa-hands-helping"></i>
423
+ </div>
424
+ <div>
425
+ <h4 class="font-bold text-medical-blue">Rappel sous 24h</h4>
426
+ <p class="text-gray-600">Nous vous contactons rapidement après votre demande</p>
427
+ </div>
428
+ </div>
429
+ <div class="flex items-center">
430
+ <div class="w-12 h-12 bg-medical-blue rounded-full flex items-center justify-center text-white mr-4">
431
+ <i class="fas fa-user-md"></i>
432
+ </div>
433
+ <div>
434
+ <h4 class="font-bold text-medical-blue">Approche sectorielle</h4>
435
+ <p class="text-gray-600">Des solutions adaptées à vos contraintes médicales</p>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+
441
+ <!-- Contact Form -->
442
+ <div class="bg-white rounded-xl shadow-lg p-8">
443
+ <form id="contactForm">
444
+ <div class="mb-6">
445
+ <label for="name" class="block text-medical-blue font-medium mb-2">Nom</label>
446
+ <input type="text" id="name" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-security-green focus:border-transparent" required>
447
+ </div>
448
+
449
+ <div class="mb-6">
450
+ <label for="email" class="block text-medical-blue font-medium mb-2">Email</label>
451
+ <input type="email" id="email" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-security-green focus:border-transparent" required>
452
+ </div>
453
+
454
+ <div class="mb-6">
455
+ <label for="message" class="block text-medical-blue font-medium mb-2">Votre message</label>
456
+ <textarea id="message" rows="4" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-security-green focus:border-transparent" required></textarea>
457
+ </div>
458
+
459
+ <button type="submit" class="w-full bg-security-green hover:bg-medical-blue text-white font-bold py-4 px-6 rounded-full shadow-md transition-all duration-300 transform hover:-translate-y-1">
460
+ Sécuriser mon infrastructure
461
+ </button>
462
+ </form>
463
+ <div id="formSuccess" class="hidden mt-4 p-4 bg-green-100 text-green-700 rounded-lg">
464
+ <i class="fas fa-check-circle mr-2"></i>
465
+ Votre message a été envoyé ! Nous vous contacterons dans les plus brefs délais.
466
+ </div>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </section>
471
+
472
+ <!-- Footer -->
473
+ <footer class="bg-medical-blue text-white py-12">
474
+ <div class="container mx-auto px-4">
475
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
476
+ <div>
477
+ <h3 class="text-xl font-bold mb-4 flex items-center">
478
+ <i class="fas fa-shield-alt mr-3"></i>
479
+ Sécurity<span class="text-security-green">Med</span>
480
+ </h3>
481
+ <p class="text-blue-100 mb-4">
482
+ Experts en cybersécurité dédiée au secteur médical et à l'imagerie DICOM.
483
+ </p>
484
+ <div class="flex space-x-4">
485
+ <a href="#" class="text-white hover:text-security-green transition"><i class="fab fa-linkedin-in"></i></a>
486
+ <a href="#" class="text-white hover:text-security-green transition"><i class="fab fa-twitter"></i></a>
487
+ <a href="#" class="text-white hover:text-security-green transition"><i class="fab fa-github"></i></a>
488
+ </div>
489
+ </div>
490
+
491
+ <div>
492
+ <h4 class="font-bold mb-4">Liens utiles</h4>
493
+ <ul class="space-y-2">
494
+ <li><a href="#" class="text-blue-100 hover:text-white transition">Blog technique</a></li>
495
+ <li><a href="#" class="text-blue-100 hover:text-white transition">FAQ Sécurité DICOM</a></li>
496
+ <li><a href="#" class="text-blue-100 hover:text-white transition">RGPD Santé</a></li>
497
+ <li><a href="#" class="text-blue-100 hover:text-white transition">Mentions légales</a></li>
498
+ </ul>
499
+ </div>
500
+
501
+ <div>
502
+ <h4 class="font-bold mb-4">Certifications</h4>
503
+ <ul class="space-y-2">
504
+ <li class="flex items-center">
505
+ <i class="fas fa-check-circle text-security-green mr-2"></i>
506
+ <span>LI 27001</span>
507
+ </li>
508
+ <li class="flex items-center">
509
+ <i class="fas fa-check-circle text-security-green mr-2"></i>
510
+ <span>Hébergeur de Données de Santé</span>
511
+ </li>
512
+ <li class="flex items-center">
513
+ <i class="fas fa-check-circle text-security-green mr-2"></i>
514
+ <span>DICOM Secured</span>
515
+ </li>
516
+ <li class="flex items-center">
517
+ <i class="fas fa-check-circle text-security-green mr-2"></i>
518
+ <span>Reconnu par l'ANSSI</span>
519
+ </li>
520
+ </ul>
521
+ </div>
522
+
523
+ <div>
524
+ <h4 class="font-bold mb-4">Contact</h4>
525
+ <ul class="space-y-2">
526
+ <li class="flex items-start">
527
+ <i class="fas fa-map-marker-alt mt-1 mr-3 text-blue-100"></i>
528
+ <span class="text-blue-100">12 Rue des PACS, 75000 Paris</span>
529
+ </li>
530
+ <li class="flex items-center">
531
+ <i class="fas fa-phone-alt mr-3 text-blue-100"></i>
532
+ <span class="text-blue-100">+33 1 23 45 67 89</span>
533
+ </li>
534
+ <li class="flex items-center">
535
+ <i class="fas fa-envelope mr-3 text-blue-100"></i>
536
+ <span class="text-blue-100">[email protected]</span>
537
+ </li>
538
+ </ul>
539
+ </div>
540
+ </div>
541
+
542
+ <div class="border-t border-blue-800 mt-12 pt-8 text-center text-blue-100">
543
+ <p>&copy; 2023 SécurityMed - Tous droits réservés. Experts en sécurité DICOM et LI 27001.</p>
544
+ </div>
545
+ </div>
546
+ </footer>
547
+
548
+ <!-- Floating CTA -->
549
+ <div class="fixed bottom-6 right-6 z-50">
550
+ <button class="bg-security-green hover:bg-medical-blue text-white p-4 rounded-full shadow-lg animate-pulse">
551
+ <i class="fas fa-comment-medical text-xl"></i>
552
+ </button>
553
+ </div>
554
+
555
+ <script>
556
+ // Mobile menu toggle
557
+ const mobileMenuBtn = document.getElementById('mobileMenuBtn');
558
+ const mobileMenu = document.getElementById('mobileMenu');
559
+
560
+ mobileMenuBtn.addEventListener('click', () => {
561
+ mobileMenu.classList.toggle('hidden');
562
+ });
563
+
564
+ // Sticky navigation
565
+ const navbar = document.getElementById('navbar');
566
+ window.addEventListener('scroll', () => {
567
+ if (window.scrollY > 100) {
568
+ navbar.classList.add('navbar-fixed');
569
+ } else {
570
+ navbar.classList.remove('navbar-fixed');
571
+ }
572
+ });
573
+
574
+ // Form submission handling
575
+ const contactForm = document.getElementById('contactForm');
576
+ const formSuccess = document.getElementById('formSuccess');
577
+
578
+ contactForm.addEventListener('submit', (e) => {
579
+ e.preventDefault();
580
+ formSuccess.classList.remove('hidden');
581
+ formSuccess.classList.add('block');
582
+ contactForm.reset();
583
+ setTimeout(() => {
584
+ formSuccess.classList.add('hidden');
585
+ formSuccess.classList.remove('block');
586
+ }, 5000);
587
+ });
588
+
589
+ // Smooth scrolling for anchor links
590
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
591
+ anchor.addEventListener('click', function(e) {
592
+ e.preventDefault();
593
+
594
+ // Close mobile menu if open
595
+ mobileMenu.classList.add('hidden');
596
+
597
+ const target = document.querySelector(this.getAttribute('href'));
598
+ if (target) {
599
+ window.scrollTo({
600
+ top: target.offsetTop - 100,
601
+ behavior: 'smooth'
602
+ });
603
+ }
604
+ });
605
+ });
606
+ </script>
607
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Maheri/secmed" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
608
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Voici un prompt optimisé pour DeepSite (ou tout outil de génération web IA) pour créer une landing page de consulting en cybersécurité médicale : --- **Prompt pour DeepSite :** "Crée une landing page responsive et moderne pour une entreprise de consulting en cybersécurité spécialisée dans l'imagerie médicale. **Objectifs :** - Transmettre expertise technique + confiance institutionnelle - Cibler les décideurs médicaux (hôpitaux, cliniques, fabricants d'équipements) - Mettre en avant les enjeux spécifiques DICOM **Structure :** 1. **Header sobre :** - Logo + Nom entreprise - Menu minimaliste : Solutions, Expertise, Normes, Contact - CTA principal : "Audit de sécurité gratuit" 2. **Bannière héroïque :** - Titre percutant : "Sécurisez vos images médicales contre les cybermenaces" - Sous-titre : "Solutions conformes LI 27001 pour flux DICOM et réseaux hospitaliers" - Visuel : Illustration épurée combinant bouclier cyber + imagerie IRM/scanner - Double CTA : "Diagnostic gratuit" + "Nos certifications" 3. **Section Expertise (3 colonnes) :** - **Protection DICOM** Icône: 🛡️ Texte: "Chiffrement des flux d'images, contrôle d'accès HL7" - **Analyse réseau médical** Icône: 📡 Texte: "Surveillance Wireshark spécialisée équipements médicaux" - **Conformité normative** Icône: ✅ Texte: "Certification LI 27001 & adaptation RGPD santé" 4. **Section Normes :** - Badges mis en valeur : LI 27001, DICOM Secured, HIPAA - Processus en 4 étapes : Audit → Hardening → Formation → Surveillance 5. **Section Cas client :** - Témoignage fictif : "Grâce à [Nom], notre PACS a obtenu la certification LI 27001 en 3 mois" - CHU [Ville] - Logos clients (hôpitaux, constructeurs matériel médical) 6. **Section Contact :** - Formulaire minimal : Nom, Email, Message - Rappel expertise : "Spécialistes réseaux médicaux depuis 201X" - CTA final : "Sécuriser mon infrastructure" 7. **Footer :** - Liens : Blog technique, RGPD, Mentions - Badges de confiance : ANS, HDS - Copyright + liens réseaux sociaux **Style visuel :** - Palette : Bleu médical (#0d3b66) + vert sécurité (#38b000) + blanc - Typographie : Polices sans-serif modernes (Montserrat pour titres, Open Sans pour texte) - Effets : Micro-interactions sur boutons, ombres portées subtiles - Responsive : Priorité mobile, cards réorganisables **Éléments techniques à intégrer :** - Mots-clés stratégiques : "sécurité DICOM", "conformité LI 27001", "surveillance Wireshark réseaux médicaux" - Schema.org : Balisage "MedicalOrganization" - Performances : Score Lighthouse > 90 **Tone of voice :** Professionnel mais accessible - Équilibre entre rigueur technique (pour les DSI) et bénéfices clairs (pour la direction médicale)." --- **Points clés pour DeepSite :** 1. La spécialisation **imagerie médicale** doit être l'élément différenciant 2. Les **normes** (LI 27001) et **outils** (Wireshark/DICOM) sont des preuves techniques à valoriser visuellement 3. L'aspect "**secteur réglementé**" nécessite une charte sérieuse (badges officiels, références institutionnelles) 4. Prévoir des **micro-copies** expliquant les enjeux sécurité spécifiques aux équipements médicaux **Conseil supplémentaire :** Pour générer les visuels dans DeepSite, ajouter : "Suggestions d'images : - Réseau sécurisé avec superposition d'images DICOM - Dashboard Wireshark avec marqueurs 'DICOM Port 104' - Infographie processus certification LI 27001"