gpt-oss-120b

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kanban Board Demo</title>
<style>
:root{
  --bg:#fafafa;--text:#111;--card-bg:#fff;--badge-low:#4caf50;
  --badge-med:#ff9800;--badge-high:#f44336;--border:#ddd;
}
[data-theme="dark"]{
  --bg:#2b2b2b;--text:#eee;--card-bg:#3c3c3c;--border:#555;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:sans-serif;background:var(--bg);color:var(--text);
  display:flex;flex-direction:column;height:100vh;overflow:hidden;
}
header{
  padding:0.5rem 1rem;display:flex;align-items:center;gap:1rem;
  background:var(--card-bg);border-bottom:1px solid var(--border);
}
header h1{flex:1;font-size:1.2rem;}
#search{flex:2;padding:0.3rem 0.5rem;}
#themeToggle{cursor:pointer;padding:0.3rem 0.6rem;background:var(--border);border:none;color:inherit;}
main{
  flex:1;display:flex;gap:1rem;padding:1rem;overflow:auto;
}
.column{
  flex:1;min-width:200px;background:var(--card-bg);border:1px solid var(--border);
  border-radius:4px;display:flex;flex-direction:column;
}
.column h2{
  padding:0.5rem; border-bottom:1px solid var(--border);
  font-size:1rem;display:flex;justify-content:space-between;align-items:center;
}
.card-list{
  flex:1;padding:0.5rem;display:flex;flex-direction:column;gap:0.5rem;
}
.card{
  background:var(--bg);border:1px solid var(--border);border-radius:4px;
  padding:0.5rem;cursor:move;display:flex;flex-direction:column;
}
.card .title{font-weight:600;margin-bottom:0.3rem;}
.badge{
  align-self:flex-start;padding:0.1rem 0.4rem;border-radius:3px;
  font-size:0.7rem;color:#fff;
}
.low{background:var(--badge-low);}
.medium{background:var(--badge-med);}
.high{background:var(--badge-high);}
.delete{
  margin-top:0.3rem;align-self:flex-end;background:#e53935;color:#fff;
  border:none;padding:0.2rem 0.5rem;border-radius:3px;cursor:pointer;
}
.drop-indicator{
  height:0;border-top:2px dashed #2196f3;margin:0.2rem 0;
}
.modal-backdrop{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;
  visibility:hidden;opacity:0;transition:opacity .2s;
}
.modal{
  background:var(--card-bg);padding:1rem;border-radius:4px;min-width:260px;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.modal input, .modal select{
  width:100%;margin-top:0.3rem;padding:0.3rem;border:1px solid var(--border);
  border-radius:3px;background:var(--bg);color:var(--text);
}
.modal button{
  margin-top:0.5rem;padding:0.4rem 0.8rem;background:#1976d2;color:#fff;
  border:none;border-radius:3px;cursor:pointer;
}
.modal-backdrop.show{visibility:visible;opacity:1;}
@media(max-width:600px){
  main{flex-direction:column;overflow-y:auto;}
}
</style>
</head>
<body data-theme="light">
<header>
  <h1>Kanban Board</h1>
  <input type="text" id="search" placeholder="Search cards...">
  <button id="addBtn">Add Card</button>
  <button id="themeToggle">Dark</button>
</header>
<main>
  <div class="column" data-status="todo">
    <h2>To Do <span class="count">0</span></h2>
    <div class="card-list" id="todoList"></div>
  </div>
  <div class="column" data-status="inprogress">
    <h2>In Progress <span class="count">0</span></h2>
    <div class="card-list" id="inprogressList"></div>
  </div>
  <div class="column" data-status="done">
    <h2>Done <span class="count">0</span></h2>
    <div class="card-list" id="doneList"></div>
  </div>
</main>

<div class="modal-backdrop" id="modalBackdrop">
  <div class="modal">
    <h3>Add Card</h3>
    <label>Title<input type="text" id="cardTitle"></label>
    <label>Priority
      <select id="cardPriority">
        <option value="low">Low</option>
        <option value="medium">Medium</option>
        <option value="high">High</option>
      </select>
    </label>
    <label>Column
      <select id="cardColumn">
        <option value="todo">To Do</option>
        <option value="inprogress">In Progress</option>
        <option value="done">Done</option>
      </select>
    </label>
    <button id="saveCard">Save</button>
  </div>
</div>

<script>
const state = {
  cards: [
    {id:1,title:"Design landing page",priority:"high",status:"todo"},
    {id:2,title:"Set up database",priority:"medium",status:"inprogress"},
    {id:3,title:"Write unit tests",priority:"low",status:"todo"},
    {id:4,title:"Implement auth",priority:"high",status:"inprogress"},
    {id:5,title:"Deploy to staging",priority:"medium",status:"done"},
    {id:6,title:"Create docs",priority:"low",status:"done"},
  ],
  nextId:7,
  filter:""
};

function render(){
  const lists = {todo: document.getElementById('todoList'), inprogress: document.getElementById('inprogressList'), done: document.getElementById('doneList')};
  Object.keys(lists).forEach(key=>lists[key].innerHTML='');
  const counts = {todo:0,inprogress:0,done:0};
  state.cards.filter(c=>c.title.toLowerCase().includes(state.filter)).forEach(card=>{
    const el = document.createElement('div');
    el.className='card';
    el.draggable=true;
    el.dataset.id=card.id;
    el.innerHTML=`<div class="title">${card.title}</div>
                 <div class="badge ${card.priority}">${card.priority}</div>
                 <button class="delete">Delete</button>`;
    el.addEventListener('dragstart',dragStart);
    el.querySelector('.delete').addEventListener('click',()=>{deleteCard(card.id);});
    lists[card.status].appendChild(el);
    counts[card.status]++;
  });
  document.querySelectorAll('.column').forEach(col=>{
    col.querySelector('.count').textContent=counts[col.dataset.status];
  });
}
function deleteCard(id){
  state.cards = state.cards.filter(c=>c.id!==id);
  render();
}
function addCard(title,priority,status){
  state.cards.push({id:state.nextId++,title,priority,status});
  render();
}
function dragStart(e){
  e.dataTransfer.setData('text/plain', e.target.dataset.id);
}
function allowDrop(e){e.preventDefault();}
function drop(e){
  e.preventDefault();
  const id=parseInt(e.dataTransfer.getData('text/plain'));
  const card=state.cards.find(c=>c.id===id);
  const newStatus=e.currentTarget.closest('.column').dataset.status;
  if(card && card.status!==newStatus){
    card.status=newStatus;
    render();
  }
}
function initDnD(){
  document.querySelectorAll('.card-list').forEach(list=>{
    list.addEventListener('dragover',allowDrop);
    list.addEventListener('drop',drop);
    list.addEventListener('dragenter',()=>list.classList.add('drop-indicator'));
    list.addEventListener('dragleave',()=>list.classList.remove('drop-indicator'));
  });
}
document.getElementById('search').addEventListener('input',e=>{state.filter=e.target.value.toLowerCase();render();});
document.getElementById('themeToggle').addEventListener('click',()=>{
  const body=document.body;
  if(body.dataset.theme==='light'){
    body.dataset.theme='dark'; e.target.textContent='Light';
  }else{
    body.dataset.theme='light'; e.target.textContent='Dark';
  }
});
document.getElementById('addBtn').addEventListener('click',()=>{document.getElementById('modalBackdrop').classList.add('show');});
document.getElementById('saveCard').addEventListener('click',()=>{
  const title=document.getElementById('cardTitle').value.trim();
  const priority=document.getElementById('cardPriority').value;
  const status=document.getElementById('cardColumn').value;
  if(title){addCard(title,priority,status);closeModal();}
});
function closeModal(){
  document.getElementById('modalBackdrop').classList.remove('show');
  document.getElementById('cardTitle').value='';
}
document.getElementById('modalBackdrop').addEventListener('click',e=>{if(e.target===e.currentTarget)closeModal();});
render();
initDnD();
</script>
</body>
</html>