Tablerデザインシステム.

<main class="project-log"><header class="page-header d-print-none"><div class="row align-items-center"><div class="col"><div class="page-pretitle">TABLER · PROJECT JOURNAL</div><h1 class="page-title">Atlas field notes</h1><p class="text-secondary mt-2 mb-0">Decisions, prototypes and review checkpoints for a small editorial project.</p></div><div class="col-auto d-flex gap-2"><button id="theme" class="btn" aria-pressed="false">Dark mode</button><button id="add" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#entry-modal">Add checkpoint</button></div></div></header><div class="row g-4 mt-1"><section class="col-lg-8" aria-label="Project checkpoints"><ul id="timeline" class="timeline"><li class="timeline-event"><div class="timeline-event-icon bg-blue-lt" aria-hidden="true">AM</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">A clearer route through the issue</h2><span class="badge bg-blue-lt">Decision</span></div><div class="text-secondary small mb-3">Alex Morgan · 02 OCT</div><p class="mb-0">Group the field essays by landscape rather than author. Each chapter opens with a short map and a single question.</p></div></div></li><li class="timeline-event"><div class="timeline-event-icon bg-purple-lt" aria-hidden="true">JC</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">Three cover directions</h2><span class="badge bg-purple-lt">Prototype</span></div><div class="text-secondary small mb-3">Jules Chen · 01 OCT</div><div class="cover-strip" aria-label="Three original cover studies"><div><b>ATLAS</b><i></i><small>RIDGE / 01</small></div><div><b>ATLAS</b><i></i><small>RIVER / 02</small></div><div><b>ATLAS</b><i></i><small>PLAIN / 03</small></div></div><p class="mt-3 mb-0">Compare the quiet title treatment against the stronger geographic silhouette before selecting a direction.</p></div></div></li><li class="timeline-event"><div class="timeline-event-icon bg-green-lt" aria-hidden="true">SR</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">Reference package reviewed</h2><span class="badge bg-green-lt">Review</span></div><div class="text-secondary small mb-3">Sam Rivera · 30 SEP</div><p class="mb-0">Image captions, credit lines and print dimensions are recorded alongside each selected reference.</p></div></div></li></ul></section><aside class="col-lg-4"><div class="card"><div class="card-header"><h2 class="card-title">Project context</h2></div><div class="card-body"><div class="datagrid"><div class="datagrid-item"><div class="datagrid-title">Format</div><div class="datagrid-content">Editorial field journal</div></div><div class="datagrid-item"><div class="datagrid-title">Team</div><div class="datagrid-content"><span class="avatar avatar-xs me-1">AM</span><span class="avatar avatar-xs me-1">JC</span><span class="avatar avatar-xs">SR</span></div></div><div class="datagrid-item"><div class="datagrid-title">Checkpoints</div><div id="count" class="datagrid-content">3 recorded</div></div><div class="datagrid-item"><div class="datagrid-title">Current focus</div><div class="datagrid-content">Cover selection</div></div></div></div><div class="card-footer text-secondary">Sample project. New entries stay in this page.</div></div><div class="card mt-4"><div class="card-body"><h2 class="card-title">A useful checkpoint</h2><p class="text-secondary">Record the decision and the reason together. A future reader should understand what changed without reopening the meeting.</p><p class="mb-0 small">Choose Decision, Prototype or Review when adding a local entry.</p></div></div></aside></div><div id="notice" class="alert alert-success mt-3" role="status" hidden></div></main><div id="entry-modal" class="modal modal-blur fade" tabindex="-1" aria-labelledby="entry-title" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><form id="entry-form"><div class="modal-header"><h2 id="entry-title" class="modal-title">Add a local checkpoint</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div class="mb-3"><label for="entry-name" class="form-label">Title</label><input id="entry-name" class="form-control" required minlength="5" maxlength="80" placeholder="What changed?"></div><div class="mb-3"><label for="entry-type" class="form-label">Kind</label><select id="entry-type" class="form-select"><option>Decision</option><option>Prototype</option><option>Review</option></select></div><div><label for="entry-detail" class="form-label">Reason or evidence</label><textarea id="entry-detail" class="form-control" required minlength="15" maxlength="360" rows="4" placeholder="Explain why this checkpoint matters."></textarea></div></div><div class="modal-footer"><button type="button" class="btn" data-bs-dismiss="modal">Cancel</button><button class="btn btn-primary" type="submit">Add to journal</button></div></form></div></div></div>

