Three fictional household records: sourced timing, missing inputs and a proposed appointment

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>Home maintenance source worksheet</title><style>*{box-sizing:border-box}body{margin:0;background:#faf8f3;color:#262727;font:16px/1.5 system-ui,sans-serif}main{max-width:850px;margin:auto;padding:22px}h1{font-size:1.8rem;line-height:1.2}h2{font-size:1.2rem}section{border-top:2px solid #b8ada0;margin-top:24px;padding-top:12px}label{display:block;font-weight:650}select{font:inherit;max-width:100%;padding:8px}dt{font-weight:650}dd{margin:0 0 10px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;padding:14px;background:#ece7df}#summary{padding:14px;border-left:5px solid #856441;background:#eee7dc}small{display:block}strong{font-weight:750}</style></head><body><main><h1>When is the next review, and why?</h1><p>Original fictional household worksheet. All records and the 30-day review rule are invented demonstration inputs, not actual product maintenance instructions.</p><label for="asof">Inspect the same records as of</label><select id="asof"><option value="2026-11-05">November 5, 2026</option><option value="2026-11-15">November 15, 2026</option></select><p id="summary" aria-live="polite"></p><section data-item="H01"><h2>H01 · Study air cleaner</h2><dl><dt>Fixture instruction</dt><dd>DEMO-M01: review the filter record after 30 calendar days. This is a fictional record-review reminder, not a replacement interval.</dd><dt>Last recorded review</dt><dd>October 15, 2026</dd><dt>Next review</dt><dd>November 14, 2026: October 15 + 30 calendar days.</dd><dt>Relative to the selected date</dt><dd id="relative"></dd></dl></section><section data-item="H02"><h2>H02 · Kitchen appliance</h2><p>Model, applicable instruction and last actual maintenance date: not recorded.</p><p><strong>Next maintenance date: unknown.</strong> Collect identification and the applicable manual before deriving a due date.</p></section><section data-item="H03"><h2>H03 · Laundry appliance</h2><p>Proposed appointment: November 20, 2026. No completed service record supplied. Do not restart an interval from this planned date.</p></section><section><h2>Your blank source record</h2><pre>Item ID / location: __________
Model / identifying detail: __________
Applicable instruction / source / section: __________
Exact task and timing wording / units: __________
Actual completed work / date / record reference: __________
Proposed appointment (separate): __________
Derived due date and calculation: __________
Missing input / next collection task: __________
Maintained schedule location / date checked: __________</pre><small>Read-only review copy. Selection changes this view only. No reminders, scheduling, sending or saved maintenance updates.</small></section></main><script>const due='2026-11-14';function render(){const asof=document.querySelector('#asof').value;const relation=asof<due?'Ahead of the selected date':asof>due?'Past the selected date':'Due on the selected date';document.querySelector('#relative').textContent=relation;document.querySelector('#summary').textContent='H01: '+relation+'. H02: due date unknown. H03: proposed appointment only.';window.scheduleReview={asof,due,relation,unknownDue:['H02'],appointmentOnly:['H03']};}document.querySelector('#asof').addEventListener('change',render);render();</script></body></html>