Nemotron 3 Super

We need to produce an HTML page implementing interactive Kanban board. Must be self-contained, no external resources. Use vanilla HTML/CSS/JS.

We need three columns: To do, In progress, Done, each showing card count.

Prepopulate with 6 realistic cards spread across columns.

Each card has title and priority low/medium/high shown as colored badge (maybe low=green, medium=orange, high=red). We can display badge with background color.

Add a card via small modal form (title required). Modal should have input for title and priority select (low/medium/high). Submit adds card to appropriate column? Perhaps default column "To do"? Or allow user to select column too. Simpler: form with title and priority, adds card to "To do" column.

Delete a card with a button on it (maybe an X button on top-right of card).

Drag and drop cards between columns with mouse, with clear visual drop indicator. Need to implement drag-and-drop using HTML5 Drag and Drop API. Cards are draggable. Columns have drop events: dragover to prevent default, and drop to move card.

Need visual drop indicator: maybe highlight column when dragging over.

Search field that filters cards live by title: Input above columns, filter all cards (hide/show based on title containing search term). Should be case-insensitive.

Light/dark theme toggle: button that toggles a class on body (e.g., .dark) and changes CSS variables for colors.

State lives in memory only (no storage). So we just manipulate DOM.

We must ensure first screenshot looks alive: prepopulated cards.

We need to handle drag-and-drop: set dataTransfer setData with card id.

Implement functions: createCardElement(cardData) returns DOM element.

We'll store card data in memory? Not required but helpful for search filter: maybe maintain array of card objects, each with id, title, priority, column. Then filter and re-render? Simpler: we can just hide/show cards based on search input: when user types, we iterate over all card elements and hide those whose title does not include search term. That's fine.

When adding a card via modal, we generate a unique id (e.g., Date.now()+Math.random()). Create card element and append to To-do column.

When dragging, we set dataTransfer.effectAllowed = 'move'; setData('text/plain', id). On dragover we preventDefault and maybe add a class to column to highlight. On dragleave remove class. On drop we preventDefault, get id, find card element by id, remove from its current column, append to target column. Update column counts (we can compute counts each time by counting .card elements in each column). Also update badge colors.

Delete button: on card, clicking button removes card from DOM.

Modal: we can have a simple div with overlay, hidden by default. Show when clicking "Add Card" button (maybe top-right). The modal includes form with title input and priority select, and cancel/submit buttons. On submit, prevent default, validate title not empty, then create card.

Theme toggle: a button (maybe top-left) that toggles .dark class on body.