const q=s=>document.querySelector(s),modalEl=q('#entry-modal');let count=3;
modalEl.addEventListener('shown.bs.modal',()=>q('#entry-name').focus());
q('#theme').onclick=e=>{let dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';e.currentTarget.setAttribute('aria-pressed',String(dark));e.currentTarget.textContent=dark?'Light mode':'Dark mode';};
q('#entry-form').onsubmit=e=>{e.preventDefault();const title=q('#entry-name'),detail=q('#entry-detail'),kind=q('#entry-type').value;if(title.value.trim().length<5){title.setCustomValidity('Use at least five non-space characters.');title.reportValidity();return;}if(detail.value.trim().length<15){detail.setCustomValidity('Use at least fifteen non-space characters.');detail.reportValidity();return;}const li=document.createElement('li');li.className='timeline-event';const color={Decision:'blue',Prototype:'purple',Review:'green'}[kind];li.innerHTML=`<div class="timeline-event-icon bg-${color}-lt" aria-hidden="true">YOU</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1"></h2><span class="badge bg-${color}-lt"></span></div><div class="text-secondary small mb-3">You · LOCAL ENTRY</div><p class="mb-0"></p></div></div>`;li.querySelector('h2').textContent=title.value.trim();li.querySelector('.badge').textContent=kind;li.querySelector('p').textContent=detail.value.trim();q('#timeline').prepend(li);q('#count').textContent=`${++count} recorded`;tabler.Modal.getInstance(modalEl).hide();q('#notice').hidden=false;q('#notice').textContent=`Local ${kind.toLowerCase()} added: ${title.value.trim()}. No project service was updated.`;e.target.reset();};['#entry-name','#entry-detail'].forEach(s=>q(s).oninput=e=>e.target.setCustomValidity(''));

html,body{min-height:0;height:auto}body{margin:0}.project-log{max-width:1160px;padding:32px;margin:auto}.project-log .page-header{margin:0 0 24px}.project-log .page-title{font-size:32px;line-height:1.2}.cover-strip{display:flex;gap:12px}.cover-strip>div{flex:1;min-width:0;height:155px;padding:14px;background:#d6dfd2;color:#334834;position:relative;overflow:hidden;border-radius:4px}.cover-strip>div:nth-child(2){background:#cbdbe3;color:#2d4857}.cover-strip>div:nth-child(3){background:#e9d9bc;color:#6a5439}.cover-strip b{letter-spacing:.15em;font-size:14px}.cover-strip i{position:absolute;width:120px;height:90px;border-radius:50%;background:currentColor;opacity:.2;left:20%;top:38%;transform:rotate(-25deg)}.cover-strip>div:nth-child(2) i{width:40px;height:150px;top:30%;left:50%;border-radius:40%}.cover-strip>div:nth-child(3) i{width:160px;height:60px;top:45%;left:10%;border-radius:0;transform:rotate(-12deg)}.cover-strip small{position:absolute;bottom:12px;left:14px;font-size:9px;letter-spacing:.12em}[hidden]{display:none!important}.timeline-event-card .badge{height:fit-content;white-space:nowrap}.timeline-event-card p{line-height:1.65}.timeline-event-icon{font-size:11px;font-weight:700}@media(max-width:650px){.project-log{padding:24px 14px}.project-log .page-title{font-size:27px}.page-header .col-auto{width:100%;margin-top:16px}.cover-strip{gap:6px}.cover-strip>div{height:120px;padding:8px}.cover-strip b{font-size:10px}.cover-strip small{left:8px;font-size:7px}.timeline-event-card .d-flex{flex-wrap:wrap}.timeline-event-card{margin-inline-start:calc(var(--tblr-timeline-icon-size) + 12px)}}