Field handover log contact index
Complete the contact index in a field handover log scenario: with real content, actionable controls, clear status feedback, and layouts that adapt across sizes.
With JavaScript enabled, you can edit, run, and save this example. The fixed source is as follows:
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Field handover log contact index</title>
<style>
:root { --ink:#ecf7f3; --paper:#071310; --accent:#e6a23c; --secondary:#a8a1d8; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:"Trebuchet MS","PingFang SC",sans-serif; background:radial-gradient(circle at 20% 10%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 35%),radial-gradient(circle at 85% 90%,color-mix(in srgb,var(--secondary) 20%,transparent),transparent 38%),var(--paper); }
button,input,select,textarea { color:inherit; font:inherit; }
button,[role="button"],input,select,textarea { accent-color:var(--accent); }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
@media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.page{width:min(1160px,calc(100% - 30px));margin:auto;padding:60px 0}.mast{display:flex;justify-content:space-between;border-left:4px solid var(--accent);padding-left:22px;gap:28px;align-items:center;margin-bottom:34px}.mast h1{font-family:"Trebuchet MS","PingFang SC",sans-serif;font-weight:900;font-size:clamp(42px,9vw,94px);text-shadow:0 0 28px color-mix(in srgb,var(--accent) 55%,transparent);margin:0;line-height:.92}.eyebrow{display:block;margin-bottom:14px;color:var(--accent);font:900 11px/1 ui-monospace,monospace;letter-spacing:.2em}.intro{max-width:680px;color:color-mix(in srgb,var(--ink) 68%,transparent);line-height:1.7}.scenario{padding:10px 16px;border:1px solid var(--secondary);border-radius:4px;box-shadow:0 0 20px color-mix(in srgb,var(--secondary) 30%,transparent)}.demo{border-color:color-mix(in srgb,var(--accent) 55%,transparent);border-radius:24px;box-shadow:inset 0 0 40px color-mix(in srgb,var(--accent) 8%,transparent),0 0 60px color-mix(in srgb,var(--secondary) 12%,transparent);position:relative;min-height:410px;overflow:hidden;padding:clamp(24px,4vw,50px);background:color-mix(in srgb,var(--paper) 86%,transparent)}@media(max-width:700px){.mast{display:grid}.page{padding:22px 0}.demo{padding:16px}}
.panel{padding:18px;border:3px solid var(--ink);background:var(--paper);box-shadow:8px 8px 0 var(--ink)}.stack{display:grid;gap:12px}.row{display:flex;flex-wrap:wrap;gap:8px}.action{min-height:42px;padding:8px 13px;border:3px solid var(--ink);background:var(--paper);font-weight:900}.action.primary,.action.is-active{color:var(--paper);background:var(--ink)}.status{min-height:24px;padding:8px;color:var(--paper);background:var(--ink);font-weight:900}.metric{font-size:clamp(34px,8vw,76px);font-weight:900;letter-spacing:-.08em}.muted{font-weight:600}.chip{padding:5px 8px;border:2px solid var(--ink);font-weight:900}.meter{height:14px;border:3px solid var(--ink)}.meter>i{display:block;height:100%;background:var(--ink)}
.composition-studio{display:grid;gap:14px}.studio-ruler{display:flex;justify-content:space-between;padding:0 4px;color:color-mix(in srgb,var(--ink) 55%,transparent);font:700 11px/1 ui-monospace,monospace;letter-spacing:.14em}.studio-ruler::before{content:"01 / WORKING PROTOTYPE"}.studio-ruler::after{content:"360 · 768 · 1440"}.composition-studio .demo::after{content:"";position:absolute;right:18px;bottom:18px;width:24px;height:24px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);pointer-events:none}
.directory-studio{display:grid;grid-template-columns:130px minmax(0,1fr) 240px;gap:18px}.directory-studio header{grid-column:1/-1;display:flex;justify-content:space-between;gap:18px;align-items:end}.directory-studio h2{margin:.3em 0}.directory-studio input{min-width:240px;padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}.alphabet-nav{display:grid;align-content:start;gap:5px}.alphabet-nav button{padding:8px;border:0;border-radius:8px;background:transparent}.alphabet-nav button[aria-pressed="true"]{color:var(--paper);background:var(--ink)}#contactDirectory{display:grid;gap:8px;padding:0;margin:0;list-style:none}#contactDirectory li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}#contactDirectory li>button{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;border:0;background:transparent;text-align:left}#contactDirectory i{display:grid;width:42px;height:42px;place-items:center;border-radius:50%;background:var(--secondary);font-style:normal}#contactDirectory span{display:grid;gap:4px}#contactDirectory a{color:var(--accent)}#contactCard{display:grid;align-content:start;gap:10px;padding:18px;border-left:5px solid var(--accent);background:color-mix(in srgb,var(--secondary) 12%,transparent)}#contactCard strong{font-size:28px}@media(max-width:720px){.directory-studio{grid-template-columns:1fr}.directory-studio header{align-items:stretch;flex-direction:column}.directory-studio input{min-width:0}.alphabet-nav{grid-auto-flow:column;overflow:auto}}.workflow-dispatch{display:grid;grid-template-columns:minmax(210px,.48fr) minmax(0,1.52fr);gap:18px}.dispatch-console{display:grid;align-content:start;gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--secondary) 12%,var(--paper))}.dispatch-console h2{margin:.2em 0}.dispatch-console form,.dispatch-console label{display:grid;gap:7px}.dispatch-console input,.dispatch-console select{min-width:0;width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.dispatch-console fieldset{display:flex;gap:12px;border:1px solid var(--line);border-radius:10px}.dispatch-console fieldset label{display:flex;align-items:center}.dispatch-workbench{--dispatch-load:.22;min-width:0;padding:14px;border-left:8px solid color-mix(in srgb,var(--accent) calc(var(--dispatch-load)*100%),var(--line));background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 28%)}.dispatch-workbench[data-dispatch-priority="urgent"]{box-shadow:inset 0 0 0 2px var(--accent)}@media(max-width:900px){.workflow-dispatch{grid-template-columns:1fr}.dispatch-console{order:2}}
</style>
</head>
<body data-aesthetic="dark-neon" data-composition="studio">
<main class="page">
<header class="mast"><div><span class="eyebrow">dark-neon / Contact Index / BEGINNER</span><h1>Field handover log contact index</h1><p class="intro">Complete the contact index in a field handover log scenario: with real content, actionable controls, clear status feedback, and layouts that adapt across sizes.</p></div><span class="scenario">Field Handover Log</span></header>
<div class="composition-studio"><div class="studio-ruler" aria-hidden="true"></div><section class="demo" aria-label="Field Handover Log Contact Index Interactive Area"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Field Handover Log DISPATCH</span><h2>Field Handover Log Dispatch Desk</h2><form id="workflowDispatchForm"><label>Task Type<select id="workflowDispatchKind"><option>Field handover log collection checklist</option><option>Field handover log sorting and grouping</option><option>Field Handover Log Published</option></select></label><label>Content Count<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="45"><span>Item</span></label><fieldset><legend>Processing priority</legend><label><input type="radio" name="workflowPriority" value="normal" checked>Regular</label><label><input type="radio" name="workflowPriority" value="urgent">Urgent</label></fieldset><button class="action primary" type="submit">Save Arrangement</button></form><label>Current task<select id="workflowDispatchActive" aria-label="Switch current task"><option value="1">Field handover log collection checklist</option><option value="2">Field handover log sorting and grouping</option></select></label><output id="workflowDispatchSummary">Waiting for Dispatch</output></aside><section id="workflowCore" class="workflow-core dispatch-workbench" data-dispatch-priority="normal"><!-- 11DZ_CORE_START:cards-lists-content-contact-directory --><div class="directory-studio"><header><div><span class="eyebrow">CONTACT DIRECTORY</span><h2>Field Handover Log Contact Ledger</h2></div><input id="directoryQuery" type="search" placeholder="Search name" autocomplete="off"></header><nav class="alphabet-nav" aria-label="Alphabetical filter"><button type="button" data-initial="" aria-pressed="true" data-core-bridge="cards-lists-content-contact-directory">All</button><button type="button" data-initial="A" aria-pressed="false">A</button><button type="button" data-initial="C" aria-pressed="false">C</button><button type="button" data-initial="F" aria-pressed="false">F</button><button type="button" data-initial="L" aria-pressed="false">L</button><button type="button" data-initial="M" aria-pressed="false">M</button><button type="button" data-initial="S" aria-pressed="false">S</button><button type="button" data-initial="Z" aria-pressed="false">Z</button></nav><ul id="contactDirectory"><li data-initial="A"><button type="button" data-contact-card="0"><i aria-hidden="true">A</i><span><b>Field Handover Log Plan</b><small>Project collaboration</small></span></button><a href="mailto:demo@example.invalid" aria-label="Email the Field Handover Log plan">Contact</a></li><li data-initial="C"><button type="button" data-contact-card="1"><i aria-hidden="true">C</i><span><b>Field Handover Log Inspiration</b><small>Content Design</small></span></button><a href="mailto:demo@example.invalid" aria-label="Email about the field handover log">Contact</a></li><li data-initial="F"><button type="button" data-contact-card="2"><i aria-hidden="true">F</i><span><b>Field Handover Log Entry</b><small>Project collaboration</small></span></button><a href="mailto:demo@example.invalid" aria-label="Write an email to the field handover log record">Contact</a></li><li data-initial="L"><button type="button" data-contact-card="3"><i aria-hidden="true">L</i><span><b>Field Handover Log Collaboration</b><small>Content Design</small></span></button><a href="mailto:demo@example.invalid" aria-label="Email about collaborative handoff for the field log">Contact</a></li><li data-initial="M"><button type="button" data-contact-card="4"><i aria-hidden="true">M</i><span><b>Field Handover Log Progress</b><small>Project collaboration</small></span></button><a href="mailto:demo@example.invalid" aria-label="Email the field handover log progress">Contact</a></li><li data-initial="S"><button type="button" data-contact-card="5"><i aria-hidden="true">S</i><span><b>Field Handover Log Reminder</b><small>Content Design</small></span></button><a href="mailto:demo@example.invalid" aria-label="Send Email Reminder to Field Handover Log">Contact</a></li><li data-initial="Z"><button type="button" data-contact-card="6"><i aria-hidden="true">Z</i><span><b>Field Handover Log Collection</b><small>Project collaboration</small></span></button><a href="mailto:demo@example.invalid" aria-label="Email for the Field Handover Log Collection">Contact</a></li><li data-initial="Z"><button type="button" data-contact-card="7"><i aria-hidden="true">Z</i><span><b>Field handover log overview</b><small>Content Design</small></span></button><a href="mailto:demo@example.invalid" aria-label="Email the Field Handover Log Overview">Contact</a></li></ul><aside id="contactCard"><span>Contact Details</span><strong>Field Handover Log Plan</strong><p id="contactCardRole">Project collaboration</p><output id="contactVisibleCount">0 visible to people</output></aside></div><!-- 11DZ_CORE_END --></section></div><p id="status" class="status" role="status" aria-live="polite"></p></section></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:cards-lists-content-contact-directory */
const directoryQuery=document.querySelector('#directoryQuery');const directoryContacts=[...document.querySelectorAll('#contactDirectory li')];const contactButtons=[...document.querySelectorAll('[data-contact-card]')];let activeInitial='';function renderContactCard(index){const target=directoryContacts[index];if(!target)return;document.querySelector('#contactCard strong').textContent=target.querySelector('b').textContent;document.querySelector('#contactCardRole').textContent=target.querySelector('small').textContent;announce('Viewed '+target.querySelector('b').textContent);}function filterDirectory(){const query=directoryQuery.value.normalize('NFKC').trim().toLowerCase();let count=0;directoryContacts.forEach(contact=>{const name=contact.querySelector('b').textContent.normalize('NFKC').toLowerCase();const visible=(!activeInitial||contact.dataset.initial===activeInitial)&&(!query||name.includes(query));contact.hidden=!visible;if(visible)count+=1;});document.querySelector('#contactVisibleCount').textContent=count+' Visible to people';announce('Contact Directory Display '+count+' person');}document.querySelectorAll('[data-initial]').forEach(button=>button.addEventListener('click',()=>{activeInitial=button.dataset.initial;document.querySelectorAll('[data-initial]').forEach(item=>item.setAttribute('aria-pressed',String(item===button)));filterDirectory();}));directoryQuery.addEventListener('input',filterDirectory);contactButtons.forEach(button=>button.addEventListener('click',()=>renderContactCard(Number(button.dataset.contactCard))));document.querySelectorAll('#contactDirectory a').forEach(link=>link.addEventListener('click',event=>{event.preventDefault();announce('The demo page will not send emails.');}));filterDirectory();renderContactCard(0);
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"cards-lists-content-contact-directory","selector":"[data-core-bridge=\"cards-lists-content-contact-directory\"]","mode":"click","key":"Enter"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Core Version '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.addEventListener("click",workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();workflowBridgeControl.click();const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowDispatchCore=document.querySelector('#workflowCore');const workflowDispatchForm=document.querySelector('#workflowDispatchForm');const workflowDispatchSelect=document.querySelector('#workflowDispatchActive');const workflowDispatchJobs=new Map([["1",{"label":"Field handover log collection checklist","amount":12,"priority":"normal","touches":0}],["2",{"label":"Field handover log sorting and grouping","amount":21,"priority":"urgent","touches":0}]]);let workflowDispatchSerial=workflowDispatchJobs.size;function workflowDispatchDrive(job,activate=false){workflowDispatchCore.dataset.dispatchPriority=job.priority;workflowDispatchCore.style.setProperty('--dispatch-load',Math.min(.95,.16+job.amount/120));const bridge=activate?workflowBridgeActivate():{changed:false,summary:workflowBridgeSummary()};document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' Item · '+bridge.summary;announce('Field Handover Log Current task:'+job.label);}function workflowDispatchRender(activeId,activate=false){workflowDispatchSelect.replaceChildren(...[...workflowDispatchJobs].map(([id,job])=>{const option=document.createElement('option');option.value=id;option.textContent=job.label+(job.priority==='urgent'?' · Urgent':'');return option;}));workflowDispatchSelect.value=activeId;workflowDispatchDrive(workflowDispatchJobs.get(activeId),activate);}workflowDispatchForm.addEventListener('submit',event=>{event.preventDefault();const data=new FormData(workflowDispatchForm);const id=String(++workflowDispatchSerial);workflowDispatchJobs.set(id,{label:document.querySelector('#workflowDispatchKind').value,amount:Math.max(1,Number(document.querySelector('#workflowDispatchAmount').value)||1),priority:data.get('workflowPriority'),touches:0});workflowDispatchRender(id,true);});workflowDispatchSelect.addEventListener('change',()=>workflowDispatchDrive(workflowDispatchJobs.get(workflowDispatchSelect.value),true));workflowDispatchCore.addEventListener('focusin',()=>{const job=workflowDispatchJobs.get(workflowDispatchSelect.value);if(!job)return;job.touches+=1;document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' Item · '+workflowBridgeSummary();});workflowDispatchRender('1',false);
workflowBridgeReset();
</script>
</body>
</html>