Inspect four content recommendations and the information to preserve before a merge

HTML for this example

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Makerspace content audit · preserve before merging</title><style>*{box-sizing:border-box}body{margin:0;background:#f3f1f7;color:#413b50;font:16px/1.55 system-ui,sans-serif}main{max-width:980px;margin:auto;padding:24px}h1{font-size:34px;line-height:1.16}h2{font-size:24px}h3{font-size:19px}.eyebrow{letter-spacing:.06em;color:#776b8b}.card{padding:20px;margin:18px 0;background:white;border:1px solid #d0c6dc;border-radius:6px}.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}button,textarea,select{font:inherit;color:inherit}button{min-height:44px;padding:10px 14px;border:1px solid #89759f;border-radius:4px;background:white;cursor:pointer}button[aria-pressed=true]{background:#73578c;color:white}button:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #b47723;outline-offset:3px}.inventory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.inventory button{text-align:left;background:#faf8fc}.inventory strong{display:block}.dependency{background:#fff8e7;border-left:6px solid #bf913d}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:16px}.comparison>div{padding:16px;background:#f5f0f8}code{overflow-wrap:anywhere;font:inherit}.record p{overflow-wrap:anywhere}label{display:block;font-weight:650;margin:14px 0 6px}textarea,select{width:100%;max-width:100%;min-width:0;padding:10px;border:1px solid #a294b4;border-radius:4px;background:white}textarea{min-height:95px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#7a531d}footer{margin:24px 0;color:#776987}[hidden]{display:none!important}@media(max-width:560px){main{padding:12px}h1{font-size:28px}.card{padding:14px}.inventory,.comparison{grid-template-columns:1fr}}</style></head><body><main><p class="eyebrow">FICTIONAL COMMUNITY MAKERSPACE · SEPTEMBER 2026 SAMPLE MONTH</p><h1>A merge is a preservation task before it is a path decision</h1><p>All paths are specimen labels. Views are illustrative counts for the same sample month, not real analytics or an SEO forecast.</p><div class="tabs" aria-label="Filter proposed content actions"><button id="all" type="button" aria-pressed="true">All</button><button id="keep-filter" type="button" aria-pressed="false">Keep</button><button id="combine-filter" type="button" aria-pressed="false">Combine / merge</button><button id="archive-filter" type="button" aria-pressed="false">Archive</button><button id="review-filter" type="button" aria-pressed="false">Review needed</button></div><p id="filter-count" role="status">4 proposed items shown</p><nav id="inventory" class="inventory" aria-label="Audit items"></nav><section class="card record" aria-live="polite"><h2 id="item-title">C1 · /join</h2><p><strong>Reader task:</strong> <span id="task-out">Current joining guide.</span></p><p><strong>Current source / owner:</strong> <span id="source-out">Owner reviewed FeeSheet-v3.</span></p><p><strong>Sample views:</strong> <span id="views-out">420 · September 2026 illustrative month.</span></p><p><strong>Proposed action:</strong> <span id="action-out">Keep.</span></p><p><strong>Reason:</strong> <span id="reason-out">Current reviewed source supports the active joining task in this fictional inventory.</span></p><p class="dependency"><strong>Dependency / next work:</strong> <span id="dependency-out">Use as the receiving guide only after reviewing C2's unique note and reconciling the joining content.</span></p><p>The inspected item can stay open outside the filtered list. Filters group recommendations; they do not edit the site.</p></section><div class="tabs"><button id="duplicates" type="button" aria-expanded="false" aria-controls="duplicate-view">Inspect duplicate pair</button><button id="low" type="button" aria-expanded="false" aria-controls="low-view">Low-traffic comparison</button></div><section id="duplicate-view" class="card" hidden><h2>Shared task, unique material</h2><div class="comparison"><div><h3>C1 · receiving guide</h3><p>/join serves the joining task with owner-reviewed FeeSheet-v3.</p></div><div><h3>C2 · material to review</h3><p>/joining-faq repeats joining steps, uses FeeSheet-v1 and contains a unique accessibility note. Its actual wording is not supplied.</p></div></div><h3>Before retiring C2</h3><ol><li>Owner reviews the unique accessibility note; preserve useful confirmed wording in C1.</li><li>Reconcile joining information against FeeSheet-v3.</li><li>Ask the owner how to handle the old path, including the redirect decision.</li></ol><p>No note has been moved and no redirect or retirement has occurred.</p></section><section id="low-view" class="card" hidden><h2>Low views do not settle the action</h2><div class="comparison"><div><h3>C3 · 12 illustrative views</h3><p>A past exhibition announcement. Proposed archive retains historical context and needs an accessibility/status decision for archived material.</p></div><div><h3>C4 · 18 illustrative views</h3><p>A current orientation task with owner confirmation missing. Review needed; the record does not establish that the page is unnecessary.</p></div></div><p>Archive is distinct from deletion. Neither age nor a small view count supplies a complete decision.</p></section><section class="card"><h2>Your local audit item</h2><div id="fields"></div><label for="own-action">Recommended action · required</label><select id="own-action"><option value="">Choose an action</option><option>Keep</option><option>Rewrite</option><option>Combine</option><option>Remove</option><option>Archive</option><option>Review needed</option></select><div class="tabs"><button id="build" type="button">Build recommendation review</button><button id="reset" type="button">Reset typed work</button></div><p id="status" role="status"></p><section id="confirm" hidden><h3>Clear all ten audit fields?</h3><div class="tabs"><button id="keep" type="button">Keep my item</button><button id="clear" type="button">Clear typed item</button></div></section><section id="review" class="card copy" hidden><h3 id="own-title"></h3><div id="copy"></div><p>User-proposed action only. No page edit, removal, archive or redirect has been performed.</p></section></section><footer>Temporary audit review only. No CMS connection, page deletion, redirect creation or saved audit record. Confirm content and path dependencies before acting.</footer></main><script>'use strict';const $=id=>document.getElementById(id),items=[{id:'c1',path:'/join',task:'Current joining guide.',source:'Owner reviewed FeeSheet-v3.',views:420,action:'Keep',reason:'Current reviewed source supports the active joining task in this fictional inventory.',dependency:'Use as the receiving guide only after reviewing C2’s unique note and reconciling the joining content.'},{id:'c2',path:'/joining-faq',task:'Joining steps; overlaps C1 and includes a unique accessibility note.',source:'Older FeeSheet-v1. Unique note needs owner review.',views:95,action:'Combine',reason:'Same joining task, older price source, useful unique material that must be reviewed before retirement.',dependency:'Review the unique accessibility note for C1, reconcile against FeeSheet-v3, and obtain the owner’s old-path/redirect decision.'},{id:'c3',path:'/news/autumn-2024',task:'Historical exhibition announcement.',source:'Past event context in this fictional inventory.',views:12,action:'Archive',reason:'Past announcement can retain historical value when distinguished from current news.',dependency:'Decide how archived context stays accessible and visibly historical; archiving is not deletion.'},{id:'c4',path:'/safety-orientation',task:'Current orientation task.',source:'Owner confirmation missing; current accuracy not established.',views:18,action:'Review needed',reason:'A current reader task needs owner review. Low traffic does not establish unnecessary content.',dependency:'Obtain owner confirmation and review current facts before deciding what should change.'}];let filter='all';function list(){const action={'keep-filter':'Keep','combine-filter':'Combine','archive-filter':'Archive','review-filter':'Review needed'}[filter],rows=items.filter(i=>!action||i.action===action);$('inventory').replaceChildren();for(const item of rows){const b=document.createElement('button');b.type='button';b.id=item.id;const h=document.createElement('strong');h.textContent=item.id.toUpperCase()+' · '+item.path;const s=document.createElement('span');s.textContent=item.action+' · '+item.views+' sample views';b.append(h,s);b.addEventListener('click',()=>show(item));$('inventory').append(b);}$('filter-count').textContent=rows.length+' proposed items shown';for(const id of ['all','keep-filter','combine-filter','archive-filter','review-filter'])$(id).setAttribute('aria-pressed',String(id===filter));}function show(item){$('item-title').textContent=item.id.toUpperCase()+' · '+item.path;for(const[k,target]of [['task','task-out'],['source','source-out'],['action','action-out'],['reason','reason-out'],['dependency','dependency-out']])$(target).textContent=item[k];$('views-out').textContent=item.views+' · September 2026 illustrative month.';}for(const id of ['all','keep-filter','combine-filter','archive-filter','review-filter'])$(id).addEventListener('click',()=>{filter=id;list();});list();for(const[button,panel]of [['duplicates','duplicate-view'],['low','low-view']])$(button).addEventListener('click',()=>{const open=$(panel).hidden;$(panel).hidden=!open;$(button).setAttribute('aria-expanded',String(open));});const fields=[['own-id','Item ID'],['path','Page or asset reference · required'],['task','Reader task · required'],['owner','Owner and review status'],['facts','Current factual source and version'],['usage','Usage metric, period and limits'],['reason','Action rationale · required'],['dependency','Dependency, receiving page and path decision'],['next','Next review']];for(const[id,label]of fields){const l=document.createElement('label'),t=document.createElement('textarea');l.htmlFor=id;l.textContent=label;t.id=id;$('fields').append(l,t);}const ids=fields.map(x=>x[0]).concat('own-action');for(const id of ids)$(id).addEventListener('input',()=>{$('review').hidden=true;$('status').textContent='Audit item changed. Build again to review current wording.';});$('build').addEventListener('click',()=>{const missing=['path','task','own-action','reason'].filter(id=>!$(id).value.trim());$('review').hidden=true;if(missing.length){$('status').textContent='Complete: '+missing.map(id=>({path:'page reference',task:'reader task','own-action':'recommended action',reason:'action rationale'})[id]).join(', ')+'.';return;}$('own-title').textContent='Proposed '+$('own-action').value+' · '+$('path').value;$('copy').replaceChildren();for(const[id,title]of fields){const h=document.createElement('h3'),p=document.createElement('p');h.textContent=title;p.textContent=$(id).value.trim()||'Not supplied.';$('copy').append(h,p);}$('review').hidden=false;$('status').textContent='Recommendation review assembled from supplied words; site unchanged.';});$('reset').addEventListener('click',()=>{$('confirm').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirm').hidden=true;$('reset').focus();});$('clear').addEventListener('click',()=>{for(const id of ids)$(id).value='';$('review').hidden=true;$('confirm').hidden=true;$('status').textContent='Ten audit fields cleared. Worked inventory and selected item are unchanged.';$('path').focus();});</script></body></html>