GLM 5.3 Flash

<!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: #f1f3f7; --panel: #ffffff; --text: #1c2430; --muted: #67707e;
    --border: #dde2ea; --accent: #4f6df5; --accent-soft: #eef1ff;
    --shadow: 0 2px 8px rgba(20,30,60,.08);
    --low: #16a34a; --medium: #d97706; --high: #dc2626;
    --col-bg: #e9edf4; --drop: rgba(79,109,245,.15);
  }
  [data-theme="dark"] {
    --bg: #10131a; --panel: #1b2029; --text: #e7ebf2; --muted: #9aa3b2;
    --border: #2c3340; --accent: #7b91ff; --accent-soft: #252c3d;
    --shadow: 0 2px 8px rgba(0,0,0,.35);
    --col-bg: #171c25; --drop: rgba(123,145,255,.18);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg); color: var(--text); min-height: 100vh;
    transition: background .25s, color .25s;
  }
  header {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 16px 24px; max-width: 1100px; margin: 0 auto;
  }
  header h1 { font-size: 20px; font-weight: 700; margin-right: auto; }
  .search {
    padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--panel); color: var(--text); font-size: 14px; width: 220px;
    outline: none;
  }
  .search:focus { border-color: var(--accent); }
  button {
    font: inherit; cursor: pointer; border: 1px solid var(--border);
    background: var(--panel); color: var(--text); border-radius: 8px; padding: 8px 14px;
  }
  button:hover { border-color: var(--accent); }
  #addBtn { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
  #addBtn:hover { filter: brightness(1.08); }
  main {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    max-width: 1100px; margin: 0 auto; padding: 0 24px 32px;
  }
  .column {
    background: var(--col-bg); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px; min-height: 380px; transition: background .15s, border-color .15s;
  }
  .column.dragover {
    border: 2px dashed var(--accent); background: var(--drop); padding: 11px;
  }
  .col-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 2px 4px 10px; font-weight: 600; font-size: 14px;
  }
  .count {
    background: var(--panel); border: 1px solid var(--border); color: var(--muted);
    border-radius: 999px; font-size: 12px; padding: 1px 9px; font-weight: 600;
  }
  .cards { display: flex; flex-direction: column; gap: 10px; min-height: 60px; }
  .card {
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 12px; box-shadow: var(--shadow); cursor: grab;
    display: flex; align-items: flex-start; gap: 8px;
  }
  .card:active { cursor: grabbing; }
  .card.dragging { opacity: .4; transform: rotate(2deg); }
  .card .title { font-size: 14px; line-height: 1.4; flex: 1; }
  .card .del {
    border: none; background: none; color: var(--muted); padding: 0 2px;
    font-size: 15px; line-height: 1; opacity: 0; transition: opacity .15s;
  }
  .card:hover .del { opacity: 1; }
  .card .del:hover { color: var(--high); }
  .badge {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #fff; border-radius: 5px; padding: 2px 7px; margin-top: 1px; white-space: nowrap;
  }
  .badge.low { background: var(--low); }
  .badge.medium { background: var(--medium); }
  .badge.high { background: var(--high); }
  .empty-hint {
    color: var(--muted); font-size: 13px; text-align: center; padding: 14px 4px;
    border: 1px dashed var(--border); border-radius: 10px;
  }
  /* modal */
  .overlay {
    position: fixed; inset: 0; background: rgba(10,14,22,.5);
    display: none; align-items: center; justify-content: center; z-index: 50;
  }
  .overlay.open { display: flex; }
  .modal {
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
    padding: 20px; width: 320px; max-width: calc(100vw - 40px);
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
  }
  .modal h2 { font-size: 16px; margin-bottom: 14px; }
  .modal input, .modal select {
    width: 100%; padding: 9px 11px; margin-bottom: 12px; font: inherit;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--text); outline: none;
  }
  .modal input:focus, .modal select:focus { border-color: var(--accent); }
  .modal input.invalid { border-color: var(--high); }
  .modal .row { display: flex; gap: 10px; justify-content: flex-end; }
  .modal label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
  @media (max-width: 820px) {
    main { grid-template-columns: 1fr; }
    .column { min-height: auto; }
    header { padding: 14px 16px; }
    main { padding: 0 16px 24px; }
    .search { flex: 1; width: auto; }
  }
</style>
</head>
<body>
<header>
  <h1>Kanban Board</h1>
  <input class="search" id="search" type="text" placeholder="Search cards…" aria-label="Search cards">
  <button id="themeBtn" title="Toggle theme">🌙</button>
  <button id="addBtn">+ Add card</button>
</header>
<main id="board">
  <section class="column" data-col="todo">
    <div class="col-head"><span>To do</span><span class="count">0</span></div>
    <div class="cards"></div>
  </section>
  <section class="column" data-col="doing">
    <div class="col-head"><span>In progress</span><span class="count">0</span></div>
    <div class="cards"></div>
  </section>
  <section class="column" data-col="done">
    <div class="col-head"><span>Done</span><span class="count">0</span></div>
    <div class="cards"></div>
  </section>
</main>

