commit 0b085322c0e6b364019aeb3f82b33502323138db

Author: root <root@hub.scroll.pub> Date: 2024-12-28 04:39:09 +0000 Subject: Initial commit diff --git a/.log.txt b/.log.txt new file mode 100644 index 0000000..3de3883 --- /dev/null +++ b/.log.txt @@ -0,0 +1,7 @@ +read taskflow2.scroll.pub https://hub.scroll.pub/edit.html?folderName=taskflow2.scroll.pub 1735360731614 ::ffff:49.204.225.94 0.0 200 Chrome.131 WindowsNT.10.0 +read taskflow2.scroll.pub https://hub.scroll.pub/ls.json?folderName=taskflow2.scroll.pub 1735360733476 ::ffff:49.204.225.94 0.0 200 Chrome.131 WindowsNT.10.0 +read taskflow2.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=taskflow2.scroll.pub&filePath=taskflow2.scroll.pub%2Findex.scroll 1735360733713 ::ffff:49.204.225.94 0.0 200 Chrome.131 WindowsNT.10.0 +read taskflow2.scroll.pub http://taskflow2.scroll.pub/index.html 1735360742325 ::ffff:49.204.225.94 0.0 200 Chrome.131 WindowsNT.10.0 +read taskflow2.scroll.pub http://taskflow2.scroll.pub/script.js 1735360742642 ::ffff:49.204.225.94 0.0 200 Chrome.131 WindowsNT.10.0 +read taskflow2.scroll.pub http://taskflow2.scroll.pub/style.css 1735360742648 ::ffff:49.204.225.94 0.0 200 Chrome.131 WindowsNT.10.0 +read taskflow2.scroll.pub http://taskflow2.scroll.pub/favicon.ico 1735360743038 ::ffff:49.204.225.94 0.0 200 Chrome.131 WindowsNT.10.0 diff --git a/.stats.json b/.stats.json new file mode 100644 index 0000000..abdb294 --- /dev/null +++ b/.stats.json @@ -0,0 +1,21 @@ +{ + "files": [ + "body.html", + "index.scroll", + "prompt.json", + "readme.scroll", + "script.js", + "style.css" + ], + "hasSslCert": false, + "stats": { + "folder": "taskflow2.scroll.pub", + "folderLink": "http://taskflow2.scroll.pub", + "created": "2024-12-28T04:38:50.000Z", + "revised": "2024-12-28T04:38:50.000Z", + "files": 6, + "mb": 1, + "revisions": 1, + "hash": "13f6b4250e" + } +} \ No newline at end of file diff --git a/body.html b/body.html index 4c964d6..e61471e 100644 --- a/body.html +++ b/body.html @@ -1,55 +1,68 @@ <header> - <h1>TaskFlow</h1> - <div class="theme-switch"> - <label for="theme-toggle">Dark Mode</label> - <input type="checkbox" id="theme-toggle"> + <div class="logo">TaskFlow</div> + <div class="theme-toggle"> + <button id="themeToggle" aria-label="Toggle theme"> + <span class="sun">☀️</span> + <span class="moon">🌙</span> + </button> </div> </header> <main> - <section class="taskboard"> - <div class="column" id="todo"> + <div class="board-container"> + <div class="board-column" id="todoColumn"> <h2>To Do</h2> - <button class="add-task">+ Add Task</button> - <div class="tasks"></div> + <div class="task-list" data-column="todo"></div> + <button class="add-task-btn" data-column="todo">+ Add Task</button> </div> - - <div class="column" id="in-progress"> + + <div class="board-column" id="inProgressColumn"> <h2>In Progress</h2> - <div class="tasks"></div> + <div class="task-list" data-column="inProgress"></div> + <button class="add-task-btn" data-column="inProgress">+ Add Task</button> </div> - - <div class="column" id="completed"> + + <div class="board-column" id="completedColumn"> <h2>Completed</h2> - <div class="tasks"></div> + <div class="completed-tasks-header"> + <span>Completed Tasks</span> + <button class="toggle-completed" aria-label="Toggle completed tasks">▼</button> + </div> + <div class="task-list completed-list" data-column="completed"></div> </div> - </section> + </div> - <dialog id="task-modal"> - <form> - <label for="task-name">Task Name</label> - <input type="text" id="task-name" required> - - <label for="task-desc">Description</label> - <textarea id="task-desc"></textarea> - - <label for="task-labels">Labels</label> - <input type="text" id="task-labels" placeholder="Comma separated"> - - <label for="task-due">Due Date</label> - <input type="date" id="task-due"> - - <label for="task-color">Color</label> - <input type="color" id="task-color" value="#ffffff"> - - <div class="buttons"> + <dialog id="taskDialog"> + <form id="taskForm"> + <h3>Add Task</h3> + <div class="form-group"> + <label for="taskName">Task Name</label> + <input type="text" id="taskName" required> + </div> + <div class="form-group"> + <label for="taskDescription">Description</label> + <textarea id="taskDescription"></textarea> + </div> + <div class="form-group"> + <label for="taskLabels">Labels (comma-separated)</label> + <input type="text" id="taskLabels"> + </div> + <div class="form-group"> + <label for="taskDueDate">Due Date</label> + <input type="date" id="taskDueDate"> + </div> + <div class="form-group"> + <label for="taskColor">Color</label> + <input type="color" id="taskColor" value="#ffffff"> + </div> + <div class="dialog-buttons"> <button type="submit">Save</button> - <button type="button" class="cancel">Cancel</button> + <button type="button" class="cancel-btn">Cancel</button> </div> </form> </dialog> </main> <footer> - <p>Organize your workflow with ease</p> -</footer> \ No newline at end of file + <p>TaskFlow - Organize your work with ease</p> +</footer> diff --git a/index.html b/index.html new file mode 100644 index 0000000..6c3b9cb --- /dev/null +++ b/index.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>TaskFlow - Simple Task Management</title> + <script>/* This HTML was generated by 📜 Scroll v164.7.0. https://scroll.pub */</script> + <style>@media print {.doNotPrint {display: none !important;}}</style> + <link rel="canonical" href="https://taskflow.scroll.pub/index.html"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <meta name="description" content=""> + <meta name="generator" content="Scroll v164.7.0"> + <meta property="og:title" content="TaskFlow - Simple Task Management"> + <meta property="og:description" content=""> + <meta property="og:image" content=""> + + <link rel="source" type="application/git" title="Source Code Repository" href="index.scroll"> + + <meta name="twitter:card" content="summary_large_image"> +</head> +<body> +<style>.abstractIconButtonParser {position:absolute;top:0.25rem; }.abstractIconButtonParser svg {fill: rgba(204,204,204,.8);width:1.875rem;height:1.875rem; padding: 0 7px;} .abstractIconButtonParser:hover svg{fill: #333;}</style><a href="/edit.html" class="doNotPrint abstractIconButtonParser" style="right:2rem;"><svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z"/></svg></a> +<link rel="stylesheet" type="text/css" href="style.css"> +<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="taskboard"> + <div class="column" id="todo"> + <h2>To Do</h2> + <button class="add-task">+ Add Task</button> + <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> + + <dialog id="task-modal"> + <form> + <label for="task-name">Task Name</label> + <input type="text" id="task-name" required> + + <label for="task-desc">Description</label> + <textarea id="task-desc"></textarea> + + <label for="task-labels">Labels</label> + <input type="text" id="task-labels" placeholder="Comma separated"> + + <label for="task-due">Due Date</label> + <input type="date" id="task-due"> + + <label for="task-color">Color</label> + <input type="color" id="task-color" value="#ffffff"> + + <div class="buttons"> + <button type="submit">Save</button> + <button type="button" class="cancel">Cancel</button> + </div> + </form> + </dialog> +</main> + +<footer> + <p>Organize your workflow with ease</p> +</footer> +<script src="script.js"></script> +</body> +</html> \ No newline at end of file diff --git a/index.scroll b/index.scroll index d6d7207..00c6f65 100644 --- a/index.scroll +++ b/index.scroll @@ -2,7 +2,7 @@ buildHtml baseUrl https://taskflow.scroll.pub metaTags editButton /edit.html -title TaskFlow - Simple Task Management +title TaskFlow - Beautiful Task Management style.css body.html -script.js \ No newline at end of file +script.js diff --git a/prompt.json b/prompt.json index 0dd2af4..d88b49f 100644 --- a/prompt.json +++ b/prompt.json @@ -1,25 +1,20 @@ { - "id": "8f148f52-9304-4942-aae1-ccb03bb3fceb", - "object": "chat.completion", - "created": 1735360709, - "model": "deepseek-chat", - "choices": [ + "id": "msg_01XgHvSswAwefPgqXfVfPC13", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ { - "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=\"taskboard\">\n <div class=\"column\" id=\"todo\">\n <h2>To Do</h2>\n <button class=\"add-task\">+ Add Task</button>\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 <dialog id=\"task-modal\">\n <form>\n <label for=\"task-name\">Task Name</label>\n <input type=\"text\" id=\"task-name\" required>\n \n <label for=\"task-desc\">Description</label>\n <textarea id=\"task-desc\"></textarea>\n \n <label for=\"task-labels\">Labels</label>\n <input type=\"text\" id=\"task-labels\" placeholder=\"Comma separated\">\n \n <label for=\"task-due\">Due Date</label>\n <input type=\"date\" id=\"task-due\">\n \n <label for=\"task-color\">Color</label>\n <input type=\"color\" id=\"task-color\" value=\"#ffffff\">\n \n <div class=\"buttons\">\n <button type=\"submit\">Save</button>\n <button type=\"button\" class=\"cancel\">Cancel</button>\n </div>\n </form>\n </dialog>\n</main>\n\n<footer>\n <p>Organize your workflow with ease</p>\n</footer>\n---style.css---\n:root {\n --bg-light: #f5f5f5;\n --bg-dark: #1a1a1a;\n --text-light: #333;\n --text-dark: #f5f5f5;\n --primary: #6366f1;\n --primary-hover: #4f46e5;\n --gradient: linear-gradient(135deg, #6366f1, #a855f7);\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 line-height: 1.6;\n background: var(--bg-light);\n color: var(--text-light);\n transition: all 0.3s ease;\n}\n\nbody.dark-mode {\n background: var(--bg-dark);\n color: var(--text-dark);\n}\n\nheader {\n background: var(--gradient);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\n.theme-switch {\n position: absolute;\n top: 1rem;\n right: 1rem;\n}\n\nmain {\n padding: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.taskboard {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n}\n\n.column {\n background: rgba(255, 255, 255, 0.9);\n border-radius: 1rem;\n padding: 1rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.dark-mode .column {\n background: rgba(0, 0, 0, 0.2);\n}\n\n.tasks {\n min-height: 100px;\n margin-top: 1rem;\n}\n\n.task {\n background: white;\n border-radius: 0.5rem;\n padding: 1rem;\n margin-bottom: 1rem;\n cursor: grab;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.dark-mode .task {\n background: rgba(255, 255, 255, 0.1);\n}\n\n.add-task {\n width: 100%;\n padding: 0.5rem;\n border: none;\n border-radius: 0.5rem;\n background: var(--primary);\n color: white;\n cursor: pointer;\n transition: background 0.3s ease;\n}\n\n.add-task:hover {\n background: var(--primary-hover);\n}\n\n@media (max-width: 768px) {\n .taskboard {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const themeToggle = document.getElementById('theme-toggle');\n const body = document.body;\n const taskModal = document.getElementById('task-modal');\n const addTaskBtn = document.querySelector('.add-task');\n const cancelBtn = document.querySelector('.cancel');\n const taskForm = document.querySelector('#task-modal form');\n const todoColumn = document.querySelector('#todo .tasks');\n\n // Theme toggle\n themeToggle.addEventListener('change', () => {\n body.classList.toggle('dark-mode');\n });\n\n // Task modal\n addTaskBtn.addEventListener('click', () => {\n taskModal.showModal();\n });\n\n cancelBtn.addEventListener('click', () => {\n taskModal.close();\n });\n\n // Add new task\n taskForm.addEventListener('submit', (e) => {\n e.preventDefault();\n \n const task = {\n name: document.getElementById('task-name').value,\n description: document.getElementById('task-desc').value,\n labels: document.getElementById('task-labels').value,\n dueDate: document.getElementById('task-due').value,\n color: document.getElementById('task-color').value\n };\n\n createTask(task);\n taskModal.close();\n taskForm.reset();\n });\n\n function createTask(task) {\n const taskElement = document.createElement('div');\n taskElement.classList.add('task');\n taskElement.style.backgroundColor = task.color;\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 `;\n todoColumn.appendChild(taskElement);\n }\n\n // Drag and drop functionality\n const tasks = document.querySelectorAll('.task');\n const columns = document.querySelectorAll('.column');\n\n tasks.forEach(task => {\n task.addEventListener('dragstart', dragStart);\n task.addEventListener('dragend', dragEnd);\n });\n\n columns.forEach(column => {\n column.addEventListener('dragover', dragOver);\n column.addEventListener('drop', dragDrop);\n });\n\n let draggedTask = null;\n\n function dragStart() {\n draggedTask = this;\n setTimeout(() => this.style.display = 'none', 0);\n }\n\n function dragEnd() {\n draggedTask.style.display = 'block';\n draggedTask = null;\n }\n\n function dragOver(e) {\n e.preventDefault();\n }\n\n function dragDrop() {\n this.querySelector('.tasks').appendChild(draggedTask);\n }\n});\n---end---" - }, - "logprobs": null, - "finish_reason": "stop" + "type": "text", + "text": "I'll help create a sleek taskboard application. For the domain, I suggest:\n\n---domain---\ntaskflow.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://taskflow.scroll.pub\nmetaTags\neditButton /edit.html\ntitle TaskFlow - Beautiful Task Management\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <div class=\"logo\">TaskFlow</div>\n <div class=\"theme-toggle\">\n <button id=\"themeToggle\" aria-label=\"Toggle theme\">\n <span class=\"sun\">☀️</span>\n <span class=\"moon\">🌙</span>\n </button>\n </div>\n</header>\n\n<main>\n <div class=\"board-container\">\n <div class=\"board-column\" id=\"todoColumn\">\n <h2>To Do</h2>\n <div class=\"task-list\" data-column=\"todo\"></div>\n <button class=\"add-task-btn\" data-column=\"todo\">+ Add Task</button>\n </div>\n\n <div class=\"board-column\" id=\"inProgressColumn\">\n <h2>In Progress</h2>\n <div class=\"task-list\" data-column=\"inProgress\"></div>\n <button class=\"add-task-btn\" data-column=\"inProgress\">+ Add Task</button>\n </div>\n\n <div class=\"board-column\" id=\"completedColumn\">\n <h2>Completed</h2>\n <div class=\"completed-tasks-header\">\n <span>Completed Tasks</span>\n <button class=\"toggle-completed\" aria-label=\"Toggle completed tasks\">▼</button>\n </div>\n <div class=\"task-list completed-list\" data-column=\"completed\"></div>\n </div>\n </div>\n\n <dialog id=\"taskDialog\">\n <form id=\"taskForm\">\n <h3>Add Task</h3>\n <div class=\"form-group\">\n <label for=\"taskName\">Task Name</label>\n <input type=\"text\" id=\"taskName\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"taskDescription\">Description</label>\n <textarea id=\"taskDescription\"></textarea>\n </div>\n <div class=\"form-group\">\n <label for=\"taskLabels\">Labels (comma-separated)</label>\n <input type=\"text\" id=\"taskLabels\">\n </div>\n <div class=\"form-group\">\n <label for=\"taskDueDate\">Due Date</label>\n <input type=\"date\" id=\"taskDueDate\">\n </div>\n <div class=\"form-group\">\n <label for=\"taskColor\">Color</label>\n <input type=\"color\" id=\"taskColor\" value=\"#ffffff\">\n </div>\n <div class=\"dialog-buttons\">\n <button type=\"submit\">Save</button>\n <button type=\"button\" class=\"cancel-btn\">Cancel</button>\n </div>\n </form>\n </dialog>\n</main>\n\n<footer>\n <p>TaskFlow - Organize your work with ease</p>\n</footer>\n\n---style.css---\n:root {\n --primary-gradient: linear-gradient(135deg, #6e8efb, #a777e3);\n --bg-light: #f8f9fa;\n --bg-dark: #1a1a1a;\n --text-light: #333;\n --text-dark: #fff;\n --card-light: #fff;\n --card-dark: #2d2d2d;\n --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n[data-theme=\"dark\"] {\n --bg-color: var(--bg-dark);\n --text-color: var(--text-dark);\n --card-bg: var(--card-dark);\n}\n\n[data-theme=\"light\"] {\n --bg-color: var(--bg-light);\n --text-color: var(--text-light);\n --card-bg: var(--card-light);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n background: var(--bg-color);\n color: var(--text-color);\n transition: background-color 0.3s, color 0.3s;\n}\n\nheader {\n background: var(--primary-gradient);\n padding: 1rem 2rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: var(--shadow);\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: white;\n}\n\n.theme-toggle button {\n background: none;\n border: none;\n cursor: pointer;\n font-size: 1.2rem;\n padding: 0.5rem;\n}\n\nmain {\n padding: 2rem;\n max-width: 1400px;\n margin: 0 auto;\n}\n\n.board-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-bottom: 2rem;\n}\n\n.board-column {\n background: var(--card-bg);\n border-radius: 10px;\n padding: 1rem;\n box-shadow: var(--shadow);\n}\n\n.task-list {\n min-height: 200px;\n margin: 1rem 0;\n}\n\n.task-card {\n background: var(--card-bg);\n border-radius: 8px;\n padding: 1rem;\n margin-bottom: 1rem;\n cursor: grab;\n box-shadow: var(--shadow);\n transition: transform 0.2s;\n}\n\n.task-card:hover {\n transform: translateY(-2px);\n}\n\n.task-card.dragging {\n opacity: 0.5;\n}\n\n.add-task-btn {\n width: 100%;\n padding: 0.8rem;\n background: var(--primary-gradient);\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: opacity 0.2s;\n}\n\n.add-task-btn:hover {\n opacity: 0.9;\n}\n\ndialog {\n background: var(--card-bg);\n border: none;\n border-radius: 10px;\n padding: 2rem;\n max-width: 500px;\n width: 90%;\n}\n\ndialog::backdrop {\n background: rgba(0, 0, 0, 0.5);\n}\n\n.form-group {\n margin-bottom: 1rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n}\n\ninput, textarea {\n width: 100%;\n padding: 0.5rem;\n border: 1px solid #ddd;\n border-radius: 4px;\n background: var(--card-bg);\n color: var(--text-color);\n}\n\n.dialog-buttons {\n display: flex;\n gap: 1rem;\n justify-content: flex-end;\n margin-top: 1rem;\n}\n\n.dialog-buttons button {\n padding: 0.5rem 1rem;\n border-radius: 4px;\n cursor: pointer;\n}\n\n.dialog-buttons button[type=\"submit\"] {\n background: var(--primary-gradient);\n color: white;\n border: none;\n}\n\n.cancel-btn {\n background: transparent;\n border: 1px solid #ddd;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--primary-gradient);\n color: white;\n margin-top: auto;\n}\n\n@media (max-width: 768px) {\n main {\n padding: 1rem;\n }\n \n .board-container {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const themeToggle = document.getElementById('themeToggle');\n const taskDialog = document.getElementById('taskDialog');\n const taskForm = document.getElementById('taskForm');\n const addTaskBtns = document.querySelectorAll('.add-task-btn');\n \n let currentColumn = null;\n \n // Theme Management\n const setTheme = (theme) => {\n document.documentElement.setAttribute('data-theme', theme);\n localStorage.setItem('theme', theme);\n };\n\n themeToggle.addEventListener('click', () => {\n const currentTheme = localStorage.getItem('theme') || 'light';\n setTheme(currentTheme === 'light' ? 'dark' : 'light');\n });\n\n // Initialize theme\n setTheme(localStorage.getItem('theme') || 'light');\n\n // Dialog Management\n addTaskBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n currentColumn = btn.dataset.column;\n taskDialog.showModal();\n });\n });\n\n document.querySelector('.cancel-btn').addEventListener('click', () => {\n taskDialog.close();\n taskForm.reset();\n });\n\n // Task Management\n taskForm.addEventListener('submit', (e) => {\n e.preventDefault();\n \n const task = {\n id: Date.now(),\n name: document.getElementById('taskName').value,\n description: document.getElementById('taskDescription').value,\n labels: document.getElementById('taskLabels').value.split(',').map(label => label.trim()),\n dueDate: document.getElementById('taskDueDate').value,\n color: document.getElementById('taskColor').value,\n completed: false\n };\n\n createTaskCard(task, currentColumn);\n taskDialog.close();\n taskForm.reset();\n });\n\n function createTaskCard(task, column) {\n const taskCard = document.createElement('div');\n taskCard.className = 'task-card';\n taskCard.draggable = true;\n taskCard.style.backgroundColor = task.color;\n \n taskCard.innerHTML = `\n <input type=\"checkbox\" ${task.completed ? 'checked' : ''}>\n <h3>${task.name}</h3>\n <p>${task.description}</p>\n <div class=\"labels\">\n ${task.labels.map(label => `<span class=\"label\">${label}</span>`).join('')}\n </div>\n ${task.dueDate ? `<div class=\"due-date\">Due: ${task.dueDate}</div>` : ''}\n `;\n\n const targetColumn = document.querySelector(`[data-column=\"${column}\"] .task-list`);\n targetColumn.appendChild(taskCard);\n\n // Drag and Drop\n taskCard.addEventListener('dragstart', () => {\n taskCard.classList.add('dragging');\n });\n\n taskCard.addEventListener('dragend', () => {\n taskCard.classList.remove('dragging');\n });\n\n // Checkbox handling\n const checkbox = taskCard.querySelector('input[type=\"checkbox\"]');\n checkbox.addEventListener('change', () => {\n if (checkbox.checked) {\n const completedList = document.querySelector('[data-column=\"completed\"] .task-list');\n completedList.appendChild(taskCard);\n task.completed = true;\n }\n });\n }\n\n // Drag and Drop Logic\n document.querySelectorAll('.task-list').forEach(list => {\n list.addEventListener('dragover', e => {\n e.preventDefault();\n const draggingCard = document.querySelector('.dragging');\n const cards = [...list.querySelectorAll('.task-card:not(.dragging)')];\n const afterCard = cards.reduce((closest, card) => {\n const box = card.getBoundingClientRect();\n const offset = e.clientY - box.top - box.height / 2;\n if (offset < 0 && offset > closest.offset) {\n return { offset, element: card };\n }\n return closest;\n }, { offset: Number.NEGATIVE_INFINITY }).element;\n\n if (afterCard) {\n list.insertBefore(draggingCard, afterCard);\n } else {\n list.appendChild(draggingCard);\n }\n });\n });\n});\n\n---end---\n\nThis implementation creates a beautiful and functional taskboard with drag-and-drop capabilities, task management, and theme switching. Key features include:\n\n1. Responsive design that works on all devices\n2. Smooth animations and transitions\n3. Beautiful gradient accents\n4. Dark/light theme support\n5. Drag and drop functionality\n6. Task creation with custom properties\n7. Completed tasks management\n8. Accessible form controls and semantic HTML\n9. Clean, modern UI with subtle shadows and hover effects\n10. Local storage for theme preference\n\nThe CSS uses modern features like CSS Grid, custom properties, and smooth transitions. The JavaScript handles all interactions without any external dependencies. The design is professional and user-friendly while maintaining a clean, minimal aesthetic." } ], + "stop_reason": "end_turn", + "stop_sequence": null, "usage": { - "prompt_tokens": 330, - "completion_tokens": 1640, - "total_tokens": 1970, - "prompt_cache_hit_tokens": 0, - "prompt_cache_miss_tokens": 330 - }, - "system_fingerprint": "fp_f1afce2943" + "input_tokens": 367, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 3339 + } } \ No newline at end of file diff --git a/readme.scroll b/readme.scroll index a861ea8..5b3eea3 100644 --- a/readme.scroll +++ b/readme.scroll @@ -1,2 +1,2 @@ # taskflow2.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 +Website generated by Claude 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 index 67f8bab..9e63853 100644 --- a/script.js +++ b/script.js @@ -1,89 +1,116 @@ document.addEventListener('DOMContentLoaded', () => { - const themeToggle = document.getElementById('theme-toggle'); - const body = document.body; - const taskModal = document.getElementById('task-modal'); - const addTaskBtn = document.querySelector('.add-task'); - const cancelBtn = document.querySelector('.cancel'); - const taskForm = document.querySelector('#task-modal form'); - const todoColumn = document.querySelector('#todo .tasks'); + const themeToggle = document.getElementById('themeToggle'); + const taskDialog = document.getElementById('taskDialog'); + const taskForm = document.getElementById('taskForm'); + const addTaskBtns = document.querySelectorAll('.add-task-btn'); + + let currentColumn = null; + + // Theme Management + const setTheme = (theme) => { + document.documentElement.setAttribute('data-theme', theme); + localStorage.setItem('theme', theme); + }; - // Theme toggle - themeToggle.addEventListener('change', () => { - body.classList.toggle('dark-mode'); + themeToggle.addEventListener('click', () => { + const currentTheme = localStorage.getItem('theme') || 'light'; + setTheme(currentTheme === 'light' ? 'dark' : 'light'); }); - // Task modal - addTaskBtn.addEventListener('click', () => { - taskModal.showModal(); + // Initialize theme + setTheme(localStorage.getItem('theme') || 'light'); + + // Dialog Management + addTaskBtns.forEach(btn => { + btn.addEventListener('click', () => { + currentColumn = btn.dataset.column; + taskDialog.showModal(); + }); }); - cancelBtn.addEventListener('click', () => { - taskModal.close(); + document.querySelector('.cancel-btn').addEventListener('click', () => { + taskDialog.close(); + taskForm.reset(); }); - // Add new task + // Task Management taskForm.addEventListener('submit', (e) => { e.preventDefault(); const task = { - name: document.getElementById('task-name').value, - description: document.getElementById('task-desc').value, - labels: document.getElementById('task-labels').value, - dueDate: document.getElementById('task-due').value, - color: document.getElementById('task-color').value + id: Date.now(), + name: document.getElementById('taskName').value, + description: document.getElementById('taskDescription').value, + labels: document.getElementById('taskLabels').value.split(',').map(label => label.trim()), + dueDate: document.getElementById('taskDueDate').value, + color: document.getElementById('taskColor').value, + completed: false }; - createTask(task); - taskModal.close(); + createTaskCard(task, currentColumn); + taskDialog.close(); taskForm.reset(); }); - function createTask(task) { - const taskElement = document.createElement('div'); - taskElement.classList.add('task'); - taskElement.style.backgroundColor = task.color; - taskElement.innerHTML = ` + function createTaskCard(task, column) { + const taskCard = document.createElement('div'); + taskCard.className = 'task-card'; + taskCard.draggable = true; + taskCard.style.backgroundColor = task.color; + + taskCard.innerHTML = ` + <input type="checkbox" ${task.completed ? 'checked' : ''}> <h3>${task.name}</h3> <p>${task.description}</p> - <div class="task-meta"> - <span>${task.labels}</span> - <span>${task.dueDate}</span> + <div class="labels"> + ${task.labels.map(label => `<span class="label">${label}</span>`).join('')} </div> + ${task.dueDate ? `<div class="due-date">Due: ${task.dueDate}</div>` : ''} `; - todoColumn.appendChild(taskElement); - } - // Drag and drop functionality - const tasks = document.querySelectorAll('.task'); - const columns = document.querySelectorAll('.column'); + const targetColumn = document.querySelector(`[data-column="${column}"] .task-list`); + targetColumn.appendChild(taskCard); - tasks.forEach(task => { - task.addEventListener('dragstart', dragStart); - task.addEventListener('dragend', dragEnd); - }); - - columns.forEach(column => { - column.addEventListener('dragover', dragOver); - column.addEventListener('drop', dragDrop); - }); + // Drag and Drop + taskCard.addEventListener('dragstart', () => { + taskCard.classList.add('dragging'); + }); - let draggedTask = null; + taskCard.addEventListener('dragend', () => { + taskCard.classList.remove('dragging'); + }); - function dragStart() { - draggedTask = this; - setTimeout(() => this.style.display = 'none', 0); + // Checkbox handling + const checkbox = taskCard.querySelector('input[type="checkbox"]'); + checkbox.addEventListener('change', () => { + if (checkbox.checked) { + const completedList = document.querySelector('[data-column="completed"] .task-list'); + completedList.appendChild(taskCard); + task.completed = true; + } + }); } - function dragEnd() { - draggedTask.style.display = 'block'; - draggedTask = null; - } - - function dragOver(e) { - e.preventDefault(); - } + // Drag and Drop Logic + document.querySelectorAll('.task-list').forEach(list => { + list.addEventListener('dragover', e => { + e.preventDefault(); + const draggingCard = document.querySelector('.dragging'); + const cards = [...list.querySelectorAll('.task-card:not(.dragging)')]; + const afterCard = cards.reduce((closest, card) => { + const box = card.getBoundingClientRect(); + const offset = e.clientY - box.top - box.height / 2; + if (offset < 0 && offset > closest.offset) { + return { offset, element: card }; + } + return closest; + }, { offset: Number.NEGATIVE_INFINITY }).element; - function dragDrop() { - this.querySelector('.tasks').appendChild(draggedTask); - } -}); \ No newline at end of file + if (afterCard) { + list.insertBefore(draggingCard, afterCard); + } else { + list.appendChild(draggingCard); + } + }); + }); +}); diff --git a/style.css b/style.css index ceb136d..c6b3aae 100644 --- a/style.css +++ b/style.css @@ -1,11 +1,24 @@ :root { - --bg-light: #f5f5f5; + --primary-gradient: linear-gradient(135deg, #6e8efb, #a777e3); + --bg-light: #f8f9fa; --bg-dark: #1a1a1a; --text-light: #333; - --text-dark: #f5f5f5; - --primary: #6366f1; - --primary-hover: #4f46e5; - --gradient: linear-gradient(135deg, #6366f1, #a855f7); + --text-dark: #fff; + --card-light: #fff; + --card-dark: #2d2d2d; + --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +[data-theme="dark"] { + --bg-color: var(--bg-dark); + --text-color: var(--text-dark); + --card-bg: var(--card-dark); +} + +[data-theme="light"] { + --bg-color: var(--bg-light); + --text-color: var(--text-light); + --card-bg: var(--card-light); } * { @@ -15,89 +28,162 @@ } body { - font-family: 'Segoe UI', sans-serif; - line-height: 1.6; - background: var(--bg-light); - color: var(--text-light); - transition: all 0.3s ease; + font-family: 'Segoe UI', system-ui, sans-serif; + background: var(--bg-color); + color: var(--text-color); + transition: background-color 0.3s, color 0.3s; } -body.dark-mode { - background: var(--bg-dark); - color: var(--text-dark); +header { + background: var(--primary-gradient); + padding: 1rem 2rem; + display: flex; + justify-content: space-between; + align-items: center; + box-shadow: var(--shadow); } -header { - background: var(--gradient); +.logo { + font-size: 1.5rem; + font-weight: bold; color: white; - padding: 2rem; - text-align: center; } -.theme-switch { - position: absolute; - top: 1rem; - right: 1rem; +.theme-toggle button { + background: none; + border: none; + cursor: pointer; + font-size: 1.2rem; + padding: 0.5rem; } main { padding: 2rem; - max-width: 1200px; + max-width: 1400px; margin: 0 auto; } -.taskboard { +.board-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; + margin-bottom: 2rem; } -.column { - background: rgba(255, 255, 255, 0.9); - border-radius: 1rem; +.board-column { + background: var(--card-bg); + border-radius: 10px; padding: 1rem; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow); } -.dark-mode .column { - background: rgba(0, 0, 0, 0.2); -} - -.tasks { - min-height: 100px; - margin-top: 1rem; +.task-list { + min-height: 200px; + margin: 1rem 0; } -.task { - background: white; - border-radius: 0.5rem; +.task-card { + background: var(--card-bg); + border-radius: 8px; padding: 1rem; margin-bottom: 1rem; cursor: grab; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow); + transition: transform 0.2s; } -.dark-mode .task { - background: rgba(255, 255, 255, 0.1); +.task-card:hover { + transform: translateY(-2px); } -.add-task { +.task-card.dragging { + opacity: 0.5; +} + +.add-task-btn { width: 100%; - padding: 0.5rem; - border: none; - border-radius: 0.5rem; - background: var(--primary); + padding: 0.8rem; + background: var(--primary-gradient); color: white; + border: none; + border-radius: 5px; cursor: pointer; - transition: background 0.3s ease; + transition: opacity 0.2s; } -.add-task:hover { - background: var(--primary-hover); +.add-task-btn:hover { + opacity: 0.9; +} + +dialog { + background: var(--card-bg); + border: none; + border-radius: 10px; + padding: 2rem; + max-width: 500px; + width: 90%; +} + +dialog::backdrop { + background: rgba(0, 0, 0, 0.5); +} + +.form-group { + margin-bottom: 1rem; +} + +label { + display: block; + margin-bottom: 0.5rem; +} + +input, textarea { + width: 100%; + padding: 0.5rem; + border: 1px solid #ddd; + border-radius: 4px; + background: var(--card-bg); + color: var(--text-color); +} + +.dialog-buttons { + display: flex; + gap: 1rem; + justify-content: flex-end; + margin-top: 1rem; +} + +.dialog-buttons button { + padding: 0.5rem 1rem; + border-radius: 4px; + cursor: pointer; +} + +.dialog-buttons button[type="submit"] { + background: var(--primary-gradient); + color: white; + border: none; +} + +.cancel-btn { + background: transparent; + border: 1px solid #ddd; +} + +footer { + text-align: center; + padding: 2rem; + background: var(--primary-gradient); + color: white; + margin-top: auto; } @media (max-width: 768px) { - .taskboard { + main { + padding: 1rem; + } + + .board-container { grid-template-columns: 1fr; } -} \ No newline at end of file +}

