Added some WIP assets for the Local/World/UI views and the cover art.
This commit is contained in:
217
tools/kanban/kanban.html
Normal file
217
tools/kanban/kanban.html
Normal file
@@ -0,0 +1,217 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Simple Kanban Board</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="src/styles.css">
|
||||
<link rel="icon" type="image/x-icon" href="src/kanban.ico">
|
||||
</head>
|
||||
<body class="bg-gray-100 text-gray-800" id="main-body">
|
||||
|
||||
<!-- Dark mode toggle in upper right -->
|
||||
<div class="fixed top-4 right-4 z-50">
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input type="checkbox" id="dark-mode-toggle" class="sr-only">
|
||||
<span class="w-10 h-6 flex items-center bg-gray-300 rounded-full p-1 transition-colors duration-200">
|
||||
<span class="dot w-4 h-4 bg-white rounded-full shadow-md transform transition-transform duration-200"></span>
|
||||
</span>
|
||||
<span class="ml-2">
|
||||
<svg id="darkmode-lightbulb" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2a7 7 0 017 7c0 3.5-2.5 5.5-3.5 6.5-.5.5-.5 1.5-.5 2.5v1a1 1 0 01-1 1h-2a1 1 0 01-1-1v-1c0-1-.1-2 .5-2.5C7.5 14.5 5 12.5 5 9a7 7 0 017-7zm0 20a2 2 0 002-2H10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto p-4 sm:p-6 lg:p-8">
|
||||
<header class="text-center mb-8">
|
||||
<h1 class="text-3xl sm:text-4xl font-bold text-gray-900">Kanban Board</h1>
|
||||
<p class="text-gray-600 mt-2">Drag and drop tasks to organize your workflow.</p>
|
||||
</header>
|
||||
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 mt-4 mb-6 justify-between">
|
||||
<div class="flex items-center gap-2 w-full sm:w-auto justify-start">
|
||||
<button class="add-task-btn flex items-center justify-center w-10 h-10 bg-red-500 rounded-full shadow hover:bg-red-600 transition duration-150" data-column="todo-column" style="border: none; padding: 0;">
|
||||
<span class="sr-only">Add Task</span>
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
|
||||
<line x1="12" y1="6" x2="12" y2="18" />
|
||||
<line x1="6" y1="12" x2="18" y2="12" />
|
||||
</svg>
|
||||
</button>
|
||||
<span class="ml-2 text-gray-700 font-medium text-base hidden sm:inline">Add Task</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 w-full sm:w-auto justify-end">
|
||||
<label for="tag-filter" class="text-gray-700 font-medium text-base mr-2">Filter by Tag:</label>
|
||||
<select id="tag-filter" class="border border-gray-300 rounded-md px-3 py-2 text-base focus:outline-none focus:ring-2 focus:ring-red-400 shadow-sm w-full sm:w-48">
|
||||
<option value="all">All</option>
|
||||
<option value="unassigned">Unassigned</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kanban Board Columns -->
|
||||
<div id="kanban-board" class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
|
||||
<!-- To Do Column -->
|
||||
<div class="kanban-column bg-white rounded-lg shadow-md p-4 flex flex-col" id="todo-column">
|
||||
<div class="flex justify-between items-center pb-2 border-b-2 border-red-400 mb-4">
|
||||
<h2 class="text-xl font-semibold text-gray-700">To Do</h2>
|
||||
<button class="sort-btn text-sm text-gray-600 hover:text-gray-900 font-medium py-1 px-2 rounded-md hover:bg-gray-100 transition-colors flex items-center gap-1" data-column-id="todo-column">Sort <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg></button>
|
||||
</div>
|
||||
<div class="tasks flex-grow space-y-3 overflow-y-auto" data-column-id="todo">
|
||||
<!-- Tasks Go Here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- In Progress Column -->
|
||||
<div class="kanban-column bg-white rounded-lg shadow-md p-4 flex flex-col" id="inprogress-column">
|
||||
<div class="flex justify-between items-center pb-2 border-b-2 border-yellow-400 mb-4">
|
||||
<h2 class="text-xl font-semibold text-gray-700">In Progress</h2>
|
||||
<button class="sort-btn text-sm text-gray-600 hover:text-gray-900 font-medium py-1 px-2 rounded-md hover:bg-gray-100 transition-colors flex items-center gap-1" data-column-id="inprogress-column">Sort <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg></button>
|
||||
</div>
|
||||
<div class="tasks flex-grow space-y-3 overflow-y-auto" data-column-id="inprogress">
|
||||
<!-- Tasks Go Here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Completed Column -->
|
||||
<div class="kanban-column bg-white rounded-lg shadow-md p-4 flex flex-col" id="completed-column">
|
||||
<div class="flex justify-between items-center pb-2 border-b-2 border-green-400 mb-4">
|
||||
<h2 class="text-xl font-semibold text-gray-700">Completed</h2>
|
||||
<button class="sort-btn text-sm text-gray-600 hover:text-gray-900 font-medium py-1 px-2 rounded-md hover:bg-gray-100 transition-colors flex items-center gap-1" data-column-id="completed-column">Sort <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg></button>
|
||||
</div>
|
||||
<div class="tasks flex-grow space-y-3 overflow-y-auto" data-column-id="completed">
|
||||
<!-- Tasks Go Here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Task Modal -->
|
||||
<div id="task-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
|
||||
<div class="bg-white rounded-lg p-6 w-11/12 max-w-md">
|
||||
<h3 class="text-lg font-bold mb-4" id="modal-title">Add New Task</h3>
|
||||
<textarea id="task-input" class="w-full border border-gray-300 rounded-md p-2" placeholder="Enter task description..."></textarea>
|
||||
<div class="mt-4">
|
||||
<label for="task-due-date" class="block text-sm font-medium text-gray-700">Due Date</label>
|
||||
<input type="date" id="task-due-date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-blue-500 focus:border-blue-500">
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<label for="stakeholders-input" class="block text-sm font-medium text-gray-700">Key Stakeholders (optional)</label>
|
||||
<input type="text" id="stakeholders-input" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Enter key stakeholders...">
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<label for="notes-input" class="block text-sm font-medium text-gray-700">Notes (optional)</label>
|
||||
<textarea id="notes-input" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Enter notes..."></textarea>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-end space-x-2">
|
||||
<button id="cancel-task" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">Cancel</button>
|
||||
<button id="save-task" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Save Task</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tag Management Modal -->
|
||||
<div id="tag-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
|
||||
<div class="bg-white rounded-lg p-6 w-11/12 max-w-md">
|
||||
<h3 class="text-lg font-bold mb-4">Manage Tag</h3>
|
||||
<div id="existing-tags-container" class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Select Existing Tag</label>
|
||||
<div id="tags-list" class="flex flex-wrap gap-2">
|
||||
<!-- Existing tags will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4">
|
||||
<div>
|
||||
<label for="new-tag-name" class="block text-sm font-medium text-gray-700">Or Create New Tag</label>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<input type="text" id="new-tag-name" class="flex-grow border border-gray-300 rounded-md shadow-sm p-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Tag name...">
|
||||
<input type="color" id="new-tag-color" class="w-10 h-10 p-1 border border-gray-300 rounded-md cursor-pointer" value="#3b82f6">
|
||||
<button id="save-tag" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<label for="remove-tag-name" class="block text-sm font-medium text-gray-700">Or Remove Tag</label>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<button id="remove-tag" class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600">Remove Tag</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex justify-end space-x-2">
|
||||
<button id="cancel-tag" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<div id="delete-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
|
||||
<div class="bg-white rounded-lg p-6 w-11/12 max-w-sm text-center">
|
||||
<h3 class="text-lg font-bold mb-4">Confirm Deletion</h3>
|
||||
<p class="text-gray-600">Are you sure you want to delete this task?</p>
|
||||
<div class="mt-6 flex justify-center space-x-4">
|
||||
<button id="cancel-delete" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 w-24">Cancel</button>
|
||||
<button id="confirm-delete" class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 w-24">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Task Details Modal -->
|
||||
<div id="task-details-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
|
||||
<div class="bg-white rounded-lg p-6 w-11/12 max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="text-xl font-bold">Task Details</h3>
|
||||
<button id="close-task-details" class="text-gray-500 hover:text-gray-700 text-2xl">×</button>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<!-- Task Description -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label class="text-sm font-medium text-gray-700">Task Description</label>
|
||||
<button class="edit-field-btn text-blue-600 hover:text-blue-800 text-sm" data-field="description">Edit</button>
|
||||
</div>
|
||||
<div id="display-description" class="text-gray-900 p-2 border rounded bg-gray-50"></div>
|
||||
<textarea id="edit-description" class="w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-blue-500 focus:border-blue-500 hidden" rows="3"></textarea>
|
||||
</div>
|
||||
<!-- Due Date -->
|
||||
<div>
|
||||
<label for="edit-due-date" class="block text-sm font-medium text-gray-700">Due Date</label>
|
||||
<input type="date" id="edit-due-date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-blue-500 focus:border-blue-500">
|
||||
</div>
|
||||
<!-- Date Started -->
|
||||
<div>
|
||||
<label for="edit-started-date" class="block text-sm font-medium text-gray-700">Date Started</label>
|
||||
<input type="date" id="edit-started-date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-blue-500 focus:border-blue-500">
|
||||
</div>
|
||||
<!-- Stakeholders -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label class="text-sm font-medium text-gray-700">Key Stakeholders</label>
|
||||
<button class="edit-field-btn text-blue-600 hover:text-blue-800 text-sm" data-field="stakeholders">Edit</button>
|
||||
</div>
|
||||
<div id="display-stakeholders" class="text-gray-900 p-2 border rounded bg-gray-50"></div>
|
||||
<textarea id="edit-stakeholders" class="w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-blue-500 focus:border-blue-500 hidden" rows="2"></textarea>
|
||||
</div>
|
||||
<!-- Notes -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<label class="text-sm font-medium text-gray-700">Notes</label>
|
||||
<button class="edit-field-btn text-blue-600 hover:text-blue-800 text-sm" data-field="notes">Edit</button>
|
||||
</div>
|
||||
<div id="display-notes" class="text-gray-900 p-2 border rounded bg-gray-50"></div>
|
||||
<textarea id="edit-notes" class="w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-blue-500 focus:border-blue-500 hidden" rows="4"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex justify-end space-x-2">
|
||||
<button id="save-task-changes" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="src/SimpleKanban.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user