<div class="toast-holder"> </div> <style> .toast-holder { position: fixed; right: 1vw; top: 5vh; height: 80vh; width: 20vw; display: flex; flex-direction: column; flex-wrap: wrap; transition: all 0.3s ease-in-out; pointer-events: none; z-index: 999; } .toast { margin: 0.5vh 0; display: flex; width: 100%; height: fit-content; justify-content: flex-start; align-items: center; border-radius: 10px; padding: 7px; z-index: 250; transition: all 0.3s ease-in-out; } .fadeIn { animation: fadeIn 0.5s ease-in; } .fadeOut { animation: fadeOut 0.5s ease-in; } .toast-content { color: whitesmoke; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } </style> <script> function generateToast(content, color = "var(--color-present)", ttl = 5) { const toast = document.createElement('div') toast.classList.add('toast', 'fadeIn') const toastContent = document.createElement('div') toastContent.classList.add('toast-content') toastContent.appendChild(content) toast.style.backgroundColor = color; setTimeout(() => { toast.classList.replace('fadeIn', 'fadeOut') }, Math.max(0, ttl * 1000 - 500)) setTimeout(() => { toast.remove() }, Math.max(0, ttl * 1000)) toast.appendChild(toastContent) return toast } function pushToast(toast) { document .querySelector(".toast-holder") .appendChild( toast ); } function getToastColorFromEtat(etat) { let color; switch (etat.toUpperCase()) { case "PRESENT": color = "var(--color-present)"; break; case "ABSENT": color = "var(--color-absent)"; break; case "RETARD": color = "var(--color-retard)"; break; default: color = "#AAA"; break; } return color; } </script>