📋 Notificación Toast de Copia Exitosa

Esta plantilla muestra una notificación tipo "toast" en la esquina inferior derecha cuando la acción de copiar se realiza con éxito.

📋 Demostración de la función de copia

✅ ¡Copiado!

Código completamente funcional de copia + notificación

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Función de copia con notificación tipo toast</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 2rem;
      text-align: center;
    }

    #toast {
      visibility: hidden;
      min-width: 200px;
      margin: 0 auto;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 5px;
      padding: 10px;
      position: fixed;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      opacity: 0;
      transition: opacity 0.5s, visibility 0.5s;
    }

    #toast.show {
      visibility: visible;
      opacity: 1;
    }

    button {
      padding: 10px 20px;
      font-size: 1rem;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <h2>📋 Demostración de la función de copia</h2>
  <button onclick="copyText()">📋 Probar copia</button>
  <div id="toast">✅ ¡Copiado!</div>

  <script>
    function copyText() {
      const text = "Este es el texto a copiar";
      navigator.clipboard.writeText(text).then(() => {
        const toast = document.getElementById("toast");
        toast.classList.add("show");
        setTimeout(() => {
          toast.classList.remove("show");
        }, 2000);
      }).catch(err => {
        alert("Error al copiar: " + err);
      });
    }
  </script>

</body>
</html>

✅ Usos y Beneficios de Esta Plantilla

Proporciona retroalimentación visual de que la copia fue exitosa
Mejora la experiencia de usuario con una interacción intuitiva
Clarifica que la acción de copiar se completó
La visibilidad de la notificación se gestiona automáticamente
Se puede reutilizar en muchas interfaces con botones de copia

🧩 Uso y personalización de notificaciones toast

Esta plantilla muestra una notificación visual en la esquina inferior derecha para informar al usuario del éxito de la acción de copia, mejorando notablemente la experiencia de usuario (UX).

Al usar navigator.clipboard.writeText(...), se copia texto al portapapeles y al completarse exitosamente, classList.add("show") muestra la notificación. Luego, se oculta automáticamente con setTimeout(...).

Las notificaciones toast pueden aplicarse no solo en copias, sino también en envíos de formularios, errores o guardados exitosos. Cambiar el texto dinámicamente con innerText permite mayor flexibilidad.

🔧 Puntos de personalización

La posición se define por right: 30px; bottom: 30px;, pero puede ajustarse con CSS. También se puede cambiar la duración modificando setTimeout(..., 2000).

Las animaciones están hechas solo con CSS mediante @keyframes fadein y fadeout, lo cual asegura rendimiento fluido y peso liviano del código.