Hugging Face's logo

Spaces:
bleblond
/
bap
Running

App Files Community
bap / index.html
bleblond's picture
bleblond
Add 3 files
86ef380 verified
raw
history blame contribute delete
34.8 kB
<!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 -->
 <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>