commit 8dcf4a4869f847504c3b477473036a9b74b87f7e
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 20:06:05 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..f25f5c9
--- /dev/null
+++ b/body.html
@@ -0,0 +1,34 @@
+<header>
+ <h1>Kanban Board</h1>
+ <label class="theme-switch">
+ <input type="checkbox" id="theme-toggle">
+ <span class="slider round"></span>
+ </label>
+</header>
+<main>
+ <section class="kanban-column">
+ <h2>To Do</h2>
+ <div class="tasks" id="todo-tasks">
+ <div class="task" draggable="true">Task 1</div>
+ <div class="task" draggable="true">Task 2</div>
+ </div>
+ <button class="add-task">+ Add Task</button>
+ </section>
+ <section class="kanban-column">
+ <h2>In Progress</h2>
+ <div class="tasks" id="in-progress-tasks">
+ <div class="task" draggable="true">Task 3</div>
+ </div>
+ <button class="add-task">+ Add Task</button>
+ </section>
+ <section class="kanban-column">
+ <h2>Done</h2>
+ <div class="tasks" id="done-tasks">
+ <div class="task" draggable="true">Task 4</div>
+ </div>
+ <button class="add-task">+ Add Task</button>
+ </section>
+</main>
+<footer>
+ <p>Drag and drop tasks to organize your workflow</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..43425a8
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://kanban.scroll.pub
+metaTags
+editButton /edit.html
+title Kanban Board - Organize Your Tasks
+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..0bac87a
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "fffd97eb-9fd4-4848-93f2-aefa695fab60",
+ "object": "chat.completion",
+ "created": 1735329944,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nkanban.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://kanban.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Kanban Board - Organize Your Tasks\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>Kanban Board</h1>\n <label class=\"theme-switch\">\n <input type=\"checkbox\" id=\"theme-toggle\">\n <span class=\"slider round\"></span>\n </label>\n</header>\n<main>\n <section class=\"kanban-column\">\n <h2>To Do</h2>\n <div class=\"tasks\" id=\"todo-tasks\">\n <div class=\"task\" draggable=\"true\">Task 1</div>\n <div class=\"task\" draggable=\"true\">Task 2</div>\n </div>\n <button class=\"add-task\">+ Add Task</button>\n </section>\n <section class=\"kanban-column\">\n <h2>In Progress</h2>\n <div class=\"tasks\" id=\"in-progress-tasks\">\n <div class=\"task\" draggable=\"true\">Task 3</div>\n </div>\n <button class=\"add-task\">+ Add Task</button>\n </section>\n <section class=\"kanban-column\">\n <h2>Done</h2>\n <div class=\"tasks\" id=\"done-tasks\">\n <div class=\"task\" draggable=\"true\">Task 4</div>\n </div>\n <button class=\"add-task\">+ Add Task</button>\n </section>\n</main>\n<footer>\n <p>Drag and drop tasks to organize your workflow</p>\n</footer>\n---style.css---\n:root {\n --bg-color: #ffffff;\n --text-color: #333333;\n --primary-color: #4a90e2;\n --secondary-color: #f0f0f0;\n --task-bg: #ffffff;\n --task-border: #e0e0e0;\n}\n\n[data-theme=\"dark\"] {\n --bg-color: #1a1a1a;\n --text-color: #f0f0f0;\n --primary-color: #6a9bd8;\n --secondary-color: #2d2d2d;\n --task-bg: #2d2d2d;\n --task-border: #444444;\n}\n\nbody {\n font-family: 'Segoe UI', sans-serif;\n background-color: var(--bg-color);\n color: var(--text-color);\n margin: 0;\n padding: 0;\n transition: background-color 0.3s, color 0.3s;\n}\n\nheader {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem;\n background-color: var(--primary-color);\n color: white;\n}\n\n.theme-switch {\n position: relative;\n display: inline-block;\n width: 60px;\n height: 34px;\n}\n\n.theme-switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n transition: 0.4s;\n border-radius: 34px;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 26px;\n width: 26px;\n left: 4px;\n bottom: 4px;\n background-color: white;\n transition: 0.4s;\n border-radius: 50%;\n}\n\ninput:checked + .slider {\n background-color: #2196F3;\n}\n\ninput:checked + .slider:before {\n transform: translateX(26px);\n}\n\nmain {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding: 1rem;\n}\n\n.kanban-column {\n background-color: var(--secondary-color);\n border-radius: 8px;\n padding: 1rem;\n width: 100%;\n}\n\n.kanban-column h2 {\n margin-top: 0;\n}\n\n.tasks {\n display: flex;\n gap: 0.5rem;\n overflow-x: auto;\n padding: 0.5rem 0;\n}\n\n.task {\n background-color: var(--task-bg);\n border: 1px solid var(--task-border);\n border-radius: 4px;\n padding: 0.5rem;\n min-width: 150px;\n cursor: grab;\n transition: transform 0.2s;\n}\n\n.task:active {\n cursor: grabbing;\n}\n\n.add-task {\n background-color: var(--primary-color);\n color: white;\n border: none;\n border-radius: 4px;\n padding: 0.5rem 1rem;\n cursor: pointer;\n margin-top: 0.5rem;\n}\n\n.add-task:hover {\n background-color: #357abd;\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n background-color: var(--secondary-color);\n margin-top: 1rem;\n}\n\n@media (min-width: 768px) {\n main {\n flex-direction: row;\n }\n\n .kanban-column {\n width: 33.33%;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const themeToggle = document.getElementById('theme-toggle');\n const body = document.body;\n\n themeToggle.addEventListener('change', function() {\n if (this.checked) {\n body.setAttribute('data-theme', 'dark');\n } else {\n body.removeAttribute('data-theme');\n }\n });\n\n const tasks = document.querySelectorAll('.task');\n const columns = document.querySelectorAll('.kanban-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', drop);\n });\n\n function dragStart(e) {\n e.dataTransfer.setData('text/plain', e.target.textContent);\n setTimeout(() => {\n e.target.classList.add('hide');\n }, 0);\n }\n\n function dragEnd(e) {\n e.target.classList.remove('hide');\n }\n\n function dragOver(e) {\n e.preventDefault();\n }\n\n function drop(e) {\n e.preventDefault();\n const taskContent = e.dataTransfer.getData('text/plain');\n const newTask = document.createElement('div');\n newTask.classList.add('task');\n newTask.textContent = taskContent;\n newTask.setAttribute('draggable', true);\n newTask.addEventListener('dragstart', dragStart);\n newTask.addEventListener('dragend', dragEnd);\n e.target.querySelector('.tasks').appendChild(newTask);\n }\n\n const addTaskButtons = document.querySelectorAll('.add-task');\n addTaskButtons.forEach(button => {\n button.addEventListener('click', function() {\n const taskContent = prompt('Enter task content:');\n if (taskContent) {\n const newTask = document.createElement('div');\n newTask.classList.add('task');\n newTask.textContent = taskContent;\n newTask.setAttribute('draggable', true);\n newTask.addEventListener('dragstart', dragStart);\n newTask.addEventListener('dragend', dragEnd);\n this.previousElementSibling.appendChild(newTask);\n }\n });\n });\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 265,
+ "completion_tokens": 1660,
+ "total_tokens": 1925,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 265
+ },
+ "system_fingerprint": "fp_f1afce2943"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..8cd35e4
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# kanban.scroll.pub
+Website generated by DeepSeek from prompt: a kanban board website, where the major areas should be vertically stacked and the tasks inside them should be horizontally stacked, with a dark mode on-off toggle
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..78457d8
--- /dev/null
+++ b/script.js
@@ -0,0 +1,68 @@
+document.addEventListener('DOMContentLoaded', function() {
+ const themeToggle = document.getElementById('theme-toggle');
+ const body = document.body;
+
+ themeToggle.addEventListener('change', function() {
+ if (this.checked) {
+ body.setAttribute('data-theme', 'dark');
+ } else {
+ body.removeAttribute('data-theme');
+ }
+ });
+
+ const tasks = document.querySelectorAll('.task');
+ const columns = document.querySelectorAll('.kanban-column');
+
+ tasks.forEach(task => {
+ task.addEventListener('dragstart', dragStart);
+ task.addEventListener('dragend', dragEnd);
+ });
+
+ columns.forEach(column => {
+ column.addEventListener('dragover', dragOver);
+ column.addEventListener('drop', drop);
+ });
+
+ function dragStart(e) {
+ e.dataTransfer.setData('text/plain', e.target.textContent);
+ setTimeout(() => {
+ e.target.classList.add('hide');
+ }, 0);
+ }
+
+ function dragEnd(e) {
+ e.target.classList.remove('hide');
+ }
+
+ function dragOver(e) {
+ e.preventDefault();
+ }
+
+ function drop(e) {
+ e.preventDefault();
+ const taskContent = e.dataTransfer.getData('text/plain');
+ const newTask = document.createElement('div');
+ newTask.classList.add('task');
+ newTask.textContent = taskContent;
+ newTask.setAttribute('draggable', true);
+ newTask.addEventListener('dragstart', dragStart);
+ newTask.addEventListener('dragend', dragEnd);
+ e.target.querySelector('.tasks').appendChild(newTask);
+ }
+
+ const addTaskButtons = document.querySelectorAll('.add-task');
+ addTaskButtons.forEach(button => {
+ button.addEventListener('click', function() {
+ const taskContent = prompt('Enter task content:');
+ if (taskContent) {
+ const newTask = document.createElement('div');
+ newTask.classList.add('task');
+ newTask.textContent = taskContent;
+ newTask.setAttribute('draggable', true);
+ newTask.addEventListener('dragstart', dragStart);
+ newTask.addEventListener('dragend', dragEnd);
+ this.previousElementSibling.appendChild(newTask);
+ }
+ });
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..847ff86
--- /dev/null
+++ b/style.css
@@ -0,0 +1,150 @@
+:root {
+ --bg-color: #ffffff;
+ --text-color: #333333;
+ --primary-color: #4a90e2;
+ --secondary-color: #f0f0f0;
+ --task-bg: #ffffff;
+ --task-border: #e0e0e0;
+}
+
+[data-theme="dark"] {
+ --bg-color: #1a1a1a;
+ --text-color: #f0f0f0;
+ --primary-color: #6a9bd8;
+ --secondary-color: #2d2d2d;
+ --task-bg: #2d2d2d;
+ --task-border: #444444;
+}
+
+body {
+ font-family: 'Segoe UI', sans-serif;
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ margin: 0;
+ padding: 0;
+ transition: background-color 0.3s, color 0.3s;
+}
+
+header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem;
+ background-color: var(--primary-color);
+ color: white;
+}
+
+.theme-switch {
+ position: relative;
+ display: inline-block;
+ width: 60px;
+ height: 34px;
+}
+
+.theme-switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ transition: 0.4s;
+ border-radius: 34px;
+}
+
+.slider:before {
+ position: absolute;
+ content: "";
+ height: 26px;
+ width: 26px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ transition: 0.4s;
+ border-radius: 50%;
+}
+
+input:checked + .slider {
+ background-color: #2196F3;
+}
+
+input:checked + .slider:before {
+ transform: translateX(26px);
+}
+
+main {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ padding: 1rem;
+}
+
+.kanban-column {
+ background-color: var(--secondary-color);
+ border-radius: 8px;
+ padding: 1rem;
+ width: 100%;
+}
+
+.kanban-column h2 {
+ margin-top: 0;
+}
+
+.tasks {
+ display: flex;
+ gap: 0.5rem;
+ overflow-x: auto;
+ padding: 0.5rem 0;
+}
+
+.task {
+ background-color: var(--task-bg);
+ border: 1px solid var(--task-border);
+ border-radius: 4px;
+ padding: 0.5rem;
+ min-width: 150px;
+ cursor: grab;
+ transition: transform 0.2s;
+}
+
+.task:active {
+ cursor: grabbing;
+}
+
+.add-task {
+ background-color: var(--primary-color);
+ color: white;
+ border: none;
+ border-radius: 4px;
+ padding: 0.5rem 1rem;
+ cursor: pointer;
+ margin-top: 0.5rem;
+}
+
+.add-task:hover {
+ background-color: #357abd;
+}
+
+footer {
+ text-align: center;
+ padding: 1rem;
+ background-color: var(--secondary-color);
+ margin-top: 1rem;
+}
+
+@media (min-width: 768px) {
+ main {
+ flex-direction: row;
+ }
+
+ .kanban-column {
+ width: 33.33%;
+ }
+}
\ No newline at end of file