Nemotron 3 Nano Omni (free)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kanban Board Demo</title>
<style>
:root {
    --bg-light: #f5f5f5;
    --bg-dark: #212121;
    --text-light: #212121;
    --text-dark: #f5f5f5;
    --card-bg: #ffffff;
    --card-bg-dark: #2c2c2c;
    --badge-low: #a5d6a7;
    --badge-med: #ffd66e;
    --badge-high: #f47b7b;
}
body {
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background: var(--bg-light);
    color: var(--text-light);
    transition: background 0.3s, color 0.3s;
}
body.dark {
    background: var(--bg-dark);
    color: var(--text-dark);
}
.board {
    display:flex;
    width:100%;
    max-width:1280px;
    margin:20px auto;
    padding:0 10px;
    box-sizing:border-box;
    gap:10px;
}
.column {
    display:flex;
    flex-direction:column;
    width:calc(33.33% - 14px);
    padding:10px;
    box-sizing:border-box;
    background: var(--card-bg);
    border-radius:4px;
}
body.dark .column {
    background: var(--card-bg-dark);
}
.column h2 {
    margin:0 0 5px;
    font-size:1.2em;
}
.count {
    margin-left:5px;
    font-weight:bold;
}
.cards {
    flex:1;
    overflow-y:auto;
}
.card {
    background: var(--card-bg);
    margin-bottom:5px;
    padding:5px 8px;
    border-radius:4px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
body.dark .card {
    background: var(--card-bg-dark);
}
.title {
    flex:1;
    margin:0;
}
.badge {
    padding:2px 6px;
    border-radius:3px;
    font-size:0.8em;
    color:#fff;
}
.badge.low { background: var(--badge-low); }
.badge.medium { background: var(--badge-med); }
.badge.high { background: var(--badge-high); }
.delete {
    background:transparent;
    border:none;
    color:#777;
    font-size:1.2em;
    cursor:pointer;
}
.controls {
    display:flex;
    align-items:center;
    padding:10px;
    background: var(--bg-light);
    gap:10px;
}
body.dark .controls {
    background: var(--bg-dark);
}
#search {
    flex:1;
    padding:5px;
}
#themeToggle {
    padding:5px 10px;
}
#overlay {
    position:absolute;
    top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.6);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5em;
    cursor:pointer;
}
</style>
</head>
<body>
<div id="overlay">Click or press a key to start</div>

<div class="board">
    <div class="column" id="toDo">
        <h2>To do <span class="count">0</span></h2>
        <div class="cards"></div>
    </div>
    <div class="column" id="inProgress">
        <h2>In progress <span class="count">0</span></h2>
        <div class="cards"></div>
    </div>
    <div class="column" id="done">
        <h2>Done <span class="count">0</span></h2>
        <div class="cards"></div>
    </div>
</div>

<div class="controls">
    <input type="text" id="search" placeholder="Search cards...">
    <button id="themeToggle">Toggle Dark/Light</button>
</div>

