LFM2.5-2.6B (free)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kanban Board</title>
  <style>
    :root {
      --bg: #f5f7fa;
      --surface: #ffffff;
      --text: #1a1a2e;
      --primary: #4f46e5;
      --primary-hover: #4338ca;
      --border: #e2e8f0;
      --shadow: 0 1px 3px rgba(0,0,0,0.1);
      --card-bg: #ffffff;
      --priority-low: #10b981;
      --priority-medium: #f59e0b;
      --priority-high: #ef4444;
      --delete-btn: #ef4444;
    }

    [data-theme="dark"] {
      --bg: #1a1a2e;
      --surface: #16213e;
      --text: #e0e0e0;
      --primary: #7c3aed;
      --primary-hover: #6d28d9;
      --border: #2d3148;
      --shadow: 0 1px 3px rgba(0,0,0,0.3);
      --card-bg: #1a1a2e;
      --priority-low: #34d399;
      --priority-medium: #fbbf24;
      --priority-high: #f87171;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 800px;
      transition: background 0.3s, color 0.3s;
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      box-shadow: var(--shadow);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    header h1 {
      font-size: 1.5rem;
      font-weight: 600;
    }

    .theme-toggle {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 16px;
      cursor: pointer;
      font-size: 0.9rem;
      transition: all 0.2s;
    }

    .theme-toggle:hover {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
    }

    .search-container {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 24px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      margin-bottom: 16px;
      box-shadow: var(--shadow);
    }

    .search-input {
      flex: 1;
      padding: 10px 14px;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 0.95rem;
      outline: none;
      transition: border-color 0.2s;
    }

    .search-input:focus {
      border-color: var(--primary);
    }

    .board {
      display: flex;
      gap: 20px;
      padding: 20px;
      min-height: 600px;
      transition: background 0.3s;
    }

    .column {
      background: var(--surface);
      border-radius: 12px;
      width: 300px;
      max-width: 100%;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow);
      transition: background 0.3s;
    }

    .column-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .column-title {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text);
    }

    .card-count {
      background: var(--primary);
      color: white;
      font-size: 0.8rem;
      padding: 2px 8px;
      border-radius: 12px;
      font-weight: 500;
    }

    .card-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
    }

    .card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px 14px;
      margin-bottom: 8px;
      cursor: grab;
      transition: transform 0.15s, box-shadow 0.15s;
      position: relative;
      user-select: none;
    }

    .card:active {
      cursor: grabbing;
      transform: scale(0.98);
    }

    .card:hover {
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .card.dragging {
      opacity: 0.5;
      transform: rotate(2deg);
    }

    .card-title {
      font-size: 0.95rem;
      margin-bottom: 8px;
      line-height: 1.4;
    }

    .priority-badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .priority-low { background: var(--priority-low); color: #0f4c7a; }
    .priority-medium { background: var(--priority-medium); color: #92400e; }
    .priority-high { background: var(--priority-high); color: #b91c1c; }

    .delete-btn {
      background: none;
      border: none;
      color: var(--delete-btn);
      font-size: 1rem;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      transition: background 0.2s;
      line-height: 1;
    }

    .delete-btn:hover {
      background: rgba(239, 68, 68, 0.1);
    }

    .empty-state {
      text-align: center;
      padding: 40px 20px;
      color: #6b7280;
    }

    .empty-state .icon {
      font-size: 3rem;
      margin-bottom: 12px;
    }

    .empty-state p {
      font-size: 0.95rem;
    }

    /* Modal */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
    }

    .modal-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .modal {
      background: var(--surface);
      border-radius: 12px;
      width: 400px;
      max-width: 90vw;
      padding: 24px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.2);
      transform: translateY(20px);
      transition: transform 0.3s;
    }

    .modal-overlay.active .modal {
      transform: translateY(0);
    }

    .modal h2 {
      font-size: 1.2rem;
      margin-bottom: 16px;
      color: var(--text);
    }

    .modal input[type="text"] {
      width: 100%;
      padding: 12px 16px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 1rem;
      outline: none;
      margin-bottom: 16px;
      transition: border-color 0.2s;
    }

    .modal input[type="text"]:focus {
      border-color: var(--primary);
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 20px;
    }

    .modal-btn {
      padding: 10px 20px;
      border: none;
      border-radius: 6px;
      font-size: 0.95rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    .modal-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .btn-add {
      background: var(--primary);
      color: white;
    }

    .btn-add:hover {
      background: var(--primary-hover);
    }

    .btn-cancel {
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--border);
    }

    .btn-cancel:hover {
      background: var(--bg);
    }

    /* Drop indicator */
    .drop-indicator {
      position: absolute;
      left: 0;
      top: 0;
      height: 2px;
      background: var(--primary);
      z-index: 10;
      pointer-events: none;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .board {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
      }

      .column {
        width: 100%;
        max-width: 100%;
      }

      .column-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }

      .card-count {
        margin-bottom: 8px;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>Kanban Board</h1>
    <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">🌙</button>
  </header>

  <div class="search-container">
    <input type="text" class="search-input" id="searchInput" placeholder="Search cards..." />
  </div>

  <div class="board" id="board">
    <div class="column" data-column="to-do">
      <div class="column-header">
        <div class="column-title">To do</div>
        <span class="card-count" id="count-to-do">0</span>
      </div>
      <div class="card-list" id="column-to-do"></div>
    </div>

    <div class="column" data-column="in-progress">
      <div class="column-header">
        <div class="column-title">In progress</div>
        <span class="card-count" id="count-in-progress">0</span>
      </div>
      <div class="card-list" id="column-in-progress"></div>
    </div>

    <div class="column" data-column="done">
      <div class="column-header">
        <div class="column-title">Done</div>
        <span class="card-count" id="count-done">0</span>
      </div>
      <div class="card-list" id="column-done"></div>
    </div>
  </div>

  <!-- Add Card Modal -->
  <div class="modal-overlay" id="modalOverlay">
    <div class="modal">
      <h2>Add New Card</h2>
      <input type="text" id="newCardTitle" placeholder="Card title (required)" maxlength="100">
      <div class="modal-actions">
        <button class="btn-cancel" id="cancelModal">Cancel</button>
        <button class="btn-add" id="addCardBtn">Add Card</button>
      </div>
    </div>
  </div>

  <script>
    // State
    let cards = [];
    let currentColumn = 'to-do';
    let searchQuery = '';

    // DOM Elements
    const board = document.getElementById('board');
    const columnToDo = document.getElementById('column-to-do');
    const columnInProgress = document.getElementById('column-in-progress');
    const columnDone = document.getElementById('column-done');
    const searchInput = document.getElementById('searchInput');
    const themeToggle = document.getElementById('themeToggle');
    const modalOverlay = document.getElementById('modalOverlay');
    const newCardTitle = document.getElementById('newCardTitle');
    const addCardBtn = document.getElementById('addCardBtn');
    const cancelModal = document.getElementById('cancelModal');

    // Initialize cards
    function initCards() {
      const newCards = [
        { id: 1, title: 'Design new onboarding flow', priority: 'high', column: 'to-do' },
        { id: 2, title: 'Fix login button alignment', priority: 'medium', column: 'in-progress' },
        { id: 3, title: 'Write API documentation', priority: 'low', column: 'to-do' },
        { id: 4, title: 'Implement dark mode support', priority: 'high', column: 'in-progress' },
        { id: 5, title: 'Refactor user service module', priority: 'medium', column: 'done' },
        { id: 6, title: 'Update deployment pipeline', priority: 'low', column: 'to-do' },
      ];

      cards = newCards.map(c => ({
        ...c,
        id: c.id
      }));

      renderAll();
    }

    // Render all columns
    function renderAll() {
      renderColumn('to-do', cards.filter(c => c.column === 'to-do'));
      renderColumn('in-progress', cards.filter(c => c.column === 'in-progress'));
      renderColumn('done', cards.filter(c => c.column === 'done'));

      updateCounts();
    }

    // Render a single column
    function renderColumn(columnName, cardsToRender) {
      const container = document.getElementById(`${columnName}-list`);
      if (cardsToRender.length === 0) {
        container.innerHTML = `
          <div class="empty-state">
            <div class="icon">📋</div>
            <p>No cards in this column</p>
          </div>
        `;
        return;
      }

      container.innerHTML = cardsToRender.map(card => `
        <div class="card" data-card-id="${card.id}" draggable="true">
          <div class="card-title">${escapeHtml(card.title)}</div>
          <div class="priority-badge priority-${card.priority}">${card.priority}</div>
          <button class="delete-btn" data-card-id="${card.id}" aria-label="Delete card">✕</button>
        </div>
      `).join('');

      // Attach event listeners to cards
      container.querySelectorAll('.card').forEach(cardEl => {
        const cardId = parseInt(cardEl.dataset.cardId);
        const card = cards.find(c => c.id === cardId);

        // Delete button
        const deleteBtn = cardEl.querySelector('.delete-btn');
        if (deleteBtn) {
          deleteBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            deleteCard(cardId);
          });
        }

        // Drag events
        cardEl.addEventListener('dragstart', handleDragStart);
        cardEl.addEventListener('dragend', handleDragEnd);
      });
    }

    // Update column counts
    function updateCounts() {
      document.getElementById('count-to-do').textContent = cards.filter(c => c.column === 'to-do').length;
      document.getElementById('count-in-progress').textContent = cards.filter(c => c.column === 'in-progress').length;
      document.getElementById('count-done').textContent = cards.filter(c => c.column === 'done').length;
    }

    // Search filtering
    function filterCards() {
      const query = searchQuery.toLowerCase();
      const filtered = cards.filter(c => 
        c.title.toLowerCase().includes(query)
      );
      renderAll();
    }

    // Add a card via modal
    function openModal() {
      modalOverlay.classList.add('active');
      newCardTitle.value = '';
    }

    function closeModal() {
      modalOverlay.classList.remove('active');
      newCardTitle.value = '';
    }

    function addCard() {
      const title = newCardTitle.value.trim();
      if (!title) return;

      const newCard = {
        id: Date.now(),
        title,
        priority: Math.random() > 0.5 ? 'high' : (Math.random() > 0.5 ? 'medium' : 'low'),
        column: currentColumn
      };

      cards.push(newCard);
      renderAll();
      closeModal();
    }

    // Delete a card
    function deleteCard(cardId) {
      cards = cards.filter(c => c.id !== cardId);
      renderAll();
    }

    // Move card between columns
    function moveCard(cardId, fromColumn, toColumn) {
      const card = cards.find(c => c.id === cardId);
      if (!card) return;

      card.column = toColumn;
      renderAll();
    }

    // Handle drag start
    function handleDragStart(e) {
      const cardEl = e.target.closest('.card');
      if (!cardEl) return;

      const cardId = parseInt(cardEl.dataset.cardId);
      cardEl.classList.add('dragging');
      e.dataTransfer.setData('text/plain', cardId);
    }

    // Handle drag end
    function handleDragEnd(e) {
      const cardEl = e.target.closest('.card');
      if (cardEl) {
        cardEl.classList.remove('dragging');
      }
    }

    // Handle drag over (drop indicator)
    function handleDragOver(e) {
      e.preventDefault();
      const cardEl = e.target.closest('.card');
      if (cardEl) {
        const cardId = parseInt(cardEl.dataset.cardId);
        const column = cardEl.dataset.column;
        const toColumn = currentColumn;

        // Show drop indicator
        const indicator = cardEl.parentElement.querySelector('.drop-indicator');
        if (indicator) {
          indicator.style.display = 'block';
        }
      }
    }

    // Handle drop
    function handleDrop(e) {
      e.preventDefault();
      const cardEl = e.target.closest('.card');
      if (!cardEl) return;

      const cardId = parseInt(cardEl.dataset.cardId);
      const fromColumn = cardEl.dataset.column;
      const toColumn = currentColumn;

      if (fromColumn === toColumn) return;

      moveCard(cardId, fromColumn, toColumn);
    }

    // Escape HTML in card titles
    function escapeHtml(text) {
      const div = document.createElement('div');
      div.textContent = text;
      return div.innerHTML;
    }

    // Theme toggle
    function toggleTheme() {
      const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
      document.documentElement.setAttribute('data-theme', isDark ? 'light' : 'dark');
    }

    // Event listeners
    themeToggle.addEventListener('click', toggleTheme);

    searchInput.addEventListener('input', filterCards);

    addCardBtn.addEventListener('click', addCard);
    cancelModal.addEventListener('click', closeModal);

    modalOverlay.addEventListener('click', (e) => {
      if (e.target === modalOverlay) closeModal();
    });

    // Initialize
    initCards();
  </script>
</body>
</html>