DeepSeek V4 Flash 0423

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Kanban · demo</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    }

    body {
      transition: background 0.2s, color 0.2s;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding: 1.5rem 1rem 2rem;
    }

    /* theme variables */
    :root {
      --bg: #f4f7fc;
      --board-bg: #eef2f7;
      --col-bg: #dfe5ee;
      --card-bg: #ffffff;
      --text: #1e293b;
      --text-secondary: #475569;
      --border: #cbd5e1;
      --badge-low: #10b981;
      --badge-med: #f59e0b;
      --badge-high: #ef4444;
      --shadow: 0 2px 6px rgba(0,0,0,0.04);
      --input-bg: #f1f5f9;
      --hover-bg: #e2e8f0;
      --overlay: rgba(0,0,0,0.2);
    }

    body.dark {
      --bg: #0f172a;
      --board-bg: #1e293b;
      --col-bg: #334155;
      --card-bg: #1e293b;
      --text: #e2e8f0;
      --text-secondary: #94a3b8;
      --border: #475569;
      --input-bg: #0f172a;
      --hover-bg: #475569;
      --shadow: 0 2px 8px rgba(0,0,0,0.5);
      --overlay: rgba(0,0,0,0.5);
    }

    body {
      background: var(--bg);
      color: var(--text);
    }

    .kanban {
      max-width: 1200px;
      width: 100%;
    }

    /* header */
    .board-header {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.8rem 1rem;
      margin-bottom: 1.5rem;
    }

    .board-header h1 {
      font-weight: 600;
      font-size: 1.8rem;
      letter-spacing: -0.3px;
    }

    .header-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      align-items: center;
    }

    .search-wrapper {
      position: relative;
    }

    .search-wrapper input {
      padding: 0.5rem 0.9rem 0.5rem 2.1rem;
      border-radius: 40px;
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text);
      font-size: 0.9rem;
      width: 200px;
      transition: 0.2s;
    }

    .search-wrapper input:focus {
      outline: 2px solid #3b82f6;
      outline-offset: 1px;
    }

    .search-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-secondary);
      pointer-events: none;
      font-size: 1rem;
    }

    .theme-toggle, .add-card-btn {
      background: var(--col-bg);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 0.5rem 1rem;
      border-radius: 30px;
      font-weight: 500;
      font-size: 0.85rem;
      cursor: pointer;
      transition: 0.15s;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .theme-toggle:hover, .add-card-btn:hover {
      background: var(--hover-bg);
    }

    .add-card-btn {
      background: #3b82f6;
      color: white;
      border: none;
    }

    .add-card-btn:hover {
      background: #2563eb;
    }

    /* columns */
    .columns {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: center;
    }

    .column {
      flex: 1 1 280px;
      min-width: 220px;
      background: var(--col-bg);
      border-radius: 1rem;
      padding: 0.8rem 0.6rem 0.6rem;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      transition: background 0.2s;
    }

    .column-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.2rem 0.6rem;
      border-bottom: 1px solid var(--border);
      margin-bottom: 0.6rem;
    }

    .column-title {
      font-weight: 600;
      font-size: 1rem;
    }

    .card-count {
      background: var(--bg);
      padding: 0.15rem 0.6rem;
      border-radius: 40px;
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--text-secondary);
    }

    .cards {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      min-height: 80px;
      padding: 0.2rem 0;
      transition: background 0.1s;
      border-radius: 0.6rem;
    }

    .cards.drag-over {
      background: var(--hover-bg);
      outline: 2px dashed #3b82f6;
      outline-offset: -2px;
    }

    .card {
      background: var(--card-bg);
      border-radius: 0.7rem;
      padding: 0.65rem 0.7rem 0.6rem;
      box-shadow: 0 1px 4px rgba(0,0,0,0.04);
      border: 1px solid var(--border);
      cursor: grab;
      transition: transform 0.1s, box-shadow 0.1s;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .card:active {
      cursor: grabbing;
      transform: scale(0.97);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .card.dragging {
      opacity: 0.5;
      transform: rotate(2deg);
    }

    .card-title {
      font-weight: 500;
      font-size: 0.95rem;
      word-break: break-word;
      padding-right: 1.2rem;
    }

    .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.1rem;
    }

    .priority-badge {
      font-size: 0.65rem;
      font-weight: 600;
      padding: 0.15rem 0.55rem;
      border-radius: 30px;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      background: var(--badge-low);
      color: white;
    }

    .priority-badge.medium {
      background: var(--badge-med);
    }

    .priority-badge.high {
      background: var(--badge-high);
    }

    .delete-btn {
      background: transparent;
      border: none;
      color: var(--text-secondary);
      font-size: 1.1rem;
      cursor: pointer;
      padding: 0.1rem 0.4rem;
      border-radius: 30px;
      line-height: 1;
      transition: 0.1s;
    }

    .delete-btn:hover {
      background: var(--hover-bg);
      color: var(--badge-high);
    }

    /* modal */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: var(--overlay);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      visibility: hidden;
      opacity: 0;
      transition: 0.15s;
    }

    .modal-overlay.open {
      visibility: visible;
      opacity: 1;
    }

    .modal-box {
      background: var(--card-bg);
      max-width: 380px;
      width: 90%;
      border-radius: 1.2rem;
      padding: 1.5rem 1.8rem 1.8rem;
      box-shadow: 0 20px 40px rgba(0,0,0,0.2);
      border: 1px solid var(--border);
    }

    .modal-box h2 {
      font-weight: 600;
      margin-bottom: 1.2rem;
    }

    .modal-box label {
      display: block;
      font-size: 0.85rem;
      font-weight: 500;
      margin-bottom: 0.25rem;
    }

    .modal-box input, .modal-box select {
      width: 100%;
      padding: 0.5rem 0.7rem;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text);
      font-size: 0.9rem;
      margin-bottom: 0.8rem;
    }

    .modal-actions {
      display: flex;
      gap: 0.5rem;
      justify-content: flex-end;
      margin-top: 0.5rem;
    }

    .modal-actions button {
      padding: 0.4rem 1.2rem;
      border-radius: 30px;
      border: 1px solid var(--border);
      background: var(--col-bg);
      color: var(--text);
      cursor: pointer;
    }

    .modal-actions .primary {
      background: #3b82f6;
      color: white;
      border: none;
    }

    .modal-actions .primary:hover {
      background: #2563eb;
    }

    .hint {
      font-size: 0.8rem;
      color: var(--text-secondary);
      text-align: center;
      margin-top: 1.2rem;
    }

    @media (max-width: 600px) {
      .board-header h1 { font-size: 1.5rem; }
      .search-wrapper input { width: 140px; }
    }
  </style>