<!-- Modal -->
<div id="modal" class="modal">
    <div class="modal-content">
        <h3>Add Card</h3>
        <input type="text" id="cardTitle" required placeholder="Card title">
        <button id="addCardBtn">Add</button>
        <span id="closeModal">&times;</span>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const overlay = document.getElementById('overlay');
    const columns = ['toDo','inProgress','done'];
    const cards = []; // store card objects

    // ----- Theme toggle -----
    const themeBtn = document.getElementById('themeToggle');
    themeBtn.addEventListener('click', () => {
        document.body.classList.toggle('dark');
    });

    // ----- Overlay hide -----
    const hideOverlay = () => {
        overlay.style.display = 'none';
    };
    overlay.addEventListener('click', hideOverlay);
    document.addEventListener('keydown', e => {
        if (e.key === 'Enter' || e.key === ' ') hideOverlay();
    });

    // ----- Card data -----
    function generateSampleCards() {
        const sample = [
            {id:'card-1', title:'Implement login page', col:'toDo', prio:'medium'},
            {id:'card-2', title:'Fix bug in API', col:'inProgress', prio:'high'},
            {id:'card-3', title:'Design new UI', col:'toDo', prio:'low'},
            {id:'card-4', title:'Write unit tests', col:'done', prio:'low'},
            {id:'card-5', title:'Review pull request', col:'inProgress', prio:'medium'},
            {id:'card-6', title:'Deploy to staging', col:'done', prio:'high'}
        ];
        sample.forEach(s => {
            const card = document.createElement('div');
            card.className = 'card';
            card.draggable = true;
            card.id = s.id;
            card.dataset.col = s.col;
            const titleSpan = document.createElement('span');
            titleSpan.className = 'title';
            titleSpan.textContent = s.title;
            const badge = document.createElement('span');
            badge.className = 'badge ' + s.prio;
            badge.textContent = s.prio.charAt(0).toUpperCase() + s.prio.slice(1);
            const delBtn = document.createElement('button');
            delBtn.className = 'delete';
            delBtn.textContent = '✕';
            delBtn.addEventListener('click', e => {
                e.stopPropagation();
                card.remove();
                cards.splice(cards.findIndex(c=>c.id===s.id),1);
                updateCounts();
            });
            const content = document.createElement('div');
            content.appendChild(titleSpan);
            content.appendChild(badge);
            const right = document.createElement('div');
            right.appendChild(delBtn);
            content.appendChild(right);
            card.appendChild(content);
            document.getElementById(s.col + ' .cards').appendChild(card);
            cards.push({id:s.id, title:s.title, priority:s.prio, element:card});
        });
        updateCounts();
    }

    // ----- Counts -----
    function updateCounts() {
        columns.forEach(col => {
            const cntSpan = document.querySelector('#' + col + ' .count');
            const count = document.querySelector('#' + col + ' .cards > .card').length;
            cntSpan.textContent = count;
        });
    }

    // ----- Add Card -----
    const modal = document.getElementById('modal');
    const titleInput = document.getElementById('cardTitle');
    const addBtn = document.getElementById('addCardBtn');
    const closeModal = document.getElementById('closeModal');

    addBtn.addEventListener('click', () => {
        const title = titleInput.value.trim();
        if (!title) return;
        const col = 'toDo'; // default column
        const prio = ['low','medium','high'][Math.floor(Math.random()*3)];
        const cardId = 'card-' + Date.now();
        const card = document.createElement('div');
        card.className = 'card';
        card.draggable = true;
        card.id = cardId;
        const titleSpan = document.createElement('span');
        titleSpan.className = 'title';
        titleSpan.textContent = title;
        const badge = document.createElement('span');
        badge.className = 'badge ' + prio;
        badge.textContent = prio;
        const delBtn = document.createElement('button');
        delBtn.className = 'delete';
        delBtn.textContent = '✕';
        delBtn.addEventListener('click', e => {
            e.stopPropagation();
            card.remove();
            cards.splice(cards.findIndex(c=>c.id===cardId),1);
            updateCounts();
        });
        const content = document.createElement('div');
        content.appendChild(titleSpan);
        content.appendChild(badge);
        const right = document.createElement('div');
        right.appendChild(delBtn);
        content.appendChild(right);
        card.appendChild(content);
        document.getElementById(col + ' .cards').appendChild(card);
        cards.push({id:cardId, title, priority:prio, element:card});
        titleInput.value = '';
        updateCounts();
    });

    closeModal.addEventListener('click', () => {
        modal.style.display = 'none';
    });
    window.addEventListener('click', e => {
        if (e.target === modal) modal.style.display = 'none';
    });

    // ----- Search filter -----
    const searchInput = document.getElementById('search');
    searchInput.addEventListener('input', () => {
        const term = searchInput.value.toLowerCase();
        document.querySelectorAll('.card').forEach(card => {
            const title = card.querySelector('.title').textContent.toLowerCase();
            card.style.display = title.includes(term) ? '' : 'none';
        });
    });

    // ----- Drag and Drop -----
    function allowDrop(e) { e.preventDefault(); }
    columns.forEach(col => {
        const colEl = document.getElementById(col);
        colEl.addEventListener('dragover', allowDrop);
        colEl.addEventListener('drop', e => {
            e.preventDefault();
            const cardId = e.dataTransfer.getData('text/plain');
            const cardEl = document.getElementById(cardId);
            if (!cardEl) return;
            // remove from old column
            const oldCol = cardEl.dataset.col;
            if (oldCol && document.getElementById(oldCol)) {
                document.getElementById(oldCol + ' .cards').removeChild(cardEl);
            }
            // add to new column
            const newCol = col;
            document.getElementById(newCol + ' .cards').appendChild(cardEl);
            cardEl.dataset.col = newCol;
            // update counts
            updateCounts();
        });
    });

    // ----- Initial render -----
    generateSampleCards();
});
</script>
</body>
</html>