Status
État des Machines
Machine 1
Online
Machine 2
Online
Machine 3
Online
Machine 4
Online
.status-section {
background-color: #1f2937; /* Gris foncé */
color: #ffffff;
border-radius: 8px;
padding: 2rem;
}
.box {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}
.status-btn {
display: flex;
align-items: center;
transition: background-color 0.3s ease;
}
.status-btn:hover {
background-color: #10b981; /* Vert clair */
}
.status-indicator {
transition: background-color 0.3s ease;
}
// Exemple de mise à jour dynamique du statut
document.addEventListener("DOMContentLoaded", () => {
const boxes = document.querySelectorAll(".box");
boxes.forEach((box, index) => {
const statusBtn = box.querySelector(".status-btn");
const statusIndicator = box.querySelector(".status-indicator");
// Simuler des états en ligne ou hors ligne
setTimeout(() => {
if (Math.random() > 0.5) {
statusBtn.textContent = "Offline";
statusBtn.classList.remove("bg-green-500");
statusBtn.classList.add("bg-red-500");
statusIndicator.classList.remove("bg-green-300");
statusIndicator.classList.add("bg-red-300");
}
}, 2000 * (index + 1)); // Délai différent pour chaque machine
});
});