Pomodoro Focus Timer

Descrição  

Aplicação web para gerenciamento de tempo baseada na técnica Pomodoro, integrando funcionalidades de produtividade com elementos multimídia. Desenvolvida para ajudar usuários a manterem o foco durante sessões de trabalho/estudo, alternando entre períodos de concentração e pausas programadas.

Características Principais  

Sistema de Temporizador Inteligente

• Ciclos préconfigurados (Focus Time/Short Break/Long Break)  
• Transição automática entre modos  
• Contador de ciclos completos (4 ciclos = Long Break)  

 Integração Multimídia  

• Player de áudio integrado para música Lofi  
• Controles de volume e play/pause  
• Suporte a arquivos MP3 personalizáveis  

 Personalização Avançada  

• Ajuste de cores para cada modo de operação  
• Configuração de durações individuais  
• Banco de frases motivacionais editável

 Recursos de Usabilidade  

• Interface responsiva para diferentes dispositivos  
• Modal com instruções do método Pomodoro  
• Sistema de notificações visuais e sonoras  

 Tecnologias Utilizadas  

Linguagens (Marcação/Estilo/Programação)

• HTML5  
• CSS3  
• JavaScript (ES6+)  

 Frameworks e Bibliotecas  

• Tailwind CSS (estilização)
• Font Awesome (ícones)

 Recursos Externos  

• Web Audio API (controle de áudio)  
• CSS Transitions (animações)  

• Local Storage (persistência de configurações)  

   

Design  

 Princípios Visuais  

• Layout minimalista com hierarquia clara  
• Efeito "glassmorphism" na barra de navegação  
• Transições suaves entre estados e modos  

 Experiência do Usuário  

• Feedback visual imediato para ações  
• Sistema de cores dinâmico por modo ativo  
• Tipografia legível com contraste otimizado  

 Acessibilidade  

• Navegação via teclado  
• Contrastes WCAG compatíveis  
• Semântica HTML aprimorada