Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Brain 🧠 [v1]
ID	5619846356254720
Created	2 days ago, 1743896123188
Updated	2 days ago, 1743896306590
Code	<!DOCTYPE html> <!-- Welcome to Brain, an application I designed to jot down my thoughts, ideas, tasks, chores, and more in a quick and simple way. This is a column-based, draggable, and responsive web application. You can customize it to whatever setup you need, so it can be used as a daily planner, journal, reminder, goal tracker, and more. There are keyboard shortcuts for almost every action and you can undo and redo everything. It saves everything locally using your local storage, but if you wan't to make sure your data doesn't get accidentally deleted, you can click the export button and save the JSON data elsewhere. 🧠 Lastly, if you found this cool and would like to support me on Khan Academy, you can consider subscribing to my Khan Academy website: https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016 1220 lines of code. HTML5, CSS3, and JavaScript. Released 7:35 PM Saturday April 5 2025 --> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Brain 🧠 [v1]</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200..900&family=Outfit:wght@100..900&display=swap" rel="stylesheet"> <style> :root { --font-primary: 'Outfit', arial; --font-secondary: 'Montserrat', arial; --color-white: #fff; --color-black: #000; --text-light: rgb(255, 43, 255); --text-dark: rgb(92, 92, 92); --text-muted: rgb(140, 140, 140); --bg-body: #fff; --bg-board: linear-gradient(0deg, rgb(255, 255, 255), rgb(222, 222, 222)); --bg-column: rgb(192, 203, 219); --bg-header: rgba(117, 117, 117); --bg-column-header: rgb(2, 63, 112); --bg-card: rgb(250, 250, 250); --bg-modal: rgb(237, 237, 237); --bg-popup: rgb(0, 168, 39); --bg-search-panel: rgb(199, 199, 199); --bg-activity-log: rgb(199, 199, 199); --bg-hover: rgb(10, 75, 173); --bg-button: rgb(35, 112, 235); --bg-add-button:rgb(36, 82, 252); --bg-add-button-hover: rgb(0, 63, 145); --bg-toolbar-button: rgb(0, 70, 201); --bg-toolbar-button-hover: rgb(9, 63, 145); /* Box Shadows / --box-shadow-light: 1px 1px 3px rgba(0, 0, 0, 0.15); --box-shadow-medium: 2px 2px 5px rgba(0, 0, 0, 0.2); --box-shadow-heavy: 0 0 10px rgba(0, 0, 0, 0.3); --box-shadow-modal: 0 0 10px rgba(0, 0, 0, 0.5); / Borders / --border-light: 1px solid #ccc; --border-panel: 2px solid #bdc3c7; } html, body { margin: 0; padding: 0; height: 100%; font-family: var(--font-primary); font-weight: 200; background: var(--bg-body); color: var(--text-dark); overflow: hidden; } h1,h2,h3,h4 { font-weight: 500; letter-spacing: 0.5px; } input,textarea { font-family: var(--font-secondary); } textarea { height: 20vh; } button { font-family: var(--font-secondary); transition: all 0.1s; font-weight: 400; } header { background: var(--bg-header); color: var(--text-light); padding: 10px 10px; margin: 0; } header .toolbar { display: flex; align-items: center; justify-content: center; } header h1 { font-size: 1.8em; margin: 0; } header .toolbar button, header .nav-buttons button { background: var(--bg-toolbar-button); border: none; color: var(--color-white); margin: 0 5px; padding: 6px 10px; border-radius: 3px; cursor: pointer; font-size: 0.9em; } button svg { fill: var(--color-white); } header .toolbar button:hover, header .nav-buttons button:hover { background: var(--bg-toolbar-button-hover); } #boardContainer { position: absolute; top: 60px; bottom: 0; left: 0; right: 0; overflow-x: auto; overflow-y: auto; padding: 10px; background: var(--bg-board); display: flex; flex-wrap: nowrap; transition: all 0.3s ease; } .column { background: var(--bg-column); border-radius: 5px; width: 300px; margin: 0 10px 10px 0; display: flex; flex-direction: column; box-shadow: var(--box-shadow-medium); flex-shrink: 0; max-height: calc(100% - 20px); transition: transform 0.3s ease, box-shadow 0.3s ease; } .column.dragging { opacity: 0.8; transform: scale(1.05); } .column header { background: var(--bg-column-header); color: var(--color-white); padding: 8px; border-top-left-radius: 5px; border-top-right-radius: 5px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .column header h2 { font-size: 1.1em; margin: 0; } .column .col-controls button { background: transparent; border: none; color: var(--color-white); cursor: pointer; font-size: 1em; margin-left: 5px; } .cards { flex-grow: 1; padding: 5px; overflow-y: auto; min-height: 50px; transition: all 0.3s ease; } .card { background: var(--bg-card); margin-bottom: 8px; padding: 8px; border-radius: 3px; box-shadow: var(--box-shadow-light); cursor: move; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card.dragging { opacity: 0.8; transform: scale(1.05); } .card .card-header { font-weight: 400; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; } .card .card-header span.timestamp { font-size: 0.7em; color: var(--text-muted); } .card .card-body { font-size: 0.9em; margin-bottom: 5px; outline: none; } .card .card-footer { font-size: 0.8em; display: flex; justify-content: space-between; } .card .card-footer span { cursor: pointer; padding: 2px 4px; border-radius: 3px; color: var(--color-white); transition: background 0.3s ease; } .add-card, .add-column { background: var(--bg-add-button); border: none; color: var(--color-white); padding: 6px; border-radius: 3px; cursor: pointer; margin: 5px; font-size: 0.9em; transition: background 0.3s ease; } .add-card:hover, .add-column:hover { background: var(--bg-add-button-hover); } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(44, 62, 80, 0.8); display: none; align-items: center; justify-content: center; z-index: 1000; } .modal .modal-content { background: var(--bg-modal); padding: 20px; border-radius: 5px; width: 90%; max-width: 600px; box-shadow: var(--box-shadow-modal); } .modal .modal-content h3 { margin-top: 0; } .modal .modal-content input[type="text"], .modal .modal-content textarea { width: 100%; padding: 8px; margin: 10px 0; border: var(--border-light); border-radius: 3px; } .modal .modal-content button, #btnApplyFilter, #btnClearFilter { background: var(--bg-button); border: none; color: var(--color-white); padding: 6px 10px; border-radius: 3px; cursor: pointer; font-size: 0.9em; margin-right: 5px; } .modal .modal-content button:hover, #btnApplyFilter:hover, #btnClearFilter:hover { background: var(--bg-hover); } #popup { position: fixed; bottom: 20px; right: 20px; background: var(--bg-popup); color: var(--color-white); padding: 10px 20px; border-radius: 5px; box-shadow: var(--box-shadow-heavy); display: none; z-index: 2000; transition: opacity 0.3s ease; } #searchPanel, #activityLogPanel { position: absolute; top: 60px; background: var(--bg-search-panel); padding: 10px; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2); z-index: 500; height: calc(100% - 60px); overflow-y: auto; display: none; transition: all 0.3s ease; } #searchPanel { right: 0; width: 300px; } #activityLogPanel { left: 0; width: 300px; border-right: var(--border-panel); } #searchPanel h3, #activityLogPanel h3 { margin-top: 0; } #searchPanel input, #searchPanel select { width: 100%; padding: 5px; margin: 5px 0 10px 0; } #activityLogPanel ul { list-style: none; padding: 0; margin: 0; } @media (max-width: 499px) { header h1 { font-size: 1.5em; } #searchPanel, #activityLogPanel { width: 100%; height: auto; position: relative; box-shadow: none; margin-bottom: 10px; } #boardContainer { overflow-x: hidden; display: block; padding: 10px; position: relative; } .column { width: 100%; margin: 0; display: none; } .column.active { display: block; } header .nav-buttons { display: block; } } @media (min-width: 500px) { header .nav-buttons { display: none; } } </style> </head> <body> <header> <div class="toolbar"> <button id="btnAddColumn" title="Add a new column (Ctrl+Shift+C)"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" /> </svg> </button> <button id="btnExport" title="Export board as JSON (Ctrl+Shift+E)"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" /> </svg> </button> <button id="btnImport" title="Import board from JSON (Ctrl+Shift+I)"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path d="M19 13v6H5v-6H3v8h18v-8h-2zm-7-9-7 7h4v6h6v-6h4l-7-7z" /> </svg> </button> <button id="btnSave" title="Save board (Ctrl+S)"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path d="M17 3H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 16c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3-7H9V7h6v5z" /> </svg> </button> <button id="btnUndo" title="Undo (Ctrl+Z)"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z" /> </svg> </button> <button id="btnRedo" title="Redo (Ctrl+Y)"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z" /> </svg> </button> <button id="btnToggleSearch"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" /> </svg> </button> <button id="btnToggleActivity"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6l5.25 3.15.75-1.23-4.5-2.67V7z" /> </svg> </button> </div> <div class="nav-buttons"> <button id="btnPrevColumn"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path d="M15.41 16.59 10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z" /> </svg> </button> <button id="btnNextColumn"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" /> </svg> </button> </div> </header> <div id="boardContainer"> </div> <div id="searchPanel"> <h3>Search / Filter</h3> <input type="text" id="searchText" placeholder="Search card text..."> <select id="filterStatus"> <option value="">All Status</option> <option value="Todo">To Do</option> <option value="WIP">WIP</option> <option value="Done">Done</option> </select> <select id="filterPriority"> <option value="">All Priority</option> <option value="low">Low</option> <option value="normal">Normal</option> <option value="high">High</option> </select> <button id="btnApplyFilter">Apply Filter</button> <button id="btnClearFilter">Clear Filter</button> </div> <div id="activityLogPanel"> <h3>Activity Log</h3> <ul id="logList"></ul> </div> <div id="popup"></div> <div id="modal" class="modal"> <div class="modal-content" id="modalContent"></div> </div> <footer style='height: 15px;position:absolute;bottom:0;left:0px;width:100%;right:0;background-color:grey;'> <p style='font-size: 10px;margin: 0;position: absolute;top:0;'>Brain <sup>v1</sup> © 2025 Eldiiar Bekbolotov - First released for the Khan Academy Computer Programming Community</p> </footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script> <script> var boardData = { columns: [] }, undoStack = [], redoStack = [], LS_KEY = "extendedBoardData_v2", currentColumnIndex = 0; function showPopup(message, duration) { duration = duration \|\| 2000; var popup = document.getElementById("popup"); popup.textContent = message; popup.style.display = "block"; setTimeout(function() { popup.style.display = "none"; }, duration); } function showInputModal(title, defaultValue, callback) { var modal = document.getElementById("modal"), content = document.getElementById("modalContent"); content.innerHTML = "<h3>" + title + "</h3>" + "<input type='text' id='modalInput' value='" + (defaultValue \|\| "") + "'>" + "<div style='text-align: right;'>" + "<button id='modalConfirm'>Confirm</button>" + "<button id='modalCancel'>Cancel</button>" + "</div>"; modal.style.display = "flex"; document.getElementById("modalConfirm").onclick = function() { var val = document.getElementById("modalInput").value; modal.style.display = "none"; callback(val); }; document.getElementById("modalCancel").onclick = function() { modal.style.display = "none"; callback(null); }; } function showConfirmModal(message, callback) { var modal = document.getElementById("modal"), content = document.getElementById("modalContent"); content.innerHTML = "<h3>Confirm</h3>" + "<p>" + message + "</p>" + "<div style='text-align: right;'>" + "<button id='modalConfirm'>Yes</button>" + "<button id='modalCancel'>No</button>" + "</div>"; modal.style.display = "flex"; document.getElementById("modalConfirm").onclick = function() { modal.style.display = "none"; callback(true); }; document.getElementById("modalCancel").onclick = function() { modal.style.display = "none"; callback(false); }; } function showModalForImportExport(title, defaultText, confirmCallback) { var modal = document.getElementById("modal"), content = document.getElementById("modalContent"); content.innerHTML = "<h3>" + title + "</h3>" + "<textarea id='modalTextarea' placeholder='Paste JSON here'>" + (defaultText \|\| "") + "</textarea>" + "<div style='text-align: right;'>" + "<button id='modalConfirm'>Confirm</button>" + "<button id='modalCancel'>Cancel</button>" + "</div>"; modal.style.display = "flex"; document.getElementById("modalConfirm").onclick = function() { confirmCallback(document.getElementById("modalTextarea").value); modal.style.display = "none"; }; document.getElementById("modalCancel").onclick = function() { modal.style.display = "none"; }; } function generateId() { return "id-" + Math.random().toString(36).substr(2, 16); } function formatTimestamp(ts) { var d = new Date(ts); return d.toLocaleString(); } function cloneData(data) { return JSON.parse(JSON.stringify(data)); } function logActivity(message) { var logList = document.getElementById("logList"), li = document.createElement("li"); li.textContent = "[" + formatTimestamp(Date.now()) + "] " + message; logList.insertBefore(li, logList.firstChild); } function pushUndo() { undoStack.push(cloneData(boardData)); if (undoStack.length > 100) { undoStack.shift(); } redoStack = []; } function performUndo() { if (undoStack.length === 0) return; redoStack.push(cloneData(boardData)); boardData = undoStack.pop(); saveBoardData(); renderBoard(); logActivity("Undo performed"); showPopup("Undo performed"); } function performRedo() { if (redoStack.length === 0) return; undoStack.push(cloneData(boardData)); boardData = redoStack.pop(); saveBoardData(); renderBoard(); logActivity("Redo performed"); showPopup("Redo performed"); } function saveBoardData() { localStorage.setItem(LS_KEY, JSON.stringify(boardData)); } function loadBoardData() { var data = localStorage.getItem(LS_KEY); if (data) { boardData = JSON.parse(data); } } function exportBoardData() { return JSON.stringify(boardData, null, 2); } function importBoardData(json) { try { var imported = JSON.parse(json); if (imported && imported.columns) { pushUndo(); boardData = imported; saveBoardData(); renderBoard(); logActivity("Board imported successfully"); showPopup("Board imported successfully"); } else { showPopup("Invalid board data", 3000); } } catch (e) { showPopup("Error importing board: " + e.message, 3000); } } function Card(options) { options = options \|\| {}; this.id = options.id \|\| generateId(); this.title = options.title \|\| "New Card"; this.description = options.description \|\| ""; this.dueDate = options.dueDate \|\| ""; this.priority = options.priority \|\| "normal"; this.status = options.status \|\| "Todo"; this.created = options.created \|\| Date.now(); this.updated = options.updated \|\| Date.now(); } function Column(options) { options = options \|\| {}; this.id = options.id \|\| generateId(); this.title = options.title \|\| "New Column"; this.created = options.created \|\| Date.now(); this.updated = options.updated \|\| Date.now(); this.cards = options.cards ? options.cards.map(function(c) { return new Card(c); }) : []; } function renderBoard() { var container = document.getElementById("boardContainer"); container.innerHTML = ""; boardData.columns.forEach(function(col) { var colEl = renderColumn(col); container.appendChild(colEl); new Sortable(colEl.querySelector('.cards'), { group: 'cards', animation: 150, ghostClass: 'dragging' }); }); new Sortable(container, { animation: 150, draggable: '.column', ghostClass: 'dragging' }); if (window.innerWidth <= 499) { var cols = container.querySelectorAll(".column"); if (cols.length) { Array.prototype.forEach.call(cols, function(c) { c.classList.remove("active"); }); if (cols[currentColumnIndex]) { cols[currentColumnIndex].classList.add("active"); } } } } function renderColumn(column) { var colDiv = document.createElement("div"); colDiv.className = "column"; colDiv.setAttribute("data-id", column.id); var header = document.createElement("header"); var titleEl = document.createElement("h2"); titleEl.textContent = column.title; titleEl.title = "Created: " + formatTimestamp(column.created) + " \| Updated: " + formatTimestamp(column.updated); titleEl.addEventListener("dblclick", function() { showInputModal("Edit Column Title", column.title, function(newTitle) { if (newTitle && newTitle.trim()) { pushUndo(); column.title = newTitle.trim(); column.updated = Date.now(); saveBoardData(); renderBoard(); logActivity("Column \"" + column.id + "\" title changed"); } }); }); header.appendChild(titleEl); var colControls = document.createElement("div"); colControls.className = "col-controls"; var btnDelete = document.createElement("button"); btnDelete.textContent = "✕"; btnDelete.title = "Delete column"; btnDelete.addEventListener("click", function() { showConfirmModal("Delete this column?", function(confirm) { if (confirm) { pushUndo(); boardData.columns = boardData.columns.filter(function(c) { return c.id !== column.id; }); saveBoardData(); renderBoard(); logActivity("Column \"" + column.id + "\" deleted"); } }); }); colControls.appendChild(btnDelete); header.appendChild(colControls); colDiv.appendChild(header); var cardsContainer = document.createElement("div"); cardsContainer.className = "cards"; column.cards.forEach(function(card) { cardsContainer.appendChild(renderCard(card, column.id)); }); colDiv.appendChild(cardsContainer); var btnAddCard = document.createElement("button"); btnAddCard.className = "add-card"; btnAddCard.textContent = "Add Card"; btnAddCard.addEventListener("click", function() { pushUndo(); var newCard = new Card(); column.cards.push(newCard); column.updated = Date.now(); saveBoardData(); renderBoard(); logActivity("New card \"" + newCard.id + "\" added to column \"" + column.id + "\""); }); colDiv.appendChild(btnAddCard); return colDiv; } function renderCard(card, columnId) { var cardDiv = document.createElement("div"); cardDiv.className = "card"; cardDiv.setAttribute("data-id", card.id); var header = document.createElement("div"); header.className = "card-header"; var titleEl = document.createElement("span"); titleEl.textContent = card.title; titleEl.addEventListener("dblclick", function() { showInputModal("Edit Card Title", card.title, function(newTitle) { if (newTitle && newTitle.trim()) { pushUndo(); card.title = newTitle.trim(); card.updated = Date.now(); saveBoardData(); renderBoard(); logActivity("Card \"" + card.id + "\" title changed"); } }); }); header.appendChild(titleEl); var timestamp = document.createElement("span"); timestamp.className = "timestamp"; timestamp.textContent = formatTimestamp(card.created); header.appendChild(timestamp); cardDiv.appendChild(header); var body = document.createElement("div"); body.className = "card-body"; body.textContent = card.description \|\| "Double-click to add description"; body.contentEditable = true; body.addEventListener("focus", function() { body.dataset.original = body.textContent; }); body.addEventListener("blur", function() { if (body.textContent !== body.dataset.original) { pushUndo(); card.description = body.textContent; card.updated = Date.now(); saveBoardData(); logActivity("Card \"" + card.id + "\" description updated"); } }); cardDiv.appendChild(body); var footer = document.createElement("div"); footer.className = "card-footer"; var due = document.createElement("span"); due.className = "due-date"; due.textContent = card.dueDate ? "Due: " + card.dueDate : "Set Due Date"; due.addEventListener("click", function() { showInputModal("Set Due Date (YYYY-MM-DD)", card.dueDate, function(newDue) { pushUndo(); card.dueDate = newDue; card.updated = Date.now(); saveBoardData(); renderBoard(); logActivity("Card \"" + card.id + "\" due date updated"); }); }); footer.appendChild(due); var priority = document.createElement("span"); priority.className = "priority"; priority.textContent = "Priority: " + card.priority; priority.addEventListener("click", function() { pushUndo(); var opts = ["low", "normal", "high"]; var i = opts.indexOf(card.priority); card.priority = opts[(i + 1) % opts.length]; card.updated = Date.now(); saveBoardData(); renderBoard(); logActivity("Card \"" + card.id + "\" priority set to " + card.priority); }); if (card.priority === "low") { priority.style.backgroundColor = "#2ecc71"; } else if (card.priority === "normal") { priority.style.backgroundColor = "#3498db"; } else if (card.priority === "high") { priority.style.backgroundColor = "#e74c3c"; } footer.appendChild(priority); var status = document.createElement("span"); status.className = "status"; status.textContent = "Status: " + card.status; status.addEventListener("click", function() { pushUndo(); var opts = ["Todo", "WIP", "Done"]; var i = opts.indexOf(card.status); card.status = opts[(i + 1) % opts.length]; card.updated = Date.now(); saveBoardData(); renderBoard(); logActivity("Card \"" + card.id + "\" status changed to " + card.status); }); if (card.status === "Todo") { status.style.backgroundColor = "#95a5a6"; } else if (card.status === "WIP") { status.style.backgroundColor = "#f39c12"; } else if (card.status === "Done") { status.style.backgroundColor = "#27ae60"; } footer.appendChild(status); cardDiv.appendChild(footer); cardDiv.addEventListener("contextmenu", function(e) { e.preventDefault(); showCardContextMenu(e.pageX, e.pageY, card, columnId); }); return cardDiv; } function showCardContextMenu(x, y, card, columnId) { var existingMenu = document.getElementById("cardContextMenu"); if (existingMenu) existingMenu.parentNode.removeChild(existingMenu); var menu = document.createElement("div"); menu.id = "cardContextMenu"; menu.style.position = "absolute"; menu.style.top = y + "px"; menu.style.left = x + "px"; menu.style.background = "#fff"; menu.style.border = "1px solid #ccc"; menu.style.boxShadow = "2px 2px 5px rgba(0,0,0,0.3)"; menu.style.zIndex = "2000"; var optDelete = document.createElement("div"); optDelete.textContent = "Delete Card"; optDelete.style.padding = "5px 10px"; optDelete.style.cursor = "pointer"; optDelete.addEventListener("click", function() { pushUndo(); var col = boardData.columns.filter(function(c) { return c.id === columnId; })[0]; if (col) { col.cards = col.cards.filter(function(c) { return c.id !== card.id; }); saveBoardData(); renderBoard(); logActivity("Card \"" + card.id + "\" deleted"); } menu.parentNode.removeChild(menu); }); menu.appendChild(optDelete); var optDuplicate = document.createElement("div"); optDuplicate.textContent = "Duplicate Card"; optDuplicate.style.padding = "5px 10px"; optDuplicate.style.cursor = "pointer"; optDuplicate.addEventListener("click", function() { pushUndo(); var col = boardData.columns.filter(function(c) { return c.id === columnId; })[0]; if (col) { var newCard = new Card(card); newCard.id = generateId(); col.cards.push(newCard); saveBoardData(); renderBoard(); logActivity("Card \"" + card.id + "\" duplicated"); } menu.parentNode.removeChild(menu); }); menu.appendChild(optDuplicate); ["Todo", "WIP", "Done"].forEach(function(s) { var optStatus = document.createElement("div"); optStatus.textContent = "Set status: " + s; optStatus.style.padding = "5px 10px"; optStatus.style.cursor = "pointer"; optStatus.addEventListener("click", function() { pushUndo(); card.status = s; card.updated = Date.now(); saveBoardData(); renderBoard(); logActivity("Card \"" + card.id + "\" status set to " + s + " (via context menu)"); if (menu.parentNode) { menu.parentNode.removeChild(menu); } }); menu.appendChild(optStatus); }); document.body.appendChild(menu); document.addEventListener("click", function onDocClick() { if (menu.parentNode) { menu.parentNode.removeChild(menu); } document.removeEventListener("click", onDocClick); }); } // Event listeners for filters document.getElementById("searchText").addEventListener("input", applyFilter); document.getElementById("filterStatus").addEventListener("change", applyFilter); document.getElementById("filterPriority").addEventListener("change", applyFilter); document.getElementById("btnApplyFilter").addEventListener("click", applyFilter); document.getElementById("btnClearFilter").addEventListener("click", clearFilter); function applyFilter() { var searchText = document.getElementById("searchText").value.toLowerCase(), filterStatus = document.getElementById("filterStatus").value, filterPriority = document.getElementById("filterPriority").value; var cards = document.querySelectorAll(".card"); Array.prototype.forEach.call(cards, function(cardEl) { var cardId = cardEl.getAttribute("data-id"), card = null; boardData.columns.forEach(function(col) { col.cards.forEach(function(c) { if (c.id === cardId) { card = c; } }); }); if (!card) return; var textMatch = card.title.toLowerCase().indexOf(searchText) > -1 \|\| card.description.toLowerCase().indexOf(searchText) > -1, statusMatch = filterStatus ? card.status === filterStatus : true, priorityMatch = filterPriority ? card.priority === filterPriority : true; cardEl.style.display = (textMatch && statusMatch && priorityMatch) ? "" : "none"; }); logActivity("Filter applied"); } function clearFilter() { document.getElementById("searchText").value = ""; document.getElementById("filterStatus").value = ""; document.getElementById("filterPriority").value = ""; var cards = document.querySelectorAll(".card"); Array.prototype.forEach.call(cards, function(cardEl) { cardEl.style.display = ""; }); logActivity("Filter cleared"); } document.addEventListener("keydown", function(e) { var modifierKey = e.ctrlKey \|\| e.metaKey; if (modifierKey && e.shiftKey && e.code === "KeyC") { e.preventDefault(); document.getElementById("btnAddColumn").click(); } if (modifierKey && e.shiftKey && e.code === "KeyE") { e.preventDefault(); document.getElementById("btnExport").click(); } if (modifierKey && e.shiftKey && e.code === "KeyI") { e.preventDefault(); document.getElementById("btnImport").click(); } if (modifierKey && e.code === "KeyS") { e.preventDefault(); document.getElementById("btnSave").click(); } if (modifierKey && e.code === "KeyZ") { e.preventDefault(); performUndo(); } if ((modifierKey && e.code === "KeyY") \|\| (modifierKey && e.shiftKey && e.code === "KeyZ")) { e.preventDefault(); performRedo(); } }); document.getElementById("btnAddColumn").addEventListener("click", function() { showInputModal("Enter Column Title", "New Column", function(title) { if (title && title.trim()) { pushUndo(); var newColumn = new Column({ title: title.trim() }); boardData.columns.push(newColumn); saveBoardData(); renderBoard(); logActivity("New column \"" + newColumn.id + "\" added"); } }); }); document.getElementById("btnSave").addEventListener("click", function() { saveBoardData(); logActivity("Board saved"); showPopup("Board saved!"); }); document.getElementById("btnExport").addEventListener("click", function() { showModalForImportExport("Export Board", exportBoardData(), function(text) { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then( function() { showPopup("Exported JSON has been copied to clipboard!"); }, function(err) { showPopup("Failed to copy to clipboard!"); console.error('Clipboard copy failed: ', err); } ); } else { try { var textarea = document.createElement('textarea'); textarea.value = text; document.body.appendChild(textarea); textarea.select(); var successful = document.execCommand('copy'); document.body.removeChild(textarea); if (successful) { showPopup("Exported JSON has been copied to clipboard!"); } else { showPopup("Failed to copy to clipboard!"); } } catch (err) { showPopup("Failed to copy to clipboard!"); console.error('Clipboard copy failed: ', err); } } }); }); document.getElementById("btnImport").addEventListener("click", function() { showModalForImportExport("Import Board", "", function(text) { importBoardData(text); }); }); document.getElementById("btnUndo").addEventListener("click", performUndo); document.getElementById("btnRedo").addEventListener("click", performRedo); document.getElementById("btnToggleSearch").addEventListener("click", function() { var sp = document.getElementById("searchPanel"); sp.style.display = sp.style.display === "block" ? "none" : "block"; }); document.getElementById("btnToggleActivity").addEventListener("click", function() { var ap = document.getElementById("activityLogPanel"); ap.style.display = ap.style.display === "block" ? "none" : "block"; }); document.getElementById("btnPrevColumn").addEventListener("click", function() { if (window.innerWidth <= 499) { currentColumnIndex = (currentColumnIndex - 1 + boardData.columns.length) % boardData.columns.length; renderBoard(); } }); document.getElementById("btnNextColumn").addEventListener("click", function() { if (window.innerWidth <= 499) { currentColumnIndex = (currentColumnIndex + 1) % boardData.columns.length; renderBoard(); } }); window.addEventListener("load", function() { loadBoardData(); if (boardData.columns.length === 0) { var helloColumn = new Column({ title: "Welcome to Brain" }); helloColumn.cards.push(new Card({ title: "A Column-Based Personal Workspace", description: "Created by Eldiiar Bekbolotov.", status: "Done" })); boardData.columns.push(helloColumn); var defaultColumn = new Column({ title: "Todo" }); defaultColumn.cards.push(new Card({ title: "Things you plan to get done", description: "Double-click column header or card title to edit them. Click chips below to toggle priority and status states. Drag any card or column anywhere.", status: "Todo" })); defaultColumn.cards.push(new Card({ title: "Reminders, follow-ups, stuff you can't forget", description: "Keyboard shortcuts: Control+Shift+C (Add Column), Control+Shift+E (Export Data), Control+Shift+I (Import Data), Control+S (Save to Local Storage), Control+Z (Undo Action), Control+Y or Control+Shift+Z (Redo Action). For Mac users, Command key is also supported.", status: "Todo" })); boardData.columns.push(defaultColumn); } saveBoardData(); renderBoard(); logActivity("Board loaded"); }); setInterval(function() { saveBoardData(); logActivity("Auto-saved board"); }, 300000); window.addEventListener("storage", function(e) { if (e.key === LS_KEY) { loadBoardData(); renderBoard(); logActivity("Board updated from another tab"); } }); </script> <!-- The Thumbnail Script 2.0.0 10/24/2023 by Bluebird@kaid_157624541333313939750668 --> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <script type> var r = 600; var s = document.documentElement.clientWidth; window.parent.html2canvas = e => { try { html2canvas(document.body, { width: s, height: s, useCORS: true, }).then(e => { var c = document.createElement("canvas"); c.width = r; c.height = r; c.getContext('2d').drawImage(e, 0, 0, e.width, e.height, 0, 0, r, r); window.top.postMessage(c.toDataURL(), ""); }).catch(e => { alert("Thumbnail Script Error: " + e); }); } catch { window.top.postMessage(document.createElement("canvas").toDataURL(), "*"); } }; </script> </body> </html> <!-- © 2025 Eldiiar Bekbolotov First released on the Khan Academy Computing Platform (https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects) -->
Folds	18,1225
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIeOh-f9CQw
Votes	3
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Eldiiar Bekbolotov
Author Name	LeaferStudios
Author ID	kaid_553656479258879622339276
Author Profile Access	PUBLIC

Archive Data

Added	2 days ago, 1743896408212
Updated	2 days ago, 1743896408212
Source Deleted	unknown