North Mini Code (free)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Kanban Board Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    :root {
      --bg: #f5f5f5;
      --panel: #fff;
      --text: #222;
      --col-bg: #e0e0e0;
      --drop-zone: #d3d3d3;
      --badge-low: #4caf50;
      --badge-med: #ff9800;
      --badge-high: #f44336;
      --input-bg: #fff;
      --input-text: #222;
    }
    :root.dark {
      --bg: #1e1e1e;
      --panel: #2c2c2c;
      --text: #ddd;
      --col-bg: #3a3a3a;
      --drop-zone: #505050;
      --input-bg: #3a3a3a;
      --input-text: #ddd;
    }
    * { box-sizing: border-box; }
    body {
      margin:0;
      font-family: system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
    }
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 20px;
      background: var(--panel);
      border-bottom: 1px solid #ddd;
    }
    .header-left { display: flex; align-items: center; gap: 12px; }
    h1 { margin: 0; font-size: 1.4rem; }
    input#search {
      padding: 6px 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background: var(--input-bg);
      color: var(--input-text);
      font-size: 0.95rem;
    }
    .theme-toggle {
      background: none;
      border: none;
      font-size: 1.2rem;
      cursor: pointer;
      color: var(--text);
    }
    .boards {
      display: flex;
      flex: 1;
      gap: 12px;
      padding: 12px;
      overflow-x: auto;
    }
    .column {
      flex: 0 0 300px;
      background: var(--col-bg);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      min-height: PTA0;
      transition: background .3s;
    }
    .column-header {
      padding: 10px;
      font-weight: bold;
      text-align center;
      border-bottom: 2px solid #bbb;
      background: var(--panel);
      border-radius: 8px 8px 0 0;
    }
    .card-count {
      margin-left: 6px;
      font-size: 0.85rem;
      color: #666;
    }
    .dark .card-count { color: #aaa; }
    .cards {
      flex: 1;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow-y: auto;
    }
    .card {
      background: var(--panel);
      border-radius: 6px;
      padding: 12px;
      box-shadow: 0 2px 5px rgba(0,0,0,.1);
      cursor: grab;
      position: relative;
    }
    .card:active { cursor: grabbing; }
    .card-delete {
      position: absolute;
      top: 6px;
      right: 6px;
      background: transparent;
      border: none;
      color: #999;
      font-size: 1.1rem;
      cursor: pointer;
      padding: 2px;
    }
    .card-delete:hover { color: #e00; }
    .badge {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 12px;
      font-size: 0.75rem;
      font-weight: 600;
      margin-top: 6px;
      color: #fff;
    }
    .badge.low { background: var(--badge-low); }
    .badge.medium { background: var(--badge-med); }
    .badge.high { background: var(--badge-high); }
    .drop-zone {
      flex: 1;
      min-height: 40px;
      border: 2px dashed transparent;
      border-radius: 6px;
      transition: border-color .2s;
    }
    .drop-zone.active {
      border-color: var(--drop-zone);
      background: rgba(128,128,128,.15);
    }
    .modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
    }
    .modal.open {
      opacity: 1;
      pointer-events: all;
    }
    .modal-content {
      background: var(--panel);
      padding: 20px;
      border-radius: 8px;
      width: 300px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .modal-content h2 { margin:0 0 8px; font-size: 1.2rem; }
    .modal-content input[type="text"] {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background: var(--input-bg);
      color: var(--input-text);
    }
    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
    .modal-actions button {
      padding: 6px 12px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.9rem;
    }
    .modal-actions .cancel {
      background: #ddd;
    }
    .modal-actions .add {
      background: #2196f3;
      color: #fff;
    }
    .start-screen {
      position: fixed;
      inset: 0;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2000;
      font-size: 1.5rem;
      color: var(--text);
    }
    .sr-only { position: absolute; width:1px; height:1px; overflow:hidden; }
  </style>
</head>
<body>
  <div class="start-screen" id="startScreen">
    Click or press a key to start
  </div>

  <header>
    <div class="header-left">
      <h1>Kanban Board</h1>
      <input id="search" type="text" placeholder="Search cards...">
    </div>
    <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">🌓</button>
    <button id="addCardBtn" style="margin-left:12px;padding:6px 12px;background:#2196f3;color:#fff;border:none;border-radius:4px;cursor:pointer;">Add Card</button>
  </header>

  <main class="boards">
    <!-- columns will be generated by JS -->
  </main>

  <div class="modal" id="cardModal">
    <div class="modal-content">
      <h2>Add New Card</h2>
      <input id="cardTitle" type="text" placeholder="Card title (required)" required>
      <div class="modal-actions">
        <button class="cancel" id="modalCancel">Cancel</button>
        <button class="add" id="modalAdd">Add</button>
      </div>
    </div>
  </div>

  <script>
    const columns = [
      { id: 'todo', title: 'To do', cards: [] },
      { id: 'inprogress', title: 'In progress', cards: [] },
      { id: 'done', title: 'Done', cards: [] }
    ];

    const priorities = ['low', 'medium', 'high'];
    const priorityLabels = { low: 'Low', medium: 'Medium', high: 'High' };
    const priorityColors = { low: '#4caf50', medium: '#ff9800', high: '#f44336' };

    // pre-populate
    const seedCards = [
      { title: 'Design login page', priority: 'high' },
      { title: 'Implement auth flow', priority: 'medium' },
      { title: 'Write unit tests', priority: 'low' },
      { title: 'Review PR #42', priority: 'high' },
      { title: 'Update docs', priority: 'low' },
      { title: 'Deploy to staging', priority: 'medium' }
    ];

    seedCards.forEach((c, i) => {
      const col = columns[Math.floor(i / 2)];
      col.cards.push({ id: crypto.randomUUID(), title: c.title, priority: c.priority });
    });

    function renderColumns() {
      const boards = document.querySelector('.boards');
      boards.innerHTML = '';
      columns.forEach(col => {
        const colEl = document.createElement('section');
        colEl.className = 'column';
        colEl.setAttribute('aria-label', col.title);
        colEl.id = col.id;
        colEl.innerHTML = `
          <div class="column-header">
            ${col.title}
            <span class="card-count">(${col.cards.length})</span>
          </div>
          <div class="cards" aria-dropevent="allowed"></div>
          <div class="drop-zone" aria-dropevent="allowed"></div>
        `;
        boards.appendChild(colEl);
      });
    }

    function renderCards(filter = '') {
      const cardElements = [];
      columns.forEach(col => {
        const cardsContainer = document.querySelector(`#${col.id} .cards`);
        cardsContainer.innerHTML = '';
        col.cards
          .filter(card => card.title.toLowerCase().includes(filter))
          .forEach(card => {
            const cardEl = document.createElement('article');
            cardEl.className = 'card';
            cardEl.draggable = true;
            cardEl.dataset.id = card.id;
            cardEl.dataset.col = col.id;
            cardEl.innerHTML = `
              <button class="card-delete" aria-label="Delete card">×</button>
              <div>${card.title}</div>
              <span class="badge ${card.priority}">${priorityLabels[card.priority]}</span>
            `;
            cardsContainer.appendChild(cardEl);
            cardElements.push(cardEl);
          });
      });
      attachCardEvents(cardElements);
    }

    function attachCardEvents(cardElements) {
      cardElements.forEach(card => {
        card.addEventListener('dragstart', e => {
          e.dataTransfer.setData('text/plain', card.dataset.id);
          e.dataTransfer.effectAllowed = 'move';
          card.classList.add('dragging');
        });
        card.addEventListener('dragend', () => card.classList.remove('dragging'));
        const delBtn = card.querySelector('.card-delete');
        delBtn.addEventListener('click', e => {
          e.stopPropagation();
          const col = columns.find(c => c.id === card.dataset.col);
          col.cards = col.cards.filter(c => c.id !== card.dataset.id);
          renderCards(document.getElementById('search').value);
        });
      });
    }

    // drop zones logic
    function attachDropZones() {
      const zones = document.querySelectorAll('.drop-zone');
      zones.forEach(zone => {
        zone.addEventListener('dragover', e => {
          e.preventDefault();
          zone.classList.add('active');
        });
        zone.addEventListener('dragleave', () => zone.classList.remove('active'));
        zone.addEventListener('drop', e => {
          e.preventDefault();
          zone.classList.remove('active');
          const id = e.dataTransfer.getData('text/plain');
          const srcCol = columns.find(c => c.cards.some(card => card.id === id));
          const tgtCol = columns.find(c => c.id === zone.parentElement.id);
          if (!srcCol || srcCol === tgtCol) return;
          const card = srcCol.cards.find(c => c.id === id);
          srcCol.cards = srcCol.cards.filter(c => c.id !== id);
          tgtCol.cards.push({ ...card, id: crypto.randomUUID() }); // new id to avoid duplicate
          renderCards(document.getElementById('search').value);
        });
      });
    }

    // modal handling
    const modal = document.getElementById('cardModal');
    const modalAdd = document.getElementById('modalAdd');
    const modalCancel = document.getElementById('modalCancel');
    const cardTitleInput = document.getElementById('cardTitle');
    const addCardBtn = document.getElementById('addCardBtn');

    function openModal() {
      modal.classList.add('open');
      cardTitleInput.value = '';
      cardTitleInput.focus();
    }
    function closeModal() {
      modal.classList.remove('open');
    }

    addCardBtn.addEventListener('click', openModal);
    modalCancel.addEventListener('click', closeModal);
    modal.addEventListener('click', e => {
      if (e.target === modal) closeModal();
    });

    modalAdd.addEventListener('click', () => {
      const title = cardTitleInput.value.trim();
      if (!title) return;
      const col = columns[0]; // default to "To do"
      col.cards.push({ id: crypto.randomUUID(), title, priority: priorities[Math.floor(Math.random() * priorities.length)] });
      renderCards(document.getElementById('search').value);
      closeModal();
    });

    // search
    const searchInput = document.getElementById('search');
    searchInput.addEventListener('input', e => renderCards(e.target.value));

    // theme toggle
    const themeToggle = document.getElementById('themeToggle');
    themeToggle.addEventListener('click', () => {
      const isDark = document.documentElement.classList.contains('dark');
      if (isDark) {
        document.documentElement.classList.remove('dark');
        localStorage.setItem('theme', 'light');
      } else {
        document.documentElement.classList.add('dark');
        localStorage.setItem('theme', 'dark');
      }
    });

    // start screen removal
    const startScreen = document.getElementById('startScreen');
    function hideStart() {
      startScreen.style.display = 'none';
    }
    startScreen.addEventListener('click', hideStart);
    window.addEventListener('keydown', e => {
      if (e.key !== 'Escape') hideStart();
    });

    // init
    renderColumns();
    renderCards();
    attachDropZones();

    // autofocus search
    searchInput.focus();
  </script>
</body>
</html>