\n
\n \n\n \n
\n New Board
\n \n\n
\n \n \n \n
\n \n
\n \n New Task
\nTask description...
\n \n\n
\n\n
\n 
body.html
Changed around line 1
+
+
TaskFlow
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
New Board
+
+
+
+
+
+
+
New Task
+
Task description...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Completed Tasks
+
+
+
+
+
+
+
Organize your workflow with TaskFlow
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://taskflow.scroll.pub
+ metaTags
+ editButton /edit.html
+ title TaskFlow - Your Simple Taskboard
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "fb8e007f-eec7-4eed-9ec9-7e1ce73a804d",
+ "object": "chat.completion",
+ "created": 1735360972,
+ "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 - Your Simple Taskboard\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n \n\n\n \n \n \n\n \n\n \n \n\n\n---style.css---\n:root {\n --primary: #6366f1;\n --background: #f8fafc;\n --text: #0f172a;\n --card: #ffffff;\n --shadow: 0 1px 3px rgba(0,0,0,0.1);\n}\n\n[data-theme=\"dark\"] {\n --primary: #818cf8;\n --background: #0f172a;\n --text: #f8fafc;\n --card: #1e293b;\n --shadow: 0 1px 3px rgba(255,255,255,0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, 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: 1rem;\n text-align: center;\n}\n\n.theme-switch {\n position: absolute;\n top: 1rem;\n right: 1rem;\n}\n\n.boards-container {\n display: grid;\n gap: 1rem;\n padding: 1rem;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n}\n\n.board {\n background: var(--card);\n border-radius: 0.5rem;\n padding: 1rem;\n box-shadow: var(--shadow);\n}\n\n.task {\n background: var(--background);\n padding: 0.75rem;\n margin: 0.5rem 0;\n border-radius: 0.25rem;\n display: flex;\n gap: 0.75rem;\n align-items: start;\n cursor: move;\n}\n\n.completed-tasks {\n padding: 1rem;\n}\n\n@media (max-width: 768px) {\n .boards-container {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Theme toggle\n const themeToggle = document.getElementById('theme-toggle');\n themeToggle.addEventListener('change', () => {\n document.body.dataset.theme = themeToggle.checked ? 'dark' : 'light';\n });\n\n // Board and task management\n const boardsContainer = document.querySelector('.boards-container');\n const boardTemplate = document.getElementById('board-template');\n \n document.getElementById('add-board').addEventListener('click', () => {\n const boardClone = boardTemplate.content.cloneNode(true);\n boardsContainer.appendChild(boardClone);\n });\n\n // Drag and drop functionality\n let draggedTask;\n document.addEventListener('dragstart', (e) => {\n if (e.target.classList.contains('task')) {\n draggedTask = e.target;\n }\n });\n\n document.addEventListener('dragover', (e) => {\n e.preventDefault();\n const afterElement = getDragAfterElement(e.target.closest('.tasks'), e.clientY);\n const tasksContainer = e.target.closest('.tasks');\n if (tasksContainer && draggedTask) {\n if (afterElement == null) {\n tasksContainer.appendChild(draggedTask);\n } else {\n tasksContainer.insertBefore(draggedTask, afterElement);\n }\n }\n });\n\n function getDragAfterElement(container, y) {\n const draggableElements = [...container.querySelectorAll('.task:not(.dragging)')];\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 // Task completion\n document.addEventListener('change', (e) => {\n if (e.target.classList.contains('task-check') && e.target.checked) {\n const completedList = document.querySelector('.completed-list');\n const task = e.target.closest('.task');\n task.remove();\n completedList.appendChild(task);\n }\n });\n});\n---end---"
TaskFlow
\n\n \n \n
\n+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 340,
+ "completion_tokens": 1363,
+ "total_tokens": 1703,
+ "prompt_cache_hit_tokens": 64,
+ "prompt_cache_miss_tokens": 276
+ },
+ "system_fingerprint": "fp_f1afce2943"
+ }
readme.scroll
Changed around line 1
+ # taskflow4.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. Make sure I can add and delete boards too
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ // Theme toggle
+ const themeToggle = document.getElementById('theme-toggle');
+ themeToggle.addEventListener('change', () => {
+ document.body.dataset.theme = themeToggle.checked ? 'dark' : 'light';
+ });
+
+ // Board and task management
+ const boardsContainer = document.querySelector('.boards-container');
+ const boardTemplate = document.getElementById('board-template');
+
+ document.getElementById('add-board').addEventListener('click', () => {
+ const boardClone = boardTemplate.content.cloneNode(true);
+ boardsContainer.appendChild(boardClone);
+ });
+
+ // Drag and drop functionality
+ let draggedTask;
+ document.addEventListener('dragstart', (e) => {
+ if (e.target.classList.contains('task')) {
+ draggedTask = e.target;
+ }
+ });
+
+ document.addEventListener('dragover', (e) => {
+ e.preventDefault();
+ const afterElement = getDragAfterElement(e.target.closest('.tasks'), e.clientY);
+ const tasksContainer = e.target.closest('.tasks');
+ if (tasksContainer && draggedTask) {
+ if (afterElement == null) {
+ tasksContainer.appendChild(draggedTask);
+ } else {
+ tasksContainer.insertBefore(draggedTask, afterElement);
+ }
+ }
+ });
+
+ 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;
+ }
+
+ // Task completion
+ document.addEventListener('change', (e) => {
+ if (e.target.classList.contains('task-check') && e.target.checked) {
+ const completedList = document.querySelector('.completed-list');
+ const task = e.target.closest('.task');
+ task.remove();
+ completedList.appendChild(task);
+ }
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary: #6366f1;
+ --background: #f8fafc;
+ --text: #0f172a;
+ --card: #ffffff;
+ --shadow: 0 1px 3px rgba(0,0,0,0.1);
+ }
+
+ [data-theme="dark"] {
+ --primary: #818cf8;
+ --background: #0f172a;
+ --text: #f8fafc;
+ --card: #1e293b;
+ --shadow: 0 1px 3px rgba(255,255,255,0.1);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: system-ui, -apple-system, sans-serif;
+ background: var(--background);
+ color: var(--text);
+ min-height: 100vh;
+ transition: all 0.3s ease;
+ }
+
+ header {
+ background: var(--primary);
+ color: white;
+ padding: 1rem;
+ text-align: center;
+ }
+
+ .theme-switch {
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ }
+
+ .boards-container {
+ display: grid;
+ gap: 1rem;
+ padding: 1rem;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ }
+
+ .board {
+ background: var(--card);
+ border-radius: 0.5rem;
+ padding: 1rem;
+ box-shadow: var(--shadow);
+ }
+
+ .task {
+ background: var(--background);
+ padding: 0.75rem;
+ margin: 0.5rem 0;
+ border-radius: 0.25rem;
+ display: flex;
+ gap: 0.75rem;
+ align-items: start;
+ cursor: move;
+ }
+
+ .completed-tasks {
+ padding: 1rem;
+ }
+
+ @media (max-width: 768px) {
+ .boards-container {
+ grid-template-columns: 1fr;
+ }
+ }