commit 981e6ac5ee5abe2f5f09aee9c3e3d23f7e404808
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 04:43:10 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..fee296d
--- /dev/null
+++ b/body.html
@@ -0,0 +1,51 @@
+<header>
+ <h1>TaskFlow</h1>
+ <div class="theme-switch">
+ <label for="theme-toggle">Dark Mode</label>
+ <input type="checkbox" id="theme-toggle">
+ </div>
+</header>
+
+<main>
+ <section class="board-controls">
+ <button id="add-board">+ Add Board</button>
+ </section>
+
+ <div class="boards-container"></div>
+
+ <template id="board-template">
+ <div class="board">
+ <div class="board-header">
+ <h2 contenteditable="true">New Board</h2>
+ <button class="delete-board">×</button>
+ </div>
+ <div class="tasks">
+ <div class="task" draggable="true">
+ <input type="checkbox" class="task-check">
+ <div class="task-content">
+ <h3 contenteditable="true">New Task</h3>
+ <p contenteditable="true">Task description...</p>
+ <div class="task-meta">
+ <input type="date" class="due-date">
+ <input type="color" class="task-color">
+ <div class="labels"></div>
+ </div>
+ </div>
+ <button class="delete-task">×</button>
+ </div>
+ </div>
+ <button class="add-task">+ Add Task</button>
+ </div>
+ </template>
+
+ <div class="completed-tasks">
+ <details>
+ <summary>Completed Tasks</summary>
+ <div class="completed-list"></div>
+ </details>
+ </div>
+</main>
+
+<footer>
+ <p>Organize your workflow with TaskFlow</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..9bd8b4b
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://taskflow.scroll.pub
+metaTags
+editButton /edit.html
+title TaskFlow - Your Simple Taskboard
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..0cbf196
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "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<header>\n <h1>TaskFlow</h1>\n <div class=\"theme-switch\">\n <label for=\"theme-toggle\">Dark Mode</label>\n <input type=\"checkbox\" id=\"theme-toggle\">\n </div>\n</header>\n\n<main>\n <section class=\"board-controls\">\n <button id=\"add-board\">+ Add Board</button>\n </section>\n\n <div class=\"boards-container\"></div>\n\n <template id=\"board-template\">\n <div class=\"board\">\n <div class=\"board-header\">\n <h2 contenteditable=\"true\">New Board</h2>\n <button class=\"delete-board\">×</button>\n </div>\n <div class=\"tasks\">\n <div class=\"task\" draggable=\"true\">\n <input type=\"checkbox\" class=\"task-check\">\n <div class=\"task-content\">\n <h3 contenteditable=\"true\">New Task</h3>\n <p contenteditable=\"true\">Task description...</p>\n <div class=\"task-meta\">\n <input type=\"date\" class=\"due-date\">\n <input type=\"color\" class=\"task-color\">\n <div class=\"labels\"></div>\n </div>\n </div>\n <button class=\"delete-task\">×</button>\n </div>\n </div>\n <button class=\"add-task\">+ Add Task</button>\n </div>\n </template>\n\n <div class=\"completed-tasks\">\n <details>\n <summary>Completed Tasks</summary>\n <div class=\"completed-list\"></div>\n </details>\n </div>\n</main>\n\n<footer>\n <p>Organize your workflow with TaskFlow</p>\n</footer>\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---"
+ },
+ "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"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..f960bc3
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# 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
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..59854c5
--- /dev/null
+++ b/script.js
@@ -0,0 +1,60 @@
+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);
+ }
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..e4efb60
--- /dev/null
+++ b/style.css
@@ -0,0 +1,77 @@
+: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;
+ }
+}
\ No newline at end of file