A fictional Saturday story-session release, its source facts, and a promotional headline revised to match them
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>Press release · a fact-first review copy</title>
<style>
*{box-sizing:border-box}body{margin:0;color:#18372e;background:#f5f2e9;font:17px/1.65 Georgia,serif}main{max-width:960px;margin:auto;padding:26px}h1{font-size:clamp(29px,5vw,43px);line-height:1.15;margin:12px 0 18px}h2{font-size:25px;line-height:1.3}h3{font-size:20px;line-height:1.35}p{margin:12px 0}button,input,textarea{font:inherit}button{color:#18372e;background:white;border:1px solid #698579;border-radius:5px;padding:11px 15px;cursor:pointer}button[aria-pressed=true]{background:#183e30;color:white}button:hover{border-color:#1c4133}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b95b12;outline-offset:3px}nav,.choices{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}section,.paper{background:#fffefa;border:1px solid #c6cfc4;border-radius:7px;padding:22px;margin:20px 0}.eyebrow{font:700 16px/1.4 system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase}.notice,.gap{padding:13px 16px;background:#ebe8da;border-left:4px solid #9b661f}.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.fact{padding:15px;background:#edf3eb;border-top:3px solid #6f8c72}.fact p{margin:5px 0}.fact strong,.label{font-family:system-ui,sans-serif}.trace{background:#e9f2e7;border-left:4px solid #416d46;padding:17px}#selected-wording{font-size:20px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid>div{min-width:0}label{display:block;font:600 16px/1.5 system-ui,sans-serif;margin:18px 0 7px}input,textarea{width:100%;border:1px solid #829a8b;border-radius:4px;padding:11px;background:white;color:#18372e;line-height:1.5}textarea{min-height:105px;resize:vertical}.wide{grid-column:1/-1}footer{border-top:1px solid #bbc8b9;padding:20px 0;font-size:16px}.small{font:16px/1.6 system-ui,sans-serif}#confirmation{padding:16px;background:#fff0db;margin-top:18px}#confirmation button{margin:6px 6px 0 0}[hidden]{display:none!important}button,section,p,h1,h2,h3,.fact{overflow-wrap:anywhere}@media(max-width:560px){main{padding:17px}.facts,.grid{grid-template-columns:1fr}section,.paper{padding:17px}nav button{flex:1 1 140px}.wide{grid-column:auto}}
</style></head><body><main>
<header><div class="eyebrow">Editorial desk · original fictional example</div><h1>Lead with the news.<br>Keep its basis in view.</h1><p>Review one proposed announcement beside its source facts. An event date does not grant permission to release it.</p><p class="notice">Cedar Lane Reading Room and its sessions are fictional teaching material. This is an unissued draft; no real event, contact or approval is represented.</p></header>
<nav aria-label="Review views"><button id="facts" aria-pressed="true">Supplied fact packet</button><button id="release" aria-pressed="false">Complete teaching release</button><button id="details" aria-pressed="false">Release details</button></nav>
<section id="facts-view"><h2>The supplied fact packet</h2><div class="facts">
<div class="fact"><strong>F1 · The announcement</strong><p>Cedar Lane Reading Room plans a new Saturday story-session series.</p></div>
<div class="fact"><strong>F2 · Session dates</strong><p>November 14, 21, and 28, 2026. The series starts November 14.</p></div>
<div class="fact"><strong>F3 · Time</strong><p>Each session: 10:00–10:45 a.m., America/New_York.</p></div>
<div class="fact"><strong>F4 · Place</strong><p>The reading room's main room. No street address is supplied.</p></div>
<div class="fact"><strong>F5 · Attendance</strong><p>Families with children. Attendance is free; no registration required.</p></div>
<div class="fact"><strong>F6 · Organization description</strong><p>The reading room offers shared reading activities.</p></div></div><p class="small">These six facts are the complete authored packet. No quotation, popularity evidence, previous program, outcome, photo or external link is supplied.</p></section>
<section id="release-view" hidden><p class="eyebrow">Draft for review · Release approval: TO CONFIRM</p><p><strong>Draft date:</strong> TO CONFIRM</p><h2>Cedar Lane Reading Room plans new Saturday story sessions starting November 14</h2><p>Cedar Lane Reading Room plans a new series of free Saturday story sessions for families with children, beginning November 14, 2026, in its main room.</p><p>Sessions are scheduled for November 14, 21, and 28, 2026, from 10:00 to 10:45 a.m. each day, in the America/New_York time zone. No registration is required.</p><h3>About Cedar Lane Reading Room</h3><p>Cedar Lane Reading Room offers shared reading activities.</p><h3>Media contact</h3><p>Name and role: TO CONFIRM<br>Phone and email: TO CONFIRM</p><p class="gap">Location details, media contact, actual release timing and required submission format remain to confirm. No quotation is supplied. This review copy has not been issued.</p></section>
<section id="details-view" hidden><h2>Two different kinds of timing</h2><div class="grid"><div><h3>Known event schedule · F2–F3</h3><p>The first session is November 14, 2026. Further sessions are November 21 and 28; each runs 10:00–10:45 a.m., America/New_York.</p></div><div><h3>Release decisions still open</h3><p>Draft date: TO CONFIRM<br>Release approval and timing: TO CONFIRM<br>Media contact: TO CONFIRM<br>Location details and required format: TO CONFIRM</p></div></div><p class="gap">Selecting a view, editing wording or resetting notes does not approve an announcement. “For immediate release” cannot be inferred from the event dates.</p></section>
<section><h2>Trace the wording to its facts</h2><div class="choices" role="group" aria-label="Wording to inspect"><button id="headline" aria-pressed="true">Headline</button><button id="lead" aria-pressed="false">Lead</button><button id="dates" aria-pressed="false">Session dates</button></div><div class="trace" aria-live="polite"><h3 id="selected-label">Headline · F1–F2</h3><p id="selected-wording">Cedar Lane Reading Room plans new Saturday story sessions starting November 14</p><p id="selected-basis">F1 supplies a new series; F2 supplies its November 14 start. Neither establishes that an earlier program is returning.</p></div><p><button id="compare" aria-expanded="false" aria-controls="comparison">Compare headline drafts</button></p><div id="comparison" hidden><h3>Promotional draft</h3><p>“Cedar Lane's most-loved storytelling program returns”</p><p>“Most-loved” has no supporting audience evidence. “Returns” implies a previous program that F1 does not describe.</p><h3>Fact-based revision</h3><p>Cedar Lane Reading Room plans new Saturday story sessions starting November 14</p><p>The revision uses F1 and F2. It does not replace “most-loved” with another unsupported popularity claim.</p></div></section>
<section><h2>Draft your own announcement</h2><p>This separate blank scaffold holds temporary writing only. Use your actual approved facts and distribution requirements. The controls do not inspect or approve your text.</p><div class="grid"><div><label for="own-headline">Factual headline</label><textarea id="own-headline"></textarea></div><div><label for="own-lead">Lead · what is new and who needs to know</label><textarea id="own-lead"></textarea></div><div><label for="own-schedule">Supporting details · dates, location and audience action</label><textarea id="own-schedule"></textarea></div><div><label for="own-about">Supplied organization description</label><textarea id="own-about"></textarea></div><div><label for="own-contact">Approved media contact · or TO CONFIRM</label><textarea id="own-contact"></textarea></div><div><label for="own-date">Actual draft date · or TO CONFIRM</label><input id="own-date" type="text"></div><div><label for="own-approval">Actual release approval and timing · or TO CONFIRM</label><textarea id="own-approval"></textarea></div><div><label for="own-notes">Review notes · supporting facts and unanswered questions</label><textarea id="own-notes"></textarea></div></div><p><button id="reset">Clear typed draft</button></p><div id="confirmation" hidden><p>Clear all eight typed fields? The fictional packet, draft and current views stay unchanged.</p><button id="keep">Keep typed draft</button><button id="clear">Clear all eight fields</button></div><p id="status" role="status">All eight fields are blank. No release approval is recorded by this page.</p></section>
<footer>Typing lasts only in this open page; reloading clears it. Nothing is sent, published, stored or submitted. Keep the maintained release and actual approval process authoritative.</footer>
</main><script>(()=>{'use strict';const $=id=>document.getElementById(id),viewIds=['facts','release','details'],wordIds=['headline','lead','dates'],fieldIds=['own-headline','own-lead','own-schedule','own-about','own-contact','own-date','own-approval','own-notes'];const wording={headline:['Headline · F1–F2','Cedar Lane Reading Room plans new Saturday story sessions starting November 14','F1 supplies a new series; F2 supplies its November 14 start. Neither establishes that an earlier program is returning.'],lead:['Lead · F1, F2, F4, F5','Cedar Lane Reading Room plans a new series of free Saturday story sessions for families with children, beginning November 14, 2026, in its main room.','F1 supplies the new series, F2 its start, F4 the room, and F5 the audience and free attendance. No street address or outcome is supplied.'],dates:['Session dates · F2, F3, F5','Sessions are scheduled for November 14, 21, and 28, 2026, from 10:00 to 10:45 a.m. each day, in the America/New_York time zone. No registration is required.','F2 supplies all three dates, F3 the time and zone, and F5 the registration condition. These are event facts, not permission to issue a release.']};for(const id of viewIds)$(id).addEventListener('click',()=>{for(const v of viewIds){$(v).setAttribute('aria-pressed',String(v===id));$(v+'-view').hidden=v!==id;}});for(const id of wordIds)$(id).addEventListener('click',()=>{for(const w of wordIds)$(w).setAttribute('aria-pressed',String(w===id));wording[id].forEach((s,i)=>$(['selected-label','selected-wording','selected-basis'][i]).textContent=s);});$('compare').addEventListener('click',()=>{const open=$('comparison').hidden;$('comparison').hidden=!open;$('compare').setAttribute('aria-expanded',String(open));$('compare').textContent=open?'Hide headline comparison':'Compare headline drafts';});for(const id of fieldIds)$(id).addEventListener('input',()=>{$('status').textContent="Draft changed. Review your current words and unresolved release details.";});$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('status').textContent='Kept all eight typed fields. No approval decision was made.';$('reset').focus();});$('clear').addEventListener('click',()=>{for(const id of fieldIds)$(id).value='';$('confirmation').hidden=true;$('status').textContent='All eight typed fields were cleared. Fictional facts, current views and release decisions are unchanged.';$('own-headline').focus();});})();</script></body></html>