Notificação agendadas thvinic

by thvinic

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Gerenciador de Notificações</title>
<style>
  body { font-family: Arial, sans-serif; margin: 20px; }
  label, input, button { display: block; margin: 10px 0; }
  ul { list-style: none; padding: 0; }
  li { background: #f0f0f0; margin-bottom: 8px; padding: 8px; border-radius: 4px; }
  .notificacao-texto { font-weight: bold; }
  .notificacao-data { font-size: 0.9em; color: #555; }
  .remover-btn { margin-left: 10px; color: red; cursor: pointer; }
</style>
</head>
<body>

<h2>Adicionar Notificação</h2>
<form id="formNotificacao">
  <label for="texto">Texto da Notificação:</label>
  <input type="text" id="texto" required />

  <label for="dataHora">Data e Hora da Notificação:</label>
  <input type="datetime-local" id="dataHora" required />

  <button type="submit">Adicionar</button>
</form>

<h2>Notificações Agendadas</h2>
<ul id="listaNotificacoes"></ul>

<script>
// Recupera notificações do localStorage ou inicia vazio
let notificacoes = JSON.parse(localStorage.getItem('notificacoes')) || [];

// Função para salvar notificações no localStorage
function salvarNotificacoes() {
  localStorage.setItem('notificacoes', JSON.stringify(notificacoes));
}

// Função para formatar data para exibição
function formatarData(dataStr) {
  const data = new Date(dataStr);
  return data.toLocaleString();
}

// Função para mostrar notificação usando API do navegador ou alert como fallback
function mostrarNotificacao(texto) {
  if (Notification.permission === "granted") {
    new Notification("Lembrete", { body: texto });
  } else {
    alert(texto);
  }
}

// Função para renderizar a lista de notificações
function renderizarLista() {
  const lista = document.getElementById('listaNotificacoes');
  lista.innerHTML = '';
  notificacoes.forEach((not, index) => {
    const li = document.createElement('li');
    li.innerHTML = `
      <span class="notificacao-texto">${not.texto}</span><br/>
      <span...