|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Migration Drupal 7 vers Drupal 11</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"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%); |
|
|
} |
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.progress-bar { |
|
|
height: 10px; |
|
|
border-radius: 5px; |
|
|
background-color: #e2e8f0; |
|
|
} |
|
|
.progress-fill { |
|
|
height: 100%; |
|
|
border-radius: 5px; |
|
|
background: linear-gradient(90deg, #10b981, #34d399); |
|
|
transition: width 0.5s ease; |
|
|
} |
|
|
.step-indicator { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-weight: bold; |
|
|
position: relative; |
|
|
} |
|
|
.step-indicator:not(:first-child)::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 40px; |
|
|
height: 2px; |
|
|
background-color: #e2e8f0; |
|
|
left: -40px; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
.step-active { |
|
|
background-color: #4f46e5; |
|
|
color: white; |
|
|
} |
|
|
.step-completed { |
|
|
background-color: #10b981; |
|
|
color: white; |
|
|
} |
|
|
.step-pending { |
|
|
background-color: #e2e8f0; |
|
|
color: #64748b; |
|
|
} |
|
|
.log-entry { |
|
|
animation: fadeIn 0.3s ease; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(5px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
.module-status-badge { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.module-status-badge:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
|
|
|
<header class="gradient-bg text-white shadow-lg"> |
|
|
<div class="container mx-auto px-6 py-12"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-8 md:mb-0"> |
|
|
<h1 class="text-4xl font-bold mb-2">Migration Drupal</h1> |
|
|
<p class="text-xl opacity-90">De Drupal 7 vers Drupal 11 en toute sécurité</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg p-6 shadow-lg transform hover:scale-105 transition"> |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-4 text-center"> |
|
|
<div class="text-sm text-gray-500">Version source</div> |
|
|
<div class="text-2xl font-bold text-gray-800 flex items-center"> |
|
|
<i class="fas fa-database mr-2 text-purple-500"></i> D7 |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-3xl text-purple-500 mx-4 animate-pulse"> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-sm text-gray-500">Version cible</div> |
|
|
<div class="text-2xl font-bold text-gray-800 flex items-center"> |
|
|
<i class="fas fa-cloud mr-2 text-green-500"></i> D11 |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-6 py-8"> |
|
|
|
|
|
<div class="max-w-4xl mx-auto mb-12"> |
|
|
<div class="flex justify-between relative mb-8"> |
|
|
<div class="step-indicator step-completed"> |
|
|
<i class="fas fa-check"></i> |
|
|
<div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-sm font-medium text-gray-700">Analyse</div> |
|
|
</div> |
|
|
<div class="step-indicator step-completed"> |
|
|
<i class="fas fa-check"></i> |
|
|
<div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-sm font-medium text-gray-700">Préparation</div> |
|
|
</div> |
|
|
<div class="step-indicator step-active"> |
|
|
3 |
|
|
<div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-sm font-bold text-purple-600">Migration</div> |
|
|
</div> |
|
|
<div class="step-indicator step-pending"> |
|
|
4 |
|
|
<div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-sm font-medium text-gray-500">Vérification</div> |
|
|
</div> |
|
|
<div class="step-indicator step-pending"> |
|
|
5 |
|
|
<div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-sm font-medium text-gray-500">Finalisation</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" style="width: 45%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover border-l-4 border-blue-500"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-blue-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-server text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-800">Environnement</h3> |
|
|
</div> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-gray-600 flex items-center"> |
|
|
<i class="fas fa-microchip mr-2 text-blue-400"></i> CPU |
|
|
</span> |
|
|
<div class="w-24 bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-blue-500 h-2.5 rounded-full" style="width: 32%"></div> |
|
|
</div> |
|
|
<span class="font-medium text-sm w-12 text-right">32%</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-gray-600 flex items-center"> |
|
|
<i class="fas fa-memory mr-2 text-purple-400"></i> Mémoire |
|
|
</span> |
|
|
<div class="w-24 bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-purple-500 h-2.5 rounded-full" style="width: 45%"></div> |
|
|
</div> |
|
|
<span class="font-medium text-sm w-12 text-right">45%</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-gray-600 flex items-center"> |
|
|
<i class="fas fa-hdd mr-2 text-green-400"></i> Stockage |
|
|
</span> |
|
|
<div class="w-24 bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-green-500 h-2.5 rounded-full" style="width: 24%"></div> |
|
|
</div> |
|
|
<span class="font-medium text-sm w-12 text-right">120GB</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover border-l-4 border-green-500"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-sync-alt text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-800">Progression</h3> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<div class="flex justify-between text-sm text-gray-600 mb-1"> |
|
|
<span>Migration en cours</span> |
|
|
<span>45% complété</span> |
|
|
</div> |
|
|
<div class="h-3 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-gradient-to-r from-green-400 to-blue-500" style="width: 45%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span class="text-gray-600 flex items-center"> |
|
|
<i class="fas fa-file-alt mr-2 text-blue-400"></i> Éléments |
|
|
</span> |
|
|
<span class="font-medium">1,245/2,780</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span class="text-gray-600 flex items-center"> |
|
|
<i class="fas fa-clock mr-2 text-purple-400"></i> Temps restant |
|
|
</span> |
|
|
<span class="font-medium">~25 min</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span class="text-gray-600 flex items-center"> |
|
|
<i class="fas fa-bolt mr-2 text-yellow-400"></i> Vitesse |
|
|
</span> |
|
|
<span class="font-medium">42 items/min</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover border-l-4 border-purple-500"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-purple-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-clipboard-list text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold text-gray-800">Résumé</h3> |
|
|
<p class="text-sm text-gray-500">Statut global de la migration</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<div class="bg-green-50 p-3 rounded-lg"> |
|
|
<div class="text-green-800 font-medium flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2"></i> |
|
|
<span>28</span> |
|
|
</div> |
|
|
<div class="text-xs text-green-600">Modules OK</div> |
|
|
</div> |
|
|
<div class="bg-blue-50 p-3 rounded-lg"> |
|
|
<div class="text-blue-800 font-medium flex items-center"> |
|
|
<i class="fas fa-sync-alt mr-2"></i> |
|
|
<span>3</span> |
|
|
</div> |
|
|
<div class="text-xs text-blue-600">En cours</div> |
|
|
</div> |
|
|
<div class="bg-yellow-50 p-3 rounded-lg"> |
|
|
<div class="text-yellow-800 font-medium flex items-center"> |
|
|
<i class="fas fa-exclamation-triangle mr-2"></i> |
|
|
<span>1</span> |
|
|
</div> |
|
|
<div class="text-xs text-yellow-600">Avertissements</div> |
|
|
</div> |
|
|
<div class="bg-red-50 p-3 rounded-lg"> |
|
|
<div class="text-red-800 font-medium flex items-center"> |
|
|
<i class="fas fa-times-circle mr-2"></i> |
|
|
<span>0</span> |
|
|
</div> |
|
|
<div class="text-xs text-red-600">Échecs</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> |
|
|
<div class="border-b border-gray-200 px-6 py-4 flex justify-between items-center"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800">Détails de la migration</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition flex items-center"> |
|
|
<i class="fas fa-filter mr-1"></i> Filtrer |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition flex items-center"> |
|
|
<i class="fas fa-search mr-1"></i> Rechercher |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="divide-y divide-gray-200"> |
|
|
|
|
|
<div class="p-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="text-lg font-medium text-gray-800 flex items-center"> |
|
|
<i class="fas fa-file-alt text-blue-500 mr-2"></i> |
|
|
Types de contenu |
|
|
</h3> |
|
|
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full module-status-badge"> |
|
|
<i class="fas fa-check mr-1"></i> Complété |
|
|
</span> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="border border-gray-200 rounded-lg p-4 hover:border-blue-300 transition"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div> |
|
|
<span class="font-medium">Article</span> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 flex justify-between"> |
|
|
<span>1,245 éléments</span> |
|
|
<span class="text-green-500 font-medium">100%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-gray-200 rounded-lg p-4 hover:border-blue-300 transition"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div> |
|
|
<span class="font-medium">Page</span> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 flex justify-between"> |
|
|
<span>876 éléments</span> |
|
|
<span class="text-green-500 font-medium">100%</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border border-gray-200 rounded-lg p-4 hover:border-blue-300 transition"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div> |
|
|
<span class="font-medium">Événement</span> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 flex justify-between"> |
|
|
<span>659 éléments</span> |
|
|
<span class="text-blue-500 font-medium">45%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="text-lg font-medium text-gray-800 flex items-center"> |
|
|
<i class="fas fa-puzzle-piece text-purple-500 mr-2"></i> |
|
|
Modules |
|
|
</h3> |
|
|
<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full module-status-badge"> |
|
|
<i class="fas fa-sync-alt mr-1"></i> En cours |
|
|
</span> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Module</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">D7 Version</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">D11 Version</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr class="hover:bg-gray-50 transition"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-check text-green-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Views</div> |
|
|
<div class="text-xs text-gray-500">Gestion des affichages</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> |
|
|
Complété |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7.x-3.18</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">11.x-1.0</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-blue-600 hover:text-blue-900 mr-3"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
</button> |
|
|
<button class="text-green-600 hover:text-green-900"> |
|
|
<i class="fas fa-redo"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50 transition"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-sync-alt text-blue-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Pathauto</div> |
|
|
<div class="text-xs text-gray-500">Alias automatiques</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800"> |
|
|
En cours |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7.x-1.3</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">11.x-1.0</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-blue-600 hover:text-blue-900 mr-3"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
</button> |
|
|
<button class="text-yellow-600 hover:text-yellow-900"> |
|
|
<i class="fas fa-pause"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50 transition"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 bg-yellow-100 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-exclamation-triangle text-yellow-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Webform</div> |
|
|
<div class="text-xs text-gray-500">Formulaires avancés</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"> |
|
|
Attention |
|
|
</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7.x-4.16</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">11.x-6.0</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-blue-600 hover:text-blue-900 mr-3"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
</button> |
|
|
<button class="text-red-600 hover:text-red-900"> |
|
|
<i class="fas fa-exclamation-circle"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="text-lg font-medium text-gray-800 flex items-center"> |
|
|
<i class="fas fa-images text-green-500 mr-2"></i> |
|
|
Médias |
|
|
</h3> |
|
|
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-sm rounded-full module-status-badge"> |
|
|
<i class="fas fa-clock mr-1"></i> En attente |
|
|
</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-4"> |
|
|
<div class="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center border-2 border-dashed border-gray-300"> |
|
|
<i class="fas fa-image text-gray-400 text-2xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between text-sm text-gray-600 mb-1"> |
|
|
<span>3,456 fichiers médias</span> |
|
|
<span class="font-medium">15% migrés</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-gray-400 h-2.5 rounded-full" style="width: 15%"></div> |
|
|
</div> |
|
|
<div class="flex justify-between mt-2"> |
|
|
<span class="text-xs text-gray-500">Prochain lot: images</span> |
|
|
<span class="text-xs text-gray-500">Taille: 2.4GB</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col md:flex-row justify-between items-center bg-white rounded-xl shadow-md p-6 mb-8"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<h3 class="text-lg font-medium text-gray-800">Contrôle de migration</h3> |
|
|
<p class="text-sm text-gray-600">Gérer le processus de migration</p> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-3"> |
|
|
<button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition flex items-center"> |
|
|
<i class="fas fa-file-export mr-2"></i> Exporter le rapport |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-yellow-100 text-yellow-700 rounded-lg hover:bg-yellow-200 transition flex items-center"> |
|
|
<i class="fas fa-pause mr-2"></i> Pause |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition flex items-center"> |
|
|
<i class="fas fa-stop mr-2"></i> Arrêter |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition flex items-center"> |
|
|
<i class="fas fa-play mr-2"></i> Continuer |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-0 left-0 right-0 bg-gray-900 text-white shadow-lg border-t border-gray-700" style="max-height: 250px; overflow-y: auto;"> |
|
|
<div class="container mx-auto px-6 py-3"> |
|
|
<div class="flex justify-between items-center mb-2 sticky top-0 bg-gray-900 py-2 z-10"> |
|
|
<h3 class="font-medium flex items-center"> |
|
|
<i class="fas fa-terminal mr-2 text-blue-400"></i> Journal de migration |
|
|
<span class="ml-2 px-2 py-0.5 bg-gray-700 text-xs rounded-full">Live</span> |
|
|
</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-gray-400 hover:text-white p-1 rounded"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-white p-1 rounded"> |
|
|
<i class="fas fa-filter"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-white p-1 rounded" id="clear-logs"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-white p-1 rounded" id="close-logs"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="font-mono text-sm space-y-1" id="log-container"> |
|
|
<div class="log-entry text-green-400 flex"> |
|
|
<span class="text-gray-500 mr-3">[12:45:32]</span> |
|
|
<span>INFO: Migration des articles terminée (1245 éléments)</span> |
|
|
</div> |
|
|
<div class="log-entry text-blue-400 flex"> |
|
|
<span class="text-gray-500 mr-3">[12:46:18]</span> |
|
|
<span>INFO: Début de la migration des pages</span> |
|
|
</div> |
|
|
<div class="log-entry text-yellow-400 flex"> |
|
|
<span class="text-gray-500 mr-3">[12:47:05]</span> |
|
|
<span>WARNING: Module Webform nécessite une attention particulière</span> |
|
|
</div> |
|
|
<div class="log-entry text-gray-400 flex"> |
|
|
<span class="text-gray-500 mr-3">[12:48:22]</span> |
|
|
<span>INFO: Progression globale: 45%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const progressFill = document.querySelector('.progress-fill'); |
|
|
let width = 45; |
|
|
|
|
|
|
|
|
const progressInterval = setInterval(() => { |
|
|
width += Math.random() * 2; |
|
|
if (width >= 100) { |
|
|
width = 100; |
|
|
clearInterval(progressInterval); |
|
|
addLogEntry("Migration terminée avec succès!", "green"); |
|
|
} |
|
|
progressFill.style.width = width + '%'; |
|
|
}, 3000); |
|
|
|
|
|
|
|
|
const logContainer = document.getElementById('log-container'); |
|
|
const clearLogsBtn = document.getElementById('clear-logs'); |
|
|
const closeLogsBtn = document.getElementById('close-logs'); |
|
|
|
|
|
function addLogEntry(message, color = "gray") { |
|
|
const now = new Date(); |
|
|
const timeString = `[${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}]`; |
|
|
|
|
|
const logEntry = document.createElement('div'); |
|
|
logEntry.className = `log-entry text-${color}-400 flex`; |
|
|
logEntry.innerHTML = ` |
|
|
<span class="text-gray-500 mr-3">${timeString}</span> |
|
|
<span>${message}</span> |
|
|
`; |
|
|
|
|
|
logContainer.appendChild(logEntry); |
|
|
logContainer.scrollTop = logContainer.scrollHeight; |
|
|
} |
|
|
|
|
|
|
|
|
const logMessages = [ |
|
|
{ msg: "Vérification des dépendances des modules", color: "blue" }, |
|
|
{ msg: "Migration des utilisateurs en cours", color: "blue" }, |
|
|
{ msg: "Erreur de connexion à la base de données", color: "red" }, |
|
|
{ msg: "Tentative de reconnexion...", color: "yellow" }, |
|
|
{ msg: "Connexion rétablie", color: "green" }, |
|
|
{ msg: "Export des configurations terminé", color: "green" }, |
|
|
{ msg: "Nettoyage du cache", color: "gray" } |
|
|
]; |
|
|
|
|
|
let logInterval = setInterval(() => { |
|
|
const randomMsg = logMessages[Math.floor(Math.random() * logMessages.length)]; |
|
|
addLogEntry(randomMsg.msg, randomMsg.color); |
|
|
}, 5000); |
|
|
|
|
|
clearLogsBtn.addEventListener('click', function() { |
|
|
logContainer.innerHTML = ''; |
|
|
}); |
|
|
|
|
|
closeLogsBtn.addEventListener('click', function() { |
|
|
document.querySelector('.fixed.bottom-0').style.display = 'none'; |
|
|
clearInterval(logInterval); |
|
|
}); |
|
|
|
|
|
|
|
|
const moduleStatuses = document.querySelectorAll('.module-status-badge'); |
|
|
setInterval(() => { |
|
|
moduleStatuses.forEach(badge => { |
|
|
if (Math.random() > 0.8) { |
|
|
badge.classList.toggle('animate-pulse'); |
|
|
} |
|
|
}); |
|
|
}, 2000); |
|
|
}); |
|
|
</script> |
|
|
<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=bleblond/bap" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
