```css body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; } header { background-color: #003087; color: #fff; padding: 20px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 20px; } header img { max-width: 100px; height: auto; } header h1 { color: #fff; } .container { max-width: 1200px; margin: 20px auto; background: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1 { color: #003087; text-align: center; } h2, h3 { color: #004aad; } ul, ol { margin-left: 20px; margin-bottom: 20px; } li { margin-bottom: 10px; } code { background-color: #eee; padding: 2px 6px; border-radius: 4px; } a { color: #0066cc; text-decoration: none; } a:hover { text-decoration: underline; } .note { background-color: #e7f3ff; padding: 10px; border-left: 4px solid #0066cc; margin-bottom: 20px; } nav { background-color: #004aad; padding: 10px; margin-bottom: 20px; } nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: center; } nav ul li { margin: 0 15px; } nav ul li a { color: #fff; font-weight: bold; } nav ul li a:hover { color: #e7f3ff; } footer { background-color: #003087; color: #fff; text-align: center; padding: 10px; margin-top: 20px; } footer a { color: #e7f3ff; } footer a:hover { text-decoration: underline; } .section { margin-bottom: 25px; } table { width: 100%; border-collapse: collapse; background: #fff; margin-bottom: 20px; } th, td { border: 1px solid #ccc; padding: 8px; } th { background: #eee; text-align: left; } textarea { width: 100%; resize: vertical; } select { width: 100%; padding: 5px; } .btn { display: inline-block; background-color: #0078d4; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px; text-decoration: none; } .btn:hover { background-color: #005b9e; } @media print { body { background-color: #fff; color: #000; } header, nav, footer, #loginSection { display: none; } a { color: #000; background: none; padding: 0; text-decoration: underline; } .container { box-shadow: none; margin: 0; } .btn { display: none; } } #datetime { font-size: 12px; color: #666; margin-bottom: 10px; } .export-buttons { margin-bottom: 20px; } .task-details { margin-top: 20px; } .subtask-form { margin-top: 10px; } canvas { max-width: 100%; } .subtasks-list { list-style-type: none; padding: 0; } .subtasks-list li { display: flex; align-items: center; margin-bottom: 5px; } .subtasks-list input[type="checkbox"] { margin-right: 10px; } #loginSection { max-width: 400px; margin: 50px auto; padding: 20px; background: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } #eventLogSection { max-height: 200px; overflow-y: auto; background: #f9f9f9; padding: 10px; border: 1px solid #ccc; margin-top: 20px; } #eventLogSection ul { list-style-type: none; padding: 0; } #eventLogSection li { font-size: 12px; color: #333; margin-bottom: 5px; } ``` ### Guia HTML Atualizado (`guia.html`) Abaixo está o `guia.html` atualizado, agora referenciando o `style.css` externo e incluindo instruções completas para usar a tela de tarefas. Guia de Uso - Catálogo de Tarefas SuporTech
SuporTech Logo

Guia de Uso - Catálogo de Tarefas SuporTech

Como Utilizar o Catálogo de Tarefas SuporTech

Este guia explica como usar o sistema de gerenciamento de tarefas da SuporTech. Siga os passos abaixo para acessar, cadastrar, gerenciar e exportar tarefas, além de visualizar logs e gráficos.

1. Acessando o Sistema (Login)

  1. Ao abrir o sistema, você verá a tela de login.
  2. Insira o usuário (admin) e a senha (suportech123) nos campos correspondentes.
  3. Clique no botão Entrar.
  4. Se as credenciais estiverem corretas, você será levado à tela principal. Caso contrário, uma mensagem de erro será exibida, e a tentativa será registrada no log.
Nota: O login é necessário para acessar as funcionalidades do sistema. Contate o suporte em suporte@suportech.com se precisar de assistência.

2. Saindo do Sistema (Logout)

  1. Na barra de navegação, clique em Sair.
  2. Você será redirecionado à tela de login, e o logout será registrado no log de eventos.

