Taskline — Project Management Dashboard

<div class="tl-shell">
  <button class="tl-burger" data-tl-toggle aria-label="Toggle navigation" aria-expanded="false"><span></span><span></span><span></span></button>
  <div class="tl-overlay" data-tl-overlay hidden></div>

  <aside class="tl-side" data-tl-side aria-label="Primary">
    <a class="tl-logo" href="#"><span class="tl-logo-mark" aria-hidden="true">◇</span> Taskline</a>
    <nav class="tl-nav" aria-label="Main navigation">
      <a href="#" aria-current="page"><i aria-hidden="true">▦</i> Overview</a>
      <a href="#"><i aria-hidden="true">📋</i> Projects</a>
      <a href="#"><i aria-hidden="true">✓</i> My tasks <span class="tl-pill">7</span></a>
      <a href="#"><i aria-hidden="true">📅</i> Calendar</a>
      <a href="#"><i aria-hidden="true">👥</i> Team</a>
      <a href="#"><i aria-hidden="true">📁</i> Files</a>
    </nav>
    <footer class="tl-side-foot">Built with <a href="https://convertatlas.org" rel="noopener">convertatlas.org</a></footer>
  </aside>

  <main class="tl-main">
    <header class="tl-top">
      <div><h1>Good morning, Maya</h1><p class="tl-sub">You have 7 tasks due this week across 4 projects.</p></div>
      <div class="tl-top-actions">
        <label class="tl-search"><span class="visually-hidden">Search</span><i aria-hidden="true">⌕</i><input type="search" placeholder="Search tasks, projects…"></label>
        <button class="tl-icon-btn" aria-label="Notifications"><i aria-hidden="true">🔔</i><span class="tl-dot" aria-hidden="true"></span></button>
        <button class="tl-new" type="button">+ New task</button>
        <span class="tl-avatar" aria-hidden="true">MR</span>
      </div>
    </header>

    <div class="tl-kpis">
      <article class="tl-kpi" style="--c:#6366f1"><span class="tl-kpi-ico" aria-hidden="true">📋</span><div><b>12</b><span>Active projects</span></div></article>
      <article class="tl-kpi" style="--c:#f59e0b"><span class="tl-kpi-ico" aria-hidden="true">⏳</span><div><b>48</b><span>In progress</span></div></article>
      <article class="tl-kpi" style="--c:#10b981"><span class="tl-kpi-ico" aria-hidden="true">✓</span><div><b>164</b><span>Completed</span></div></article>
      <article class="tl-kpi" style="--c:#ef4444"><span class="tl-kpi-ico" aria-hidden="true">🔥</span><div><b>5</b><span>Overdue</span></div></article>
    </div>

    <div class="tl-grid">
      <section class="tl-card tl-col-2">
        <div class="tl-card-head"><h2>Kanban — Website Redesign</h2><a class="tl-link" href="#">Open board</a></div>
        <div class="tl-kanban">
          <div class="tl-col">
            <div class="tl-col-head"><b>To do</b><span>4</span></div>
            <div class="tl-task tl-pri-high"><span class="tl-task-tag">High</span><p>Finalize homepage hero copy</p><div class="tl-task-foot"><span class="tl-mini-av" aria-hidden="true">JD</span><time>Jun 18</time></div></div>
            <div class="tl-task tl-pri-mid"><span class="tl-task-tag">Medium</span><p>Audit color contrast (WCAG)</p><div class="tl-task-foot"><span class="tl-mini-av" aria-hidden="true">AR</span><time>Jun 20</time></div></div>
          </div>
          <div class="tl-col">
            <div class="tl-col-head"><b>In progress</b><span>3</span></div>
            <div class="tl-task tl-pri-high"><span class="tl-task-tag">High</span><p>Build responsive nav component</p><div class="tl-task-foot"><span class="tl-mini-av" aria-hidden="true">MR</span><time>Jun 16</time></div></div>
            <div class="tl-task tl-pri-low"><span class="tl-task-tag">Low</span><p>Write 404 page microcopy</p><div class="tl-task-foot"><span class="tl-mini-av" aria-hidden="true">TN</span><time>Jun 22</time></div></div>
          </div>
          <div class="tl-col">
            <div class="tl-col-head"><b>Done</b><span>6</span></div>
            <div class="tl-task tl-done"><span class="tl-task-tag">Done</span><p>Set up design tokens</p><div class="tl-task-foot"><span class="tl-mini-av" aria-hidden="true">JD</span><time>Jun 12</time></div></div>
            <div class="tl-task tl-done"><span class="tl-task-tag">Done</span><p>Wireframe approval</p><div class="tl-task-foot"><span class="tl-mini-av" aria-hidden="true">AR</span><time>Jun 10</time></div></div>
          </div>
        </div>
      </section>

      <section class="tl-card">
        <div class="tl-card-head"><h2>Sprint progress</h2></div>
        <div class="tl-ring-wrap">
          <svg class="tl-ring" viewBox="0 0 42 42" role="img" aria-label="Sprint 68 percent complete">
            <circle cx="21" cy="21" r="15.9" fill="none" stroke="#eceefb" stroke-width="5"/>
            <circle cx="21" cy="21" r="15.9" fill="none" stroke="#6366f1" stroke-width="5" stroke-linecap="round" stroke-dasharray="68 32" stroke-dashoffset="25"/>
          </svg>
          <div class="tl-ring-c"><b>68%</b><span>Sprint 14</span></div>
        </div>
        <ul class="tl-sprint-stats">
          <li><span>Story points</span><b>34 / 50</b></li>
          <li><span>Days left</span><b>3</b></li>
          <li><span>Velocity</span><b>↑ 12%</b></li>
        </ul>
      </section>
    </div>

    <div class="tl-grid">
      <section class="tl-card">
        <div class="tl-card-head"><h2>Team workload</h2></div>
        <ul class="tl-workload">
          <li><span class="tl-mini-av" aria-hidden="true">JD</span><div class="tl-wl-info"><b>Jonas Dahl</b><i>8 tasks</i></div><div class="tl-mini-bar"><i style="width:80%;background:#ef4444"></i></div></li>
          <li><span class="tl-mini-av" aria-hidden="true">AR</span><div class="tl-wl-info"><b>Ana Reis</b><i>5 tasks</i></div><div class="tl-mini-bar"><i style="width:55%;background:#f59e0b"></i></div></li>
          <li><span class="tl-mini-av" aria-hidden="true">MR</span><div class="tl-wl-info"><b>Maya Rivera</b><i>6 tasks</i></div><div class="tl-mini-bar"><i style="width:62%;background:#f59e0b"></i></div></li>
          <li><span class="tl-mini-av" aria-hidden="true">TN</span><div class="tl-wl-info"><b>Toby Nguyen</b><i>3 tasks</i></div><div class="tl-mini-bar"><i style="width:32%;background:#10b981"></i></div></li>
        </ul>
      </section>

      <section class="tl-card">
        <div class="tl-card-head"><h2>Upcoming deadlines</h2></div>
        <ul class="tl-deadlines">
          <li><div class="tl-dl-date"><b>16</b><span>Jun</span></div><div class="tl-dl-info"><b>Nav component review</b><i>Website Redesign</i></div><span class="tl-badge tl-b-red">Today</span></li>
          <li><div class="tl-dl-date"><b>18</b><span>Jun</span></div><div class="tl-dl-info"><b>Hero copy final</b><i>Website Redesign</i></div><span class="tl-badge tl-b-amber">2 days</span></li>
          <li><div class="tl-dl-date"><b>21</b><span>Jun</span></div><div class="tl-dl-info"><b>Q3 roadmap sync</b><i>Planning</i></div><span class="tl-badge tl-b-blue">5 days</span></li>
        </ul>
      </section>

      <section class="tl-card">
        <div class="tl-card-head"><h2>Recent activity</h2></div>
        <ul class="tl-feed">
          <li><span class="tl-mini-av" aria-hidden="true">JD</span><div><p><b>Jonas</b> commented on <b>Nav component</b></p><time>12 min ago</time></div></li>
          <li><span class="tl-mini-av" aria-hidden="true">AR</span><div><p><b>Ana</b> completed <b>Wireframe approval</b></p><time>1 hr ago</time></div></li>
          <li><span class="tl-mini-av" aria-hidden="true">MR</span><div><p><b>Maya</b> created <b>Mobile menu</b> task</p><time>3 hrs ago</time></div></li>
        </ul>
      </section>
    </div>

    <div class="tl-grid">
      <section class="tl-card tl-col-2">
        <div class="tl-card-head"><h2>Priority tasks</h2><a class="tl-link" href="#">View all</a></div>
        <div class="tl-table-wrap">
          <table class="tl-table">
            <thead><tr><th>Task</th><th>Project</th><th>Assignee</th><th>Due</th><th>Priority</th></tr></thead>
            <tbody>
              <tr><td>Build responsive nav component</td><td>Website Redesign</td><td>Maya R.</td><td>Jun 16</td><td><span class="tl-badge tl-b-red">High</span></td></tr>
              <tr><td>API rate-limit handling</td><td>Mobile App</td><td>Jonas D.</td><td>Jun 17</td><td><span class="tl-badge tl-b-red">High</span></td></tr>
              <tr><td>Audit color contrast</td><td>Website Redesign</td><td>Ana R.</td><td>Jun 20</td><td><span class="tl-badge tl-b-amber">Medium</span></td></tr>
              <tr><td>Write 404 microcopy</td><td>Website Redesign</td><td>Toby N.</td><td>Jun 22</td><td><span class="tl-badge tl-b-green">Low</span></td></tr>
            </tbody>
          </table>
        </div>
      </section>
      <section class="tl-card">
        <div class="tl-card-head"><h2>Recent files</h2></div>
        <ul class="tl-files">
          <li><span class="tl-file-ico" style="--c:#ef4444" aria-hidden="true">PDF</span><div><b>Brand guidelines.pdf</b><i>2.4 MB · Ana R.</i></div></li>
          <li><span class="tl-file-ico" style="--c:#2563eb" aria-hidden="true">FIG</span><div><b>Homepage v3.fig</b><i>Figma · Maya R.</i></div></li>
          <li><span class="tl-file-ico" style="--c:#16a34a" aria-hidden="true">XLS</span><div><b>Sprint backlog.xlsx</b><i>820 KB · Jonas D.</i></div></li>
        </ul>
      </section>
    </div>
  </main>
