Clinic Visit Card Command Palette
Complete a command palette in a clinic visit pass scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across screen 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>Clinic Visit Card Command Palette</title>
<style>
:root { --ink:#252525; --paper:#f7f2e8; --accent:#247ba0; --secondary:#f4b942; --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:Didot,"Songti SC",serif; background:linear-gradient(30deg,transparent 48%,color-mix(in srgb,var(--accent) 9%,transparent) 49% 51%,transparent 52%),var(--paper);background-size:52px 90px; }
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(1040px,calc(100% - 36px));margin:auto;padding:64px 0}.mast{display:grid;justify-items:center;text-align:center;border-block:3px double var(--accent);padding:26px;gap:20px;margin-bottom:32px}.mast h1{font-family:Didot,"Songti SC",serif;font-weight:700;font-size:clamp(38px,8vw,86px);letter-spacing:.035em;margin:0;line-height:1}.eyebrow{display:block;color:var(--accent);font:800 11px/1 ui-monospace,monospace;letter-spacing:.3em}.intro{max-width:600px;margin-inline:auto;line-height:1.8}.scenario{padding:8px 26px;border-inline:1px solid var(--accent);letter-spacing:.16em}.demo{border:4px double var(--accent);border-radius:0;clip-path:polygon(24px 0,calc(100% - 24px) 0,100% 24px,100% calc(100% - 24px),calc(100% - 24px) 100%,24px 100%,0 calc(100% - 24px),0 24px);position:relative;min-height:440px;overflow:hidden;padding:clamp(28px,5vw,60px);background:var(--paper)}@media(max-width:700px){.page{width:calc(100% - 20px);padding:24px 0}.mast{padding:18px}.demo{padding:18px}}
.panel{padding:24px;border-block:1px solid var(--ink);background:transparent}.stack{display:grid;gap:22px}.row{display:flex;flex-wrap:wrap;gap:16px}.action{padding:8px 0;border:0;border-bottom:1px solid currentColor;background:transparent;letter-spacing:.08em}.action.primary,.action.is-active{color:var(--accent);border-bottom-width:4px}.status{min-height:28px;margin-top:20px;font-style:italic}.metric{font-family:Didot,serif;font-size:clamp(38px,8vw,76px)}.muted{max-width:54ch;line-height:1.8}.meter{position:relative;height:3px;background:var(--line)}.meter>i{position:absolute;inset:0 auto 0 0;background:var(--accent)}.chip{padding-bottom:3px;border-bottom:1px solid var(--ink);font-size:13px}
.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}
.command-studio{display:grid;gap:16px;max-width:980px;margin:auto}.command-studio header{display:flex;justify-content:space-between;gap:18px;align-items:end}.command-studio header label{display:grid;gap:8px;font-weight:800;flex:1}.command-studio header input{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}.command-layout{display:grid;grid-template-columns:120px minmax(0,1fr) 250px;gap:14px}.command-groups{display:grid;align-content:start;gap:7px}.command-groups button{padding:10px;border:1px solid var(--line);border-radius:999px;background:transparent}.command-groups button[aria-pressed="true"]{color:var(--paper);background:var(--ink)}.command-results{display:grid;gap:10px}.command-results button{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start;padding:15px;border:1px solid var(--line);border-radius:16px;background:var(--paper);text-align:left}.command-results button small{grid-column:1}.command-results button i{grid-row:1/3;font-style:normal;color:var(--accent)}.command-results button.is-active{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}.command-preview{display:grid;align-content:start;gap:10px;padding:18px;border-left:5px solid var(--accent);background:color-mix(in srgb,var(--secondary) 10%,transparent)}.command-preview strong{font-size:30px}@media(max-width:780px){.command-studio header{align-items:stretch;flex-direction:column}.command-layout{grid-template-columns:1fr}.command-groups{grid-auto-flow:column;overflow:auto}}.workflow-guide{display:grid;grid-template-columns:190px minmax(0,1fr);grid-template-areas:"rail core" "rail evidence";gap:14px 18px}.guide-rail{grid-area:rail;display:grid;align-content:start;gap:15px;padding:18px;border-right:1px solid var(--line)}.guide-rail ol{display:grid;gap:8px;padding:0;margin:0;list-style:none}.guide-rail li{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;padding:9px;opacity:.5}.guide-rail li[aria-current="step"]{opacity:1;color:var(--paper);background:var(--ink)}.guide-rail li.is-complete{opacity:1;color:var(--accent)}.guide-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.guide-actions .action{padding-inline:8px}#workflowGuideProgress{height:6px;background:var(--line)}#workflowGuideProgress i{display:block;width:0;height:100%;background:var(--accent)}.guide-core{grid-area:core;min-width:0;padding:16px;border:1px solid var(--line)}.guide-core>p{margin:0 0 14px;padding:10px;border-left:4px solid var(--accent);background:color-mix(in srgb,var(--secondary) 12%,transparent)}.guide-core[data-guide-step="1"]{border-radius:28px}.guide-core[data-guide-step="2"]{box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent)}.guide-evidence{grid-area:evidence;display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:start}.guide-evidence details,.guide-evidence form{padding:12px;border:1px solid var(--line)}.guide-evidence label{display:grid;gap:7px}.guide-evidence textarea{width:100%;padding:9px;border:1px solid var(--line);background:var(--paper)}@media(max-width:900px){.workflow-guide{grid-template-columns:1fr;grid-template-areas:"core" "rail" "evidence"}.guide-rail{border-right:0;border-bottom:1px solid var(--line)}.guide-rail ol{grid-template-columns:repeat(3,1fr)}.guide-evidence{grid-template-columns:1fr}}
</style>
</head>
<body data-aesthetic="art-deco" data-composition="studio">
<main class="page">
<header class="mast"><div><span class="eyebrow">art-deco / command palette / BEGINNER</span><h1>Clinic Visit Card Command Palette</h1><p class="intro">Complete a command palette in a clinic visit pass scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across screen sizes.</p></div><span class="scenario">Outpatient Visit Pass</span></header>
<div class="composition-studio"><div class="studio-ruler" aria-hidden="true"></div><section class="demo" aria-label="Outpatient Visit Card Command Palette Interaction Area"><div class="workflow-guide"><nav class="guide-rail" aria-label="Outpatient Visit Card Guide"><span class="eyebrow">Clinic Visit Card GUIDE</span><ol><li data-workflow-guide-step="0" aria-current="step"><b>1</b><span>Clinic visit pass entry navigation</span></li><li data-workflow-guide-step="1"><b>2</b><span>Outpatient Visit Card Path Navigation</span></li><li data-workflow-guide-step="2"><b>3</b><span>Outpatient Visit Card Completed Navigation</span></li></ol><div class="guide-actions"><button id="workflowGuideBack" class="action" type="button" disabled>Previous</button><button id="workflowGuideNext" class="action primary" type="button">Complete this step</button></div><div id="workflowGuideProgress" role="progressbar" aria-label="Outpatient Visit Pass Completion" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i></i></div></nav><section id="workflowCore" class="workflow-core guide-core" data-guide-step="0" aria-describedby="workflowGuideInstruction"><p id="workflowGuideInstruction">Please complete the operations related to “Clinic Visit Pass Entry Navigation” in the main example.</p><!-- 11DZ_CORE_START:navigation-menus-command-palette --><div class="command-studio panel"><header><label><span>Search commands</span><input id="commandQuery" type="search" placeholder="Enter keywords to filter commands" autocomplete="off"></label><output id="commandCount">7 items in total</output></header><div class="command-layout"><nav class="command-groups" aria-label="Command groups"><button type="button" data-command-group="0" aria-pressed="true" data-core-bridge="navigation-menus-command-palette">All</button><button type="button" data-command-group="1" aria-pressed="false">Action</button><button type="button" data-command-group="2" aria-pressed="false">Navigation</button><button type="button" data-command-group="3" aria-pressed="false">Materials</button></nav><section id="commandResults" class="command-results"><button type="button" data-command-index="0" data-command-kind="1"><strong>Outpatient Visit Card Progress</strong><small>Perform local actions</small><i>Action</i></button><button type="button" data-command-index="1" data-command-kind="1"><strong>Outpatient Visit Card Reminder</strong><small>Update current view</small><i>Action</i></button><button type="button" data-command-index="2" data-command-kind="2"><strong>Outpatient Visit Card Favorites</strong><small>Perform local actions</small><i>Navigation</i></button><button type="button" data-command-index="3" data-command-kind="0"><strong>Outpatient visit card overview</strong><small>Update current view</small><i>Action</i></button><button type="button" data-command-index="4" data-command-kind="1"><strong>Outpatient Visit Card Plan</strong><small>Perform local actions</small><i>Action</i></button><button type="button" data-command-index="5" data-command-kind="2"><strong>Outpatient Visit Card Inspiration</strong><small>Update current view</small><i>Navigation</i></button><button type="button" data-command-index="6" data-command-kind="0"><strong>Clinic Visit Card Records</strong><small>Perform local actions</small><i>Action</i></button></section><aside class="command-preview"><span>Current command</span><strong id="commandPreviewTitle">Outpatient Visit Card Progress</strong><p id="commandPreviewCopy">Action commands complete immediately on the current page, without making external requests.</p><button id="commandRun" class="action primary" type="button">Execute current command</button></aside></div></div><!-- 11DZ_CORE_END --></section><aside class="guide-evidence"><details id="workflowGuideDetails"><summary>View acceptance requirements</summary><ul><li>The outpatient visit card entry navigation requires a visible state change once</li><li>The outpatient visit pass path navigation requires a visible state change</li><li>A visible state change is required to complete navigation for the outpatient visit pass</li></ul></details><form id="workflowGuideEvidenceForm"><label>This step evidence<textarea id="workflowGuideEvidence" rows="3" placeholder="Record the observed state"></textarea></label><input class="action" type="submit" value="Save evidence"></form><output id="workflowGuideSummary">0 / 3 Steps Complete</output></aside></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:navigation-menus-command-palette */
const commandQuery=document.querySelector('#commandQuery');const commandGroupButtons=[...document.querySelectorAll('[data-command-group]')];const commandCards=[...document.querySelectorAll('[data-command-index]')];let activeCommandIndex=0;let activeCommandGroup=0;function setCommandActive(index,announceChange=true){const card=commandCards.find(item=>Number(item.dataset.commandIndex)===index&&!item.hidden);if(!card)return;activeCommandIndex=index;commandCards.forEach(item=>item.classList.toggle('is-active',item===card));document.querySelector('#commandPreviewTitle').textContent=card.querySelector('strong').textContent;document.querySelector('#commandPreviewCopy').textContent=card.querySelector('small').textContent+'，labelled as '+card.querySelector('i').textContent+'。';if(announceChange)announce('Current command '+card.querySelector('strong').textContent);}function filterCommandCards(){const query=commandQuery.value.normalize('NFKC').trim().toLowerCase();let count=0;commandCards.forEach(card=>{const groupMatch=activeCommandGroup===0||Number(card.dataset.commandKind)===activeCommandGroup;const searchable=card.querySelector('strong').textContent.normalize('NFKC').toLowerCase();const searchMatch=!query||searchable.includes(query);card.hidden=!(groupMatch&&searchMatch);if(!card.hidden)count+=1;});document.querySelector('#commandCount').textContent='All '+count+' item';const firstVisible=commandCards.find(card=>!card.hidden);if(firstVisible)setCommandActive(Number(firstVisible.dataset.commandIndex),false);announce('Currently Visible Commands '+count+' item');}commandGroupButtons.forEach(button=>button.addEventListener('click',()=>{activeCommandGroup=Number(button.dataset.commandGroup);commandGroupButtons.forEach(item=>item.setAttribute('aria-pressed',String(item===button)));filterCommandCards();}));commandQuery.addEventListener('input',filterCommandCards);commandCards.forEach(card=>card.addEventListener('click',()=>setCommandActive(Number(card.dataset.commandIndex))));document.querySelector('#commandRun').addEventListener('click',()=>announce('Executed:'+document.querySelector('#commandPreviewTitle').textContent));filterCommandCards();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"navigation-menus-command-palette","selector":"[data-core-bridge=\"navigation-menus-command-palette\"]","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 workflowGuideCore=document.querySelector('#workflowCore');const workflowGuideStages=["Clinic visit pass entry navigation","Outpatient Visit Card Path Navigation","Outpatient Visit Card Completed Navigation"];const workflowGuideState={step:0,completed:new Set(),evidence:new Map(),consumedVersion:0};function workflowGuideDrive(){const step=workflowGuideState.step;workflowGuideCore.dataset.guideStep=String(step);document.querySelector('#workflowGuideInstruction').textContent='Please complete the main example ‘'+workflowGuideStages[step]+'Related actions.”';document.querySelectorAll('[data-workflow-guide-step]').forEach((item,index)=>{item.classList.toggle('is-complete',workflowGuideState.completed.has(index));if(index===step)item.setAttribute('aria-current','step');else item.removeAttribute('aria-current');});document.querySelector('#workflowGuideBack').disabled=step===0;document.querySelector('#workflowGuideNext').textContent=step===workflowGuideStages.length-1?'Entry Path':'Complete this step';const percent=Math.round(workflowGuideState.completed.size/workflowGuideStages.length*100);const progress=document.querySelector('#workflowGuideProgress');progress.setAttribute('aria-valuenow',String(percent));progress.querySelector('i').style.width=percent+'%';document.querySelector('#workflowGuideSummary').textContent=workflowGuideState.completed.size+' / '+workflowGuideStages.length+' Step complete · '+workflowBridgeSummary();announce('Outpatient Visit Card Current Step:'+workflowGuideStages[step]);}function workflowGuideAdvance(direction){if(direction>0){const bridge=workflowBridgeActivate();const version=Number(workflowGuideCore.dataset.workflowVersion||0);if(version<=workflowGuideState.consumedVersion){announce('Please complete the visible state change in the main example first');return;}workflowGuideState.consumedVersion=version;workflowGuideState.completed.add(workflowGuideState.step);announce('Main case changes recorded · '+bridge.summary);}workflowGuideState.step=Math.max(0,Math.min(workflowGuideStages.length-1,workflowGuideState.step+direction));workflowGuideDrive();}document.querySelector('#workflowGuideBack').addEventListener('click',()=>workflowGuideAdvance(-1));document.querySelector('#workflowGuideNext').addEventListener('click',()=>workflowGuideAdvance(1));document.querySelector('#workflowGuideEvidenceForm').addEventListener('submit',event=>{event.preventDefault();const version=Number(workflowGuideCore.dataset.workflowVersion||0);if(version<=workflowGuideState.consumedVersion){announce('Evidence not saved: the main example has no new changes yet');return;}const text=document.querySelector('#workflowGuideEvidence').value.trim();workflowGuideState.evidence.set(workflowGuideState.step,text||'Visible status check completed');workflowGuideState.completed.add(workflowGuideState.step);workflowGuideState.consumedVersion=version;workflowGuideDrive();announce('Evidence for this step has been saved · '+workflowBridgeSummary());});document.querySelector('#workflowGuideDetails').addEventListener('toggle',event=>announce(event.currentTarget.open?'Acceptance requirements expanded':'Acceptance requirements collapsed'));workflowGuideDrive();
workflowBridgeReset();
</script>
</body>
</html>