Changes to taskflow3.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   TaskFlow
+   
+     Dark Mode
+     
+   
+ 
+ 
+ 
+   
+     
+       To Do
+       
+         
+       
+       
+     
+ 
+     
+       In Progress
+       
+     
+ 
+     
+       Completed
+       
+     
+   
+ 
+   
+     
+       ×
+       New Task
+       
+         
+           Task Name
+           
+         
+         
+           Description
+           
+         
+         
+           Labels
+           
+         
+         
+           Due Date
+           
+         
+         
+           Color
+           
+         
+         
+       
+     
+   
+ 
+ 
+ 
+   Simple task management made beautiful
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://taskflow.scroll.pub
+ metaTags
+ editButton /edit.html
+ title TaskFlow - Simple Task Management
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "796d65c2-f0ee-48e5-a39d-e51565c4de25",
+   "object": "chat.completion",
+   "created": 1735360937,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\ntaskflow.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://taskflow.scroll.pub\nmetaTags\neditButton /edit.html\ntitle TaskFlow - Simple Task Management\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  TaskFlow\n  \n    Dark Mode\n    \n  
\n\n\n\n  \n    \n      To Do\n      \n        \n      
\n      
\n    
\n    \n    \n      In Progress\n      
\n    
\n    \n    \n      Completed\n      
\n    
\n  \n\n  \n    \n      ×\n      New Task\n      \n        \n          Task Name\n          \n        
\n        \n          Description\n          \n        
\n        \n          Labels\n          \n        
\n        \n          Due Date\n          \n        
\n        \n          Color\n          \n        
\n        \n      \n    
\n  
\n\n\n\n  Simple task management made beautiful
\n\n---style.css---\n:root {\n  --primary: #6366f1;\n  --primary-hover: #4f46e5;\n  --background: #f8fafc;\n  --text: #0f172a;\n  --card-bg: #ffffff;\n  --border: #e2e8f0;\n}\n\n[data-theme=\"dark\"] {\n  --background: #0f172a;\n  --text: #f8fafc;\n  --card-bg: #1e293b;\n  --border: #334155;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: 'Segoe UI', sans-serif;\n  background: var(--background);\n  color: var(--text);\n  min-height: 100vh;\n  transition: all 0.3s ease;\n}\n\nheader {\n  background: var(--primary);\n  color: white;\n  padding: 1.5rem;\n  text-align: center;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.theme-switch {\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.task-board {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n  gap: 1.5rem;\n  padding: 2rem;\n}\n\n.column {\n  background: var(--card-bg);\n  border-radius: 0.5rem;\n  padding: 1rem;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.tasks {\n  min-height: 100px;\n  margin-top: 1rem;\n}\n\n.task {\n  background: var(--card-bg);\n  border: 1px solid var(--border);\n  border-radius: 0.5rem;\n  padding: 1rem;\n  margin-bottom: 0.75rem;\n  cursor: grab;\n  transition: transform 0.2s ease;\n}\n\n.task:active {\n  cursor: grabbing;\n}\n\n.task-modal {\n  display: none;\n  position: fixed;\n  z-index: 100;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0,0,0,0.5);\n}\n\n.modal-content {\n  background: var(--card-bg);\n  margin: 10% auto;\n  padding: 2rem;\n  border-radius: 0.5rem;\n  width: 90%;\n  max-width: 500px;\n}\n\n.close-btn {\n  float: right;\n  cursor: pointer;\n  font-size: 1.5rem;\n}\n\n.form-group {\n  margin-bottom: 1rem;\n}\n\ninput, textarea {\n  width: 100%;\n  padding: 0.5rem;\n  border: 1px solid var(--border);\n  border-radius: 0.25rem;\n  background: var(--card-bg);\n  color: var(--text);\n}\n\nbutton {\n  background: var(--primary);\n  color: white;\n  border: none;\n  padding: 0.5rem 1rem;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  transition: background 0.2s ease;\n}\n\nbutton:hover {\n  background: var(--primary-hover);\n}\n\n@media (max-width: 768px) {\n  .task-board {\n    grid-template-columns: 1fr;\n  }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n  const themeToggle = document.getElementById('theme-toggle');\n  const taskModal = document.getElementById('task-modal');\n  const addTaskBtn = document.getElementById('add-task-btn');\n  const closeBtn = document.querySelector('.close-btn');\n  const taskForm = document.getElementById('task-form');\n  const todoColumn = document.querySelector('#todo .tasks');\n  \n  // Theme toggle\n  themeToggle.addEventListener('change', () => {\n    document.body.dataset.theme = themeToggle.checked ? 'dark' : 'light';\n  });\n\n  // Task modal\n  addTaskBtn.addEventListener('click', () => {\n    taskModal.style.display = 'block';\n  });\n\n  closeBtn.addEventListener('click', () => {\n    taskModal.style.display = 'none';\n  });\n\n  window.addEventListener('click', (e) => {\n    if (e.target === taskModal) {\n      taskModal.style.display = 'none';\n    }\n  });\n\n  // Task form submission\n  taskForm.addEventListener('submit', (e) => {\n    e.preventDefault();\n    \n    const task = {\n      name: document.getElementById('task-name').value,\n      description: document.getElementById('task-description').value,\n      labels: document.getElementById('task-labels').value,\n      dueDate: document.getElementById('task-due-date').value,\n      color: document.getElementById('task-color').value\n    };\n\n    createTask(task);\n    taskModal.style.display = 'none';\n    taskForm.reset();\n  });\n\n  // Drag and drop functionality\n  let draggedTask = null;\n\n  document.querySelectorAll('.tasks').forEach(column => {\n    column.addEventListener('dragover', (e) => {\n      e.preventDefault();\n      const afterElement = getDragAfterElement(column, e.clientY);\n      const task = document.querySelector('.dragging');\n      if (afterElement == null) {\n        column.appendChild(task);\n      } else {\n        column.insertBefore(task, afterElement);\n      }\n    });\n  });\n\n  function createTask(task) {\n    const taskElement = document.createElement('div');\n    taskElement.classList.add('task');\n    taskElement.draggable = true;\n    taskElement.style.backgroundColor = task.color;\n    \n    taskElement.innerHTML = `\n      ${task.name}\n      ${task.description}
\n      \n        ${task.labels}\n        ${task.dueDate}\n      
\n      \n    `;\n    \n    taskElement.addEventListener('dragstart', () => {\n      taskElement.classList.add('dragging');\n      draggedTask = taskElement;\n    });\n\n    taskElement.addEventListener('dragend', () => {\n      taskElement.classList.remove('dragging');\n      draggedTask = null;\n    });\n\n    todoColumn.appendChild(taskElement);\n  }\n\n  function getDragAfterElement(container, y) {\n    const draggableElements = [...container.querySelectorAll('.task:not(.dragging)')];\n    \n    return draggableElements.reduce((closest, child) => {\n      const box = child.getBoundingClientRect();\n      const offset = y - box.top - box.height / 2;\n      if (offset < 0 && offset > closest.offset) {\n        return { offset: offset, element: child };\n      } else {\n        return closest;\n      }\n    }, { offset: Number.NEGATIVE_INFINITY }).element;\n  }\n});\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 330,
+     "completion_tokens": 2093,
+     "total_tokens": 2423,
+     "prompt_cache_hit_tokens": 320,
+     "prompt_cache_miss_tokens": 10
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # taskflow3.scroll.pub

+ Website generated by DeepSeek from prompt: create a taskboard application similar to trello where I can drag and drop tasks. there should be a check box for each task, I should be able to assign task name, description, labels, due date, color to the task. The website should have both light and dark mode. I should be able to check out the tasks and once completed they should be moved to the bottom of completed task dropdown. The UI should be responsive and aesthetic with nice gradients and comfy look

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+   const themeToggle = document.getElementById('theme-toggle');
+   const taskModal = document.getElementById('task-modal');
+   const addTaskBtn = document.getElementById('add-task-btn');
+   const closeBtn = document.querySelector('.close-btn');
+   const taskForm = document.getElementById('task-form');
+   const todoColumn = document.querySelector('#todo .tasks');
+ 
+   // Theme toggle
+   themeToggle.addEventListener('change', () => {
+     document.body.dataset.theme = themeToggle.checked ? 'dark' : 'light';
+   });
+ 
+   // Task modal
+   addTaskBtn.addEventListener('click', () => {
+     taskModal.style.display = 'block';
+   });
+ 
+   closeBtn.addEventListener('click', () => {
+     taskModal.style.display = 'none';
+   });
+ 
+   window.addEventListener('click', (e) => {
+     if (e.target === taskModal) {
+       taskModal.style.display = 'none';
+     }
+   });
+ 
+   // Task form submission
+   taskForm.addEventListener('submit', (e) => {
+     e.preventDefault();
+ 
+     const task = {
+       name: document.getElementById('task-name').value,
+       description: document.getElementById('task-description').value,
+       labels: document.getElementById('task-labels').value,
+       dueDate: document.getElementById('task-due-date').value,
+       color: document.getElementById('task-color').value
+     };
+ 
+     createTask(task);
+     taskModal.style.display = 'none';
+     taskForm.reset();
+   });
+ 
+   // Drag and drop functionality
+   let draggedTask = null;
+ 
+   document.querySelectorAll('.tasks').forEach(column => {
+     column.addEventListener('dragover', (e) => {
+       e.preventDefault();
+       const afterElement = getDragAfterElement(column, e.clientY);
+       const task = document.querySelector('.dragging');
+       if (afterElement == null) {
+         column.appendChild(task);
+       } else {
+         column.insertBefore(task, afterElement);
+       }
+     });
+   });
+ 
+   function createTask(task) {
+     const taskElement = document.createElement('div');
+     taskElement.classList.add('task');
+     taskElement.draggable = true;
+     taskElement.style.backgroundColor = task.color;
+ 
+     taskElement.innerHTML = `
+       ${task.name}
+       ${task.description}
+       
+         ${task.labels}
+         ${task.dueDate}
+       
+       
+     `;
+ 
+     taskElement.addEventListener('dragstart', () => {
+       taskElement.classList.add('dragging');
+       draggedTask = taskElement;
+     });
+ 
+     taskElement.addEventListener('dragend', () => {
+       taskElement.classList.remove('dragging');
+       draggedTask = null;
+     });
+ 
+     todoColumn.appendChild(taskElement);
+   }
+ 
+   function getDragAfterElement(container, y) {
+     const draggableElements = [...container.querySelectorAll('.task:not(.dragging)')];
+ 
+     return draggableElements.reduce((closest, child) => {
+       const box = child.getBoundingClientRect();
+       const offset = y - box.top - box.height / 2;
+       if (offset < 0 && offset > closest.offset) {
+         return { offset: offset, element: child };
+       } else {
+         return closest;
+       }
+     }, { offset: Number.NEGATIVE_INFINITY }).element;
+   }
+ });

style.css

Changed around line 1
+ :root {
+   --primary: #6366f1;
+   --primary-hover: #4f46e5;
+   --background: #f8fafc;
+   --text: #0f172a;
+   --card-bg: #ffffff;
+   --border: #e2e8f0;
+ }
+ 
+ [data-theme="dark"] {
+   --background: #0f172a;
+   --text: #f8fafc;
+   --card-bg: #1e293b;
+   --border: #334155;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: 'Segoe UI', sans-serif;
+   background: var(--background);
+   color: var(--text);
+   min-height: 100vh;
+   transition: all 0.3s ease;
+ }
+ 
+ header {
+   background: var(--primary);
+   color: white;
+   padding: 1.5rem;
+   text-align: center;
+   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ }
+ 
+ .theme-switch {
+   position: absolute;
+   top: 1rem;
+   right: 1rem;
+   display: flex;
+   align-items: center;
+   gap: 0.5rem;
+ }
+ 
+ .task-board {
+   display: grid;
+   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+   gap: 1.5rem;
+   padding: 2rem;
+ }
+ 
+ .column {
+   background: var(--card-bg);
+   border-radius: 0.5rem;
+   padding: 1rem;
+   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ }
+ 
+ .tasks {
+   min-height: 100px;
+   margin-top: 1rem;
+ }
+ 
+ .task {
+   background: var(--card-bg);
+   border: 1px solid var(--border);
+   border-radius: 0.5rem;
+   padding: 1rem;
+   margin-bottom: 0.75rem;
+   cursor: grab;
+   transition: transform 0.2s ease;
+ }
+ 
+ .task:active {
+   cursor: grabbing;
+ }
+ 
+ .task-modal {
+   display: none;
+   position: fixed;
+   z-index: 100;
+   left: 0;
+   top: 0;
+   width: 100%;
+   height: 100%;
+   background: rgba(0,0,0,0.5);
+ }
+ 
+ .modal-content {
+   background: var(--card-bg);
+   margin: 10% auto;
+   padding: 2rem;
+   border-radius: 0.5rem;
+   width: 90%;
+   max-width: 500px;
+ }
+ 
+ .close-btn {
+   float: right;
+   cursor: pointer;
+   font-size: 1.5rem;
+ }
+ 
+ .form-group {
+   margin-bottom: 1rem;
+ }
+ 
+ input, textarea {
+   width: 100%;
+   padding: 0.5rem;
+   border: 1px solid var(--border);
+   border-radius: 0.25rem;
+   background: var(--card-bg);
+   color: var(--text);
+ }
+ 
+ button {
+   background: var(--primary);
+   color: white;
+   border: none;
+   padding: 0.5rem 1rem;
+   border-radius: 0.25rem;
+   cursor: pointer;
+   transition: background 0.2s ease;
+ }
+ 
+ button:hover {
+   background: var(--primary-hover);
+ }
+ 
+ @media (max-width: 768px) {
+   .task-board {
+     grid-template-columns: 1fr;
+   }
+ }