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;
            --text: #333;
            --column-bg: #e2e8f0;
            --card-bg: #fff;
            --primary: #4a90e2;
            --danger: #e74c3c;
            --low: #27ae60;
            --medium: #f39c12;
            --high: #c0392b;
        }

        [data-theme='dark'] {
            --bg: #1a202c;
            --text: #e2e8f0;
            --column-bg: #2d3748;
            --card-bg: #4a5568;
            --primary: #63b3ed;
        }

        body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 20px; transition: 0.3s; }
        
        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 10px; flex-wrap: wrap; }
        
        .board { display: flex; gap: 20px; overflow-x: auto; align-items: flex-start; padding-bottom: 20px; }
        
        .column { background: var(--column-bg); width: 350px; min-width: 300px; padding: 15px; border-radius: 8px; min-height: 500px; display: flex; flex-direction: column; }
        
        .column h2 { font-size: 1.1rem; margin-top: 0; display: flex; justify-content: space-between; }
        
        .card { background: var(--card-bg); padding: 15px; border-radius: 6px; margin-bottom: 10px; cursor: grab; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .card.dragging { opacity: 0.5; }
        .card h3 { margin: 0 0 10px 0; font-size: 1rem; }
        .badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 10px; color: #fff; text-transform: uppercase; }
        .delete-btn { position: absolute; top: 5px; right: 5px; background: none; border: none; cursor: pointer; color: var(--danger); font-weight: bold; }

        .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; }
        .modal.active { display: flex; }
        .modal-content { background: var(--card-bg); padding: 20px; border-radius: 8px; width: 300px; }
        
        input, select, button { width: 100%; padding: 8px; margin: 10px 0; box-sizing: border-box; }
        .btn-primary { background: var(--primary); color: white; border: none; cursor: pointer; }
    </style>
</head>
<body>

<div class="header">
    <h1>Kanban</h1>
    <input type="text" id="search" placeholder="Search tasks..." style="width: 200px">
    <button onclick="document.body.dataset.theme = document.body.dataset.theme === 'dark' ? 'light' : 'dark'">Toggle Theme</button>
    <button class="btn-primary" style="width: auto" onclick="toggleModal(true)">+ Add Task</button>
</div>

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

<div class="modal" id="modal">
    <div class="modal-content">
        <h3>New Task</h3>
        <input type="text" id="taskTitle" placeholder="Title">
        <select id="taskPriority">
            <option value="low">Low</option>
            <option value="medium">Medium</option>
            <option value="high">High</option>
        </select>
        <button class="btn-primary" onclick="addTask()">Save</button>
        <button onclick="toggleModal(false)">Cancel</button>
    </div>
</div>

<script>
    let tasks = [
        {id: 1, title: 'Draft project proposal', status: 'todo', priority: 'high'},
        {id: 2, title: 'Setup CI/CD pipeline', status: 'todo', priority: 'medium'},
        {id: 3, title: 'Design user flow', status: 'inprogress', priority: 'medium'},
        {id: 4, title: 'Research competitors', status: 'inprogress', priority: 'low'},
        {id: 5, title: 'Fix navigation bug', status: 'done', priority: 'high'},
        {id: 6, title: 'Update dependencies', status: 'done', priority: 'low'}
    ];

    function render() {
        const query = document.getElementById('search').value.toLowerCase();
        document.querySelectorAll('.column').forEach(col => {
            const status = col.dataset.status;
            const container = col.querySelector('.cards-container');
            const filtered = tasks.filter(t => t.status === status && t.title.toLowerCase().includes(query));
            
            col.querySelector('.count').textContent = filtered.length;
            container.innerHTML = '';
            
            filtered.forEach(task => {
                const card = document.createElement('div');
                card.className = 'card';
                card.draggable = true;
                card.id = 'task-' + task.id;
                card.ondragstart = (e) => e.dataTransfer.setData('text', task.id);
                card.innerHTML = `
                    <button class="delete-btn" onclick="deleteTask(${task.id})">×</button>
                    <h3>${task.title}</h3>
                    <span class="badge" style="background: var(--${task.priority})">${task.priority}</span>
                `;
                container.appendChild(card);
            });
        });
    }

    function allowDrop(e) { e.preventDefault(); }

    function drop(e) {
        e.preventDefault();
        const id = parseInt(e.dataTransfer.getData('text'));
        const targetStatus = e.target.closest('.column').dataset.status;
        tasks = tasks.map(t => t.id === id ? {...t, status: targetStatus} : t);
        render();
    }

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

    function deleteTask(id) {
        tasks = tasks.filter(t => t.id !== id);
        render();
    }

    function toggleModal(show) { document.getElementById('modal').className = show ? 'modal active' : 'modal'; }

    document.getElementById('search').addEventListener('input', render);
    render();
</script>
</body>
</html>