Gemma 4 31B

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Kanban Board</title>
    <style>
        :root {
            --bg-color: #f4f7f6;
            --column-bg: #ebedef;
            --text-color: #333;
            --card-bg: #ffffff;
            --primary-color: #4a90e2;
            --primary-hover: #357abd;
            --border-color: #ccc;
            --shadow: 0 2px 5px rgba(0,0,0,0.1);
            --transition: all 0.3s ease;
        }

        [data-theme="dark"] {
            --bg-color: #1a1a1a;
            --column-bg: #2d2d2d;
            --text-color: #e0e0e0;
            --card-bg: #3d3d3d;
            --primary-color: #6eb4f7;
            --primary-hover: #8ec3ff;
            --border-color: #444;
            --shadow: 0 4px 8px rgba(0,0,0,0.4);
        }

        * { box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            transition: background-color 0.3s ease, color 0.3s ease;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        /* Header & Controls */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
            background-color: var(--card-bg);
            box-shadow: var(--shadow);
            z-index: 10;
        }

        .controls {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .search-input {
            padding: 0.5rem 1rem;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background: var(--bg-color);
            color: var(--text-color);
            width: 200px;
        }

        .btn {
            padding: 0.6rem 1.2rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition);
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }

        .btn-primary:hover { background-color: var(--primary-hover); }

        .btn-toggle {
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-color);
        }

        /* Kanban Layout */
        .board {
            display: flex;
            gap: 1.5rem;
            padding: 2rem;
            flex: 1;
            overflow-x: auto;
            align-items: flex-start;
        }

        .column {
            background-color: var(--column-bg);
            width: 320px;
            min-width: 300px;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            max-height: calc(100vh - 120px);
            border: 2px solid transparent;
            transition: border-color 0.2s ease;
        }

        .column.drag-over {
            border-color: var(--primary-color);
            background-color: rgba(74, 144, 226, 0.1);
        }

        .column-header {
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            font-size: 1.1rem;
        }

        .count-badge {
            background: var(--border-color);
            color: var(--text-color);
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
        }

        .cards-container {
            padding: 0.75rem;
            flex: 1;
            overflow-y: auto;
            min-height: 100px;
        }

        /* Card Style */
        .card {
            background-color: var(--card-bg);
            border-radius: 6px;
            padding: 1rem;
            margin-bottom: 0.75rem;
            box-shadow: var(--shadow);
            cursor: grab;
            position: relative;
            transition: transform 0.1s ease;
            animation: fadeIn 0.3s ease;
        }

        .card:active { cursor: grabbing; }
        .card.dragging { opacity: 0.5; transform: scale(0.95); }

        .card-title {
            font-weight: 500;
            margin-bottom: 0.75rem;
            display: block;
            word-wrap: break-word;
        }

        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .priority-badge {
            font-size: 0.7rem;
            text-transform: uppercase;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: bold;
            color: white;
        }

        .priority-low { background-color: #2ecc71; }
        .priority-medium { background-color: #f1c40f; color: #333; }
        .priority-high { background-color: #e74c3c; }

        .btn-delete {
            background: none;
            border: none;
            color: #e74c3c;
            cursor: pointer;
            font-size: 0.8rem;
            opacity: 0.6;
            transition: opacity 0.2s;
        }

        .btn-delete:hover { opacity: 1; }

        /* Modal */
        .modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }

        .modal {
            background: var(--card-bg);
            padding: 2rem;
            border-radius: 8px;
            width: 400px;
            max-width: 90%;
            box-shadow: var(--shadow);
        }

        .form-group {
            margin-bottom: 1rem;
            display: flex;
            flex-direction: column;
        }

        .form-group label { margin-bottom: 0.5rem; font-weight: 600; }
        .form-group input, .form-group select {
            padding: 0.6rem;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background: var(--bg-color);
            color: var(--text-color);
        }

        .modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.5rem;
            margin-top: 1.5rem;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .board { flex-direction: column; align-items: center; }
            .column { width: 100%; }
            .search-input { width: 120px; }
        }
    </style>
</head>
<body>

    <header>
        <h1 style="margin: 0; font-size: 1.5rem;">Kanban Board</h1>
        <div class="controls">
            <input type="text" id="searchField" class="search-input" placeholder="Search tasks...">
            <button id="themeToggle" class="btn btn-toggle">🌙 Dark Mode</button>
            <button id="addCardBtn" class="btn btn-primary">+ Add Task</button>
        </div>
    </header>

    <main class="board" id="board">
        <!-- Columns will be rendered here -->
    </main>

    <!-- Modal Form -->
    <div class="modal-overlay" id="modalOverlay">
        <div class="modal">
            <h2>Add New Task</h2>
            <div class="form-group">
                <label for="taskTitle">Title *</label>
                <input type="text" id="taskTitle" placeholder="e.g. Fix login bug">
            </div>
            <div class="form-group">
                <label for="taskPriority">Priority</label>
                <select id="taskPriority">
                    <option value="low">Low</option>
                    <option value="medium" selected>Medium</option>
                    <option value="high">High</option>
                </select>
            </div>
            <div class="form-group">
                <label for="taskStatus">Column</label>
                <select id="taskStatus">
                    <option value="todo">To Do</option>
                    <option value="progress">In Progress</option>
                    <option value="done">Done</option>
                </select>
            </div>
            <div class="modal-actions">
                <button id="cancelBtn" class="btn btn-toggle">Cancel</button>
                <button id="saveBtn" class="btn btn-primary">Save Task</button>
            </div>
        </div>
    </div>

    <script>
        // --- State Management ---
        let state = {
            theme: 'light',
            filter: '',
            cards: [
                { id: 1, title: 'Design system audit', priority: 'high', status: 'todo' },
                { id: 2, title: 'User interview synthesis', priority: 'medium', status: 'todo' },
                { id: 3, title: 'Implement dark mode', priority: 'low', status: 'progress' },
                { id: 4, title: 'Refactor API layer', priority: 'high', status: 'progress' },
                { id: 5, title: 'Set up CI/CD pipeline', priority: 'medium', status: 'done' },
                { id: 6, title: 'Initial project setup', priority: 'low', status: 'done' },
            ]
        };

        const COLUMNS = [
            { id: 'todo', title: 'To Do' },
            { id: 'progress', title: 'In Progress' },
            { id: 'done', title: 'Done' }
        ];

        // --- DOM Elements ---
        const boardEl = document.getElementById('board');
        const searchField = document.getElementById('searchField');
        const themeToggle = document.getElementById('themeToggle');
        const addCardBtn = document.getElementById('addCardBtn');
        const modalOverlay = document.getElementById('modalOverlay');
        const cancelBtn = document.getElementById('cancelBtn');
        const saveBtn = document.getElementById('saveBtn');

        // --- Core Functions ---

        function render() {
            boardEl.innerHTML = '';
            
            COLUMNS.forEach(col => {
                const colCards = state.cards.filter(c => 
                    c.status === col.id && 
                    c.title.toLowerCase().includes(state.filter.toLowerCase())
                );

                const colEl = document.createElement('div');
                colEl.className = 'column';
                colEl.dataset.status = col.id;
                colEl.innerHTML = `
                    <div class="column-header">
                        <span>${col.title}</span>
                        <span class="count-badge">${colCards.length}</span>
                    </div>
                    <div class="cards-container" id="container-${col.id}"></div>
                `;

                const container = colEl.querySelector('.cards-container');
                
                colCards.forEach(card => {
                    const cardEl = document.createElement('div');
                    cardEl.className = 'card';
                    cardEl.draggable = true;
                    cardEl.dataset.id = card.id;
                    cardEl.innerHTML = `
                        <span class="card-title">${card.title}</span>
                        <div class="card-footer">
                            <span class="priority-badge priority-${card.priority}">${card.priority}</span>
                            <button class="btn-delete" onclick="deleteCard(${card.id})">Delete</button>
                        </div>
                    `;
                    
                    cardEl.addEventListener('dragstart', handleDragStart);
                    cardEl.addEventListener('dragend', handleDragEnd);
                    container.appendChild(cardEl);
                });

                // Drag and Drop Column Listeners
                colEl.addEventListener('dragover', handleDragOver);
                colEl.addEventListener('dragleave', handleDragLeave);
                colEl.addEventListener('drop', handleDrop);

                boardEl.appendChild(colEl);
            });
        }

        // --- Event Handlers ---

        function handleDragStart(e) {
            e.target.classList.add('dragging');
            e.dataTransfer.setData('text/plain', e.target.dataset.id);
        }

        function handleDragEnd(e) {
            e.target.classList.remove('dragging');
        }

        function handleDragOver(e) {
            e.preventDefault();
            e.currentTarget.classList.add('drag-over');
        }

        function handleDragLeave(e) {
            e.currentTarget.classList.remove('drag-over');
        }

        function handleDrop(e) {
            e.preventDefault();
            const colEl = e.currentTarget;
            colEl.classList.remove('drag-over');
            
            const cardId = parseInt(e.dataTransfer.getData('text/plain'));
            const newStatus = colEl.dataset.status;
            
            const card = state.cards.find(c => c.id === cardId);
            if (card) {
                card.status = newStatus;
                render();
            }
        }

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

        function toggleTheme() {
            state.theme = state.theme === 'light' ? 'dark' : 'light';
            document.body.setAttribute('data-theme', state.theme);
            themeToggle.innerText = state.theme === 'light' ? '🌙 Dark Mode' : '☀️ Light Mode';
        }

        function openModal() {
            modalOverlay.style.display = 'flex';
        }

        function closeModal() {
            modalOverlay.style.display = 'none';
            document.getElementById('taskTitle').value = '';
        }

        function saveTask() {
            const title = document.getElementById('taskTitle').value.trim();
            const priority = document.getElementById('taskPriority').value;
            const status = document.getElementById('taskStatus').value;

            if (!title) return alert('Please enter a title');

            const newCard = {
                id: Date.now(),
                title,
                priority,
                status
            };

            state.cards.push(newCard);
            closeModal();
            render();
        }

        // --- Initial Setup ---

        searchField.addEventListener('input', (e) => {
            state.filter = e.target.value;
            render();
        });

        themeToggle.addEventListener('click', toggleTheme);
        addCardBtn.addEventListener('click', openModal);
        cancelBtn.addEventListener('click', closeModal);
        saveBtn.addEventListener('click', saveTask);

        // Start the app
        render();
    </script>
</body>
</html>