flicker-alerts 1.0.27 → 1.0.28

package/index.d.ts

@@ -1,15 +1,28 @@
 declare module 'flicker-alerts' {
-  // Interface de opções de alerta, incluindo a propriedade 'position'
+  // Definição das opções para os alertas
   interface AlertOptions {
     type: 'success' | 'info' | 'warning' | 'danger';
     title: string;
     message: string;
-    duration?: number; // Duração do alerta (opcional)
-    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center' | 'top-center' | 'bottom-center';  
+    duration?: number; // Duração opcional do alerta
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center' | 'top-center' | 'bottom-center'; // Posições possíveis do alerta
   }
 
+  // Definição das opções para os modais
+  interface ModalOptions {
+    type: 'warning' | 'danger' | 'info' | 'success'; // Tipos de modais disponíveis
+    title: string;
+    message: string;
+    onConfirm?: () => void; // Função executada no botão de confirmação
+    onCancel?: () => void; // Função executada no botão de cancelamento
+  }
+
+  // Classe principal para a biblioteca FlickerAlerts
   export default class FlickerAlerts {
-    // Método para exibir o alerta, agora aceitando 'position' como parte das opções
+    // Método estático para mostrar um alerta
     static showAlert(options: AlertOptions): void;
+
+    // Método estático para mostrar um modal
+    static showModal(options: ModalOptions): void;
   }
 }

package/index.js

@@ -1,86 +1,230 @@
-
-import './style.css';
-
-
 const FlickerAlerts = {
   showAlert: function ({ type, title, message, timer = 3000, position = 'top-right' }) {
-    // Verifique se está no ambiente do navegador (client-side) antes de tentar manipular o DOM
     if (typeof window !== 'undefined' && typeof document !== 'undefined') {
-      // Garantir que o container de alertas exista, se não, criá-lo
       let container = document.getElementById('alerts-container');
       if (!container) {
-        // Cria o container se ele não existir
         container = document.createElement('div');
         container.id = 'alerts-container';
-        document.body.appendChild(container); // Adiciona o container ao body
-      } else {
-        // Limpar as classes anteriores de posição
-        container.className = ''; 
+        container.style.position = 'fixed';
+        container.style.top = 0;
+        container.style.left = 0;
+        container.style.width = '100vw';
+        container.style.height = '100vh';
+        container.style.pointerEvents = 'none';
+        document.body.appendChild(container);
       }
 
-      // Aplica a nova classe de posição
-      container.classList.add(position);
-
-      // Criação do alerta
       const alertBox = document.createElement('div');
-      alertBox.className = `alert-custom alert-${type}`;
+      alertBox.className = `notification ${type}`;
+      alertBox.classList.add(position);
 
       // Ícone
       const icon = document.createElement('div');
       icon.className = 'icon';
       const iconClass = {
         success: 'fa-check',
-        info: 'fa-info',
-        warning: 'fa-exclamation',
-        danger: 'fa-times'
+        info: 'fa-info-circle',
+        warning: 'fa-exclamation-triangle',
+        danger: 'fa-times-circle',
       }[type];
-      icon.innerHTML = `<i class="fas ${iconClass}"></i>`;
+      icon.innerHTML = `<i class="fas ${iconClass}" style="font-size: 24px;"></i>`;
       alertBox.appendChild(icon);
 
+      // Divisor
+      const divider = document.createElement('div');
+      divider.className = 'divider';
+      console.log(`Created divider for ${type}`); // Para depuração
+      alertBox.appendChild(divider);
+      
       // Conteúdo
       const content = document.createElement('div');
-      content.innerHTML = `<strong>${title}</strong><div>${message}</div>`;
+      content.innerHTML = `<div class="title">${title}</div><div class="message">${message}</div>`;
       alertBox.appendChild(content);
 
-      // Botão de fechamento
+      // Barra de carregamento
+      const progressBar = document.createElement('div');
+      progressBar.className = 'progress-bar';
+      progressBar.style.animationDuration = `${timer}ms`;
+      alertBox.appendChild(progressBar);
+
+      // Botão de Fechamento
       const closeButton = document.createElement('div');
       closeButton.className = 'close';
       closeButton.innerHTML = '<i class="fas fa-times"></i>';
-      closeButton.onclick = () => alertBox.remove();
-      alertBox.appendChild(closeButton);
 
-      // Barra de progresso
-      const progressBar = document.createElement('div');
-      progressBar.className = `progress-bar progress-bar-${type}`;
-      alertBox.appendChild(progressBar);
+      const removeAlert = () => {
+        alertBox.style.opacity = '0';
+        setTimeout(() => alertBox.remove(), 300);
+      };
+
+      closeButton.addEventListener('click', () => {
+        removeAlert();
+        clearTimeout(timeoutId);
+      });
 
-      // Adicionar ao container
+      alertBox.appendChild(closeButton);
       container.appendChild(alertBox);
 
-      // Remoção automática após o tempo especificado
-      setTimeout(() => alertBox.remove(), timer);
+      const timeoutId = setTimeout(() => {
+        removeAlert();
+      }, timer);
     }
-  }
+  },
 };
 