</head>
<body>
<div class="kanban">
  <div class="board-header">
    <h1>📋 Kanban</h1>
    <div class="header-actions">
      <div class="search-wrapper">
        <span class="search-icon">🔍</span>
        <input type="text" id="searchInput" placeholder="Filter cards..." aria-label="Filter cards">
      </div>
      <button class="theme-toggle" id="themeToggle">🌙 Dark</button>
      <button class="add-card-btn" id="addCardBtn">+ Add card</button>
    </div>
  </div>

  <div class="columns" id="boardColumns">
    <!-- three columns rendered by JS -->
  </div>
  <div class="hint">Click & drag cards · click "Add card" to create new</div>
</div>

<!-- Modal -->
<div class="modal-overlay" id="modalOverlay">
  <div class="modal-box">
    <h2>✏️ New card</h2>
    <label for="cardTitle">Title *</label>
    <input type="text" id="cardTitle" placeholder="e.g. Design landing page">
    <label for="cardPriority">Priority</label>
    <select id="cardPriority">
      <option value="low">Low</option>
      <option value="medium" selected>Medium</option>
      <option value="high">High</option>
    </select>
    <div class="modal-actions">
      <button id="modalCancel">Cancel</button>
      <button class="primary" id="modalConfirm">Add</button>
    </div>
  </div>
</div>

