Gemini 3.1 Flash Lite

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kanban Pro</title>
    <style>
        :root { --bg: #f4f7f6; --card: #fff; --text: #333; --border: #ddd; --primary: #4a90e2; }
        .dark { --bg: #1a1a1a; --card: #2d2d2d; --text: #eee; --border: #444; --primary: #357abd; }
        body { font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); margin: 0; transition: background 0.3s; }
        header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: var(--card); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .board { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; padding: 2rem; align-items: start; }
        .column { background: rgba(0,0,0,0.05); border-radius: 8px; padding: 1rem; min-height: 500px; display: flex; flex-direction: column; gap: 1rem; }
        .column h2 { margin-top: 0; font-size: 1.1rem; display: flex; justify-content: space-between; }
        .card { background: var(--card); padding: 1rem; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); cursor: grab; border-left: 4px solid var(--primary); }
        .badge { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; margin-right: 5px; }
        .priority-high { background: #ff4d4d; color: white; }
        .priority-medium { background: #ffa500; color: white; }
        .priority-low { background: #2ecc71; color: white; }
        .controls { display: flex; gap: 10px; }
        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; }
        .modal-content { background: var(--card); padding: 2rem; border-radius: 8px; width: 300px; }
        .drop-zone { border: 2px dashed var(--primary); opacity: 0.5; }
        input, select, button { padding: 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--card); color: var(--text); }
        .del-btn { color: red; cursor: pointer; float: right; border: none; background: none; }
    </style>
</head>
<body>

<header>
    <h1>Kanban</h1>
    <div class="controls">
        <input type="text" id="search" placeholder="Filter cards...">
        <button onclick="openModal()">+ Add Card</button>
        <button onclick="toggleTheme()">🌓</button>
    </div>
</header>

<div class="board" id="board">
    <div class="column" id="todo" ondrop="drop(event)" ondragover="allowDrop(event)">
        <h2>To Do <span class="count">0</span></h2>
    </div>
    <div class="column" id="in-progress" ondrop="drop(event)" ondragover="allowDrop(event)">
        <h2>In Progress <span class="count">0</span></h2>
    </div>
    <div class="column" id="done" ondrop="drop(event)" ondragover="allowDrop(event)">
        <h2>Done <span class="count">0</span></h2>
    </div>
</div>

<div id="modal" class="modal">
    <div class="modal-content">
        <h3>New Card</h3>
        <input id="cardTitle" placeholder="Title" required><br><br>
        <select id="cardPriority"><option>low</option><option>medium</option><option>high</option></select><br><br>
        <button onclick="addCard()">Save</button>
        <button onclick="closeModal()">Cancel</button>
    </div>
</div>

<script>
    let state = [
        {id: 1, title: 'Learn Vanilla JS', col: 'todo', priority: 'high'},
        {id: 2, title: 'Build Kanban', col: 'in-progress', priority: 'medium'},
        {id: 3, title: 'Fix CSS bug', col: 'todo', priority: 'low'},
        {id: 4, title: 'Write Tests', col: 'in-progress', priority: 'high'},
        {id: 5, title: 'Deploy App', col: 'done', priority: 'low'},
        {id: 6, title: 'Coffee break', col: 'done', priority: 'medium'}
    ];

    function render() {
        const query = document.getElementById('search').value.toLowerCase();
        document.querySelectorAll('.column').forEach(c => c.querySelectorAll('.card').forEach(x => x.remove()));
        
        state.forEach(item => {
            if (!item.title.toLowerCase().includes(query)) return;
            const el = document.createElement('div');
            el.className = 'card';
            el.draggable = true;
            el.id = 'c' + item.id;
            el.ondragstart = e => e.dataTransfer.setData('text', item.id);
            el.innerHTML = `<button class="del-btn" onclick="deleteCard(${item.id})">✕</button><span class="badge priority-${item.priority}">${item.priority}</span><br><strong>${item.title}</strong>`;
            document.getElementById(item.col).appendChild(el);
        });
        ['todo', 'in-progress', 'done'].forEach(id => {
            document.querySelector(`#${id} .count`).innerText = state.filter(s => s.col === id).length;
        });
    }

    function allowDrop(e) { e.preventDefault(); }
    function drop(e) {
        const id = parseInt(e.dataTransfer.getData('text'));
        const col = e.target.closest('.column').id;
        state = state.map(s => s.id === id ? {...s, col} : s);
        render();
    }
    
    function addCard() {
        const title = document.getElementById('cardTitle').value;
        if(!title) return;
        state.push({id: Date.now(), title, col: 'todo', priority: document.getElementById('cardPriority').value});
        closeModal();
        render();
    }
    
    function deleteCard(id) { state = state.filter(s => s.id !== id); render(); }
    function openModal() { document.getElementById('modal').style.display = 'flex'; }
    function closeModal() { document.getElementById('modal').style.display = 'none'; }
    function toggleTheme() { document.body.classList.toggle('dark'); }
    
    document.getElementById('search').addEventListener('input', render);
    render();
</script>

</body>
</html>