3. Cadastrando uma Tarefa

  1. Na seção Cadastro de Tarefas/Ideias, preencha os campos:
    • Nome do Projeto: Nome do projeto relacionado.
    • Nome do Produto: Produto associado à tarefa.
    • Título da Tarefa/Ideia: Um título descritivo.
    • Descrição: Detalhes da tarefa (opcional).
    • Data de Início: Data de início da tarefa.
    • Data Prevista: Data de conclusão prevista.
    • Responsável: Nome ou e-mail do responsável.
    • Porcentagem de Conclusão: Valor inicial entre 0 e 100 (atualizado automaticamente com subtarefas).
  2. Clique em Cadastrar Tarefa.
  3. A tarefa aparecerá na tabela Tarefas Cadastradas, e a ação será registrada no log.

4. Adicionando e Gerenciando Subtarefas

  1. Na tabela Tarefas Cadastradas, clique em Adicionar Subtarefa na coluna Ações da tarefa desejada.
  2. Preencha:
    • Título da Subtarefa: Descrição da subtarefa.
    • Concluída?: Marque se a subtarefa já está concluída.
    • Data de Conclusão: Insira a data se marcada como concluída (opcional).
  3. Clique em Adicionar Subtarefa.
  4. As subtarefas aparecerão na coluna Subtarefas da tabela, com checkboxes.
  5. Marque/desmarque os checkboxes para atualizar o status da subtarefa (concluída/pendente). A % Conclusão da tarefa será atualizada automaticamente com base nas subtarefas concluídas.
  6. Cada ação (adicionar ou atualizar subtarefa) é registrada no log de eventos.

5. Visualizando o Gráfico Burndown

  1. Na tabela Tarefas Cadastradas, clique em Burndown na coluna Ações de uma tarefa com subtarefas.
  2. O gráfico mostrará:
    • Linha Ideal (azul): Progresso esperado de subtarefas concluídas.
    • Linha Atual (vermelha): Progresso real com base nas datas de conclusão das subtarefas.
  3. Se a tarefa não tiver subtarefas, uma mensagem solicitará que você adicione subtarefas primeiro.
Nota: O gráfico usa as datas de início e prevista da tarefa, além das datas de conclusão das subtarefas, para calcular o progresso.

6. Exportando Dados

  1. Na seção de botões, clique em:
    • Exportar PDF: Gera um arquivo PDF com todas as tarefas e subtarefas.
    • Exportar Excel: Gera uma planilha XLSX com as tarefas e subtarefas.
    • Exportar JSON: Gera um arquivo JSON com os dados das tarefas.
    • Exportar Log: Gera um arquivo JSON com o log de eventos.
  2. Os arquivos serão baixados automaticamente, e cada exportação será registrada no log.

7. Integrando com Calendários

  1. Na tabela Tarefas Cadastradas, na coluna Ações, clique em:
    • Google Calendar: Abre o Google Calendar em uma nova aba com os dados da tarefa preenchidos.
    • MS Calendar: Abre o Microsoft Calendar em uma nova aba com os dados da tarefa preenchidos.
  2. Confirme os detalhes no calendário e salve o evento.
  3. Cada integração será registrada no log de eventos.

8. Visualizando o Log de Eventos

  1. Na seção Log de Eventos, você verá as últimas 10 ações realizadas no sistema, incluindo login, logout, cadastros, atualizações e exportações.
  2. Cada entrada mostra:
    • Timestamp: Data e hora da ação (ex.: 06/09/2025 18:29:00).
    • Usuário: Nome do usuário logado (ex.: admin) ou Anônimo para tentativas de login falhas.
    • Ação: Descrição da ação realizada (ex.: Cadastrada nova tarefa ID 1).
  3. Para exportar o log, clique em Exportar Log na seção de botões.

9. Informações de Data, Hora, IP e Localização

  1. No topo da tela principal, você verá:
    • Data e Hora Local: Atualizada a cada minuto.
    • IP: Endereço IP do dispositivo (se disponível).
    • Localização: Coordenadas geográficas (latitude e longitude) se o navegador permitir.
  2. Essas informações são exibidas em letras pequenas e não são armazenadas.

10. Dicas Adicionais

  • Certifique-se de que o arquivo logo.png está na mesma pasta do sistema para que o logotipo apareça corretamente.
  • Os dados das tarefas e logs são salvos no localStorage do navegador. Limpar o cache do navegador apagará esses dados.
  • Para suporte, contate suporte@suportech.com ou ligue para (XX) XXXX-XXXX.