⏰ Alarme Web

Aplicativo completo de relógio e alarmes desenvolvido com HTML, CSS e JavaScript puro, sem frameworks ou bibliotecas externas. Inclui alarmes recorrentes, notificações, sons personalizados, cronômetro, temporizador, histórico e muito mais.

Funcionalidades

• Relógio digital e analógico (alternável)
• Alarmes múltiplos com criação, edição, exclusão e ativação/desativação
• Repetição semanal: selecione dias específicos ou "apenas uma vez"
• Título personalizado para cada alarme
• Sons personalizados: use o som padrão ou envie seu próprio arquivo de áudio
• Modo silencioso para alarmes (sem áudio, apenas visual e notificação)
• Notificações do navegador (Web Notifications API)
• Histórico de ações (criado, editado, excluído, disparado, cancelado)
• Cronômetro com precisão de centésimos
• Temporizador com contagem regressiva, alerta sonoro e visual
• Contagem regressiva para o próximo disparo de cada alarme ativo
• Tema claro, escuro ou automático (segue o sistema)
• Interface responsiva para celulares, tablets e desktops
• Acessibilidade: navegação por teclado, ARIA, foco visível, aria-live

Tecnologias Utilizadas

• HTML5 semântico
• CSS3 (variáveis, flexbox, grid, media queries)
• JavaScript ES6+
• localStorage para persistência
• Web Notifications API
• Web Audio API (via elemento Audio)

Estrutura de Pastas## Estrutura de Pastas

├── assets
│   ├── css
│   │   └── styles.css
│   ├── img
│   ├── js
│   │   └── function.js
│   └── som
│       └── alarm.mp3
├── index.html
└── README.md

Como Executar o Projeto

1. Faça o download ou clone os arquivos.
2. Certifique-se de que o arquivo assets/som/alarm.mp3 existe (ou substitua por outro som).
3. Abra o arquivo index.html em um navegador moderno (Chrome, Firefox, Edge, Safari).
4. Não é necessário servidor ou compilação. Basta abrir o arquivo.

Observação: Algumas funcionalidades, como notificações, podem exigir que a página esteja servida via http:// ou https://, mas a maioria funciona com file://.

Como Testar as Funcionalidades

Alarmes

• Vá para a aba Alarmes.
• Clique em + Novo Alarme.
• Preencha título, hora, minuto, selecione dias de repetição, som e modo silencioso.
• Salve o alarme.
• Use os botões Editar e Excluir para gerenciar.
• Use o interruptor para ativar/desativar.

Som

• No modal de alarme, clique em Testar som para ouvir o som selecionado.
• Para usar um som personalizado, clique em Enviar arquivo de áudio e selecione um arquivo de áudio do seu dispositivo.
• Clique em Parar som para interromper o teste.
• Limitação: O arquivo enviado não é persistido no localStorage devido ao limite de tamanho. Após recarregar a página, o som enviado será perdido e voltará ao padrão.

Notificações

• Vá para Configurações.
• Clique em Solicitar permissão.
• Autorize as notificações no navegador.
• Quando um alarme disparar, uma notificação será exibida (se permitido).
• Se as notificações estiverem bloqueadas, siga as instruções do navegador para habilitá-las.

Cronômetro

• Vá para Cronômetro.
• Clique em Iniciar para começar.
• Use Pausar para pausar e Zerar para reiniciar.
• A precisão é de centésimos de segundo.

Temporizador

• Vá para Temporizador.
• Defina horas, minutos e segundos.
• Marque Modo silencioso se não quiser som ao finalizar.
• Clique em Iniciar.
• O temporizador emite alerta visual e sonoro ao finalizar (se não silencioso).

Histórico

• Vá para Histórico para ver as ações registradas.
• Clique em Limpar Histórico para apagar todas as entradas.

Tema

• Vá para Configurações.
• Escolha Claro, Escuro ou Seguir sistema.
• A preferência é salva no localStorage.

Como Permitir Notificações

1. Abra o aplicativo em um navegador compatível.
2. Vá para Configurações.
3. Clique em Solicitar permissão.
4. O navegador exibirá um pop-up perguntando se você deseja permitir notificações.
5. Clique em Permitir.
6. Se você negar, poderá reverter nas configurações do navegador (geralmente em Privacidade e Segurança > Notificações).

Como Adicionar Sons Personalizados

