Maheri commited on
Commit
8d23411
verified
1 Parent(s): 3084b1d

Corrigez les styles afin d'avoir une page responsive. - Follow Up Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +339 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Program
3
- emoji: 馃寲
4
- colorFrom: indigo
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: program
3
+ emoji: 馃惓
4
+ colorFrom: pink
5
+ colorTo: gray
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,339 @@
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>Programme imagerie m茅dicale 2025-2026</title>
7
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Roboto+Condensed:wght@700&display=swap" rel="stylesheet">
11
+ <style>
12
+ * {
13
+ margin: 0;
14
+ padding: 0;
15
+ box-sizing: border-box;
16
+ }
17
+
18
+ html, body {
19
+ height: 100%;
20
+ font-family: 'Lato', sans-serif;
21
+ background-color: #f8f9fa;
22
+ overflow: hidden;
23
+ }
24
+
25
+ .slide-container {
26
+ width: 100%;
27
+ height: 100%;
28
+ background: #ffffff;
29
+ display: flex;
30
+ flex-direction: column;
31
+ }
32
+
33
+ .header {
34
+ background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
35
+ color: white;
36
+ padding: 30px 60px;
37
+ text-align: center;
38
+ position: relative;
39
+ }
40
+
41
+ .main-title {
42
+ font-family: 'Roboto Condensed', sans-serif;
43
+ font-size: 40px;
44
+ font-weight: 700;
45
+ text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
46
+ letter-spacing: 1px;
47
+ }
48
+
49
+ .content-area {
50
+ flex-grow: 1;
51
+ display: flex;
52
+ flex-direction: column;
53
+ padding: 40px 60px;
54
+ overflow-y: auto;
55
+ }
56
+
57
+ .projects-section {
58
+ flex-grow: 1;
59
+ position: relative;
60
+ }
61
+
62
+ .gantt-grid {
63
+ display: grid;
64
+ grid-template-columns: minmax(420px, auto) 80px 1fr;
65
+ gap: 0 40px;
66
+ }
67
+
68
+ .gantt-column-title {
69
+ font-family: 'Roboto Condensed', sans-serif;
70
+ font-size: 20px;
71
+ font-weight: 700;
72
+ color: #2c3e50;
73
+ padding-bottom: 10px;
74
+ border-bottom: 2px solid #34495e;
75
+ text-align: left;
76
+ align-self: end;
77
+ }
78
+ .gantt-column-title.center {
79
+ text-align: center;
80
+ }
81
+
82
+ .timeline-header-wrapper {
83
+ grid-column: 3 / 4;
84
+ }
85
+
86
+ .gantt-header {
87
+ display: flex;
88
+ margin-top: 10px;
89
+ }
90
+ .quarter-marker {
91
+ font-family: 'Roboto Condensed', sans-serif;
92
+ flex: 1;
93
+ text-align: center;
94
+ font-size: 16px;
95
+ font-weight: 700;
96
+ color: #34495e;
97
+ white-space: nowrap;
98
+ }
99
+
100
+ .project-info, .project-risk-cell, .project-gantt-container {
101
+ padding: 25px 0;
102
+ border-bottom: 1px solid #eaeded;
103
+ display: flex;
104
+ align-items: center;
105
+ opacity: 0;
106
+ animation: fadeInUp 0.6s ease-out forwards;
107
+ }
108
+ .project-info {
109
+ font-size: 20px;
110
+ }
111
+ .project-icon {
112
+ font-size: 24px;
113
+ color: #34495e;
114
+ margin-right: 20px;
115
+ width: 40px;
116
+ text-align: center;
117
+ }
118
+ .project-name {
119
+ font-weight: 700;
120
+ }
121
+
122
+ .project-risk-cell {
123
+ justify-content: center;
124
+ }
125
+
126
+ .risk-tooltip-wrapper {
127
+ position: relative;
128
+ display: flex;
129
+ align-items: center;
130
+ }
131
+ .risk-indicator {
132
+ width: 18px;
133
+ height: 18px;
134
+ border-radius: 50%;
135
+ flex-shrink: 0;
136
+ box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.2);
137
+ cursor: pointer;
138
+ }
139
+ .risk-high { background: linear-gradient(to bottom, #e74c3c, #c0392b); }
140
+ .risk-medium { background: linear-gradient(to bottom, #f39c12, #d35400); }
141
+ .risk-low { background: linear-gradient(to bottom, #2ecc71, #27ae60); }
142
+
143
+ .tooltip {
144
+ position: absolute;
145
+ bottom: 150%;
146
+ left: 50%;
147
+ transform: translateX(-50%);
148
+ background-color: #34495e;
149
+ color: #fff;
150
+ padding: 8px 12px;
151
+ border-radius: 5px;
152
+ white-space: nowrap;
153
+ font-size: 14px;
154
+ font-weight: 600;
155
+ box-shadow: 0 4px 8px rgba(0,0,0,0.2);
156
+ visibility: hidden;
157
+ opacity: 0;
158
+ transition: opacity 0.3s ease, transform 0.3s ease;
159
+ z-index: 10;
160
+ }
161
+ .tooltip::after {
162
+ content: '';
163
+ position: absolute;
164
+ top: 100%; left: 50%;
165
+ transform: translateX(-50%);
166
+ border-width: 5px; border-style: solid;
167
+ border-color: #34495e transparent transparent transparent;
168
+ }
169
+ .risk-tooltip-wrapper:hover .tooltip {
170
+ visibility: visible;
171
+ opacity: 1;
172
+ transform: translateX(-50%) translateY(-5px);
173
+ }
174
+
175
+ .project-gantt-container {
176
+ position: relative;
177
+ }
178
+
179
+ .gantt-bar {
180
+ position: absolute;
181
+ height: 28px;
182
+ top: 50%;
183
+ transform: translateY(-50%);
184
+ display: flex;
185
+ align-items: center;
186
+ gap: 2px;
187
+ transform-origin: left center;
188
+ animation: grow 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
189
+ }
190
+ .gantt-phase {
191
+ height: 100%;
192
+ flex-grow: 1;
193
+ border-radius: 3px;
194
+ display: flex;
195
+ align-items: center;
196
+ justify-content: center;
197
+ color: white;
198
+ font-size: 12px;
199
+ font-weight: 700;
200
+ white-space: nowrap;
201
+ overflow: hidden;
202
+ text-overflow: ellipsis;
203
+ padding: 0 5px;
204
+ }
205
+ .gantt-phase.init { background: #34495e; }
206
+ .gantt-phase.exec { background: #1abc9c; }
207
+ .gantt-phase.clot { background: #e67e22; }
208
+
209
+ .milestone-gem {
210
+ width: 20px;
211
+ height: 20px;
212
+ transform: rotate(45deg);
213
+ flex-shrink: 0;
214
+ background-image: radial-gradient(ellipse at center, #f39c12 0%, #e67e22 100%);
215
+ border: 1px solid #d35400;
216
+ box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
217
+ position: relative;
218
+ overflow: hidden;
219
+ border-radius: 2px;
220
+ }
221
+ .milestone-gem::after {
222
+ content: '';
223
+ position: absolute;
224
+ top: -50%; left: -150%;
225
+ width: 100%; height: 200%;
226
+ background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
227
+ transform: rotate(25deg);
228
+ animation: shimmer 4s infinite linear;
229
+ }
230
+
231
+ .pacs-philips { left: 0%; width: 25%; }
232
+ .decom-ge { left: 0%; width: 50%; }
233
+ .pacs2pacs { left: 0%; width: 100%; }
234
+ .migration-nexus { left: 0%; width: 75%; }
235
+ .ris { left: 0%; width: 100%; }
236
+ .interop { left: 0%; width: 50%; }
237
+ .ai { left: 0%; width: 75%; }
238
+ .mobile-fuji { left: 0%; width: 50%; }
239
+ .caresyntax { left: 0%; width: 75%; }
240
+ .senoiris { left: 0%; width: 100%; }
241
+ .echo-ri { left: 0%; width: 50%; }
242
+ .viewpoint-echopac { left: 0%; width: 100%; }
243
+
244
+ .decorative-element {
245
+ position: absolute; top: 50%; right: 60px;
246
+ transform: translateY(-50%); width: 50px; height: 50px;
247
+ background: rgba(255,255,255,0.2); border-radius: 50%;
248
+ display: flex; align-items: center; justify-content: center;
249
+ }
250
+ .decorative-element i { font-size: 26px; color: white; }
251
+
252
+ @keyframes fadeInUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
253
+ @keyframes grow { from { transform: scaleX(0) translateY(-50%); } to { transform: scaleX(1) translateY(-50%); } }
254
+ @keyframes shimmer { from { left: -150%; } to { left: 150%; } }
255
+
256
+ </style>
257
+ </head>
258
+ <body>
259
+ <div class="slide-container">
260
+ <!-- Header -->
261
+ <div class="header">
262
+ <h1 class="main-title">Programme imagerie m茅dicale 2025-2026</h1>
263
+ <div class="decorative-element">
264
+ <i class="fas fa-atom"></i>
265
+ </div>
266
+ </div>
267
+
268
+ <!-- Contenu Principal -->
269
+ <div class="content-area">
270
+ <div class="projects-section">
271
+ <div class="gantt-grid">
272
+ <!-- Ligne d'en-t锚te de la grille -->
273
+ <h2 class="gantt-column-title">Projets du programme</h2>
274
+ <h2 class="gantt-column-title center">Risques</h2>
275
+ <h2 class="gantt-column-title center">Roadmap</h2>
276
+
277
+ <div></div><div></div><!-- Cellules vides -->
278
+ <div class="gantt-header">
279
+ <div class="quarter-marker">T3 '25</div>
280
+ <div class="quarter-marker">T4 '25</div>
281
+ <div class="quarter-marker">T1 '26</div>
282
+ <div class="quarter-marker">T2 '26</div>
283
+ </div>
284
+
285
+ <!-- Lignes de projet -->
286
+ <div class="project-info" style="animation-delay: 0.2s;"><i class="fas fa-hdd project-icon"></i><span class="project-name">PACS PHILIPS</span></div>
287
+ <div class="project-risk-cell" style="animation-delay: 0.2s;"><div class="risk-tooltip-wrapper"><div class="risk-indicator risk-high"></div><div class="tooltip">Bascule non-DICOM</div></div></div>
288
+ <div class="project-gantt-container" style="animation-delay: 0.2s;"><div class="gantt-bar pacs-philips" style="animation-delay: 0.4s;"><div class="milestone-gem"></div><div class="gantt-phase clot">Cl么ture</div><div class="milestone-gem"></div></div></div>
289
+
290
+ <div class="project-info" style="animation-delay: 0.3s;"><i class="fas fa-trash-alt project-icon"></i><span class="project-name">D茅comissionnement GE</span></div>
291
+ <div class="project-risk-cell" style="animation-delay: 0.3s;"><div class="risk-tooltip-wrapper"><div class="risk-indicator risk-high"></div><div class="tooltip">Plus de maintenance apr猫s le 30/09</div></div></div>
292
+ <div class="project-gantt-container" style="animation-delay: 0.3s;"><div class="gantt-bar decom-ge" style="animation-delay: 0.5s;"><div class="milestone-gem"></div><div class="gantt-phase init">Initialisation</div><div class="milestone-gem"></div><div class="gantt-phase exec">Mise en 艙uvre</div><div class="milestone-gem"></div></div></div>
293
+
294
+ <div class="project-info" style="animation-delay: 0.4s;"><i class="fas fa-exchange-alt project-icon"></i><span class="project-name">Pacs2Pacs</span></div>
295
+ <div class="project-risk-cell" style="animation-delay: 0.4s;"><div class="risk-tooltip-wrapper"><div class="risk-indicator risk-medium"></div></div></div>
296
+ <div class="project-gantt-container" style="animation-delay: 0.4s;"><div class="gantt-bar pacs2pacs" style="animation-delay: 0.6s;"><div class="milestone-gem"></div><div class="gantt-phase init" style="flex-grow: 1;">Initialisation</div><div class="milestone-gem"></div><div class="gantt-phase exec" style="flex-grow: 2;">Mise en 艙uvre</div><div class="milestone-gem"></div><div class="gantt-phase clot" style="flex-grow: 1;">Cl么ture</div><div class="milestone-gem"></div></div></div>
297
+
298
+ <div class="project-info" style="animation-delay: 0.5s;"><i class="fas fa-database project-icon"></i><span class="project-name">Migration Nexus</span></div>
299
+ <div class="project-risk-cell" style="animation-delay: 0.5s;"><div class="risk-tooltip-wrapper"><div class="risk-indicator risk-medium"></div></div></div>
300
+ <div class="project-gantt-container" style="animation-delay: 0.5s;"><div class="gantt-bar migration-nexus" style="animation-delay: 0.7s;"><div class="milestone-gem"></div><div class="gantt-phase init">Initialisation</div><div class="milestone-gem"></div><div class="gantt-phase exec">Mise en 艙uvre</div><div class="milestone-gem"></div><div class="gantt-phase clot">Cl么ture</div><div class="milestone-gem"></div></div></div>
301
+
302
+ <div class="project-info" style="animation-delay: 0.6s;"><i class="fas fa-server project-icon"></i><span class="project-name">RIS Xplore</span></div>
303
+ <div class="project-risk-cell" style="animation-delay: 0.6s;"><div class="risk-tooltip-wrapper"><div class="risk-indicator risk-low"></div></div></div>
304
+ <div class="project-gantt-container" style="animation-delay: 0.6s;"><div class="gantt-bar ris" style="animation-delay: 0.8s;"><div class="milestone-gem"></div><div class="gantt-phase init">Initialisation</div><div class="milestone-gem"></div><div class="gantt-phase exec">Mise en 艙uvre</div><div class="milestone-gem"></div><div class="gantt-phase clot">Cl么ture</div><div class="milestone-gem"></div></div></div>
305
+
306
+ <div class="project-info" style="animation-delay: 0.7s;"><i class="fas fa-project-diagram project-icon"></i><span class="project-name">Interop. DxPlanning/PACS</span></div>
307
+ <div class="project-risk-cell" style="animation-delay: 0.7s;"><div class="risk-tooltip-wrapper"><div class="risk-indicator risk-medium"></div></div></div>
308
+ <div class="project-gantt-container" style="animation-delay: 0.7s;"><div class="gantt-bar interop" style="animation-delay: 0.9s;"><div class="milestone-gem"></div><div class="gantt-phase init">Initialisation</div><div class="milestone-gem"></div><div class="gantt-phase exec">Mise en 艙uvre</div><div class="milestone-gem"></div></div></div>
309
+
310
+ <div class="project-info" style="animation-delay: 0.8s;"><i class="fas fa-brain project-icon"></i><span class="project-name">PYLCLARI AI</span></div>
311
+ <div class="project-risk-cell" style="animation-delay: 0.8s;"><div class="risk-tooltip-wrapper"><div class="risk-indicator risk-low"></div></div></div>
312
+ <div class="project-gantt-container" style="animation-delay: 0.8s;"><div class="gantt-bar ai" style="animation-delay: 1s;"><div class="milestone-gem"></div><div class="gantt-phase init">Initialisation</div><div class="milestone-gem"></div><div class="gantt-phase exec">Mise en 艙uvre</div><div class="milestone-gem"></div></div></div>
313
+
314
+ <div class="project-info" style="animation-delay: 0.9s;"><i class="fas fa-mobile-alt project-icon"></i><span class="project-name">Mobile NANO Fujifilm</span></div>
315
+ <div class="project-risk-cell" style="animation-delay: 0.9s;"><div class="risk-tooltip-wrapper"><div class="risk-indicator risk-low"></div></div></div>
316
+ <div class="project-gantt-container" style="animation-delay: 0.9s;"><div class="gantt-bar mobile-fuji" style="animation-delay: 1.1s;"><div class="milestone-gem"></div><div class="gantt-phase init">Initialisation</div><div class="milestone-gem"></div><div class="gantt-phase exec">Mise en 艙uvre</div><div class="milestone-gem"></div></div></div>
317
+
318
+ <div class="project-info" style="animation-delay: 1.0s;"><i class="fas fa-video project-icon"></i><span class="project-name">caresyntax</span></div>
319
+ <div class="project-risk-cell" style="animation-delay: 1.0s;"><div class="risk-tooltip-wrapper"><div class="risk-indicator risk-medium"></div></div></div>
320
+ <div class="project-gantt-container" style="animation-delay: 1.0s;"><div class="gantt-bar caresyntax" style="animation-delay: 1.2s;"><div class="milestone-gem"></div><div class="gantt-phase init">Initialisation</div><div class="milestone-gem"></div><div class="gantt-phase exec">Mise en 艙uvre</div><div class="milestone-gem"></div></div></div>
321
+
322
+ <div class="project-info" style="animation-delay: 1.1s;"><i class="fas fa-ribbon project-icon"></i><span class="project-name">SenoIris</span></div>
323
+ <div class="project-risk-cell" style="animation-delay: 1.1s;"><div class="risk-tooltip-wrapper"><div class="risk-indicator risk-low"></div></div></div>
324
+ <div class="project-gantt-container" style="animation-delay: 1.1s;"><div class="gantt-bar senoiris" style="animation-delay: 1.3s;"><div class="milestone-gem"></div><div class="gantt-phase init">Initialisation</div><div class="milestone-gem"></div></div></div>
325
+
326
+ <div class="project-info" style="animation-delay: 1.2s;"><i class="fas fa-wave-square project-icon"></i><span class="project-name">D茅ploiement 3 Echo en RI</span></div>
327
+ <div class="project-risk-cell" style="animation-delay: 1.2s;"><div class="risk-tooltip-wrapper"><div class="risk-indicator risk-medium"></div></div></div>
328
+ <div class="project-gantt-container" style="animation-delay: 1.2s;"><div class="gantt-bar echo-ri" style="animation-delay: 1.4s;"><div class="milestone-gem"></div><div class="gantt-phase init">Initialisation</div><div class="milestone-gem"></div><div class="gantt-phase exec">Mise en 艙uvre</div><div class="milestone-gem"></div></div></div>
329
+
330
+ <div class="project-info" style="animation-delay: 1.3s;"><i class="fas fa-heartbeat project-icon"></i><span class="project-name">ViewPoint/EchoPAC</span></div>
331
+ <div class="project-risk-cell" style="animation-delay: 1.3s;"><div class="risk-tooltip-wrapper"><div class="risk-indicator risk-medium"></div></div></div>
332
+ <div class="project-gantt-container" style="animation-delay: 1.3s;"><div class="gantt-bar viewpoint-echopac" style="animation-delay: 1.5s;"><div class="milestone-gem"></div><div class="gantt-phase init">Initialisation</div><div class="milestone-gem"></div><div class="gantt-phase exec" style="flex-grow: 2;">Mise en 艙uvre</div><div class="milestone-gem"></div><div class="gantt-phase clot">Cl么ture</div><div class="milestone-gem"></div></div></div>
333
+
334
+ </div>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ <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/program" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
339
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ Am茅liorez cette page.
2
+ Modifiez la page afin qu'elle soit responsive et moderne.
3
+ Corrigez les styles afin d'avoir une page responsive.