Hugging Face's logo

Spaces:
Maheri
/
deepsite
Running

App Files Community
Maheri commited on
Commit
9bc6846
·
verified ·
1 Parent(s): 865f35f

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +716 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsite
3
- emoji: 🏢
4
- colorFrom: yellow
5
- colorTo: red
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: deepsite
3
+ emoji: 🐳
4
+ colorFrom: green
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,716 @@
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
+ <meta name="description" content="Deepsite - Experts en cybersécurité pour l'imagerie médicale. Conformité ISO 27001, sécurisation DICOM, audits réseau.">
7
+ <title>Deepsite - Cybersécurité pour l'Imagerie Médicale</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#0d47a1',
17
+ secondary: '#1976d2',
18
+ accent: '#e3f2fd',
19
+ cobalt: '#0d47a1'
20
+ },
21
+ fontFamily: {
22
+ inter: ['Inter', 'sans-serif']
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ body {
30
+ font-family: 'Inter', sans-serif;
31
+ scroll-behavior: smooth;
32
+ }
33
+
34
+ .hero-bg {
35
+ background: radial-gradient(circle, rgba(13, 71, 161, 0.85), rgba(13, 71, 161, 0.95)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%231976d2"/><circle cx="50" cy="50" r="40" fill="none" stroke="%230d47a1" stroke-width="3" stroke-dasharray="5,5"/><circle cx="25" cy="25" r="10" fill="%23e3f2fd" opacity="0.5"/><circle cx="75" cy="75" r="8" fill="%23e3f2fd" opacity="0.5"/></svg>');
36
+ background-size: cover;
37
+ background-position: center;
38
+ }
39
+
40
+ .btn-primary {
41
+ position: relative;
42
+ overflow: hidden;
43
+ transition: transform 0.3s, box-shadow 0.3s;
44
+ }
45
+
46
+ .btn-primary:hover {
47
+ transform: translateY(-3px);
48
+ box-shadow: 0 10px 20px rgba(13, 71, 161, 0.2);
49
+ }
50
+
51
+ .ripple {
52
+ position: absolute;
53
+ border-radius: 50%;
54
+ background: rgba(255, 255, 255, 0.6);
55
+ transform: scale(0);
56
+ animation: ripple 0.6s linear;
57
+ pointer-events: none;
58
+ }
59
+
60
+ @keyframes ripple {
61
+ to {
62
+ transform: scale(4);
63
+ opacity: 0;
64
+ }
65
+ }
66
+
67
+ .card-hover {
68
+ transition: transform 0.3s, box-shadow 0.3s;
69
+ }
70
+
71
+ .card-hover:hover {
72
+ transform: translateY(-10px);
73
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
74
+ }
75
+
76
+ .pacs-mockup {
77
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%231976d2" opacity="0.1"/></svg>');
78
+ background-size: cover;
79
+ border-left: 4px solid #1976d2;
80
+ }
81
+
82
+ .contact-step {
83
+ display: none;
84
+ animation: fadeIn 0.5s forwards;
85
+ }
86
+
87
+ .contact-step.active {
88
+ display: block;
89
+ }
90
+
91
+ @keyframes fadeIn {
92
+ from { opacity: 0; transform: translateY(10px); }
93
+ to { opacity: 1; transform: translateY(0); }
94
+ }
95
+
96
+ .stat-badge {
97
+ animation: pulse 2s infinite;
98
+ }
99
+
100
+ @keyframes pulse {
101
+ 0% { box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.4); }
102
+ 70% { box-shadow: 0 0 0 10px rgba(25, 118, 210, 0); }
103
+ 100% { box-shadow: 0 0 0 0 rgba(25, 118, 210, 0); }
104
+ }
105
+
106
+ .floating {
107
+ animation: floating 3s ease-in-out infinite;
108
+ }
109
+
110
+ @keyframes floating {
111
+ 0% { transform: translateY(0px); }
112
+ 50% { transform: translateY(-10px); }
113
+ 100% { transform: translateY(0px); }
114
+ }
115
+ </style>
116
+ </head>
117
+ <body class="bg-accent">
118
+ <!-- Navigation -->
119
+ <nav class="bg-white shadow-sm fixed w-full z-50">
120
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
121
+ <div class="flex justify-between h-16">
122
+ <div class="flex items-center">
123
+ <div class="flex-shrink-0 flex items-center">
124
+ <div class="bg-primary w-10 h-10 rounded-lg flex items-center justify-center">
125
+ <i class="fas fa-shield-alt text-white text-xl"></i>
126
+ </div>
127
+ <span class="ml-2 font-bold text-2xl text-primary">DEEPSITE</span>
128
+ </div>
129
+ <div class="hidden md:block ml-10">
130
+ <div class="flex space-x-4">
131
+ <a href="#expertise" class="text-gray-700 hover:text-primary px-3 py-2 font-medium">Expertises</a>
132
+ <a href="#cas" class="text-gray-700 hover:text-primary px-3 py-2 font-medium">Cas d'étude</a>
133
+ <a href="#faq" class="text-gray-700 hover:text-primary px-3 py-2 font-medium">FAQ</a>
134
+ <a href="#contact" class="text-gray-700 hover:text-primary px-3 py-2 font-medium">Contact</a>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ <div class="hidden md:flex items-center">
139
+ <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-opacity-90 transition">Connexion client</button>
140
+ </div>
141
+ <div class="md:hidden flex items-center">
142
+ <button id="mobile-menu-button" class="text-primary">
143
+ <i class="fas fa-bars text-xl"></i>
144
+ </button>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ <div id="mobile-menu" class="md:hidden hidden bg-white py-2">
149
+ <a href="#expertise" class="block px-4 py-2 hover:bg-accent">Expertises</a>
150
+ <a href="#cas" class="block px-4 py-2 hover:bg-accent">Cas d'étude</a>
151
+ <a href="#faq" class="block px-4 py-2 hover:bg-accent">FAQ</a>
152
+ <a href="#contact" class="block px-4 py-2 hover:bg-accent">Contact</a>
153
+ </div>
154
+ </nav>
155
+
156
+ <!-- Section Héros -->
157
+ <section class="hero-bg min-h-screen flex items-center pt-16">
158
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
159
+ <div class="md:grid md:grid-cols-2 md:gap-12 items-center">
160
+ <div class="text-white py-16 md:py-0">
161
+ <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight">
162
+ Protégez vos données d'imagerie médicale.
163
+ </h1>
164
+ <p class="mt-6 text-xl opacity-90 max-w-lg">
165
+ Conformité ISO 27001 garantie et maîtrise complète des flux DICOM dans votre infrastructure de santé.
166
+ </p>
167
+ <div class="mt-10">
168
+ <button id="auditBtn" class="btn-primary bg-white text-primary font-bold py-3 px-8 rounded-xl text-lg relative overflow-hidden">
169
+ Demander un audit gratuit
170
+ <span class="absolute inset-0 opacity-30 ripple-effect"></span>
171
+ </button>
172
+ </div>
173
+ </div>
174
+ <div class="hidden md:block relative">
175
+ <div class="bg-white rounded-2xl p-1 shadow-xl floating">
176
+ <div class="bg-accent rounded-xl p-6">
177
+ <div class="flex space-x-3 items-center mb-6">
178
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
179
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
180
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
181
+ </div>
182
+ <div class="grid grid-cols-3 gap-4">
183
+ <div class="bg-white rounded-lg p-4 shadow">
184
+ <div class="flex items-center">
185
+ <div class="w-3 h-3 rounded-full bg-primary mr-2"></div>
186
+ <span class="text-sm text-gray-700">DICOM</span>
187
+ </div>
188
+ <div class="mt-2 h-2 bg-gray-200 rounded-full"></div>
189
+ </div>
190
+ <div class="bg-white rounded-lg p-4 shadow">
191
+ <div class="flex items-center">
192
+ <div class="w-3 h-3 rounded-full bg-secondary mr-2"></div>
193
+ <span class="text-sm text-gray-700">PACS</span>
194
+ </div>
195
+ <div class="mt-2 h-2 bg-gray-200 rounded-full"></div>
196
+ </div>
197
+ <div class="bg-white rounded-lg p-4 shadow">
198
+ <div class="flex items-center">
199
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
200
+ <span class="text-sm text-gray-700">HL7</span>
201
+ </div>
202
+ <div class="mt-2 h-2 bg-gray-200 rounded-full"></div>
203
+ </div>
204
+ </div>
205
+ <div class="mt-6 bg-gradient-to-r from-primary to-secondary rounded-lg p-6 text-white">
206
+ <div class="text-lg font-bold">Statut Sécurité</div>
207
+ <div class="mt-2 flex items-center">
208
+ <div class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center mr-4">
209
+ <i class="fas fa-shield-alt"></i>
210
+ </div>
211
+ <div>
212
+ <div class="font-semibold">Système conforme ISO 27001</div>
213
+ <div class="text-xs opacity-80">Dernière vérification: 15/09/2023</div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </section>
223
+
224
+ <!-- Bande de Confiance -->
225
+ <section class="py-10 bg-white">
226
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
227
+ <div class="flex flex-col md:flex-row items-center justify-between">
228
+ <div class="flex space-x-6 md:space-x-12 items-center">
229
+ <div class="bg-accent rounded-full w-16 h-16 flex items-center justify-center">
230
+ <i class="fas fa-certificate text-primary text-2xl"></i>
231
+ </div>
232
+ <div class="bg-accent rounded-full w-16 h-16 flex items-center justify-center">
233
+ <i class="fas fa-user-shield text-primary text-2xl"></i>
234
+ </div>
235
+ <div class="bg-accent rounded-full w-16 h-16 flex items-center justify-center">
236
+ <i class="fas fa-lock text-primary text-2xl"></i>
237
+ </div>
238
+ </div>
239
+ <div class="mt-6 md:mt-0 text-center md:text-right">
240
+ <p class="text-lg text-primary max-w-md">
241
+ "Réduction mesurable des risques et renforcement de la conformité réglementaire."
242
+ </p>
243
+ <div class="flex space-x-4 mt-4 justify-center md:justify-end">
244
+ <span class="text-xs bg-accent px-3 py-1 rounded-full text-primary">ISO/IEC 27001</span>
245
+ <span class="text-xs bg-accent px-3 py-1 rounded-full text-primary">HIPAA</span>
246
+ <span class="text-xs bg-accent px-3 py-1 rounded-full text-primary">GDPR</span>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </section>
252
+
253
+ <!-- Nos Expertises -->
254
+ <section id="expertise" class="py-20 bg-accent">
255
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
256
+ <div class="text-center mb-16">
257
+ <h2 class="text-3xl md:text-4xl font-bold text-primary">Nos Expertises</h2>
258
+ <p class="mt-4 text-gray-700 max-w-2xl mx-auto">
259
+ Des solutions complètes pour protéger vos infrastructures d'imagerie médicale
260
+ </p>
261
+ </div>
262
+
263
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
264
+ <!-- Carte 1 -->
265
+ <div class="card-hover bg-white rounded-2xl p-8 shadow-lg flex flex-col">
266
+ <div class="bg-primary rounded-full w-16 h-16 flex items-center justify-center mb-6">
267
+ <i class="fas fa-shield-alt text-white text-2xl"></i>
268
+ </div>
269
+ <h3 class="text-xl font-bold text-gray-900 mb-4">Audits ISO/IEC 27001</h3>
270
+ <p class="text-gray-600 mb-6">
271
+ Mise en place et maintien d'un SMSI complet pour les services de radiologie et de diagnostic.
272
+ </p>
273
+ <ul class="mt-auto space-y-2">
274
+ <li class="flex items-center">
275
+ <i class="fas fa-check-circle text-secondary mr-2"></i>
276
+ <span>Évaluation des risques selon ISO 27005</span>
277
+ </li>
278
+ <li class="flex items-center">
279
+ <i class="fas fa-check-circle text-secondary mr-2"></i>
280
+ <span>Plan d'action personnalisé</span>
281
+ </li>
282
+ <li class="flex items-center">
283
+ <i class="fas fa-check-circle text-secondary mr-2"></i>
284
+ <span>Formation du personnel</span>
285
+ </li>
286
+ </ul>
287
+ </div>
288
+
289
+ <!-- Carte 2 -->
290
+ <div class="card-hover bg-white rounded-2xl p-8 shadow-lg flex flex-col">
291
+ <div class="bg-secondary rounded-full w-16 h-16 flex items-center justify-center mb-6">
292
+ <i class="fas fa-network-wired text-white text-2xl"></i>
293
+ </div>
294
+ <h3 class="text-xl font-bold text-gray-900 mb-4">Analyse réseau Wireshark</h3>
295
+ <p class="text-gray-600 mb-6">
296
+ Détection d'intrusions, forensic et tuning SOC pour les infrastructures médicales critiques.
297
+ </p>
298
+ <ul class="mt-auto space-y-2">
299
+ <li class="flex items-center">
300
+ <i class="fas fa-check-circle text-secondary mr-2"></i>
301
+ <span>Analyse des flux DICOM et HL7</span>
302
+ </li>
303
+ <li class="flex items-center">
304
+ <i class="fas fa-check-circle text-secondary mr-2"></i>
305
+ <span>Détection de trafic malveillant</span>
306
+ </li>
307
+ <li class="flex items-center">
308
+ <i class="fas fa-check-circle text-secondary mr-2"></i>
309
+ <span>Optimisation des règles firewall</span>
310
+ </li>
311
+ </ul>
312
+ </div>
313
+
314
+ <!-- Carte 3 -->
315
+ <div class="card-hover bg-white rounded-2xl p-8 shadow-lg flex flex-col">
316
+ <div class="bg-green-500 rounded-full w-16 h-16 flex items-center justify-center mb-6">
317
+ <i class="fas fa-x-ray text-white text-2xl"></i>
318
+ </div>
319
+ <h3 class="text-xl font-bold text-gray-900 mb-4">Sécurisation DICOM</h3>
320
+ <p class="text-gray-600 mb-6">
321
+ Chiffrement, contrôle d'accès et durcissement des serveurs PACS et stations de travail.
322
+ </p>
323
+ <ul class="mt-auto space-y-2">
324
+ <li class="flex items-center">
325
+ <i class="fas fa-check-circle text-secondary mr-2"></i>
326
+ <span>Conformité ANSSI-RGS</span>
327
+ </li>
328
+ <li class="flex items-center">
329
+ <i class="fas fa-check-circle text-secondary mr-2"></i>
330
+ <span>Architecture Zero Trust</span>
331
+ </li>
332
+ <li class="flex items-center">
333
+ <i class="fas fa-check-circle text-secondary mr-2"></i>
334
+ <span>Journalisation et traçabilité</span>
335
+ </li>
336
+ </ul>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ </section>
341
+
342
+ <!-- Étude de Cas -->
343
+ <section id="cas" class="py-20 bg-white">
344
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
345
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
346
+ <div class="flex items-center">
347
+ <div>
348
+ <h2 class="text-3xl md:text-4xl font-bold text-primary mb-6">Transformation Cybersécurité d'un Service de Radiologie</h2>
349
+ <div class="bg-accent p-6 rounded-xl mb-6">
350
+ <div class="flex space-x-4">
351
+ <div class="stat-badge bg-secondary text-white py-3 px-6 rounded-lg flex flex-col items-center justify-center">
352
+ <span class="text-2xl font-bold">-60%</span>
353
+ <span class="text-xs">d'alertes</span>
354
+ </div>
355
+ <div class="stat-badge bg-green-500 text-white py-3 px-6 rounded-lg flex flex-col items-center justify-center">
356
+ <span class="text-2xl font-bold">0</span>
357
+ <span class="text-xs">fuites DICOM</span>
358
+ </div>
359
+ <div class="stat-badge bg-primary text-white py-3 px-6 rounded-lg flex flex-col items-center justify-center">
360
+ <span class="text-2xl font-bold">95%</span>
361
+ <span class="text-xs">conformité</span>
362
+ </div>
363
+ </div>
364
+ <p class="mt-6 text-gray-700">
365
+ Après un audit approfondi, nous avons accompagné un CHU dans la sécurisation de son infrastructure PACS, obtenant des résultats significatifs en 12 mois.
366
+ </p>
367
+ </div>
368
+ <button class="btn-primary bg-primary text-white font-bold py-3 px-8 rounded-xl flex items-center">
369
+ <i class="fas fa-download mr-3"></i>
370
+ Lire le rapport PDF
371
+ </button>
372
+ </div>
373
+ </div>
374
+ <div class="pacs-mockup bg-gray-50 rounded-2xl p-8 min-h-80 flex items-center justify-center">
375
+ <div class="max-w-md">
376
+ <div class="flex justify-center mb-6">
377
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
378
+ </div>
379
+ <div class="space-y-4">
380
+ <div class="flex justify-between">
381
+ <div class="text-sm text-gray-500">Avant</div>
382
+ <div class="flex">
383
+ <span class="w-3 h-3 rounded-full bg-red-500 mr-1"></span>
384
+ <span class="w-3 h-3 rounded-full bg-red-500 mr-1"></span>
385
+ <span class="w-3 h-3 rounded-full bg-red-500 mr-1"></span>
386
+ <span class="w-3 h-3 rounded-full bg-gray-300 mr-1"></span>
387
+ <span class="w-3 h-3 rounded-full bg-gray-300"></span>
388
+ </div>
389
+ </div>
390
+ <div class="h-4 bg-gradient-to-r from-red-400 to-red-200 rounded-full"></div>
391
+
392
+ <div class="flex justify-between mt-8">
393
+ <div class="text-sm text-gray-500">Après</div>
394
+ <div class="flex">
395
+ <span class="w-3 h-3 rounded-full bg-green-500 mr-1"></span>
396
+ <span class="w-3 h-3 rounded-full bg-green-500 mr-1"></span>
397
+ <span class="w-3 h-3 rounded-full bg-green-500 mr-1"></span>
398
+ <span class="w-3 h-3 rounded-full bg-green-500 mr-1"></span>
399
+ <span class="w-3 h-3 rounded-full bg-green-500"></span>
400
+ </div>
401
+ </div>
402
+ <div class="h-4 bg-gradient-to-r from-green-400 to-green-200 rounded-full"></div>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </section>
409
+
410
+ <!-- FAQ / Blog Aperçu -->
411
+ <section id="faq" class="py-20 bg-accent">
412
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
413
+ <div class="text-center mb-16">
414
+ <h2 class="text-3xl md:text-4xl font-bold text-primary">Questions fréquentes</h2>
415
+ <p class="mt-4 text-gray-700 max-w-2xl mx-auto">
416
+ Découvrez nos ressources pour comprendre les enjeux de cybersécurité en milieu médical
417
+ </p>
418
+ </div>
419
+
420
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
421
+ <!-- Question 1 -->
422
+ <div class="bg-white rounded-xl p-6 shadow">
423
+ <div class="flex items-center mb-4">
424
+ <div class="bg-blue-100 text-primary p-3 rounded-lg mr-4">
425
+ <i class="fas fa-question-circle text-xl"></i>
426
+ </div>
427
+ <h3 class="text-lg font-semibold">Pourquoi la norme ISO 27001 ?</h3>
428
+ </div>
429
+ <p class="text-gray-600 mb-4">
430
+ Le référentiel ISO 27001 est le cadre international incontournable pour maîtriser les risques de sécurité de l'information...
431
+ </p>
432
+ <button class="text-primary font-medium flex items-center">
433
+ En savoir plus
434
+ <i class="fas fa-arrow-right ml-2 text-sm"></i>
435
+ </button>
436
+ </div>
437
+
438
+ <!-- Question 2 -->
439
+ <div class="bg-white rounded-xl p-6 shadow">
440
+ <div class="flex items-center mb-4">
441
+ <div class="bg-green-100 text-green-600 p-3 rounded-lg mr-4">
442
+ <i class="fas fa-wrench text-xl"></i>
443
+ </div>
444
+ <h3 class="text-lg font-semibold">Comment tester un PACS ?</h3>
445
+ </div>
446
+ <p class="text-gray-600 mb-4">
447
+ Nos méthodologies de pentest spécifiques aux systèmes d'imagerie médicale combinent analyse réseau...
448
+ </p>
449
+ <button class="text-primary font-medium flex items-center">
450
+ En savoir plus
451
+ <i class="fas fa-arrow-right ml-2 text-sm"></i>
452
+ </button>
453
+ </div>
454
+
455
+ <!-- Question 3 -->
456
+ <div class="bg-white rounded-xl p-6 shadow">
457
+ <div class="flex items-center mb-4">
458
+ <div class="bg-purple-100 text-purple-600 p-3 rounded-lg mr-4">
459
+ <i class="fas fa-wave-square text-xl"></i>
460
+ </div>
461
+ <h3 class="text-lg font-semibold">Wireshark pour les biosignaux</h3>
462
+ </div>
463
+ <p class="text-gray-600 mb-4">
464
+ Analyser les flux de données biomédicales nécessite une compréhension approfondie des protocoles DICOM...
465
+ </p>
466
+ <button class="text-primary font-medium flex items-center">
467
+ En savoir plus
468
+ <i class="fas fa-arrow-right ml-2 text-sm"></i>
469
+ </button>
470
+ </div>
471
+ </div>
472
+
473
+ <div class="text-center mt-12">
474
+ <button class="btn-primary border-2 border-primary text-primary font-bold py-3 px-8 rounded-xl">
475
+ Accéder au blog complet
476
+ </button>
477
+ </div>
478
+ </div>
479
+ </section>
480
+
481
+ <!-- Formulaire de Contact -->
482
+ <section id="contact" class="py-20 bg-white">
483
+ <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
484
+ <div class="text-center mb-12">
485
+ <h2 class="text-3xl md:text-4xl font-bold text-primary">Audit Cybersécurité Gratuit</h2>
486
+ <p class="mt-4 text-gray-700 max-w-xl mx-auto">
487
+ Demandez votre évaluation préliminaire et recevez des recommandations personnalisées
488
+ </p>
489
+ </div>
490
+
491
+ <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
492
+ <div class="px-6 py-8 sm:p-10">
493
+ <!-- Étape 1 -->
494
+ <div id="step1" class="contact-step active">
495
+ <h3 class="text-lg font-medium text-gray-900 mb-6">Informations principales</h3>
496
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
497
+ <div>
498
+ <label for="name" class="block text-sm font-medium text-gray-700">Nom complet</label>
499
+ <input type="text" id="name" class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-3 border">
500
+ </div>
501
+ <div>
502
+ <label for="company" class="block text-sm font-medium text-gray-700">Établissement</label>
503
+ <input type="text" id="company" class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-3 border">
504
+ </div>
505
+ <div>
506
+ <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
507
+ <input type="email" id="email" class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-3 border">
508
+ </div>
509
+ <div>
510
+ <label for="phone" class="block text-sm font-medium text-gray-700">Téléphone</label>
511
+ <input type="tel" id="phone" class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-3 border">
512
+ </div>
513
+ </div>
514
+ <div class="mt-8 flex justify-end">
515
+ <button id="nextToStep2" class="btn-primary bg-primary text-white font-medium py-2 px-6 rounded-md">
516
+ Suivant
517
+ <i class="fas fa-arrow-right ml-2"></i>
518
+ </button>
519
+ </div>
520
+ </div>
521
+
522
+ <!-- Étape 2 -->
523
+ <div id="step2" class="contact-step">
524
+ <h3 class="text-lg font-medium text-gray-900 mb-6">Besoins spécifiques</h3>
525
+ <div class="space-y-6">
526
+ <div>
527
+ <label for="message" class="block text-sm font-medium text-gray-700">Vos besoins principaux</label>
528
+ <textarea id="message" rows="4" class="mt-1 focus:ring-primary focus:border-primary block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-3 border"></textarea>
529
+ </div>
530
+ <div class="flex items-center">
531
+ <input id="rgpd" name="rgpd" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
532
+ <label for="rgpd" class="ml-2 block text-sm text-gray-700">
533
+ J'accepte la politique de confidentialité et le traitement de mes données dans le cadre de cette demande.
534
+ </label>
535
+ </div>
536
+ </div>
537
+ <div class="mt-8 flex justify-between">
538
+ <button id="backToStep1" class="font-medium py-2 px-6 rounded-md border border-gray-300">
539
+ <i class="fas fa-arrow-left mr-2"></i> Retour
540
+ </button>
541
+ <button id="submitForm" class="btn-primary bg-primary text-white font-medium py-2 px-6 rounded-md">
542
+ Envoyer la demande
543
+ </button>
544
+ </div>
545
+ </div>
546
+
547
+ <!-- Message de remerciement -->
548
+ <div id="thankYouMessage" class="contact-step hidden">
549
+ <div class="text-center py-12">
550
+ <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
551
+ <i class="fas fa-check-circle text-green-600 text-2xl"></i>
552
+ </div>
553
+ <h3 class="mt-4 text-2xl font-bold text-gray-900">Demande envoyée avec succès !</h3>
554
+ <p class="mt-4 text-gray-700">
555
+ Nous avons bien reçu votre demande d'audit gratuit. Un expert Deepsite vous contactera dans les 48 heures pour planifier votre évaluation.
556
+ </p>
557
+ <button id="newRequest" class="mt-6 btn-primary bg-primary text-white font-medium py-2 px-6 rounded-md">
558
+ Nouvelle demande
559
+ </button>
560
+ </div>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ </div>
565
+ </section>
566
+
567
+ <!-- Footer -->
568
+ <footer class="bg-primary text-white">
569
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-8">
570
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
571
+ <div>
572
+ <div class="flex items-center">
573
+ <div class="bg-white bg-opacity-20 w-10 h-10 rounded-lg flex items-center justify-center">
574
+ <i class="fas fa-shield-alt"></i>
575
+ </div>
576
+ <span class="ml-2 font-bold text-xl">DEEPSITE</span>
577
+ </div>
578
+ <p class="mt-4 text-accent max-w-xs">
579
+ Experts en cybersécurité dédiés à la protection des infrastructures de santé et d'imagerie médicale.
580
+ </p>
581
+ <div class="mt-6 bg-secondary rounded-lg py-2 px-4 inline-block">
582
+ <div class="flex items-center">
583
+ <i class="fas fa-certificate mr-2"></i>
584
+ <span>Certifié ISO 27001:2022</span>
585
+ </div>
586
+ </div>
587
+ </div>
588
+
589
+ <div>
590
+ <h3 class="text-lg font-bold mb-4">Navigation</h3>
591
+ <ul class="space-y-2">
592
+ <li><a href="#expertise" class="text-accent hover:text-white">Expertises</a></li>
593
+ <li><a href="#cas" class="text-accent hover:text-white">Études de cas</a></li>
594
+ <li><a href="#faq" class="text-accent hover:text-white">FAQ</a></li>
595
+ <li><a href="#contact" class="text-accent hover:text-white">Contact</a></li>
596
+ </ul>
597
+ </div>
598
+
599
+ <div>
600
+ <h3 class="text-lg font-bold mb-4">Contact</h3>
601
+ <ul class="space-y-3 text-accent">
602
+ <li class="flex items-start">
603
+ <i class="fas fa-map-marker-alt mt-1 mr-3"></i>
604
+ <span>12 Rue de la Radiologie<br>75015 Paris</span>
605
+ </li>
606
+ <li class="flex items-center">
607
+ <i class="fas fa-phone-alt mr-3"></i>
608
+ <span>+33 1 23 45 67 89</span>
609
+ </li>
610
+ <li class="flex items-center">
611
+ <i class="fas fa-envelope mr-3"></i>
612
+ <span>contact@deepsite.fr</span>
613
+ </li>
614
+ </ul>
615
+ </div>
616
+
617
+ <div>
618
+ <h3 class="text-lg font-bold mb-4">Réseaux sociaux</h3>
619
+ <div class="flex space-x-4">
620
+ <a href="#" class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-30">
621
+ <i class="fab fa-linkedin-in"></i>
622
+ </a>
623
+ <a href="#" class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-opacity-30">
624
+ <i class="fab fa-twitter"></i>
625
+ </a>
626
+ <a href="#" class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center hover:bg-op-30">
627
+ <i class="fab fa-youtube"></i>
628
+ </a>
629
+ </div>
630
+ <div class="mt-6">
631
+ <button class="bg-accent text-primary font-medium py-2 px-4 rounded-lg">
632
+ Espace client
633
+ <i class="fas fa-lock ml-2"></i>
634
+ </button>
635
+ </div>
636
+ </div>
637
+ </div>
638
+
639
+ <div class="border-t border-white border-opacity-20 mt-12 pt-8">
640
+ <div class="flex flex-col md:flex-row justify-between items-center">
641
+ <p class="text-accent">© 2023 Deepsite. Tous droits réservés.</p>
642
+ <div class="mt-4 md:mt-0">
643
+ <a href="#" class="text-accent hover:text-white mr-6">Politique de confidentialité</a>
644
+ <a href="#" class="text-accent hover:text-white">Mentions légales</a>
645
+ </div>
646
+ </div>
647
+ </div>
648
+ </div>
649
+ </footer>
650
+
651
+ <script>
652
+ // Mobile menu toggle
653
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
654
+ const menu = document.getElementById('mobile-menu');
655
+ menu.classList.toggle('hidden');
656
+ });
657
+
658
+ // Ripple effect for buttons
659
+ function createRipple(event) {
660
+ const button = event.currentTarget;
661
+ const circle = document.createElement('span');
662
+ const diameter = Math.max(button.clientWidth, button.clientHeight);
663
+ const radius = diameter / 2;
664
+
665
+ circle.style.width = circle.style.height = `${diameter}px`;
666
+ circle.style.left = `${event.clientX - button.getBoundingClientRect().left - radius}px`;
667
+ circle.style.top = `${event.clientY - button.getBoundingClientRect().top - radius}px`;
668
+ circle.classList.add('ripple');
669
+
670
+ const ripple = button.getElementsByClassName('ripple')[0];
671
+ if (ripple) {
672
+ ripple.remove();
673
+ }
674
+
675
+ button.appendChild(circle);
676
+ }
677
+
678
+ const buttons = document.querySelectorAll('.btn-primary');
679
+ buttons.forEach(button => {
680
+ button.addEventListener('click', createRipple);
681
+ });
682
+
683
+ // Smooth scroll to contact form when clicking the CTA
684
+ document.getElementById('auditBtn').addEventListener('click', function() {
685
+ document.getElementById('contact').scrollIntoView({ behavior: 'smooth' });
686
+ });
687
+
688
+ // Multi-step contact form
689
+ document.getElementById('nextToStep2').addEventListener('click', function() {
690
+ document.getElementById('step1').classList.remove('active');
691
+ document.getElementById('step2').classList.add('active');
692
+ });
693
+
694
+ document.getElementById('backToStep1').addEventListener('click', function() {
695
+ document.getElementById('step2').classList.remove('active');
696
+ document.getElementById('step1').classList.add('active');
697
+ });
698
+
699
+ document.getElementById('submitForm').addEventListener('click', function() {
700
+ document.getElementById('step2').classList.remove('active');
701
+ document.getElementById('thankYouMessage').classList.add('active');
702
+ });
703
+
704
+ document.getElementById('newRequest').addEventListener('click', function() {
705
+ document.getElementById('thankYouMessage').classList.remove('active');
706
+ document.getElementById('step1').classList.add('active');
707
+
708
+ // Reset form
709
+ document.querySelectorAll('input, textarea').forEach(input => {
710
+ input.value = '';
711
+ });
712
+ document.getElementById('rgpd').checked = false;
713
+ });
714
+ </script>
715
+ <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/deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
716
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Prompt Deepsite — Landing Page d’une Entreprise de Consulting Cyber en Imagerie Médicale Langue : Français Objectif : Générer une landing page moderne, responsive (320-1920 px) et accessible pour une société de conseil en cybersécurité spécialisée dans l’imagerie médicale (ISO/IEC 27001, Wireshark, DICOM). Style visuel : Design clair et professionnel, palette “santé + sécurité” (bleu cobalt #0d47a1, bleu primaire #1976d2, accents #e3f2fd), Material Design 3, shadows douces, coins arrondis. Animation subtile au survol des CTA. Typo : Sans-serif moderne (Inter ou Roboto). Maquette : Grille fluide + flexbox, breakpoints clés : ≤600 px / 601-960 px / ≥961 px.  ⸻ 1 . Section Héros • Background : image semi-opaqu­­e d’un scanner IRM avec dégradé radial bleu-violet. • Heading : “Protégez vos données d’imagerie médicale.” (h1, 3xl). • Sub-heading : phrase d’accroche sur la conformité ISO 27001 et la maîtrise des flux DICOM. • CTA primaire : bouton “Demander un audit gratuit” (animation ripple, scroll doux vers le formulaire). 2 . Bande de Confiance • Logos ISO/IEC 27001, HIPAA, GDPR. • Micro-texte : “Réduction mesurable des risques et renforcement de la conformité réglementaire.”  3 . Nos Expertises (grille de 3 cartes) Carte Icône Titre Pitch court 1 🛡 Audits ISO/IEC 27001 Mise en place et maintien d’un SMSI complet. 2 📡 Analyse réseau Wireshark Détection d’intrusions, forensic et tuning SOC.  3 🩻 Sécurisation DICOM Chiffrement, contrôle d’accès et durcissement PACS.  4 . Étude de Cas • Mockup carrousel avant/après d’un service de radiologie : baisse de 60 % des alertes critiques, zéro fuite DICOM en 12 mois. • Bouton fantôme “Lire le rapport PDF”. 5 . FAQ / Blog Aperçu • 3 tuiles “Pourquoi la norme ISO 27001 ?”, “Comment tester un PACS ?”, “Wireshark pour les biosignaux”. • Liens vers articles (lazy-load, pré-fetch). 6 . Formulaire de Contact • 2 étapes (nom-entreprise/email → besoin/rgpd opt-in). • Captcha invisible, validation ARIA-live, submit via API. 7 . Footer • Coordonnées, réseaux sociaux, badge “Certifié ISO 27001:2022”. • Liens légaux + bandeau cookies (préférences utilisateurs). ⸻ Directives techniques pour Deepsite 1. Code : HTML 5 sémantique, CSS Grid + Flex, JS léger (no jQuery). 2. Performance : images WebP optimisées, preload fonts, defer scripts. 3. Accessibilité : contraste AA min., navigation clavier, labels explicites. 4. SEO : balises meta ouvertes, schema.org “ProfessionalService”. 5. Responsive tests : émulateurs mobile, tablette, desktop. 6. Livrables : dossier compressé + README d’intégration. ⸻ Ces spécifications s’appuient sur les lignes directrices officielles du responsive design (MDN) , les meilleures pratiques ISO 27001 appliquées à la santé , l’analyse réseau Wireshark recommandée par SANS , et les exigences de sécurité DICOM documentées dans la littérature scientifique .