| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>TaskFlow - Modern Task Manager</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| :root { |
| --primary: #667eea; |
| --primary-dark: #5a67d8; |
| --secondary: #48bb78; |
| --danger: #f56565; |
| --warning: #ed8936; |
| --dark: #2d3748; |
| --light: #f7fafc; |
| --gray: #718096; |
| --border: #e2e8f0; |
| --shadow: rgba(0, 0, 0, 0.1); |
| --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| |
| body { |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| color: var(--dark); |
| } |
| |
| header { |
| background: rgba(255, 255, 255, 0.95); |
| backdrop-filter: blur(10px); |
| padding: 1rem 2rem; |
| box-shadow: 0 2px 20px var(--shadow); |
| position: sticky; |
| top: 0; |
| z-index: 100; |
| } |
| |
| .header-content { |
| max-width: 1200px; |
| margin: 0 auto; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .logo { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| font-size: 1.5rem; |
| font-weight: bold; |
| color: var(--primary); |
| } |
| |
| .logo-icon { |
| width: 35px; |
| height: 35px; |
| background: var(--gradient); |
| border-radius: 8px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| font-size: 20px; |
| } |
| |
| .stats { |
| display: flex; |
| gap: 2rem; |
| align-items: center; |
| } |
| |
| .stat-item { |
| text-align: center; |
| } |
| |
| .stat-value { |
| font-size: 1.5rem; |
| font-weight: bold; |
| color: var(--primary); |
| } |
| |
| .stat-label { |
| font-size: 0.875rem; |
| color: var(--gray); |
| } |
| |
| main { |
| flex: 1; |
| padding: 2rem; |
| max-width: 1200px; |
| margin: 0 auto; |
| width: 100%; |
| } |
| |
| .container { |
| display: grid; |
| grid-template-columns: 1fr 2fr; |
| gap: 2rem; |
| height: 100%; |
| } |
| |
| .sidebar { |
| background: white; |
| border-radius: 20px; |
| padding: 1.5rem; |
| box-shadow: 0 10px 40px var(--shadow); |
| height: fit-content; |
| position: sticky; |
| top: 100px; |
| } |
| |
| .add-task-form { |
| margin-bottom: 2rem; |
| } |
| |
| .form-group { |
| margin-bottom: 1rem; |
| } |
| |
| label { |
| display: block; |
| margin-bottom: 0.5rem; |
| font-weight: 500; |
| color: var(--dark); |
| } |
| |
| input, textarea, select { |
| width: 100%; |
| padding: 0.75rem; |
| border: 2px solid var(--border); |
| border-radius: 10px; |
| font-size: 1rem; |
| transition: all 0.3s ease; |
| } |
| |
| input:focus, textarea:focus, select:focus { |
| outline: none; |
| border-color: var(--primary); |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
| } |
| |
| textarea { |
| resize: vertical; |
| min-height: 80px; |
| } |
| |
| .priority-select { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 0.5rem; |
| } |
| |
| .priority-btn { |
| padding: 0.5rem; |
| border: 2px solid var(--border); |
| background: white; |
| border-radius: 8px; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| font-size: 0.875rem; |
| } |
| |
| .priority-btn.active { |
| color: white; |
| } |
| |
| .priority-btn[data-priority="low"].active { |
| background: var(--secondary); |
| border-color: var(--secondary); |
| } |
| |
| .priority-btn[data-priority="medium"].active { |
| background: var(--warning); |
| border-color: var(--warning); |
| } |
| |
| .priority-btn[data-priority="high"].active { |
| background: var(--danger); |
| border-color: var(--danger); |
| } |
| |
| .btn-primary { |
| width: 100%; |
| padding: 1rem; |
| background: var(--gradient); |
| color: white; |
| border: none; |
| border-radius: 10px; |
| font-size: 1rem; |
| font-weight: 600; |
| cursor: pointer; |
| transition: transform 0.2s ease, box-shadow 0.2s ease; |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4); |
| } |
| |
| .tasks-section { |
| background: white; |
| border-radius: 20px; |
| padding: 1.5rem; |
| box-shadow: 0 10px 40px var(--shadow); |
| } |
| |
| .section-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 1.5rem; |
| } |
| |
| .section-title { |
| font-size: 1.5rem; |
| font-weight: bold; |
| color: var(--dark); |
| } |
| |
| .filter-tabs { |
| display: flex; |
| gap: 0.5rem; |
| background: var(--light); |
| padding: 0.25rem; |
| border-radius: 10px; |
| } |
| |
| .filter-tab { |
| padding: 0.5rem 1rem; |
| background: transparent; |
| border: none; |
| border-radius: 8px; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| font-weight: 500; |
| color: var(--gray); |
| } |
| |
| .filter-tab.active { |
| background: white; |
| color: var(--primary); |
| box-shadow: 0 2px 10px var(--shadow); |
| } |
| |
| .tasks-list { |
| display: flex; |
| flex-direction: column; |
| gap: 1rem; |
| } |
| |
| .task-item { |
| background: var(--light); |
| padding: 1rem; |
| border-radius: 12px; |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| transition: all 0.3s ease; |
| cursor: pointer; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .task-item:hover { |
| transform: translateX(5px); |
| box-shadow: 0 5px 20px var(--shadow); |
| } |
| |
| .task-item.completed { |
| opacity: 0.6; |
| } |
| |
| .task-item.completed .task-title { |
| text-decoration: line-through; |
| } |
| |
| .task-checkbox { |
| width: 24px; |
| height: 24px; |
| border: 2px solid var(--border); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| flex-shrink: 0; |
| } |
| |
| .task-checkbox.checked { |
| background: var(--gradient); |
| border-color: var(--primary); |
| } |
| |
| .task-checkbox.checked::after { |
| content: '✓'; |
| color: white; |
| font-weight: bold; |
| } |
| |
| .task-content { |
| flex: 1; |
| } |
| |
| .task-title { |
| font-weight: 600; |
| margin-bottom: 0.25rem; |
| color: var(--dark); |
| } |
| |
| .task-description { |
| font-size: 0.875rem; |
| color: var(--gray); |
| } |
| |
| .task-priority { |
| padding: 0.25rem 0.75rem; |
| border-radius: 20px; |
| font-size: 0.75rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| } |
| |
| .priority-low { |
| background: rgba(72, 187, 120, 0.1); |
| color: var(--secondary); |
| } |
| |
| .priority-medium { |
| background: rgba(237, 137, 54, 0.1); |
| color: var(--warning); |
| } |
| |
| .priority-high { |
| background: rgba(245, 101, 101, 0.1); |
| color: var(--danger); |
| } |
| |
| .task-actions { |
| display: flex; |
| gap: 0.5rem; |
| } |
| |
| .task-action-btn { |
| width: 32px; |
| height: 32px; |
| border: none; |
| background: white; |
| border-radius: 8px; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: all 0.3s ease; |
| color: var(--gray); |
| } |
| |
| .task-action-btn:hover { |
| background: var(--primary); |
| color: white; |
| transform: scale(1.1); |
| } |
| |
| .empty-state { |
| text-align: center; |
| padding: 3rem; |
| color: var(--gray); |
| } |
| |
| .empty-icon { |
| font-size: 4rem; |
| margin-bottom: 1rem; |
| opacity: 0.3; |
| } |
| |
| .progress-bar { |
| width: 100%; |
| height: 8px; |
| background: var(--border); |
| border-radius: 10px; |
| overflow: hidden; |
| margin-bottom: 1rem; |
| } |
| |
| .progress-fill { |
| height: 100%; |
| background: var(--gradient); |
| border-radius: 10px; |
| transition: width 0.5s ease; |
| } |
| |
| .notification { |
| position: fixed; |
| bottom: 2rem; |
| right: 2rem; |
| background: white; |
| padding: 1rem 1.5rem; |
| border-radius: 12px; |
| box-shadow: 0 10px 40px var(--shadow); |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| transform: translateX(400px); |
| transition: transform 0.3s ease; |
| z-index: 1000; |
| } |
| |
| .notification.show { |
| transform: translateX(0); |
| } |
| |
| .notification-icon { |
| width: 40px; |
| height: 40px; |
| background: var(--gradient); |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: white; |
| } |
| |
| @media (max-width: 768px) { |
| .container { |
| grid-template-columns: 1fr; |
| } |
| |
| .sidebar { |
| position: static; |
| } |
| |
| .stats { |
| display: none; |
| } |
| |
| .header-content { |
| padding: 0.5rem; |
| } |
| |
| main { |
| padding: 1rem; |
| } |
| } |
| |
| .fade-in { |
| animation: fadeIn 0.5s ease; |
| } |
| |
| @keyframes fadeIn { |
| from { |
| opacity: 0; |
| transform: translateY(10px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <header> |
| <div class="header-content"> |
| <div class="logo"> |
| <div class="logo-icon">✓</div> |
| <span>TaskFlow</span> |
| </div> |
| <div class="stats"> |
| <div class="stat-item"> |
| <div class="stat-value" id="totalTasks">0</div> |
| <div class="stat-label">Total Tasks</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-value" id="completedTasks">0</div> |
| <div class="stat-label">Completed</div> |
| </div> |
| <div class="stat-item"> |
| <div class="stat-value" id="productivityScore">0%</div> |
| <div class="stat-label">Productivity</div> |
| </div> |
| </div> |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: var(--primary); text-decoration: none; font-weight: 500;">Built with anycoder</a> |
| </div> |
| </header> |
|
|
| <main> |
| <div class="container"> |
| <aside class="sidebar"> |
| <div class="add-task-form"> |
| <h3 style="margin-bottom: 1rem;">Add New Task</h3> |
| <form id="taskForm"> |
| <div class="form-group"> |
| <label for="taskTitle">Task Title</label> |
| <input type="text" id="taskTitle" placeholder="Enter task title..." required> |
| </div> |
| <div class="form-group"> |
| <label for="taskDescription">Description</label> |
| <textarea id="taskDescription" placeholder="Add description..."></textarea> |
| </div> |
| <div class="form-group"> |
| <label>Priority</label> |
| <div class="priority-select"> |
| <button type="button" class="priority-btn" data-priority="low">Low</button> |
| <button type="button" class="priority-btn active" data-priority="medium">Medium</button> |
| <button type="button" class="priority-btn" data-priority="high">High</button> |
| </div> |
| </div> |
| <button type="submit" class="btn-primary">Add Task</button> |
| </form> |
| </div> |
|
|
| <div class="progress-section"> |
| <h4 style="margin-bottom: 0.5rem;">Today's Progress</h4> |
| <div class="progress-bar"> |
| <div class="progress-fill" id="progressBar" style="width: 0%"></div> |
| </div> |
| <p style="font-size: 0.875rem; color: var(--gray);">Keep going! You're doing great!</p> |
| </div> |
| </aside> |
|
|
| <section class="tasks-section"> |
| <div class="section-header"> |
| <h2 class="section-title">My Tasks</h2> |
| <div class="filter-tabs"> |
| <button class="filter-tab active" data-filter="all">All</button> |
| <button class="filter-tab" data-filter="active">Active</button> |
| <button class="filter-tab" data-filter="completed">Completed</button> |
| </div> |
| </div> |
| <div class="tasks-list" id="tasksList"> |
| <div class="empty-state"> |
| <div class="empty-icon">📝</div> |
| <h3>No tasks yet</h3> |
| <p>Start by adding your first task!</p> |
| </div> |
| </div> |
| </section> |
| </div> |
| </main> |
|
|
| <div class="notification" id="notification"> |
| <div class="notification-icon">✓</div> |
| <div> |
| <div style="font-weight: 600;" id="notificationTitle">Success!</div> |
| <div style="font-size: 0.875rem; color: var(--gray);" id="notificationMessage">Task added successfully</div> |
| </div> |
| </div> |
|
|
| <script> |
| class TaskManager { |
| constructor() { |
| this.tasks = JSON.parse(localStorage.getItem('tasks')) || []; |
| this.currentFilter = 'all'; |
| this.selectedPriority = 'medium'; |
| this.init(); |
| } |
| |
| init() { |
| this.setupEventListeners(); |
| this.renderTasks(); |
| this.updateStats(); |
| } |
| |
| setupEventListeners() { |
| |
| document.getElementById('taskForm').addEventListener('submit', (e) => { |
| e.preventDefault(); |
| this.addTask(); |
| }); |
| |
| |
| document.querySelectorAll('.priority-btn').forEach(btn => { |
| btn.addEventListener('click', () => { |
| document.querySelectorAll('.priority-btn').forEach(b => b.classList.remove('active')); |
| btn.classList.add('active'); |
| this.selectedPriority = btn.dataset.priority; |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.filter-tab').forEach(tab => { |
| tab.addEventListener('click', () => { |
| document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active')); |
| tab.classList.add('active'); |
| this.currentFilter = tab.dataset.filter; |
| this.renderTasks(); |
| }); |
| }); |
| } |
| |
| addTask() { |
| const title = document.getElementById('taskTitle').value.trim(); |
| const description = document.getElementById('taskDescription').value.trim(); |
| |
| if (!title) return; |
| |
| const task = { |
| id: Date.now(), |
| title, |
| description, |
| priority: this.selectedPriority, |
| completed: false, |
| createdAt: new Date().toISOString() |
| }; |
| |
| this.tasks.unshift(task); |
| this.saveTasks(); |
| this.renderTasks(); |
| this.updateStats(); |
| this.showNotification('Task Added!', `"${title}" has been added to your tasks`); |
| |
| |
| document.getElementById('taskForm').reset(); |
| document.querySelectorAll('.priority-btn').forEach(btn => { |
| btn.classList.remove('active'); |
| if (btn.dataset.priority === 'medium') { |
| btn.classList.add('active'); |
| } |
| }); |
| this.selectedPriority = 'medium'; |
| } |
| |
| toggleTask(id) { |
| const task = this.tasks.find(t => t.id === id); |
| if (task) { |
| task.completed = !task.completed; |
| this.saveTasks(); |
| this.renderTasks(); |
| this.updateStats(); |
| |
| if (task.completed) { |
| this.showNotification('Task Completed!', `Great job finishing "${task.title}"`); |
| } |
| } |
| } |
| |
| deleteTask(id) { |
| const task = this.tasks.find(t => t.id === id); |
| if (task) { |
| this.tasks = this.tasks.filter(t => t.id !== id); |
| this.saveTasks(); |
| this.renderTasks(); |
| this.updateStats(); |
| this.showNotification('Task Deleted', `"${task.title}" has been removed`); |
| } |
| } |
| |
| getFilteredTasks() { |
| switch (this.currentFilter) { |
| case 'active': |
| return this.tasks.filter(t => !t.completed); |
| case 'completed': |
| return this.tasks.filter(t => t.completed); |
| default: |
| return this.tasks; |
| } |
| } |
| |
| renderTasks() { |
| const tasksList = document.getElementById('tasksList'); |
| const filteredTasks = this.getFilteredTasks(); |
| |
| if (filteredTasks.length === 0) { |
| tasksList.innerHTML = ` |
| <div class="empty-state"> |
| <div class="empty-icon">📝</div> |
| <h3>No tasks found</h3> |
| <p>${this.currentFilter === 'all' ? 'Start by adding your first task!' : 'No tasks in this category'}</p> |
| </div> |
| `; |
| return; |
| } |
| |
| tasksList.innerHTML = filteredTasks.map(task => ` |
| <div class="task-item fade-in ${task.completed ? 'completed' : ''}" data-id="${task.id}"> |
| <div class="task-checkbox ${task.completed ? 'checked' : ''}" onclick="taskManager.toggleTask(${task.id})"></div> |
| <div class="task-content"> |
| <div class="task-title">${task.title}</div> |
| ${task.description ? `<div class="task-description">${task.description}</div>` : ''} |
| </div> |
| <div class="task-priority priority-${task.priority}">${task.priority}</div> |
| <div class="task-actions"> |
| <button class="task-action-btn" onclick="taskManager.deleteTask(${task.id})">🗑️</button> |
| </div> |
| </div> |
| `).join(''); |
| } |
| |
| updateStats() { |
| const total = this.tasks.length; |
| const completed = this.tasks.filter(t => t.completed).length; |
| const productivity = total > 0 ? Math.round((completed / total) * 100) : 0; |
| |
| document.getElementById('totalTasks').textContent = total; |
| document.getElementById('completedTasks').textContent = completed; |
| document.getElementById('productivityScore').textContent = productivity + '%'; |
| document.getElementById('progressBar').style.width = productivity + '%'; |
| } |
| |
| saveTasks() { |
| localStorage.setItem('tasks', JSON.stringify(this.tasks)); |
| } |
| |
| showNotification(title, message) { |
| const notification = document.getElementById('notification'); |
| document.getElementById('notificationTitle').textContent = title; |
| document.getElementById('notificationMessage').textContent = message; |
| |
| notification.classList.add('show'); |
| setTimeout(() => { |
| notification.classList.remove('show'); |
| }, 3000); |
| } |
| } |
| |
| |
| const taskManager = new TaskManager(); |
| </script> |
| </body> |
| </html> |
