DoroTime

Aplicativo de foco e produtividade inspirado na técnica Pomodoro. A pessoa escolhe um período de concentração, inicia o timer, pode pausar, reiniciar e, ao final, entra automaticamente no período de descanso.

DoroTime Mini V1 — primeira versão pequena, feita para estudo, prática e validação da ideia antes de evoluir o projeto para uma stack maior (React Native, TypeScript, Node.js, PostgreSQL etc.).

Tecnologias

• HTML5
• CSS3
• JavaScript ES6+

Sem frameworks, sem backend, sem banco de dados. Tudo roda no navegador.

Recursos

• Timer de foco com opções de 25 / 30 / 50 / 60 minutos ou tempo personalizado
• Timer de descanso com opções de 5 / 10 / 15 minutos ou tempo personalizado
• Progresso do timer em um círculo (SVG)
• Perfil local simples ("Como podemos te chamar?"), salvo com localStorage
• Pausar, continuar, reiniciar e encerrar uma sessão
• Alarme sonoro ao final de cada fase (Web Audio API, com suporte a um arquivo assets/audio/alarm.mp3 próprio)
• Tema claro / escuro, salvo com localStorage
• Configurações simples: nome, som, volume e tema
• Estatísticas simples do dia: sessões concluídas e minutos focados

Estrutura do projeto

DoroTime/
│
├── index.html
│
├── css/
│   └── style.css
│
├── js/
│   └── main.js
│
├── assets/
│   ├── audio/     → som do alarme (alarm.mp3 opcional; há fallback em código)
│   ├── icons/     → ícone do app (icon.svg)
│   └── fonts/     → reservado para fontes customizadas futuras
│
└── README.md

Como usar

1. Baixe/clone a pasta DoroTime.
2. Abra o arquivo index.html diretamente no navegador (duplo clique, ou "Abrir com" → navegador).
3. Não é necessário instalar nada nem rodar servidor — é um site estático.

Como funciona (para estudo)

O estado da aplicação vive em um objeto state dentro de js/main.js, com cinco modos possíveis:

• idle — antes de começar, escolhendo a duração
• focus — contando o tempo de estudo
• paused — timer pausado
• rest — contando o tempo de descanso
• completed — sessão concluída (foco + descanso)

Os botões visíveis mudam de acordo com o modo atual (showControls()), e o círculo de progresso é atualizado a cada segundo alterando o stroke-dashoffset de um <circle> SVG.

Principais funções em main.js:

initApp · startTimer (startFocus/startRest) · pauseTimer · resumeTimer · resetTimer · stopTimer · finishFocus · finishRest · updateTimerDisplay · updateProgress · playAlarm · saveSettings · loadSettings

Tudo o que é salvo (nome, configurações e estatísticas do dia) usa localStorage, então os dados continuam lá mesmo depois de fechar o navegador — mas só nesse navegador/dispositivo.

Próximos passos (fora do escopo desta V1)

Esta versão não representa a stack final do projeto. As próximas versões devem evoluir para React, React Native, TypeScript, Node.js, PostgreSQL, SCSS/Tailwind, entre outras tecnologias, conforme o projeto crescer — nada disso foi implementado aqui de propósito.