Maple Makers • November editorial calendar — Map each proposed issue to a reader question, specific content angle and usable source asset; expose missing evidence, draft-only…
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>Maple Makers • November editorial calendar</title><style>*{box-sizing:border-box}body{margin:0;background:var(--bg,#f3f7fa);color:var(--ink,#203342);font:16px/1.55 system-ui,Segoe UI,sans-serif}main{max-width:1100px;margin:auto;padding:28px 30px 50px}h1{font-size:clamp(27px,3.5vw,40px);line-height:1.18;letter-spacing:-.035em;margin:8px 0 12px}h2{font-size:21px;line-height:1.35;margin:0 0 16px}h3{font-size:18px}.eyebrow{color:var(--accent,#176783);font-size:12px;letter-spacing:.12em;font-weight:800;text-transform:uppercase}.intro,.muted,small{color:#516272}.intro{margin:0 0 24px}.panel{padding:24px;border:1px solid var(--line,#d6e0e7);border-radius:12px;background:white;margin:18px 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.grid>*{min-width:0}.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}button,input,textarea,select{font:inherit}button{border:1px solid var(--accent,#176783);background:var(--accent,#176783);color:white;padding:10px 16px;min-height:44px;border-radius:7px;font-weight:700;cursor:pointer}button.secondary{background:white;color:var(--accent,#176783)}button[aria-pressed=true]{background:var(--tint,#e3f2f8);color:var(--ink,#203342);box-shadow:inset 0 0 0 2px var(--accent,#176783)}button:hover{filter:brightness(.96)}:focus-visible{outline:3px solid #d56b00;outline-offset:3px}label{display:block;margin:12px 0 5px;font-size:14px;font-weight:650}input:not([type=checkbox]),select,textarea{width:100%;padding:10px 12px;min-height:44px;border:1px solid #94a5b2;background:white;color:inherit;border-radius:7px}textarea{resize:vertical;min-height:120px}input[type=checkbox]{width:20px;height:20px;margin-right:9px}label.inline{display:flex;align-items:center;font-weight:500;gap:7px}.result{padding:24px;background:var(--tint,#e3f2f8);border:1px solid var(--line,#c8dce7);border-radius:12px}.big{font-size:clamp(30px,5vw,48px);font-weight:780;line-height:1.25;letter-spacing:-.035em;margin:10px 0}.trace{font:15px/1.7 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.error{color:#a12820;font-weight:650;min-height:24px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:15px}th,td{text-align:left;border-bottom:1px solid var(--line,#d6e0e7);padding:12px 9px;vertical-align:top}th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:#516272}code,pre,.code{font:14px/1.65 ui-monospace,Consolas,monospace}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--tint,#eef3f7);padding:16px;border-radius:6px}details{border-top:1px solid var(--line,#d6e0e7);margin:24px 0;padding-top:16px}summary{cursor:pointer;font-weight:700;min-height:44px}footer{border-top:1px solid var(--line,#d6e0e7);margin-top:26px;padding-top:16px;font-size:13px;color:#516272}.bar{height:16px;background:#dce4ea;border-radius:20px;overflow:hidden;margin:12px 0}.bar span{display:block;height:100%;background:var(--accent,#176783)}[hidden]{display:none!important}@media(max-width:720px){main{padding:20px}.grid{grid-template-columns:1fr;gap:12px}.panel,.result{padding:20px}}@media(max-width:400px){main{padding:16px}.panel,.result{padding:16px}button{padding:10px 13px}} .sheet{background:white;border:1px solid var(--line,#d6e0e7);padding:26px}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.tiles>article{padding:20px;background:white;border:1px solid var(--line,#d6e0e7)}.badge{display:inline-block;border-radius:30px;padding:4px 11px;background:var(--tint,#e3f3fa);font-size:13px;font-weight:750}.preview{white-space:pre-wrap;overflow-wrap:anywhere}.schedule-row{display:grid;grid-template-columns:1fr 100px 100px;gap:15px;align-items:center;border-bottom:1px solid var(--line,#d6e0e7);padding:12px 0}.schedule-row label{margin:0}.schedule-row small{display:block}.schedule-row input{margin-top:6px}.export textarea{min-height:180px}.note{border-left:4px solid var(--accent,#176783);background:var(--tint,#e3f3fa);padding:16px}svg{max-width:100%;height:auto}button{overflow-wrap:anywhere}h2,h3,p{overflow-wrap:anywhere}@media(max-width:720px){.tiles{grid-template-columns:1fr}.schedule-row{grid-template-columns:1fr 80px}.schedule-row .range{grid-column:1/3}.sheet{padding:20px}}@media(max-width:400px){.sheet{padding:16px}}
body{--accent:#9a4c2a;--tint:#fff0df;--bg:#fbf8f3;--ink:#453930;--line:#e6d7c8}h1,h2{font-family:Georgia,serif}.coverage-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px 0}.coverage-strip span{border-top:2px solid #c59a71;padding:12px;font-size:13px}.coverage-strip b{display:block;font:27px Georgia,serif}.month{background:white;border:1px solid #e3d5c7;padding:24px}.month-title{display:flex;justify-content:space-between;align-items:baseline;gap:15px}.month-title span{font-size:13px}.issue-list{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.issue-tab{text-align:left;background:#fff;color:#453930;border:1px solid #d9c4af;border-radius:0;font-weight:400;padding:16px}.issue-tab span,.issue-tab small,.issue-tab b,.issue-tab em{display:block}.date-num{font:35px Georgia,serif}.issue-tab b{font-size:14px;margin:15px 0}.issue-tab span:not(.date-num){font-size:12px}.issue-tab em{font-size:12px;color:#875129;margin-top:13px}.brief{background:white;padding:28px;border-left:5px solid #9a4c2a;margin:22px 0}.brief-top{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap}.brief h2{font-size:28px;margin:18px 0 10px}.brief h3{font-size:15px;text-transform:uppercase;letter-spacing:.03em}@media(max-width:720px){.coverage-strip{grid-template-columns:1fr 1fr}.issue-list{grid-template-columns:1fr 1fr}.month-title{display:block}.brief{padding:20px}.month{padding:17px}}@media(max-width:400px){.issue-list{gap:8px}.issue-tab{padding:12px}.issue-tab b{font-size:13px}}</style></head><body><main>
<header><span class="eyebrow">Maple Makers / fictional editorial desk</span><h1>Four issues. A source behind each angle.</h1><p class="intro">Plan the reader question and evidence before production begins.</p></header>
<div class="coverage-strip"><span><b>1</b> documented example</span><span><b>1</b> dates unconfirmed</span><span><b>1</b> draft</span><span><b>1</b> missing</span></div>
<section class="month"><div class="month-title"><h2>November 2026</h2><span>4 proposed issues · date-only targets</span></div><div class="issue-list"><button type="button" class="issue-tab" id="issue-0"><span class="date-num">4</span><small>Wed · November</small><b>I01 · How can I prepare a project description?</b><span>R01 / Documented example</span><em>Proposed</em></button><button type="button" class="issue-tab" id="issue-1"><span class="date-num">11</span><small>Wed · November</small><b>I02 · Where can I find the next demonstration?</b><span>R02 / Dates unconfirmed</span><em>Proposed</em></button><button type="button" class="issue-tab" id="issue-2"><span class="date-num">18</span><small>Wed · November</small><b>I03 · What should a project caption explain?</b><span>R03 / Draft</span><em>Proposed</em></button><button type="button" class="issue-tab" id="issue-3"><span class="date-num">25</span><small>Wed · November</small><b>I04 · How can I volunteer?</b><span>R04 / Missing</span><em>Proposed</em></button></div></section>
<section class="brief"><div class="brief-top"><span id="brief-id" class="eyebrow"></span><span class="badge">Proposed · final issue approval absent</span></div><h2 id="brief-question"></h2><p id="brief-angle"></p><div class="grid"><div><h3>Proposed hook</h3><p id="brief-hook"></p><h3>Known source content</h3><p id="brief-known"></p></div><div><h3>Where the writer must stop</h3><p id="brief-stop"></p><h3>Next owner check</h3><p id="brief-next"></p></div></div><div class="grid"><div><label for="target-date">Proposed target date</label><input id="target-date" type="date" value="2026-11-04"></div><div><label for="owner">Proposed owner (actual assignment to confirm)</label><input id="owner" type="text" value=""></div></div><div class="controls"><button type="button" id="apply-date">Apply local planning edits</button><button type="button" id="reset-calendar" class="secondary">Reset calendar</button></div><p id="date-status" aria-live="polite"></p><p id="date-error" class="error" role="alert"></p></section>
<section class="sheet"><h2>Keep the alternate. Keep four issues.</h2><p><b>A05</b> repeats I01’s question, three-field angle and R01 source with a different title.</p><div class="controls"><button type="button" id="merge" class="secondary">Retain A05 as I01 alternate</button></div><p id="duplicate" class="note">A05 is a duplicate-angle idea, not a fifth issue. Its wording can be retained with I01.</p><label for="alternate">Alternate working title</label><input id="alternate" type="text" value="Start your project description with three fields"></section>
<section class="panel export"><h2>Manual-copy planning text</h2><button type="button" id="prepare">Prepare text</button><button type="button" id="select-text" class="secondary">Select text</button><p id="export-error" class="error" role="alert"></p><label for="export-text">Generated plain text</label><textarea id="export-text" readonly></textarea><small>Select the text, then copy manually. Nothing is saved or sent.</small></section>
<footer>Source availability is separate from issue approval: no issue is approved to send. Actual readership, audience authorization, owners, send time, time zone and final approval remain to confirm. This local planning companion does not publish, email, edit source documents, save changes or export a native workbook; maintained editorial records remain authoritative.</footer>
</main><script>const $=id=>document.getElementById(id);const on=(id,e,fn)=>$(id).addEventListener(e,fn);const txt=(id,v)=>$(id).textContent=v;const esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));const positive=x=>String(x).trim()!==''&&Number.isFinite(Number(x))&&Number(x)>0;const num=x=>Number(x.toPrecision(10)).toString();function enter(id,fn){on(id,'keydown',e=>{if(e.key==='Enter'&&!e.isComposing&&e.keyCode!==229){e.preventDefault();fn()}})}function selectText(id){$(id).focus();$(id).select()}
function isoDay(s){if(!/^\d{4}-\d{2}-\d{2}$/.test(s))throw Error('Use a real calendar date as YYYY-MM-DD.');const d=new Date(s+'T00:00:00Z');if(!Number.isFinite(d.getTime())||d.toISOString().slice(0,10)!==s)throw Error('Use a real calendar date as YYYY-MM-DD.');return d.getTime()/86400000}
const issues=[{"id": "I01", "date": "2026-11-04", "question": "How can I prepare a project description?", "angle": "Explain the three supplied submission fields.", "resource": "R01", "status": "Documented example", "hook": "Have a project to describe? Start with three fields.", "known": "Project title; one-sentence description; permitted contact reference.", "stop": "No submission destination, deadline, acceptance decision or required public contact details are supplied.", "next": "Verify current requirements, permitted wording and final issue approval."}, {"id": "I02", "date": "2026-11-11", "question": "Where can I find the next demonstration?", "angle": "Explain an approved route to current schedule information, once supplied.", "resource": "R02", "status": "Dates unconfirmed", "hook": "Looking for the next demonstration? Check the confirmed schedule first.", "known": "A proposed demonstration schedule exists; its dates are TO CONFIRM.", "stop": "No confirmed demonstration date, location, booking requirement or lookup destination is supplied.", "next": "Ask the schedule owner for the current approved lookup route and permitted facts. Reconsider the issue if inputs do not arrive."}, {"id": "I03", "date": "2026-11-18", "question": "What should a project caption explain?", "angle": "Explain reviewed caption guidance, once approved.", "resource": "R03", "status": "Draft", "hook": "What should a project caption tell the reader?", "known": "Caption guidance exists in Draft state. No approved caption rules are supplied.", "stop": "Do not turn draft guidance into current policy or invent approved caption tips.", "next": "Obtain reviewed guidance and permitted examples before drafting instructional content."}, {"id": "I04", "date": "2026-11-25", "question": "How can I volunteer?", "angle": "Explain the confirmed volunteer process, once supplied.", "resource": "R04", "status": "Missing", "hook": "Interested in helping? Here is the process we need to confirm. [Planning language only]", "known": "The volunteer-process resource is missing.", "stop": "Keep process, contact route, roles, eligibility, permissions and signup link blank; none is supplied.", "next": "Ask the actual owner for the approved process and contact route; verify the intended reader action."}];
let current=0,merged=false;
function showIssue(i){current=i;const x=issues[i];txt('brief-id',x.id+' / '+x.resource+' · '+x.status);txt('brief-question',x.question);txt('brief-angle',x.angle);txt('brief-hook',x.hook);txt('brief-known',x.known);txt('brief-stop',x.stop);txt('brief-next',x.next);$('target-date').value=x.date;$('owner').value=x.owner||'';txt('date-status',x.date+' · '+weekday(x.date)+' · target only');txt('date-error','');for(let j=0;j<4;j++)$('issue-'+j).setAttribute('aria-pressed',String(i===j))}
function weekday(s){return ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'][new Date(isoDay(s)*86400000).getUTCDay()]}
function clearText(){$('export-text').value='';txt('export-error','Inputs changed; prepare the current planning packet.')}
function edited(){clearText();txt('date-status','Unapplied local edits');txt('date-error','')}
on('target-date','input',edited);on('owner','input',edited);
function applyDate(){clearText();try{const d=$('target-date').value;isoDay(d);if(issues.some((x,i)=>i!==current&&x.date===d))throw Error('Another issue already has this target date. Resolve the collision before applying.');if(!/^2026-11-/.test(d))throw Error('Use a date in November 2026 for this month plan.');issues[current].date=d;issues[current].owner=$('owner').value;txt('date-status',d+' · '+weekday(d)+' · local proposed target, not approved to send');txt('date-error','');$('issue-'+current).innerHTML='<span class="date-num">'+Number(d.slice(8))+'</span><small>'+weekday(d)+' · November</small><b>'+issues[current].id+' · '+esc(issues[current].question)+'</b><span>'+issues[current].resource+' / '+issues[current].status+'</span><em>Proposed</em>';return true}catch(e){txt('date-status','No accepted date edit');txt('date-error',e.message);return false}}
for(let i=0;i<4;i++)on('issue-'+i,'click',()=>{if($('date-status').textContent==='Unapplied local edits'){txt('date-error','Apply or reset the current edits before switching issues.');return}showIssue(i)});
on('apply-date','click',applyDate);enter('target-date',applyDate);
on('merge','click',()=>{merged=true;txt('duplicate','A05 → I01 · same question + same three-field angle + R01. Alternate wording retained; no additional issue date. Total remains 4 issues.');clearText()});
on('alternate','input',()=>{clearText();if(merged)txt('duplicate','A05 → I01 · alternate title edited locally; same question, angle and R01. Total remains 4 issues.')});
on('reset-calendar','click',()=>{issues.forEach((x,i)=>{x.date=['2026-11-04','2026-11-11','2026-11-18','2026-11-25'][i];x.owner='';$('issue-'+i).innerHTML='<span class="date-num">'+(4+i*7)+'</span><small>Wed · November</small><b>'+x.id+' · '+esc(x.question)+'</b><span>'+x.resource+' / '+x.status+'</span><em>Proposed</em>'});merged=false;$('alternate').value='Start your project description with three fields';txt('duplicate','A05 is a duplicate-angle idea, not a fifth issue. Its wording can be retained with I01.');clearText();showIssue(0)});
on('prepare','click',()=>{$('export-text').value='';if($('date-status').textContent==='Unapplied local edits'||$('date-status').textContent==='No accepted date edit'){txt('export-error','Apply or reset the date/owner edits first.');return}if(merged&&!$('alternate').value.trim()){txt('export-error','Supply the retained alternate title, or reset the calendar.');return}$('export-text').value='MAPLE MAKERS / PROPOSED NOVEMBER 2026 EDITORIAL PACKET\nResource coverage: 1 documented example / 1 dates unconfirmed / 1 draft / 1 missing. This is not an approved-send count.\n\n'+issues.map(x=>x.id+' | '+x.date+' ('+weekday(x.date)+') | short explanatory newsletter item | Proposed\nQuestion: '+x.question+'\nAngle: '+x.angle+'\nHook: '+x.hook+'\nResource: '+x.resource+' / '+x.status+'\nKnown: '+x.known+'\nDo not claim: '+x.stop+'\nNext check: '+x.next+'\nProposed owner, actual assignment to confirm: '+(x.owner||'TO CONFIRM')).join('\n\n')+'\n\nDuplicate idea: '+(merged?'A05 → I01; alternate title: '+$('alternate').value+'; same question + angle + R01; no fifth issue.':'A05 repeats I01/R01; retain as alternate or merge, not a fifth issue.')+'\nAll final issue approvals: ABSENT. Readership, audience authorization, actual owners, send time and time zone: TO CONFIRM. No publishing or sending performed.';txt('export-error','Planning packet prepared for manual copying; no issue approval or send occurred.')});on('select-text','click',()=>selectText('export-text'));showIssue(0);
</script></body></html>