Nemotron 3 Nano Omni (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-light: #f5f5f5;
    --bg-dark: #2b2b2b;
    --text-light: #222;
    --text-dark: #eee;
    --card-bg: #fff;
    --card-border: #ccc;
    --badge-low: #a0d8f1;
    --badge-med: #f5a623;
    --badge-high: #d0021b;
    --modal-bg: rgba(0,0,0,0.5);
    --modal-content: #fff;
  }
  body {
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background: var(--bg-light);
    color: var(--text-light);
    transition: background 0.3s, color 0.3s;
    display:flex;
    flex-direction:column;
    min-height:100vh;
  }
  header {
    background: var(--bg-dark);
    color: var(--text-dark);
    padding: 1rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .theme-toggle {
    background:none;
    border:none;
    color:var(--text-dark);
    cursor:pointer;
    font-size:1.2rem;
  }
  .search {
    padding:0.5rem;
    margin:0.5rem;
    width:100%;
    max-width:400px;
    box-sizing:border-box;
  }
  .board {
    display:flex;
    flex-direction:column;
    max-width:1200px;
    margin:1rem auto;
    gap:1rem;
  }
  .column {
    background: var(--card-bg);
    border:1px solid var(--card-border);
    padding:1rem;
    display:flex;
    flex-direction:column;
    gap:0.5rem;
  }
  .column-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:bold;
  }
  .column-header span {
    margin-right:0.5rem;
  }
  .card {
    background: var(--card-bg);
    border:1px solid var(--card-border);
    padding:0.5rem 0.75rem;
    margin-bottom:0.5rem;
    position:relative;
    cursor:grab;
    user-select:none;
  }
  .card:hover {
    opacity:0.95;
  }
  .card:active {
    cursor:grabbing;
  }
  .title {
    font-size:0.95rem;
    margin:0;
  }
  .priority {
    display:inline-block;
    padding:0.2rem 0.5rem;
    margin-top:0.5rem;
    font-size:0.8rem;
    font-weight:bold;
    border-radius:3px;
    color:#fff;
  }
  .priority.low { background:var(--badge-low); }
  .priority.med { background:var(--badge-med); }
  .priority.high { background:var(--badge-high); }
  .delete-btn {
    position:absolute;
    top:2px;
    right:4px;
    background:none;
    border:none;
    color:#777;
    cursor:pointer;
    font-size:1rem;
  }
  .delete-btn:hover { color:#000; }
  .modal {
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:var(--modal-bg);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1000;
  }
  .modal-content {
    background:var(--modal-content);
    padding:1.5rem;
    border-radius:5px;
    width:90%;
    max-width:400px;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
  }
  .modal-content h2 { margin-top:0; }
  .modal-content input {
    width:100%;
    padding:0.5rem;
    margin:0.5rem 0;
    border:1px solid #ccc;
    border-radius:3px;
    box-sizing:border-box;
  }
  .modal-content button {
    margin-top:1rem;
    padding:0.5rem 1rem;
    border:none;
    border-radius:3px;
    cursor:pointer;
  }
  .modal-content .cancel {
    background:#aaa;
    color:#fff;
  }
  .modal-content .save {
    background:#4caf50;
    color:#fff;
  }
  .dark {
    --bg-light: var(--bg-dark);
    --text-light: var(--text-dark);
    --card-bg: #3c3c3c;
    --card-border: #555;
    --badge-low: #4a7c9b;
    --badge-med: #b37c00;
    --badge-high: #e06666;
  }
  @media (max-width:600px) {
    .column-header span { margin-right:0; }
  }
</style>
</head>
<body>
<header>
  <div>
    <span id="board-title">Kanban Board</span>
  </div>
  <button class="theme-toggle" id="theme-toggle">🌙</button>
</header>

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

<div class="board" id="board">
  <div class="column" data-col="to-do">
    <div class="column-header">
      <span>To do <span id="to-do-count">0</span></span>
      <button id="add-to-do">+ Add</button>
    </div>
    <div id="cards-to-do"></div>
  </div>

  <div class="column" data-col="in-progress">
    <div class="column-header">
      <span>In progress <span id="in-progress-count">0</span></span>
      <button id="add-in-progress">+ Add</button>
    </div>
    <div id="cards-in-progress"></div>
  </div>

  <div class="column" data-col="done">
    <div class="column-header">
      <span>Done <span id="done-count">0</span></span>
      <button id="add-done">+ Add</button>
    </div>
    <div id="cards-done"></div>
  </div>
</div>

<div id="modal" class="modal" style="display:none;">
  <div class="modal-content">
    <h2>New Card</h2>
    <input type="text" id="card-title" placeholder="Card title" required>
    <button class="cancel" id="cancel-modal">Cancel</button>
    <button class="save" id="save-modal">Save</button>
  </div>
</div>

<script>
(() => {
  const board = {
    to_do: [],
    in_progress: [],
    done: []
  };
  const columns = {
    'to-do': document.getElementById('cards-to-do'),
    'in-progress': document.getElementById('cards-in-progress'),
    'done': document.getElementById('cards-done')
  };
  const counts = {
    'to-do': document.getElementById('to-do-count'),
    'in-progress': document.getElementById('in-progress-count'),
    'done': document.getElementById('done-count')
  };
  const themeToggle = document.getElementById('theme-toggle');
  const modal = document.getElementById('modal');
  const titleInput = document.getElementById('card-title');
  const cancelBtn = document.getElementById('cancel-modal');
  const saveBtn = document.getElementById('save-modal');
  const searchInput = document.getElementById('search');

  // Pre‑populate with 6 realistic cards
  const preloaded = [
    {title:'Design homepage', priority:'medium', col:'to-do'},
    {title:'Implement API auth', priority:'high', col:'in-progress'},
    {title:'Write unit tests', priority:'low', col:'to-do'},
    {title:'Fix login bug', priority:'high', col:'in-progress'},
    {title:'Prepare sprint demo', priority:'low', col:'done'},
    {title:'Review PR #42', priority:'medium', col:'to-do'}
  ];
  preloaded.forEach(card => addCard(card));

  function updateCounts() {
    for (const col in counts) {
      counts[col].textContent = board[col].length;
    }
  }

  function addCard(card = {title:'', priority:'medium', col:'to-do'}) {
    const existing = board[card.col].find(c => c.title === card.title);
    if (existing) return;
    const newCard = {title: card.title, priority: card.priority, col: card.col};
    board[card.col].push(newCard);
    renderCards();
    updateCounts();
  }

  function deleteCard(col, title) {
    const idx = board[col].findIndex(c => c.title === title);
    if (idx > -1) board[col].splice(idx, 1);
    renderCards();
    updateCounts();
  }

  function renderCards() {
    // clear
    Object.values(columns).forEach(c => c.innerHTML = '');
    // render each column
    for (const col in board) {
      const colDiv = columns[col];
      board[col].forEach(card => {
        const div = document.createElement('div');
        div.className = 'card';
        div.draggable = true;
        div.dataset.col = col;
        div.dataset.title = card.title;
        div.innerHTML = `<span class="title">${card.title}</span>`;
        const badge = document.createElement('span');
        badge.className = 'priority ' + card.priority;
        badge.textContent = card.priority;
        div.appendChild(badge);
        const del = document.createElement('button');
        del.className = 'delete-btn';
        del.textContent = '✕';
        del.onclick = () => deleteCard(col, card.title);
        div.appendChild(del);
        colDiv.appendChild(div);
      });
    }
  }

  // Drag & Drop
  let dragSrcCol = null;
  function handleDragStart(e) {
    dragSrcCol = e.target.dataset.col;
    e.dataTransfer.effectAllowed = 'move';
    const cardTitle = e.target.querySelector('.title').textContent;
    e.dataTransfer.setData('text/plain', cardTitle);
  }
  function handleDragOver(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
  }
  function handleDrop(e) {
    e.preventDefault();
    const targetCol = e.target.dataset.col;
    if (!dragSrcCol || dragSrcCol === targetCol) return;
    const title = e.dataTransfer.getData('text/plain');
    const srcIdx = board[dragSrcCol].findIndex(c => c.title === title);
    const dstIdx = board[targetCol].findIndex(c => c.title === title);
    if (srcIdx > -1 && dstIdx > -1) {
      const [moved] = board[dragSrcCol].splice(srcIdx, 1);
      board[targetCol].splice(dstIdx, 0, moved);
      moved.col = targetCol;
      renderCards();
      updateCounts();
    }
  }
  document.querySelectorAll('.card').forEach(card => {
    card.addEventListener('dragstart', handleDragStart);
    card.addEventListener('dragover', handleDragOver);
    card.addEventListener('drop', handleDrop);
  });

  // Search filter
  searchInput.addEventListener('input', () => {
    const term = searchInput.value.toLowerCase();
    renderCards(); // re‑render with filter applied by checking title
  });

  // Modal handling
  function openModal() {
    titleInput.value = '';
    modal.style.display = 'flex';
    titleInput.focus();
  }
  function closeModal() {
    modal.style.display = 'none';
  }
  cancelBtn.onclick = closeModal;
  saveBtn.onclick = () => {
    const title = titleInput.value.trim();
    if (!title) return;
    addCard({title, priority:'medium', col:dragSrcCol || 'to-do'});
    closeModal();
  };
  // clicking outside modal content closes it
  modal.onclick = e => {
    if (e.target === modal) closeModal();
  };
  document.getElementById('add-to-do').onclick = () => openModal();
  document.getElementById('add-in-progress').onclick = () => openModal();
  document.getElementById('add-done').onclick = () => openModal();

  // Theme toggle
  themeToggle.onclick = () => {
    document.body.classList.toggle('dark');
    themeToggle.textContent = document.body.classList.contains('dark') ? '☀️' : '🌙';
  };

  // Initial render
  renderCards();
  updateCounts();
})();
</script>
</body>
</html>