|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Feuille de Route Projet</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#2563eb', |
|
|
secondary: '#3b82f6', |
|
|
success: '#10b981', |
|
|
warning: '#f59e0b', |
|
|
danger: '#ef4444', |
|
|
accent: '#8b5cf6', |
|
|
dark: '#1e293b', |
|
|
light: '#f1f5f9' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
|
|
|
.timeline-item::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
border-radius: 50%; |
|
|
top: 20px; |
|
|
background-color: #2563eb; |
|
|
transform: translateX(-50%); |
|
|
} |
|
|
|
|
|
.milestone-card { |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.05); |
|
|
} |
|
|
|
|
|
.milestone-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.timeline-bar { |
|
|
margin-top: 15px; |
|
|
margin-bottom: 15px; |
|
|
height: 4px; |
|
|
} |
|
|
|
|
|
.timeline-item::before { |
|
|
top: 5px; |
|
|
} |
|
|
|
|
|
.milestone-card { |
|
|
margin-top: 15px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-light font-sans text-dark"> |
|
|
<div class="max-w-6xl mx-auto px-4 py-8"> |
|
|
<div class="text-center mb-8"> |
|
|
<h1 class="text-3xl md:text-4xl font-bold text-dark mb-2">Feuille de Route Projet</h1> |
|
|
<h2 class="text-xl text-gray-600 font-medium">Priorités stratégiques & Jalons clés</h2> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative"> |
|
|
|
|
|
<div class="hidden md:block absolute top-1/2 left-0 right-0 h-1 bg-gray-300 transform -translate-y-1/2 z-0"></div> |
|
|
|
|
|
<div class="grid md:grid-cols-4 gap-6 relative"> |
|
|
|
|
|
<div class="timeline-item relative md:text-right"> |
|
|
<div class="milestone-card bg-white p-4 rounded-xl border-l-4 border-primary"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center"> |
|
|
<span class="text-white font-bold">1</span> |
|
|
</div> |
|
|
<h3 class="font-semibold ml-3">Phase de Lancement</h3> |
|
|
</div> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-md"> |
|
|
<i class="fas fa-calendar-day mr-1"></i> Q1 2024 |
|
|
</span> |
|
|
</div> |
|
|
<ul class="text-sm mt-2 space-y-1"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-success mr-2 mt-1"></i> |
|
|
<span>Validation stratégique</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-success mr-2 mt-1"></i> |
|
|
<span>Budget approuvé</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-running text-primary mr-2 mt-1"></i> |
|
|
<span>Équipe constituée</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:hidden timeline-bar h-1 w-full bg-gray-300 my-4"></div> |
|
|
|
|
|
|
|
|
<div class="timeline-item relative"> |
|
|
<div class="milestone-card bg-white p-4 rounded-xl border-l-4 border-secondary"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-secondary flex items-center justify-center"> |
|
|
<span class="text-white font-bold">2</span> |
|
|
</div> |
|
|
<h3 class="font-semibold ml-3">Conception</h3> |
|
|
</div> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-md"> |
|
|
<i class="fas fa-calendar-day mr-1"></i> Q2 2024 |
|
|
</span> |
|
|
</div> |
|
|
<ul class="text-sm mt-2 space-y-1"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-success mr-2 mt-1"></i> |
|
|
<span>Analyse besoins</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-running text-secondary mr-2 mt-1"></i> |
|
|
<span>Architecture technique</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-clock text-gray-400 mr-2 mt-1"></i> |
|
|
<span>Validation UI/UX</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:hidden timeline-bar h-1 w-full bg-gray-300 my-4"></div> |
|
|
|
|
|
|
|
|
<div class="timeline-item relative"> |
|
|
<div class="milestone-card bg-white p-4 rounded-xl border-l-4 border-warning"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-warning flex items-center justify-center"> |
|
|
<span class="text-white font-bold">3</span> |
|
|
</div> |
|
|
<h3 class="font-semibold ml-3">Développement</h3> |
|
|
</div> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-md"> |
|
|
<i class="fas fa-calendar-day mr-1"></i> Q3 2024 |
|
|
</span> |
|
|
</div> |
|
|
<ul class="text-sm mt-2 space-y-1"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-clock text-gray-400 mr-2 mt-1"></i> |
|
|
<span>Module Alpha</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-clock text-gray-400 mr-2 mt-1"></i> |
|
|
<span>Tests qualité</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-clock text-gray-400 mr-2 mt-1"></i> |
|
|
<span>Intégration client</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:hidden timeline-bar h-1 w-full bg-gray-300 my-4"></div> |
|
|
|
|
|
|
|
|
<div class="timeline-item relative md:text-left"> |
|
|
<div class="milestone-card bg-white p-4 rounded-xl border-l-4 border-success"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-success flex items-center justify-center"> |
|
|
<span class="text-white font-bold">4</span> |
|
|
</div> |
|
|
<h3 class="font-semibold ml-3">Lancement</h3> |
|
|
</div> |
|
|
<div class="flex items-center mb-2"> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-md"> |
|
|
<i class="fas fa-calendar-day mr-1"></i> Q4 2024 |
|
|
</span> |
|
|
</div> |
|
|
<ul class="text-sm mt-2 space-y-1"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-clock text-gray-400 mr-2 mt-1"></i> |
|
|
<span>Validation finale</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-clock text-gray-400 mr-2 mt-1"></i> |
|
|
<span>Déploiement</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-clock text-gray-400 mr-2 mt-1"></i> |
|
|
<span>Suivi performance</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-12 grid grid-cols-1 md:grid-cols-4 gap-6"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-blue-50"> |
|
|
<i class="fas fa-money-bill-wave text-blue-500 text-xl"></i> |
|
|
</div> |
|
|
<span class="ml-3 text-gray-500">Budget</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="text-2xl font-bold">€1.2M</div> |
|
|
<div class="mt-1"> |
|
|
<span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded-md">+4% utilisé</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-green-50"> |
|
|
<i class="fas fa-tasks text-green-500 text-xl"></i> |
|
|
</div> |
|
|
<span class="ml-3 text-gray-500">Progression</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="text-2xl font-bold">38%</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2 mt-2"> |
|
|
<div class="bg-primary h-2 rounded-full" style="width: 38%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-purple-50"> |
|
|
<i class="fas fa-flag-checkered text-purple-500 text-xl"></i> |
|
|
</div> |
|
|
<span class="ml-3 text-gray-500">Jalons</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="text-2xl font-bold">3/12</div> |
|
|
<div class="mt-1"> |
|
|
<span class="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded-md">Prochain: 21 Juin</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-yellow-50"> |
|
|
<i class="fas fa-exclamation-triangle text-yellow-500 text-xl"></i> |
|
|
</div> |
|
|
<span class="ml-3 text-gray-500">Risques</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="text-2xl font-bold">2</div> |
|
|
<div class="mt-1"> |
|
|
<span class="text-sm bg-red-100 text-red-800 px-2 py-1 rounded-md">Modéré</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 bg-white rounded-xl p-4"> |
|
|
<div class="flex flex-wrap justify-center gap-4"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-success mr-2"></i> |
|
|
<span class="text-sm">Terminé</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-running text-blue-500 mr-2"></i> |
|
|
<span class="text-sm">En cours</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-clock text-gray-400 mr-2"></i> |
|
|
<span class="text-sm">À venir</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i> |
|
|
<span class="text-sm">Attention requise</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<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/roadmap" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
