📚 StudyFlow

Uma plataforma completa de gestão de estudos construída com HTML, CSS e JavaScript puro — sem frameworks, sem backend, sem cadastro.

Visite o Site

Confira com Ficou o Projeto Clicando Aqui

✅ Funcionalidades

• 📋 Planejador hierárquico — organize em Plano → Módulo → Tópico → Tarefa com prioridades e estimativas de tempo
• ⏱️ Timer Pomodoro — ciclos 25/5/15min com anel SVG animado, modo foco imersivo e mini widget flutuante
• 🃏 Flashcards com revisão espaçada (SRS) — algoritmo calcula automaticamente quando revisar cada card
• 📊 Analytics — heatmap de atividade, gráficos de tempo por tópico e progresso por plano
• 🎮 Gamificação — sistema de XP, níveis, streak diário e 12 conquistas desbloqueáveis
• 🤖 Gerador de plano com IA — descreva o que quer aprender e a IA monta toda a estrutura automaticamente
• 📅 Calendário — registre e visualize suas sessões de estudo
• 🔍 Busca global — encontre tarefas, tópicos e flashcards com Ctrl+K
• 🌙 Tema escuro/claro — alterna com um clique
• 💾 Zero backend — dados salvos no localStorage, funciona offline, export/import em JSON

🖼️ Preview

Landing Page

Dashboard

FlashCads

Configurações

Planejador

Timer Pomodoro

💡 Substitua os links acima pelos screenshots reais do seu repositório

🚀 Como Executar

1. Clone o repositório:

   git clone https://github.com/seu-usuario/studyflow.git

2. Acesse o diretório:

   cd studyflow

3. Abra o arquivo index.html no navegador.

Não precisa instalar nada. Não precisa de servidor. Só abrir e usar. ✅

🔑 Modos de acesso

Modo normal — seus dados pessoais

Abra direto no navegador ou acesse via URL:

studyflow-mystudies.netlify.app

Seus dados são salvos automaticamente no localStorage do navegador.

Modo demo — para visitantes

🛠️ Planos de Estudos

Deixei algumas ideias de Planos de estudos para usar como testes ou aplicar, na pasta de Plano de estudos

• Você também pode criar sus planos de estudos manualmente;
• Gerar um noovo com a IA;
• Exportar os seus planos, nas configurações;
• Importar planos externos, arquivo precisa estar em .json;

🛠️ Tecnologias Utilizadas

• HTML5
• CSS3 (variáveis, grid, flexbox, animações)
• JavaScript ES6+ (sem frameworks)
• Chart.js 4.4.1 — gráficos
• Google Fonts — Syne + DM Sans
• API Anthropic Claude — gerador de planos com IA

📦 Dependências

Nenhuma instalação necessária. As únicas dependências são carregadas via CDN:

<!-- Gráficos -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>

<!-- Fontes -->
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"/>

🤝 Contribuições

Contribuições são bem-vindas! Sinta-se à vontade para abrir issues, sugerir melhorias ou enviar um pull request.

📄 Licença

Este projeto está licenciado sob a Licença MIT. Veja o arquivo LICENSE para mais detalhes.

---

Feito com 💙 por Gisele Lais (https://github.com/ei-Gih)