Hugging Face's logo

Spaces:
bzouiri
/
cih-cardflow-tracker
Running

App Files Community
bzouiri commited on
Commit
dd177ff
·
verified ·
1 Parent(s): 908554d

je veux que tu supprime tous ce que ta fait et que tu me retourne que un hello world

Browse files
Files changed (1) hide show
  1. index.html +5 -905
index.html CHANGED
@@ -1,910 +1,10 @@
 
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>CIH CardFlow Tracker - Rapport d'Avancement</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <script src="https://unpkg.com/feather-icons"></script>
9
- <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
11
- <style>
12
- .gradient-bg {
13
- background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
14
- background-size: 400% 400%;
15
- animation: gradientBG 15s ease infinite;
16
- }
17
- @keyframes gradientBG {
18
- 0% {background-position: 0% 50%;}
19
- 50% {background-position: 100% 50%;}
20
- 100% {background-position: 0% 50%;}
21
- }
22
- .scrollbar-hide::-webkit-scrollbar {
23
- display: none;
24
- }
25
- .fade-in {
26
- animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
27
- opacity: 0;
28
- }
29
- @keyframes fadeIn {
30
- from { opacity: 0; transform: translateY(30px); }
31
- to { opacity: 1; transform: translateY(0); }
32
- }
33
- .card {
34
- transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
35
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
36
- transform-origin: center;
37
- }
38
- .card:hover {
39
- transform: translateY(-8px) scale(1.02);
40
- box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
41
- }
42
- .nav-item {
43
- transition: all 0.3s ease;
44
- position: relative;
45
- }
46
- .nav-item:after {
47
- content: '';
48
- position: absolute;
49
- bottom: 0;
50
- left: 50%;
51
- width: 0;
52
- height: 3px;
53
- background: #2563eb;
54
- transition: all 0.3s ease;
55
- }
56
- .nav-item:hover:after {
57
- width: 70%;
58
- left: 15%;
59
- }
60
- .nav-item.active {
61
- background-color: rgba(59, 130, 246, 0.1);
62
- }
63
- .nav-item.active:after {
64
- width: 100%;
65
- left: 0;
66
- }
67
- .pulse {
68
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
69
- }
70
- @keyframes pulse {
71
- 0%, 100% { opacity: 1; }
72
- 50% { opacity: 0.8; }
73
- }
74
- .float {
75
- animation: float 6s ease-in-out infinite;
76
- }
77
- @keyframes float {
78
- 0%, 100% { transform: translateY(0); }
79
- 50% { transform: translateY(-10px); }
80
- }
81
- </style>
82
  </head>
