Ministral 3 14B 2512
by Mistralreasoning defaultClean
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">×</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>