+
+
+
 // Botões de teste - Eles podem ser removidos se não forem necessários
 if (typeof document !== 'undefined') {
   document.getElementById('success-btn')?.addEventListener('click', () => {
-    FlickerAlerts.showAlert({ type: 'success', title: 'Sucesso', message: 'A operação foi concluída com êxito!' });
+    FlickerAlerts.showAlert({ type: 'success', title: 'Sucesso!', message: 'Essa mensagem é personalizável.' });
   });
 
   document.getElementById('info-btn')?.addEventListener('click', () => {
-    FlickerAlerts.showAlert({ type: 'info', title: 'Informação', message: 'Aqui está uma informação importante.' });
+    FlickerAlerts.showAlert({ type: 'info', title: 'Informação!', message: 'Essa mensagem é personalizável.' });
   });
 
   document.getElementById('warning-btn')?.addEventListener('click', () => {
-    FlickerAlerts.showAlert({ type: 'warning', title: 'Alerta', message: 'Por favor, preste atenção nisso!' });
+    FlickerAlerts.showAlert({ type: 'warning', title: 'Alerta!', message: 'Essa mensagem é personalizável.' });
   });
 
   document.getElementById('error-btn')?.addEventListener('click', () => {
-    FlickerAlerts.showAlert({ type: 'danger', title: 'Erro', message: 'Ocorreu um erro inesperado!' });
+    FlickerAlerts.showAlert({ type: 'danger', title: 'Erro!', message: 'Essa mensagem é personalizável.' });
   });
 }
 
 // Exportação
 export default FlickerAlerts;
