Download index.html from bleblond/bap: direct link, hf CLI and curl.
- Browser
- Download file 34.8 kB
-
https://huggingface.co/spaces/bleblond/bap/resolve/main/index.html
- Command line
-
hf download hf://spaces/bleblond/bap/index.html
-
curl -L -o index.html https://huggingface.co/spaces/bleblond/bap/resolve/main/index.html
34.8 kB
| <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 --> | |
| <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 Content --> | |
| <main class="container mx-auto px-6 py-8"> | |
| <!-- Progress Bar --> | |
| <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> | |
| <!-- Migration Dashboard --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <!-- Status Card --> | |
| <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> | |
| <!-- Migration Progress --> | |
| <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> | |
| <!-- Migration Summary --> | |
| <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> | |
| <!-- Migration Details --> | |
| <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"> | |
| <!-- Content Types --> | |
| <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> | |
| <!-- Modules --> | |
| <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> | |
| <!-- Media --> | |
| <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> | |
| <!-- Actions --> | |
| <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> | |
| <!-- Log Panel --> | |
| <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> | |
| // Simulate progress animation | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const progressFill = document.querySelector('.progress-fill'); | |
| let width = 45; | |
| // Simulate progress | |
| 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); | |
| // Log panel functionality | |
| 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; | |
| } | |
| // Add random log entries to simulate activity | |
| 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); | |
| }); | |
| // Simulate module status changes | |
| 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> |