Function showNotification

core/http/static/tts.js:18–76

(type, message)

}

function showNotification(type, message) {
  // Remove any existing notification
  const existingNotification = document.getElementById('notification');
  if (existingNotification) {
    existingNotification.remove();
  }
  
  // Create new notification
  const notification = document.createElement('div');
  notification.id = 'notification';
  notification.classList.add(
    'fixed', 'top-24', 'right-4', 'z-50', 'p-4', 'rounded-lg', 'shadow-lg',
    'transform', 'transition-all', 'duration-300', 'ease-in-out', 'translate-y-0',
    'flex', 'items-center', 'gap-2'
  );
  
  // Style based on notification type
  if (type === 'error') {
    notification.classList.add('bg-red-900/90', 'border', 'border-red-700', 'text-red-200');
    notification.innerHTML = '<i class="fas fa-circle-exclamation text-red-400 mr-2"></i>' + message;
  } else if (type === 'warning') {
    notification.classList.add('bg-yellow-900/90', 'border', 'border-yellow-700', 'text-yellow-200');
    notification.innerHTML = '<i class="fas fa-triangle-exclamation text-yellow-400 mr-2"></i>' + message;
  } else if (type === 'success') {
    notification.classList.add('bg-green-900/90', 'border', 'border-green-700', 'text-green-200');
    notification.innerHTML = '<i class="fas fa-circle-check text-green-400 mr-2"></i>' + message;
  } else {
    notification.classList.add('bg-blue-900/90', 'border', 'border-blue-700', 'text-blue-200');
    notification.innerHTML = '<i class="fas fa-circle-info text-blue-400 mr-2"></i>' + message;
  }
  
  // Add close button
  const closeBtn = document.createElement('button');
  closeBtn.innerHTML = '<i class="fas fa-xmark"></i>';
  closeBtn.classList.add('ml-auto', 'text-gray-400', 'hover:text-white', 'transition-colors');
  closeBtn.onclick = () => {
    notification.classList.add('opacity-0', 'translate-y-[-20px]');
    setTimeout(() => notification.remove(), 300);
  };
  notification.appendChild(closeBtn);
  
  // Add to DOM
  document.body.appendChild(notification);
  
  // Animate in
  setTimeout(() => {
    notification.classList.add('opacity-0', 'translate-y-[-20px]');
    notification.offsetHeight; // Force reflow
    notification.classList.remove('opacity-0', 'translate-y-[-20px]');
  }, 10);
  
  // Auto dismiss after 5 seconds
  setTimeout(() => {
    if (document.getElementById('notification')) {
      notification.classList.add('opacity-0', 'translate-y-[-20px]');
      setTimeout(() => notification.remove(), 300);
    }
  }, 5000);