Bootstrap 5 Task Management Dashboard UI
A three-pane task manager with a sidebar, filterable task lists with status badges and checkboxes, and a schedule of events with attendee avatars.
<section class="wdw-stage">
<div class="container" style="max-width:1240px">
<div class="tk wdw-card overflow-hidden" id="taskApp">
<div class="tk-top d-lg-none d-flex align-items-center gap-2 px-3 py-2 border-bottom">
<button class="btn btn-outline-secondary btn-sm px-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#tkSide" aria-controls="tkSide" aria-label="Open navigation"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
<span class="wdw-icon" style="width:2rem;height:2rem;border-radius:.6rem"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 5 5 9-10"/></svg></span><span class="fw-bold text-body-emphasis">Taskly</span>
</div>
<aside class="tk-side offcanvas-lg offcanvas-start" tabindex="-1" id="tkSide" aria-labelledby="tkSideLabel">
<div class="offcanvas-header d-lg-none"><h2 class="offcanvas-title h5" id="tkSideLabel">Taskly</h2><button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#tkSide" aria-label="Close"></button></div>
<div class="offcanvas-body d-flex flex-column p-3 gap-3">
<div class="d-none d-lg-flex align-items-center gap-2 px-2 pt-1"><span class="wdw-icon" style="width:2.25rem;height:2.25rem;border-radius:.7rem"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 5 5 9-10"/></svg></span><span class="fw-bold text-body-emphasis">Taskly</span></div>
<nav aria-label="Main"><ul class="list-unstyled m-0 d-grid gap-1"><li><button type="button" class="tk-nav"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1z"/></svg><span>Inbox</span><span class="badge rounded-pill tk-count ms-auto">6</span></button></li><li><button type="button" class="tk-nav active" aria-current="page"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/></svg><span>Today</span><span class="badge rounded-pill tk-count ms-auto">5</span></button></li><li><button type="button" class="tk-nav"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="17" rx="3"/><path d="M8 2v4M16 2v4M3 10h18"/></svg><span>Upcoming</span><span class="badge rounded-pill tk-count ms-auto">2</span></button></li><li><button type="button" class="tk-nav"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></svg><span>Important</span><span class="badge rounded-pill tk-count ms-auto">5</span></button></li></ul></nav>
<div class="px-2 small fw-bold wdw-muted text-uppercase mt-2" style="letter-spacing:.08em">Labels</div>
<nav aria-label="Labels"><ul class="list-unstyled m-0 d-grid gap-1"><li><button type="button" class="tk-nav"><span class="tk-dot bg-danger"></span><span>Urgent</span><span class="tk-count small ms-auto">2</span></button></li><li><button type="button" class="tk-nav"><span class="tk-dot bg-warning"></span><span>In review</span><span class="tk-count small ms-auto">1</span></button></li><li><button type="button" class="tk-nav"><span class="tk-dot bg-success"></span><span>Shipped</span><span class="tk-count small ms-auto">3</span></button></li></ul></nav>
</div>
</aside>
<main class="tk-main p-3 p-md-4">
<div class="d-flex align-items-center justify-content-between mb-3">
<div><span class="wdw-eyebrow">Thursday, 29 Oct</span><h1 class="h3 wdw-heading mb-0">Today tasks</h1></div>
<div class="d-flex align-items-center gap-2"><span class="small wdw-muted d-none d-sm-inline" id="tkCount" aria-live="polite"></span><span class="badge rounded-pill bg-primary-subtle text-primary-emphasis px-3 py-2">6 members</span></div>
</div>
<div class="tk-tabs d-flex gap-1 mb-3 p-1 rounded-pill bg-body-tertiary" role="group" aria-label="Task filter">
<button class="btn rounded-pill active" type="button" aria-pressed="true" data-filter="all">All</button>
<button class="btn rounded-pill" type="button" aria-pressed="false" data-filter="important">Important</button>
<button class="btn rounded-pill" type="button" aria-pressed="false" data-filter="notes">Notes</button>
<button class="btn rounded-pill" type="button" aria-pressed="false" data-filter="links">Links</button>
</div>
<section data-view="tasks" aria-label="Tasks">
<h2 class="h6 fw-bold text-body-emphasis mb-2">Today</h2>
<ul class="list-unstyled tk-list mb-3" id="tkToday"><li class="tk-task" data-imp="1">
<div class="form-check m-0 flex-grow-1"><input class="form-check-input" type="checkbox" id="t1" checked><div class="min-w-0"><label class="form-check-label" for="t1">Dashboard design implementation</label><div class="small text-body-secondary d-flex align-items-center gap-2"><span class="text-danger d-inline-flex" title="High priority"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></svg><span class="visually-hidden">High priority</span></span><span>Done 9:10 AM</span><span class="badge rounded-pill bg-success-subtle border border-success-subtle text-success-emphasis">Approved</span></div></div></div>
<img src="https://i.pravatar.cc/64?img=32" alt="Assigned to Ana" title="Ana" width="32" height="32" class="tk-av tk-as">
</li><li class="tk-task" data-imp="1">
<div class="form-check m-0 flex-grow-1"><input class="form-check-input" type="checkbox" id="t2" checked><div class="min-w-0"><label class="form-check-label" for="t2">Create a user flow</label><div class="small text-body-secondary d-flex align-items-center gap-2"><span class="text-danger d-inline-flex" title="High priority"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></svg><span class="visually-hidden">High priority</span></span><span>Done 10:30 AM</span><span class="badge rounded-pill bg-success-subtle border border-success-subtle text-success-emphasis">Approved</span></div></div></div>
<img src="https://i.pravatar.cc/64?img=12" alt="Assigned to Marcus" title="Marcus" width="32" height="32" class="tk-av tk-as">
</li><li class="tk-task" data-imp="1">
<div class="form-check m-0 flex-grow-1"><input class="form-check-input" type="checkbox" id="t3"><div class="min-w-0"><label class="form-check-label" for="t3">Application implementation</label><div class="small text-body-secondary d-flex align-items-center gap-2"><span class="text-danger d-inline-flex" title="High priority"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></svg><span class="visually-hidden">High priority</span></span><span>Due today, 5:00 PM</span><span class="badge rounded-pill bg-primary-subtle border border-primary-subtle text-primary-emphasis">In Progress</span></div></div></div>
<img src="https://i.pravatar.cc/64?img=47" alt="Assigned to Priya" title="Priya" width="32" height="32" class="tk-av tk-as">
</li><li class="tk-task" data-imp="0">
<div class="form-check m-0 flex-grow-1"><input class="form-check-input" type="checkbox" id="t4"><div class="min-w-0"><label class="form-check-label" for="t4">Create a dashboard design</label><div class="small text-body-secondary d-flex align-items-center gap-2"><span>Due today, 6:30 PM</span><span class="badge rounded-pill bg-primary-subtle border border-primary-subtle text-primary-emphasis">In Progress</span></div></div></div>
<img src="https://i.pravatar.cc/64?img=15" alt="Assigned to Leo" title="Leo" width="32" height="32" class="tk-av tk-as">
</li><li class="tk-task" data-imp="1">
<div class="form-check m-0 flex-grow-1"><input class="form-check-input" type="checkbox" id="t5"><div class="min-w-0"><label class="form-check-label" for="t5">Interactive design</label><div class="small text-body-secondary d-flex align-items-center gap-2"><span class="text-danger d-inline-flex" title="High priority"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></svg><span class="visually-hidden">High priority</span></span><span>Due tomorrow, 11:00 AM</span><span class="badge rounded-pill bg-warning-subtle border border-warning-subtle text-warning-emphasis">In Review</span></div></div></div>
<img src="https://i.pravatar.cc/64?img=32" alt="Assigned to Ana" title="Ana" width="32" height="32" class="tk-av tk-as">
</li></ul>
<h2 class="h6 fw-bold text-body-emphasis mb-2">Upcoming</h2>
<ul class="list-unstyled tk-list mb-0" id="tkUp"><li class="tk-task" data-imp="0">
<div class="form-check m-0 flex-grow-1"><input class="form-check-input" type="checkbox" id="t6"><div class="min-w-0"><label class="form-check-label" for="t6">Prepare sprint demo</label><div class="small text-body-secondary d-flex align-items-center gap-2"><span>Fri 31 Oct</span><span class="badge rounded-pill bg-secondary-subtle border border-secondary-subtle text-secondary-emphasis">Waiting</span></div></div></div>
<img src="https://i.pravatar.cc/64?img=12" alt="Assigned to Marcus" title="Marcus" width="32" height="32" class="tk-av tk-as">
</li><li class="tk-task" data-imp="1">
<div class="form-check m-0 flex-grow-1"><input class="form-check-input" type="checkbox" id="t7"><div class="min-w-0"><label class="form-check-label" for="t7">Write release notes</label><div class="small text-body-secondary d-flex align-items-center gap-2"><span class="text-danger d-inline-flex" title="High priority"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></svg><span class="visually-hidden">High priority</span></span><span>Mon 3 Nov</span><span class="badge rounded-pill bg-secondary-subtle border border-secondary-subtle text-secondary-emphasis">Waiting</span></div></div></div>
<img src="https://i.pravatar.cc/64?img=47" alt="Assigned to Priya" title="Priya" width="32" height="32" class="tk-av tk-as">
</li></ul>
</section>
<section data-view="notes" aria-label="Notes" hidden>
<h2 class="h6 fw-bold text-body-emphasis mb-2">Notes</h2>
<ul class="list-unstyled m-0 d-grid gap-2"><li class="tk-note"><div class="d-flex justify-content-between gap-2"><span class="fw-semibold text-body-emphasis">Sprint retro</span><span class="small text-body-secondary">Today</span></div><p class="small text-body-secondary mb-0 mt-1">Keep standups under 10 minutes. Move design reviews to Tuesdays so engineering has a full day to react.</p></li><li class="tk-note"><div class="d-flex justify-content-between gap-2"><span class="fw-semibold text-body-emphasis">Onboarding copy</span><span class="small text-body-secondary">Yesterday</span></div><p class="small text-body-secondary mb-0 mt-1">Shorten the welcome step to one sentence and move the tour behind an optional link.</p></li><li class="tk-note"><div class="d-flex justify-content-between gap-2"><span class="fw-semibold text-body-emphasis">Release checklist</span><span class="small text-body-secondary">Mon</span></div><p class="small text-body-secondary mb-0 mt-1">Smoke-test the checkout, confirm analytics events fire, and post the changelog in the team channel.</p></li></ul>
</section>
<section data-view="links" aria-label="Links" hidden>
<h2 class="h6 fw-bold text-body-emphasis mb-2">Links</h2>
<ul class="list-unstyled m-0 d-grid gap-2"><li class="tk-note d-flex align-items-center gap-3"><span class="wdw-icon" style="width:2.5rem;height:2.5rem;border-radius:.75rem"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3A4 4 0 0 0 11 18.700l1-1"/></svg></span><div class="flex-grow-1 min-w-0"><a class="fw-semibold link-underline-opacity-0 text-body-emphasis" href="https://example.com/design-system">Design system</a><div class="small text-body-secondary text-truncate">example.com/design-system</div></div><span class="badge rounded-pill bg-secondary-subtle text-secondary-emphasis">Shared</span></li><li class="tk-note d-flex align-items-center gap-3"><span class="wdw-icon" style="width:2.5rem;height:2.5rem;border-radius:.75rem"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3A4 4 0 0 0 11 18.700l1-1"/></svg></span><div class="flex-grow-1 min-w-0"><a class="fw-semibold link-underline-opacity-0 text-body-emphasis" href="https://example.com/boards/sprint-42">Sprint board</a><div class="small text-body-secondary text-truncate">example.com/boards/sprint-42</div></div><span class="badge rounded-pill bg-secondary-subtle text-secondary-emphasis">Team</span></li><li class="tk-note d-flex align-items-center gap-3"><span class="wdw-icon" style="width:2.5rem;height:2.5rem;border-radius:.75rem"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3A4 4 0 0 0 11 18.700l1-1"/></svg></span><div class="flex-grow-1 min-w-0"><a class="fw-semibold link-underline-opacity-0 text-body-emphasis" href="https://example.com/docs/release-notes">Release notes draft</a><div class="small text-body-secondary text-truncate">example.com/docs/release-notes</div></div><span class="badge rounded-pill bg-secondary-subtle text-secondary-emphasis">Draft</span></li></ul>
</section>
<p class="wdw-muted text-center py-4 mb-0" id="tkEmpty" hidden>No important tasks right now.</p>
</main>
<aside class="tk-right p-3 p-md-4" aria-label="Schedule">
<div class="d-flex align-items-center justify-content-between mb-3"><h2 class="h5 wdw-heading mb-0">Schedule</h2><span class="small wdw-muted">4 events</span></div>
<ul class="list-unstyled m-0 d-grid gap-3"><li class="tk-ev tk-ev-now"><div class="d-flex justify-content-between align-items-start"><div><div class="small wdw-muted">08:00 – 09:00 AM</div><div class="fw-semibold text-body-emphasis">Product review</div></div><span class="badge rounded-pill bg-primary">Now</span></div><div class="d-flex mt-3"><img src="https://i.pravatar.cc/64?img=1" alt="" width="32" height="32" class="tk-av"><img src="https://i.pravatar.cc/64?img=2" alt="" width="32" height="32" class="tk-av"><img src="https://i.pravatar.cc/64?img=3" alt="" width="32" height="32" class="tk-av"><img src="https://i.pravatar.cc/64?img=4" alt="" width="32" height="32" class="tk-av"></div></li>
<li class="tk-ev"><div class="d-flex justify-content-between align-items-start"><div><div class="small wdw-muted">10:00 – 11:00 AM</div><div class="fw-semibold text-body-emphasis">Design meeting</div></div></div><div class="d-flex mt-3"><img src="https://i.pravatar.cc/64?img=5" alt="" width="32" height="32" class="tk-av"><img src="https://i.pravatar.cc/64?img=6" alt="" width="32" height="32" class="tk-av"><img src="https://i.pravatar.cc/64?img=7" alt="" width="32" height="32" class="tk-av"></div></li>
<li class="tk-ev"><div class="d-flex justify-content-between align-items-start"><div><div class="small wdw-muted">01:00 – 02:00 PM</div><div class="fw-semibold text-body-emphasis">Team meeting</div></div></div><div class="d-flex mt-3"><img src="https://i.pravatar.cc/64?img=8" alt="" width="32" height="32" class="tk-av"><img src="https://i.pravatar.cc/64?img=9" alt="" width="32" height="32" class="tk-av"><img src="https://i.pravatar.cc/64?img=10" alt="" width="32" height="32" class="tk-av"><img src="https://i.pravatar.cc/64?img=11" alt="" width="32" height="32" class="tk-av"></div></li>
<li class="tk-ev"><div class="d-flex justify-content-between align-items-start"><div><div class="small wdw-muted">03:00 – 04:00 PM</div><div class="fw-semibold text-body-emphasis">Release event</div></div></div><div class="d-flex mt-3"><img src="https://i.pravatar.cc/64?img=12" alt="" width="32" height="32" class="tk-av"><img src="https://i.pravatar.cc/64?img=13" alt="" width="32" height="32" class="tk-av"><img src="https://i.pravatar.cc/64?img=14" alt="" width="32" height="32" class="tk-av"></div></li>
</ul>
</aside>
</div>
</div>
</section>
/* Web Designer Wall library style — shared base for every Bootstrap 5 snippet.
Indigo accent, Plus Jakarta Sans, soft cards, pill buttons. Works in light and dark. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
:root,
[data-bs-theme="light"] {
--wdw-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--bs-body-font-family: var(--wdw-font);
--bs-primary: #4f46e5;
--bs-primary-rgb: 79, 70, 229;
--bs-primary-text-emphasis: #3730a3;
--bs-primary-bg-subtle: #eef2ff;
--bs-primary-border-subtle: #c7d2fe;
--bs-link-color: #4f46e5;
--bs-link-color-rgb: 79, 70, 229;
--bs-link-hover-color: #4338ca;
--bs-link-hover-color-rgb: 67, 56, 202;
--bs-focus-ring-color: rgba(79, 70, 229, 0.25);
--bs-border-radius: 0.75rem;
--bs-border-radius-lg: 1rem;
--bs-border-radius-xl: 1.25rem;
--wdw-radius-card: 1.25rem;
--wdw-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 16px 40px -16px rgba(16, 24, 40, 0.22);
--wdw-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px -4px rgba(16, 24, 40, 0.12);
--wdw-stage: #f5f6fb;
}
[data-bs-theme="dark"] {
--bs-primary: #818cf8;
--bs-primary-rgb: 129, 140, 248;
--bs-primary-text-emphasis: #c7d2fe;
--bs-primary-bg-subtle: rgba(129, 140, 248, 0.14);
--bs-primary-border-subtle: rgba(129, 140, 248, 0.35);
--bs-link-color: #a5b4fc;
--bs-link-color-rgb: 165, 180, 252;
--bs-link-hover-color: #c7d2fe;
--bs-link-hover-color-rgb: 199, 210, 254;
--bs-focus-ring-color: rgba(129, 140, 248, 0.35);
--wdw-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
--wdw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
--wdw-stage: #0f1117;
}
body { font-family: var(--wdw-font); -webkit-font-smoothing: antialiased; }
/* Bootstrap compiles its blue into these components; point them at the accent. */
.btn-primary {
--bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca;
--bs-btn-active-bg: #3730a3; --bs-btn-active-border-color: #3730a3;
--bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary);
--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0f1117; --bs-btn-hover-bg: #a5b4fc; --bs-btn-hover-border-color: #a5b4fc; --bs-btn-hover-color: #0f1117; --bs-btn-active-color: #0f1117; }
.btn-outline-primary {
--bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary);
--bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary);
--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn { --bs-btn-font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-sm { min-height: 36px; }
.form-control, .form-select { min-height: 44px; border-radius: .75rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: rgba(var(--bs-primary-rgb), .6); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); }
.nav { --bs-nav-link-color: var(--bs-secondary-color); --bs-nav-link-hover-color: var(--bs-emphasis-color); }
.pagination { --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-color: var(--bs-body-color); --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--bs-primary); }
.list-group { --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary); border-radius: .875rem; box-shadow: var(--wdw-shadow-sm); }
.accordion { --bs-accordion-active-bg: var(--bs-primary-bg-subtle); --bs-accordion-active-color: var(--bs-primary-text-emphasis); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.badge { font-weight: 600; }
/* Library building blocks — use these instead of re-inventing them per snippet. */
.wdw-stage { min-height: 100vh; display: flex; align-items: center; background: var(--wdw-stage); padding-block: 3rem; }
.wdw-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: var(--wdw-radius-card); box-shadow: var(--wdw-shadow); }
.wdw-card-sm { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 1rem; box-shadow: var(--wdw-shadow-sm); }
.wdw-aurora { position: relative; color: #fff; background: radial-gradient(60% 55% at 100% 0, #818cf8 0, transparent 70%), radial-gradient(65% 60% at 0 100%, #ec4899 0, transparent 65%), #1e1b4b; }
.wdw-eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-primary); }
.wdw-heading { font-weight: 800; letter-spacing: -.02em; color: var(--bs-emphasis-color); }
.wdw-muted { color: var(--bs-secondary-color); }
.wdw-icon { width: 2.75rem; height: 2.75rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: .875rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
/* Component */
.tk { display: grid; grid-template-columns: 1fr; }
.min-w-0 { min-width: 0; }
@media (min-width: 992px) { .tk { grid-template-columns: 220px 1fr; } }
@media (min-width: 1200px) { .tk { grid-template-columns: 220px 1fr 320px; } }
.tk-side { --bs-offcanvas-width: 280px; }
@media (min-width: 992px) { .tk-side { background: var(--bs-tertiary-bg); border-right: 1px solid var(--bs-border-color-translucent); } }
.tk-right { background: var(--bs-tertiary-bg); border-top: 1px solid var(--bs-border-color-translucent); }
@media (min-width: 1200px) { .tk-right { border-top: 0; border-left: 1px solid var(--bs-border-color-translucent); } }
.tk-nav { width: 100%; display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: 0 .75rem; border: 0; border-radius: .75rem; background: none; color: var(--bs-secondary-color); font-weight: 600; font-size: .925rem; text-align: left; transition: background .15s, color .15s; }
.tk-nav:hover { background: var(--bs-body-bg); color: var(--bs-emphasis-color); }
.tk-nav.active { background: var(--bs-body-bg); color: var(--bs-primary); box-shadow: var(--wdw-shadow-sm); }
.tk-nav:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.tk-dot { width: .6rem; height: .6rem; border-radius: 50%; margin: 0 .45rem 0 .3rem; flex: none; }
.tk-count { font-weight: 600; color: var(--bs-secondary-color); }
.tk-nav .badge.tk-count { background: var(--bs-secondary-bg); }
.tk-tabs { width: fit-content; max-width: 100%; }
.tk-tabs .btn { min-height: 40px; font-weight: 600; padding-inline: .8rem; white-space: nowrap; border: 0; color: var(--bs-secondary-color); flex: 1 1 auto; }
.tk-tabs .btn:hover { color: var(--bs-emphasis-color); }
.tk-tabs .btn.active { background: var(--bs-primary); color: #fff; }
[data-bs-theme="dark"] .tk-tabs .btn.active { color: #0f1117; }
@media (min-width: 576px) { .tk-tabs .btn { padding-inline: 1.1rem; flex: none; } }
.tk-list { border-top: 1px solid var(--bs-border-color-translucent); }
.tk-task { display: flex; align-items: center; gap: 1rem; padding: .5rem .25rem; min-height: 56px; border-bottom: 1px solid var(--bs-border-color-translucent); }
.tk-task .form-check { display: flex; align-items: flex-start; gap: .75rem; padding: 0; }
.tk-task .form-check-input { margin: .15rem 0 0; width: 1.25rem; height: 1.25rem; border-radius: .4rem; flex: none; }
.tk-task .form-check-label { cursor: pointer; font-weight: 500; color: var(--bs-body-color); transition: color .2s; }
.tk-task .form-check-input:checked + .form-check-label { color: var(--bs-secondary-color); text-decoration: line-through; }
.tk-task .badge { font-size: .68rem; flex: none; }
.tk-as { margin: 0; border: 0; }
.tk-note { padding: .85rem 1rem; border: 1px solid var(--bs-border-color-translucent); border-radius: 1rem; background: var(--bs-body-bg); }
.tk-main > section[hidden] { display: none; }
.tk-task[hidden] { display: none; }
.tk-ev { padding: 1rem; border-radius: 1rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); box-shadow: var(--wdw-shadow-sm); }
.tk-ev-now { background: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-border-subtle); }
.tk-av { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--bs-body-bg); margin-left: -.5rem; object-fit: cover; }
.tk-ev-now .tk-av { border-color: var(--bs-primary-bg-subtle); }
.tk-av:first-child { margin-left: 0; }
@media (max-width: 575.98px) { .tk-task { gap: .5rem; } .tk-task .form-check-label { font-size: .9rem; } }
(function () {
function initTaskFilters() {
const app = document.getElementById('taskApp');
if (!app) return;
const tabs = app.querySelectorAll('[data-filter]');
const views = app.querySelectorAll('[data-view]');
const empty = app.querySelector('#tkEmpty');
function apply(filter) {
const view = filter === 'notes' || filter === 'links' ? filter : 'tasks';
views.forEach(v => { v.hidden = v.dataset.view !== view; });
let shown = 0;
app.querySelectorAll('.tk-task').forEach(t => {
const show = filter !== 'important' || t.dataset.imp === '1';
t.hidden = !show;
if (show && view === 'tasks') shown++;
});
app.querySelectorAll('.tk-list').forEach(l => {
const any = l.querySelector('.tk-task:not([hidden])');
l.hidden = !any;
if (l.previousElementSibling) l.previousElementSibling.hidden = !any;
});
empty.hidden = view !== 'tasks' || shown > 0;
}
tabs.forEach(tab => tab.addEventListener('click', () => {
tabs.forEach(t => { t.classList.toggle('active', t === tab); t.setAttribute('aria-pressed', String(t === tab)); });
apply(tab.dataset.filter);
}));
}
function initTaskCount() {
const app = document.getElementById('taskApp');
if (!app) return;
const out = app.querySelector('#tkCount');
const boxes = app.querySelectorAll('.tk-task input');
const update = () => {
const done = [...boxes].filter(b => b.checked).length;
out.textContent = done + ' of ' + boxes.length + ' done';
};
boxes.forEach(b => b.addEventListener('change', update));
update();
}
function initSidebar() {
const items = document.querySelectorAll('#taskApp .tk-side .tk-nav');
items.forEach(i => i.addEventListener('click', () => {
items.forEach(o => { o.classList.toggle('active', o === i); o === i ? o.setAttribute('aria-current', 'page') : o.removeAttribute('aria-current'); });
}));
}
initTaskFilters();
initTaskCount();
initSidebar();
})();
Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.