+
+
+const FlickerModals = {
+  showModal: function ({ type, title, message,  onConfirm, onCancel }) {
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+      let container = document.getElementById('modals-container');
+      if (!container) {
+        container = document.createElement('div');
+        container.id = 'modals-container';
+        container.style.position = 'fixed';
+        container.style.top = 0;
+        container.style.left = 0;
+        container.style.width = '100vw';
+        container.style.height = '100vh';
+        container.style.pointerEvents = 'none';
+        document.body.appendChild(container);
+      }
+
+      const modalContainer = document.createElement('div');
+      modalContainer.className = 'modal-container';
+
+      // Criar a estrutura para o modal
+      const modalDialog = document.createElement('div');
+      modalDialog.className = 'modal-dialog';
+      modalDialog.setAttribute('role', 'document');
+
+      const modalContent = document.createElement('div');
+      modalContent.className = 'modal-content';
+
+      // Header
+      const modalHeader = document.createElement('div');
+      modalHeader.className = 'modal-header';
+      const closeButton = document.createElement('button');
+      closeButton.type = 'button';
+      closeButton.className = 'close';
+      closeButton.setAttribute('aria-label', 'Close');
+      closeButton.innerHTML = `<div><i class="fas fa-times"></i></div>`;
+      closeButton.addEventListener('click', () => {
+        removeModal();
+        if (onCancel) onCancel();
+      });
+      modalHeader.appendChild(closeButton);
+
+      // Body
+      const modalBody = document.createElement('div');
+      modalBody.className = 'modal-body';
+      const icon = document.createElement('div');
+      icon.className = type === 'delete' ? 'icon-delete' : 'icon-check';
+      icon.innerHTML = `<i class="fas ${type === 'delete' ? 'fa-trash-alt' : 'fa-exclamation-triangle'}"></i>`;
+      modalBody.appendChild(icon);
+
+      const divider = document.createElement('div');
+      divider.className = 'divider';
+      modalBody.appendChild(divider);
+
+      const bodyContent = document.createElement('div');
+      bodyContent.innerHTML = `
+        <h5 class="modal-title-${type}">${title}</h5>
+        <p>${message}</p>
+      `;
+      modalBody.appendChild(bodyContent);
+
+      // Footer
+      const modalFooter = document.createElement('div');
+      modalFooter.className = 'modal-footer';
+
+      const cancelButton = document.createElement('button');
+      cancelButton.type = 'button';
+      cancelButton.className = 'btn btn-cancel';
+      cancelButton.innerText = 'Não, cancelar';
+      cancelButton.addEventListener('click', () => {
+        removeModal();
+        if (onCancel) onCancel();
+      });
+      modalFooter.appendChild(cancelButton);
+
+      const confirmButton = document.createElement('button');
+      confirmButton.type = 'button';
+      confirmButton.className = type === 'delete' ? 'btn btn-confirm-delete' : 'btn btn-confirm-warning';
+      confirmButton.innerText = type === 'delete' ? 'Sim, deletar' : 'Sim, confirmar';
+      confirmButton.addEventListener('click', () => {
+        removeModal();
+        if (onConfirm) onConfirm();
+      });
+      modalFooter.appendChild(confirmButton);
+
+      modalContent.appendChild(modalHeader);
+      modalContent.appendChild(modalBody);
+      modalContent.appendChild(modalFooter);
+      modalDialog.appendChild(modalContent);
+      modalContainer.appendChild(modalDialog);
+      container.appendChild(modalContainer);
+
+      // Remove o modal após o tempo especificado
+      const timeoutId = setTimeout(() => {
+        removeModal();
+      }, timer);
+
+      // Função para remover o modal
+      function removeModal() {
+        modalContainer.style.opacity = '0';
+        setTimeout(() => modalContainer.remove(), 300);
+        clearTimeout(timeoutId);
+      }
+    }
+  }
+};
+
+// Botões de teste - Eles podem ser removidos se não forem necessários
+if (typeof document !== 'undefined') {
+  document.getElementById('modal-warning-btn')?.addEventListener('click', () => {
+    FlickerModals.showModal({
+      type: 'warning',
+      title: 'Tem certeza que deseja aceitar?',
+      message: 'Você tem certeza que deseja aceitar isso?',
+      onConfirm: () => { console.log('Confirmado!'); },
+      onCancel: () => { console.log('Cancelado!'); }
+    });
+  });
+
+  document.getElementById('modal-delete-btn')?.addEventListener('click', () => {
+    FlickerModals.showModal({
+      type: 'delete',
+      title: 'Tem certeza que deseja deletar?',
+      message: 'Você tem certeza que deseja deletar isso?',
+      onConfirm: () => { console.log('Deletado com sucesso!'); },
+      onCancel: () => { console.log('Cancelado!'); }
+    });
+  });
+}
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flicker-alerts",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "description": "Biblioteca para alertas animados",
   "main": "index.js",
   "types": "index.d.ts",
@@ -16,6 +16,6 @@
   "author": "https://www.linkedin.com/in/bruno-carneiro-9a51aa190/",
   "license": "MIT",
   "dependencies": {
-    "flicker-alerts": "^1.0.27"
+    "flicker-alerts": "^1.0.28"
   }
 }

package/readme.md

