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-bg: #fff; --text: #333; --accent: #4a90e2; --border: #ddd; }
        .dark { --bg: #1a1a1a; --card-bg: #2d2d2d; --text: #eee; --accent: #61dafb; --border: #444; }
        body { font-family: sans-serif; background: var(--bg); color: var(--text); transition: background 0.3s; margin: 0; padding: 20px; }
        header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .controls { display: flex; gap: 10px; }
        .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); border-radius: 8px; padding: 15px; min-height: 400px; transition: background 0.2s; }
        .column.drag-over { background: rgba(74, 144, 226, 0.2); }
        .card { background: var(--card-bg); padding: 15px; margin-bottom: 10px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); cursor: grab; position: relative; }
        .card.dragging { opacity: 0.5; }
        .badge { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; }
        .p-high { background: #ff4d4d; color: white; } .p-medium { background: #ffa500; color: white; } .p-low { background: #2ecc71; color: white; }
        .delete-btn { position: absolute; top: 10px; right: 10px; cursor: pointer; border: none; background: none; color: #888; }
        #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-bg); padding: 20px; border-radius: 8px; width: 300px; }
        input, select, button { width: 100%; padding: 8px; margin: 5px 0; box-sizing: border-box; }
        .indicator { text-align: center; font-size: 0.8rem; margin-top: 20px; color: #888; }
    </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" data-status="todo" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)">
        <h3>To do (<span id="count-todo">0</span>)</h3>
        <div id="list-todo"></div>
    </div>
    <div class="column" data-status="progress" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)">
        <h3>In progress (<span id="count-progress">0</span>)</h3>
        <div id="list-progress"></div>
    </div>
    <div class="column" data-status="done" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)">
        <h3>Done (<span id="count-done">0</span>)</h3>
        <div id="list-done"></div>
    </div>
</div>

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

<div class="indicator">Click or press a key to start demo interaction</div>

<script>
    let tasks = [
        {id:1, title:'Design Mockups', status:'todo', priority:'high'},
        {id:2, title:'Setup Repo', status:'todo', priority:'low'},
        {id:3, title:'API Integration', status:'progress', priority:'medium'},
        {id:4, title:'Write Docs', status:'progress', priority:'high'},
        {id:5, title:'Unit Tests', status:'done', priority:'medium'},
        {id:6, title:'Refactor', status:'done', priority:'low'}
    ];

    function render() {
        const query = document.getElementById('search').value.toLowerCase();
        ['todo', 'progress', 'done'].forEach(status => {
            const list = document.getElementById(`list-${status}`);
            const filtered = tasks.filter(t => t.status === status && t.title.toLowerCase().includes(query));
            list.innerHTML = filtered.map(t => `
                <div class="card" draggable="true" ondragstart="drag(event)" id="card-${t.id}">
                    <button class="delete-btn" onclick="del(${t.id})">✕</button>
                    <strong>${t.title}</strong><br>
                    <span class="badge p-${t.priority}">${t.priority}</span>
                </div>
            `).join('');
            document.getElementById(`count-${status}`).innerText = filtered.length;
        });
    }

    function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); ev.target.classList.add('dragging'); }
    function allowDrop(ev) { ev.preventDefault(); }
    function dragEnter(ev) { if(ev.target.classList.contains('column')) ev.target.classList.add('drag-over'); }
    function dragLeave(ev) { if(ev.target.classList.contains('column')) ev.target.classList.remove('drag-over'); }
    function drop(ev) {
        ev.preventDefault();
        const id = parseInt(ev.dataTransfer.getData("text").split('-')[1]);
        const col = ev.target.closest('.column');
        col.classList.remove('drag-over');
        tasks.find(t => t.id === id).status = col.dataset.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 del(id) { tasks = tasks.filter(t => t.id !== id); render(); }
    function toggleTheme() { document.body.classList.toggle('dark'); }
    function openModal() { document.getElementById('modal').style.display = 'flex'; }
    function closeModal() { document.getElementById('modal').style.display = 'none'; }
    document.getElementById('search').oninput = render;
    render();
    
    // Auto-demo script
    setTimeout(() => {
        const demoIdx = tasks.findIndex(t => t.status === 'todo');
        if(demoIdx > -1) {
            tasks[demoIdx].status = 'progress';
            render();
        }
    }, 2000);
</script>
</body>
</html>