Fictional contact chain: reading-list promise, introduction and portfolio conversation

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"><meta name="nos-demo-layout" content="responsive-lab"><title>Professional contact notes</title><style>body{margin:0;font:16px/1.5 system-ui;color:#253447}main{max-width:820px;margin:auto;padding:20px}h1{font-size:clamp(28px,5vw,38px);line-height:1.2}label{display:block;font-weight:700}select{font:inherit;padding:10px;max-width:100%}#focus{border-left:5px solid #477898;background:#edf3f8;padding:18px;margin:20px 0}section{padding:14px 0;border-top:1px solid #a7b5c4}h2{font-size:22px}pre{font:16px/1.6 system-ui;white-space:pre-wrap;overflow-wrap:anywhere;background:#f4f5f7;padding:16px}</style></head><body><main><p>Original fictional contacts. No real messages or introductions.</p><h1>Keep the conversation separate from the promise</h1><label for="contact">Read the next action in context</label><select id="contact"><option value="C01">C01 — Mara: reading list promised</option><option value="C02">C02 — Ellis: introduction, no reply supplied</option><option value="C03">C03 — Rowan: portfolio discussion</option></select><div id="focus" aria-live="polite"></div><section><h2>C01 — Mara</h2><p>Event conversation about exhibit interpretation. You offered a short reading list. Next: prepare that list. Sending date and received reply are not supplied.</p></section><section><h2>C02 — Ellis</h2><p>Introduced by Mara (C01). No reply or meeting arrangement supplied. Preserve the introduction context without calling it a completed conversation.</p></section><section><h2>C03 — Rowan</h2><p>Conversation completed in the fictional note. Rowan suggested comparing two portfolio project descriptions. Next: revise them, then decide what follow-up is appropriate. No referral or review of revised work supplied.</p></section><h2>Blank contact record</h2><pre>Contact ID / permitted details: __________
Connection context / related contact ID: __________
Last actual exchange / date / source: __________
My commitment / genuinely agreed date: __________
What the contact actually offered or sent: __________
Next action / my self-planned review date: __________
Unconfirmed reply or introduction: __________
Actual follow-up and response: __________</pre><p>No email sending, profile lookup, saved records or reminders occur on this page.</p></main><script>const notes={C01:{relation:'Event conversation',next:'Prepare the reading list you offered; sending and reply not recorded.'},C02:{relation:'Introduced by C01; no reply supplied',next:'Review the introduction context; do not invent a meeting or referral.'},C03:{relation:'Fictional conversation completed',next:'Revise the two portfolio descriptions, then consider the follow-up.'}};function draw(){const id=document.querySelector('#contact').value,n=notes[id];window.contactReview={id,...n};document.querySelector('#focus').textContent=id+' — '+n.relation+'. Next: '+n.next;}document.querySelector('#contact').addEventListener('change',draw);draw();</script></body></html>