<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fiñk Energy - Macierz Eisenhowera</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@latest"></script>
</head>
<body class="bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-white">
<div id="app"></div>
<script>
// DATA
const initialTasks = [
// Quadrant 1: Pilne + Ważne
{ id: 1, title: 'Rejestracja spółki', quadrant: 1, status: 'wstrzymane', priority: 'pilne-wazne', owner: 'Marek', deadline: '2026-03-31', description: 'Dwa zespoły prawników muszą się zgodzić na governance structure', reason: 'Czekamy na feedback od doradcy prawnego nr 2' },
{ id: 2, title: 'GIS notifikacja', quadrant: 1, status: 'do-zrobienia', priority: 'pilne-wazne', owner: 'Dominika', deadline: '2026-04-05', description: 'Notyfikacja urzędu rolnictwa o produkcji napoju funkcjonalnego', reason: '' },
{ id: 3, title: 'Kontrakt producent', quadrant: 1, status: 'wstrzymane', priority: 'pilne-wazne', owner: 'Bartek', deadline: '2026-04-10', description: 'Finalizacja umowy z fabryką produkcji (50k szt pilot)', reason: 'Czekamy na zatwierdzenie budżetu seed round' },
// Quadrant 2: Ważne, Nie Pilne
{ id: 4, title: 'Strategia komunikacji', quadrant: 2, status: 'do-zrobienia', priority: 'wazne', owner: 'Oliwia', deadline: '2026-04-15', description: 'Opracowanie messaging framework dla obu kanałów (E-comm + Retail)', reason: '' },
{ id: 5, title: 'Kampania leadów', quadrant: 2, status: 'do-zrobienia', priority: 'wazne', owner: 'Oliwia', deadline: '2026-04-20', description: 'Email sequence (teasing → education → pre-order) dla 6.5k leads', reason: '' },
{ id: 6, title: 'Influencerzy', quadrant: 2, status: 'w-trakcie', priority: 'wazne', owner: 'Oliwia', deadline: '2026-04-25', description: 'Outreach do micro/nano influencerów (10k-100k followers) w niszy energy+suplementy', reason: '' },
{ id: 7, title: 'Daily stack positioning', quadrant: 2, status: 'w-trakcie', priority: 'wazne', owner: 'Marek', deadline: '2026-05-01', description: 'Strategie long-term: Energy → Focus → Sleep → Harmony cross-sell', reason: '' },
// Quadrant 3: Pilne, Nie Ważne
{ id: 8, title: 'Competitive analysis', quadrant: 3, status: 'w-trakcie', priority: 'pilne', owner: 'Bartek', deadline: '2026-03-28', description: 'Deep dive: Brainer vs Matcha funkcjonalna vs Monster/Red Bull positioning', reason: '' },
{ id: 9, title: 'Newsletter', quadrant: 3, status: 'w-trakcie', priority: 'pilne', owner: 'Marek', deadline: '2026-03-30', description: 'Pierwsza edycja newslettera - tease + proof of concept', reason: '' },
{ id: 10, title: 'Packaging', quadrant: 3, status: 'gotowe', priority: 'pilne', owner: 'Dominika', deadline: '2026-03-25', description: '250ml design finalized, ready for production approval', reason: '' },
// Quadrant 4: Backlog
{ id: 11, title: 'Blog research', quadrant: 4, status: 'do-zrobienia', priority: 'backlog', owner: 'Marek', deadline: '2026-05-15', description: 'Content pillars: energy science, adaptogens, nootropics, supplement stacking', reason: '' },
{ id: 12, title: 'Social calendar', quadrant: 4, status: 'do-zrobienia', priority: 'backlog', owner: 'Oliwia', deadline: '2026-05-01', description: '30-day content calendar (Instagram) - pre-launch teasers', reason: '' },
];
const quadrantConfig = {
1: { label: 'Pilne + Ważne', bgColor: 'bg-red-500/20', borderColor: 'border-red-500/50', textColor: 'text-red-400' },
2: { label: 'Ważne, Nie Pilne', bgColor: 'bg-amber-500/20', borderColor: 'border-amber-500/50', textColor: 'text-amber-400' },
3: { label: 'Pilne, Nie Ważne', bgColor: 'bg-blue-500/20', borderColor: 'border-blue-500/50', textColor: 'text-blue-400' },
4: { label: 'Backlog', bgColor: 'bg-gray-700/20', borderColor: 'border-gray-700/50', textColor: 'text-gray-400' },
};
const statusConfig = {
'do-zrobienia': { label: 'Do Zrobienia', class: 'bg-slate-600 text-slate-100' },
'w-trakcie': { label: 'W Trakcie', class: 'bg-blue-600 text-blue-100' },
'gotowe': { label: 'Gotowe', class: 'bg-green-600 text-green-100' },
'wstrzymane': { label: 'Wstrzymane', class: 'bg-orange-600 text-orange-100' },
};
const ownerConfig = {
'Marek': { initials: 'MF', color: 'bg-cyan-500/30 border-cyan-500' },
'Bartek': { initials: 'BK', color: 'bg-green-500/30 border-green-500' },
'Oliwia': { initials: 'OA', color: 'bg-pink-500/30 border-pink-500' },
'Dominika': { initials: 'DD', color: 'bg-purple-500/30 border-purple-500' },
'Monika': { initials: 'MS', color: 'bg-orange-500/30 border-orange-500' },
};
// STATE
let tasks = [...initialTasks];
let filterPerson = 'Wszyscy';
let filterStatus = 'Wszystkie Statusy';
let selectedTask = null;
let draggedTask = null;
// UTILITIES
function getFilteredTasks() {
return tasks.filter(task => {
const personMatch = filterPerson === 'Wszyscy' || task.owner === filterPerson;
const statusMatch = filterStatus === 'Wszystkie Statusy' || task.status === filterStatus;
return personMatch && statusMatch;
});
}
function getTasksByQuadrant(quadrant) {
return getFilteredTasks().filter(t => t.quadrant === quadrant);
}
function calculateKPIs() {
const filtered = getFilteredTasks();
const total = filtered.length || 1;
const q1Done = filtered.filter(t => t.quadrant === 1 && t.status === 'gotowe').length;
const q1Total = filtered.filter(t => t.quadrant === 1).length || 1;
const q2Done = filtered.filter(t => t.quadrant === 2 && t.status === 'gotowe').length;
const q2Total = filtered.filter(t => t.quadrant === 2).length || 1;
const q3Done = filtered.filter(t => t.quadrant === 3 && t.status === 'gotowe').length;
const q3Total = filtered.filter(t => t.quadrant === 3).length || 1;
const q4Done = filtered.filter(t => t.quadrant === 4 && t.status === 'gotowe').length;
const q4Total = filtered.filter(t => t.quadrant === 4).length || 1;
const allDone = filtered.filter(t => t.status === 'gotowe').length;
return {
overall: Math.round((allDone / total) * 100),
q1Wazne: Math.round((q1Done / q1Total) * 100),
q2Ważne: Math.round((q2Done / q2Total) * 100),
q3Pilne: Math.round((q3Done / q3Total) * 100),
q4Backlog: Math.round((q4Done / q4Total) * 100),
};
}
function getTeamProgress() {
const people = ['Marek', 'Bartek', 'Oliwia', 'Dominika', 'Monika'];
return people.map(person => {
const personTasks = tasks.filter(t => t.owner === person);
const doneTasks = personTasks.filter(t => t.status === 'gotowe').length;
const progress = personTasks.length > 0 ? Math.round((doneTasks / personTasks.length) * 100) : 0;
return { person, progress };
});
}
// DRAG & DROP
function handleDragStart(taskId) {
draggedTask = tasks.find(t => t.id === taskId);
}
function handleDrop(newQuadrant) {
if (draggedTask) {
draggedTask.quadrant = newQuadrant;
render();
draggedTask = null;
}
}
// TASK OPERATIONS
function selectTask(taskId) {
selectedTask = tasks.find(t => t.id === taskId);
render();
}
function closeTaskEditor() {
selectedTask = null;
render();
}
function updateTask(updatedTask) {
const index = tasks.findIndex(t => t.id === updatedTask.id);
if (index !== -1) {
tasks[index] = updatedTask;
}
selectedTask = null;
render();
}
function deleteTask(taskId) {
tasks = tasks.filter(t => t.id !== taskId);
selectedTask = null;
render();
}
// RENDERING
function render() {
const app = document.getElementById('app');
const kpis = calculateKPIs();
const teamProgress = getTeamProgress();
app.innerHTML = `
<div class="min-h-screen">
<!-- TOP NAV -->
<div class="fixed top-0 left-0 right-0 h-16 bg-slate-900/80 backdrop-blur-md border-b border-slate-800/50 z-40">
<div class="h-full px-6 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-cyan-400 to-blue-500 flex items-center justify-center text-white font-bold text-sm">F</div>
<span class="text-lg font-bold text-white">Fiñk Energy</span>
</div>
<div class="flex items-center gap-6">
<div class="hidden md:flex items-center gap-2 bg-slate-800/50 rounded-lg px-3 py-2 border border-slate-700">
<svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
<input type="text" placeholder="Szukaj zadań..." class="bg-transparent outline-none text-sm text-white placeholder-slate-500 w-48">
</div>
<button class="p-2 hover:bg-slate-800/50 rounded-lg transition-colors">
<svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
</button>
<button class="p-2 hover:bg-slate-800/50 rounded-lg transition-colors">
<svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
</button>
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 flex items-center justify-center text-white text-xs font-bold">MF</div>
</div>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="pt-16 flex">
<!-- LEFT SIDEBAR -->
<div class="fixed left-0 top-16 w-64 h-[calc(100vh-4rem)] bg-slate-900/50 border-r border-slate-800/50 overflow-y-auto">
<div class="p-6 space-y-8">
<div class="space-y-3">
<h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider">Energia</h3>
<nav class="space-y-2">
<div class="px-3 py-2 rounded-lg text-sm bg-slate-800 text-cyan-400 font-medium cursor-pointer">Dashboard</div>
<div class="px-3 py-2 rounded-lg text-sm text-slate-400 hover:bg-slate-800/50 cursor-pointer">Zadania</div>
<div class="px-3 py-2 rounded-lg text-sm text-slate-400 hover:bg-slate-800/50 cursor-pointer">Zespół</div>
<div class="px-3 py-2 rounded-lg text-sm text-slate-400 hover:bg-slate-800/50 cursor-pointer">Analityka</div>
</nav>
</div>
<button class="w-full flex items-center justify-center gap-2 py-3 rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 text-white font-medium hover:opacity-90 transition-opacity">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
Dodaj Zadanie
</button>
</div>
<div class="absolute bottom-6 left-6 right-6 space-y-2 border-t border-slate-800/50 pt-6">
<button class="w-full flex items-center gap-2 text-sm text-slate-400 hover:text-slate-200 transition-colors">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Pomoc
</button>
<button class="w-full flex items-center gap-2 text-sm text-slate-400 hover:text-slate-200 transition-colors">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
Wyloguj się
</button>
</div>
</div>
<!-- MAIN CONTENT AREA -->
<div class="ml-64 ${selectedTask ? 'mr-96' : ''} px-8 py-8 space-y-6 flex-1 transition-all">
<!-- KPI BAR -->
<div class="grid grid-cols-5 gap-3">
<div class="p-4 rounded-lg bg-gradient-to-br from-slate-600 to-slate-700 border border-slate-700/50 backdrop-blur">
<div class="text-xs text-slate-400 mb-2">Ogółem</div>
<div class="text-2xl font-bold text-white">${kpis.overall}%</div>
</div>
<div class="p-4 rounded-lg bg-gradient-to-br from-red-600/30 to-red-700/30 border border-slate-700/50 backdrop-blur">
<div class="text-xs text-slate-400 mb-2">Pilne+Ważne</div>
<div class="text-2xl font-bold text-white">${kpis.q1Wazne}%</div>
</div>
<div class="p-4 rounded-lg bg-gradient-to-br from-amber-600/30 to-amber-700/30 border border-slate-700/50 backdrop-blur">
<div class="text-xs text-slate-400 mb-2">Ważne</div>
<div class="text-2xl font-bold text-white">${kpis.q2Ważne}%</div>
</div>
<div class="p-4 rounded-lg bg-gradient-to-br from-blue-600/30 to-blue-700/30 border border-slate-700/50 backdrop-blur">
<div class="text-xs text-slate-400 mb-2">Pilne</div>
<div class="text-2xl font-bold text-white">${kpis.q3Pilne}%</div>
</div>
<div class="p-4 rounded-lg bg-gradient-to-br from-gray-600/30 to-gray-700/30 border border-slate-700/50 backdrop-blur">
<div class="text-xs text-slate-400 mb-2">Backlog</div>
<div class="text-2xl font-bold text-white">${kpis.q4Backlog}%</div>
</div>
</div>
<!-- FILTERS -->
<div class="flex gap-3">
<div class="flex items-center gap-2 bg-slate-800/40 border border-slate-700/50 rounded-lg px-3 py-2 backdrop-blur">
<svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
<select id="filterPerson" onchange="filterPerson = this.value; render()" class="bg-transparent outline-none text-sm text-white cursor-pointer">
<option value="Wszyscy">Wszyscy</option>
<option value="Marek">Marek</option>
<option value="Bartek">Bartek</option>
<option value="Oliwia">Oliwia</option>
<option value="Dominika">Dominika</option>
<option value="Monika">Monika</option>
</select>
</div>
<div class="flex items-center gap-2 bg-slate-800/40 border border-slate-700/50 rounded-lg px-3 py-2 backdrop-blur">
<svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
<select id="filterStatus" onchange="filterStatus = this.value; render()" class="bg-transparent outline-none text-sm text-white cursor-pointer">
<option value="Wszystkie Statusy">Wszystkie Statusy</option>
<option value="do-zrobienia">Do Zrobienia</option>
<option value="w-trakcie">W Trakcie</option>
<option value="gotowe">Gotowe</option>
<option value="wstrzymane">Wstrzymane</option>
</select>
</div>
</div>
<!-- MATRIX GRID -->
<div class="grid grid-cols-2 gap-6">
${[1, 2, 3, 4].map(q => `
<div
ondragover="event.preventDefault()"
ondrop="handleDrop(${q})"
class="${quadrantConfig[q].bgColor} border ${quadrantConfig[q].borderColor} rounded-xl p-6 backdrop-blur min-h-96">
<h3 class="${quadrantConfig[q].textColor} text-sm font-bold mb-4 uppercase tracking-wider">${quadrantConfig[q].label}</h3>
<div class="space-y-3">
${getTasksByQuadrant(q).map(task => `
<div
draggable="true"
ondragstart="handleDragStart(${task.id})"
onclick="selectTask(${task.id})"
class="p-3 bg-slate-800/60 border border-slate-700/50 rounded-lg hover:border-slate-600 cursor-move transition-all hover:shadow-lg hover:shadow-slate-900/50">
<div class="flex items-start justify-between gap-2 mb-2">
<h4 class="text-sm font-semibold text-white flex-1">${task.title}</h4>
<span class="${statusConfig[task.status].class} text-xs px-2 py-1 rounded whitespace-nowrap">
${statusConfig[task.status].label}
</span>
</div>
${task.reason ? `<div class="text-xs text-orange-300 mb-2">⚠️ ${task.reason}</div>` : ''}
<div class="flex items-center justify-between text-xs text-slate-400">
<div class="${ownerConfig[task.owner].color} border rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold text-white">
${ownerConfig[task.owner].initials}
</div>
<div>${task.deadline}</div>
</div>
</div>
`).join('')}
</div>
</div>
`).join('')}
</div>
<!-- TEAM PROGRESS FOOTER -->
<div class="mt-8 p-6 bg-slate-800/40 border border-slate-700/50 rounded-lg backdrop-blur">
<h3 class="text-sm font-bold text-slate-300 mb-4">Progress Zespołu</h3>
<div class="space-y-3">
${teamProgress.map(({ person, progress }) => `
<div class="space-y-1">
<div class="flex items-center justify-between text-xs">
<span class="text-slate-300">${person}</span>
<span class="text-slate-400">${progress}%</span>
</div>
<div class="w-full h-2 bg-slate-700/50 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full" style="width: ${progress}%"></div>
</div>
</div>
`).join('')}
</div>
</div>
</div>
<!-- RIGHT SIDEBAR - TASK EDITOR -->
${selectedTask ? `
<div class="fixed right-0 top-16 w-96 h-[calc(100vh-4rem)] bg-slate-900/80 border-l border-slate-800/50 backdrop-blur overflow-y-auto z-30">
<div class="p-6 space-y-4">
<div class="flex items-center justify-between mb-6">
<h3 class="text-sm font-bold text-white uppercase tracking-wider">Szczegóły Zadania</h3>
<button onclick="closeTaskEditor()" class="text-slate-400 hover:text-slate-200 text-2xl leading-none">✕</button>
</div>
<div class="space-y-4">
<div>
<label class="text-xs text-slate-400 uppercase font-semibold block mb-2">Tytuł</label>
<input
id="taskTitle"
type="text"
value="${selectedTask.title}"
class="w-full bg-slate-800/50 border border-slate-700/50 rounded px-3 py-2 text-white outline-none focus:border-cyan-500 transition-colors text-sm">
</div>
<div>
<label class="text-xs text-slate-400 uppercase font-semibold block mb-2">Opis</label>
<textarea
id="taskDesc"
class="w-full bg-slate-800/50 border border-slate-700/50 rounded px-3 py-2 text-white outline-none focus:border-cyan-500 transition-colors text-sm h-24">${selectedTask.description}</textarea>
</div>
<div>
<label class="text-xs text-slate-400 uppercase font-semibold block mb-2">Status</label>
<select id="taskStatus" class="w-full bg-slate-800/50 border border-slate-700/50 rounded px-3 py-2 text-white outline-none focus:border-cyan-500 transition-colors text-sm cursor-pointer">
<option value="do-zrobienia" ${selectedTask.status === 'do-zrobienia' ? 'selected' : ''}>Do Zrobienia</option>
<option value="w-trakcie" ${selectedTask.status === 'w-trakcie' ? 'selected' : ''}>W Trakcie</option>
<option value="gotowe" ${selectedTask.status === 'gotowe' ? 'selected' : ''}>Gotowe</option>
<option value="wstrzymane" ${selectedTask.status === 'wstrzymane' ? 'selected' : ''}>Wstrzymane</option>
</select>
</div>
<div>
<label class="text-xs text-slate-400 uppercase font-semibold block mb-2">Właściciel</label>
<select id="taskOwner" class="w-full bg-slate-800/50 border border-slate-700/50 rounded px-3 py-2 text-white outline-none focus:border-cyan-500 transition-colors text-sm cursor-pointer">
<option value="Marek" ${selectedTask.owner === 'Marek' ? 'selected' : ''}>Marek</option>
<option value="Bartek" ${selectedTask.owner === 'Bartek' ? 'selected' : ''}>Bartek</option>
<option value="Oliwia" ${selectedTask.owner === 'Oliwia' ? 'selected' : ''}>Oliwia</option>
<option value="Dominika" ${selectedTask.owner === 'Dominika' ? 'selected' : ''}>Dominika</option>
<option value="Monika" ${selectedTask.owner === 'Monika' ? 'selected' : ''}>Monika</option>
</select>
</div>
<div>
<label class="text-xs text-slate-400 uppercase font-semibold block mb-2">Termin</label>
<input
id="taskDeadline"
type="date"
value="${selectedTask.deadline}"
class="w-full bg-slate-800/50 border border-slate-700/50 rounded px-3 py-2 text-white outline-none focus:border-cyan-500 transition-colors text-sm">
</div>
<div>
<label class="text-xs text-slate-400 uppercase font-semibold block mb-2">Powód Wstrzymania</label>
<input
id="taskReason"
type="text"
value="${selectedTask.reason || ''}"
placeholder="Np. Czekamy na feedback..."
class="w-full bg-slate-800/50 border border-slate-700/50 rounded px-3 py-2 text-white outline-none focus:border-cyan-500 transition-colors text-sm">
</div>
</div>
<div class="flex gap-3 pt-4 border-t border-slate-700/50">
<button
onclick="updateTask({
id: ${selectedTask.id},
title: document.getElementById('taskTitle').value,
description: document.getElementById('taskDesc').value,
status: document.getElementById('taskStatus').value,
owner: document.getElementById('taskOwner').value,
deadline: document.getElementById('taskDeadline').value,
reason: document.getElementById('taskReason').value,
quadrant: ${selectedTask.quadrant},
priority: '${selectedTask.priority}'
})"
class="flex-1 py-2 bg-gradient-to-r from-cyan-500 to-blue-500 text-white text-sm font-medium rounded hover:opacity-90 transition-opacity flex items-center justify-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Zapisz Zmiany
</button>
<button
onclick="deleteTask(${selectedTask.id})"
class="py-2 px-4 bg-red-500/20 border border-red-500/50 text-red-400 text-sm font-medium rounded hover:bg-red-500/30 transition-colors flex items-center justify-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
Usuń
</button>
</div>
</div>
</div>
` : ''}
</div>
</div>
`;
// Set filter values
document.getElementById('filterPerson').value = filterPerson;
document.getElementById('filterStatus').value = filterStatus;
}
// INITIAL RENDER
render();
</script>
</body>
</html>