<script>
  (function() {
    // ---- state ----
    let cards = [
      { id: 'c1', title: 'Set up CI pipeline', priority: 'high', column: 'todo' },
      { id: 'c2', title: 'Write API docs', priority: 'low', column: 'todo' },
      { id: 'c3', title: 'Refactor auth module', priority: 'medium', column: 'in-progress' },
      { id: 'c4', title: 'Implement dark mode', priority: 'medium', column: 'in-progress' },
      { id: 'c5', title: 'Fix login timeout bug', priority: 'high', column: 'done' },
      { id: 'c6', title: 'Add user avatar', priority: 'low', column: 'done' },
    ];
    let nextId = 10;
    let currentFilter = '';

    const columnKeys = ['todo', 'in-progress', 'done'];
    const columnLabels = ['📌 To do', '⚙️ In progress', '✅ Done'];

    // DOM refs
    const boardEl = document.getElementById('boardColumns');
    const searchInput = document.getElementById('searchInput');
    const themeToggle = document.getElementById('themeToggle');
    const addCardBtn = document.getElementById('addCardBtn');
    const modalOverlay = document.getElementById('modalOverlay');
    const modalTitle = document.getElementById('cardTitle');
    const modalPriority = document.getElementById('cardPriority');
    const modalConfirm = document.getElementById('modalConfirm');
    const modalCancel = document.getElementById('modalCancel');

    // ---- helpers ----
    function filterCards(list) {
      if (!currentFilter.trim()) return list;
      const q = currentFilter.trim().toLowerCase();
      return list.filter(c => c.title.toLowerCase().includes(q));
    }

    function getCardsForColumn(colKey) {
      return cards.filter(c => c.column === colKey);
    }

    // ---- render board ----
    function renderBoard() {
      boardEl.innerHTML = '';
      columnKeys.forEach((colKey, idx) => {
        const colCards = getCardsForColumn(colKey);
        const filtered = filterCards(colCards);
        const count = filtered.length;

        const col = document.createElement('div');
        col.className = 'column';
        col.dataset.column = colKey;

        col.innerHTML = `
          <div class="column-header">
            <span class="column-title">${columnLabels[idx]}</span>
            <span class="card-count">${count}</span>
          </div>
          <div class="cards" data-column="${colKey}"></div>
        `;

        const cardsContainer = col.querySelector('.cards');
        filtered.forEach(card => {
          cardsContainer.appendChild(createCardElement(card));
        });

        boardEl.appendChild(col);
      });

      attachDragListeners();
    }

    function createCardElement(card) {
      const div = document.createElement('div');
      div.className = 'card';
      div.draggable = true;
      div.dataset.cardId = card.id;

      const priorityClass = card.priority === 'high' ? 'high' : card.priority === 'medium' ? 'medium' : '';
      div.innerHTML = `
        <div class="card-title">${escapeHtml(card.title)}</div>
        <div class="card-footer">
          <span class="priority-badge ${priorityClass}">${card.priority}</span>
          <button class="delete-btn" data-card-id="${card.id}" title="Delete card">✕</button>
        </div>
      `;

      const deleteBtn = div.querySelector('.delete-btn');
      deleteBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        deleteCard(card.id);
      });

      // drag events
      div.addEventListener('dragstart', (e) => {
        e.dataTransfer.setData('text/plain', card.id);
        div.classList.add('dragging');
      });
      div.addEventListener('dragend', () => {
        div.classList.remove('dragging');
        document.querySelectorAll('.cards').forEach(el => el.classList.remove('drag-over'));
      });

      return div;
    }

    function escapeHtml(str) {
      const s = document.createElement('span');
      s.textContent = str;
      return s.innerHTML;
    }

    // ---- delete ----
    function deleteCard(cardId) {
      cards = cards.filter(c => c.id !== cardId);
      renderBoard();
      updateCounts();
    }

    // ---- drag & drop ----
    function attachDragListeners() {
      const dropZones = document.querySelectorAll('.cards');
      dropZones.forEach(zone => {
        // remove old listeners by cloning? we rebind each render.
        zone.addEventListener('dragover', (e) => {
          e.preventDefault();
          zone.classList.add('drag-over');
        });
        zone.addEventListener('dragleave', () => {
          zone.classList.remove('drag-over');
        });
        zone.addEventListener('drop', (e) => {
          e.preventDefault();
          zone.classList.remove('drag-over');
          const cardId = e.dataTransfer.getData('text/plain');
          const targetColumn = zone.dataset.column;
          if (!cardId || !targetColumn) return;

          const card = cards.find(c => c.id === cardId);
          if (card && card.column !== targetColumn) {
            card.column = targetColumn;
            renderBoard();
            updateCounts();
          } else {
            // if same column, no move, just re-render (visual)
            renderBoard();
          }
        });
      });
    }

    function updateCounts() {
      // counts updated via render, but we call after delete / add / move
    }

    // ---- add card modal ----
    function openModal() {
      modalOverlay.classList.add('open');
      modalTitle.value = '';
      modalPriority.value = 'medium';
      modalTitle.focus();
    }

    function closeModal() {
      modalOverlay.classList.remove('open');
    }

    function addCardFromModal() {
      const title = modalTitle.value.trim();
      if (!title) {
        modalTitle.style.outline = '2px solid #ef4444';
        setTimeout(() => modalTitle.style.outline = '', 800);
        return;
      }
      const priority = modalPriority.value;
      const newCard = {
        id: 'card-' + (nextId++),
        title: title,
        priority: priority,
        column: 'todo',
      };
      cards.push(newCard);
      closeModal();
      renderBoard();
      updateCounts();
      // reset filter if needed
    }

    // ---- search ----
    searchInput.addEventListener('input', () => {
      currentFilter = searchInput.value;
      renderBoard();
    });

    // ---- theme ----
    function toggleTheme() {
      document.body.classList.toggle('dark');
      const isDark = document.body.classList.contains('dark');
      themeToggle.textContent = isDark ? '☀️ Light' : '🌙 Dark';
    }

    themeToggle.addEventListener('click', toggleTheme);

    // ---- modal events ----
    addCardBtn.addEventListener('click', openModal);
    modalCancel.addEventListener('click', closeModal);
    modalOverlay.addEventListener('click', (e) => {
      if (e.target === modalOverlay) closeModal();
    });
    modalConfirm.addEventListener('click', addCardFromModal);
    modalTitle.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') addCardFromModal();
    });

    // ---- boot ----
    renderBoard();
    updateCounts();

    // small instruction
    console.log('Kanban ready: drag cards, add, delete, search, theme toggle');
  })();
</script>
</body>
</html>