• No modal de criação/edição de alarme, clique em Enviar arquivo de áudio.
• Selecione um arquivo de áudio do seu computador (MP3, WAV, OGG, etc.).
• O som será usado para o alarme atual.
• Importante: O arquivo não é salvo permanentemente. Após recarregar a página, o som padrão será utilizado.
• Para adicionar sons permanentes, coloque os arquivos na pasta assets/som/ e modifique o JavaScript para incluir novas opções no seletor de som.

Limitações Conhecidas de Aplicações Web

• Alarmes não funcionam com o navegador completamente fechado: Aplicações web não podem executar código em segundo plano indefinidamente quando o navegador é encerrado. Mantenha a página aberta para garantir o disparo.
• Bloqueio de reprodução automática: Alguns navegadores podem bloquear a reprodução de áudio sem interação prévia do usuário. Recomenda-se testar o som antes de ativar o alarme.
• Notificações exigem permissão: O usuário deve autorizar as notificações. Se negadas, não serão exibidas.
• Armazenamento local limitado: O localStorage tem capacidade limitada (geralmente 5–10 MB). Arquivos de áudio não são armazenados por esse motivo.
• Funcionamento em múltiplas abas: A verificação de alarmes ocorre em cada aba aberta. Para evitar múltiplos disparos, mantenha apenas uma aba aberta.
• Suspensão de abas em dispositivos móveis: Sistemas operacionais podem suspender abas em segundo plano, atrasando ou impedindo o disparo de alarmes.

Informações sobre Armazenamento Local

Os seguintes dados são persistidos no localStorage:

• Lista de alarmes
• Tema escolhido
• Modo de relógio (digital/analógico/ambos)
• Preferência de som padrão
• Histórico de ações

Os dados são validados ao carregar e inválidos são ignorados sem quebrar a aplicação.

Compatibilidade com Navegadores

• Google Chrome: ✅ Compatível (desktop e Android)
• Mozilla Firefox: ✅ Compatível (desktop e Android)
• Microsoft Edge: ✅ Compatível
• Safari: ✅ Compatível (desktop e iOS) com algumas limitações em notificações e autoplay
• Opera: ✅ Compatível

Possíveis Melhorias Futuras

• Sincronização entre abas usando BroadcastChannel ou localStorage events
• Suporte a IndexedDB para armazenar sons personalizados
• Interface para adicionar múltiplos sons padrão
• Modo de foco (não perturbe) com horários
• Exportar/importar configurações
• Suporte a PWA para funcionamento offline
• Melhorias visuais com animações mais sofisticadas

---

7. Como executar e testar o projeto

1. Preparar os arquivos
   Crie a estrutura de pastas conforme indicado e salve os arquivos index.html, assets/css/styles.css, assets/js/function.js e README.md nos respectivos locais.
   Coloque um arquivo de som chamado alarm.mp3 dentro de assets/som/ (pode ser qualquer áudio MP3).

2. Abrir no navegador
   Basta abrir o index.html diretamente no navegador (duplo clique).
   Para funcionalidades de notificação, alguns navegadores exigem que a página seja servida via HTTP (ex.: usando um servidor local como o Live Server do VS Code ou python -m http.server).

3. Testar funcionalidades

   • Alterne as abas clicando nos botões do menu.
   • Crie um alarme para alguns minutos à frente e aguarde o disparo.
   • Teste o som no modal do alarme.
   • Use o cronômetro e o temporizador.
   • Verifique o histórico após ações.
   • Mude o tema em Configurações.

4. Testar notificações
   Vá em Configurações → Solicitar permissão. Autorize e crie um alarme para daqui a 1 minuto. A notificação deve aparecer quando o alarme disparar (com a página aberta).

---

8. Limitações técnicas importantes

• Alarmes com navegador fechado: não funcionam. A página precisa estar aberta (ou pelo menos a aba ativa) para o JavaScript executar a verificação.
• Armazenamento de áudio no localStorage: não é possível armazenar arquivos de áudio grandes. O código atual mantém apenas a preferência e usa o arquivo padrão ou um arquivo enviado temporariamente (perdido ao recarregar).
• Bloqueio de autoplay: alguns navegadores exigem interação do usuário antes de reproduzir áudio. O teste de som ajuda a "desbloquear" a reprodução.
• Múltiplas abas: cada aba executa a verificação de alarmes. Recomenda-se usar apenas uma aba para evitar notificações duplicadas.
• Suspensão em dispositivos móveis: em segundo plano, o navegador pode suspender o JavaScript, atrasando o disparo.

Essas limitações são inerentes às aplicações web e foram tratadas na interface e no README.