Composante modale
Composant modal complexe et réactif avec un schéma de couleurs noir, blanc et accentué, avec des transitions de dégradé adaptées aux applications industrielles/manufacturières. Inclut la prise en charge du mode sombre.
HTML Code
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-gray-950 dark:bg-opacity-85 lg:p-8">
<div class="relative w-full max-w-2xl mx-auto overflow-hidden bg-white rounded-lg shadow-xl dark:bg-gray-800 transform transition-all duration-300 ease-in-out scale-95 opacity-0 animate-scale-in ">
<!-- animate-scale-in is a placeholder for a hypothetical animation class -->
<div class="h-4 bg-gradient-to-r from-teal-500 to-indigo-600 dark:from-teal-600 dark:to-indigo-700"></div>
<div class="p-6 md:p-8">
<div class="flex items-center justify-between mb-6">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white md:text-3xl">Production Line Status</h2>
<button type="button" class="text-gray-400 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 rounded-md p-1.5 transition-colors duration-200">
<span class="sr-only">Close modal</span>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="mb-8 space-y-4 md:flex md:space-y-0 md:space-x-6">
<div class="w-full p-4 border rounded-lg bg-gray-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600 flex-1">
<p class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Current Output</p>
<p class="text-3xl font-extrabold text-teal-600 dark:text-teal-400 animate-pulse">1,245 <span class="text-lg font-normal text-gray-700 dark:text-gray-300">units/hr</span></p>
<div class="w-full bg-gray-200 rounded-full h-2.5 mt-2 dark:bg-gray-600">
<div class="h-2.5 rounded-full bg-gradient-to-r from-teal-500 to-indigo-500 animating-width" style="width: 85%;"></div>
</div>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">85% of target capacity</p>
</div>
<div class="w-full p-4 border rounded-lg bg-gray-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600 flex-1">
<p class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Efficiency Score</p>
<p class="text-3xl font-extrabold text-indigo-600 dark:text-indigo-400 animate-pulse">92.3%</p>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400 flex items-center">
<svg class="w-4 h-4 mr-1 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
+1.2% in last 24h
</p>
</div>
</div>
<div class="grid grid-cols-1 gap-4 mb-8 md:grid-cols-2">
<div class="p-4 border rounded-lg bg-gray-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600">
<p class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">System Alerts</p>
<ul class="space-y-2">
<li class="flex items-center text-sm text-red-600 dark:text-red-400">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
Critical: Machine #3 Overheating
</li>
<li class="flex items-center text-sm text-amber-600 dark:text-amber-400">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
Warning: Material Feed Low on Line 1
</li>
<li class="flex items-center text-sm text-gray-600 dark:text-gray-300">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Maintenance task pending
</li>
</ul>
</div>
<div class="p-4 border rounded-lg bg-gray-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600">
<p class="mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">Maintenance Team</p>
<div class="flex -space-x-2 overflow-hidden mb-4">
<img class="inline-block w-10 h-10 rounded-full ring-2 ring-white dark:ring-gray-800 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John Smith">
<img class="inline-block w-10 h-10 rounded-full ring-2 ring-white dark:ring-800 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Jane Doe">
<img class="inline-block w-10 h-10 rounded-full ring-2 ring-white dark:ring-800 object-cover" src="https://randomuser.me/api/portraits/men/51.jpg" alt="Avatar of Mark Johnson">
</div>
<p class="mb-2 text-sm text-gray-700 dark:text-gray-300">
Upcoming Scheduled: <span class="font-semibold text-teal-600 dark:text-teal-400">Line 2 Inspection (08:00 AM)</span>
</p>
<a href="#" class="inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-200">
View All Tasks
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</div>
<div class="flex flex-col-reverse justify-end gap-3 sm:flex-row">
<button type="button" class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-200">
Dismiss All Alerts
</button>
<button type="button" class="inline-flex items-center justify-center px-6 py-3 text-sm font-semibold text-white bg-gradient-to-r from-teal-500 to-indigo-600 rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:from-teal-600 dark:to-indigo-700 transition-all duration-200 hover:scale-105 active:scale-95">
Take Corrective Action
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
</div>
</div>
</div>
</div>Composants associés
Modal skeuomorphe
Un composant modal simple, réactif, inspiré du skeuomorphic pour les plateformes de divertissement/médias, avec des couleurs neutres froides et la prise en charge du mode sombre.
Glassmorphism_Dashboard_Modal
Un composant modal glassmorphism complexe et réactif avec un style monochromatique, adapté à la visualisation des données du tableau de bord et aux panneaux de commande, y compris la prise en charge du mode sombre.
Composant modal en mode sombre
Un composant modal en mode sombre simple et réactif conçu pour la lecture et la consommation de contenu. Il présente une palette de couleurs complémentaires et une mise en page minimale, adaptée aux blogs ou aux sites Web axés sur le contenu.