</div>

*{box-sizing:border-box}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tl-shell{--tl-bg:#f6f7fc;--tl-card:#fff;--tl-border:#e9eaf5;--tl-text:#1c2030;--tl-soft:#6b7196;--tl-accent:#6366f1;min-height:100vh;display:flex;background:var(--tl-bg);color:var(--tl-text);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.tl-side{width:232px;flex:none;background:linear-gradient(180deg,#1e1b4b,#312e81);color:#fff;display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh}
.tl-logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:1.18rem;margin-bottom:22px;padding:0 8px;font-family:'Sora',sans-serif}
.tl-logo-mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.16);font-size:1rem}
.tl-nav{display:flex;flex-direction:column;gap:3px;flex:1}
.tl-nav a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;color:rgba(255,255,255,.7);text-decoration:none;font-size:.9rem;font-weight:600;transition:background .15s,color .15s}
.tl-nav a i{font-style:normal;width:18px;text-align:center}
.tl-nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.tl-nav a[aria-current=page]{background:rgba(255,255,255,.16);color:#fff}
.tl-nav a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.tl-pill{margin-left:auto;font-size:.7rem;font-weight:700;background:#f59e0b;color:#1e1b4b;border-radius:999px;padding:2px 8px}
.tl-side-foot{margin-top:14px;font-size:.74rem;color:rgba(255,255,255,.55);padding:0 8px}
.tl-side-foot a{color:#c7d2fe;text-decoration:none;font-weight:600}.tl-side-foot a:hover{text-decoration:underline}
.tl-main{flex:1;min-width:0;padding:24px 28px 40px}
.tl-top{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:24px}
.tl-top h1{font-family:'Sora',sans-serif;font-weight:800;font-size:1.5rem;margin:0}
.tl-sub{color:var(--tl-soft);font-size:.9rem;margin:3px 0 0}
.tl-top-actions{display:flex;align-items:center;gap:11px}
.tl-search{position:relative;display:flex;align-items:center}
.tl-search i{position:absolute;left:12px;color:var(--tl-soft)}
.tl-search input{padding:10px 14px 10px 34px;border-radius:11px;border:1px solid var(--tl-border);background:#fff;color:var(--tl-text);font:inherit;font-size:.88rem;width:210px}
.tl-search input:focus{outline:none;border-color:var(--tl-accent);box-shadow:0 0 0 3px rgba(99,102,241,.16)}
.tl-icon-btn{position:relative;width:42px;height:42px;border-radius:11px;border:1px solid var(--tl-border);background:#fff;font-size:1.05rem;cursor:pointer}
.tl-icon-btn:focus-visible{outline:2px solid var(--tl-accent);outline-offset:2px}
.tl-dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:#ef4444;border:2px solid #fff}
.tl-new{border:0;border-radius:11px;background:var(--tl-accent);color:#fff;font:inherit;font-weight:700;padding:11px 18px;cursor:pointer;transition:.15s}
.tl-new:hover{background:#4f46e5}.tl-new:focus-visible{outline:2px solid #c7d2fe;outline-offset:2px}
.tl-avatar{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:.82rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#ec4899,#f59e0b)}
.tl-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px}
.tl-kpi{background:var(--tl-card);border:1px solid var(--tl-border);border-radius:15px;padding:18px;display:flex;align-items:center;gap:14px;border-left:4px solid var(--c)}
.tl-kpi-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.2rem;flex:none;background:color-mix(in srgb,var(--c) 15%,transparent)}
.tl-kpi b{font-family:'Sora',sans-serif;font-size:1.6rem;font-weight:800;display:block;line-height:1.1}
.tl-kpi span{font-size:.82rem;color:var(--tl-soft)}
.tl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.tl-col-2{grid-column:span 2}
.tl-card{background:var(--tl-card);border:1px solid var(--tl-border);border-radius:15px;padding:18px;min-width:0}
.tl-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}
.tl-card-head h2{font-family:'Sora',sans-serif;font-size:1.02rem;font-weight:700;margin:0}
.tl-link{font-size:.82rem;color:var(--tl-accent);text-decoration:none;font-weight:600}.tl-link:hover{text-decoration:underline}
.tl-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tl-col{background:#f6f7fc;border-radius:12px;padding:10px;min-width:0}
.tl-col-head{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;font-weight:700;color:var(--tl-soft);padding:4px 6px 10px}
.tl-col-head span{background:#e7e9f5;border-radius:99px;padding:1px 8px;font-size:.72rem}
.tl-task{background:#fff;border:1px solid var(--tl-border);border-radius:10px;padding:11px;margin-bottom:9px;border-left:3px solid #cbd5e1}
.tl-task p{margin:7px 0;font-size:.84rem;font-weight:600;line-height:1.35}
.tl-pri-high{border-left-color:#ef4444}.tl-pri-mid{border-left-color:#f59e0b}.tl-pri-low{border-left-color:#10b981}
.tl-done{opacity:.62}.tl-done p{text-decoration:line-through}
.tl-task-tag{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--tl-soft)}
.tl-task-foot{display:flex;align-items:center;justify-content:space-between}
.tl-task-foot time{font-size:.72rem;color:var(--tl-soft)}
.tl-mini-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.64rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);flex:none}
.tl-ring-wrap{position:relative;width:150px;margin:6px auto 16px}
.tl-ring{width:150px;height:150px;transform:rotate(-90deg)}
.tl-ring-c{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.tl-ring-c b{display:block;font-family:'Sora',sans-serif;font-size:1.6rem;font-weight:800}
.tl-ring-c span{font-size:.74rem;color:var(--tl-soft)}
.tl-sprint-stats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.tl-sprint-stats li{display:flex;justify-content:space-between;font-size:.86rem;color:var(--tl-soft);padding-bottom:9px;border-bottom:1px solid var(--tl-border)}
.tl-sprint-stats li:last-child{border:0;padding:0}
.tl-sprint-stats b{color:var(--tl-text)}
.tl-workload{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.tl-workload li{display:flex;align-items:center;gap:11px}
.tl-wl-info{min-width:110px}
.tl-wl-info b{font-size:.86rem;display:block}
.tl-wl-info i{font-style:normal;font-size:.76rem;color:var(--tl-soft)}
.tl-mini-bar{flex:1;height:8px;border-radius:99px;background:#eceefb;overflow:hidden}
.tl-mini-bar i{display:block;height:100%;border-radius:99px}
.tl-deadlines{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}
.tl-deadlines li{display:flex;align-items:center;gap:12px}
.tl-dl-date{width:46px;text-align:center;background:#f6f7fc;border-radius:10px;padding:7px 0;flex:none}
.tl-dl-date b{font-family:'Sora',sans-serif;font-size:1.1rem;display:block;line-height:1}
.tl-dl-date span{font-size:.68rem;text-transform:uppercase;color:var(--tl-soft)}
.tl-dl-info{flex:1;min-width:0}
.tl-dl-info b{font-size:.86rem;display:block}
.tl-dl-info i{font-style:normal;font-size:.76rem;color:var(--tl-soft)}
.tl-feed{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}
.tl-feed li{display:flex;gap:10px;align-items:flex-start}
.tl-feed p{margin:0;font-size:.85rem;color:#3a4154}.tl-feed b{color:var(--tl-text)}
.tl-feed time{font-size:.72rem;color:var(--tl-soft)}
.tl-badge{font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.tl-b-red{color:#dc2626;background:#fee2e2}
.tl-b-amber{color:#b45309;background:#fef3c7}
.tl-b-blue{color:#2563eb;background:#dbeafe}
.tl-b-green{color:#16a34a;background:#dcfce7}
.tl-table-wrap{overflow-x:auto}
.tl-table{width:100%;border-collapse:collapse;min-width:480px}
.tl-table th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--tl-soft);font-weight:600;padding:0 12px 12px}
.tl-table td{padding:12px;border-top:1px solid var(--tl-border);font-size:.86rem}
.tl-files{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}
.tl-files li{display:flex;align-items:center;gap:11px}
.tl-file-ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:.64rem;font-weight:800;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);flex:none}
.tl-files b{font-size:.85rem;display:block}
.tl-files i{font-style:normal;font-size:.75rem;color:var(--tl-soft)}
.tl-burger{display:none;position:fixed;top:16px;left:16px;z-index:60;width:44px;height:44px;border-radius:11px;border:1px solid var(--tl-border);background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer}
.tl-burger span{width:18px;height:2px;background:var(--tl-text);border-radius:2px}
.tl-overlay{position:fixed;inset:0;background:rgba(30,27,75,.45);z-index:40;border:0}
@media(max-width:1080px){.tl-kpis{grid-template-columns:repeat(2,1fr)}.tl-grid{grid-template-columns:1fr}.tl-col-2{grid-column:span 1}}
@media(max-width:760px){
  .tl-burger{display:flex}
  .tl-side{position:fixed;left:0;top:0;z-index:50;transform:translateX(-100%);transition:transform .25s ease}
  .tl-side.is-open{transform:translateX(0)}
  .tl-main{padding:72px 16px 32px}
  .tl-top-actions{width:100%;flex-wrap:wrap}.tl-search{flex:1}.tl-search input{width:100%}
  .tl-kpis{grid-template-columns:1fr}
  .tl-kanban{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.tl-side{transition:none}.tl-nav a,.tl-new{transition:none}}

(function(){
  var side=document.querySelector('[data-tl-side]');
  var btn=document.querySelector('[data-tl-toggle]');
  var ov=document.querySelector('[data-tl-overlay]');
  if(!side||!btn)return;
  function open(o){side.classList.toggle('is-open',o);btn.setAttribute('aria-expanded',o?'true':'false');if(ov)ov.hidden=!o;}
  btn.addEventListener('click',function(){open(!side.classList.contains('is-open'));});
  if(ov)ov.addEventListener('click',function(){open(false);});
})();