Download index.html from adsrocha/studyflow: direct link, hf CLI and curl.
- Browser
- Download file 48.7 kB
-
https://huggingface.co/spaces/adsrocha/studyflow/resolve/main/index.html
- Command line
-
hf download hf://spaces/adsrocha/studyflow/index.html
-
curl -L -o index.html https://huggingface.co/spaces/adsrocha/studyflow/resolve/main/index.html
48.7 kB
| <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 --> | |
| <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> | |
| <!-- Mobile Menu --> | |
| <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 Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Dashboard Section --> | |
| <section id="dashboard-section"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Pomodoro Timer --> | |
| <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> | |
| <!-- Current Task --> | |
| <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> | |
| <!-- Stats and Recent Sessions --> | |
| <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> | |
| <!-- Active Study Cycle --> | |
| <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> | |
| <!-- Recent Sessions --> | |
| <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> | |
| <!-- History 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> | |
| <!-- Study Cycles 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> | |
| <!-- New Cycle Modal --> | |
| <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> | |
| <!-- Statistics 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 --> | |
| <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> | |
| // Tab Navigation | |
| 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) { | |
| // Hide all sections | |
| Object.values(sections).forEach(section => { | |
| section.classList.add('hidden'); | |
| }); | |
| // Show selected section | |
| sections[sectionId].classList.remove('hidden'); | |
| // Update tab styling | |
| Object.entries(tabs).forEach(([key, tabElements]) => { | |
| tabElements.forEach(tab => { | |
| if (key === sectionId) { | |
| tab.classList.add('tab-active'); | |
| } else { | |
| tab.classList.remove('tab-active'); | |
| } | |
| }); | |
| }); | |
| } | |
| // Add event listeners to all tabs | |
| Object.entries(tabs).forEach(([sectionId, tabElements]) => { | |
| tabElements.forEach(tab => { | |
| tab.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| showSection(sectionId); | |
| }); | |
| }); | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Pomodoro Timer Logic | |
| 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'; // 'pomodoro', 'shortBreak', 'longBreak' | |
| let timeLeft = 25 * 60; // 25 minutes in seconds | |
| 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')}`; | |
| // Update progress circle | |
| 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() { | |
| // Play sound | |
| 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.'; | |
| } | |
| // Auto-switch mode after completion | |
| setTimeout(() => { | |
| if (currentMode === 'pomodoro') { | |
| setMode('shortBreak'); | |
| } else { | |
| setMode('pomodoro'); | |
| } | |
| }, 2000); | |
| } | |
| function setMode(mode) { | |
| currentMode = mode; | |
| timeLeft = modes[mode].duration; | |
| // Update button styles | |
| 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')); | |
| // Initialize timer | |
| setMode('pomodoro'); | |
| // Task List Management | |
| 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 = ''; | |
| // Add event listener to delete button | |
| const deleteBtn = taskElement.querySelector('.delete-task'); | |
| deleteBtn.addEventListener('click', () => { | |
| taskElement.remove(); | |
| }); | |
| // Add event listener to checkbox | |
| 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(); | |
| } | |
| }); | |
| // Study Cycles Management | |
| 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(); | |
| // Here you would typically send the data to a server | |
| newCycleModal.classList.add('hidden'); | |
| alert('Ciclo criado com sucesso!'); | |
| cycleForm.reset(); | |
| }); | |
| // Charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| if (document.getElementById('daily-time-chart')) { | |
| // 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 | |
| } | |
| } | |
| } | |
| }); | |
| // Subject Distribution Chart | |
| 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' | |
| } | |
| } | |
| } | |
| }); | |
| // Productivity Chart | |
| 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 | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| }); | |
| // Show dashboard by default | |
| 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> |