83
- <body class="bg-gray-50 font-sans">
84
- <!-- Header -->
85
- <header class="gradient-bg text-white shadow-lg">
86
- <div class="container mx-auto px-4 py-6">
87
- <div class="flex justify-between items-center">
88
- <div class="flex items-center space-x-4">
89
- <i data-feather="credit-card" class="w-10 h-10"></i>
90
- <div>
91
- <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-300 to-blue-600">CIH CardFlow Tracker</h1>
92
- <p class="text-blue-100 text-sm font-light">Module Générique de Gestion de Cartes Multi-Banques</p>
93
- </div>
94
- </div>
95
- <div class="flex items-center space-x-4">
96
- <div class="bg-white/20 rounded-full px-4 py-2 flex items-center pulse">
97
- <span class="mr-2">Statut:</span>
98
- <span class="font-bold bg-yellow-500 rounded-full px-2 py-1 text-xs animate-bounce">En Phase de Lancement</span>
99
- </div>
100
- <button class="bg-white text-blue-600 px-4 py-2 rounded-lg font-medium hover:bg-blue-50 transition flex items-center space-x-2 shadow-sm hover:shadow-md">
101
- <i data-feather="download" class="w-4 h-4"></i>
102
- <span>Télécharger PDF</span>
103
- </button>
104
- </div>
105
- </div>
106
- </div>
107
- </header>
108
- <!-- Dashboard Navigation -->
109
- <nav class="bg-white shadow-md">
110
- <div class="container mx-auto px-4">
111
- <div class="flex overflow-x-auto scrollbar-hide">
112
- <a href="#executive-summary" class="px-6 py-4 font-medium text-blue-600 border-b-2 border-blue-600 hover:bg-blue-50 transition duration-300 flex items-center space-x-2">
113
- <i data-feather="file-text" class="w-4 h-4"></i>
114
- <span>Résumé Exécutif</span>
115
- </a>
116
- <a href="#dashboard" class="px-6 py-4 font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50 transition duration-300 flex items-center space-x-2">
117
- <i data-feather="bar-chart-2" class="w-4 h-4"></i>
118
- <span>Tableau de Bord</span>
119
- </a>
120
- <a href="#objectives" class="px-6 py-4 font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50 transition duration-300 flex items-center space-x-2">
121
- <i data-feather="target" class="w-4 h-4"></i>
122
- <span>Objectifs & Périmètre</span>
123
- </a>
124
- <a href="#progress" class="px-6 py-4 font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50 transition duration-300 flex items-center space-x-2">
125
- <i data-feather="trending-up" class="w-4 h-4"></i>
126
- <span>Avancement Détail</span>
127
- </a>
128
- <a href="#risks" class="px-6 py-4 font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50 transition duration-300 flex items-center space-x-2">
129
- <i data-feather="alert-triangle" class="w-4 h-4"></i>
130
- <span>Gestion des Risques</span>
131
- </a>
132
- <a href="#budget" class="px-6 py-4 font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50 transition duration-300 flex items-center space-x-2">
133
- <i data-feather="dollar-sign" class="w-4 h-4"></i>
134
- <span>Budget</span>
135
- </a>
136
- <a href="#communication" class="px-6 py-4 font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50 transition duration-300 flex items-center space-x-2">
137
- <i data-feather="message-square" class="w-4 h-4"></i>
138
- <span>Communication</span>
139
- </a>
140
- </div>
141
- </div>
142
- </nav>
143
- <!-- Main Content -->
144
- <main class="container mx-auto px-4 py-8">
145
- <!-- Summary Cards -->
146
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
147
- <div class="bg-white rounded-xl shadow-md p-6 fade-in card group" onclick="window.location.href='#budget'">
148
- <div class="flex justify-between items-start">
149
- <div>
150
- <p class="text-gray-500">Budget Consommé</p>
151
- <h3 class="text-3xl font-bold mt-2 group-hover:text-blue-600 transition">0%</h3>
152
- </div>
153
- <div class="bg-blue-100 text-blue-600 p-2 rounded-full group-hover:bg-blue-200 transition">
154
- <i data-feather="dollar-sign" class="w-5 h-5"></i>
155
- </div>
156
- </div>
157
- <div class="mt-4">
158
- <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
159
- <div class="h-full bg-blue-500 rounded-full" style="width: 0%"></div>
160
- </div>
161
- <p class="text-xs text-gray-500 mt-2">205k HT restant (Total: 205k HT)</p>
162
- </div>
163
- </div>
164
- <div class="bg-white rounded-xl shadow-md p-6 fade-in">
165
- <div class="flex justify-between items-start">
166
- <div>
167
- <p class="text-gray-500">Risques Actifs</p>
168
- <h3 class="text-3xl font-bold mt-2">8</h3>
169
- </div>
170
- <div class="bg-yellow-100 text-yellow-600 p-2 rounded-full">
171
- <i data-feather="alert-triangle" class="w-5 h-5"></i>
172
- </div>
173
- </div>
174
- <p class="text-xs text-gray-500 mt-4">1 critique, 3 élevés</p>
175
- </div>
176
-
177
- <div class="bg-white rounded-xl shadow-md p-6 fade-in">
178
- <div class="flex justify-between items-start">
179
- <div>
180
- <p class="text-gray-500">Satisfaction Client</p>
181
- <h3 class="text-3xl font-bold mt-2">4.8/5</h3>
182
- </div>
183
- <div class="bg-purple-100 text-purple-600 p-2 rounded-full">
184
- <i data-feather="smile" class="w-5 h-5"></i>
185
- </div>
186
- </div>
187
- <p class="text-xs text-gray-500 mt-4">SFD validé par DG</p>
188
- </div>
189
- </div>
190
- <!-- Executive Summary -->
191
- <section id="executive-summary" class="bg-white rounded-xl shadow-lg p-8 mb-8 fade-in">
192
- <div class="flex justify-between items-center mb-6">
193
- <h2 class="text-xl font-bold text-gray-800">
194
- <i data-feather="file-text" class="inline mr-2 w-5 h-5"></i>
195
- Résumé Exécutif
196
- </h2>
197
- <span class="text-sm text-blue-600 font-medium">20 Octobre 2025</span>
198
- </div>
199
-
200
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
201
- <div class="lg:col-span-2">
202
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
203
- <div class="border-l-4 border-blue-500 pl-4">
204
- <h3 class="font-medium text-gray-700">Client</h3>
205
- <p class="text-gray-900 font-bold">CIH Bank - Direction Générale Adjointe</p>
206
- </div>
207
- <div class="border-l-4 border-blue-500 pl-4">
208
- <h3 class="font-medium text-gray-700">Échéance Critique</h3>
209
- <p class="text-gray-900 font-bold">CAN 2025 (Nov-Déc 2025)</p>
210
- </div>
211
- <div class="border-l-4 border-blue-500 pl-4">
212
- <h3 class="font-medium text-gray-700">Budget Approuvé</h3>
213
- <p class="text-gray-900 font-bold">Phase 1 (4 semaines intensives)</p>
214
- </div>
215
- <div class="border-l-4 border-blue-500 pl-4">
216
- <h3 class="font-medium text-gray-700">Niveau de Risque Global</h3>
217
- <p class="text-gray-900 font-bold">MOYEN (avec mitigations actives)</p>
218
- </div>
219
- </div>
220
-
221
- <div class="mb-6">
222
- <h3 class="font-bold text-lg mb-2 flex items-center">
223
- <span class="bg-green-100 text-green-600 rounded-full p-1 mr-2">
224
- <i data-feather="check" class="w-4 h-4"></i>
225
- </span>
226
- Accomplissements Majeurs
227
- </h3>
228
- <ul class="list-disc pl-5 space-y-2 text-gray-700">
229
- <li>Documentation technique complète (20 documents, 9500+ lignes)</li>
230
- <li>Architecture hybride validée (ABP Microservices + Extension MVC Fawri)</li>
231
- <li>Équipe constituée et formée (4 experts : Haytam, Anouar, Mohamed, Badr)</li>
232
- <li>SFD et Proposition commerciale approuvés par DG Brahim Zekhnini</li>
233
- </ul>
234
- </div>
235
- </div>
236
- <div class="space-y-6">
237
- <div>
238
- <h3 class="font-bold text-lg mb-4">Indicateurs Clés</h3>
239
- <canvas id="kpiChart" height="250"></canvas>
240
- </div>
241
- <div>
242
- <h3 class="font-bold text-lg mb-4">Timeline des Livraisons</h3>
243
- <canvas id="timelineChart" height="150"></canvas>
244
- </div>
245
- </div>
246
- </div>
247
-
248
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
249
- <div class="bg-blue-50 rounded-lg p-4">
250
- <h3 class="font-bold text-lg mb-2 flex items-center text-blue-700">
251
- <span class="bg-blue-200 text-blue-700 rounded-full p-1 mr-2">
252
- <i data-feather="refresh-cw" class="w-4 h-4"></i>
253
- </span>
254
- En Cours
255
- </h3>
256
- <ul class="list-disc pl-5 space-y-2 text-blue-800">
257
- <li>Validation contractuelle finale et signature</li>
258
- <li>Attente accès APIs processeur CIH Bank</li>
259
- <li>Setup environnements techniques DEV/TEST/PROD</li>
260
- </ul>
261
- </div>
262
-
263
- <div class="bg-yellow-50 rounded-lg p-4">
264
- <h3 class="font-bold text-lg mb-2 flex items-center text-yellow-700">
265
- <span class="bg-yellow-200 text-yellow-700 rounded-full p-1 mr-2">
266
- <i data-feather="alert-triangle" class="w-4 h-4"></i>
267
- </span>
268
- Points d'Attention
269
- </h3>
270
- <ul class="list-disc pl-5 space-y-2 text-yellow-800">
271
- <li>Extension de scope (CIH → Module générique CIH + LC Bank + WePay)</li>
272
- <li>Délai accès APIs CIH Bank (risque sur date de démarrage)</li>
273
- <li>Impact nouvelles exigences sur échéance CAN 2025</li>
274
- </ul>
275
- </div>
276
- </div>
277
- </section>
278
- <!-- Progress by Phase -->
279
- <section id="progress" class="bg-white rounded-xl shadow-lg p-8 mb-8 fade-in">
280
- <h2 class="text-xl font-bold text-gray-800 mb-6">
281
- <i data-feather="trending-up" class="inline mr-2 w-5 h-5"></i>
282
- Avancement par Phase
283
- </h2>
284
-
285
- <div class="mb-8">
286
- <h3 class="font-bold text-lg mb-4">Phase 1 : MVP CAN 2025 (4 semaines - Oct-Nov 2025)</h3>
287
- <div class="overflow-x-auto">
288
- <table class="min-w-full divide-y divide-gray-200">
289
- <thead class="bg-gray-50">
290
- <tr>
291
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Semaine</th>
292
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Focus</th>
293
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Livrables Clés</th>
294
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
295
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avancement</th>
296
- </tr>
297
- </thead>
298
- <tbody class="bg-white divide-y divide-gray-200">
299
- <tr>
300
- <td class="px-6 py-4 whitespace-nowrap">Semaine 1</td>
301
- <td class="px-6 py-4 whitespace-nowrap">Setup & Architecture</td>
302
- <td class="px-6 py-4">Infrastructure + OAuth2 CIH</td>
303
- <td class="px-6 py-4 whitespace-nowrap">
304
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">PLANIFIÉ</span>
305
- </td>
306
- <td class="px-6 py-4 whitespace-nowrap">
307
- <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
308
- <div class="h-full bg-blue-500 rounded-full" style="width: 0%"></div>
309
- </div>
310
- </td>
311
- </tr>
312
- <tr class="bg-gray-50">
313
- <td class="px-6 py-4 whitespace-nowrap">Semaine 2</td>
314
- <td class="px-6 py-4 whitespace-nowrap">Commande & Réception</td>
315
- <td class="px-6 py-4">APIs order/reception + UI Agent</td>
316
- <td class="px-6 py-4 whitespace-nowrap">
317
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">PLANIFIÉ</span>
318
- </td>
319
- <td class="px-6 py-4 whitespace-nowrap">
320
- <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
321
- <div class="h-full bg-blue-500 rounded-full" style="width: 0%"></div>
322
- </div>
323
- </td>
324
- </tr>
325
- <tr>
326
- <td class="px-6 py-4 whitespace-nowrap">Semaine 3</td>
327
- <td class="px-6 py-4 whitespace-nowrap">Activation & KYC</td>
328
- <td class="px-6 py-4">APIs activate + Interface KYC</td>
329
- <td class="px-6 py-4 whitespace-nowrap">
330
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">PLANIFIÉ</span>
331
- </td>
332
- <td class="px-6 py-4 whitespace-nowrap">
333
- <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
334
- <div class="h-full bg-blue-500 rounded-full" style="width: 0%"></div>
335
- </div>
336
- </td>
337
- </tr>
338
- <tr class="bg-gray-50">
339
- <td class="px-6 py-4 whitespace-nowrap">Semaine 4</td>
340
- <td class="px-6 py-4 whitespace-nowrap">Recharge & Finalisation</td>
341
- <td class="px-6 py-4">API reload + Go-live Production</td>
342
- <td class="px-6 py-4 whitespace-nowrap">
343
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">PLANIFIÉ</span>
344
- </td>
345
- <td class="px-6 py-4 whitespace-nowrap">
346
- <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
347
- <div class="h-full bg-blue-500 rounded-full" style="width: 0%"></div>
348
- </div>
349
- </td>
350
- </tr>
351
- </tbody>
352
- </table>
353
- </div>
354
- <p class="text-sm text-gray-500 mt-2">Avancement Global Phase 1 : 0% (Démarrage imminent)</p>
355
- </div>
356
-
357
- <div>
358
- <h3 class="font-bold text-lg mb-4">Phase Documentation & Préparation (Septembre-Octobre 2025)</h3>
359
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
360
- <div class="border-l-4 border-green-500 pl-4 py-2 bg-green-50">
361
- <h4 class="font-medium">Plan Stratégique Global</h4>
362
- <div class="flex justify-between items-center mt-1">
363
- <span class="text-sm text-green-700">15 Oct 2025</span>
364
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">COMPLÉTÉ</span>
365
- </div>
366
- </div>
367
- <div class="border-l-4 border-green-500 pl-4 py-2 bg-green-50">
368
- <h4 class="font-medium">SFD - Spécifications Fonctionnelles</h4>
369
- <div class="flex justify-between items-center mt-1">
370
- <span class="text-sm text-green-700">20 Sept 2025</span>
371
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">VALIDÉ DG</span>
372
- </div>
373
- </div>
374
- <div class="border-l-4 border-green-500 pl-4 py-2 bg-green-50">
375
- <h4 class="font-medium">STD - Spécifications Techniques</h4>
376
- <div class="flex justify-between items-center mt-1">
377
- <span class="text-sm text-green-700">25 Sept 2025</span>
378
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">COMPLÉTÉ</span>
379
- </div>
380
- </div>
381
- <div class="border-l-4 border-green-500 pl-4 py-2 bg-green-50">
382
- <h4 class="font-medium">Architecture Multi-Banques</h4>
383
- <div class="flex justify-between items-center mt-1">
384
- <span class="text-sm text-green-700">10 Oct 2025</span>
385
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">COMPLÉTÉ</span>
386
- </div>
387
- </div>
388
- <div class="border-l-4 border-green-500 pl-4 py-2 bg-green-50">
389
- <h4 class="font-medium">Workflows Hebdomadaires (4 semaines)</h4>
390
- <div class="flex justify-between items-center mt-1">
391
- <span class="text-sm text-green-700">15 Oct 2025</span>
392
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">COMPLÉTÉ</span>
393
- </div>
394
- </div>
395
- <div class="border-l-4 border-green-500 pl-4 py-2 bg-green-50">
396
- <h4 class="font-medium">Gestion Risques Détaillée</h4>
397
- <div class="flex justify-between items-center mt-1">
398
- <span class="text-sm text-green-700">12 Oct 2025</span>
399
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">COMPLÉTÉ</span>
400
- </div>
401
- </div>
402
- </div>
403
- <p class="text-sm text-gray-500 mt-4">Avancement Phase Documentation : 100% ✅</p>
404
- </div>
405
- </section>
406
- <!-- Team Performance -->
407
- <section id="team-performance" class="bg-white rounded-xl shadow-lg p-8 mb-8 fade-in">
408
- <h2 class="text-xl font-bold text-gray-800 mb-6">
409
- <i data-feather="users" class="inline mr-2 w-5 h-5"></i>
410
- Performance par Équipe
411
- </h2>
412
-
413
- <div class="mb-8 overflow-x-auto">
414
- <table class="min-w-full divide-y divide-gray-200">
415
- <thead class="bg-gray-50">
416
- <tr>
417
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Membre</th>
418
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rôle</th>
419
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Heures/sem</th>
420
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Productivité</th>
421
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Capacité Effective</th>
422
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
423
- </tr>
424
- </thead>
425
- <tbody class="bg-white divide-y divide-gray-200">
426
- <tr>
427
- <td class="px-6 py-4 whitespace-nowrap font-medium">Haytam Benhammou</td>
428
- <td class="px-6 py-4 whitespace-nowrap">Tech Lead ABP</td>
429
- <td class="px-6 py-4 whitespace-nowrap">20h</td>
430
- <td class="px-6 py-4 whitespace-nowrap">×2.5</td>
431
- <td class="px-6 py-4 whitespace-nowrap">50h équivalent</td>
432
- <td class="px-6 py-4 whitespace-nowrap">
433
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">DISPONIBLE</span>
434
- </td>
435
- </tr>
436
- <tr class="bg-gray-50">
437
- <td class="px-6 py-4 whitespace-nowrap font-medium">Anouar Benmoumen</td>
438
- <td class="px-6 py-4 whitespace-nowrap">Backend ABP</td>
439
- <td class="px-6 py-4 whitespace-nowrap">30h</td>
440
- <td class="px-6 py-4 whitespace-nowrap">×3.0</td>
441
- <td class="px-6 py-4 whitespace-nowrap">90h équivalent</td>
442
- <td class="px-6 py-4 whitespace-nowrap">
443
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">DISPONIBLE</span>
444
- </td>
445
- </tr>
446
- <tr>
447
- <td class="px-6 py-4 whitespace-nowrap font-medium">Mohamed Tantaoui</td>
448
- <td class="px-6 py-4 whitespace-nowrap">Fullstack MVC+ABP</td>
449
- <td class="px-6 py-4 whitespace-nowrap">40h</td>
450
- <td class="px-6 py-4 whitespace-nowrap">×5.0</td>
451
- <td class="px-6 py-4 whitespace-nowrap">200h équivalent</td>
452
- <td class="px-6 py-4 whitespace-nowrap">
453
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">DISPONIBLE</span>
454
- </td>
455
- </tr>
456
- <tr class="bg-gray-50">
457
- <td class="px-6 py-4 whitespace-nowrap font-medium">Badr Zouiri</td>
458
- <td class="px-6 py-4 whitespace-nowrap">IA + Support</td>
459
- <td class="px-6 py-4 whitespace-nowrap">5h</td>
460
- <td class="px-6 py-4 whitespace-nowrap">×6 impact</td>
461
- <td class="px-6 py-4 whitespace-nowrap">30h équivalent</td>
462
- <td class="px-6 py-4 whitespace-nowrap">
463
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">DISPONIBLE</span>
464
- </td>
465
- </tr>
466
- </tbody>
467
- <tfoot class="bg-gray-100 font-bold">
468
- <tr>
469
- <td class="px-6 py-4 whitespace-nowrap">TOTAL ÉQUIPE</td>
470
- <td class="px-6 py-4 whitespace-nowrap">-</td>
471
- <td class="px-6 py-4 whitespace-nowrap">95h</td>
472
- <td class="px-6 py-4 whitespace-nowrap">×3.89</td>
473
- <td class="px-6 py-4 whitespace-nowrap">370h équivalent</td>
474
- <td class="px-6 py-4 whitespace-nowrap">
475
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">OPTIMAL</span>
476
- </td>
477
- </tr>
478
- </tfoot>
479
- </table>
480
- </div>
481
-
482
- <div class="bg-blue-50 rounded-lg p-4">
483
- <p class="text-blue-800">
484
- <span class="font-bold">Note:</span> La productivité exceptionnelle de Mohamed (×5) est due à sa maîtrise complète de l'architecture B3G.Fawri.Wallet.Web.Agence (6 ans d'expérience) permettant une extension optimisée plutôt qu'un développement from scratch.
485
- </p>
486
- </div>
487
- </section>
488
- <!-- Risk Management -->
489
- <section id="risks" class="bg-white rounded-xl shadow-lg p-8 mb-8 fade-in">
490
- <h2 class="text-xl font-bold text-gray-800 mb-6">
491
- <i data-feather="alert-triangle" class="inline mr-2 w-5 h-5"></i>
492
- Gestion des Risques
493
- </h2>
494
-
495
- <div class="mb-8">
496
- <h3 class="font-bold text-lg mb-4">Matrice des Risques Actifs</h3>
497
- <div class="overflow-x-auto">
498
- <table class="min-w-full divide-y divide-gray-200">
499
- <thead class="bg-gray-50">
500
- <tr>
501
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
502
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Risque</th>
503
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Probabilité</th>
504
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Impact</th>
505
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Score</th>
506
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
507
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Mitigation</th>
508
- </tr>
509
- </thead>
510
- <tbody class="bg-white divide-y divide-gray-200">
511
- <tr>
512
- <td class="px-6 py-4 whitespace-nowrap font-bold">R001</td>
513
- <td class="px-6 py-4">Spécifications APIs CIH incomplètes</td>
514
- <td class="px-6 py-4 whitespace-nowrap">60%</td>
515
- <td class="px-6 py-4 whitespace-nowrap">9/10</td>
516
- <td class="px-6 py-4 whitespace-nowrap">
517
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">CRITIQUE</span>
518
- </td>
519
- <td class="px-6 py-4 whitespace-nowrap">
520
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">ACTIF</span>
521
- </td>
522
- <td class="px-6 py-4">Mocks + Feature flags</td>
523
- </tr>
524
- <tr class="bg-gray-50">
525
- <td class="px-6 py-4 whitespace-nowrap font-bold">R002</td>
526
- <td class="px-6 py-4">Échec go-live CAN 2025</td>
527
- <td class="px-6 py-4 whitespace-nowrap">25%</td>
528
- <td class="px-6 py-4 whitespace-nowrap">10/10</td>
529
- <td class="px-6 py-4 whitespace-nowrap">
530
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">CRITIQUE</span>
531
- </td>
532
- <td class="px-6 py-4 whitespace-nowrap">
533
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">SOUS CONTRÔLE</span>
534
- </td>
535
- <td class="px-6 py-4">Tests rigoureux</td>
536
- </tr>
537
- <tr>
538
- <td class="px-6 py-4 whitespace-nowrap font-bold">R003</td>
539
- <td class="px-6 py-4">Communication Hamza Bennis</td>
540
- <td class="px-6 py-4 whitespace-nowrap">50%</td>
541
- <td class="px-6 py-4 whitespace-nowrap">6/10</td>
542
- <td class="px-6 py-4 whitespace-nowrap">
543
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">ÉLEVÉ</span>
544
- </td>
545
- <td class="px-6 py-4 whitespace-nowrap">
546
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">SURVEILLÉ</span>
547
- </td>
548
- <td class="px-6 py-4">Escalation DG</td>
549
- </tr>
550
- </tbody>
551
- </table>
552
- </div>
553
- </div>
554
-
555
- <div>
556
- <h3 class="font-bold text-lg mb-4">Actions de Mitigation en Cours</h3>
557
-
558
- <div class="mb-6">
559
- <h4 class="font-bold text-red-700 mb-2 flex items-center">
560
- <span class="bg-red-100 text-red-700 rounded-full p-1 mr-2">
561
- <i data-feather="alert-circle" class="w-4 h-4"></i>
562
- </span>
563
- Risques Critiques
564
- </h4>
565
- <div class="pl-6">
566
- <h5 class="font-medium text-gray-800 mb-1">R001 - Spécifications APIs CIH Incomplètes</h5>
567
- <ul class="list-disc pl-5 space-y-1 text-gray-700">
568
- <li><span class="font-medium">Action 1:</span> Mocks CIH développés pour tests indépendants (Prêt Sprint 1)</li>
569
- <li><span class="font-medium">Action 2:</span> Feature flags implémentés pour activation progressive</li>
570
- <li><span class="font-medium">Action 3:</span> Mode dégradé défini (opération manuelle fallback)</li>
571
- <li><span class="font-medium">Action 4:</span> Escalation Faycal → Hamza → Brahim en cours</li>
572
- </ul>
573
- </div>
574
- </div>
575
-
576
- <div class="mb-6">
577
- <h4 class="font-bold text-yellow-700 mb-2 flex items-center">
578
- <span class="bg-yellow-100 text-yellow-700 rounded-full p-1 mr-2">
579
- <i data-feather="alert-octagon" class="w-4 h-4"></i>
580
- </span>
581
- Risques Élevés
582
- </h4>
583
- <div class="pl-6">
584
- <h5 class="font-medium text-gray-800 mb-1">R003 - Communication Hamza Bennis</h5>
585
- <ul class="list-disc pl-5 space-y-1 text-gray-700">
586
- <li><span class="font-medium">Action 1:</span> Canaux multiples : Email + WhatsApp + Téléphone</li>
587
- <li><span class="font-medium">Action 2:</span> Relais Ayoub Elkouzaay activé (backup)</li>
588
- <li><span class="font-medium">Action 3:</span> Escalation DG Brahim si >48h sans réponse</li>
589
- </ul>
590
- </div>
591
- </div>
592
-
593
- <div>
594
- <h4 class="font-bold text-gray-800 mb-2">Procédures d'Escalation</h4>
595
- <div class="overflow-x-auto">
596
- <table class="min-w-full divide-y divide-gray-200">
597
- <thead class="bg-gray-50">
598
- <tr>
599
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Niveau</th>
600
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Délai</th>
601
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Responsable</th>
602
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
603
- </tr>
604
- </thead>
605
- <tbody class="bg-white divide-y divide-gray-200">
606
- <tr>
607
- <td class="px-6 py-4 whitespace-nowrap">Niveau 1 - Technique</td>
608
- <td class="px-6 py-4 whitespace-nowrap">&lt;2h</td>
609
- <td class="px-6 py-4 whitespace-nowrap">Équipe → Haytam</td>
610
- <td class="px-6 py-4">Résolution interne</td>
611
- </tr>
612
- <tr class="bg-gray-50">
613
- <td class="px-6 py-4 whitespace-nowrap">Niveau 2 - Projet</td>
614
- <td class="px-6 py-4 whitespace-nowrap">2h-4h</td>
615
- <td class="px-6 py-4 whitespace-nowrap">Haytam → Faycal</td>
616
- <td class="px-6 py-4">Décision projet</td>
617
- </tr>
618
- <tr>
619
- <td class="px-6 py-4 whitespace-nowrap">Niveau 3 - Client</td>
620
- <td class="px-6 py-4 whitespace-nowrap">4h-6h</td>
621
- <td class="px-6 py-4 whitespace-nowrap">Faycal → Brahim</td>
622
- <td class="px-6 py-4">Validation DG</td>
623
- </tr>
624
- <tr class="bg-gray-50">
625
- <td class="px-6 py-4 whitespace-nowrap">Niveau 4 - Crise</td>
626
- <td class="px-6 py-4 whitespace-nowrap">&lt;1h</td>
627
- <td class="px-6 py-4 whitespace-nowrap">Mobilisation complète</td>
628
- <td class="px-6 py-4">War room</td>
629
- </tr>
630
- </tbody>
631
- </table>
632
- </div>
633
- </div>
634
- </div>
635
- </section>
636
- <!-- Next Steps -->
637
- <section id="next-steps" class="bg-white rounded-xl shadow-lg p-8 fade-in">
638
- <h2 class="text-xl font-bold text-gray-800 mb-6">
639
- <i data-feather="list" class="inline mr-2 w-5 h-5"></i>
640
- Prochaines Étapes Immédiates
641
- </h2>
642
-
643
- <div class="mb-6">
644
- <h3 class="font-bold text-lg mb-4">Actions Urgentes (Cette Semaine - 20-26 Oct 2025)</h3>
645
- <div class="overflow-x-auto">
646
- <table class="min-w-full divide-y divide-gray-200">
647
- <thead class="bg-gray-50">
648
- <tr>
649
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
650
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
651
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Responsable</th>
652
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Échéance</th>
653
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Priorité</th>
654
- <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
655
- </tr>
656
- </thead>
657
- <tbody class="bg-white divide-y divide-gray-200">
658
- <tr>
659
- <td class="px-6 py-4 whitespace-nowrap font-medium">A1</td>
660
- <td class="px-6 py-4">📞 Call DG Brahim - Validation contractuelle finale</td>
661
- <td class="px-6 py-4 whitespace-nowrap">Faycal</td>
662
- <td class="px-6 py-4 whitespace-nowrap">21 Oct 2025</td>
663
- <td class="px-6 py-4 whitespace-nowrap">
664
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">CRITIQUE</span>
665
- </td>
666
- <td class="px-6 py-4 whitespace-nowrap">
667
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">EN COURS</span>
668
- </td>
669
- </tr>
670
- <tr class="bg-gray-50">
671
- <td class="px-6 py-4 whitespace-nowrap font-medium">A2</td>
672
- <td class="px-6 py-4">📞 Escalation Hamza Bennis - Accès APIs CIH urgent</td>
673
- <td class="px-6 py-4 whitespace-nowrap">Faycal</td>
674
- <td class="px-6 py-4 whitespace-nowrap">22 Oct 2025</td>
675
- <td class="px-6 py-4 whitespace-nowrap">
676
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">CRITIQUE</span>
677
- </td>
678
- <td class="px-6 py-4 whitespace-nowrap">
679
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">PLANIFIÉ</span>
680
- </td>
681
- </tr>
682
- <tr>
683
- <td class="px-6 py-4 whitespace-nowrap font-medium">A3</td>
684
- <td class="px-6 py-4">📝 Confirmation timeline CAN 2025 vs Multi-banques</td>
685
- <td class="px-6 py-4 whitespace-nowrap">Faycal + Haytam</td>
686
- <td class="px-6 py-4 whitespace-nowrap">23 Oct 2025</td>
687
- <td class="px-6 py-4 whitespace-nowrap">
688
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">CRITIQUE</span>
689
- </td>
690
- <td class="px-6 py-4 whitespace-nowrap">
691
- <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">PLANIFIÉ</span>
692
- </td>
693
- </tr>
694
- </tbody>
695
- </table>
696
- </div>
697
- </div>
698
-
699
- <div>
700
- <h3 class="font-bold text-lg mb-4">Semaine Prochaine (28 Oct - 1 Nov 2025)</h3>
701
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
702
- <div class="bg-blue-50 rounded-lg p-4">
703
- <h4 class="font-bold text-blue-700 flex items-center">
704
- <span class="bg-blue-200 text-blue-700 rounded-full p-1 mr-2">
705
- <i data-feather="calendar" class="w-4 h-4"></i>
706
- </span>
707
- 28 Oct
708
- </h4>
709
- <p class="mt-2 text-blue-800">🚀 Kick-Off Officiel Projet</p>
710
- <p class="text-xs text-blue-700 mt-1">Briefing + Setup Envs</p>
711
- </div>
712
- <div class="bg-blue-50 rounded-lg p-4">
713
- <h4 class="font-bold text-blue-700 flex items-center">
714
- <span class="bg-blue-200 text-blue-700 rounded-full p-1 mr-2">
715
- <i data-feather="calendar" class="w-4 h-4"></i>
716
- </span>
717
- 29 Oct
718
- </h4>
719
- <p class="mt-2 text-blue-800">🔧 Architecture Technique</p>
720
- <p class="text-xs text-blue-700 mt-1">OAuth2 + DB + Mocks</p>
721
- </div>
722
- <div class="bg-blue-50 rounded-lg p-4">
723
- <h4 class="font-bold text-blue-700 flex items-center">
724
- <span class="bg-blue-200 text-blue-700 rounded-full p-1 mr-2">
725
- <i data-feather="calendar" class="w-4 h-4"></i>
726
- </span>
727
- 30 Oct
728
- </h4>
729
- <p class="mt-2 text-blue-800">⚙️ Infrastructure Ready</p>
730
- <p class="text-xs text-blue-700 mt-1">CI/CD + Tests Connectivité</p>
731
- </div>
732
- <div class="bg-blue-50 rounded-lg p-4">
733
- <h4 class="font-bold text-blue-700 flex items-center">
734
- <span class="bg-blue-200 text-blue-700 rounded-full p-1 mr-2">
735
- <i data-feather="calendar" class="w-4 h-4"></i>
736
- </span>
737
- 31 Oct
738
- </h4>
739
- <p class="mt-2 text-blue-800">💻 Développement Domain Layer</p>
740
- <p class="text-xs text-blue-700 mt-1">Entities + Services</p>
741
- </div>
742
- <div class="bg-blue-100 rounded-lg p-4">
743
- <h4 class="font-bold text-blue-800 flex items-center">
744
- <span class="bg-blue-300 text-blue-800 rounded-full p-1 mr-2">
745
- <i data-feather="star" class="w-4 h-4"></i>
746
- </span>
747
- 1 Nov
748
- </h4>
749
- <p class="mt-2 text-blue-900">🎯 DÉMO 1 au DG</p>
750
- <p class="text-xs text-blue-800 mt-1">Architecture Validée</p>
751
- </div>
752
- </div>
753
- </div>
754
- </section>
755
- </main>
756
-
757
- <!-- Footer -->
758
- <footer class="bg-gradient-to-r from-gray-800 to-gray-900 text-white py-10">
759
- <div class="container mx-auto px-4">
760
- <div class="flex flex-col md:flex-row justify-between items-center">
761
- <div class="mb-4 md:mb-0">
762
- <h3 class="text-xl font-bold">CIH CardFlow Tracker</h3>
763
- <p class="text-gray-400">Module Générique de Gestion de Cartes Multi-Banques</p>
764
- </div>
765
- <div class="flex items-center space-x-4">
766
- <span class="text-gray-400">Version 1.0</span>
767
- <span class="text-gray-400">20 Octobre 2025</span>
768
- <span class="bg-gray-700 text-gray-300 px-2 py-1 rounded text-xs">Confidentiel - Usage Interne B3G</span>
769
- </div>
770
- </div>
771
- <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
772
- <p>© 2025 B3G Technologies. Tous droits réservés.</p>
773
- <p class="mt-1">Prochain rapport prévu le 27 Octobre 2025</p>
774
- </div>
775
- </div>
776
- </footer>
777
- <script>
778
- feather.replace();
779
-
780
- // Scroll animations
781
- const animateOnScroll = () => {
782
- const elements = document.querySelectorAll('.fade-in');
783
- elements.forEach(el => {
784
- const elementTop = el.getBoundingClientRect().top;
785
- const elementVisible = 150;
786
-
787
- if (elementTop < window.innerHeight - elementVisible) {
788
- el.style.opacity = '1';
789
- }
790
- });
791
- };
792
-
793
- window.addEventListener('scroll', animateOnScroll);
794
- document.addEventListener('DOMContentLoaded', animateOnScroll);
795
- // Charts
796
- const kpiCtx = document.getElementById('kpiChart').getContext('2d');
797
- const timelineCtx = document.getElementById('timelineChart').getContext('2d');
798
-
799
- // Timeline Chart
800
- const timelineChart = new Chart(timelineCtx, {
801
- type: 'bar',
802
- data: {
803
- labels: ['Doc', 'Arch', 'Sprint 1', 'Sprint 2', 'Sprint 3', 'Go-Live'],
804
- datasets: [{
805
- label: 'Avancement prévu',
806
- data: [100, 100, 30, 70, 90, 100],
807
- backgroundColor: 'rgba(59, 130, 246, 0.6)',
808
- borderColor: 'rgba(59, 130, 246, 1)',
809
- borderWidth: 1
810
- }, {
811
- label: 'Avancement réel',
812
- data: [100, 100, 0, 0, 0, 0],
813
- backgroundColor: 'rgba(16, 185, 129, 0.6)',
814
- borderColor: 'rgba(16, 185, 129, 1)',
815
- borderWidth: 1
816
- }]
817
- },
818
- options: {
819
- responsive: true,
820
- scales: {
821
- y: {
822
- beginAtZero: true,
823
- max: 100
824
- }
825
- }
826
- }
827
- });
828
- const kpiChart = new Chart(kpiCtx, {
829
- type: 'radar',
830
- data: {
831
- labels: ['Avancement', 'Budget', 'Satisfaction', 'Qualité', 'Risques', 'Disponibilité'],
832
- datasets: [{
833
- label: 'Indicateurs Clés',
834
- data: [5, 0, 4.8, 5, 4, 5],
835
- backgroundColor: 'rgba(59, 130, 246, 0.2)',
836
- borderColor: 'rgba(59, 130, 246, 1)',
837
- borderWidth: 2,
838
- pointBackgroundColor: 'rgba(59, 130, 246, 1)',
839
- pointBorderColor: '#fff',
840
- pointHoverRadius: 5,
841
- pointHoverBackgroundColor: 'rgba(59, 130, 246, 1)',
842
- pointHoverBorderColor: '#fff',
843
- pointHitRadius: 10,
844
- pointBorderWidth: 2,
845
- }]
846
- },
847
- options: {
848
- scales: {
849
- r: {
850
- angleLines: {
851
- display: true
852
- },
853
- suggestedMin: 0,
854
- suggestedMax: 5,
855
- ticks: {
856
- stepSize: 1
857
- }
858
- }
859
- },
860
- plugins: {
861
- legend: {
862
- display: false
863
- }
864
- }
865
- }
866
- });
867
- // Animate elements on hover
868
- document.querySelectorAll('.card, .nav-item').forEach(el => {
869
- el.addEventListener('mouseenter', () => {
870
- anime({
871
- targets: el,
872
- scale: el.classList.contains('card') ? 1.02 : 1,
873
- translateY: el.classList.contains('card') ? -8 : 0,
874
- duration: 300,
875
- easing: 'easeOutQuad'
876
- });
877
- });
878
- el.addEventListener('mouseleave', () => {
879
- anime({
880
- targets: el,
881
- scale: 1,
882
- translateY: 0,
883
- duration: 300,
884
- easing: 'easeOutQuad'
885
- });
886
- });
887
- });
888
-
889
- // Floating animation for summary cards
890
- document.querySelectorAll('.card').forEach((el, index) => {
891
- anime({
892
- targets: el,
893
- translateY: {
894
- value: ['10px', '0px'],
895
- duration: 1000 + (index * 200),
896
- delay: index * 100,
897
- easing: 'easeInOutSine'
898
- },
899
- opacity: {
900
- value: [0, 1],
901
- duration: 800,
902
- delay: index * 100,
903
- easing: 'easeInOutQuad'
904
- },
905
- loop: false
906
- });
907
- });
908
- </script>
909
  </body>
910
  </html>
 
1
+
2
  <!DOCTYPE html>
3
+ <html>
4
  <head>
5
+ <title>Hello World</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  </head>
7
+ <body>
8
+ <h1>Hello World</h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  </body>
10
  </html>