We need CSS for light and dark themes. Use CSS variables: :root { --bg: #fff; --fg: #222; --card-bg: #f9f9f9; --header-bg: #e0e0e0; } .dark { --bg: #222; --fg: #eee; --card-bg: #333; --header-bg: #444; } etc.

Implement column header showing title and count: maybe <div class="column-header"><h2>To do<span class="count">(0)</span></h2></div>. Update count function.

Prepopulate cards: define array of objects with titles and priorities and columns.

Let's plan code structure:

HTML:
<body>
 <header>
   <button id="themeToggle">🌓 Theme</button>
   <input type="search" id="search" placeholder="Search cards...">
   <button id="openModal">+ Add Card</button>
 </header>
 <main>
   <div class="board">
     <div class="column" data-col="todo">
       <div class="column-header"><h2>To do <span class="count">0</span></h2></div>
       <div class="column-body"></div>
     </div>
     ... similarly for In progress and Done
   </div>
 </main>

 <div id="modalOverlay" class="modal-overlay hidden">
   <div class="modal">
     <h3>Add Card</h3>
     <form id="cardForm">
       <label>Title: <input type="text" id="cardTitle" required></label><br>
       <label>Priority:
         <select id="cardPriority">
           <option value="low">Low</option>
           <option value="medium">Medium</option>
           <option value="high">High</option>
         </select>
       </label><br>
       <button type="submit">Add</button>
       <button type="button" id="cancelBtn">Cancel</button>
     </form>
   </div>
 </div>
</body>

CSS: style board using flex.

Implement drag-and-drop: make each card draggable="true". On dragstart, store id. On dragover column body, preventDefault and add class "drag-over". On dragleave remove class. On drop, preventDefault, get id, move card.

Search: on input event, filter.

Theme toggle: toggle class.

We'll need functions: updateCount(columnElement) that counts .card inside .column-body and updates .count.

We'll also need to create card element:

function createCard(id, title, priority, columnName) {
   const card = document.createElement('div');
   card.className = 'card';
   card.draggable = true;
   card.dataset.id = id;
   card.dataset.priority = priority;
   // inner HTML:
   card.innerHTML = `
      <div class="card-header">
        <span class="priority-badge ${priority}">${priority}</span>
        <button class="delete-btn">×</button>
      </div>
      <div class="card-title">${title}</div>
   `;
   // attach event listeners for drag start, delete button
   return card;
}

Add listeners: card.addEventListener('dragstart', handleDragStart); deleteBtn.addEventListener('click', (e)=>{ e.stopPropagation(); card.remove(); updateCounts(); });

When moving card via drop, we just move the DOM element; we need to update its dataset column? Not needed for functionality; but if we want to track column for other purposes, we could set data-col attribute on card, but not required.

Prepopulate: define array like:
const initialCards = [
  {id:1, title:'Setup project repo', priority:'high', column:'todo'},
  {id:2, title:'Design landing page', priority:'medium', column:'todo'},
  {id:3, title:'Write API documentation', priority:'low', column:'inprogress'},
  {id:4, title:'Implement authentication', priority:'high', column:'inprogress'},
  {id:5, title:'Fix typo in README', priority:'low', column:'done'},
  {id:6, title:'Add unit tests', priority:'medium', column:'done'}
];

Then loop and create cards, append to appropriate column body.

We'll need to map column name to column element: maybe using data-col attribute on column.

Implement updateCounts: for each column, count .card children and set .count text.

Implement search: const term = searchInput.value.toLowerCase(); document.querySelectorAll('.card').forEach(card=>{ const visible = card.querySelector('.card-title').textContent.toLowerCase().includes(term); card.style.display = visible ? '' : 'none'; }); After hiding/showing, we need to update counts? The count should reflect total cards, not just visible. So keep count of all cards regardless of search. So we don't adjust counts based on search.

Theme: We'll define CSS variables and apply to body.

Make sure page looks decent at narrow widths: Use flex wrap? Actually board should be horizontal scrollable if needed? Requirement: no horizontal scrollbar. So we need to make columns wrap or shrink. Use flex with flex: 1 1 200px maybe and set max-width? For small screens, we could make columns stack vertically. Use media query: @media (max-width: 600px) { .board { flex-direction: column; } }.

We'll also need to ensure the modal is centered.

Implement modal: overlay hidden class sets display:none; when showing, remove hidden.

Add event listeners: openModal button to show modal; cancelBtn and overlay click to hide.

Form submit: prevent default, get values, create card, append to todo column body, hide modal, reset form.

Edge: Ensure drag works after adding new card: we need to add dragstart listener to new card.

Implement helper function to add listeners to a card: function enableCardListeners(card) { card.setAttribute('draggable', true); card.addEventListener('dragstart', handleDragStart); card.querySelector('.delete-btn').addEventListener('click', handleDelete); }

Define handleDragStart: function(e){ e.dataTransfer.setData('text/plain', e.target.dataset.id); e.dataTransfer.effectAllowed = 'move'; }

Define handleDragOverColumn: function(e){ e.preventDefault(); e.currentTarget.classList.add('drag-over'); }

Define handleDragLeaveColumn: function(e){ e.currentTarget.classList.remove('drag-over'); }

Define handleDropColumn: function(e){ e.preventDefault(); e.currentTarget.classList.remove('drag-over'); const id = e.dataTransfer.getData('text/plain'); const card = document.querySelector(`.card[data-id="${id}"]`); if(card){ const columnBody = e.currentTarget.querySelector('.column-body'); columnBody.appendChild(card); updateCounts(); } }

Need to attach dragover, dragleave, drop listeners to each column body.

Now CSS:

:root {
   --bg-color: #fff;
   --text-color: #222;
   --header-bg: #f0f0f0;
   --column-bg: #fafafa;
   --card-bg: #fff;
   --border-color: #ccc;
   --priority-low: #4caf50;
   --priority-medium: #ff9800;
   --priority-high: #f44336;
   --delete-btn-color: #777;
}
.dark {
   --bg-color: #222;
   --text-color: #eee;
   --header-bg: #333;
   --column-bg: #2c2c2c;
   --card-bg: #333;
   --border-color: #555;
   --priority-low: #81c784;
   --priority-medium: #ffb74d;
   --priority-high: #e57373;
   --delete-btn-color: #ccc;
}

body { margin:0; font-family: sans-serif; background: var(--bg-color); color: var(--text-color); }

header { display:flex; flex-wrap:wrap; gap:10px; padding:10px; background: var(--header-bg); align-items:center; }

#search { flex:1; min-width:150px; padding:5px; }

button { cursor:pointer; padding:6px 12px; }

.board { display:flex; gap:10px; padding:10px; }

.column { flex:1 1 200px; background: var(--column-bg); border-radius:4px; display:flex; flex-direction:column; }

.column-header { padding:8px; background: var(--header-bg); border-bottom:1px solid var(--border-color); font-weight:bold; display:flex; justify-content:space-between; align-items:center; }

.column-body { flex:1; overflow:auto; padding:5px; }

.card { background: var(--card-bg); border:1px solid var(--border-color); border-radius:4px; margin-bottom:8px; padding:8px; position:relative; }

.priority-badge { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }

.delete-btn { position:absolute; top:4px; right:4px; background:none; border:none; font-size:1.2em; color:var(--delete-btn-color); }

.card-title { margin-top:4px; word-break:break-word; }

.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:1000; }

.modal { background:var(--card-bg); padding:20px; border-radius:8px; width:300px; max-width:90%; }

.hidden { display:none; }

Now JS: define functions and init.

We'll need to call updateCounts after initial population and after each add/move/delete.

Search: input event listener.

Theme toggle: button.

Alright.

Now produce final HTML code inside a single fenced block with ```html.

Check for any missing things: ensure we don't use storage. All good.

Test logic: after moving card, we need to ensure that its dataset still correct; we don't change column attribute. That's fine.

Potential issue: When dragging, we set dataTransfer.setData with card id as string. In drop we find card by data-id attribute. Ensure we set data-id on card element as string.

Now produce final answer.