mirror of
https://github.com/lucasrcsantana/story-generator.git
synced 2025-12-17 05:47:52 +00:00
90 lines
2.4 KiB
Markdown
90 lines
2.4 KiB
Markdown
# Modo Foco
|
|
|
|
## Visão Geral
|
|
O Modo Foco é uma funcionalidade projetada para melhorar a experiência de leitura e gravação de histórias, focando na concentração e acessibilidade.
|
|
|
|
## Funcionalidades
|
|
|
|
### 1. Ativação Automática
|
|
- Inicia automaticamente ao começar uma gravação
|
|
- Desativa automaticamente ao parar a gravação
|
|
- Pode ser ativado/desativado manualmente através do botão dedicado
|
|
|
|
### 2. Interface Adaptativa
|
|
- Remove distrações visuais durante a leitura
|
|
- Aumenta o foco no texto atual
|
|
- Transições suaves entre estados
|
|
|
|
### 3. Controles de Acessibilidade
|
|
- Ajuste de tamanho da fonte (12px - 32px)
|
|
- Controle de espaçamento entre letras
|
|
- Controle de espaçamento entre palavras
|
|
- Ajuste de altura da linha
|
|
- Velocidade de leitura personalizável
|
|
|
|
### 4. Organização dos Controles
|
|
#### Seção 1 (Controles Principais)
|
|
- Maiúsculas/Minúsculas
|
|
- Sílabas
|
|
- Destacar palavras
|
|
|
|
#### Seção 2 (Controles de Formatação)
|
|
- Tamanho da fonte
|
|
- Espaçamento entre letras
|
|
- Espaçamento entre palavras
|
|
- Altura da linha
|
|
- Velocidade de leitura
|
|
|
|
### 5. Indicadores Visuais
|
|
- Ícones intuitivos para cada função
|
|
- Feedback visual do estado atual
|
|
- Timer de gravação
|
|
- Destaque de palavras durante a leitura
|
|
|
|
## Estilos e Temas
|
|
- Modo claro com fundo suave
|
|
- Contraste adequado para leitura
|
|
- Sombras sutis para hierarquia visual
|
|
- Design responsivo para diferentes tamanhos de tela
|
|
|
|
## Integração
|
|
- Componente `AudioRecorder` para gravações
|
|
- Componente `TextControls` para formatação
|
|
- Sistema de destaque de palavras
|
|
- Gerenciamento de estado global
|
|
|
|
## Uso Técnico
|
|
|
|
### Ativação do Modo Foco
|
|
```typescript
|
|
// Em AudioRecorder
|
|
const startRecording = async () => {
|
|
if (!focusModeActive && onFocusModeToggle) {
|
|
onFocusModeToggle();
|
|
}
|
|
// ... resto do código
|
|
};
|
|
```
|
|
|
|
### Desativação do Modo Foco
|
|
```typescript
|
|
// Em AudioRecorder
|
|
const stopRecording = () => {
|
|
// ... código de parada da gravação
|
|
if (focusModeActive && onFocusModeToggle) {
|
|
onFocusModeToggle();
|
|
}
|
|
};
|
|
```
|
|
|
|
## Considerações de Acessibilidade
|
|
- Alto contraste para melhor legibilidade
|
|
- Suporte a diferentes tamanhos de fonte
|
|
- Controles de espaçamento para dislexia
|
|
- Feedback visual claro das ações
|
|
|
|
## Próximos Passos
|
|
1. Implementar persistência das preferências do usuário
|
|
2. Adicionar mais opções de temas
|
|
3. Expandir controles de acessibilidade
|
|
4. Melhorar feedback de progresso da leitura |