commit d2b9cb5038719478928e48d2dd7480ed97fc28b0
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 04:42:44 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..b00f25e
--- /dev/null
+++ b/body.html
@@ -0,0 +1,63 @@
+<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="task-board">
+ <div class="column" id="todo">
+ <h2>To Do</h2>
+ <div class="add-task">
+ <button id="add-task-btn">+ Add Task</button>
+ </div>
+ <div class="tasks"></div>
+ </div>
+
+ <div class="column" id="in-progress">
+ <h2>In Progress</h2>
+ <div class="tasks"></div>
+ </div>
+
+ <div class="column" id="completed">
+ <h2>Completed</h2>
+ <div class="tasks"></div>
+ </div>
+ </section>
+
+ <div class="task-modal" id="task-modal">
+ <div class="modal-content">
+ <span class="close-btn">×</span>
+ <h2>New Task</h2>
+ <form id="task-form">
+ <div class="form-group">
+ <label for="task-name">Task Name</label>
+ <input type="text" id="task-name" required>
+ </div>
+ <div class="form-group">
+ <label for="task-description">Description</label>
+ <textarea id="task-description"></textarea>
+ </div>
+ <div class="form-group">
+ <label for="task-labels">Labels</label>
+ <input type="text" id="task-labels" placeholder="Comma separated">
+ </div>
+ <div class="form-group">
+ <label for="task-due-date">Due Date</label>
+ <input type="date" id="task-due-date">
+ </div>
+ <div class="form-group">
+ <label for="task-color">Color</label>
+ <input type="color" id="task-color" value="#ffffff">
+ </div>
+ <button type="submit">Add Task</button>
+ </form>
+ </div>
+ </div>
+</main>
+
+<footer>
+ <p>Simple task management made beautiful</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..d6d7207
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://taskflow.scroll.pub
+metaTags
+editButton /edit.html
+title TaskFlow - Simple Task Management
+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..0d444fd
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "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<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=\"task-board\">\n <div class=\"column\" id=\"todo\">\n <h2>To Do</h2>\n <div class=\"add-task\">\n <button id=\"add-task-btn\">+ Add Task</button>\n </div>\n <div class=\"tasks\"></div>\n </div>\n \n <div class=\"column\" id=\"in-progress\">\n <h2>In Progress</h2>\n <div class=\"tasks\"></div>\n </div>\n \n <div class=\"column\" id=\"completed\">\n <h2>Completed</h2>\n <div class=\"tasks\"></div>\n </div>\n </section>\n\n <div class=\"task-modal\" id=\"task-modal\">\n <div class=\"modal-content\">\n <span class=\"close-btn\">×</span>\n <h2>New Task</h2>\n <form id=\"task-form\">\n <div class=\"form-group\">\n <label for=\"task-name\">Task Name</label>\n <input type=\"text\" id=\"task-name\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"task-description\">Description</label>\n <textarea id=\"task-description\"></textarea>\n </div>\n <div class=\"form-group\">\n <label for=\"task-labels\">Labels</label>\n <input type=\"text\" id=\"task-labels\" placeholder=\"Comma separated\">\n </div>\n <div class=\"form-group\">\n <label for=\"task-due-date\">Due Date</label>\n <input type=\"date\" id=\"task-due-date\">\n </div>\n <div class=\"form-group\">\n <label for=\"task-color\">Color</label>\n <input type=\"color\" id=\"task-color\" value=\"#ffffff\">\n </div>\n <button type=\"submit\">Add Task</button>\n </form>\n </div>\n </div>\n</main>\n\n<footer>\n <p>Simple task management made beautiful</p>\n</footer>\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 <h3>${task.name}</h3>\n <p>${task.description}</p>\n <div class=\"task-meta\">\n <span>${task.labels}</span>\n <span>${task.dueDate}</span>\n </div>\n <input type=\"checkbox\" class=\"task-check\">\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"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..ef2d220
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# 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
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..345e45f
--- /dev/null
+++ b/script.js
@@ -0,0 +1,104 @@
+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 = `
+ <h3>${task.name}</h3>
+ <p>${task.description}</p>
+ <div class="task-meta">
+ <span>${task.labels}</span>
+ <span>${task.dueDate}</span>
+ </div>
+ <input type="checkbox" class="task-check">
+ `;
+
+ 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;
+ }
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..fbe2b7f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,138 @@
+: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;
+ }
+}
\ No newline at end of file