| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ZenTask - Minimal Todo App</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #f8fafc; |
| } |
| |
| .task-item:hover .task-actions { |
| opacity: 1; |
| } |
| |
| .task-actions { |
| opacity: 0; |
| transition: opacity 0.2s ease; |
| } |
| |
| .checkbox-container input { |
| position: absolute; |
| opacity: 0; |
| cursor: pointer; |
| height: 0; |
| width: 0; |
| } |
| |
| .checkmark { |
| position: relative; |
| height: 20px; |
| width: 20px; |
| border: 2px solid #94a3b8; |
| border-radius: 4px; |
| transition: all 0.2s ease; |
| } |
| |
| .checkbox-container input:checked ~ .checkmark { |
| background-color: #4f46e5; |
| border-color: #4f46e5; |
| } |
| |
| .checkmark:after { |
| content: ""; |
| position: absolute; |
| display: none; |
| } |
| |
| .checkbox-container input:checked ~ .checkmark:after { |
| display: block; |
| } |
| |
| .checkbox-container .checkmark:after { |
| left: 6px; |
| top: 2px; |
| width: 5px; |
| height: 10px; |
| border: solid white; |
| border-width: 0 2px 2px 0; |
| transform: rotate(45deg); |
| } |
| |
| .fade-in { |
| animation: fadeIn 0.3s ease-in-out; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .priority-high { |
| border-left: 4px solid #ef4444; |
| } |
| |
| .priority-medium { |
| border-left: 4px solid #f59e0b; |
| } |
| |
| .priority-low { |
| border-left: 4px solid #10b981; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen bg-gray-50"> |
| <div class="container mx-auto px-4 py-8 max-w-3xl"> |
| <header class="mb-8 text-center"> |
| <h1 class="text-4xl font-bold text-indigo-600 mb-2">ZenTask</h1> |
| <p class="text-gray-600">Your minimalist productivity companion</p> |
| </header> |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6 transition-all duration-300 hover:shadow-lg"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="relative flex-grow"> |
| <input |
| type="text" |
| id="new-task-input" |
| placeholder="What needs to be done?" |
| class="w-full px-4 py-3 border-0 rounded-lg bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition" |
| autocomplete="off" |
| > |
| </div> |
| <button |
| id="add-task-btn" |
| class="ml-3 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-3 rounded-lg transition flex items-center" |
| > |
| <i class="fas fa-plus mr-2"></i> Add |
| </button> |
| </div> |
| |
| <div class="flex items-center justify-between text-sm"> |
| <div class="flex space-x-2"> |
| <button id="priority-high-btn" class="px-3 py-1 rounded-full bg-red-100 text-red-600 flex items-center"> |
| <i class="fas fa-exclamation-circle mr-1"></i> High |
| </button> |
| <button id="priority-medium-btn" class="px-3 py-1 rounded-full bg-amber-100 text-amber-600 flex items-center"> |
| <i class="fas fa-exclamation mr-1"></i> Medium |
| </button> |
| <button id="priority-low-btn" class="px-3 py-1 rounded-full bg-emerald-100 text-emerald-600 flex items-center"> |
| <i class="fas fa-arrow-down mr-1"></i> Low |
| </button> |
| </div> |
| |
| <div class="flex items-center"> |
| <span id="task-count" class="text-gray-500">0 tasks</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-6 flex justify-between items-center"> |
| <div class="flex space-x-2"> |
| <button id="filter-all" class="px-4 py-2 rounded-lg bg-indigo-100 text-indigo-700 font-medium">All</button> |
| <button id="filter-active" class="px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-100">Active</button> |
| <button id="filter-completed" class="px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-100">Completed</button> |
| </div> |
| |
| <button id="clear-completed" class="text-gray-500 hover:text-gray-700 text-sm"> |
| <i class="fas fa-trash-alt mr-1"></i> Clear completed |
| </button> |
| </div> |
| |
| <div id="tasks-container" class="space-y-3"> |
| |
| <div class="text-center py-10 text-gray-500" id="empty-state"> |
| <i class="fas fa-tasks text-4xl mb-3 opacity-30"></i> |
| <p class="text-lg">No tasks yet</p> |
| <p class="text-sm mt-1">Add your first task to get started</p> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const newTaskInput = document.getElementById('new-task-input'); |
| const addTaskBtn = document.getElementById('add-task-btn'); |
| const tasksContainer = document.getElementById('tasks-container'); |
| const emptyState = document.getElementById('empty-state'); |
| const taskCount = document.getElementById('task-count'); |
| const clearCompletedBtn = document.getElementById('clear-completed'); |
| |
| |
| const priorityHighBtn = document.getElementById('priority-high-btn'); |
| const priorityMediumBtn = document.getElementById('priority-medium-btn'); |
| const priorityLowBtn = document.getElementById('priority-low-btn'); |
| |
| |
| const filterAllBtn = document.getElementById('filter-all'); |
| const filterActiveBtn = document.getElementById('filter-active'); |
| const filterCompletedBtn = document.getElementById('filter-completed'); |
| |
| |
| let tasks = JSON.parse(localStorage.getItem('tasks')) || []; |
| let currentPriority = 'medium'; |
| let currentFilter = 'all'; |
| |
| |
| updateTaskCount(); |
| renderTasks(); |
| |
| |
| addTaskBtn.addEventListener('click', addTask); |
| newTaskInput.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') addTask(); |
| }); |
| |
| priorityHighBtn.addEventListener('click', () => setPriority('high')); |
| priorityMediumBtn.addEventListener('click', () => setPriority('medium')); |
| priorityLowBtn.addEventListener('click', () => setPriority('low')); |
| |
| filterAllBtn.addEventListener('click', () => setFilter('all')); |
| filterActiveBtn.addEventListener('click', () => setFilter('active')); |
| filterCompletedBtn.addEventListener('click', () => setFilter('completed')); |
| |
| clearCompletedBtn.addEventListener('click', clearCompletedTasks); |
| |
| |
| function addTask() { |
| const taskText = newTaskInput.value.trim(); |
| if (taskText === '') return; |
| |
| const newTask = { |
| id: Date.now(), |
| text: taskText, |
| completed: false, |
| priority: currentPriority, |
| createdAt: new Date().toISOString() |
| }; |
| |
| tasks.unshift(newTask); |
| saveTasks(); |
| renderTasks(); |
| updateTaskCount(); |
| |
| newTaskInput.value = ''; |
| newTaskInput.focus(); |
| } |
| |
| function renderTasks() { |
| if (tasks.length === 0) { |
| emptyState.style.display = 'block'; |
| tasksContainer.innerHTML = ''; |
| tasksContainer.appendChild(emptyState); |
| return; |
| } |
| |
| emptyState.style.display = 'none'; |
| |
| let filteredTasks = [...tasks]; |
| |
| if (currentFilter === 'active') { |
| filteredTasks = tasks.filter(task => !task.completed); |
| } else if (currentFilter === 'completed') { |
| filteredTasks = tasks.filter(task => task.completed); |
| } |
| |
| if (filteredTasks.length === 0) { |
| const noTasksMessage = document.createElement('div'); |
| noTasksMessage.className = 'text-center py-10 text-gray-500'; |
| noTasksMessage.innerHTML = ` |
| <i class="fas fa-info-circle text-3xl mb-3 opacity-30"></i> |
| <p class="text-lg">No ${currentFilter} tasks</p> |
| `; |
| tasksContainer.innerHTML = ''; |
| tasksContainer.appendChild(noTasksMessage); |
| return; |
| } |
| |
| tasksContainer.innerHTML = ''; |
| |
| filteredTasks.forEach(task => { |
| const taskElement = document.createElement('div'); |
| taskElement.className = `task-item bg-white rounded-lg shadow-sm p-4 flex items-center justify-between fade-in priority-${task.priority}`; |
| taskElement.dataset.id = task.id; |
| |
| const leftSection = document.createElement('div'); |
| leftSection.className = 'flex items-center'; |
| |
| const checkboxContainer = document.createElement('label'); |
| checkboxContainer.className = 'checkbox-container flex items-center cursor-pointer mr-3'; |
| |
| const checkbox = document.createElement('input'); |
| checkbox.type = 'checkbox'; |
| checkbox.checked = task.completed; |
| checkbox.className = 'task-checkbox'; |
| |
| const checkmark = document.createElement('span'); |
| checkmark.className = 'checkmark'; |
| |
| checkboxContainer.appendChild(checkbox); |
| checkboxContainer.appendChild(checkmark); |
| |
| const taskText = document.createElement('span'); |
| taskText.className = `task-text ${task.completed ? 'line-through text-gray-400' : 'text-gray-700'}`; |
| taskText.textContent = task.text; |
| |
| leftSection.appendChild(checkboxContainer); |
| leftSection.appendChild(taskText); |
| |
| const taskActions = document.createElement('div'); |
| taskActions.className = 'task-actions flex space-x-2'; |
| |
| const editBtn = document.createElement('button'); |
| editBtn.className = 'text-gray-400 hover:text-indigo-500 transition'; |
| editBtn.innerHTML = '<i class="fas fa-pencil-alt"></i>'; |
| |
| const deleteBtn = document.createElement('button'); |
| deleteBtn.className = 'text-gray-400 hover:text-red-500 transition'; |
| deleteBtn.innerHTML = '<i class="fas fa-trash-alt"></i>'; |
| |
| taskActions.appendChild(editBtn); |
| taskActions.appendChild(deleteBtn); |
| |
| taskElement.appendChild(leftSection); |
| taskElement.appendChild(taskActions); |
| |
| tasksContainer.appendChild(taskElement); |
| |
| |
| checkbox.addEventListener('change', () => toggleTaskComplete(task.id)); |
| editBtn.addEventListener('click', () => editTask(task.id)); |
| deleteBtn.addEventListener('click', () => deleteTask(task.id)); |
| }); |
| } |
| |
| function toggleTaskComplete(taskId) { |
| const taskIndex = tasks.findIndex(task => task.id === taskId); |
| if (taskIndex !== -1) { |
| tasks[taskIndex].completed = !tasks[taskIndex].completed; |
| saveTasks(); |
| updateTaskCount(); |
| |
| if (currentFilter !== 'all') { |
| renderTasks(); |
| } else { |
| const taskElement = document.querySelector(`.task-item[data-id="${taskId}"]`); |
| if (taskElement) { |
| const taskText = taskElement.querySelector('.task-text'); |
| if (tasks[taskIndex].completed) { |
| taskText.classList.add('line-through', 'text-gray-400'); |
| } else { |
| taskText.classList.remove('line-through', 'text-gray-400'); |
| } |
| } |
| } |
| } |
| } |
| |
| function editTask(taskId) { |
| const task = tasks.find(task => task.id === taskId); |
| if (!task) return; |
| |
| const taskElement = document.querySelector(`.task-item[data-id="${taskId}"]`); |
| if (!taskElement) return; |
| |
| const leftSection = taskElement.querySelector('.flex.items-center'); |
| const taskText = taskElement.querySelector('.task-text'); |
| const taskActions = taskElement.querySelector('.task-actions'); |
| |
| const editInput = document.createElement('input'); |
| editInput.type = 'text'; |
| editInput.value = task.text; |
| editInput.className = 'px-2 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500'; |
| |
| const saveBtn = document.createElement('button'); |
| saveBtn.className = 'ml-2 px-3 py-1 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition'; |
| saveBtn.textContent = 'Save'; |
| |
| const cancelBtn = document.createElement('button'); |
| cancelBtn.className = 'ml-2 px-3 py-1 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition'; |
| cancelBtn.textContent = 'Cancel'; |
| |
| leftSection.removeChild(taskText); |
| leftSection.appendChild(editInput); |
| taskActions.style.display = 'none'; |
| |
| leftSection.appendChild(saveBtn); |
| leftSection.appendChild(cancelBtn); |
| |
| editInput.focus(); |
| |
| saveBtn.addEventListener('click', () => { |
| const newText = editInput.value.trim(); |
| if (newText !== '') { |
| task.text = newText; |
| saveTasks(); |
| } |
| cancelEdit(); |
| }); |
| |
| cancelBtn.addEventListener('click', cancelEdit); |
| |
| editInput.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| const newText = editInput.value.trim(); |
| if (newText !== '') { |
| task.text = newText; |
| saveTasks(); |
| } |
| cancelEdit(); |
| } |
| }); |
| |
| function cancelEdit() { |
| leftSection.removeChild(editInput); |
| leftSection.removeChild(saveBtn); |
| leftSection.removeChild(cancelBtn); |
| leftSection.appendChild(taskText); |
| taskActions.style.display = 'flex'; |
| } |
| } |
| |
| function deleteTask(taskId) { |
| tasks = tasks.filter(task => task.id !== taskId); |
| saveTasks(); |
| renderTasks(); |
| updateTaskCount(); |
| } |
| |
| function clearCompletedTasks() { |
| tasks = tasks.filter(task => !task.completed); |
| saveTasks(); |
| renderTasks(); |
| updateTaskCount(); |
| } |
| |
| function setPriority(priority) { |
| currentPriority = priority; |
| |
| |
| priorityHighBtn.className = 'px-3 py-1 rounded-full flex items-center'; |
| priorityMediumBtn.className = 'px-3 py-1 rounded-full flex items-center'; |
| priorityLowBtn.className = 'px-3 py-1 rounded-full flex items-center'; |
| |
| |
| if (priority === 'high') { |
| priorityHighBtn.className = 'px-3 py-1 rounded-full bg-red-100 text-red-600 flex items-center'; |
| } else if (priority === 'medium') { |
| priorityMediumBtn.className = 'px-3 py-1 rounded-full bg-amber-100 text-amber-600 flex items-center'; |
| } else { |
| priorityLowBtn.className = 'px-3 py-1 rounded-full bg-emerald-100 text-emerald-600 flex items-center'; |
| } |
| } |
| |
| function setFilter(filter) { |
| currentFilter = filter; |
| |
| |
| filterAllBtn.className = 'px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-100'; |
| filterActiveBtn.className = 'px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-100'; |
| filterCompletedBtn.className = 'px-4 py-2 rounded-lg text-gray-600 hover:bg-gray-100'; |
| |
| |
| if (filter === 'all') { |
| filterAllBtn.className = 'px-4 py-2 rounded-lg bg-indigo-100 text-indigo-700 font-medium'; |
| } else if (filter === 'active') { |
| filterActiveBtn.className = 'px-4 py-2 rounded-lg bg-indigo-100 text-indigo-700 font-medium'; |
| } else { |
| filterCompletedBtn.className = 'px-4 py-2 rounded-lg bg-indigo-100 text-indigo-700 font-medium'; |
| } |
| |
| renderTasks(); |
| } |
| |
| function updateTaskCount() { |
| const totalTasks = tasks.length; |
| const completedTasks = tasks.filter(task => task.completed).length; |
| const activeTasks = totalTasks - completedTasks; |
| |
| if (totalTasks === 0) { |
| taskCount.textContent = 'No tasks'; |
| } else if (completedTasks === 0) { |
| taskCount.textContent = `${activeTasks} ${activeTasks === 1 ? 'task' : 'tasks'} remaining`; |
| } else { |
| taskCount.textContent = `${activeTasks} of ${totalTasks} ${totalTasks === 1 ? 'task' : 'tasks'} remaining`; |
| } |
| } |
| |
| function saveTasks() { |
| localStorage.setItem('tasks', JSON.stringify(tasks)); |
| } |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=claudelle/todo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