@@ -15,6 +15,16 @@ npm install flicker-alerts
 
 **FlickerAlerts** é uma biblioteca simples para criar alertas animados de sucesso, erro, aviso e informações. Eles podem ser exibidos automaticamente ou ser fechados manualmente pelo usuário.
 
+<h4>Importação</h4>
+        <p>Esses links são essenciais para o funcionamento adequado dos estilos do Bootstrap e dos ícones do Font Awesome.</p>
+        <p class="text-import">  <!-- Importação do Bootstrap -->
+  "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+
+  <!-- Importação do Font Awesome -->
+"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" 
+</p>
+
+
 ### Instalação
 
 Instale via `npm`:
@@ -34,51 +44,16 @@ Com o **FlickerAlerts** instalado, importe-o no seu componente Angular e utilize
 ```typescript
 import FlickerAlerts from 'flicker-alerts';
 
-export class AppComponent {
-  showSuccessAlert() {
-    FlickerAlerts.showAlert({
-      type: 'success',
-      title: 'Sucesso',
-      message: 'Operação concluída com sucesso!'
-      position: 'top-righ'
-      // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
-          
-    });
-  }
-
-  showInfoAlert() {
-    FlickerAlerts.showAlert({
-      type: 'info',
-      title: 'Informação',
-      message: 'Aqui está uma informação importante.'
-       position: 'top-righ'
-      // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
-    });
-  }
-
-  showWarningAlert() {
-    FlickerAlerts.showAlert({
-      type: 'warning',
-      title: 'Alerta',
-      message: 'Por favor, preste atenção nisso!'
-       position: 'top-righ'
-      // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
-    });
-  }
-
-  showErrorAlert() {
-    FlickerAlerts.showAlert({
-      type: 'danger',
-      title: 'Erro',
-      message: 'Ocorreu um erro inesperado!'
-       position: 'top-righ'
-      // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
-    });
-  }
-}
-
-
-
+          export class AppComponent {
+            showAlert() {
+              FlickerAlerts.showAlert({
+                type: 'success', // Opções: 'success', 'info', 'warning', 'danger'
+                title: 'Título',
+                message: 'Mensagem personalizada',
+                position: 'top-right' // Opções: 'top-right', 'top-left',   'bottom-right', 'bottom-left',  'center', 'top-center',   'bottom-center'
+              });
+            }
+          }
 
 ```
 # Caso o Estilo Não Esteja Sendo Aplicado no Angular
@@ -99,47 +74,61 @@ Com o **FlickerAlerts** instalado, você pode usá-lo no seu componente React as
 ```javascript
 import FlickerAlerts from 'flicker-alerts';
 
-const showSucessAlert = () => {
-     FlickerAlerts.showAlert({
-      type: 'success',
-      title: 'Sucesso',
-      message: 'Operação concluída com sucesso!',
-      position: 'top-right'
-      // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
-    });
-  };
-
-
-const showInfoAlert = () => {
-    FlickerAlerts.showAlert({
-      type: 'info',
-      title: 'Informação',
-      message: 'Aqui está uma informação importante.',
-      position: 'top-right'
-      // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
-    });
-  };
-
-  const showWarningAlert = () => {
-    FlickerAlerts.showAlert({
-      type: 'warning',
-      title: 'Alerta',
-      message: 'Por favor, preste atenção nisso!',
-      position: 'top-right'
-      // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
-    });
-  };
-
-  const showErrorAlert = () => {
-    FlickerAlerts.showAlert({
-      type: 'danger',
-      title: 'Erro',
-      message: 'Ocorreu um erro inesperado!',
-      position: 'top-right'
-      // Em 'position', você pode escolher entre: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'center', 'top-center' ou 'bottom-center';
-    });
-  };
+import FlickerAlerts from 'flicker-alerts';
+
+          const showAlert = () => {
+            FlickerAlerts.showAlert({
+              type: 'success', // Opções: 'success', 'info', 'warning', 'danger'
+              title: 'Título',
+              message: 'Mensagem personalizada',
+              position: 'top-right'     // Opções: 'top-right', 'top-left',   'bottom-right', 'bottom-left',  'center', 'top-center',   'bottom-center'
+            });
+          };      
+
+```
+
+
+
+### Modais
+### Uso no Angular
+
+Com o **FlickerAlerts** instalado, você pode usá-lo no seu componente React assim:
+
+```javascript
+import FlickerAlerts from 'flicker-alerts';
+        
+          export class AppComponent {
+            showModal() {
+              FlickerAlerts.showModal({
+                type: 'warning', // Tipos: 'warning', 'delete' 
+                title: 'Título do Modal',
+                message: 'Mensagem personalizada para o modal.',
+                onConfirm: () => { console.log('Confirmado!'); },
+                onCancel: () => { console.log('Cancelado!'); }
+              });
+            }
+          }
+             
+
+```
+
+### Uso no React
 
