nick/nick-doc
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

docs: add telegram roadmap and refresh share page

Browse Source
This commit is contained in:
Siavash Sameni
2026-05-24 09:30:35 +04:00
parent 28ff0642b2
commit 5188cba9e2
2 changed files with 483 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

394
taskmaster-share/index.html
View File

@@ -6,170 +6,385 @@
<title>Amanat Taskmaster Queue</title>
<style>
:root {
--ink: #172018;
--muted: #667064;
--paper: #fbf6e8;
--panel: #fffdf5;
--line: #ded5bd;
--green: #1c7c54;
--amber: #b7791f;
--red: #b42318;
--blue: #245b84;
--shadow: 0 18px 60px rgba(39, 32, 18, 0.14);
--ink: #10100f;
--muted: #6f716c;
--paper: #f4f2eb;
--panel: #ffffff;
--soft: #e8e4d8;
--line: #d8d3c5;
--green: #169b62;
--amber: #c98616;
--red: #d64c3c;
--blue: #3568ff;
--black: #10100f;
--shadow: 0 20px 60px rgba(16, 16, 15, 0.08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--ink);
background:
radial-gradient(circle at 15% 10%, rgba(28, 124, 84, 0.18), transparent 28rem),
radial-gradient(circle at 90% 5%, rgba(183, 121, 31, 0.16), transparent 24rem),
linear-gradient(135deg, #f7efd9 0%, #fbf6e8 48%, #edf4ea 100%);
background: var(--paper);
min-height: 100vh;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
linear-gradient(rgba(16, 16, 15, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(16, 16, 15, 0.035) 1px, transparent 1px);
background-size: 52px 52px;
mask-image: linear-gradient(to bottom, black, transparent 72%);
}
header {
padding: 48px clamp(18px, 4vw, 64px) 28px;
border-bottom: 1px solid rgba(80, 67, 41, 0.18);
padding: 22px clamp(18px, 4vw, 56px) 30px;
}
.topbar {
max-width: 1280px;
margin: 0 auto 72px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--ink);
font-size: 0.9rem;
font-weight: 800;
letter-spacing: 0.02em;
text-decoration: none;
text-transform: uppercase;
}
.brand-mark {
width: 28px;
height: 28px;
border: 2px solid var(--ink);
border-radius: 50%;
display: inline-grid;
place-items: center;
font-size: 0.78rem;
}
.nav {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.nav a {
color: var(--ink);
text-decoration: none;
border: 1px solid transparent;
border-radius: 999px;
padding: 9px 13px;
font-size: 0.88rem;
font-weight: 700;
}
.nav a:hover,
.nav .active {
background: var(--black);
color: #fff;
}
.hero {
max-width: 1180px;
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
gap: 28px;
align-items: end;
grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
gap: clamp(28px, 5vw, 72px);
align-items: center;
}
h1 {
font-size: clamp(2.4rem, 6vw, 5.8rem);
line-height: 0.9;
letter-spacing: -0.06em;
font-size: clamp(3.2rem, 10vw, 9.6rem);
line-height: 0.82;
letter-spacing: 0;
margin: 0;
font-weight: 900;
max-width: 8ch;
}
.lead {
color: var(--muted);
font-size: 1.1rem;
max-width: 760px;
line-height: 1.65;
margin: 22px 0 0;
font-size: clamp(1.02rem, 1.5vw, 1.25rem);
max-width: 720px;
line-height: 1.45;
margin: 28px 0 0;
}
.stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
gap: 10px;
}
.stat {
background: rgba(255, 253, 245, 0.78);
min-height: 132px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 22px;
border-radius: 8px;
padding: 18px;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.stat strong {
display: block;
font-size: clamp(2.2rem, 4vw, 4.2rem);
line-height: 0.85;
letter-spacing: 0;
}
.stat span {
color: var(--muted);
font-size: 0.82rem;
font-weight: 800;
text-transform: uppercase;
}
.stat strong { display: block; font-size: 2.1rem; line-height: 1; }
.stat span { color: var(--muted); font-size: 0.9rem; }
main {
max-width: 1180px;
max-width: 1280px;
margin: 0 auto;
padding: 28px clamp(18px, 4vw, 64px) 64px;
padding: 36px clamp(18px, 4vw, 56px) 72px;
}
.toolbar {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 22px;
justify-content: space-between;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 16px 0;
margin-bottom: 30px;
}
input, select, a.button {
border: 1px solid var(--line);
background: rgba(255, 253, 245, 0.86);
input, select, a.button, .status-pill {
border: 1px solid var(--black);
background: transparent;
border-radius: 999px;
padding: 12px 16px;
padding: 12px 15px;
color: var(--ink);
font: inherit;
text-decoration: none;
font-size: 0.9rem;
font-weight: 750;
}
input { min-width: min(100%, 360px); flex: 1; }
.task {
background: rgba(255, 253, 245, 0.9);
input {
min-width: min(100%, 320px);
flex: 1 1 320px;
background: var(--panel);
}
select {
appearance: none;
background: var(--panel);
cursor: pointer;
}
a.button {
background: var(--black);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.roadmap-tabs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 0 0 18px;
}
.status-pill {
border-color: var(--line);
background: var(--panel);
min-height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.status-pill::after {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--muted);
}
.status-pill.done::after { background: var(--green); }
.status-pill.progress::after { background: var(--blue); }
.status-pill.planned::after { background: var(--amber); }
#tasks {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
align-items: start;
}
.roadmap-column {
display: grid;
gap: 14px;
align-content: start;
}
.column-title {
position: sticky;
top: 0;
z-index: 2;
background: rgba(244, 242, 235, 0.92);
backdrop-filter: blur(12px);
border: 1px solid var(--line);
border-radius: 30px;
padding: clamp(20px, 3vw, 32px);
border-radius: 8px;
padding: 12px 14px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.column-title span:last-child {
color: var(--muted);
letter-spacing: 0;
}
.task {
position: relative;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 8px;
padding: clamp(18px, 2.4vw, 26px);
box-shadow: var(--shadow);
margin: 18px 0;
margin: 0;
overflow: clip;
}
.task::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 5px;
background: var(--amber);
}
.task[data-status="done"]::before { background: var(--green); }
.task[data-status="in-progress"]::before { background: var(--blue); }
.task[data-priority="high"] {
border-color: rgba(16, 16, 15, 0.32);
}
.task-head, .subtask-top {
display: flex;
justify-content: space-between;
gap: 16px;
gap: 14px;
align-items: flex-start;
}
.eyebrow {
color: var(--green);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
margin: 0 0 6px;
color: var(--muted);
margin: 0 0 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.78rem;
font-size: 0.72rem;
font-weight: 900;
}
h2 {
font-size: clamp(1.35rem, 2vw, 2rem);
line-height: 0.98;
margin: 0;
letter-spacing: 0;
font-weight: 900;
}
h3 {
margin: 24px 0 10px;
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
h2 { font-size: clamp(1.45rem, 3vw, 2.4rem); line-height: 1; margin: 0; letter-spacing: -0.035em; }
h3 { margin: 24px 0 10px; }
.desc, details p, .subtask p { color: var(--muted); line-height: 1.55; }
.desc {
font-size: 0.98rem;
margin: 18px 0 0;
}
details {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 14px 0;
margin-top: 18px;
}
summary { cursor: pointer; color: var(--blue); font-weight: 700; }
summary {
cursor: pointer;
color: var(--ink);
font-weight: 850;
font-size: 0.92rem;
}
.badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.badge {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 5px 10px;
font: 700 0.78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
background: #ece5d2;
padding: 6px 9px;
font-size: 0.68rem;
font-weight: 900;
line-height: 1;
background: var(--soft);
color: var(--ink);
margin-left: 6px;
white-space: nowrap;
text-transform: uppercase;
}
.done { background: rgba(28, 124, 84, 0.13); color: var(--green); }
.pending { background: rgba(183, 121, 31, 0.14); color: var(--amber); }
.in-progress { background: rgba(36, 91, 132, 0.13); color: var(--blue); }
.blocked, .critical { background: rgba(180, 35, 24, 0.12); color: var(--red); }
.priority-high { background: rgba(180, 35, 24, 0.12); color: var(--red); }
.priority-medium { background: rgba(183, 121, 31, 0.14); color: var(--amber); }
.priority-low { background: rgba(102, 112, 100, 0.12); color: var(--muted); }
.done { background: rgba(22, 155, 98, 0.12); color: #09683f; }
.pending { background: rgba(201, 134, 22, 0.14); color: #8a5709; }
.in-progress { background: rgba(53, 104, 255, 0.12); color: #264fca; }
.blocked, .critical { background: rgba(214, 76, 60, 0.14); color: #a83327; }
.priority-high { background: var(--black); color: #fff; }
.priority-medium { background: rgba(16, 16, 15, 0.08); color: var(--ink); }
.priority-low { background: rgba(111, 113, 108, 0.12); color: var(--muted); }
.subtasks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.subtask {
border: 1px solid rgba(80, 67, 41, 0.16);
border-radius: 18px;
padding: 14px;
background: rgba(247, 239, 217, 0.48);
border-top: 1px solid var(--line);
padding: 14px 0 0;
background: transparent;
}
.sub-id {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--green);
color: var(--muted);
font-weight: 800;
min-width: 42px;
}
.subtask strong { flex: 1; line-height: 1.2; }
.subtask p { margin: 9px 0 0 56px; font-size: 0.9rem; }
.deps { font-size: 0.9rem; color: var(--blue) !important; }
footer { color: var(--muted); text-align: center; padding: 30px; }
footer {
color: var(--muted);
border-top: 1px solid var(--line);
text-align: center;
padding: 30px;
font-size: 0.9rem;
}
@media (max-width: 1100px) {
#tasks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
header { padding-top: 16px; }
.topbar { margin-bottom: 48px; align-items: flex-start; }
.nav { display: none; }
.hero { grid-template-columns: 1fr; }
.stats { grid-template-columns: repeat(2, 1fr); }
.roadmap-tabs, #tasks { grid-template-columns: 1fr; }
.task-head, .subtask-top { flex-direction: column; }
.badges { justify-content: flex-start; }
.subtask p { margin-left: 0; }
}
</style>
</head>
<body>
<header>
<nav class="topbar" aria-label="Primary">
<a class="brand" href="#">
<span class="brand-mark">A</span>
Amanat
</a>
<div class="nav">
<a class="active" href="#tasks">Roadmap</a>
<a href="#search">Filter</a>
<a href="tasks.json">JSON</a>
</div>
</nav>
<section class="hero">
<div>
<p class="eyebrow">Amanat docs · Taskmaster</p>
<h1>Developer task queue</h1>
<p class="lead">A shareable static view of the docs-side Taskmaster queue generated from the PRDs and latest backend security/refactor audit. Use this page for planning; use Taskmaster CLI for status updates.</p>
<h1>Roadmap</h1>
<p class="lead">A public planning view generated from the docs-side Taskmaster queue. Track security remediation, payment architecture, refactor decisions, and completed documentation work from one place.</p>
</div>
<aside class="stats">
<div class="stat"><strong>4</strong><span>parent tasks</span></div>
@@ -186,6 +401,11 @@
<select id="priority"><option value="">All priorities</option><option>high</option><option>medium</option><option>low</option></select>
<a class="button" href="tasks.json">Raw JSON</a>
</div>
<div class="roadmap-tabs" aria-label="Roadmap columns">
<div class="status-pill done">Shipped</div>
<div class="status-pill progress">In progress</div>
<div class="status-pill planned">Planned</div>
</div>
<section id="tasks">
<article class="task" data-status="pending" data-priority="high">
<div class="task-head">
@@ -525,6 +745,28 @@
</main>
<footer>Generated from <code>.taskmaster/tasks/tasks.json</code>. Last docs update: 2026-05-24T00:00:00.000Z</footer>
<script>
const taskSection = document.querySelector('#tasks');
const originalCards = [...taskSection.querySelectorAll('.task')];
const columns = [
{ key: 'done', title: 'Shipped' },
{ key: 'in-progress', title: 'In progress' },
{ key: 'pending', title: 'Planned' }
];
taskSection.innerHTML = '';
const columnMap = new Map();
for (const column of columns) {
const wrapper = document.createElement('div');
wrapper.className = 'roadmap-column';
wrapper.dataset.column = column.key;
const count = originalCards.filter((card) => card.dataset.status === column.key).length;
wrapper.innerHTML = `<div class="column-title"><span>${column.title}</span><span>${count}</span></div>`;
taskSection.appendChild(wrapper);
columnMap.set(column.key, wrapper);
}
for (const card of originalCards) {
const target = columnMap.get(card.dataset.status) || columnMap.get('pending');
target.appendChild(card);
}
const search = document.querySelector('#search');
const status = document.querySelector('#status');
const priority = document.querySelector('#priority');
@@ -540,6 +782,10 @@
const searchMatch = !q || text.includes(q);
card.style.display = statusMatch && priorityMatch && searchMatch ? '' : 'none';
}
for (const column of document.querySelectorAll('.roadmap-column')) {
const visibleCards = [...column.querySelectorAll('.task')].filter((card) => card.style.display !== 'none').length;
column.style.display = visibleCards ? '' : 'none';
}
}
search.addEventListener('input', applyFilters);
status.addEventListener('change', applyFilters);