Merge pull request #49 from amitmerchant1990/feat-kanban

Implemented simple kanban board

README.md

@@ -41,6 +41,7 @@ I recently added a bunch of tools that I thought might go along with the regular
 - [Markdown Editor](https://notepad.js.org/markdown-editor/)
 - [Pomodoro Timer](https://notepad.js.org/pomodoro-timer/)
 - [Voice Notes](https://notepad.js.org/voice-notes/)
+- [Simple Kanban](https://notepad.js.org/kanban/)
 - [Tasks](https://notepad.js.org/tasks/)
 
 > [!IMPORTANT]

index.html

@@ -62,6 +62,7 @@
               <li><a class="dropdown-item" href="/markdown-editor">Markdown Editor</a></li>
               <li><a class="dropdown-item" href="/pomodoro-timer/">Pomodoro Timer</a></li>
               <li><a class="dropdown-item" href="/voice-notes/">Voice Notes</a></li>
+              <li><a class="dropdown-item" href="/kanban/">Simple Kanban</a></li>
               <li><a class="dropdown-item" href="/tasks/">Tasks</a></li>
             </div>
           </span>
@@ -279,6 +280,11 @@ <h4 class="modal-title custom-modal-title">Notepad — Offline capable</h4>
             </div>
 
             <div id="changelog" class="container tab-pane fade">
+              <h4>6th Jan, 2025</h3>
+              <ul>
+                <li>Implemented a <a href="/kanban/">Simple Kanban</a> board to manage your tasks at a glance.</li>
+              </ul>
+
               <h4>1st Jan, 2025</h3>
               <ul>
                 <li>Added support for <a href="https://en.wikipedia.org/wiki/OpenDyslexic" target="_blank">dyslexic fonts</a> for people with dyslexia read easily.</li>

js/app.js

@@ -11,6 +11,11 @@ $(document).ready(function () {
 			url: "https://buymeacoffee.com/amitmerchant",
 			active: true
 		},
+		{
+			text: "New → Simple Kanban",
+			url: "/kanban",
+			active: true
+		},
 		{
 			isFeature: true,
 			isActive: true,

kanban/css/kanban.css

@@ -0,0 +1,121 @@
+html, body {
+    height: 100%;
+    margin: 0;
+    overflow: hidden; /* Prevent scrolling */
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+}
+
+h2 {
+    text-align: center;
+    color: #4b4a4a;
+    font-size: 1.2rem;
+    margin: .3rem 0;
+    font-weight: bold;
+}
+
+.kanban-board {
+    display: flex;
+    justify-content: space-around;
+    height: 100%; /* Allow the board to take full height */
+    padding: 20px;
+    box-sizing: border-box; /* Include padding in height calculation */
+}
+
+.column {
+    background-color: white;
+    border: 1px solid #ccc;
+    width: 30%;
+    padding: 10px;
+    display: flex;
+    flex-direction: column; /* Stack children vertically */
+    height: calc(100% - 55px); /* Adjust height to fit within the board */
+    border-radius: 10px;
+}
+
+.task-list {
+    flex-grow: 1; /* Allow task list to grow and fill available space */
+    margin: 10px 0; /* Margin for spacing */
+    overflow-y: auto; /* Enable vertical scrolling */
+    border: 1px solid #ccc; /* Optional: add a border for better visibility */
+    border-radius: 5px; /* Optional: rounded corners */
+    padding: 5px; /* Optional: padding for inner spacing */
+    display: flex; /* Enable flexbox for task items */
+    flex-direction: column; /* Stack task items vertically */
+}
+
+.task-list > div {
+    background-color: #dfe3ff;
+    border-radius: 5px;
+    padding: 15px;
+    margin-bottom: 5px;
+    cursor: move;
+    font-weight: bold;
+}
+
+input[type="text"] {
+    padding: 10px 15px; /* Add padding */
+    font-size: 16px; /* Increase font size */
+    border: 1px solid #ccc; /* Border color */
+    border-radius: 5px; /* Rounded corners */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+    transition: border-color 0.3s; /* Smooth transition for focus effect */
+}
+
+input[type="text"]:focus {
+    border-color: #6c63ff; /* Change border color on focus */
+    outline: none; /* Remove default outline */
+}
+
+.drop-target {
+    background-color: #e0e7ff; /* Light blue background for drop target */
+    border: 2px dashed #6c63ff; /* Dashed border to indicate drop area */
+}
+
+.navbar-dark .navbar-brand {
+    font-weight: bold;
+    font-size: 1rem;
+}
+
+.brand-title, .brand-title:hover {
+    text-decoration: none;
+    color: inherit;
+}
+
+.task-list .placeholder {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    color: #595959;
+    font-size: 1rem;
+    text-align: center;
+    opacity: 0.5;
+    cursor: auto;
+    background-color: #f1f1f1 !important;
+}
+
+#in-progress .task-list > div {
+    background-color: #ffefbe;
+}
+
+#done .task-list > div {
+    background-color: #c1ffc1;
+}
+
+.flex-navbar {
+    display: flex;
+    color: white;
+    font-weight: bold;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.generic-flex {
+    display: flex;
+    align-items: center;
+}

kanban/index.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="A simple Kanban board to manage your tasks">
+    <meta name="author" content="Amit Merchant">
+    <meta name="keywords" content="kanban,board,tasks,management" />
+    <meta name="application-name" content="Simple Kanban" />
+
+
+    <meta property="og:title" content="Simple Kanban | notepad.js.org" />
+    <meta property="og:type" content="article" />
+    <meta property="og:url" content="http://notepad.js.org/kanban" />
+    <meta property="og:description" content="A simple Kanban board to manage your tasks" />
+    <meta property="og:image" content="https://notepad.js.org/art/kanban-kanban.png" />
+
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content="Simple Kanban | notepad.js.org" />
+    <meta name="twitter:description" content="A simple Kanban board to manage your tasks" />
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="twitter:image" content="https://notepad.js.org/art/kanban-kanban.png" />
+
+    <link rel="stylesheet" href="css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/kanban.css">
+    <title>Simple Kanban | notepad.js.org</title>
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="flex-navbar">
+            <span class="navbar-brand generic-flex">
+                <a href="/" class="brand-title">Notepad</a>
+                <img src="img/icons/slash.svg" />
+                <span>Simple Kanban</span>
+            </span>
+            <button class="btn btn-link text-white" data-toggle="modal" href="#aboutModal">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
+                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+                    <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+                </svg>
+            </button>
+        </div>
+    </nav>
+
+    <div class="kanban-board">
+        <div class="column" id="todo">
+            <h2>To Do</h2>
+            <div class="task-list" ondragover="event.preventDefault()" ondrop="drop(event, 'todo')">
+                <div class="placeholder">Start adding tasks</div>
+            </div>
+            <input type="text" placeholder="Add a task" id="todo-input" onkeydown="handleKeyDown(event, 'todo')">
+        </div>
+        <div class="column" id="in-progress">
+            <h2>In Progress</h2>
+            <div class="task-list" ondragover="event.preventDefault()" ondrop="drop(event, 'in-progress')">
+                <div class="placeholder">Start adding tasks</div>
+            </div>
+            <input type="text" placeholder="Add a task" id="in-progress-input" onkeydown="handleKeyDown(event, 'in-progress')">
+        </div>
+        <div class="column" id="done">
+            <h2>Done</h2>
+            <div class="task-list" ondragover="event.preventDefault()" ondrop="drop(event, 'done')">
+                <div class="placeholder">Start adding tasks</div>
+            </div>
+            <input type="text" placeholder="Add a task" id="done-input" onkeydown="handleKeyDown(event, 'done')">
+        </div>
+    </div>
+
+    <!-- About Modal -->
+    <div class="modal fade" id="aboutModal" aria-hidden="true" role="dialog">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="aboutModalLabel">Simple Kanban</h5>
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                </div>
+                <div class="modal-body">
+                    <p>A simple <a href="https://en.wikipedia.org/wiki/Kanban_(development)" target="_blank">Kanban</a> board to manage your tasks.</p>
+                    <p>Key features:</p>
+                    <ul>
+                        <li>Drag and drop tasks between columns: <b>To Do</b>, <b>In Progress</b>, and <b>Done</b>.</li> 
+                        <li>Simple by design and intuitive interface.</li>
+                        <li>Stores tasks <b>on-device</b> for privacy and offline usage.</li>
+                    </ul>
+                    <p>Enjoy using this tool? If so, consider <a href="https://buymeacoffee.com/amitmerchant" target="_blank">buying me a coffee</a> so that I keep working on improving it further and the experience remains ad-free.</p>
+                    <p class="text-center mb-0">
+                        <b>Brought to you by <a href="https://notepad.js.org/" class="about-author-link">notepad.js.org</a></b>
+                    </p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="js/jquery.min.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    <script src="js/kanban.js"></script>
+
+    <!-- Global site tag (gtag.js) - Google Analytics - GA4 -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-43339302-6"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'UA-43339302-6');
+    </script>
+</body>
+</html>