| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>StudyFlow - Seu Gerenciador de Estudos Inteligente</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| .pomodoro-timer { |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .timer-progress { |
| stroke-dasharray: 628; |
| stroke-dashoffset: 628; |
| transform: rotate(-90deg); |
| transform-origin: 50% 50%; |
| } |
| .tab-active { |
| border-bottom: 3px solid #667eea; |
| color: #667eea; |
| font-weight: 600; |
| } |
| .session-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
| .cycle-item:hover { |
| background-color: #f8fafc; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen font-sans"> |
| |
| <header class="gradient-bg text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-book-open text-2xl"></i> |
| <h1 class="text-2xl font-bold">StudyFlow</h1> |
| </div> |
| <nav class="hidden md:flex space-x-6"> |
| <a href="#" class="hover:text-gray-200 transition" id="dashboard-tab">Dashboard</a> |
| <a href="#" class="hover:text-gray-200 transition" id="history-tab">Histórico</a> |
| <a href="#" class="hover:text-gray-200 transition" id="cycles-tab">Ciclos</a> |
| <a href="#" class="hover:text-gray-200 transition" id="stats-tab">Estatísticas</a> |
| </nav> |
| <div class="flex items-center space-x-4"> |
| <button class="bg-white text-indigo-700 px-4 py-2 rounded-full font-medium hover:bg-indigo-50 transition"> |
| <i class="fas fa-user mr-2"></i>Perfil |
| </button> |
| <button class="md:hidden text-white" id="mobile-menu-button"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div class="md:hidden hidden bg-white shadow-lg" id="mobile-menu"> |
| <div class="container mx-auto px-4 py-2 flex flex-col"> |
| <a href="#" class="py-3 border-b border-gray-100" id="mobile-dashboard-tab">Dashboard</a> |
| <a href="#" class="py-3 border-b border-gray-100" id="mobile-history-tab">Histórico</a> |
| <a href="#" class="py-3 border-b border-gray-100" id="mobile-cycles-tab">Ciclos</a> |
| <a href="#" class="py-3" id="mobile-stats-tab">Estatísticas</a> |
| </div> |
| </div> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| |
| <section id="dashboard-section"> |
| <div class="flex flex-col lg:flex-row gap-8"> |
| |
| <div class="lg:w-1/3"> |
| <div class="bg-white rounded-xl pomodoro-timer p-6"> |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Pomodoro Timer</h2> |
| <div class="flex justify-center mb-6"> |
| <div class="relative w-64 h-64"> |
| <svg class="w-full h-full" viewBox="0 0 200 200"> |
| <circle cx="100" cy="100" r="90" fill="none" stroke="#e2e8f0" stroke-width="10"/> |
| <circle id="progress-circle" cx="100" cy="100" r="90" fill="none" stroke="#667eea" stroke-width="10" stroke-linecap="round" class="timer-progress"/> |
| </svg> |
| <div class="absolute inset-0 flex flex-col items-center justify-center"> |
| <div id="time-display" class="text-4xl font-bold text-gray-800">25:00</div> |
| <div id="timer-state" class="text-gray-500">Pronto para começar</div> |
| </div> |
| </div> |
| </div> |
| <div class="flex justify-center space-x-4 mb-6"> |
| <button id="pomodoro-btn" class="px-4 py-2 bg-indigo-100 text-indigo-700 rounded-full font-medium">Pomodoro</button> |
| <button id="short-break-btn" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full font-medium">Pausa Curta</button> |
| <button id="long-break-btn" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full font-medium">Pausa Longa</button> |
| </div> |
| <div class="flex justify-center"> |
| <button id="start-stop-btn" class="px-8 py-3 bg-indigo-600 text-white rounded-full font-medium hover:bg-indigo-700 transition"> |
| <i class="fas fa-play mr-2"></i>Começar |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md p-6 mt-6"> |
| <h2 class="text-xl font-bold text-gray-800 mb-4">Tarefa Atual</h2> |
| <div class="flex items-center mb-4"> |
| <input type="text" id="current-task" placeholder="O que você está estudando?" class="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <button id="add-task-btn" class="ml-2 bg-indigo-600 text-white p-2 rounded-lg hover:bg-indigo-700 transition"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| <div id="task-list" class="space-y-2"> |
| <div class="flex items-center justify-between bg-gray-50 p-3 rounded-lg"> |
| <div class="flex items-center"> |
| <input type="checkbox" class="h-5 w-5 text-indigo-600 rounded"> |
| <span class="ml-3 text-gray-700">Revisão de Matemática</span> |
| </div> |
| <button class="text-gray-400 hover:text-red-500"> |
| <i class="fas fa-trash"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="lg:w-2/3"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-indigo-100 text-indigo-600 mr-4"> |
| <i class="fas fa-clock text-xl"></i> |
| </div> |
| <div> |
| <div class="text-gray-500">Tempo Hoje</div> |
| <div class="text-2xl font-bold">2h 45m</div> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> |
| <i class="fas fa-check-circle text-xl"></i> |
| </div> |
| <div> |
| <div class="text-gray-500">Pomodoros</div> |
| <div class="text-2xl font-bold">5</div> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> |
| <i class="fas fa-fire text-xl"></i> |
| </div> |
| <div> |
| <div class="text-gray-500">Dias Consecutivos</div> |
| <div class="text-2xl font-bold">12</div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-xl font-bold text-gray-800">Ciclo Ativo</h2> |
| <button class="text-indigo-600 hover:text-indigo-800 font-medium">Ver Todos</button> |
| </div> |
| <div class="bg-indigo-50 rounded-lg p-4"> |
| <div class="flex justify-between items-center mb-2"> |
| <h3 class="font-semibold text-indigo-800">Preparação para ENEM</h3> |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">70% completo</span> |
| </div> |
| <p class="text-gray-600 text-sm mb-3">Ciclo de estudos focado nas matérias do ENEM com revisões semanais.</p> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-indigo-600 h-2 rounded-full" style="width: 70%"></div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-xl font-bold text-gray-800">Sessões Recentes</h2> |
| <button class="text-indigo-600 hover:text-indigo-800 font-medium">Ver Histórico Completo</button> |
| </div> |
| <div class="space-y-4"> |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg session-card transition"> |
| <div class="flex items-center"> |
| <div class="p-2 bg-indigo-100 rounded-lg text-indigo-600 mr-3"> |
| <i class="fas fa-book"></i> |
| </div> |
| <div> |
| <div class="font-medium">Matemática</div> |
| <div class="text-sm text-gray-500">25/06/2023 - 25 minutos</div> |
| </div> |
| </div> |
| <div class="text-sm text-gray-500">Pomodoro #1</div> |
| </div> |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg session-card transition"> |
| <div class="flex items-center"> |
| <div class="p-2 bg-green-100 rounded-lg text-green-600 mr-3"> |
| <i class="fas fa-coffee"></i> |
| </div> |
| <div> |
| <div class="font-medium">Pausa Curta</div> |
| <div class="text-sm text-gray-500">25/06/2023 - 5 minutos</div> |
| </div> |
| </div> |
| <div class="text-sm text-gray-500">Descanso</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="history-section" class="hidden"> |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Histórico de Sessões</h2> |
| <div class="flex space-x-2"> |
| <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
| <option>Filtrar por</option> |
| <option>Esta semana</option> |
| <option>Este mês</option> |
| <option>Últimos 3 meses</option> |
| </select> |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition"> |
| <i class="fas fa-download mr-2"></i>Exportar |
| </button> |
| </div> |
| </div> |
| |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duração</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tarefa</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ciclo</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr class="hover:bg-gray-50"> |
| <td class="px-6 py-4 whitespace-nowrap">25/06/2023</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-indigo-100 text-indigo-800">Pomodoro</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap">25 minutos</td> |
| <td class="px-6 py-4 whitespace-nowrap">Revisão de Matemática</td> |
| <td class="px-6 py-4 whitespace-nowrap">Preparação ENEM</td> |
| </tr> |
| <tr class="hover:bg-gray-50"> |
| <td class="px-6 py-4 whitespace-nowrap">25/06/2023</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Pausa</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap">5 minutos</td> |
| <td class="px-6 py-4 whitespace-nowrap">-</td> |
| <td class="px-6 py-4 whitespace-nowrap">-</td> |
| </tr> |
| <tr class="hover:bg-gray-50"> |
| <td class="px-6 py-4 whitespace-nowrap">24/06/2023</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-indigo-100 text-indigo-800">Pomodoro</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap">25 minutos</td> |
| <td class="px-6 py-4 whitespace-nowrap">Redação ENEM</td> |
| <td class="px-6 py-4 whitespace-nowrap">Preparação ENEM</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <div class="flex justify-between items-center mt-6"> |
| <div class="text-sm text-gray-500">Mostrando 1 a 3 de 15 registros</div> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Anterior</button> |
| <button class="px-3 py-1 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">1</button> |
| <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">2</button> |
| <button class="px-3 py-1 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Próximo</button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="cycles-section" class="hidden"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Meus Ciclos de Estudo</h2> |
| <button id="new-cycle-btn" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition"> |
| <i class="fas fa-plus mr-2"></i>Novo Ciclo |
| </button> |
| </div> |
| |
| |
| <div id="new-cycle-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> |
| <div class="bg-white rounded-xl p-6 w-full max-w-md"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-bold text-gray-800">Criar Novo Ciclo</h3> |
| <button id="close-cycle-modal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <form id="cycle-form"> |
| <div class="mb-4"> |
| <label for="cycle-name" class="block text-sm font-medium text-gray-700 mb-1">Nome do Ciclo</label> |
| <input type="text" id="cycle-name" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Ex: Preparação para ENEM"> |
| </div> |
| <div class="mb-4"> |
| <label for="cycle-duration" class="block text-sm font-medium text-gray-700 mb-1">Duração (semanas)</label> |
| <input type="number" id="cycle-duration" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" min="1" value="4"> |
| </div> |
| <div class="mb-4"> |
| <label for="cycle-description" class="block text-sm font-medium text-gray-700 mb-1">Descrição</label> |
| <textarea id="cycle-description" rows="3" class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Objetivos e detalhes do ciclo..."></textarea> |
| </div> |
| <div class="flex justify-end space-x-3"> |
| <button type="button" id="cancel-cycle" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Cancelar</button> |
| <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">Criar Ciclo</button> |
| </div> |
| </form> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| <div class="bg-white rounded-xl shadow-md overflow-hidden cycle-item transition"> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="text-lg font-semibold text-gray-800">Preparação para ENEM</h3> |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Ativo</span> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">Ciclo de estudos focado nas matérias do ENEM com revisões semanais.</p> |
| <div class="flex justify-between items-center text-sm"> |
| <div> |
| <div class="text-gray-500">Progresso</div> |
| <div class="font-medium">70%</div> |
| </div> |
| <div> |
| <div class="text-gray-500">Tempo</div> |
| <div class="font-medium">12h 30m</div> |
| </div> |
| <div> |
| <div class="text-gray-500">Sessões</div> |
| <div class="font-medium">15</div> |
| </div> |
| </div> |
| </div> |
| <div class="px-6 pb-4"> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-indigo-600 h-2 rounded-full" style="width: 70%"></div> |
| </div> |
| </div> |
| <div class="border-t border-gray-100 px-6 py-3 bg-gray-50 flex justify-between"> |
| <span class="text-sm text-gray-500">Iniciado em: 10/06/2023</span> |
| <div class="flex space-x-2"> |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">Editar</button> |
| <button class="text-red-600 hover:text-red-800 text-sm font-medium">Excluir</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden cycle-item transition"> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="text-lg font-semibold text-gray-800">Vestibular Medicina</h3> |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Pausado</span> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">Ciclo intensivo para vestibular de medicina com foco em biologia e química.</p> |
| <div class="flex justify-between items-center text-sm"> |
| <div> |
| <div class="text-gray-500">Progresso</div> |
| <div class="font-medium">45%</div> |
| </div> |
| <div> |
| <div class="text-gray-500">Tempo</div> |
| <div class="font-medium">8h 15m</div> |
| </div> |
| <div> |
| <div class="text-gray-500">Sessões</div> |
| <div class="font-medium">10</div> |
| </div> |
| </div> |
| </div> |
| <div class="px-6 pb-4"> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 45%"></div> |
| </div> |
| </div> |
| <div class="border-t border-gray-100 px-6 py-3 bg-gray-50 flex justify-between"> |
| <span class="text-sm text-gray-500">Iniciado em: 01/05/2023</span> |
| <div class="flex space-x-2"> |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">Editar</button> |
| <button class="text-red-600 hover:text-red-800 text-sm font-medium">Excluir</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden cycle-item transition"> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="text-lg font-semibold text-gray-800">Certificação TI</h3> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Completo</span> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">Preparação para certificação em redes e infraestrutura de TI.</p> |
| <div class="flex justify-between items-center text-sm"> |
| <div> |
| <div class="text-gray-500">Progresso</div> |
| <div class="font-medium">100%</div> |
| </div> |
| <div> |
| <div class="text-gray-500">Tempo</div> |
| <div class="font-medium">25h 40m</div> |
| </div> |
| <div> |
| <div class="text-gray-500">Sessões</div> |
| <div class="font-medium">32</div> |
| </div> |
| </div> |
| </div> |
| <div class="px-6 pb-4"> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div> |
| </div> |
| </div> |
| <div class="border-t border-gray-100 px-6 py-3 bg-gray-50 flex justify-between"> |
| <span class="text-sm text-gray-500">Concluído em: 15/04/2023</span> |
| <div class="flex space-x-2"> |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">Ver</button> |
| <button class="text-red-600 hover:text-red-800 text-sm font-medium">Excluir</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="stats-section" class="hidden"> |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Estatísticas de Estudo</h2> |
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> |
| <div> |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Tempo por Dia (últimos 7 dias)</h3> |
| <div class="h-64"> |
| <canvas id="daily-time-chart"></canvas> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Distribuição por Matéria</h3> |
| <div class="h-64"> |
| <canvas id="subject-distribution-chart"></canvas> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Produtividade Semanal</h3> |
| <div class="h-96"> |
| <canvas id="productivity-chart"></canvas> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Metas</h3> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="border border-gray-200 rounded-lg p-4"> |
| <div class="flex justify-between items-center mb-2"> |
| <div class="font-medium">Pomodoros Semanais</div> |
| <div class="text-sm text-gray-500">15/20</div> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-indigo-600 h-2 rounded-full" style="width: 75%"></div> |
| </div> |
| </div> |
| <div class="border border-gray-200 rounded-lg p-4"> |
| <div class="flex justify-between items-center mb-2"> |
| <div class="font-medium">Horas Semanais</div> |
| <div class="text-sm text-gray-500">8h/10h</div> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-green-500 h-2 rounded-full" style="width: 80%"></div> |
| </div> |
| </div> |
| <div class="border border-gray-200 rounded-lg p-4"> |
| <div class="flex justify-between items-center mb-2"> |
| <div class="font-medium">Dias Consecutivos</div> |
| <div class="text-sm text-gray-500">12/30</div> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 40%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="bg-gray-100 border-t border-gray-200 mt-12"> |
| <div class="container mx-auto px-4 py-8"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> |
| <i class="fas fa-book-open text-xl text-indigo-600"></i> |
| <span class="text-lg font-semibold">StudyFlow</span> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-600 hover:text-indigo-600">Termos</a> |
| <a href="#" class="text-gray-600 hover:text-indigo-600">Privacidade</a> |
| <a href="#" class="text-gray-600 hover:text-indigo-600">Contato</a> |
| </div> |
| </div> |
| <div class="mt-6 text-center md:text-left text-sm text-gray-500"> |
| © 2023 StudyFlow. Todos os direitos reservados. |
| </div> |
| </div> |
| </footer> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script> |
| |
| const sections = { |
| 'dashboard': document.getElementById('dashboard-section'), |
| 'history': document.getElementById('history-section'), |
| 'cycles': document.getElementById('cycles-section'), |
| 'stats': document.getElementById('stats-section') |
| }; |
| |
| const tabs = { |
| 'dashboard': [ |
| document.getElementById('dashboard-tab'), |
| document.getElementById('mobile-dashboard-tab') |
| ], |
| 'history': [ |
| document.getElementById('history-tab'), |
| document.getElementById('mobile-history-tab') |
| ], |
| 'cycles': [ |
| document.getElementById('cycles-tab'), |
| document.getElementById('mobile-cycles-tab') |
| ], |
| 'stats': [ |
| document.getElementById('stats-tab'), |
| document.getElementById('mobile-stats-tab') |
| ] |
| }; |
| |
| function showSection(sectionId) { |
| |
| Object.values(sections).forEach(section => { |
| section.classList.add('hidden'); |
| }); |
| |
| |
| sections[sectionId].classList.remove('hidden'); |
| |
| |
| Object.entries(tabs).forEach(([key, tabElements]) => { |
| tabElements.forEach(tab => { |
| if (key === sectionId) { |
| tab.classList.add('tab-active'); |
| } else { |
| tab.classList.remove('tab-active'); |
| } |
| }); |
| }); |
| } |
| |
| |
| Object.entries(tabs).forEach(([sectionId, tabElements]) => { |
| tabElements.forEach(tab => { |
| tab.addEventListener('click', (e) => { |
| e.preventDefault(); |
| showSection(sectionId); |
| }); |
| }); |
| }); |
| |
| |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); |
| const mobileMenu = document.getElementById('mobile-menu'); |
| |
| mobileMenuButton.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| const timerDisplay = document.getElementById('time-display'); |
| const timerState = document.getElementById('timer-state'); |
| const startStopBtn = document.getElementById('start-stop-btn'); |
| const progressCircle = document.getElementById('progress-circle'); |
| |
| const pomodoroBtn = document.getElementById('pomodoro-btn'); |
| const shortBreakBtn = document.getElementById('short-break-btn'); |
| const longBreakBtn = document.getElementById('long-break-btn'); |
| |
| let timerInterval; |
| let isRunning = false; |
| let currentMode = 'pomodoro'; |
| let timeLeft = 25 * 60; |
| |
| const modes = { |
| pomodoro: { duration: 25 * 60, color: 'indigo' }, |
| shortBreak: { duration: 5 * 60, color: 'green' }, |
| longBreak: { duration: 15 * 60, color: 'blue' } |
| }; |
| |
| function updateDisplay() { |
| const minutes = Math.floor(timeLeft / 60); |
| const seconds = timeLeft % 60; |
| timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; |
| |
| |
| const mode = modes[currentMode]; |
| const progress = 628 - (timeLeft / mode.duration * 628); |
| progressCircle.style.strokeDashoffset = progress; |
| progressCircle.style.stroke = `#${currentMode === 'pomodoro' ? '667eea' : currentMode === 'shortBreak' ? '10b981' : '3b82f6'}`; |
| } |
| |
| function startTimer() { |
| if (timerInterval) clearInterval(timerInterval); |
| |
| isRunning = true; |
| startStopBtn.innerHTML = '<i class="fas fa-pause mr-2"></i>Pausar'; |
| startStopBtn.classList.remove('bg-indigo-600'); |
| startStopBtn.classList.add('bg-yellow-500'); |
| |
| timerState.textContent = currentMode === 'pomodoro' ? 'Foco no estudo!' : 'Hora de descansar'; |
| |
| timerInterval = setInterval(() => { |
| timeLeft--; |
| updateDisplay(); |
| |
| if (timeLeft <= 0) { |
| clearInterval(timerInterval); |
| timerComplete(); |
| } |
| }, 1000); |
| } |
| |
| function stopTimer() { |
| clearInterval(timerInterval); |
| isRunning = false; |
| startStopBtn.innerHTML = '<i class="fas fa-play mr-2"></i>Começar'; |
| startStopBtn.classList.remove('bg-yellow-500'); |
| startStopBtn.classList.add('bg-indigo-600'); |
| timerState.textContent = 'Pausado'; |
| } |
| |
| function timerComplete() { |
| |
| const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3'); |
| audio.play(); |
| |
| isRunning = false; |
| startStopBtn.innerHTML = '<i class="fas fa-play mr-2"></i>Começar'; |
| startStopBtn.classList.remove('bg-yellow-500'); |
| startStopBtn.classList.add('bg-indigo-600'); |
| |
| if (currentMode === 'pomodoro') { |
| timerState.textContent = 'Pomodoro completo! Hora de uma pausa.'; |
| } else { |
| timerState.textContent = 'Pausa completa! Hora de voltar ao trabalho.'; |
| } |
| |
| |
| setTimeout(() => { |
| if (currentMode === 'pomodoro') { |
| setMode('shortBreak'); |
| } else { |
| setMode('pomodoro'); |
| } |
| }, 2000); |
| } |
| |
| function setMode(mode) { |
| currentMode = mode; |
| timeLeft = modes[mode].duration; |
| |
| |
| pomodoroBtn.classList.remove('bg-indigo-100', 'text-indigo-700'); |
| pomodoroBtn.classList.add('bg-gray-100', 'text-gray-700'); |
| shortBreakBtn.classList.remove('bg-green-100', 'text-green-700'); |
| shortBreakBtn.classList.add('bg-gray-100', 'text-gray-700'); |
| longBreakBtn.classList.remove('bg-blue-100', 'text-blue-700'); |
| longBreakBtn.classList.add('bg-gray-100', 'text-gray-700'); |
| |
| if (mode === 'pomodoro') { |
| pomodoroBtn.classList.remove('bg-gray-100', 'text-gray-700'); |
| pomodoroBtn.classList.add('bg-indigo-100', 'text-indigo-700'); |
| timerState.textContent = isRunning ? 'Foco no estudo!' : 'Pronto para começar'; |
| } else if (mode === 'shortBreak') { |
| shortBreakBtn.classList.remove('bg-gray-100', 'text-gray-700'); |
| shortBreakBtn.classList.add('bg-green-100', 'text-green-700'); |
| timerState.textContent = isRunning ? 'Hora de descansar' : 'Pronto para pausa curta'; |
| } else { |
| longBreakBtn.classList.remove('bg-gray-100', 'text-gray-700'); |
| longBreakBtn.classList.add('bg-blue-100', 'text-blue-700'); |
| timerState.textContent = isRunning ? 'Hora de descansar' : 'Pronto para pausa longa'; |
| } |
| |
| updateDisplay(); |
| |
| if (isRunning) { |
| startTimer(); |
| } |
| } |
| |
| startStopBtn.addEventListener('click', () => { |
| if (isRunning) { |
| stopTimer(); |
| } else { |
| startTimer(); |
| } |
| }); |
| |
| pomodoroBtn.addEventListener('click', () => setMode('pomodoro')); |
| shortBreakBtn.addEventListener('click', () => setMode('shortBreak')); |
| longBreakBtn.addEventListener('click', () => setMode('longBreak')); |
| |
| |
| setMode('pomodoro'); |
| |
| |
| const taskInput = document.getElementById('current-task'); |
| const addTaskBtn = document.getElementById('add-task-btn'); |
| const taskList = document.getElementById('task-list'); |
| |
| function addTask() { |
| const taskText = taskInput.value.trim(); |
| if (taskText === '') return; |
| |
| const taskId = Date.now(); |
| |
| const taskElement = document.createElement('div'); |
| taskElement.className = 'flex items-center justify-between bg-gray-50 p-3 rounded-lg'; |
| taskElement.innerHTML = ` |
| <div class="flex items-center"> |
| <input type="checkbox" class="h-5 w-5 text-indigo-600 rounded" id="task-${taskId}"> |
| <label for="task-${taskId}" class="ml-3 text-gray-700">${taskText}</label> |
| </div> |
| <button class="text-gray-400 hover:text-red-500 delete-task"> |
| <i class="fas fa-trash"></i> |
| </button> |
| `; |
| |
| taskList.prepend(taskElement); |
| taskInput.value = ''; |
| |
| |
| const deleteBtn = taskElement.querySelector('.delete-task'); |
| deleteBtn.addEventListener('click', () => { |
| taskElement.remove(); |
| }); |
| |
| |
| const checkbox = taskElement.querySelector('input[type="checkbox"]'); |
| checkbox.addEventListener('change', (e) => { |
| const label = taskElement.querySelector('label'); |
| if (e.target.checked) { |
| label.classList.add('line-through', 'text-gray-400'); |
| } else { |
| label.classList.remove('line-through', 'text-gray-400'); |
| } |
| }); |
| } |
| |
| addTaskBtn.addEventListener('click', addTask); |
| taskInput.addEventListener('keypress', (e) => { |
| if (e.key === 'Enter') { |
| addTask(); |
| } |
| }); |
| |
| |
| const newCycleBtn = document.getElementById('new-cycle-btn'); |
| const newCycleModal = document.getElementById('new-cycle-modal'); |
| const closeCycleModal = document.getElementById('close-cycle-modal'); |
| const cancelCycle = document.getElementById('cancel-cycle'); |
| const cycleForm = document.getElementById('cycle-form'); |
| |
| newCycleBtn.addEventListener('click', () => { |
| newCycleModal.classList.remove('hidden'); |
| }); |
| |
| closeCycleModal.addEventListener('click', () => { |
| newCycleModal.classList.add('hidden'); |
| }); |
| |
| cancelCycle.addEventListener('click', () => { |
| newCycleModal.classList.add('hidden'); |
| }); |
| |
| cycleForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| |
| newCycleModal.classList.add('hidden'); |
| alert('Ciclo criado com sucesso!'); |
| cycleForm.reset(); |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| if (document.getElementById('daily-time-chart')) { |
| |
| const dailyTimeCtx = document.getElementById('daily-time-chart').getContext('2d'); |
| const dailyTimeChart = new Chart(dailyTimeCtx, { |
| type: 'bar', |
| data: { |
| labels: ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'], |
| datasets: [{ |
| label: 'Minutos estudados', |
| data: [45, 60, 30, 75, 90, 50, 25], |
| backgroundColor: '#667eea', |
| borderRadius: 4 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: true, |
| ticks: { |
| callback: function(value) { |
| return value + 'm'; |
| } |
| } |
| } |
| }, |
| plugins: { |
| legend: { |
| display: false |
| } |
| } |
| } |
| }); |
| |
| |
| const subjectDistCtx = document.getElementById('subject-distribution-chart').getContext('2d'); |
| const subjectDistChart = new Chart(subjectDistCtx, { |
| type: 'doughnut', |
| data: { |
| labels: ['Matemática', 'Português', 'História', 'Geografia', 'Ciências'], |
| datasets: [{ |
| data: [35, 25, 15, 15, 10], |
| backgroundColor: [ |
| '#667eea', |
| '#10b981', |
| '#f59e0b', |
| '#3b82f6', |
| '#ef4444' |
| ], |
| borderWidth: 0 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| position: 'right' |
| } |
| } |
| } |
| }); |
| |
| |
| const productivityCtx = document.getElementById('productivity-chart').getContext('2d'); |
| const productivityChart = new Chart(productivityCtx, { |
| type: 'line', |
| data: { |
| labels: ['Semana 1', 'Semana 2', 'Semana 3', 'Semana 4', 'Semana 5'], |
| datasets: [ |
| { |
| label: 'Pomodoros', |
| data: [12, 15, 10, 18, 20], |
| borderColor: '#667eea', |
| backgroundColor: 'rgba(102, 126, 234, 0.1)', |
| fill: true, |
| tension: 0.3 |
| }, |
| { |
| label: 'Horas', |
| data: [5, 6, 4, 7, 8], |
| borderColor: '#10b981', |
| backgroundColor: 'rgba(16, 185, 129, 0.1)', |
| fill: true, |
| tension: 0.3 |
| } |
| ] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: true |
| } |
| } |
| } |
| }); |
| } |
| }); |
| |
| |
| showSection('dashboard'); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=adsrocha/studyflow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
