File size: 4,447 Bytes
cf6c0e0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Kanban</title></head>
<body style="margin:0; background:#f1f5f9; min-height:100vh">
  <nav style="background:#fff; padding:14px 24px; align-items:center">
    <div style="display:flex; gap:16px">
      <span style="font-weight:700">🗂 Sprint 24</span>
      <span style="font-size:13px">Apr 1 – Apr 14</span>
    </div>
    <div style="display:flex; gap:10px">
      <div style="display:flex"><div style="width:28px; border-radius:50%; color:#fff; display:flex; justify-content:center">A</div><div style="width:28px; border-radius:50%; color:#fff; display:flex; justify-content:center; margin-left:-8px">M</div><div style="width:28px; border-radius:50%; color:#fff; display:flex; justify-content:center; margin-left:-8px">P</div></div>
      <button style="padding:7px 14px; color:#fff; border-radius:6px; cursor:pointer">+ Add Task</button>
    </div>
  </nav>
  <div style="display:flex; padding:24px">
    <div style="min-width:260px; border-radius:10px">
      <div style="display:flex; align-items:center"><h3 style="margin:0; font-weight:700; letter-spacing:.05em">Backlog</h3><span style="background:#94a3b8; font-size:11px; border-radius:10px">5</span></div>
      <div style="background:#fff; padding:14px; box-shadow:0 1px 3px rgba(0,0,0,.06)"><p style="margin:0 0 8px; font-weight:500">Redesign onboarding flow</p><div style="display:flex; align-items:center"><span style="background:#ede9fe; font-size:11px; border-radius:4px">Design</span><span style="font-size:11px">P</span></div></div>
      <div style="background:#fff; padding:14px; box-shadow:0 1px 3px rgba(0,0,0,.06)"><p style="margin:0 0 8px; font-weight:500">Add dark mode support</p><div style="display:flex; align-items:center"><span style="background:#dcfce7; font-size:11px; border-radius:4px">Frontend</span><span style="font-size:11px">A</span></div></div>
    </div>
    <div style="min-width:260px; border-radius:10px">
      <div style="display:flex; align-items:center"><h3 style="margin:0; font-weight:700; letter-spacing:.05em">In Progress</h3><span style="background:#f59e0b; font-size:11px; border-radius:10px">3</span></div>
      <div style="background:#fff; padding:14px; box-shadow:0 1px 3px rgba(0,0,0,.06)"><p style="margin:0 0 8px; font-weight:500">Implement OAuth 2.0 login</p><div style="display:flex; align-items:center"><span style="background:#fee2e2; font-size:11px; border-radius:4px">🔴 High</span><span style="font-size:11px">M</span></div></div>
      <div style="background:#fff; padding:14px; box-shadow:0 1px 3px rgba(0,0,0,.06)"><p style="margin:0 0 8px; font-weight:500">Write API documentation</p><div style="display:flex; align-items:center"><span style="background:#fef3c7; font-size:11px; border-radius:4px">Docs</span><span style="font-size:11px">A</span></div></div>
    </div>
    <div style="min-width:260px; border-radius:10px">
      <div style="display:flex; align-items:center"><h3 style="margin:0; font-weight:700; letter-spacing:.05em">Review</h3><span style="background:#6366f1; font-size:11px; border-radius:10px">2</span></div>
      <div style="background:#fff; padding:14px; box-shadow:0 1px 3px rgba(0,0,0,.06)"><p style="margin:0 0 8px; font-weight:500">Fix payment webhook bug</p><div style="display:flex; align-items:center"><span style="background:#fee2e2; font-size:11px; border-radius:4px">🔴 Critical</span><span style="font-size:11px">P</span></div></div>
    </div>
    <div style="min-width:260px; border-radius:10px">
      <div style="display:flex; align-items:center"><h3 style="margin:0; font-weight:700; letter-spacing:.05em">Done</h3><span style="background:#16a34a; font-size:11px; border-radius:10px">8</span></div>
      <div style="background:#fff; padding:14px; box-shadow:0 1px 3px rgba(0,0,0,.06)"><p style="margin:0 0 8px; font-weight:500; color:#94a3b8">Setup CI/CD pipeline</p><div style="display:flex; align-items:center"><span style="background:#dcfce7; font-size:11px; border-radius:4px">DevOps</span><span style="font-size:11px">M</span></div></div>
      <div style="background:#fff; padding:14px; opacity:.7"><p style="margin:0 0 8px; font-weight:500; color:#94a3b8">Database schema migration</p><div style="display:flex; align-items:center"><span style="background:#f1f5f9; font-size:11px; border-radius:4px">Backend</span><span style="font-size:11px">A</span></div></div>
    </div>
  </div>
</body>
</html>