gpt-oss-120b

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kanban Board Demo</title>
<style>
  :root{
    --bg:#fafafa;--text:#222;--card:#fff;--border:#ddd;
    --badge-low:#4caf50;--badge-mid:#ff9800;--badge-high:#f44336;
  }
  [data-theme="dark"]{
    --bg:#222;--text:#fafafa;--card:#2c2c2c;--border:#555;
    --badge-low:#81c784;--badge-mid:#ffb74d;--badge-high:#e57373;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{
    font-family:sans-serif;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    display:flex;flex-direction:column;
    padding:1rem;
  }
  header{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:1rem;gap:1rem;flex-wrap:wrap;
  }
  h1{font-size:1.5rem;}
  #search{flex:1;max-width:300px;padding:.5rem;}
  #themeToggle{padding:.5rem .8rem;cursor:pointer;}
  .board{display:flex;gap:1rem;flex:1;overflow:auto;}
  .column{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:6px;
    flex:1;
    min-width:250px;
    display:flex;flex-direction:column;
  }
  .column-header{
    background:var(--border);
    padding:.5rem;
    font-weight:bold;
    text-align:center;
    position:relative;
  }
  .column-header .count{font-size:.9rem;position:absolute;right:.5rem;top:.5rem;}
  .cards{flex:1;padding:.5rem;display:flex;flex-direction:column;gap:.5rem;min-height:20px;}
  .card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:4px;
    padding:.5rem;
    cursor:grab;
    display:flex;justify-content:space-between;align-items:center;
  }
  .card.dragging{opacity:.5;}
  .badge{
    padding:.2rem .4rem;border-radius:3px;color:#fff;font-size:.8rem;
  }
  .badge.low{background:var(--badge-low);}
  .badge.mid{background:var(--badge-mid);}
  .badge.high{background:var(--badge-high);}
  .delete{background:none;border:none;color:#888;cursor:pointer;font-size:1rem;}
  .delete:hover{color:#f00;}
  .drag-over{outline:2px dashed var(--border);}
  /* Modal */
  #modalOverlay{
    position:fixed;top:0;left:0;width:100vw;height:100vh;
    background:rgba(0,0,0,.4);display:none;justify-content:center;align-items:center;
  }
  #modal{
    background:var(--card);color:var(--text);
    padding:1rem; border-radius:6px; min-width:280px;
    box-shadow:0 2px 10px rgba(0,0,0,.3);
  }
  #modal h2{margin-bottom:.5rem;}
  #modal label{display:block;margin-top:.5rem;}
  #modal input, #modal select{width:100%;padding:.4rem;margin-top:.2rem;}
  #modal button{margin-top:1rem;padding:.5rem .8rem;cursor:pointer;}
  @media (max-width:600px){
    .board{flex-direction:column;}
  }
</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>

<div class="board">
  <div class="column" data-col="todo">
    <div class="column-header">To Do <span class="count">0</span></div>
    <div class="cards" data-drop="todo"></div>
  </div>
  <div class="column" data-col="inprogress">
    <div class="column-header">In Progress <span class="count">0</span></div>
    <div class="cards" data-drop="inprogress"></div>
  </div>
  <div class="column" data-col="done">
    <div class="column-header">Done <span class="count">0</span></div>
    <div class="cards" data-drop="done"></div>
  </div>
</div>

<div id="modalOverlay">
  <div id="modal">
    <h2>Add New Card</h2>
    <label>Title<input type="text" id="cardTitle"></label>
    <label>Priority
      <select id="cardPriority">
        <option value="low">Low</option>
        <option value="mid">Medium</option>
        <option value="high">High</option>
      </select>
    </label>
    <button id="saveCard">Save</button>
    <button id="cancelCard">Cancel</button>
  </div>
</div>

