<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dashboard de Controle de Tarefas</title>
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<!-- Menu Lateral Fixo -->
<nav class="menu-lateral">
<h2>TaskMaster</h2>
<ul>
<li><a href="#overview">Visão Geral</a></li>
<li><a href="#tasks">Tarefas</a></li>
<li><a href="#progress">Progresso</a></li>
<li><a href="#charts">Gráficos</a></li>
<li><a href="#settings">Configurações</a></li>
</ul>
</nav>
<div class="content">
<!-- Cabeçalho -->
<header class="header">
<h1>Dashboard de Controle de Tarefas</h1>
<p>Organize suas tarefas e maximize sua produtividade.</p>
</header>
<!-- Seção de Visão Geral -->
<section id="overview" class="overview">
<div class="card overview-card">
<i class="fas fa-check-circle"></i>
<h3>Tarefas Concluídas</h3>
<p>25</p>
</div>
<div class="card overview-card">
<i class="fas fa-tasks"></i>
<h3>Tarefas Pendentes</h3>
<p>10</p>
</div>
<div class="card overview-card">
<i class="fas fa-chart-line"></i>
<h3>Progresso</h3>
<p>70%</p>
</div>
</section>
<!-- Seção de Tarefas -->
<section id="tasks" class="tasks">
<h2>Minhas Tarefas</h2>
<div class="task-list">
<div class="task-card">
<h3>Tarefa 1</h3>
<p>Descrição da tarefa 1.</p>
<button class="btn complete-btn">Completar</button>
</div>
<div class="task-card">
<h3>Tarefa 2</h3>
<p>Descrição da tarefa 2.</p>
<button class="btn complete-btn">Completar</button>
</div>
<div class="task-card">
<h3>Tarefa 3</h3>
<p>Descrição da tarefa 3.</p>
<button class="btn complete-btn">Completar</button>
</div>
</div>
</section>
<!-- Seção de Gráficos -->
<section id="charts" class="charts">
<h2>Gráficos Simples</h2>
<div class="charts-container">
<div class="chart">
<canvas id="tasksChart"></canvas>
</div>
<div class="chart">
<canvas id="categoryChart"></canvas>
</div>
<div class="chart">
<canvas id="trendChart"></canvas>
</div>
</div>
</section>
<!-- Seção de Configurações -->
<section id="settings" class="settings">
<h2>Configurações</h2>
<p>Ajuste suas preferências de usuário aqui.</p>
<button class="btn settings-btn">Salvar Alterações</button>
</section>
</div>
<footer>
<p>© 2024 TaskMaster. Todos os direitos reservados.</p>
</footer>
<script>
// Gráfico de Barras
const ctx = document.getElementById("tasksChart").getContext("2d");
const tasksChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["Seg", "Ter", "Qua", "Qui", "Sex"],
datasets: [
{
label: "Tarefas",
data: [2, 3, 5, 4, 6],
backgroundColor: "rgba(76, 175, 80, 0.7)",
borderColor: "rgba(76, 175, 80, 1)",
borderWidth: 1,
},
],
},
options: {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: { display: false },
},
scales: {
y: { display: false },
x: { display: false },
},
},
});
// Gráfico de Pizza
const ctxPie = document.getElementById("categoryChart").getContext("2d");
const categoryChart = new Chart(ctxPie, {
type: "pie",
data: {
labels: ["Trabalho", "Estudo", "Lazer"],
datasets: [
{
data: [10, 5, 3],
backgroundColor: ["#4caf50", "#ff9800", "#2196f3"],
},
],
},
options: {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: { position: "bottom" },
},
},
});
// Gráfico de Linhas
const ctxLine = document.getElementById("trendChart").getContext("2d");
const trendChart = new Chart(ctxLine, {
type: "line",
data: {
labels: ["Semana 1", "Semana 2", "Semana 3", "Semana 4"],
datasets: [
{
label: "Tarefas Concluídas",
data: [15, 20, 25, 30],
borderColor: "rgba(33, 150, 243, 1)",
backgroundColor: "rgba(33, 150, 243, 0.2)",
fill: true,
tension: 0.4,
},
],
},
options: {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: { display: true, position: "top" },
},
scales: {
x: { display: true },
y: { display: true },
},
},
});
</script>
</body>
</html>