<div class="overlay" id="overlay">
  <form class="modal" id="addForm">
    <h2>Add card</h2>
    <div>
      <label for="fTitle">Title</label>
      <input id="fTitle" type="text" placeholder="Card title" autocomplete="off">
    </div>
    <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>
    </div>
    <div>
      <label for="fCol">Column</label>
      <select id="fCol">
        <option value="todo">To do</option>
        <option value="doing">In progress</option>
        <option value="done">Done</option>
      </select>
    </div>
    <div class="row">
      <button type="button" id="cancelBtn">Cancel</button>
      <button type="submit" id="saveBtn" style="background:var(--accent);color:#fff;border-color:var(--accent)">Add</button>
    </div>
  </form>
</div>

<script>
(function () {
  var state = {
    todo: [
      { id: 1, title: "Write API documentation for auth endpoints", priority: "medium" },
      { id: 2, title: "Design onboarding illustrations", priority: "low" },
      { id: 3, title: "Fix payment webhook retry bug", priority: "high" }
    ],
    doing: [
      { id: 4, title: "Implement dark mode in dashboard", priority: "medium" },
      { id: 5, title: "Refactor user settings page", priority: "low" }
    ],
    done: [
      { id: 6, title: "Migrate database to Postgres 16", priority: "high" }
    ]
  };
  var nextId = 7;
  var filter = "";

  var colNames = { todo: "To do", doing: "In progress", done: "Done" };
  var board = document.getElementById("board");
  var columns = Array.prototype.slice.call(board.querySelectorAll(".column"));
  var search = document.getElementById("search");

  function esc(s) {
    return s.replace(/[&<>"']/g, function (c) {
      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
    });
  }

  function render() {
    columns.forEach(function (col) {
      var key = col.dataset.col;
      var wrap = col.querySelector(".cards");
      var count = col.querySelector(".count");
      var cards = state[key];
      var visible = cards.filter(function (c) {
        return c.title.toLowerCase().indexOf(filter) !== -1;
      });
      count.textContent = cards.length;
      wrap.innerHTML = "";
      if (visible.length === 0) {
        var hint = document.createElement("div");
        hint.className = "empty-hint";
        hint.textContent = cards.length === 0 ? "No cards yet" : "No matches";
        wrap.appendChild(hint);
        return;
      }
      visible.forEach(function (c) {
        var el = document.createElement("div");
        el.className = "card";
        el.draggable = true;
        el.dataset.id = c.id;
        el.innerHTML =
          '<span class="badge ' + c.priority + '">' + c.priority + "</span>" +
          '<span class="title">' + esc(c.title) + "</span>" +
          '<button class="del" title="Delete card" aria-label="Delete card">✕</button>';
        el.addEventListener("dragstart", function (e) {
          e.dataTransfer.setData("text/plain", String(c.id));
          e.dataTransfer.effectAllowed = "move";
          el.classList.add("dragging");
        });
        el.addEventListener("dragend", function () {
          el.classList.remove("dragging");
          clearIndicators();
        });
        el.querySelector(".del").addEventListener("click", function (e) {
          e.stopPropagation();
          state[key] = state[key].filter(function (x) { return x.id !== c.id; });
          render();
        });
        wrap.appendChild(el);
      });
    });
  }

  function clearIndicators() {
    columns.forEach(function (c) { c.classList.remove("dragover"); });
  }

  columns.forEach(function (col) {
    col.addEventListener("dragover", function (e) {
      e.preventDefault();
      e.dataTransfer.dropEffect = "move";
      clearIndicators();
      col.classList.add("dragover");
    });
    col.addEventListener("dragleave", function (e) {
      if (!col.contains(e.relatedTarget)) col.classList.remove("dragover");
    });
    col.addEventListener("drop", function (e) {
      e.preventDefault();
      var id = parseInt(e.dataTransfer.getData("text/plain"), 10);
      clearIndicators();
      if (!id) return;
      var toKey = col.dataset.col;
      ["todo", "doing", "done"].forEach(function (k) {
        var found = null;
        state[k] = state[k].filter(function (c) {
          if (c.id === id) { found = c; return false; }
          return true;
        });
        if (found) { state[toKey].push(found); }
      });
      render();
    });
  });

  // modal
  var overlay = document.getElementById("overlay");
  var form = document.getElementById("addForm");
  var fTitle = document.getElementById("fTitle");
  function openModal() {
    overlay.classList.add("open");
    fTitle.value = "";
    fTitle.classList.remove("invalid");
    fTitle.focus();
  }
  function closeModal() { overlay.classList.remove("open"); }
  document.getElementById("addBtn").addEventListener("click", openModal);
  document.getElementById("cancelBtn").addEventListener("click", closeModal);
  overlay.addEventListener("click", function (e) { if (e.target === overlay) closeModal(); });
  form.addEventListener("submit", function (e) {
    e.preventDefault();
    var title = fTitle.value.trim();
    if (!title) { fTitle.classList.add("invalid"); fTitle.focus(); return; }
    state[document.getElementById("fCol").value].push({
      id: nextId++,
      title: title,
      priority: document.getElementById("fPriority").value
    });
    closeModal();
    render();
  });

  search.addEventListener("input", function () {
    filter = search.value.trim().toLowerCase();
    render();
  });

  // theme
  var themeBtn = document.getElementById("themeBtn");
  var dark = false;
  themeBtn.addEventListener("click", function () {
    dark = !dark;
    document.documentElement.dataset.theme = dark ? "dark" : "";
    themeBtn.textContent = dark ? "☀️" : "🌙";
  });

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