File size: 5,382 Bytes
5d4ecc9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | class CustomTaskBoard extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.task-column {
min-height: 300px;
background: rgba(30, 30, 45, 0.5);
}
.task-item {
transition: all 0.2s ease;
}
.task-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3);
}
.task-pending { border-left: 4px solid #f59e0b; }
.task-progress { border-left: 4px solid #3b82f6; }
.task-completed { border-left: 4px solid #10b981; }
</style>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="task-column rounded-lg p-4">
<div class="flex items-center justify-between mb-4">
<h3 class="font-medium text-yellow-400">Pending</h3>
<span class="bg-yellow-900 text-yellow-100 text-xs px-2 py-1 rounded-full">3 tasks</span>
</div>
<div class="space-y-3">
<div class="task-item task-pending bg-gray-800 p-4 rounded-lg">
<h4 class="font-medium text-white">Data collection</h4>
<p class="text-sm text-gray-400 mt-1">Gather customer feedback from social media</p>
<div class="flex items-center justify-between mt-3">
<span class="text-xs text-gray-500">Assigned to Data Miner</span>
<button class="text-yellow-400 hover:text-yellow-300 text-xs">
<i data-feather="chevron-right"></i>
</button>
</div>
</div>
<div class="task-item task-pending bg-gray-800 p-4 rounded-lg">
<h4 class="font-medium text-white">Security audit</h4>
<p class="text-sm text-gray-400 mt-1">Check for vulnerabilities in API endpoints</p>
<div class="flex items-center justify-between mt-3">
<span class="text-xs text-gray-500">Unassigned</span>
<button class="text-yellow-400 hover:text-yellow-300 text-xs">
<i data-feather="chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
<div class="task-column rounded-lg p-4">
<div class="flex items-center justify-between mb-4">
<h3 class="font-medium text-blue-400">In Progress</h3>
<span class="bg-blue-900 text-blue-100 text-xs px-2 py-1 rounded-full">2 tasks</span>
</div>
<div class="space-y-3">
<div class="task-item task-progress bg-gray-800 p-4 rounded-lg">
<h4 class="font-medium text-white">Sentiment analysis</h4>
<p class="text-sm text-gray-400 mt-1">Process customer feedback data</p>
<div class="flex items-center justify-between mt-3">
<span class="text-xs text-gray-500">Assigned to Customer Scout</span>
<button class="text-blue-400 hover:text-blue-300 text-xs">
<i data-feather="chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
<div class="task-column rounded-lg p-4">
<div class="flex items-center justify-between mb-4">
<h3 class="font-medium text-green-400">Completed</h3>
<span class="bg-green-900 text-green-100 text-xs px-2 py-1 rounded-full">5 tasks</span>
</div>
<div class="space-y-3">
<div class="task-item task-completed bg-gray-800 p-4 rounded-lg">
<h4 class="font-medium text-white">Market research</h4>
<p class="text-sm text-gray-400 mt-1">Competitor analysis completed</p>
<div class="flex items-center justify-between mt-3">
<span class="text-xs text-gray-500">Assigned to Data Miner</span>
<button class="text-green-400 hover:text-green-300 text-xs">
<i data-feather="check"></i>
</button>
</div>
</div>
</div>
</div>
</div>
`;
}
}
customElements.define('custom-task-board', CustomTaskBoard); |