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 Board</title>
    <style>
        :root { --bg: #f4f7f6; --card: #fff; --text: #333; --border: #ddd; --primary: #4a90e2; }
        .dark { --bg: #1a1a1a; --card: #2d2d2d; --text: #e0e0e0; --border: #444; }
        body { font-family: sans-serif; background: var(--bg); color: var(--text); transition: 0.3s; margin: 0; padding: 20px; }
        header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .controls { display: flex; gap: 10px; align-items: center; }
        .board { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
        .column { background: rgba(0,0,0,0.05); padding: 15px; border-radius: 8px; min-height: 500px; }
        .card { background: var(--card); padding: 15px; margin-bottom: 10px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); cursor: grab; border-left: 5px solid var(--primary); }
        .card.dragging { opacity: 0.5; }
        .badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; margin-right: 5px; }
        .high { background: #ffcccc; color: #a00; } .medium { background: #fff3cc; color: #a60; } .low { background: #d4edda; color: #060; }
        .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; }
        .modal-content { background: var(--card); padding: 20px; border-radius: 8px; width: 300px; }
        input, select, button { padding: 8px; margin: 5px 0; width: 100%; box-sizing: border-box; }
        .delete-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="Search tasks...">
        <button onclick="toggleTheme()">Theme</button>
        <button onclick="openModal()">+ Add Task</button>
    </div>
</header>

<div class="board">
    <div class="column" id="todo" ondragover="event.preventDefault()" ondrop="drop(event, 'todo')">
        <h3>To do (<span id="count-todo">0</span>)</h3>
        <div class="tasks"></div>
    </div>
    <div class="column" id="inprogress" ondragover="event.preventDefault()" ondrop="drop(event, 'inprogress')">
        <h3>In progress (<span id="count-inprogress">0</span>)</h3>
        <div class="tasks"></div>
    </div>
    <div class="column" id="done" ondragover="event.preventDefault()" ondrop="drop(event, 'done')">
        <h3>Done (<span id="count-done">0</span>)</h3>
        <div class="tasks"></div>
    </div>
</div>

<div class="modal" id="modal">
    <div class="modal-content">
        <h3>New Task</h3>
        <input type="text" id="taskTitle" placeholder="Task Title">
        <select id="taskPriority"><option>low</option><option>medium</option><option>high</option></select>
        <button onclick="addTask()">Save</button>
        <button onclick="closeModal()">Cancel</button>
    </div>
</div>

<script>
    let tasks = [
        {id:1, title:"Fix UI bug", status:"todo", priority:"high"},
        {id:2, title:"Design System", status:"todo", priority:"medium"},
        {id:3, title:"API Integration", status:"inprogress", priority:"high"},
        {id:4, title:"Write Docs", status:"inprogress", priority:"low"},
        {id:5, title:"Deploy Server", status:"done", priority:"medium"},
        {id:6, title:"Client Meeting", status:"done", priority:"high"}
    ];

    function render() {
        const query = document.getElementById('search').value.toLowerCase();
        ['todo', 'inprogress', 'done'].forEach(status => {
            const container = document.querySelector(`#${status} .tasks`);
            const filtered = tasks.filter(t => t.status === status && t.title.toLowerCase().includes(query));
            container.innerHTML = '';
            filtered.forEach(t => {
                const card = document.createElement('div');
                card.className = 'card';
                card.draggable = true;
                card.id = `card-${t.id}`;
                card.ondragstart = (e) => e.dataTransfer.setData('text', t.id);
                card.innerHTML = `<button class="delete-btn" onclick="deleteTask(${t.id})">✕</button>
                                  <span class="badge ${t.priority}">${t.priority}</span> <strong>${t.title}</strong>`;
                container.appendChild(card);
            });
            document.getElementById(`count-${status}`).innerText = filtered.length;
        });
    }

    function drop(e, status) {
        const id = parseInt(e.dataTransfer.getData('text'));
        tasks.find(t => t.id === id).status = status;
        render();
    }

    function addTask() {
        const title = document.getElementById('taskTitle').value;
        if (!title) return;
        tasks.push({id: Date.now(), title, status: 'todo', priority: document.getElementById('taskPriority').value});
        closeModal();
        render();
    }

    function deleteTask(id) { tasks = tasks.filter(t => t.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').oninput = render;
    render();
</script>
</body>
</html>