|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>TaskFlow Kanban</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script> |
|
|
<style> |
|
|
.kanban-column { |
|
|
min-height: 70vh; |
|
|
} |
|
|
.task-card { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.task-card:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
#vanta-bg { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
opacity: 0.15; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<div id="vanta-bg"></div> |
|
|
|
|
|
<header class="bg-indigo-600 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-4"> |
|
|
<i data-feather="trello" class="w-8 h-8"></i> |
|
|
<h1 class="text-2xl font-bold">TaskFlow Kanban</h1> |
|
|
</div> |
|
|
<button id="new-project-btn" class="bg-indigo-700 hover:bg-indigo-800 px-4 py-2 rounded-lg flex items-center space-x-2"> |
|
|
<i data-feather="plus" class="w-5 h-5"></i> |
|
|
<span>Novo Projeto</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<label for="project-select" class="text-lg font-semibold text-gray-700">Projeto Atual:</label> |
|
|
<select id="project-select" class="bg-white border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<option value="project-1">Website Redesign</option> |
|
|
<option value="project-2">App Development</option> |
|
|
<option value="project-3">Marketing Campaign</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-gray-100 rounded-lg shadow overflow-hidden"> |
|
|
<div class="bg-gray-700 text-white px-4 py-3 flex justify-between items-center"> |
|
|
<h2 class="font-bold">Backlog</h2> |
|
|
<span class="bg-gray-600 text-xs px-2 py-1 rounded-full">3</span> |
|
|
</div> |
|
|
<div id="backlog-column" class="kanban-column p-4 space-y-4"> |
|
|
|
|
|
<div class="task-card bg-white p-4 rounded-lg shadow cursor-move" draggable="true"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-medium text-gray-800">Criar wireframes</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Design</span> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mt-2">Criar wireframes para as novas páginas do site</p> |
|
|
<div class="flex justify-between items-center mt-4"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-white" src="http://static.photos/people/200x200/1" alt="User 1"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-white" src="http://static.photos/people/200x200/2" alt="User 2"> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500">3 dias atrás</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="task-card bg-white p-4 rounded-lg shadow cursor-move" draggable="true"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-medium text-gray-800">Pesquisa de concorrência</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Pesquisa</span> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mt-2">Analisar os principais concorrentes no mercado</p> |
|
|
<div class="flex justify-between items-center mt-4"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-white" src="http://static.photos/people/200x200/3" alt="User 3"> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500">1 semana atrás</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 flex items-center justify-center space-x-2"> |
|
|
<i data-feather="plus" class="w-4 h-4"></i> |
|
|
<span>Adicionar Tarefa</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-100 rounded-lg shadow overflow-hidden"> |
|
|
<div class="bg-blue-600 text-white px-4 py-3 flex justify-between items-center"> |
|
|
<h2 class="font-bold">Em Progresso</h2> |
|
|
<span class="bg-blue-500 text-xs px-2 py-1 rounded-full">2</span> |
|
|
</div> |
|
|
<div id="progress-column" class="kanban-column p-4 space-y-4"> |
|
|
<div class="task-card bg-white p-4 rounded-lg shadow cursor-move" draggable="true"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-medium text-gray-800">Desenvolver API</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Desenvolvimento</span> |
|
|
<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Urgente</span> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mt-2">Criar endpoints para o novo sistema</p> |
|
|
<div class="flex justify-between items-center mt-4"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-white" src="http://static.photos/people/200x200/4" alt="User 4"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-white" src="http://static.photos/people/200x200/5" alt="User 5"> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500">2 dias atrás</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="task-card bg-white p-4 rounded-lg shadow cursor-move" draggable="true"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-medium text-gray-800">Revisão de conteúdo</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="bg-pink-100 text-pink-800 text-xs px-2 py-1 rounded">Copywriting</span> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mt-2">Revisar todos os textos do novo site</p> |
|
|
<div class="flex justify-between items-center mt-4"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-white" src="http://static.photos/people/200x200/6" alt="User 6"> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500">Ontem</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 flex items-center justify-center space-x-2"> |
|
|
<i data-feather="plus" class="w-4 h-4"></i> |
|
|
<span>Adicionar Tarefa</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-100 rounded-lg shadow overflow-hidden"> |
|
|
<div class="bg-green-600 text-white px-4 py-3 flex justify-between items-center"> |
|
|
<h2 class="font-bold">Concluído</h2> |
|
|
<span class="bg-green-500 text-xs px-2 py-1 rounded-full">4</span> |
|
|
</div> |
|
|
<div id="done-column" class="kanban-column p-4 space-y-4"> |
|
|
<div class="task-card bg-white p-4 rounded-lg shadow cursor-move" draggable="true"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-medium text-gray-800">Briefing inicial</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">Reunião</span> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mt-2">Definir escopo inicial do projeto</p> |
|
|
<div class="flex justify-between items-center mt-4"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-white" src="http://static.photos/people/200x200/7" alt="User 7"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-white" src="http://static.photos/people/200x200/8" alt="User 8"> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500">2 semanas atrás</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="task-card bg-white p-4 rounded-lg shadow cursor-move" draggable="true"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-medium text-gray-800">Configurar servidor</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">DevOps</span> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mt-2">Preparar ambiente de desenvolvimento</p> |
|
|
<div class="flex justify-between items-center mt-4"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-white" src="http://static.photos/people/200x200/9" alt="User 9"> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500">5 dias atrás</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 flex items-center justify-center space-x-2"> |
|
|
<i data-feather="plus" class="w-4 h-4"></i> |
|
|
<span>Adicionar Tarefa</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div id="project-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> |
|
|
<div class="bg-white rounded-lg 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">Novo Projeto</h3> |
|
|
<button id="close-modal-btn" class="text-gray-500 hover:text-gray-700"> |
|
|
<i data-feather="x" class="w-6 h-6"></i> |
|
|
</button> |
|
|
</div> |
|
|
<form id="new-project-form"> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label for="project-name" class="block text-sm font-medium text-gray-700 mb-1">Nome do Projeto</label> |
|
|
<input type="text" id="project-name" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="project-description" class="block text-sm font-medium text-gray-700 mb-1">Descrição</label> |
|
|
<textarea id="project-description" rows="3" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label for="project-team" class="block text-sm font-medium text-gray-700 mb-1">Membros da Equipe</label> |
|
|
<input type="text" id="project-team" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Digite emails separados por vírgulas"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 flex justify-end space-x-3"> |
|
|
<button type="button" id="cancel-project-btn" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">Cancelar</button> |
|
|
<button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">Criar Projeto</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
new Sortable(document.getElementById('backlog-column'), { |
|
|
group: 'kanban', |
|
|
animation: 150, |
|
|
ghostClass: 'sortable-ghost' |
|
|
}); |
|
|
|
|
|
new Sortable(document.getElementById('progress-column'), { |
|
|
group: 'kanban', |
|
|
animation: 150, |
|
|
ghostClass: 'sortable-ghost' |
|
|
}); |
|
|
|
|
|
new Sortable(document.getElementById('done-column'), { |
|
|
group: 'kanban', |
|
|
animation: 150, |
|
|
ghostClass: 'sortable-ghost' |
|
|
}); |
|
|
|
|
|
|
|
|
const modal = document.getElementById('project-modal'); |
|
|
const newProjectBtn = document.getElementById('new-project-btn'); |
|
|
const closeModalBtn = document.getElementById('close-modal-btn'); |
|
|
const cancelProjectBtn = document.getElementById('cancel-project-btn'); |
|
|
|
|
|
newProjectBtn.addEventListener('click', () => { |
|
|
modal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
closeModalBtn.addEventListener('click', () => { |
|
|
modal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
cancelProjectBtn.addEventListener('click', () => { |
|
|
modal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('new-project-form').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
const projectName = document.getElementById('project-name').value; |
|
|
|
|
|
console.log('Novo projeto criado:', projectName); |
|
|
modal.classList.add('hidden'); |
|
|
|
|
|
this.reset(); |
|
|
|
|
|
const select = document.getElementById('project-select'); |
|
|
const newOption = document.createElement('option'); |
|
|
newOption.value = 'project-' + (select.options.length + 1); |
|
|
newOption.textContent = projectName; |
|
|
select.appendChild(newOption); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
