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>Minimalist Kanban</title>
    <style>
        :root {
            --bg-color: #f4f7f6;
            --text-color: #333;
            --card-bg: #fff;
            --col-bg: #ebedef;
            --border-color: #ddd;
            --primary: #4a90e2;
            --low: #2ecc71;
            --medium: #f1c40f;
            --high: #e74c3c;
        }
        [data-theme="dark"] {
            --bg-color: #1a1a1a;
            --text-color: #e0e0e0;
            --card-bg: #2d2d2d;
            --col-bg: #3d3d3d;
            --border-color: #555;
        }

        body { font-family: 'Segoe UI', Tahoma, sans-serif; background: var(--bg-color); color: var(--text-color); margin: 0; padding: 20px; transition: background 0.3s; }
        
        header { display: flex; justify-content: space-between; align-items: center; max-width: 1000px; margin: 0 auto 20px; }
        
        .controls { display: flex; gap: 10px; align-items: center; }
        
        #board { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; align-items: start; }
        
        .column { background: var(--col-bg); padding: 15px; border-radius: 8px; min-height: 400px; transition: background 0.3s; }
        .column h2 { margin-top: 0; font-size: 1.1rem; display: flex; justify-content: space-between; }
        
        .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; border-left: 4px solid transparent; }
        .card.dragging { opacity: 0.5; }
        .card[data-priority="low"] { border-left-color: var(--low); }
        .card[data-priority="medium"] { border-left-color: var(--medium); }
        .card[data-priority="high"] { border-left-color: var(--high); }
        
        .badge { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; font-weight: bold; }
        
        .delete-btn { position: absolute; top: 5px; right: 5px; background: none; border: none; cursor: pointer; color: var(--text-color); opacity: 0.5; }
        
        /* Modal */
        .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; }
        
        .btn { padding: 8px 16px; border-radius: 4px; border: none; cursor: pointer; background: var(--primary); color: white; }
        
        input, select { width: 100%; padding: 8px; margin: 10px 0; box-sizing: border-box; }
        
        .drag-over { background: rgba(74, 144, 226, 0.2); }
    </style>
</head>
<body>

<header>
    <h1>Kanban</h1>
    <div class="controls">
        <input type="text" id="search" placeholder="Search tasks...">
        <button class="btn" onclick="openModal()">+ Add</button>
        <button class="btn" onclick="toggleTheme()">Theme</button>
    </div>
</header>

<div id="board">
    <div class="column" data-status="todo" ondragover="allowDrop(event)" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)">
        <h2>To do <span class="count">0</span></h2>
        <div class="cards-container"></div>
    </div>
    <div class="column" data-status="inprogress" ondragover="allowDrop(event)" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)">
        <h2>In Progress <span class="count">0</span></h2>
        <div class="cards-container"></div>
    </div>
    <div class="column" data-status="done" ondragover="allowDrop(event)" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(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="Task title..." required>
        <select id="taskPriority">
            <option value="low">Low</option>
            <option value="medium">Medium</option>
            <option value="high">High</option>
        </select>
        <button class="btn" onclick="addCard()">Save</button>
        <button class="btn" style="background:#888" onclick="closeModal()">Cancel</button>
    </div>
</div>

<script>
    let cards = [
        { id: 1, title: 'Design System', status: 'todo', priority: 'high' },
        { id: 2, title: 'API Integration', status: 'todo', priority: 'medium' },
        { id: 3, title: 'Fix Header Bug', status: 'inprogress', priority: 'high' },
        { id: 4, title: 'User Auth', status: 'inprogress', priority: 'medium' },
        { id: 5, title: 'Deploy v1', status: 'done', priority: 'low' },
        { id: 6, title: 'Documentation', status: 'done', priority: 'low' }
    ];

    function render() {
        const searchTerm = document.getElementById('search').value.toLowerCase();
        document.querySelectorAll('.cards-container').forEach(c => c.innerHTML = '');
        
        const counts = { todo: 0, inprogress: 0, done: 0 };

        cards.forEach(card => {
            if (card.title.toLowerCase().includes(searchTerm)) {
                counts[card.status]++;
                const col = document.querySelector(`.column[data-status="${card.status}"] .cards-container`);
                const el = document.createElement('div');
                el.className = 'card';
                el.draggable = true;
                el.dataset.id = card.id;
                el.dataset.priority = card.priority;
                el.ondragstart = (e) => { e.dataTransfer.setData('text/plain', card.id); el.classList.add('dragging'); };
                el.ondragend = () => el.classList.remove('dragging');
                el.innerHTML = `
                    <button class="delete-btn" onclick="deleteCard(${card.id})">✕</button>
                    <strong>${card.title}</strong>
                    <br><span class="badge" style="background:${getPriorityColor(card.priority)}">${card.priority}</span>
                `;
                col.appendChild(el);
            }
        });

        document.querySelectorAll('.column').forEach(col => {
            const status = col.dataset.status;
            col.querySelector('.count').innerText = counts[status] || 0;
        });
    }

    function getPriorityColor(p) {
        if (p === 'high') return '#e74c3c';
        if (p === 'medium') return '#f1c40f';
        return '#2ecc71';
    }

    // Drag and Drop
    function allowDrop(e) { e.preventDefault(); }
    function dragEnter(e) { if(e.target.classList.contains('column')) e.target.classList.add('drag-over'); }
    function dragLeave(e) { if(e.target.classList.contains('column')) e.target.classList.remove('drag-over'); }
    
    function drop(e) {
        e.preventDefault();
        const col = e.target.closest('.column');
        col.classList.remove('drag-over');
        const id = parseInt(e.dataTransfer.getData('text/plain'));
        const newStatus = col.dataset.status;
        cards = cards.map(c => c.id === id ? {...c, status: newStatus} : c);
        render();
    }

    // Modal
    function openModal() { document.getElementById('modal').style.display = 'flex'; }
    function closeModal() { document.getElementById('modal').style.display = 'none'; }
    
    function addCard() {
        const title = document.getElementById('taskTitle').value;
        const priority = document.getElementById('taskPriority').value;
        if (!title) return alert('Title required');
        cards.push({ id: Date.now(), title, status: 'todo', priority });
        closeModal();
        document.getElementById('taskTitle').value = '';
        render();
    }

    function deleteCard(id) {
        cards = cards.filter(c => c.id !== id);
        render();
    }

    function toggleTheme() {
        document.body.dataset.theme = document.body.dataset.theme === 'dark' ? 'light' : 'dark';
    }

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