Models 44

GPT-6.1 Terra

by OpenAIReasoningClean
Open in new window

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

How it went

Total time
1 min 7 s
Cost
$0.030
Output tokens
5,952
Spent thinking
35 tokens
Speed
92.6 tok/s
Console errors
0
First token after
2.6 s
First visible text after
4.1 s
Prompt tokens
493
Code size
18.9 KB
Finish reason
stop
Served by
OpenAI
Model id
openai/gpt-6.1-terra
Reasoning sent
{"effort":"low"}
Max output
128,000 tokens
Generated
Nov 12, 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 · 179 lines

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flowboard — Team workspace</title>
<style>
  :root{color-scheme:light;--bg:#f6f7fb;--surface:#fff;--column:#eff1f6;--text:#202536;--muted:#858c9d;--border:#e6e8ef;--purple:#7065e9;--purple-soft:#eeedff;--shadow:0 4px 15px rgba(27,35,65,.045);--input:#f8f9fc}
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;transition:background .2s,color .2s}
  body.dark{color-scheme:dark;--bg:#171922;--surface:#242733;--column:#1e202b;--text:#f1f2f8;--muted:#a0a5b6;--border:#363a49;--purple:#a39aff;--purple-soft:#39345d;--shadow:0 4px 15px rgba(0,0,0,.12);--input:#1e202b}
  button,input,select{font:inherit}
  button{cursor:pointer}
  .shell{min-height:100vh;display:flex}
  .sidebar{width:238px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);padding:29px 17px;display:flex;flex-direction:column}
  .brand{display:flex;align-items:center;gap:10px;padding:0 9px;font-size:19px;font-weight:750;letter-spacing:-.6px}
  .brand-mark{width:31px;height:31px;border-radius:9px;background:#7165e8;display:grid;place-items:center;color:#fff}
  .brand-mark svg{width:18px}
  .workspace-label,.section-label{font-size:10px;font-weight:750;letter-spacing:1.15px;color:#a1a7b5;margin:50px 10px 14px}
  .nav-item{height:42px;display:flex;align-items:center;gap:11px;padding:0 12px;color:var(--muted);font-weight:600;border-radius:8px;margin-bottom:5px}
  .nav-item.active{color:var(--purple);background:var(--purple-soft)}
  .nav-item svg,.theme-button svg,.search svg,.icon-button svg{width:18px;height:18px;flex:none}
  .nav-item .small-count{margin-left:auto;background:var(--surface);font-size:11px;padding:3px 6px;border-radius:5px}
  .section-label{margin-top:35px}
  .project-dot{width:9px;height:9px;border-radius:3px;background:#9389ee}
  .project-dot.green{background:#79c9a4}
  .sidebar-bottom{margin-top:auto;border-top:1px solid var(--border);padding:20px 9px 0;display:flex;align-items:center;gap:10px}
  .avatar{display:grid;place-items:center;border-radius:50%;font-weight:750;flex:none}
  .avatar.profile{width:35px;height:35px;background:#e9d8cd;color:#805a4e;font-size:11px}
  .profile-text strong{display:block;font-size:12px}.profile-text span{font-size:11px;color:var(--muted)}
  main{flex:1;min-width:0}
  .topbar{height:76px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 48px;background:var(--surface)}
  .breadcrumb{color:var(--muted);font-size:13px}.breadcrumb strong{color:var(--text);font-weight:600}.breadcrumb span{padding:0 11px;color:#c6c9d2}
  .top-actions{display:flex;align-items:center;gap:15px}
  .theme-button{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted)}
  .top-avatar{width:34px;height:34px;background:#e9d8cd;color:#805a4e;font-size:11px}
  .content{padding:42px 48px;max-width:1500px;margin:auto}
  .eyebrow{display:flex;align-items:center;gap:8px;color:var(--purple);font-size:11px;font-weight:750;letter-spacing:1px;text-transform:uppercase}
  .eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--purple)}
  .heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:12px 0 30px}
  h1{font-size:30px;letter-spacing:-1.1px;margin:0 0 8px;line-height:1.1}
  .subtitle{color:var(--muted);margin:0;font-size:13px}
  .primary{border:0;border-radius:9px;background:#7065e9;color:#fff;font-weight:650;padding:11px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 10px rgba(112,101,233,.2)}
  .primary:hover{background:#6256d9}
  .plus{font-size:19px;font-weight:400;line-height:14px}
  .toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
  .view-tabs{display:flex;gap:25px;height:39px;align-items:flex-start;border-bottom:1px solid var(--border);flex:1}
  .tab{height:39px;color:var(--muted);font-size:12px;font-weight:650;display:flex;align-items:flex-start;gap:7px;padding-top:4px}
  .tab.active{color:var(--purple);border-bottom:2px solid var(--purple)}
  .tab svg{width:15px;height:15px}
  .search{position:relative;width:220px;flex:none}
  .search svg{position:absolute;left:12px;top:10px;color:var(--muted);width:16px;height:16px}
  .search input{width:100%;height:37px;padding:0 12px 0 36px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);outline:none;font-size:12px}
  .search input:focus{border-color:var(--purple)}
  .search input::placeholder{color:#a8adba}
  .board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
  .column{background:var(--column);border:1px solid transparent;border-radius:12px;padding:15px;min-height:390px;transition:border-color .15s,background .15s}
  .column.drag-over{border-color:var(--purple);background:var(--purple-soft)}
  .column-header{display:flex;align-items:center;gap:9px;margin:0 1px 16px}
  .status-dot{width:9px;height:9px;border-radius:50%;background:#a4adbd}
  .column[data-column="progress"] .status-dot{background:#efa955}
  .column[data-column="done"] .status-dot{background:#72cba5}
  .column-header h2{font-size:13px;margin:0;font-weight:750}
  .count{font-size:11px;color:var(--muted);background:var(--surface);padding:3px 7px;border-radius:5px;font-weight:700}
  .column-add{margin-left:auto;border:0;background:none;color:var(--muted);font-size:20px;line-height:1;padding:0 3px}
  .cards{display:flex;flex-direction:column;gap:11px;min-height:80px}
  .card{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:15px;box-shadow:var(--shadow);cursor:grab;position:relative}
  .card:active{cursor:grabbing}.card.dragging{opacity:.4}
  .card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .card-id{font-size:10px;font-weight:700;color:#a7adba;letter-spacing:.3px}
  .delete{border:0;background:transparent;color:#b4b8c3;padding:2px;line-height:0;border-radius:4px}
  .delete:hover{color:#e46d76;background:#fff0f0}
  .delete svg{width:15px;height:15px}
  .card h3{font-size:13px;line-height:1.45;margin:0 0 14px;font-weight:700;letter-spacing:-.1px;overflow-wrap:anywhere}
  .card-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:12px}
  .badge{font-size:10px;font-weight:700;padding:5px 8px;border-radius:5px;text-transform:capitalize}
  .badge.high{background:#fff0ed;color:#e07d6c}.badge.medium{background:#fff6e5;color:#c99642}.badge.low{background:#eaf7f0;color:#5ba986}
  .card-meta{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:10px}
  .mini-avatar{width:23px;height:23px;font-size:9px}
  .add-card{width:100%;border:1px dashed #d4d8e2;border-radius:8px;background:transparent;color:var(--muted);padding:10px;margin-top:12px;text-align:left;font-size:12px;font-weight:600}
  .add-card:hover{color:var(--purple);border-color:var(--purple)}
  .empty{font-size:12px;color:var(--muted);padding:10px 3px}
  .drop-marker{height:4px;border-radius:4px;background:var(--purple);margin:-4px 0}
  .footer-note{text-align:center;color:#a7adba;font-size:11px;margin-top:27px}
  .modal-backdrop{position:fixed;inset:0;background:rgba(18,21,35,.48);display:grid;place-items:center;padding:20px;z-index:5}
  .modal-backdrop[hidden]{display:none}
  .modal{width:min(100%,420px);background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:25px;box-shadow:0 20px 70px rgba(0,0,0,.2)}
  .modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}.modal h2{font-size:20px;margin:0;letter-spacing:-.5px}
  .close{border:0;background:transparent;color:var(--muted);font-size:25px;line-height:1}
  .modal p{color:var(--muted);font-size:12px;margin:0 0 23px}
  label{display:block;font-size:12px;font-weight:700;margin:16px 0 7px}
  .modal input,.modal select{width:100%;height:42px;border:1px solid var(--border);border-radius:8px;background:var(--input);color:var(--text);padding:0 11px;outline:none}
  .modal input:focus,.modal select:focus{border-color:var(--purple)}
  .modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:25px}
  .secondary{border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);padding:10px 15px;font-weight:600}
  @media(max-width:900px){.sidebar{width:65px;padding:25px 10px}.brand{padding:0;justify-content:center}.brand-name,.workspace-label,.section-label,.nav-item span,.sidebar-bottom .profile-text{display:none}.nav-item{justify-content:center;padding:0}.sidebar nav{margin-top:45px}.sidebar-bottom{justify-content:center;padding:18px 0 0}.content{padding:35px 25px}.topbar{padding:0 25px}}
  @media(max-width:650px){.sidebar{display:none}.topbar{height:62px;padding:0 18px}.content{padding:28px 16px}.heading-row{align-items:flex-start}h1{font-size:25px}.heading-row .primary{font-size:12px;white-space:nowrap}.toolbar{align-items:stretch;flex-direction:column}.search{width:100%}.board{grid-template-columns:1fr;gap:13px}.column{min-height:0}.footer-note{margin-bottom:20px}}
</style>
</head>
<body>
<div class="shell">
  <aside class="sidebar">
    <div class="brand"><div class="brand-mark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 6h14M5 12h9M5 18h5"/></svg></div><span class="brand-name">flowboard.</span></div>
    <div class="workspace-label">WORKSPACE</div>
    <nav>
      <div class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M3 11 12 4l9 7v9H3z"/><path d="M9 20v-6h6v6"/></svg><span>Overview</span></div>
      <div class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="4" width="7" height="16" rx="1"/><rect x="14" y="4" width="7" height="10" rx="1"/></svg><span>Board</span><span class="small-count" id="nav-count">6</span></div>
      <div class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M8 3v4m8-4v4"/></svg><span>Calendar</span></div>
    </nav>
    <div class="section-label">YOUR PROJECTS</div>
    <div class="nav-item"><i class="project-dot"></i><span>Product launch</span></div>
    <div class="nav-item"><i class="project-dot green"></i><span>Design system</span></div>
    <div class="sidebar-bottom"><div class="avatar profile">JD</div><div class="profile-text"><strong>Jordan Davis</strong><span>Team workspace</span></div></div>
  </aside>
  <main>
    <header class="topbar"><div class="breadcrumb">Workspace <span>/</span> <strong>Product launch</strong></div><div class="top-actions"><button class="theme-button" id="theme" aria-label="Toggle dark mode" title="Toggle theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M20.5 14.5A8.5 8.5 0 0 1 9.5 3.5 8.5 8.5 0 1 0 20.5 14.5Z"/></svg></button><div class="avatar top-avatar">JD</div></div></header>
    <div class="content">
      <div class="eyebrow">Team workspace</div>
      <div class="heading-row"><div><h1>Product launch</h1><p class="subtitle">A little progress every day adds up to big things.</p></div><button class="primary" id="add-main"><span class="plus">+</span> Add task</button></div>
      <div class="toolbar"><div class="view-tabs"><div class="tab active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="7" height="16" rx="1"/><rect x="14" y="4" width="7" height="10" rx="1"/></svg> Board view</div><div class="tab">All tasks</div></div><div class="search"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 4 4"/></svg><input id="search" type="search" placeholder="Search tasks..." aria-label="Search tasks"></div></div>
      <div class="board" id="board"></div>
      <div class="footer-note">Drag and drop tasks to update their status</div>
    </div>
  </main>
</div>
<div class="modal-backdrop" id="modal" hidden>
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
    <div class="modal-head"><h2 id="modal-title">Add a task</h2><button class="close" id="close" type="button" aria-label="Close">&times;</button></div>
    <p>Keep the momentum going. What's next?</p>
    <form id="form">
      <label for="title">Task title</label><input id="title" required maxlength="120" placeholder="e.g. Review project brief">
      <label for="priority">Priority</label><select id="priority"><option value="medium">Medium</option><option value="low">Low</option><option value="high">High</option></select>
      <label for="status">Status</label><select id="status"><option value="todo">To do</option><option value="progress">In progress</option><option value="done">Done</option></select>
      <div class="modal-actions"><button class="secondary" id="cancel" type="button">Cancel</button><button class="primary" type="submit">Create task</button></div>
    </form>
  </div>
</div>
<script>
const columns=[{id:'todo',name:'To do'},{id:'progress',name:'In progress'},{id:'done',name:'Done'}];
let tasks=[
 {id:101,title:'Define project goals and scope',priority:'high',status:'todo',person:'JD',color:'#e9d8cd',ink:'#805a4e'},
 {id:102,title:'Research competitor experiences',priority:'medium',status:'todo',person:'AM',color:'#e5e5fb',ink:'#7065a8'},
 {id:103,title:'Create wireframes for onboarding',priority:'high',status:'progress',person:'SK',color:'#d9eee8',ink:'#4d8c7c'},
 {id:104,title:'Design the landing page',priority:'medium',status:'progress',person:'JD',color:'#e9d8cd',ink:'#805a4e'},
 {id:105,title:'Kick off with the team',priority:'low',status:'done',person:'AM',color:'#e5e5fb',ink:'#7065a8'},
 {id:106,title:'Set up project workspace',priority:'low',status:'done',person:'SK',color:'#d9eee8',ink:'#4d8c7c'}
];
let nextId=107, dragged=null;
const board=document.getElementById('board'), search=document.getElementById('search'), modal=document.getElementById('modal'), form=document.getElementById('form');
const escapeHTML=s=>s.replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
const trash='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M10 4h4M6 7l1 13h10l1-13M10 11v5m4-5v5"/></svg>';
function render(){
 const query=search.value.trim().toLowerCase();
 board.innerHTML=columns.map(col=>{
   const all=tasks.filter(t=>t.status===col.id), visible=all.filter(t=>t.title.toLowerCase().includes(query));
   return `<section class="column" data-column="${col.id}"><div class="column-header"><span class="status-dot"></span><h2>${col.name}</h2><span class="count">${all.length}</span><button class="column-add" data-add="${col.id}" aria-label="Add task to ${col.name}">+</button></div><div class="cards">${visible.map(t=>`<article class="card" draggable="true" data-id="${t.id}"><div class="card-top"><span class="card-id">TASK-${t.id}</span><button class="delete" data-delete="${t.id}" aria-label="Delete ${escapeHTML(t.title)}" title="Delete task">${trash}</button></div><h3>${escapeHTML(t.title)}</h3><div class="card-bottom"><span class="badge ${t.priority}">${t.priority}</span><div class="card-meta"><span class="avatar mini-avatar" style="background:${t.color};color:${t.ink}">${t.person}</span></div></div></article>`).join('')}${visible.length===0&&query?'<div class="empty">No matching tasks</div>':''}</div><button class="add-card" data-add="${col.id}">+ &nbsp;Add a task</button></section>`;
 }).join('');
 document.getElementById('nav-count').textContent=tasks.length;
}
function openModal(status='todo'){form.reset();document.getElementById('status').value=status;modal.hidden=false;setTimeout(()=>document.getElementById('title').focus(),0)}
function closeModal(){modal.hidden=true}
document.getElementById('add-main').addEventListener('click',()=>openModal());
document.getElementById('close').addEventListener('click',closeModal);
document.getElementById('cancel').addEventListener('click',closeModal);
modal.addEventListener('click',e=>{if(e.target===modal)closeModal()});
document.addEventListener('keydown',e=>{if(e.key==='Escape'&&!modal.hidden)closeModal()});
form.addEventListener('submit',e=>{e.preventDefault();const title=document.getElementById('title').value.trim();if(!title){document.getElementById('title').focus();return}tasks.push({id:nextId++,title,priority:document.getElementById('priority').value,status:document.getElementById('status').value,person:'JD',color:'#e9d8cd',ink:'#805a4e'});closeModal();render()});
board.addEventListener('click',e=>{const add=e.target.closest('[data-add]'),del=e.target.closest('[data-delete]');if(add)openModal(add.dataset.add);if(del){tasks=tasks.filter(t=>t.id!==Number(del.dataset.delete));render()}});
search.addEventListener('input',render);
document.getElementById('theme').addEventListener('click',()=>{document.body.classList.toggle('dark');document.getElementById('theme').setAttribute('aria-label',document.body.classList.contains('dark')?'Switch to light mode':'Switch to dark mode')});
board.addEventListener('dragstart',e=>{const card=e.target.closest('.card');if(!card)return;dragged=Number(card.dataset.id);e.dataTransfer.effectAllowed='move';e.dataTransfer.setData('text/plain',String(dragged));requestAnimationFrame(()=>card.classList.add('dragging'))});
function clearIndicators(){board.querySelectorAll('.drop-marker').forEach(el=>el.remove());board.querySelectorAll('.drag-over').forEach(el=>el.classList.remove('drag-over'))}
board.addEventListener('dragover',e=>{const col=e.target.closest('.column');if(!col||dragged===null)return;e.preventDefault();e.dataTransfer.dropEffect='move';clearIndicators();col.classList.add('drag-over');const list=col.querySelector('.cards');const cards=[...list.querySelectorAll('.card:not(.dragging)')];const before=cards.find(c=>e.clientY<c.getBoundingClientRect().top+c.getBoundingClientRect().height/2);const marker=document.createElement('div');marker.className='drop-marker';list.insertBefore(marker,before||null)});
board.addEventListener('drop',e=>{const col=e.target.closest('.column');if(!col||dragged===null)return;e.preventDefault();const marker=col.querySelector('.drop-marker');const next=marker&&marker.nextElementSibling;const nextCard=next&&next.closest('.card');const index=tasks.findIndex(t=>t.id===dragged);if(index!==-1){const [task]=tasks.splice(index,1);task.status=col.dataset.column;const nextIndex=nextCard?tasks.findIndex(t=>t.id===Number(nextCard.dataset.id)):-1;if(nextIndex>=0)tasks.splice(nextIndex,0,task);else tasks.push(task)}dragged=null;render()});
board.addEventListener('dragend',()=>{dragged=null;clearIndicators();board.querySelectorAll('.dragging').forEach(el=>el.classList.remove('dragging'))});
render();
</script>
</body>
</html>
Reasoning trace (35 tokens)
**Planning dashboard implementation**

I need to produce some code for a polished dashboard design. I'll implement features like a drag indicator, modal, search, and a theme that adjusts responsively. For the icons, I’m considering using inline SVG or unicode. I’ll also make sure to have six cards displayed on the dashboard. It seems like I have a clear direction to go in, which is helpful! Let’s make this dashboard user-friendly and visually appealing!