+Com o **FlickerAlerts** instalado, você pode usá-lo no seu componente React assim:
+
+```javascript
+  import FlickerAlerts from 'flicker-alerts';
+        
+          const showModal = () => {
+            FlickerAlerts.showModal({
+              type: 'delete', // Tipos: 'warning', 'delete' 
+              title: 'Título do Modal',
+              message: 'Mensagem personalizada para o modal.',
+              onConfirm: () => { console.log('Deletado com sucesso!'); },
+              onCancel: () => { console.log('Cancelado!'); }
+            });
+          };
+             
 
 ```
 

package/style.css

@@ -1,191 +1,354 @@
-/* Estilo geral para o alerta */
-.alert-custom {
-    display: flex;
-    align-items: center;
-    padding: 1rem;
-    border-radius: 0.5rem;
-    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-    margin-bottom: 1rem;
-    width: 100%;
-    min-width: 250px; /* Tamanho mínimo para o alerta */
-    max-width: 320px;
-    position: relative;
-    background-color: white;
-    color: #000;
-    z-index: 1050;
-    font-family: Arial, sans-serif;
-    font-size: 0.9rem;
-}
+@import '@fortawesome/fontawesome-free/css/all.min.css';
 
-/* Estilo do ícone dentro do alerta */
-.alert-custom .icon {
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 2rem;  /* Diminui o tamanho do círculo */
-    height: 2rem; /* Diminui o tamanho do círculo */
-    border-radius: 50%;
-    font-size: 1rem; /* Diminui o tamanho do ícone */
-    line-height: 0;
-    margin-right: 1rem;  /* Espaço entre o ícone e o conteúdo */
+#alerts-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none; /* Impede que o contêiner interfira nos cliques */
+  padding-right: 20px;
 }
 
