Claude Haiku 5.5
by AnthropicReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 30.2 s
- Cost
- $0.0044
- Output tokens
- 8,647
- Spent thinking
- 1,010 tokens
- Speed
- 309.8 tok/s
- Console errors
- 0
- First token after
- 2.3 s
- First visible text after
- 7.2 s
- Prompt tokens
- 745
- Code size
- 18.0 KB
- Finish reason
- stop
- Served by
- Claude Platform on AWS
- Model id
anthropic/claude-haiku-5.5- Reasoning sent
{"effort":"low"}- Max output
- 32,000 tokens
- Generated
- Nov 10, 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 · 648 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kanban Board</title>
<style>
:root {
--bg: #f1f4f9;
--surface: #ffffff;
--col-bg: #e6ebf3;
--text: #1c2433;
--muted: #6b7689;
--border: #d5dce8;
--accent: #4f6bed;
--accent-text: #ffffff;
--card-shadow: 0 1px 2px rgba(20,30,50,.08), 0 2px 6px rgba(20,30,50,.05);
--drop: #4f6bed;
--low: #2f9e6a;
--med: #d98a1b;
--high: #d64545;
--input-bg: #ffffff;
--overlay: rgba(10,14,22,.45);
}
body.dark {
--bg: #0f141c;
--surface: #1a212c;
--col-bg: #141a23;
--text: #e7ecf4;
--muted: #8b96a8;
--border: #2a3343;
--accent: #7b93ff;
--accent-text: #0f141c;
--card-shadow: 0 1px 2px rgba(0,0,0,.4);
--drop: #7b93ff;
--input-bg: #111721;
--overlay: rgba(0,0,0,.6);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
transition: background .2s, color .2s;
overflow-x: hidden;
}
header {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 16px 24px;
border-bottom: 1px solid var(--border);
background: var(--surface);
}
header h1 { font-size: 20px; margin: 0 16px 0 0; font-weight: 700; }
.search {
flex: 1 1 220px;
max-width: 360px;
position: relative;
}
.search input {
width: 100%;
padding: 9px 12px 9px 34px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--input-bg);
color: var(--text);
font: inherit;
font-size: 14px;
}
.search::before {
content: "";
position: absolute;
left: 12px; top: 50%;
width: 12px; height: 12px;
transform: translateY(-60%);
border: 2px solid var(--muted);
border-radius: 50%;
}
.search::after {
content: "";
position: absolute;
left: 22px; top: 50%;
width: 6px; height: 2px;
background: var(--muted);
transform: translate(0,4px) rotate(45deg);
transform-origin: left center;
}
.spacer { flex: 1; }
button {
font: inherit;
cursor: pointer;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
padding: 8px 14px;
font-size: 14px;
transition: background .15s, border-color .15s, transform .05s;
}
button:hover { border-color: var(--accent); }
button:active { transform: scale(.97); }
.btn-primary {
background: var(--accent);
color: var(--accent-text);
border-color: var(--accent);
font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.08); }
main {
padding: 24px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.column {
background: var(--col-bg);
border-radius: 12px;
border: 1px solid var(--border);
display: flex;
flex-direction: column;
min-height: 300px;
min-width: 0;
}
.column-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
font-weight: 700;
font-size: 15px;
}
.col-title { display: flex; align-items: center; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.count {
font-size: 12px;
font-weight: 600;
background: var(--surface);
color: var(--muted);
border: 1px solid var(--border);
border-radius: 999px;
padding: 2px 9px;
min-width: 28px;
text-align: center;
}
.column-body {
padding: 4px 12px 12px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
border-radius: 0 0 12px 12px;
transition: background .15s;
}
.column.over .column-body { background: color-mix(in srgb, var(--drop) 8%, transparent); }
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 12px 10px;
box-shadow: var(--card-shadow);
cursor: grab;
user-select: none;
transition: opacity .15s, transform .15s;
}
.card:active { cursor: grabbing; }
.card.dragging { opacity: .4; transform: rotate(1.5deg); }
.card.hidden { display: none; }
.card-title {
font-size: 14px;
line-height: 1.4;
margin: 0 0 10px;
word-break: break-word;
}
.card-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.badge {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
padding: 3px 8px;
border-radius: 6px;
color: #fff;
}
.badge.low { background: var(--low); }
.badge.medium { background: var(--med); }
.badge.high { background: var(--high); }
.del {
background: transparent;
border: none;
color: var(--muted);
padding: 2px 6px;
font-size: 16px;
line-height: 1;
border-radius: 6px;
}
.del:hover { color: var(--high); background: color-mix(in srgb, var(--high) 12%, transparent); border: none; }
.drop-ph {
height: 56px;
border: 2px dashed var(--drop);
border-radius: 10px;
background: color-mix(in srgb, var(--drop) 10%, transparent);
flex-shrink: 0;
animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .55; } }
.empty {
color: var(--muted);
font-size: 13px;
text-align: center;
padding: 24px 8px;
border: 1px dashed var(--border);
border-radius: 10px;
}
.empty.hide { display: none; }
/* Modal */
.overlay {
position: fixed; inset: 0;
background: var(--overlay);
display: none;
align-items: center;
justify-content: center;
padding: 16px;
z-index: 50;
}
.overlay.open { display: flex; }
.modal {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
width: 100%;
max-width: 420px;
padding: 22px;
box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.modal h2 { margin: 0 0 16px; font-size: 18px; }
label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--muted);
margin: 12px 0 6px;
text-transform: uppercase;
letter-spacing: .04em;
}
input[type=text], select {
width: 100%;
padding: 9px 11px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--input-bg);
color: var(--text);
font: inherit;
font-size: 14px;
}
input:focus, select:focus {
outline: 2px solid var(--accent);
outline-offset: -1px;
}
.error {
color: var(--high);
font-size: 12px;
min-height: 16px;
margin-top: 6px;
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 16px;
}
@media (max-width: 960px) {
main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.column:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
header { padding: 12px 14px; }
header h1 { width: 100%; margin: 0; }
.search { max-width: none; flex: 1 1 100%; order: 3; }
main { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
.column:last-child { grid-column: auto; }
.column { min-height: 0; }
}
</style>
</head>
<body>
<header>
<h1>Kanban Board</h1>
<div class="search">
<input type="search" id="search" placeholder="Search cards by title..." aria-label="Search cards">
</div>
<div class="spacer"></div>
<button id="themeBtn" type="button" aria-label="Toggle theme">Dark mode</button>
<button id="addBtn" class="btn-primary" type="button">+ New card</button>
</header>
<main id="board">
<section class="column" data-status="todo">
<div class="column-header">
<div class="col-title"><span class="dot" style="background:#8b96a8"></span>To do</div>
<span class="count">0</span>
</div>
<div class="column-body"></div>
</section>
<section class="column" data-status="progress">
<div class="column-header">
<div class="col-title"><span class="dot" style="background:#4f6bed"></span>In progress</div>
<span class="count">0</span>
</div>
<div class="column-body"></div>
</section>
<section class="column" data-status="done">
<div class="column-header">
<div class="col-title"><span class="dot" style="background:#2f9e6a"></span>Done</div>
<span class="count">0</span>
</div>
<div class="column-body"></div>
</section>
</main>
<div class="overlay" id="overlay">
<form class="modal" id="form" novalidate>
<h2>New card</h2>
<label for="fTitle">Title</label>
<input type="text" id="fTitle" maxlength="120" placeholder="e.g. Write release notes" autocomplete="off">
<div class="error" id="fError"></div>
<label for="fPriority">Priority</label>
<select id="fPriority">
<option value="low">Low</option>
<option value="medium" selected>Medium</option>
<option value="high">High</option>
</select>
<label for="fStatus">Column</label>
<select id="fStatus">
<option value="todo">To do</option>
<option value="progress">In progress</option>
<option value="done">Done</option>
</select>
<div class="modal-actions">
<button type="button" id="cancelBtn">Cancel</button>
<button type="submit" class="btn-primary">Add card</button>
</div>
</form>
</div>
<script>
(function () {
"use strict";
const STATUSES = ["todo", "progress", "done"];
const PRIORITIES = ["low", "medium", "high"];
let nextId = 1;
// In-memory state only (no storage APIs)
let cards = [
{ id: nextId++, title: "Set up CI pipeline for staging", priority: "high", status: "progress" },
{ id: nextId++, title: "Draft onboarding email sequence", priority: "medium", status: "todo" },
{ id: nextId++, title: "Fix date picker timezone bug", priority: "high", status: "todo" },
{ id: nextId++, title: "Review accessibility audit results", priority: "low", status: "todo" },
{ id: nextId++, title: "Migrate user avatars to CDN", priority: "medium", status: "progress" },
{ id: nextId++, title: "Publish Q3 product changelog", priority: "low", status: "done" }
];
const board = document.getElementById("board");
const search = document.getElementById("search");
const themeBtn = document.getElementById("themeBtn");
const addBtn = document.getElementById("addBtn");
const overlay = document.getElementById("overlay");
const form = document.getElementById("form");
const fTitle = document.getElementById("fTitle");
const fPriority = document.getElementById("fPriority");
const fStatus = document.getElementById("fStatus");
const fError = document.getElementById("fError");
const cancelBtn = document.getElementById("cancelBtn");
const columns = {};
board.querySelectorAll(".column").forEach(col => {
const s = col.dataset.status;
columns[s] = {
el: col,
body: col.querySelector(".column-body"),
count: col.querySelector(".count")
};
});
let dragId = null;
let placeholder = null;
let dropTarget = null; // { status, beforeId }
function makeEmptyNote() {
const d = document.createElement("div");
d.className = "empty";
d.textContent = "No cards here yet";
return d;
}
function createCardEl(card) {
const el = document.createElement("article");
el.className = "card";
el.draggable = true;
el.dataset.id = String(card.id);
const title = document.createElement("p");
title.className = "card-title";
title.textContent = card.title;
const footer = document.createElement("div");
footer.className = "card-footer";
const badge = document.createElement("span");
badge.className = "badge " + card.priority;
badge.textContent = card.priority;
const del = document.createElement("button");
del.type = "button";
del.className = "del";
del.title = "Delete card";
del.setAttribute("aria-label", "Delete card " + card.title);
del.textContent = "\u00D7";
del.draggable = false;
del.addEventListener("click", (e) => {
e.stopPropagation();
deleteCard(card.id);
});
footer.append(badge, del);
el.append(title, footer);
el.addEventListener("dragstart", (e) => {
dragId = card.id;
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("text/plain", String(card.id));
// Defer class change so the drag image is captured correctly
requestAnimationFrame(() => el.classList.add("dragging"));
});
el.addEventListener("dragend", cleanupDrag);
return el;
}
function render() {
const query = search.value.trim().toLowerCase();
STATUSES.forEach(status => {
const col = columns[status];
col.body.innerHTML = "";
const list = cards.filter(c => c.status === status);
let visible = 0;
list.forEach(card => {
const el = createCardEl(card);
const match = !query || card.title.toLowerCase().includes(query);
if (!match) el.classList.add("hidden");
else visible++;
col.body.appendChild(el);
});
const empty = makeEmptyNote();
if (list.length) empty.classList.add("hide");
col.body.appendChild(empty);
col.count.textContent = query
? `${visible} / ${list.length}`
: String(list.length);
});
}
function deleteCard(id) {
cards = cards.filter(c => c.id !== id);
render();
}
function addCard(title, priority, status) {
cards.push({ id: nextId++, title, priority, status });
render();
}
// ----- Drag and drop -----
function getColumnFromEvent(e) {
const colEl = e.target.closest && e.target.closest(".column");
if (!colEl) return null;
return colEl.dataset.status;
}
function removePlaceholder() {
if (placeholder && placeholder.parentNode) placeholder.parentNode.removeChild(placeholder);
}
function cleanupDrag() {
removePlaceholder();
document.querySelectorAll(".column.over").forEach(c => c.classList.remove("over"));
document.querySelectorAll(".card.dragging").forEach(c => c.classList.remove("dragging"));
dragId = null;
dropTarget = null;
}
board.addEventListener("dragover", (e) => {
if (dragId === null) return;
const status = getColumnFromEvent(e);
if (!status) return;
e.preventDefault();
e.dataTransfer.dropEffect = "move";
const col = columns[status];
col.el.classList.add("over");
if (!placeholder) {
placeholder = document.createElement("div");
placeholder.className = "drop-ph";
}
// Find the card we should insert before (ignore the dragged card and hidden cards)
const cardEls = Array.from(col.body.querySelectorAll(".card"))
.filter(el => Number(el.dataset.id) !== dragId);
let before = null;
for (const el of cardEls) {
const r = el.getBoundingClientRect();
if (e.clientY < r.top + r.height / 2) { before = el; break; }
}
const emptyNote = col.body.querySelector(".empty");
const reference = before || emptyNote || null;
if (placeholder.parentNode !== col.body || placeholder.nextSibling !== reference) {
col.body.insertBefore(placeholder, reference);
}
if (emptyNote) emptyNote.classList.add("hide");
dropTarget = {
status,
beforeId: before ? Number(before.dataset.id) : null
};
});
board.addEventListener("dragleave", (e) => {
const colEl = e.target.closest && e.target.closest(".column");
if (!colEl) return;
if (e.relatedTarget && colEl.contains(e.relatedTarget)) return;
colEl.classList.remove("over");
});
board.addEventListener("dragover", (e) => {
// Allow drop on the whole board area so the browser doesn't snap back
if (dragId !== null) e.preventDefault();
});
board.addEventListener("drop", (e) => {
e.preventDefault();
if (dragId === null || !dropTarget) { cleanupDrag(); return; }
const idx = cards.findIndex(c => c.id === dragId);
if (idx === -1) { cleanupDrag(); return; }
const [moved] = cards.splice(idx, 1);
moved.status = dropTarget.status;
if (dropTarget.beforeId !== null) {
const targetIdx = cards.findIndex(c => c.id === dropTarget.beforeId);
if (targetIdx === -1) cards.push(moved);
else cards.splice(targetIdx, 0, moved);
} else {
// Append after the last card of that column
let lastIdx = -1;
cards.forEach((c, i) => { if (c.status === moved.status) lastIdx = i; });
cards.splice(lastIdx + 1, 0, moved);
}
cleanupDrag();
render();
});
document.addEventListener("dragend", cleanupDrag);
// ----- Search -----
search.addEventListener("input", render);
// ----- Theme -----
function applyTheme(dark) {
document.body.classList.toggle("dark", dark);
themeBtn.textContent = dark ? "Light mode" : "Dark mode";
}
themeBtn.addEventListener("click", () => {
applyTheme(!document.body.classList.contains("dark"));
});
// ----- Modal -----
function openModal() {
form.reset();
fPriority.value = "medium";
fStatus.value = "todo";
fError.textContent = "";
overlay.classList.add("open");
setTimeout(() => fTitle.focus(), 0);
}
function closeModal() {
overlay.classList.remove("open");
}
addBtn.addEventListener("click", openModal);
cancelBtn.addEventListener("click", closeModal);
overlay.addEventListener("mousedown", (e) => {
if (e.target === overlay) closeModal();
});
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && overlay.classList.contains("open")) closeModal();
});
form.addEventListener("submit", (e) => {
e.preventDefault();
const title = fTitle.value.trim();
if (!title) {
fError.textContent = "Title is required.";
fTitle.focus();
return;
}
const priority = PRIORITIES.includes(fPriority.value) ? fPriority.value : "medium";
const status = STATUSES.includes(fStatus.value) ? fStatus.value : "todo";
addCard(title, priority, status);
closeModal();
});
fTitle.addEventListener("input", () => {
if (fTitle.value.trim()) fError.textContent = "";
});
// ----- Init -----
applyTheme(false);
render();
})();
</script>
</body>
</html>Reasoning trace (1,010 tokens)
I'm weighing how to handle drag and drop: HTML5 drag-and-drop should work fine with a mouse in Chrome, so I'll use that, with a placeholder line that shows where the card will land. I'm settling the drop logic: during dragover I'll find the first card whose midpoint is below the cursor, use that as the insertion index, and show a placeholder there. Storage is off the table, and I'm keeping the console clean. Now I'm setting up the drop indicator as a placeholder element that sits inside the target list and moves with the cursor. On drop, I'll record the target column and the card it should go before, then reorder the state to match. Dragging out of a column should clear the placeholder, and dragend will clean up any leftovers. Next I'm setting up the column headers with a name and card count, and giving each list a minimum height so it stays a usable drop target. For dragging, the cards get marked draggable with the card id stored on dragstart, and a dragging class dims the one being moved. Escape will close the add form.