Models 44

Ministral 3 14B 2512

by Mistralreasoning defaultClean
Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time
38.7 s
Cost
$0.0010
Output tokens
4,617
Spent thinking
0 tokens
Speed
120.2 tok/s
Console errors
0
First token after
298 ms
First visible text after
298 ms
Prompt tokens
502
Code size
21.3 KB
Finish reason
stop
Served by
Mistral
Model id
mistralai/ministral-14b-2512
Reasoning sent
model default
Max output
209,715 tokens
Generated
Nov 13, 2026

What it was asked

The prompt
Build an interactive Kanban board in vanilla HTML, CSS and JavaScript (no framework, no library). Requirements: - Three columns: "To do", "In progress", "Done", each showing its card count. - Pre-populate the board with 6 realistic cards spread across the columns so the first screenshot looks alive. - Each card has a title and a priority (low / medium / high) shown as a colored badge. - Add a card through a small modal form (title required), and delete a card with a button on it. - Drag and drop cards between columns with the mouse, with a clear visual drop indicator. - A search field that filters cards live by title. - A light / dark theme toggle. - State lives in memory only (no storage APIs).
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 668 lines

<!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: #f5f5f5;
            --card-bg: #ffffff;
            --text-color: #333333;
            --primary-color: #4285f4;
            --secondary-color: #34a853;
            --danger-color: #ea4335;
            --border-color: #e0e0e0;
            --shadow-color: rgba(0, 0, 0, 0.1);
            --modal-bg: rgba(0, 0, 0, 0.5);
        }

        .dark {
            --bg-color: #202124;
            --card-bg: #303134;
            --text-color: #e8eaed;
            --primary-color: #8ab4f8;
            --secondary-color: #81c995;
            --danger-color: #f28b82;
            --border-color: #5f6368;
            --shadow-color: rgba(0, 0, 0, 0.3);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            transition: background-color 0.3s, color 0.3s;
        }

        body {
            font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .search-container {
            flex: 1;
            min-width: 200px;
        }

        #search {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 16px;
        }

        .theme-toggle {
            background: none;
            border: none;
            cursor: pointer;
            padding: 5px;
            border-radius: 4px;
            color: var(--text-color);
        }

        .add-card-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-left: 10px;
        }

        .kanban-board {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            padding-bottom: 20px;
        }

        .column {
            min-width: 300px;
            flex-shrink: 0;
        }

        .column-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background-color: var(--card-bg);
            border-radius: 8px 8px 0 0;
            margin-bottom: 15px;
            border: 1px solid var(--border-color);
        }

        .column-title {
            font-weight: bold;
            font-size: 18px;
        }

        .column-count {
            background-color: var(--primary-color);
            color: white;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 14px;
        }

        .cards-container {
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 0 0 8px 8px;
            padding: 15px;
            min-height: 100px;
        }

        .card {
            background-color: white;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 1px 3px var(--shadow-color);
            cursor: grab;
            position: relative;
            display: flex;
            flex-direction: column;
        }

        .card.dragging {
            opacity: 0.5;
            transform: scale(1.05);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .card-title {
            font-weight: bold;
            font-size: 16px;
            flex: 1;
            margin-right: 10px;
        }

        .priority-badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            min-width: 60px;
        }

        .priority-low {
            background-color: #e8f5e9;
            color: #2e7d32;
        }

        .priority-medium {
            background-color: #fff3e0;
            color: #f57c00;
        }

        .priority-high {
            background-color: #ffebee;
            color: #c62828;
        }

        .delete-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--danger-color);
            font-size: 18px;
            padding: 0 5px;
        }

        .drop-indicator {
            border: 2px dashed var(--primary-color);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .drop-indicator.visible {
            opacity: 1;
        }

        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--modal-bg);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .modal {
            background-color: var(--card-bg);
            border-radius: 8px;
            padding: 20px;
            width: 100%;
            max-width: 500px;
            border: 1px solid var(--border-color);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .modal-title {
            font-size: 18px;
            font-weight: bold;
        }

        .close-modal {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 20px;
            color: var(--text-color);
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 16px;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .cancel-btn {
            background-color: var(--border-color);
            color: var(--text-color);
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
        }

        .submit-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
        }

        @media (max-width: 768px) {
            .kanban-board {
                flex-direction: column;
            }

            .column {
                min-width: auto;
            }

            .header {
                flex-direction: column;
                align-items: flex-start;
            }

            .search-container {
                width: 100%;
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 10px;
            }

            .container {
                padding: 0 5px;
            }

            .column {
                min-width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="search-container">
                <input type="text" id="search" placeholder="Search cards...">
            </div>
            <button class="add-card-btn" id="addCardBtn">Add Card</button>
            <button class="theme-toggle" id="themeToggle">🌓</button>
        </div>

        <div class="kanban-board" id="kanbanBoard">
            <div class="column">
                <div class="column-header">
                    <div class="column-title">To do</div>
                    <div class="column-count" id="todoCount">0</div>
                </div>
                <div class="cards-container" id="todoColumn">
                    <!-- Cards will be added here -->
                </div>
            </div>

            <div class="column">
                <div class="column-header">
                    <div class="column-title">In progress</div>
                    <div class="column-count" id="progressCount">0</div>
                </div>
                <div class="cards-container" id="progressColumn">
                    <!-- Cards will be added here -->
                </div>
            </div>

            <div class="column">
                <div class="column-header">
                    <div class="column-title">Done</div>
                    <div class="column-count" id="doneCount">0</div>
                </div>
                <div class="cards-container" id="doneColumn">
                    <!-- Cards will be added here -->
                </div>
            </div>
        </div>
    </div>

    <div class="modal-overlay" id="modalOverlay">
        <div class="modal">
            <div class="modal-header">
                <div class="modal-title">Add New Card</div>
                <button class="close-modal" id="closeModal">&times;</button>
            </div>
            <form id="cardForm">
                <div class="form-group">
                    <label for="cardTitle">Title*</label>
                    <input type="text" id="cardTitle" required>
                </div>
                <div class="form-group">
                    <label for="cardPriority">Priority</label>
                    <select id="cardPriority">
                        <option value="low">Low</option>
                        <option value="medium" selected>Medium</option>
                        <option value="high">High</option>
                    </select>
                </div>
                <div class="modal-footer">
                    <button type="button" class="cancel-btn" id="cancelBtn">Cancel</button>
                    <button type="submit" class="submit-btn">Add Card</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // DOM elements
            const kanbanBoard = document.getElementById('kanbanBoard');
            const todoColumn = document.getElementById('todoColumn');
            const progressColumn = document.getElementById('progressColumn');
            const doneColumn = document.getElementById('doneColumn');
            const todoCount = document.getElementById('todoCount');
            const progressCount = document.getElementById('progressCount');
            const doneCount = document.getElementById('doneCount');
            const searchInput = document.getElementById('search');
            const addCardBtn = document.getElementById('addCardBtn');
            const modalOverlay = document.getElementById('modalOverlay');
            const cardForm = document.getElementById('cardForm');
            const closeModal = document.getElementById('closeModal');
            const cancelBtn = document.getElementById('cancelBtn');
            const themeToggle = document.getElementById('themeToggle');

            // State
            let cards = [];
            let draggedCard = null;
            let currentTheme = 'light';

            // Initialize the board with sample data
            function initBoard() {
                cards = [
                    { id: 1, title: 'Design homepage layout', priority: 'high', column: 'todo' },
                    { id: 2, title: 'Implement user authentication', priority: 'medium', column: 'todo' },
                    { id: 3, title: 'Create API documentation', priority: 'low', column: 'progress' },
                    { id: 4, title: 'Fix mobile responsiveness', priority: 'high', column: 'progress' },
                    { id: 5, title: 'Write unit tests', priority: 'medium', column: 'done' },
                    { id: 6, title: 'Set up CI/CD pipeline', priority: 'low', column: 'done' }
                ];

                renderCards();
                updateCounts();
            }

            // Render all cards to the DOM
            function renderCards() {
                // Clear all columns
                todoColumn.innerHTML = '';
                progressColumn.innerHTML = '';
                doneColumn.innerHTML = '';

                // Filter cards based on search input
                const searchTerm = searchInput.value.toLowerCase();
                const filteredCards = cards.filter(card =>
                    card.title.toLowerCase().includes(searchTerm)
                );

                // Render filtered cards
                filteredCards.forEach(card => {
                    const cardElement = createCardElement(card);
                    const column = document.getElementById(`${card.column}Column`);
                    column.appendChild(cardElement);
                });
            }

            // Create a card element
            function createCardElement(card) {
                const cardElement = document.createElement('div');
                cardElement.className = 'card';
                cardElement.draggable = true;
                cardElement.dataset.id = card.id;
                cardElement.dataset.column = card.column;

                cardElement.innerHTML = `
                    <div class="card-header">
                        <div class="card-title">${card.title}</div>
                        <div class="priority-badge priority-${card.priority}">
                            ${card.priority.charAt(0).toUpperCase() + card.priority.slice(1)}
                        </div>
                        <button class="delete-btn" data-id="${card.id}">×</button>
                    </div>
                `;

                // Add event listeners
                cardElement.addEventListener('dragstart', handleDragStart);
                cardElement.addEventListener('dragover', handleDragOver);
                cardElement.addEventListener('dragleave', handleDragLeave);
                cardElement.addEventListener('drop', handleDrop);
                cardElement.addEventListener('dragend', handleDragEnd);

                // Add delete button event listener
                const deleteBtn = cardElement.querySelector('.delete-btn');
                deleteBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    deleteCard(card.id);
                });

                return cardElement;
            }

            // Update column counts
            function updateCounts() {
                const searchTerm = searchInput.value.toLowerCase();
                const filteredCards = cards.filter(card =>
                    card.title.toLowerCase().includes(searchTerm)
                );

                todoCount.textContent = filteredCards.filter(card => card.column === 'todo').length;
                progressCount.textContent = filteredCards.filter(card => card.column === 'progress').length;
                doneCount.textContent = filteredCards.filter(card => card.column === 'done').length;
            }

            // Handle drag start
            function handleDragStart(e) {
                draggedCard = this;
                setTimeout(() => {
                    this.classList.add('dragging');
                }, 0);
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setData('text/html', this.innerHTML);
            }

            // Handle drag over
            function handleDragOver(e) {
                e.preventDefault();
                e.dataTransfer.dropEffect = 'move';

                const column = this.closest('.column');
                const columnId = column.id.replace('Column', '');

                // Show drop indicator
                const dropIndicator = this.querySelector('.drop-indicator');
                if (!dropIndicator) {
                    const newDropIndicator = document.createElement('div');
                    newDropIndicator.className = 'drop-indicator';
                    this.insertBefore(newDropIndicator, this.firstChild);
                } else {
                    dropIndicator.classList.add('visible');
                }
            }

            // Handle drag leave
            function handleDragLeave(e) {
                e.preventDefault();
                const dropIndicator = this.querySelector('.drop-indicator');
                if (dropIndicator) {
                    dropIndicator.classList.remove('visible');
                }
            }

            // Handle drop
            function handleDrop(e) {
                e.preventDefault();
                const column = this.closest('.column');
                const columnId = column.id.replace('Column', '');

                // Hide drop indicator
                const dropIndicator = this.querySelector('.drop-indicator');
                if (dropIndicator) {
                    dropIndicator.classList.remove('visible');
                    dropIndicator.remove();
                }

                // Move card to new column
                const cardId = parseInt(draggedCard.dataset.id);
                const cardIndex = cards.findIndex(card => card.id === cardId);
                if (cardIndex !== -1) {
                    cards[cardIndex].column = columnId;
                    renderCards();
                    updateCounts();
                }
            }

            // Handle drag end
            function handleDragEnd(e) {
                this.classList.remove('dragging');
                draggedCard = null;
            }

            // Delete a card
            function deleteCard(cardId) {
                cards = cards.filter(card => card.id !== cardId);
                renderCards();
                updateCounts();
            }

            // Add a new card
            function addCard(title, priority) {
                const newCard = {
                    id: Date.now(),
                    title: title.trim(),
                    priority: priority,
                    column: 'todo'
                };

                cards.push(newCard);
                renderCards();
                updateCounts();
                closeModalForm();
            }

            // Show modal form
            function showModalForm() {
                modalOverlay.style.display = 'flex';
                cardForm.reset();
                document.getElementById('cardTitle').focus();
            }

            // Close modal form
            function closeModalForm() {
                modalOverlay.style.display = 'none';
            }

            // Toggle theme
            function toggleTheme() {
                currentTheme = currentTheme === 'light' ? 'dark' : 'light';
                document.body.classList.toggle('dark', currentTheme === 'dark');
                themeToggle.textContent = currentTheme === 'light' ? '🌙' : '☀️';
            }

            // Event listeners
            addCardBtn.addEventListener('click', showModalForm);
            closeModal.addEventListener('click', closeModalForm);
            cancelBtn.addEventListener('click', closeModalForm);

            cardForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const title = document.getElementById('cardTitle').value;
                const priority = document.getElementById('cardPriority').value;

                if (title) {
                    addCard(title, priority);
                }
            });

            searchInput.addEventListener('input', function() {
                renderCards();
                updateCounts();
            });

            themeToggle.addEventListener('click', toggleTheme);

            // Initialize the board
            initBoard();

            // Auto-start demo mode
            setTimeout(() => {
                const startMessage = document.createElement('div');
                startMessage.style.position = 'fixed';
                startMessage.style.bottom = '20px';
                startMessage.style.left = '50%';
                startMessage.style.transform = 'translateX(-50%)';
                startMessage.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
                startMessage.style.color = 'white';
                startMessage.style.padding = '10px 20px';
                startMessage.style.borderRadius = '4px';
                startMessage.style.zIndex = '100';
                startMessage.style.fontSize = '14px';
                startMessage.textContent = 'Click or press a key to start';
                document.body.appendChild(startMessage);

                document.addEventListener('click', function handleClick() {
                    startMessage.remove();
                    document.removeEventListener('click', handleClick);
                }, { once: true });
            }, 1000);
        });
    </script>
</body>
</html>