-.alert-custom .icon i {
-    font-size: inherit; /* Ajusta o ícone ao tamanho da div */
+.notification {
+margin: 20px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  min-width: 300px;
+  max-width: 500px;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  z-index: 9999; /* Garante que as notificações fiquem acima de outros elementos */
+  opacity: 1;
+  transition: opacity 0.3s ease-out;
+  pointer-events: auto; /* Permite interagir com o conteúdo da notificação */
 }
-
-/* Estilo do conteúdo do alerta (título e mensagem) */
-.alert-custom .content {
-    display: flex;
-    flex-direction: column; /* Conteúdo empilhado */
-    justify-content: center; /* Centraliza verticalmente o título e a mensagem */
-    flex-grow: 1;
+.text-import{
+  color: rgb(255, 0, 85);
 }
 
-.alert-custom .content strong {
-    font-weight: bold;
-    font-size: 1rem;
-    margin-bottom: 0.25rem;  /* Espaçamento entre título e mensagem */
+.text-comment{
+  color: #28a745;
+}
+.notification .close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 14px;
+  color: #6c757d;
+  background-color: #e9ecef;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  cursor: pointer;
+  z-index: 10000;
 }
 
-.alert-custom .content div {
-    font-size: 0.9rem;
-    color: #555;
+.notification .icon {
+  font-size: 24px;
+  color: #ffffff;
+  margin-right: 15px;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
 }
 
-/* Botão de Fechar no topo */
-.alert-custom .close {
-    position: absolute; /* Posiciona o X no topo da caixa */
-    top: 5px; /* Ajusta a distância do topo */
-    right: 5px; /* Ajusta a distância da borda direita */
-    cursor: pointer;
-    color: #999; /* Cor mais clara para o X */
-    font-size: 1rem; /* Tamanho menor do X */
-    padding: 0.25rem;
+.notification .divider {
+  width: 1px;
+  height: 50px;
+  background-color: #b8bdc3;
+  margin-right: 15px;
 }
 
-.alert-custom .close:hover {
-    color: #777; /* Cor mais escura no hover */
+.notification .title {
+  font-weight: bold;
+  font-size: 18px;
+  margin-bottom: 5px;
 }
 
-/* Estilos para os tipos de alerta */
-.alert-success {
-    border-left: 0.25rem solid #28a745;
+.notification .message {
+  color: #6c757d;
+  font-size: 16px;
 }
 
-.alert-success .icon {
-    background-color: #28a745;
-    color: white;
+/* Tipos de alerta */
+.success .icon {
+  background-color: #28a745;
 }
 
-.alert-info {
-    border-left: 0.25rem solid #17a2b8;
+.success .title {
+  color: #28a745;
 }
 
-.alert-info .icon {
-    background-color: #17a2b8;
-    color: white;
+.danger .icon {
+  background-color: #dc3545;
 }
 
-.alert-warning {
-    border-left: 0.25rem solid #ffc107;
+.error .title {
+  color: #dc3545;
 }
 
-.alert-warning .icon {
-    background-color: #ffc107;
-    color: white;
+.info .icon {
+  background-color: #17a2b8;
 }
 
-.alert-danger {
-    border-left: 0.25rem solid #dc3545;
+.info .title {
+  color: #17a2b8;
 }
 
-.alert-danger .icon {
-    background-color: #dc3545;
-    color: white;
+.warning .icon {
+  background-color: #ffc107;
 }
 
-/* Classes para o container de alertas */
-.top-right, .top-left, .bottom-right, .bottom-left, .center, .top-center, .bottom-center {
-    position: fixed;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    z-index: 1050;
+.warning .title {
+  color: #ffc107;
 }
 
-/* Posicionamento específico para cada caso */
+/* Posicionamento das notificações */
 .top-right {
-    top: 1rem;
-    right: 1rem;
+  top: 1rem;
+  right: 1rem;
 }
 
 .top-left {
-    top: 1rem;
-    left: 1rem;
+  top: 1rem;
+  left: 1rem;
 }
 
 .bottom-right {
-    bottom: 1rem;
-    right: 1rem;
+  bottom: 1rem;
+  right: 1rem;
 }
 
 .bottom-left {
-    bottom: 1rem;
-    left: 1rem;
+  bottom: 1rem;
+  left: 1rem;
 }
 
 .center {
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .top-center {
-    top: 1rem;
-    left: 50%;
-    transform: translateX(-50%);
+  top: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
-.bottom-center {
-    bottom: 1rem;
-    left: 50%;
-    transform: translateX(-50%);
+.bottom-center {    
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
-/* Barra de progresso */
-.progress-bar {
+
+
+
+/* Barra de carregamento */
+.notification .progress-bar {
     position: absolute;
     bottom: 0;
     left: 0;
-    height: 0.25rem;
-    animation: load 3s linear forwards;
-    border-radius: 0 0 0.5rem 0.5rem;
+    height: 4px;
+    width: 0%;
+    background-color: transparent;
+    animation: progress-animation 1 linear forwards;
+    border-bottom-left-radius: 10px; 
+    border-bottom-right-radius: 10px; 
+  }
+  
+  /* Animação da barra de carregamento */
+  @keyframes progress-animation {
+    from {
+      width: 0%;
+    }
+    to {
+      width: 100%;
+    }
+  }
+  
+  /* Cores específicas para cada tipo */
+  .success .progress-bar {
+    background-color: #28a745;
+  }
+  
+  .info .progress-bar {
+    background-color: #17a2b8;
+  }
+  
+  .warning .progress-bar {
+    background-color: #ffc107;
+  }
+  
+  .danger .progress-bar {
+    background-color: #dc3545;
+  }
+  
+  
+
+
+  /* Modal */
+
+  .modal-container {
+ 
+    display: flex;
+    justify-content: center; /* Alinha o modal horizontalmente */
+    align-items: center; /* Alinha o modal verticalmente */
+    position: fixed; /* Fixa o modal na tela */
+    top: 0; /* Alinha o topo */
+    left: 0; /* Alinha o lado esquerdo */
+    width: 100vw; /* Ocupa toda a largura da tela */
+    height: 100vh; /* Ocupa toda a altura da tela */
+    margin: 0;
+    z-index: 9999; /* Garante que o modal ficará acima de outros elementos */
+  }
+  
+.modal-dialog {
+    max-width: 545px;
+}
+.modal-content {  
+  
+  background-color: white;
+    border-radius: 10px;
+    padding: 20px;
+    border: none;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
+.modal-header {
+    border-bottom: none;
+    display: flex;
+    justify-content: flex-end;
+    padding: 20px;
+}
+.modal-header .close {
+    font-size: 16px;
+    font-weight: bold;
+    color: #6c757d;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 8px;
+    background-color: #E9ECEF;
+    border: none;
+}
+.modal-body {
 
-.progress-bar-success {
-    background-color: #28a745;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 15px;
+    padding: 20px;
+}
+.modal-body .icon-check {
+    font-size: 24px;
+    color: #ffffff;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 8px;
+    background-color: #ffc107;
+}
+.modal-body .icon-delete {
+    font-size: 24px;
+    color: #ffffff;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 8px;
+    background-color: #dc3545;
+}
+.modal-body .divider {
+    width: 1px;
+    height: 50px;
+    background-color: #b8bdc3;
+    margin-right: 15px;
+}
+.modal-body .modal-title-warning {
+    color: #ffc107;
+}
+.modal-body .modal-title-delete {
+    color: #dc3545;
+}
+.modal-footer {
+    border-top: none;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 20px;
+}
+.btn-cancel {
+  width: 200px !important;
+  width: 200px;
+    border: 1px solid #ced4da;
+    color: #495057;
+    background-color: white;
+    padding: 5px 15px;
+    border-radius: 5px;
+}
+.btn-confirm-warning {
+  width: 200px !important;
+    background-color: #ffc107;
+    color: white;
+    padding: 5px 15px;
+    border-radius: 5px;
+    border: none;
+}
+.btn-confirm-delete {
+  width: 200px !important;
+    background-color: #dc3545;
+    color: white;
+    padding: 5px 15px;
+    border-radius: 5px;
+    border: none;
 }
 
-.progress-bar-info {
-    background-color: #17a2b8;
+  
+
+/* Botão Cancelar */
+.btn-cancel {
+  width: 200px !important;
+  border: 1px solid #ced4da;
+  color: #495057;
+  background-color: white;
+  padding: 5px 15px;
+  border-radius: 5px;
+  transition: background-color 0.3s, color 0.3s; 
 }
 
-.progress-bar-warning {
-    background-color: #ffc107;
+.btn-cancel:hover {
+  background-color: #f8f9fa; 
+  color: #495057; 
+  cursor: pointer;
 }
 
-.progress-bar-danger {
-    background-color: #dc3545;
+
+.btn-confirm-warning:hover {
+  background-color: #e0a800; 
+  transform: scale(1.05); 
+  cursor: pointer;
 }
 
-/* Animação de progresso */
-@keyframes load {
-    from {
-        width: 0;
-    }
-    to {
-        width: 100%;
-    }
+
+
+.btn-confirm-delete:hover {
+  background-color: #c82333;
+  transform: scale(1.05); 
+  cursor: pointer;
 }