TaskFlow Pro – Modern Task Management<\/title>\n <style>\n :root {\n --primary: #6366f1;\n --primary-hover: #4f46e5;\n --bg-color: #0f172a;\n --card-bg: #1e293b;\n --text-color: #f8fafc;\n --text-muted: #94a3b8;\n --border-color: #334155;\n --danger: #ef4444;\n --success: #22c55e;\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n }\n\n body {\n background-color: var(--bg-color);\n color: var(--text-color);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n padding: 2rem 1rem;\n }\n\n .container {\n width: 100%;\n max-width: 800px;\n }\n\n header {\n margin-bottom: 2rem;\n text-align: center;\n }\n\n header h1 {\n font-size: 2.5rem;\n font-weight: 700;\n background: linear-gradient(to right, #818cf8, #c084fc);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n margin-bottom: 0.5rem;\n }\n\n header p {\n color: var(--text-muted);\n font-size: 1rem;\n }\n\n .card {\n background-color: var(--card-bg);\n border: 1px solid var(--border-color);\n border-radius: 1rem;\n padding: 1.5rem;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);\n margin-bottom: 1.5rem;\n }\n\n .task-form {\n display: flex;\n gap: 0.75rem;\n flex-wrap: wrap;\n }\n\n .task-form input, .task-form select {\n flex: 1;\n min-width: 200px;\n padding: 0.75rem 1rem;\n background-color: var(--bg-color);\n border: 1px solid var(--border-color);\n border-radius: 0.5rem;\n color: var(--text-color);\n font-size: 1rem;\n outline: none;\n transition: border-color 0.2s;\n }\n\n .task-form input:focus, .task-form select:focus {\n border-color: var(--primary);\n }\n\n .btn {\n padding: 0.75rem 1.5rem;\n background-color: var(--primary);\n color: white;\n border: none;\n border-radius: 0.5rem;\n font-weight: 600;\n cursor: pointer;\n transition: background-color 0.2s, transform 0.1s;\n }\n\n .btn:hover {\n background-color: var(--primary-hover);\n }\n\n .btn:active {\n transform: scale(0.98);\n }\n\n .controls {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1rem;\n flex-wrap: wrap;\n gap: 1rem;\n }\n\n .filters {\n display: flex;\n gap: 0.5rem;\n }\n\n .filter-btn {\n background: transparent;\n border: 1px solid var(--border-color);\n color: var(--text-muted);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n cursor: pointer;\n font-size: 0.875rem;\n transition: all 0.2s;\n }\n\n .filter-btn.active, .filter-btn:hover {\n background-color: var(--primary);\n border-color: var(--primary);\n color: white;\n }\n\n .task-list {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n }\n\n .task-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: var(--bg-color);\n border: 1px solid var(--border-color);\n padding: 1rem;\n border-radius: 0.5rem;\n transition: transform 0.2s, opacity 0.2s;\n }\n\n .task-item.completed span {\n text-decoration: line-through;\n color: var(--text-muted);\n }\n\n .task-info {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex: 1;\n word-break: break-all;\n }\n\n .task-checkbox {\n width: 1.25rem;\n height: 1.25rem;\n cursor: pointer;\n accent-color: var(--primary);\n }\n\n .badge {\n font-size: 0.75rem;\n padding: 0.25rem 0.5rem;\n border-radius: 0.25rem;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n .badge-low { background-color: rgba(34, 197, 94, 0.2); color: var(--success); }\n .badge-medium { background-color: rgba(234, 179, 8, 0.2); color: #eab308; }\n .badge-high { background-color: rgba(239, 68, 68, 0.2); color: var(--danger); }\n\n .delete-btn {\n background: transparent;\n border: none;\n color: var(--text-muted);\n cursor: pointer;\n font-size: 1.25rem;\n transition: color 0.2s;\n padding: 0.25rem;\n }\n\n .delete-btn:hover {\n color: var(--danger);\n }\n\n .empty-state {\n text-align: center;\n color: var(--text-muted);\n padding: 2rem;\n font-style: italic;\n }\n\n .stats {\n display: flex;\n justify-content: space-between;\n color: var(--text-muted);\n font-size: 0.875rem;\n margin-top: 1rem;\n border-top: 1px solid var(--border-color);\n padding-top: 1rem;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <h1>TaskFlow Pro<\/h1>\n <p>Manage your daily goals efficiently and effortlessly<\/p>\n <\/header>\n\n <div class=\"card\">\n <form class=\"task-form\" id=\"taskForm\">\n <input type=\"text\" id=\"taskInput\" placeholder=\"What needs to be done?\" required autocomplete=\"off\">\n <select id=\"priorityInput\">\n <option value=\"low\">Low Priority<\/option>\n <option value=\"medium\" selected>Medium Priority<\/option>\n <option value=\"high\">High Priority<\/option>\n <\/select>\n <button type=\"submit\" class=\"btn\">Add Task<\/button>\n <\/form>\n <\/div>\n\n <div class=\"card\">\n <div class=\"controls\">\n <div class=\"filters\">\n <button class=\"filter-btn active\" data-filter=\"all\">All<\/button>\n <button class=\"filter-btn\" data-filter=\"active\">Active<\/button>\n <button class=\"filter-btn\" data-filter=\"completed\">Completed<\/button>\n <\/div>\n <div id=\"taskCount\" class=\"text-muted\">0 items left<\/div>\n <\/div>\n\n <ul class=\"task-list\" id=\"taskList\">\n \n <\/ul>\n \n <div class=\"empty-state\" id=\"emptyState\" style=\"display: none;\">\n No tasks found. Time to relax or add a new one!\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const taskForm = document.getElementById('taskForm');\n const taskInput = document.getElementById('taskInput');\n const priorityInput = document.getElementById('priorityInput');\n const taskList = document.getElementById('taskList');\n const emptyState = document.getElementById('emptyState');\n const taskCount = document.getElementById('taskCount');\n const filterBtns = document.querySelectorAll('.filter-btn');\n\n let tasks = JSON.parse(localStorage.getItem('tasks')) || [];\n let currentFilter = 'all';\n\n function saveTasks() {\n localStorage.setItem('tasks', JSON.stringify(tasks));\n }\n\n function renderTasks() {\n taskList.innerHTML = '';\n \n const filteredTasks = tasks.filter(task => {\n if (currentFilter === 'active') return !task.completed;\n if (currentFilter === 'completed') return task.completed;\n return true;\n });\n\n if (filteredTasks.length === 0) {\n emptyState.style.display = 'block';\n } else {\n emptyState.style.display = 'none';\n }\n\n filteredTasks.forEach((task) => {\n const li = document.createElement('li');\n li.className = `task-item ${task.completed ? 'completed' : ''}`;\n \n li.innerHTML = `\n <div class=\"task-info\">\n <input type=\"checkbox\" class=\"task-checkbox\" ${task.completed ? 'checked' : ''} data-id=\"${task.id}\">\n <span>${escapeHtml(task.text)}<\/span>\n <span class=\"badge badge-${task.priority}\">${task.priority}<\/span>\n <\/div>\n <button class=\"delete-btn\" data-id=\"${task.id}\">×<\/button>\n `;\n \n taskList.appendChild(li);\n });\n\n const activeCount = tasks.filter(t => !t.completed).length;\n taskCount.textContent = `${activeCount} item${activeCount === 1 ? '' : 's'} left`;\n }\n\n function escapeHtml(str) {\n return str.replace(\/[&<>'\"]\/g, \n tag => ({ '&': '&', '<': '<', '>': '>', \"'\": ''', '\"': '"' }[tag] || tag)\n );\n }\n\n taskForm.addEventListener('submit', (e) => {\n e.preventDefault();\n const text = taskInput.value.trim();\n if (!text) return;\n\n const newTask = {\n id: Date.now(),\n text,\n priority: priorityInput.value,\n completed: false\n };\n\n tasks.unshift(newTask);\n saveTasks();\n renderTasks();\n\n taskInput.value = '';\n priorityInput.value = 'medium';\n taskInput.focus();\n });\n\n taskList.addEventListener('click', (e) => {\n const id = Number(e.target.dataset.id);\n \n if (e.target.classList.contains('task-checkbox')) {\n tasks = tasks.map(task => task.id === id ? { ...task, completed: e.target.checked } : task);\n saveTasks();\n renderTasks();\n }\n\n if (e.target.classList.contains('delete-btn')) {\n tasks = tasks.filter(task => task.id !== id);\n saveTasks();\n renderTasks();\n }\n });\n\n filterBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n filterBtns.forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n currentFilter = btn.dataset.filter;\n renderTasks();\n });\n });\n\n renderTasks();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<script>\n \/\/ Extending TaskFlow Pro functionality seamlessly\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ Injecting additional UI controls for categories and search into the DOM dynamically\n const cardHeader = document.querySelector('.card');\n \n const extraControls = document.createElement('div');\n extraControls.style.cssText = 'margin-top: 1rem; display: flex; gap: 0.75rem; flex-wrap: wrap;';\n extraControls.innerHTML = `\n <input type=\"text\" id=\"searchInput\" placeholder=\"Search tasks...\" style=\"flex: 1; min-width: 150px; padding: 0.5rem 0.75rem; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 0.5rem; color: var(--text-color); font-size: 0.875rem; outline: none;\">\n <select id=\"categoryInput\" style=\"padding: 0.5rem; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 0.5rem; color: var(--text-color); font-size: 0.875rem;\">\n <option value=\"General\">General<\/option>\n <option value=\"Work\">Work<\/option>\n <option value=\"Personal\">Personal<\/option>\n <option value=\"Study\">Study<\/option>\n <\/select>\n <input type=\"date\" id=\"dueDateInput\" style=\"padding: 0.5rem; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 0.5rem; color: var(--text-color); font-size: 0.875rem;\">\n `;\n \n \/\/ Insert extra input controls right under the main form input element\n const taskFormElement = document.getElementById('taskForm');\n taskFormElement.appendChild(extraControls);\n\n \/\/ Add backup\/restore buttons container\n const utilityContainer = document.createElement('div');\n utilityContainer.style.cssText = 'display: flex; gap: 0.5rem; margin-top: 1rem; justify-content: flex-end;';\n utilityContainer.innerHTML = `\n <button id=\"exportBtn\" class=\"filter-btn\" style=\"font-size: 0.75rem;\">Export JSON<\/button>\n <button id=\"clearCompletedBtn\" class=\"filter-btn\" style=\"font-size: 0.75rem; border-color: var(--danger); color: var(--danger);\">Clear Completed<\/button>\n `;\n \n const taskListCard = document.querySelectorAll('.card')[1];\n taskListCard.insertBefore(utilityContainer, document.getElementById('taskList'));\n\n \/\/ Logic adjustments for expanded task fields\n const searchInput = document.getElementById('searchInput');\n const categoryInput = document.getElementById('categoryInput');\n const dueDateInput = document.getElementById('dueDateInput');\n \n \/\/ Hook into existing form submission by intercepting or enhancing data capture\n taskFormElement.addEventListener('submit', (e) => {\n \/\/ Read extra values securely\n const category = categoryInput.value;\n const dueDate = dueDateInput.value;\n \n \/\/ Access last added item in localStorage or global scope via a small patch\n let currentTasks = JSON.parse(localStorage.getItem('tasks')) || [];\n if (currentTasks.length > 0) {\n \/\/ Enhance the most recently added task with metadata\n currentTasks[0].category = category;\n currentTasks[0].dueDate = dueDate;\n localStorage.setItem('tasks', JSON.stringify(currentTasks));\n }\n });\n\n \/\/ Search and filter handling enhancement\n searchInput.addEventListener('input', () => {\n const query = searchInput.value.toLowerCase();\n const taskItems = document.querySelectorAll('.task-item');\n \n taskItems.forEach(item => {\n const textSpan = item.querySelector('span').textContent.toLowerCase();\n if (textSpan.includes(query)) {\n item.style.display = 'flex';\n } else {\n item.style.display = 'none';\n }\n });\n });\n\n \/\/ Clear completed task handler\n document.getElementById('clearCompletedBtn').addEventListener('click', () => {\n let currentTasks = JSON.parse(localStorage.getItem('tasks')) || [];\n currentTasks = currentTasks.filter(t => !t.completed);\n localStorage.setItem('tasks', JSON.stringify(currentTasks));\n window.location.reload();\n });\n\n \/\/ Export JSON functionality\n document.getElementById('exportBtn').addEventListener('click', () => {\n const dataStr = \"data:text\/json;charset=utf-8,\" + encodeURIComponent(localStorage.getItem('tasks'));\n const downloadAnchor = document.createElement('a');\n downloadAnchor.setAttribute(\"href\", dataStr);\n downloadAnchor.setAttribute(\"download\", \"taskflow_backup.json\");\n document.body.appendChild(downloadAnchor);\n downloadAnchor.click();\n downloadAnchor.remove();\n });\n });\n<\/script>\n\n\n\n\n<style>\n .analytics-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 1rem;\n margin-bottom: 1.5rem;\n }\n\n .stat-card {\n background-color: var(--bg-color);\n border: 1px solid var(--border-color);\n padding: 1rem;\n border-radius: 0.5rem;\n text-align: center;\n }\n\n .stat-card h3 {\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--primary);\n margin-bottom: 0.25rem;\n }\n\n .stat-card p {\n font-size: 0.75rem;\n color: var(--text-muted);\n text-transform: uppercase;\n }\n\n .progress-bar-container {\n width: 100%;\n background-color: var(--bg-color);\n border-radius: 9999px;\n height: 0.75rem;\n border: 1px solid var(--border-color);\n overflow: hidden;\n margin-bottom: 1.5rem;\n }\n\n .progress-bar {\n height: 100%;\n background: linear-gradient(to right, var(--primary), #c084fc);\n width: 0%;\n transition: width 0.4s ease;\n }\n\n .theme-toggle {\n position: absolute;\n top: 2rem;\n right: 2rem;\n background: var(--card-bg);\n border: 1px solid var(--border-color);\n color: var(--text-color);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n cursor: pointer;\n font-size: 0.875rem;\n }\n\n @media (max-width: 600px) {\n .theme-toggle {\n position: static;\n margin-bottom: 1rem;\n width: 100%;\n }\n }\n<\/style>\n\n<script>\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ Add theme toggle button to header area\n const headerElement = document.querySelector('header');\n const themeBtn = document.createElement('button');\n themeBtn.className = 'theme-toggle';\n themeBtn.textContent = '\ud83c\udf13 Toggle Theme';\n headerElement.appendChild(themeBtn);\n\n let isDarkMode = true;\n themeBtn.addEventListener('click', () => {\n isDarkMode = !isDarkMode;\n if (isDarkMode) {\n document.documentElement.style.setProperty('--bg-color', '#0f172a');\n document.documentElement.style.setProperty('--card-bg', '#1e293b');\n document.documentElement.style.setProperty('--text-color', '#f8fafc');\n document.documentElement.style.setProperty('--border-color', '#334155');\n } else {\n document.documentElement.style.setProperty('--bg-color', '#f8fafc');\n document.documentElement.style.setProperty('--card-bg', '#ffffff');\n document.documentElement.style.setProperty('--text-color', '#0f172a');\n document.documentElement.style.setProperty('--border-color', '#cbd5e1');\n }\n });\n\n \/\/ Insert Analytics and Progress Dashboard above task list card\n const dashboardCard = document.createElement('div');\n dashboardCard.className = 'card';\n dashboardCard.innerHTML = `\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" id=\"progressBar\"><\/div>\n <\/div>\n <div class=\"analytics-grid\">\n <div class=\"stat-card\">\n <h3 id=\"statTotal\">0<\/h3>\n <p>Total Tasks<\/p>\n <\/div>\n <div class=\"stat-card\">\n <h3 id=\"statCompleted\">0<\/h3>\n <p>Completed<\/p>\n <\/div>\n <div class=\"stat-card\">\n <h3 id=\"statPending\">0<\/h3>\n <p>Pending<\/p>\n <\/div>\n <\/div>\n `;\n\n const container = document.querySelector('.container');\n const secondCard = document.querySelectorAll('.card')[1];\n container.insertBefore(dashboardCard, secondCard);\n\n \/\/ Update dashboard metrics function\n function updateDashboardMetrics() {\n const tasks = JSON.parse(localStorage.getItem('tasks')) || [];\n const total = tasks.length;\n const completed = tasks.filter(t => t.completed).length;\n const pending = total - completed;\n const percent = total === 0 ? 0 : Math.round((completed \/ total) * 100);\n\n document.getElementById('statTotal').textContent = total;\n document.getElementById('statCompleted').textContent = completed;\n document.getElementById('statPending').textContent = pending;\n document.getElementById('progressBar').style.width = `${percent}%`;\n }\n\n \/\/ Hook metrics update into storage changes or task operations\n const originalSetItem = localStorage.setItem;\n localStorage.setItem = function(key, value) {\n originalSetItem.apply(this, arguments);\n if (key === 'tasks') {\n updateDashboardMetrics();\n }\n };\n\n \/\/ Initial call\n updateDashboardMetrics();\n });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>TaskFlow Pro – Modern Task Management TaskFlow Pro Manage your daily goals efficiently and effortlessly Low PriorityMedium PriorityHigh Priority Add Task All Active Completed 0 items left No tasks found. Time to relax or add a new one!<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-934","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=934"}],"version-history":[{"count":10,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/934\/revisions"}],"predecessor-version":[{"id":945,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/934\/revisions\/945"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":934,"date":"2026-08-07T16:04:34","date_gmt":"2026-08-07T16:04:34","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=934"},"modified":"2026-08-07T16:44:32","modified_gmt":"2026-08-07T16:44:32","slug":"lesson-generator","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/lesson-generator\/","title":{"rendered":"Teacher Workload & Smart Timetable Manager Pro"},"content":{"rendered":"\n\n\n\n \n \n TaskFlow Pro – Modern Task Management<\/title>\n <style>\n :root {\n --primary: #6366f1;\n --primary-hover: #4f46e5;\n --bg-color: #0f172a;\n --card-bg: #1e293b;\n --text-color: #f8fafc;\n --text-muted: #94a3b8;\n --border-color: #334155;\n --danger: #ef4444;\n --success: #22c55e;\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n }\n\n body {\n background-color: var(--bg-color);\n color: var(--text-color);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n padding: 2rem 1rem;\n }\n\n .container {\n width: 100%;\n max-width: 800px;\n }\n\n header {\n margin-bottom: 2rem;\n text-align: center;\n }\n\n header h1 {\n font-size: 2.5rem;\n font-weight: 700;\n background: linear-gradient(to right, #818cf8, #c084fc);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n margin-bottom: 0.5rem;\n }\n\n header p {\n color: var(--text-muted);\n font-size: 1rem;\n }\n\n .card {\n background-color: var(--card-bg);\n border: 1px solid var(--border-color);\n border-radius: 1rem;\n padding: 1.5rem;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);\n margin-bottom: 1.5rem;\n }\n\n .task-form {\n display: flex;\n gap: 0.75rem;\n flex-wrap: wrap;\n }\n\n .task-form input, .task-form select {\n flex: 1;\n min-width: 200px;\n padding: 0.75rem 1rem;\n background-color: var(--bg-color);\n border: 1px solid var(--border-color);\n border-radius: 0.5rem;\n color: var(--text-color);\n font-size: 1rem;\n outline: none;\n transition: border-color 0.2s;\n }\n\n .task-form input:focus, .task-form select:focus {\n border-color: var(--primary);\n }\n\n .btn {\n padding: 0.75rem 1.5rem;\n background-color: var(--primary);\n color: white;\n border: none;\n border-radius: 0.5rem;\n font-weight: 600;\n cursor: pointer;\n transition: background-color 0.2s, transform 0.1s;\n }\n\n .btn:hover {\n background-color: var(--primary-hover);\n }\n\n .btn:active {\n transform: scale(0.98);\n }\n\n .controls {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1rem;\n flex-wrap: wrap;\n gap: 1rem;\n }\n\n .filters {\n display: flex;\n gap: 0.5rem;\n }\n\n .filter-btn {\n background: transparent;\n border: 1px solid var(--border-color);\n color: var(--text-muted);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n cursor: pointer;\n font-size: 0.875rem;\n transition: all 0.2s;\n }\n\n .filter-btn.active, .filter-btn:hover {\n background-color: var(--primary);\n border-color: var(--primary);\n color: white;\n }\n\n .task-list {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n }\n\n .task-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: var(--bg-color);\n border: 1px solid var(--border-color);\n padding: 1rem;\n border-radius: 0.5rem;\n transition: transform 0.2s, opacity 0.2s;\n }\n\n .task-item.completed span {\n text-decoration: line-through;\n color: var(--text-muted);\n }\n\n .task-info {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex: 1;\n word-break: break-all;\n }\n\n .task-checkbox {\n width: 1.25rem;\n height: 1.25rem;\n cursor: pointer;\n accent-color: var(--primary);\n }\n\n .badge {\n font-size: 0.75rem;\n padding: 0.25rem 0.5rem;\n border-radius: 0.25rem;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n .badge-low { background-color: rgba(34, 197, 94, 0.2); color: var(--success); }\n .badge-medium { background-color: rgba(234, 179, 8, 0.2); color: #eab308; }\n .badge-high { background-color: rgba(239, 68, 68, 0.2); color: var(--danger); }\n\n .delete-btn {\n background: transparent;\n border: none;\n color: var(--text-muted);\n cursor: pointer;\n font-size: 1.25rem;\n transition: color 0.2s;\n padding: 0.25rem;\n }\n\n .delete-btn:hover {\n color: var(--danger);\n }\n\n .empty-state {\n text-align: center;\n color: var(--text-muted);\n padding: 2rem;\n font-style: italic;\n }\n\n .stats {\n display: flex;\n justify-content: space-between;\n color: var(--text-muted);\n font-size: 0.875rem;\n margin-top: 1rem;\n border-top: 1px solid var(--border-color);\n padding-top: 1rem;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <header>\n <h1>TaskFlow Pro<\/h1>\n <p>Manage your daily goals efficiently and effortlessly<\/p>\n <\/header>\n\n <div class=\"card\">\n <form class=\"task-form\" id=\"taskForm\">\n <input type=\"text\" id=\"taskInput\" placeholder=\"What needs to be done?\" required autocomplete=\"off\">\n <select id=\"priorityInput\">\n <option value=\"low\">Low Priority<\/option>\n <option value=\"medium\" selected>Medium Priority<\/option>\n <option value=\"high\">High Priority<\/option>\n <\/select>\n <button type=\"submit\" class=\"btn\">Add Task<\/button>\n <\/form>\n <\/div>\n\n <div class=\"card\">\n <div class=\"controls\">\n <div class=\"filters\">\n <button class=\"filter-btn active\" data-filter=\"all\">All<\/button>\n <button class=\"filter-btn\" data-filter=\"active\">Active<\/button>\n <button class=\"filter-btn\" data-filter=\"completed\">Completed<\/button>\n <\/div>\n <div id=\"taskCount\" class=\"text-muted\">0 items left<\/div>\n <\/div>\n\n <ul class=\"task-list\" id=\"taskList\">\n \n <\/ul>\n \n <div class=\"empty-state\" id=\"emptyState\" style=\"display: none;\">\n No tasks found. Time to relax or add a new one!\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const taskForm = document.getElementById('taskForm');\n const taskInput = document.getElementById('taskInput');\n const priorityInput = document.getElementById('priorityInput');\n const taskList = document.getElementById('taskList');\n const emptyState = document.getElementById('emptyState');\n const taskCount = document.getElementById('taskCount');\n const filterBtns = document.querySelectorAll('.filter-btn');\n\n let tasks = JSON.parse(localStorage.getItem('tasks')) || [];\n let currentFilter = 'all';\n\n function saveTasks() {\n localStorage.setItem('tasks', JSON.stringify(tasks));\n }\n\n function renderTasks() {\n taskList.innerHTML = '';\n \n const filteredTasks = tasks.filter(task => {\n if (currentFilter === 'active') return !task.completed;\n if (currentFilter === 'completed') return task.completed;\n return true;\n });\n\n if (filteredTasks.length === 0) {\n emptyState.style.display = 'block';\n } else {\n emptyState.style.display = 'none';\n }\n\n filteredTasks.forEach((task) => {\n const li = document.createElement('li');\n li.className = `task-item ${task.completed ? 'completed' : ''}`;\n \n li.innerHTML = `\n <div class=\"task-info\">\n <input type=\"checkbox\" class=\"task-checkbox\" ${task.completed ? 'checked' : ''} data-id=\"${task.id}\">\n <span>${escapeHtml(task.text)}<\/span>\n <span class=\"badge badge-${task.priority}\">${task.priority}<\/span>\n <\/div>\n <button class=\"delete-btn\" data-id=\"${task.id}\">×<\/button>\n `;\n \n taskList.appendChild(li);\n });\n\n const activeCount = tasks.filter(t => !t.completed).length;\n taskCount.textContent = `${activeCount} item${activeCount === 1 ? '' : 's'} left`;\n }\n\n function escapeHtml(str) {\n return str.replace(\/[&<>'\"]\/g, \n tag => ({ '&': '&', '<': '<', '>': '>', \"'\": ''', '\"': '"' }[tag] || tag)\n );\n }\n\n taskForm.addEventListener('submit', (e) => {\n e.preventDefault();\n const text = taskInput.value.trim();\n if (!text) return;\n\n const newTask = {\n id: Date.now(),\n text,\n priority: priorityInput.value,\n completed: false\n };\n\n tasks.unshift(newTask);\n saveTasks();\n renderTasks();\n\n taskInput.value = '';\n priorityInput.value = 'medium';\n taskInput.focus();\n });\n\n taskList.addEventListener('click', (e) => {\n const id = Number(e.target.dataset.id);\n \n if (e.target.classList.contains('task-checkbox')) {\n tasks = tasks.map(task => task.id === id ? { ...task, completed: e.target.checked } : task);\n saveTasks();\n renderTasks();\n }\n\n if (e.target.classList.contains('delete-btn')) {\n tasks = tasks.filter(task => task.id !== id);\n saveTasks();\n renderTasks();\n }\n });\n\n filterBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n filterBtns.forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n currentFilter = btn.dataset.filter;\n renderTasks();\n });\n });\n\n renderTasks();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<script>\n \/\/ Extending TaskFlow Pro functionality seamlessly\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ Injecting additional UI controls for categories and search into the DOM dynamically\n const cardHeader = document.querySelector('.card');\n \n const extraControls = document.createElement('div');\n extraControls.style.cssText = 'margin-top: 1rem; display: flex; gap: 0.75rem; flex-wrap: wrap;';\n extraControls.innerHTML = `\n <input type=\"text\" id=\"searchInput\" placeholder=\"Search tasks...\" style=\"flex: 1; min-width: 150px; padding: 0.5rem 0.75rem; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 0.5rem; color: var(--text-color); font-size: 0.875rem; outline: none;\">\n <select id=\"categoryInput\" style=\"padding: 0.5rem; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 0.5rem; color: var(--text-color); font-size: 0.875rem;\">\n <option value=\"General\">General<\/option>\n <option value=\"Work\">Work<\/option>\n <option value=\"Personal\">Personal<\/option>\n <option value=\"Study\">Study<\/option>\n <\/select>\n <input type=\"date\" id=\"dueDateInput\" style=\"padding: 0.5rem; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 0.5rem; color: var(--text-color); font-size: 0.875rem;\">\n `;\n \n \/\/ Insert extra input controls right under the main form input element\n const taskFormElement = document.getElementById('taskForm');\n taskFormElement.appendChild(extraControls);\n\n \/\/ Add backup\/restore buttons container\n const utilityContainer = document.createElement('div');\n utilityContainer.style.cssText = 'display: flex; gap: 0.5rem; margin-top: 1rem; justify-content: flex-end;';\n utilityContainer.innerHTML = `\n <button id=\"exportBtn\" class=\"filter-btn\" style=\"font-size: 0.75rem;\">Export JSON<\/button>\n <button id=\"clearCompletedBtn\" class=\"filter-btn\" style=\"font-size: 0.75rem; border-color: var(--danger); color: var(--danger);\">Clear Completed<\/button>\n `;\n \n const taskListCard = document.querySelectorAll('.card')[1];\n taskListCard.insertBefore(utilityContainer, document.getElementById('taskList'));\n\n \/\/ Logic adjustments for expanded task fields\n const searchInput = document.getElementById('searchInput');\n const categoryInput = document.getElementById('categoryInput');\n const dueDateInput = document.getElementById('dueDateInput');\n \n \/\/ Hook into existing form submission by intercepting or enhancing data capture\n taskFormElement.addEventListener('submit', (e) => {\n \/\/ Read extra values securely\n const category = categoryInput.value;\n const dueDate = dueDateInput.value;\n \n \/\/ Access last added item in localStorage or global scope via a small patch\n let currentTasks = JSON.parse(localStorage.getItem('tasks')) || [];\n if (currentTasks.length > 0) {\n \/\/ Enhance the most recently added task with metadata\n currentTasks[0].category = category;\n currentTasks[0].dueDate = dueDate;\n localStorage.setItem('tasks', JSON.stringify(currentTasks));\n }\n });\n\n \/\/ Search and filter handling enhancement\n searchInput.addEventListener('input', () => {\n const query = searchInput.value.toLowerCase();\n const taskItems = document.querySelectorAll('.task-item');\n \n taskItems.forEach(item => {\n const textSpan = item.querySelector('span').textContent.toLowerCase();\n if (textSpan.includes(query)) {\n item.style.display = 'flex';\n } else {\n item.style.display = 'none';\n }\n });\n });\n\n \/\/ Clear completed task handler\n document.getElementById('clearCompletedBtn').addEventListener('click', () => {\n let currentTasks = JSON.parse(localStorage.getItem('tasks')) || [];\n currentTasks = currentTasks.filter(t => !t.completed);\n localStorage.setItem('tasks', JSON.stringify(currentTasks));\n window.location.reload();\n });\n\n \/\/ Export JSON functionality\n document.getElementById('exportBtn').addEventListener('click', () => {\n const dataStr = \"data:text\/json;charset=utf-8,\" + encodeURIComponent(localStorage.getItem('tasks'));\n const downloadAnchor = document.createElement('a');\n downloadAnchor.setAttribute(\"href\", dataStr);\n downloadAnchor.setAttribute(\"download\", \"taskflow_backup.json\");\n document.body.appendChild(downloadAnchor);\n downloadAnchor.click();\n downloadAnchor.remove();\n });\n });\n<\/script>\n\n\n\n\n<style>\n .analytics-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 1rem;\n margin-bottom: 1.5rem;\n }\n\n .stat-card {\n background-color: var(--bg-color);\n border: 1px solid var(--border-color);\n padding: 1rem;\n border-radius: 0.5rem;\n text-align: center;\n }\n\n .stat-card h3 {\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--primary);\n margin-bottom: 0.25rem;\n }\n\n .stat-card p {\n font-size: 0.75rem;\n color: var(--text-muted);\n text-transform: uppercase;\n }\n\n .progress-bar-container {\n width: 100%;\n background-color: var(--bg-color);\n border-radius: 9999px;\n height: 0.75rem;\n border: 1px solid var(--border-color);\n overflow: hidden;\n margin-bottom: 1.5rem;\n }\n\n .progress-bar {\n height: 100%;\n background: linear-gradient(to right, var(--primary), #c084fc);\n width: 0%;\n transition: width 0.4s ease;\n }\n\n .theme-toggle {\n position: absolute;\n top: 2rem;\n right: 2rem;\n background: var(--card-bg);\n border: 1px solid var(--border-color);\n color: var(--text-color);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n cursor: pointer;\n font-size: 0.875rem;\n }\n\n @media (max-width: 600px) {\n .theme-toggle {\n position: static;\n margin-bottom: 1rem;\n width: 100%;\n }\n }\n<\/style>\n\n<script>\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ Add theme toggle button to header area\n const headerElement = document.querySelector('header');\n const themeBtn = document.createElement('button');\n themeBtn.className = 'theme-toggle';\n themeBtn.textContent = '\ud83c\udf13 Toggle Theme';\n headerElement.appendChild(themeBtn);\n\n let isDarkMode = true;\n themeBtn.addEventListener('click', () => {\n isDarkMode = !isDarkMode;\n if (isDarkMode) {\n document.documentElement.style.setProperty('--bg-color', '#0f172a');\n document.documentElement.style.setProperty('--card-bg', '#1e293b');\n document.documentElement.style.setProperty('--text-color', '#f8fafc');\n document.documentElement.style.setProperty('--border-color', '#334155');\n } else {\n document.documentElement.style.setProperty('--bg-color', '#f8fafc');\n document.documentElement.style.setProperty('--card-bg', '#ffffff');\n document.documentElement.style.setProperty('--text-color', '#0f172a');\n document.documentElement.style.setProperty('--border-color', '#cbd5e1');\n }\n });\n\n \/\/ Insert Analytics and Progress Dashboard above task list card\n const dashboardCard = document.createElement('div');\n dashboardCard.className = 'card';\n dashboardCard.innerHTML = `\n <div class=\"progress-bar-container\">\n <div class=\"progress-bar\" id=\"progressBar\"><\/div>\n <\/div>\n <div class=\"analytics-grid\">\n <div class=\"stat-card\">\n <h3 id=\"statTotal\">0<\/h3>\n <p>Total Tasks<\/p>\n <\/div>\n <div class=\"stat-card\">\n <h3 id=\"statCompleted\">0<\/h3>\n <p>Completed<\/p>\n <\/div>\n <div class=\"stat-card\">\n <h3 id=\"statPending\">0<\/h3>\n <p>Pending<\/p>\n <\/div>\n <\/div>\n `;\n\n const container = document.querySelector('.container');\n const secondCard = document.querySelectorAll('.card')[1];\n container.insertBefore(dashboardCard, secondCard);\n\n \/\/ Update dashboard metrics function\n function updateDashboardMetrics() {\n const tasks = JSON.parse(localStorage.getItem('tasks')) || [];\n const total = tasks.length;\n const completed = tasks.filter(t => t.completed).length;\n const pending = total - completed;\n const percent = total === 0 ? 0 : Math.round((completed \/ total) * 100);\n\n document.getElementById('statTotal').textContent = total;\n document.getElementById('statCompleted').textContent = completed;\n document.getElementById('statPending').textContent = pending;\n document.getElementById('progressBar').style.width = `${percent}%`;\n }\n\n \/\/ Hook metrics update into storage changes or task operations\n const originalSetItem = localStorage.setItem;\n localStorage.setItem = function(key, value) {\n originalSetItem.apply(this, arguments);\n if (key === 'tasks') {\n updateDashboardMetrics();\n }\n };\n\n \/\/ Initial call\n updateDashboardMetrics();\n });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>TaskFlow Pro – Modern Task Management TaskFlow Pro Manage your daily goals efficiently and effortlessly Low PriorityMedium PriorityHigh Priority Add Task All Active Completed 0 items left No tasks found. Time to relax or add a new one!<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-934","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=934"}],"version-history":[{"count":10,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/934\/revisions"}],"predecessor-version":[{"id":945,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/934\/revisions\/945"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}