Fictional contact history: C01 attempt, C02 reply and a blank contact entry

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"><meta name="nos-demo-layout" content="responsive-lab"><title>Parent contact: attempt, reply, next action</title><style>*{box-sizing:border-box}body{margin:0;font:18px/1.6 system-ui,sans-serif;color:#182c3a;background:#fff}main{max-width:900px;margin:auto;padding:24px}h1{font-size:clamp(28px,5vw,40px);line-height:1.2}h2{font-size:25px}p,li,dd,td,th{overflow-wrap:anywhere}a{color:#124f91}table{width:100%;border-collapse:collapse}th,td{padding:12px;border-bottom:1px solid #bdc5ca;text-align:left;vertical-align:top}caption{text-align:left;font-weight:650}dt{font-weight:700;margin-top:14px}dd{margin-left:0}section{margin:28px 0}label{font-weight:650}select{font:inherit;padding:8px}pre{white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid #bfc6ca;padding:18px;font:16px/1.7 ui-monospace,monospace}aside{background:#f6f1e7;padding:16px;margin:22px 0}strong{font-weight:750}@media print{body{font-size:12pt}main{max-width:none}select{display:none}section{break-inside:avoid}}.entry{border-left:4px solid #8b663e;padding:0 0 0 22px}.tag{font-weight:700;color:#6c472b}.entry h2{margin-bottom:8px}body{font-size:16px;line-height:1.5}main{padding:18px}section{margin:20px 0}h1{font-size:clamp(26px,5vw,36px)}h2{font-size:23px}pre{font-family:system-ui,sans-serif;font-size:16px}.job{padding:14px}.name{font-size:24px;margin:12px 0}dt{margin-top:10px}</style></head><body><main><h1>Parent contact: attempt, reply, next action</h1><p>Private-format teaching example. All identifiers, times and arrangements are fictional; no actual family record is present.</p><section class="entry" id="c01"><h2>C01 — Monday contact attempt</h2><p class="tag">Monday 3:10 p.m. • calendar date not supplied</p><dl><dt>Observed contact</dt><dd>Teacher sent a request to discuss the reading-folder routine through the agreed school channel.</dd><dt>Response in this snapshot</dt><dd>No response recorded.</dd><dt>Next action</dt><dd>Teacher checks the agreed channel Tuesday morning.</dd></dl><a href="#c02">Read the later reply, C02</a></section><section class="entry" id="c02"><h2>C02 — Tuesday family reply</h2><p class="tag">Tuesday 8:20 a.m. • calendar date not supplied</p><dl><dt>Related entry</dt><dd><a href="#c01">C01: original contact attempt</a></dd><dt>Observed response</dt><dd>Family asked for the folder steps in the supplied home language.</dd><dt>Next action</dt><dd>Teacher prepares the requested steps through the school’s agreed language-support arrangement. Completion not recorded.</dd></dl></section><h2>Blank contact entry</h2><pre>Entry ID: __________
Date/time and recorder: __________
Permitted family/student identifier: __________
Purpose and agreed channel: __________
Actual attempt or conversation: __________
Attributed response: __________
Next action / owner / date: __________
Related entry / maintained record: __________</pre><aside>This is a reading example, not a school record system. No messages are sent and no family details are collected or saved.</aside></main><script>document.addEventListener("click",event=>{const a=event.target.closest("a");if(!a||!a.getAttribute("href")?.startsWith("#"))return;const id=a.getAttribute("href").slice(1),target=document.getElementById(id);if(!target)return;event.preventDefault();target.scrollIntoView({block:"start"});window.lastRecordJump=id;});</script></body></html>