Two fictional references with supplied permission, incomplete contact details, and a third person kept out of the employer copy

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>Reference sheet · relationship and current title</title><style>*{box-sizing:border-box}body{margin:0;background:#eff1f5;color:#334253;font:16px/1.65 system-ui,sans-serif}main{max-width:1040px;margin:auto;padding:28px}h1{font:700 clamp(30px,5vw,44px)/1.15 Georgia,serif;margin:10px 0 16px}h2{font-size:24px}h3{font-size:19px}section{background:#fff;border:1px solid #b4c0cf;padding:22px;margin:22px 0}.record{padding:18px;background:#edf2f7;border-left:5px solid #7490b0;margin:16px 0}.gap{background:#fff3df;border-color:#a8874a}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.controls{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}button,textarea{font:inherit}button{min-height:44px;padding:10px 14px;border:1px solid #849ab4;background:#fff;color:inherit;border-radius:4px;cursor:pointer}button[aria-pressed=true]{background:#415d7c;color:#fff}button:focus-visible,textarea:focus-visible{outline:3px solid #b37b2a;outline-offset:3px}dl{margin:0}dt{font-weight:750;margin-top:12px}dd{margin:3px 0 0}label{display:block;font-weight:650;margin:14px 0 6px}textarea{display:block;width:100%;min-height:110px;padding:10px;border:1px solid #899caf;color:inherit;background:#fff;resize:vertical}p,h1,h2,h3,dt,dd,label,button{overflow-wrap:break-word}footer{margin:26px 0}[hidden]{display:none!important}@media(max-width:600px){main{padding:16px}section{padding:16px}.grid{grid-template-columns:1fr}.controls button{flex:1 1 180px}}</style></head><body><main><h1>Separate the relationship from the current title.</h1><p>Fictional application asks for two references in a separate document. Names, organizations, contact details and required format/route remain to confirm. The sample is incomplete and is not ready to submit.</p>
<section><h2>Preparation and document views</h2><div class="controls" role="group" aria-label="Reference sheet view"><button id="preparation" type="button" aria-pressed="true">Preparation notes</button><button id="preview" type="button" aria-pressed="false">Employer-copy preview</button></div><div id="preparation-view"><article class="record"><h3>R1 · former volunteer supervisor</h3><p>Permission supplied in this fictional teaching record. Directly supervised the applicant's archive cataloguing activity. Current title: Museum Programs Coordinator.</p><p>Name, current organization, phone and email remain to confirm. Actual current availability is not supplied.</p></article><article class="record"><h3>R2 · former course project adviser</h3><p>Permission supplied in this fictional teaching record. Current title: Instructor.</p><p>Name, current organization, phone and email remain to confirm. Actual current availability is not supplied.</p></article><article class="record gap"><h3>R3 · possible current colleague</h3><p>Permission not asked. Preparation only; excluded from the employer-copy preview. No decision about suitability or request to this person is made.</p></article><p>Confirm willingness, availability and exact current details with the actual people through the agreed private route. After agreement, share relevant role information and application materials as arranged; keep private discussions outside the employer document.</p></div><div id="employer-preview" hidden aria-label="Fictional employer-copy reference entries"><h3>Reference sheet · incomplete layout preview</h3><div class="grid"><article class="record"><h3>R1 · NAME TO CONFIRM</h3><dl><dt>Relationship to applicant</dt><dd>Former volunteer supervisor for archive cataloguing activity.</dd><dt>Current title</dt><dd>Museum Programs Coordinator</dd><dt>Current organization</dt><dd>ORGANIZATION TO CONFIRM</dd><dt>Phone</dt><dd>CONTACT TO CONFIRM</dd><dt>Email</dt><dd>CONTACT TO CONFIRM</dd></dl></article><article class="record"><h3>R2 · NAME TO CONFIRM</h3><dl><dt>Relationship to applicant</dt><dd>Former course project adviser.</dd><dt>Current title</dt><dd>Instructor</dd><dt>Current organization</dt><dd>ORGANIZATION TO CONFIRM</dd><dt>Phone</dt><dd>CONTACT TO CONFIRM</dd><dt>Email</dt><dd>CONTACT TO CONFIRM</dd></dl></article></div></div><p id="incomplete" class="record gap">Two entries do not establish submission readiness. Contacts and required format/route remain to confirm. This is an HTML reading copy; employer acceptance of a web link is not supplied.</p></section>
<section><h2>Check R1's relationship wording</h2><button id="relationship" type="button" aria-expanded="false" aria-controls="relationship-comparison">R1 relationship</button><div id="relationship-comparison" hidden><div class="grid"><article class="record gap"><h3>Misleading relationship</h3><p>Current supervisor</p><p>Current title: Museum Programs Coordinator</p></article><article class="record"><h3>Accurate relationship</h3><p>Former volunteer supervisor</p><p>Current title: Museum Programs Coordinator</p></article></div><p>The current title stays unchanged. The former supervisory relationship describes how this person knows the applicant's work. Correcting a label does not supply consent or an endorsement, and neither person is assigned recommendation wording.</p></div></section>
<section><h2>Your blank preparation scaffold</h2><p>Use fictional or sanitized layout notes. Keep real contact details and permission records in your approved private application handling. The employer's requested document remains the actual submission artifact.</p><div id="fields"></div><p><button id="reset" type="button">Clear my preparation notes</button></p><div id="confirmation" hidden><p>Clear all six fields? The teaching views, reference entries and relationship comparison stay unchanged.</p><div class="controls"><button id="clear" type="button">Clear typed notes</button><button id="keep" type="button">Keep typed notes</button></div></div><p id="status" role="status">Six fields start blank. Views preserve your writing.</p></section><footer>Notes last only in this open page and disappear on reload. No real contact collection, email/phone link, consent request, verification, recommendation letter, signature, submission, public directory, PDF/DOCX export, network or storage is provided.</footer></main><script>(()=>{'use strict';const $=id=>document.getElementById(id);function view(preview){$('preparation').setAttribute('aria-pressed',String(!preview));$('preview').setAttribute('aria-pressed',String(preview));$('preparation-view').hidden=preview;$('employer-preview').hidden=!preview;}$('preparation').addEventListener('click',()=>view(false));$('preview').addEventListener('click',()=>view(true));$('relationship').addEventListener('click',()=>{const open=$('relationship-comparison').hidden;$('relationship-comparison').hidden=!open;$('relationship').setAttribute('aria-expanded',String(open));});for(const [id,label]of [['requirements','Employer-required count, fields, format and private route'],['permission','Private permission/availability questions · sanitized notes only'],['relationship','Relationship and current-title wording to confirm'],['gaps','Missing contact/detail fields · do not enter real contacts here'],['materials','Application context and materials to discuss privately'],['review','Temporary layout/preparation review notes']]){const l=document.createElement('label');l.htmlFor='own-'+id;l.textContent=label;const t=document.createElement('textarea');t.id=l.htmlFor;$('fields').append(l,t);}$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('status').textContent='Kept all six preparation fields.';$('reset').focus();});$('clear').addEventListener('click',()=>{for(const t of document.querySelectorAll('textarea'))t.value='';$('confirmation').hidden=true;$('status').textContent='All six preparation fields were cleared. Teaching view and relationship comparison are unchanged.';$('own-requirements').focus();});})();</script></body></html>