commit 13f6b4250e3c33b004a84ae0ebf1993ef540083a

Author: root <root@hub.scroll.pub> Date: 2024-12-28 04:38:50 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..4c964d6 --- /dev/null +++ b/body.html @@ -0,0 +1,55 @@ +<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="taskboard"> + <div class="column" id="todo"> + <h2>To Do</h2> + <button class="add-task">+ Add Task</button> + <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> + + <dialog id="task-modal"> + <form> + <label for="task-name">Task Name</label> + <input type="text" id="task-name" required> + + <label for="task-desc">Description</label> + <textarea id="task-desc"></textarea> + + <label for="task-labels">Labels</label> + <input type="text" id="task-labels" placeholder="Comma separated"> + + <label for="task-due">Due Date</label> + <input type="date" id="task-due"> + + <label for="task-color">Color</label> + <input type="color" id="task-color" value="#ffffff"> + + <div class="buttons"> + <button type="submit">Save</button> + <button type="button" class="cancel">Cancel</button> + </div> + </form> + </dialog> +</main> + +<footer> + <p>Organize your workflow with ease</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..0dd2af4 --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "8f148f52-9304-4942-aae1-ccb03bb3fceb", + "object": "chat.completion", + "created": 1735360709, + "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=\"taskboard\">\n <div class=\"column\" id=\"todo\">\n <h2>To Do</h2>\n <button class=\"add-task\">+ Add Task</button>\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 <dialog id=\"task-modal\">\n <form>\n <label for=\"task-name\">Task Name</label>\n <input type=\"text\" id=\"task-name\" required>\n \n <label for=\"task-desc\">Description</label>\n <textarea id=\"task-desc\"></textarea>\n \n <label for=\"task-labels\">Labels</label>\n <input type=\"text\" id=\"task-labels\" placeholder=\"Comma separated\">\n \n <label for=\"task-due\">Due Date</label>\n <input type=\"date\" id=\"task-due\">\n \n <label for=\"task-color\">Color</label>\n <input type=\"color\" id=\"task-color\" value=\"#ffffff\">\n \n <div class=\"buttons\">\n <button type=\"submit\">Save</button>\n <button type=\"button\" class=\"cancel\">Cancel</button>\n </div>\n </form>\n </dialog>\n</main>\n\n<footer>\n <p>Organize your workflow with ease</p>\n</footer>\n---style.css---\n:root {\n --bg-light: #f5f5f5;\n --bg-dark: #1a1a1a;\n --text-light: #333;\n --text-dark: #f5f5f5;\n --primary: #6366f1;\n --primary-hover: #4f46e5;\n --gradient: linear-gradient(135deg, #6366f1, #a855f7);\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 line-height: 1.6;\n background: var(--bg-light);\n color: var(--text-light);\n transition: all 0.3s ease;\n}\n\nbody.dark-mode {\n background: var(--bg-dark);\n color: var(--text-dark);\n}\n\nheader {\n background: var(--gradient);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\n.theme-switch {\n position: absolute;\n top: 1rem;\n right: 1rem;\n}\n\nmain {\n padding: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.taskboard {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n}\n\n.column {\n background: rgba(255, 255, 255, 0.9);\n border-radius: 1rem;\n padding: 1rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.dark-mode .column {\n background: rgba(0, 0, 0, 0.2);\n}\n\n.tasks {\n min-height: 100px;\n margin-top: 1rem;\n}\n\n.task {\n background: white;\n border-radius: 0.5rem;\n padding: 1rem;\n margin-bottom: 1rem;\n cursor: grab;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.dark-mode .task {\n background: rgba(255, 255, 255, 0.1);\n}\n\n.add-task {\n width: 100%;\n padding: 0.5rem;\n border: none;\n border-radius: 0.5rem;\n background: var(--primary);\n color: white;\n cursor: pointer;\n transition: background 0.3s ease;\n}\n\n.add-task:hover {\n background: var(--primary-hover);\n}\n\n@media (max-width: 768px) {\n .taskboard {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const themeToggle = document.getElementById('theme-toggle');\n const body = document.body;\n const taskModal = document.getElementById('task-modal');\n const addTaskBtn = document.querySelector('.add-task');\n const cancelBtn = document.querySelector('.cancel');\n const taskForm = document.querySelector('#task-modal form');\n const todoColumn = document.querySelector('#todo .tasks');\n\n // Theme toggle\n themeToggle.addEventListener('change', () => {\n body.classList.toggle('dark-mode');\n });\n\n // Task modal\n addTaskBtn.addEventListener('click', () => {\n taskModal.showModal();\n });\n\n cancelBtn.addEventListener('click', () => {\n taskModal.close();\n });\n\n // Add new task\n taskForm.addEventListener('submit', (e) => {\n e.preventDefault();\n \n const task = {\n name: document.getElementById('task-name').value,\n description: document.getElementById('task-desc').value,\n labels: document.getElementById('task-labels').value,\n dueDate: document.getElementById('task-due').value,\n color: document.getElementById('task-color').value\n };\n\n createTask(task);\n taskModal.close();\n taskForm.reset();\n });\n\n function createTask(task) {\n const taskElement = document.createElement('div');\n taskElement.classList.add('task');\n taskElement.style.backgroundColor = task.color;\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 `;\n todoColumn.appendChild(taskElement);\n }\n\n // Drag and drop functionality\n const tasks = document.querySelectorAll('.task');\n const columns = document.querySelectorAll('.column');\n\n tasks.forEach(task => {\n task.addEventListener('dragstart', dragStart);\n task.addEventListener('dragend', dragEnd);\n });\n\n columns.forEach(column => {\n column.addEventListener('dragover', dragOver);\n column.addEventListener('drop', dragDrop);\n });\n\n let draggedTask = null;\n\n function dragStart() {\n draggedTask = this;\n setTimeout(() => this.style.display = 'none', 0);\n }\n\n function dragEnd() {\n draggedTask.style.display = 'block';\n draggedTask = null;\n }\n\n function dragOver(e) {\n e.preventDefault();\n }\n\n function dragDrop() {\n this.querySelector('.tasks').appendChild(draggedTask);\n }\n});\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 330, + "completion_tokens": 1640, + "total_tokens": 1970, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 330 + }, + "system_fingerprint": "fp_f1afce2943" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..a861ea8 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# taskflow2.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..67f8bab --- /dev/null +++ b/script.js @@ -0,0 +1,89 @@ +document.addEventListener('DOMContentLoaded', () => { + const themeToggle = document.getElementById('theme-toggle'); + const body = document.body; + const taskModal = document.getElementById('task-modal'); + const addTaskBtn = document.querySelector('.add-task'); + const cancelBtn = document.querySelector('.cancel'); + const taskForm = document.querySelector('#task-modal form'); + const todoColumn = document.querySelector('#todo .tasks'); + + // Theme toggle + themeToggle.addEventListener('change', () => { + body.classList.toggle('dark-mode'); + }); + + // Task modal + addTaskBtn.addEventListener('click', () => { + taskModal.showModal(); + }); + + cancelBtn.addEventListener('click', () => { + taskModal.close(); + }); + + // Add new task + taskForm.addEventListener('submit', (e) => { + e.preventDefault(); + + const task = { + name: document.getElementById('task-name').value, + description: document.getElementById('task-desc').value, + labels: document.getElementById('task-labels').value, + dueDate: document.getElementById('task-due').value, + color: document.getElementById('task-color').value + }; + + createTask(task); + taskModal.close(); + taskForm.reset(); + }); + + function createTask(task) { + const taskElement = document.createElement('div'); + taskElement.classList.add('task'); + 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> + `; + todoColumn.appendChild(taskElement); + } + + // Drag and drop functionality + const tasks = document.querySelectorAll('.task'); + const columns = document.querySelectorAll('.column'); + + tasks.forEach(task => { + task.addEventListener('dragstart', dragStart); + task.addEventListener('dragend', dragEnd); + }); + + columns.forEach(column => { + column.addEventListener('dragover', dragOver); + column.addEventListener('drop', dragDrop); + }); + + let draggedTask = null; + + function dragStart() { + draggedTask = this; + setTimeout(() => this.style.display = 'none', 0); + } + + function dragEnd() { + draggedTask.style.display = 'block'; + draggedTask = null; + } + + function dragOver(e) { + e.preventDefault(); + } + + function dragDrop() { + this.querySelector('.tasks').appendChild(draggedTask); + } +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..ceb136d --- /dev/null +++ b/style.css @@ -0,0 +1,103 @@ +:root { + --bg-light: #f5f5f5; + --bg-dark: #1a1a1a; + --text-light: #333; + --text-dark: #f5f5f5; + --primary: #6366f1; + --primary-hover: #4f46e5; + --gradient: linear-gradient(135deg, #6366f1, #a855f7); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', sans-serif; + line-height: 1.6; + background: var(--bg-light); + color: var(--text-light); + transition: all 0.3s ease; +} + +body.dark-mode { + background: var(--bg-dark); + color: var(--text-dark); +} + +header { + background: var(--gradient); + color: white; + padding: 2rem; + text-align: center; +} + +.theme-switch { + position: absolute; + top: 1rem; + right: 1rem; +} + +main { + padding: 2rem; + max-width: 1200px; + margin: 0 auto; +} + +.taskboard { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.column { + background: rgba(255, 255, 255, 0.9); + border-radius: 1rem; + padding: 1rem; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.dark-mode .column { + background: rgba(0, 0, 0, 0.2); +} + +.tasks { + min-height: 100px; + margin-top: 1rem; +} + +.task { + background: white; + border-radius: 0.5rem; + padding: 1rem; + margin-bottom: 1rem; + cursor: grab; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.dark-mode .task { + background: rgba(255, 255, 255, 0.1); +} + +.add-task { + width: 100%; + padding: 0.5rem; + border: none; + border-radius: 0.5rem; + background: var(--primary); + color: white; + cursor: pointer; + transition: background 0.3s ease; +} + +.add-task:hover { + background: var(--primary-hover); +} + +@media (max-width: 768px) { + .taskboard { + grid-template-columns: 1fr; + } +} \ No newline at end of file