<script>
(() => {
  const state = {
    cards: [
      {id:1,title:"Setup project repo",priority:"high",col:"todo"},
      {id:2,title:"Design landing page",priority:"mid",col:"todo"},
      {id:3,title:"Implement auth flow",priority:"high",col:"inprogress"},
      {id:4,title:"Write unit tests",priority:"low",col:"inprogress"},
      {id:5,title:"Deploy to staging",priority:"mid",col:"done"},
      {id:6,title:"User feedback review",priority:"low",col:"done"}
    ],
    filter:""
  };
  const cols = ["todo","inprogress","done"];
  const colNames = {todo:"To Do",inprogress:"In Progress",done:"Done"};

  const board = document.querySelector('.board');
  const searchInput = document.getElementById('search');
  const themeBtn = document.getElementById('themeToggle');
  const addBtn = document.getElementById('addBtn');
  const modalOverlay = document.getElementById('modalOverlay');
  const saveBtn = document.getElementById('saveCard');
  const cancelBtn = document.getElementById('cancelCard');
  const titleInput = document.getElementById('cardTitle');
  const prioritySelect = document.getElementById('cardPriority');

  function render() {
    cols.forEach(col => {
      const container = board.querySelector(`.cards[data-drop="${col}"]`);
      container.innerHTML = "";
      const filtered = state.cards.filter(c=> c.col===col && c.title.toLowerCase().includes(state.filter));
      filtered.forEach(card => {
        const el = document.createElement('div');
        el.className = "card";
        el.draggable = true;
        el.dataset.id = card.id;
        el.innerHTML = `
          <span>${card.title}</span>
          <div>
            <span class="badge ${card.priority}">${capitalize(card.priority)}</span>
            <button class="delete" title="Delete">&times;</button>
          </div>`;
        // Drag events
        el.addEventListener('dragstart', e=>{
          e.dataTransfer.setData('text/plain', card.id);
          el.classList.add('dragging');
        });
        el.addEventListener('dragend',()=> el.classList.remove('dragging'));
        // Delete
        el.querySelector('.delete').addEventListener('click',()=> {
          state.cards = state.cards.filter(c=>c.id!==card.id);
          render();
        });
        container.appendChild(el);
      });
      // Update count
      const header = board.querySelector(`.column[data-col="${col}"] .column-header .count`);
      header.textContent = filtered.length;
    });
  }

  function capitalize(s){ return s.charAt(0).toUpperCase()+s.slice(1); }

  // Search
  searchInput.addEventListener('input',e=>{
    state.filter = e.target.value.trim().toLowerCase();
    render();
  });

  // Theme toggle
  themeBtn.addEventListener('click',()=>{
    const isDark = document.body.dataset.theme==="dark";
    document.body.dataset.theme = isDark?"light":"dark";
    themeBtn.textContent = isDark?"🌙 Dark":"☀️ Light";
  });

  // Add modal
  addBtn.addEventListener('click',()=> {
    titleInput.value="";
    prioritySelect.value="low";
    modalOverlay.style.display="flex";
    titleInput.focus();
  });
  cancelBtn.addEventListener('click',()=> modalOverlay.style.display="none");
  saveBtn.addEventListener('click',()=> {
    const title = titleInput.value.trim();
    if(!title){ alert("Title required");return;}
    const newCard = {
      id: Date.now(),
      title,
      priority: prioritySelect.value,
      col:"todo"
    };
    state.cards.push(newCard);
    modalOverlay.style.display="none";
    render();
  });

  // Drag over columns
  board.querySelectorAll('.cards').forEach(zone=>{
    zone.addEventListener('dragover', e=>{ e.preventDefault(); zone.parentElement.classList.add('drag-over'); });
    zone.addEventListener('dragleave',()=> zone.parentElement.classList.remove('drag-over'));
    zone.addEventListener('drop', e=>{
      e.preventDefault();
      const id = parseInt(e.dataTransfer.getData('text/plain'),10);
      const card = state.cards.find(c=>c.id===id);
      if(card){
        const targetCol = zone.dataset.drop;
        card.col = targetCol;
        render();
      }
      zone.parentElement.classList.remove('drag-over');
    });
  });

  // Initial render
  render();
})();
</script>
</body>
</html>