Tabela de cartões para dispositivos móveis de acerto de item de exposição
Complete uma tabela em formato de cartões para celular no cenário de boletim de liquidação de itens da exposição: inclui conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo.
É possível editar, executar e salvar este exemplo após ativar JavaScript. O código-fonte fixo é o seguinte:
<!doctype html>
<html lang="pt-BR" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tabela de cartões para dispositivos móveis de acerto de item de exposição</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:"Songti SC","Noto Serif SC",Georgia,serif; background:linear-gradient(90deg,transparent 49.7%,color-mix(in srgb,var(--ink) 7%,transparent) 50%,transparent 50.3%),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(1180px,calc(100% - 40px));margin:auto;padding:7vw 0}.mast{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(180px,.4fr);gap:5vw;align-items:end;margin-bottom:38px}.mast h1{font-family:"Songti SC",Georgia,serif;font-weight:800;font-size:clamp(42px,9vw,92px);max-width:920px;margin:0;line-height:.94}.eyebrow{display:block;margin-bottom:14px;color:var(--accent);font:800 11px/1 ui-monospace,monospace;letter-spacing:.24em}.intro{max-width:58ch;line-height:1.9}.scenario{align-self:start;padding-top:10px;border-top:1px solid var(--ink);font-style:italic}.demo{border-radius:0;border-width:2px;box-shadow:14px 14px 0 color-mix(in srgb,var(--ink) 18%,transparent);position:relative;overflow:hidden;min-height:420px;padding:clamp(22px,4vw,48px);background:var(--paper)}@media(max-width:700px){.page{width:calc(100% - 22px);padding:26px 0}.mast{grid-template-columns:1fr}.demo{min-height:340px;padding:18px}}
.panel{padding:30px;border:0;border-radius:42px 12px;background:color-mix(in srgb,var(--secondary) 18%,var(--paper))}.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}.stack{display:flex;flex-direction:column;gap:20px}.action{min-height:48px;padding:12px 22px;border:0;border-radius:50% 50% 18px 18px;background:color-mix(in srgb,var(--secondary) 42%,transparent);font-weight:800}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.muted{color:color-mix(in srgb,var(--ink) 64%,transparent);line-height:1.7}.status{min-height:25px;margin-top:16px;color:var(--accent)}.metric{font-size:clamp(32px,7vw,66px);font-weight:800}.meter{height:11px;border-radius:50%;background:color-mix(in srgb,var(--ink) 10%,transparent)}.meter>i{display:block;height:100%;border-radius:inherit;background:var(--accent)}.chip{padding:8px 12px;border-radius:50%;background:var(--paper)}
.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}
.special-table{width:100%;border-collapse:collapse;background:var(--paper)}.special-table caption{padding:14px 16px;text-align:left;font-weight:800}.special-table th,.special-table td{padding:13px 16px;border-top:1px solid var(--line);text-align:left}.special-table tbody tr:hover{background:color-mix(in srgb,var(--secondary) 14%,transparent)}.special-table-shell{overflow:auto;border:1px solid var(--line);border-radius:18px;background:var(--paper)}.table-special-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}.table-special-tools select,.table-special-tools input{min-height:40px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--paper)}.responsive-table-demo{display:grid;gap:14px}.responsive-table-demo h2{margin:.35em 0}.responsive-cell-label{display:none}.responsive-record-table.force-cards{border:0;background:transparent}.responsive-record-table.force-cards table,.responsive-record-table.force-cards tbody,.responsive-record-table.force-cards tr,.responsive-record-table.force-cards td{display:block}.responsive-record-table.force-cards thead{position:absolute;clip:rect(0 0 0 0)}.responsive-record-table.force-cards tbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.responsive-record-table.force-cards tr{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}.responsive-record-table.force-cards td{display:grid;grid-template-columns:90px 1fr;border:0;padding:7px}.responsive-record-table.force-cards .responsive-cell-label{display:block;font-weight:900}@media(max-width:620px){.responsive-record-table{border:0;background:transparent}.responsive-record-table table,.responsive-record-table tbody,.responsive-record-table tr,.responsive-record-table td{display:block}.responsive-record-table thead{position:absolute;clip:rect(0 0 0 0)}.responsive-record-table tbody{display:grid;gap:12px}.responsive-record-table tr{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}.responsive-record-table td{display:grid;grid-template-columns:90px 1fr;border:0;padding:7px}.responsive-record-table .responsive-cell-label{display:block;font-weight:900}}.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}}.evidence-shell{--evidence-zoom:100;display:grid;gap:18px;padding:clamp(16px,4vw,26px);border:1px solid var(--line);border-radius:30px;background:linear-gradient(180deg,color-mix(in srgb,var(--secondary) 8%,transparent),color-mix(in srgb,var(--paper) 94%,transparent));box-shadow:var(--shadow)}.evidence-head{display:flex;justify-content:space-between;gap:18px;align-items:end}.evidence-head h2{margin:.2em 0}.evidence-tools{display:grid;gap:10px;justify-items:end}.evidence-tools output{padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-weight:900}.evidence-body{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(230px,.55fr);gap:16px}.evidence-stage{display:grid;gap:12px;min-width:0}.evidence-ribbon{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.evidence-ribbon button{display:grid;gap:6px;min-height:110px;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--paper);text-align:left}.evidence-ribbon button[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}.evidence-ribbon span{font:800 11px/1 ui-monospace,monospace;letter-spacing:.14em}.evidence-ribbon small{opacity:.72;line-height:1.5}.evidence-core-shell{min-width:0;padding:clamp(12px,3vw,20px);overflow:auto;border:1px solid var(--line);border-radius:24px;background:color-mix(in srgb,var(--paper) 92%,transparent)}.evidence-core-shell>*{display:block;width:calc(10000%/var(--evidence-zoom));max-width:none;transform:scale(calc(var(--evidence-zoom)/100));transform-origin:top left}.evidence-rail{display:grid;align-content:start;gap:14px;padding:18px;border-radius:22px;color:var(--paper);background:var(--ink)}.evidence-rail label{display:grid;gap:8px}.evidence-rail input,.evidence-rail select{width:100%;padding:10px;border:1px solid #ffffff2e;border-radius:10px;color:inherit;background:#ffffff12}.evidence-checklist,.evidence-log{display:grid;gap:8px;padding-left:18px;margin:0}.evidence-checklist li.is-active{color:var(--secondary);font-weight:900}.evidence-checklist li.is-done{color:var(--accent);font-weight:900}.evidence-log li{line-height:1.55}.evidence-shell[data-board-mode="proof"] .evidence-core-shell{outline:4px solid color-mix(in srgb,var(--accent) 32%,transparent);outline-offset:2px}.evidence-shell[data-board-mode="handoff"] .evidence-rail{background:color-mix(in srgb,var(--ink) 82%,#0a1512)}@media(max-width:920px){.evidence-body{grid-template-columns:1fr}.evidence-ribbon{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.evidence-head{align-items:stretch;flex-direction:column}.evidence-tools{justify-items:start}.evidence-ribbon{grid-template-columns:1fr}.evidence-core-shell>*{width:100%;transform:none}}
</style>
</head>
<body data-aesthetic="editorial" data-composition="studio">
<main class="page">
<header class="mast"><div><span class="eyebrow">editorial / cartões para mobile / BEGINNER</span><h1>Tabela de cartões para dispositivos móveis de acerto de item de exposição</h1><p class="intro">Complete uma tabela em formato de cartões para celular no cenário de boletim de liquidação de itens da exposição: inclui conteúdo real, controles acionáveis, feedback de estado claro e layout responsivo.</p></div><span class="scenario">Planilha de liquidação de itens da exposição</span></header>
<div class="composition-studio"><div class="studio-ruler" aria-hidden="true"></div><section class="demo" aria-label="Área de interação da tabela em cartões para o extrato de liquidação da exposição"><section id="evidenceShell" class="evidence-shell" data-board-mode="scan"><header class="evidence-head"><div><span class="eyebrow">Relatório de acerto de expositores / EVIDENCE BOARD</span><h2>Painel de observação da interface de cartões para dispositivos móveis</h2><p>Coloque o caso principal no quadro de evidências, usando cartões de observação separados, registros e alternância de padrões para registrar o resultado atual.</p></div><div class="evidence-tools"><div class="row"><button class="action primary" type="button" data-board-mode="scan">Escanear</button><button class="action" type="button" data-board-mode="proof">Verificação</button><button class="action" type="button" data-board-mode="handoff">Transferência</button></div><output id="evidenceStatus">Aguardando amostragem</output></div></header><div class="evidence-body"><section class="evidence-stage"><div class="evidence-ribbon"><button type="button" data-evidence-card="0" aria-pressed="true"><span>01</span><strong>Progresso da fatura de liquidação do item da exposição</strong><small>Verifique se a mudança de estado está visível</small></button><button type="button" data-evidence-card="1" aria-pressed="false"><span>02</span><strong>Lembrete de acerto do item de exposição</strong><small>Confirmar que as entradas por teclado e por clique são consistentes</small></button><button type="button" data-evidence-card="2" aria-pressed="false"><span>03</span><strong>Coleção da planilha de liquidação dos itens da exposição</strong><small>Observe se o layout recua em telas estreitas</small></button><button type="button" data-evidence-card="3" aria-pressed="false"><span>04</span><strong>Visão geral da planilha de liquidação dos itens em exposição</strong><small>Registre a conclusão da revisão atual</small></button></div><div id="evidenceCoreShell" class="evidence-core-shell"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Folha de acerto da exposição DISPATCH</span><h2>Posto de despacho da planilha de liquidação de itens da exposição</h2><form id="workflowDispatchForm"><label>Tipo de tarefa<select id="workflowDispatchKind"><option>Vista filtrada da folha de liquidação de itens da exposição</option><option>Visão comparativa da folha de liquidação dos itens da exposição</option><option>Visão consolidada da folha de liquidação dos itens da exposição</option></select></label><label>Total de registros<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="33"><span>item</span></label><fieldset><legend>Prioridade de processamento</legend><label><input type="radio" name="workflowPriority" value="normal" checked>Padrão</label><label><input type="radio" name="workflowPriority" value="urgent">Urgente</label></fieldset><button class="action primary" type="submit">Visão do aplicativo</button></form><label>Tarefa atual<select id="workflowDispatchActive" aria-label="Alternar tarefa atual"><option value="1">Vista filtrada da folha de liquidação de itens da exposição</option><option value="2">Visão comparativa da folha de liquidação dos itens da exposição</option></select></label><output id="workflowDispatchSummary">Aguardando despacho</output></aside><section id="workflowCore" class="workflow-core dispatch-workbench" data-dispatch-priority="normal"><!-- 11DZ_CORE_START:tables-data-table-to-cards --><div class="responsive-table-demo"><header class="table-special-tools"><div><span class="eyebrow">RESPONSIVE RECORDS</span><h2>Registro de liquidação de item de exposição em vários tamanhos</h2></div><button id="tableCardModeToggle" class="action" type="button" aria-pressed="false" data-core-bridge="tables-data-table-to-cards">Modo de visualização de cartões</button></header><div id="responsiveRecordTable" class="responsive-record-table special-table-shell"><table class="special-table"><caption>Registro de liquidação de item de exposição em vários tamanhos</caption><th aria-sort="none"ead><tr><th aria-sort="none">Projeto</th><th aria-sort="none">valor</th><th aria-sort="none">Status</th></tr></thead><tbody><tr><td><span class="responsive-cell-label" aria-hidden="true">Projeto</span><span class="responsive-cell-value">Progresso da fatura de liquidação do item da exposição</span></td><td><span class="responsive-cell-label" aria-hidden="true">valor</span><span class="responsive-cell-value">18</span></td><td><span class="responsive-cell-label" aria-hidden="true">Status</span><span class="responsive-cell-value">Pendente</span></td></tr><tr><td><span class="responsive-cell-label" aria-hidden="true">Projeto</span><span class="responsive-cell-value">Lembrete de acerto do item de exposição</span></td><td><span class="responsive-cell-label" aria-hidden="true">valor</span><span class="responsive-cell-value">31</span></td><td><span class="responsive-cell-label" aria-hidden="true">Status</span><span class="responsive-cell-value">Em andamento</span></td></tr><tr><td><span class="responsive-cell-label" aria-hidden="true">Projeto</span><span class="responsive-cell-value">Coleção da planilha de liquidação dos itens da exposição</span></td><td><span class="responsive-cell-label" aria-hidden="true">valor</span><span class="responsive-cell-value">44</span></td><td><span class="responsive-cell-label" aria-hidden="true">Status</span><span class="responsive-cell-value">Concluído</span></td></tr><tr><td><span class="responsive-cell-label" aria-hidden="true">Projeto</span><span class="responsive-cell-value">Visão geral da planilha de liquidação dos itens em exposição</span></td><td><span class="responsive-cell-label" aria-hidden="true">valor</span><span class="responsive-cell-value">57</span></td><td><span class="responsive-cell-label" aria-hidden="true">Status</span><span class="responsive-cell-value">Pendente</span></td></tr><tr><td><span class="responsive-cell-label" aria-hidden="true">Projeto</span><span class="responsive-cell-value">Plano da ficha de liquidação de itens de exposição</span></td><td><span class="responsive-cell-label" aria-hidden="true">valor</span><span class="responsive-cell-value">70</span></td><td><span class="responsive-cell-label" aria-hidden="true">Status</span><span class="responsive-cell-value">Em andamento</span></td></tr><tr><td><span class="responsive-cell-label" aria-hidden="true">Projeto</span><span class="responsive-cell-value">Inspiração para folha de liquidação de itens da exposição</span></td><td><span class="responsive-cell-label" aria-hidden="true">valor</span><span class="responsive-cell-value">83</span></td><td><span class="responsive-cell-label" aria-hidden="true">Status</span><span class="responsive-cell-value">Concluído</span></td></tr></tbody></table></div></div><!-- 11DZ_CORE_END --></section></div></div></section><aside class="evidence-rail"><label>Escala do canvas<input id="evidenceZoom" type="range" min="88" max="128" value="100"><output id="evidenceZoomValue">100%</output></label><label>Coleta atual<select id="evidenceStep"><option value="0">Progresso da fatura de liquidação do item da exposição</option><option value="1">Lembrete de acerto do item de exposição</option><option value="2">Coleção da planilha de liquidação dos itens da exposição</option><option value="3">Visão geral da planilha de liquidação dos itens em exposição</option></select></label><ul id="evidenceChecklist" class="evidence-checklist"><li>Progresso da fatura de liquidação do item da exposição</li><li>Lembrete de acerto do item de exposição</li><li>Coleção da planilha de liquidação dos itens da exposição</li><li>Visão geral da planilha de liquidação dos itens em exposição</li></ul><button id="evidenceCapture" class="action primary" type="button">Escrever evidências</button><ol id="evidenceLog" class="evidence-log"><li>Evidência ainda não registrada</li></ol></aside></div></section><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:tables-data-table-to-cards */
const cardMedia=matchMedia('(max-width:620px)');const responsiveRecordTable=document.querySelector('#responsiveRecordTable');const tableCardModeToggle=document.querySelector('#tableCardModeToggle');function announceTableMode(){const forced=responsiveRecordTable.classList.contains('force-cards');announce(forced||cardMedia.matches?'A tabela foi convertida em registros em cartão':'Usando atualmente tabela para desktop');}tableCardModeToggle.addEventListener('click',()=>{const forced=responsiveRecordTable.classList.toggle('force-cards');tableCardModeToggle.setAttribute('aria-pressed',String(forced));tableCardModeToggle.textContent=forced?'Restaurar layout automático':'Modo de visualização de cartões';announceTableMode();});cardMedia.addEventListener?.('change',announceTableMode);announceTableMode();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"tables-data-table-to-cards","selector":"[data-core-bridge=\"tables-data-table-to-cards\"]","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+' · versão principal '+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":"Vista filtrada da folha de liquidação de itens da exposição","amount":12,"priority":"normal","touches":0}],["2",{"label":"Visão comparativa da folha de liquidação dos itens da exposição","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('Tarefa atual da ordem de liquidação do item de exposição:'+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'?' · Urgente':'');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();
const evidenceShell=document.querySelector('#evidenceShell');const evidenceStatus=document.querySelector('#evidenceStatus');const evidenceZoom=document.querySelector('#evidenceZoom');const evidenceZoomValue=document.querySelector('#evidenceZoomValue');const evidenceStep=document.querySelector('#evidenceStep');const evidenceChecklistItems=[...document.querySelectorAll('#evidenceChecklist li')];const evidenceCards=[...document.querySelectorAll('[data-evidence-card]')];const evidenceLog=document.querySelector('#evidenceLog');const evidenceModeButtons=[...evidenceShell.querySelectorAll('button[data-board-mode]')];const evidenceNotes=["Progresso da fatura de liquidação do item da exposição","Lembrete de acerto do item de exposição","Coleção da planilha de liquidação dos itens da exposição","Visão geral da planilha de liquidação dos itens em exposição"];const evidenceCore=document.querySelector('#workflowCore');let evidenceCaptures=0;function evidenceSetCard(index){evidenceCards.forEach((card,cardIndex)=>{const active=cardIndex===index;card.setAttribute('aria-pressed',String(active));});evidenceChecklistItems.forEach((item,itemIndex)=>{item.classList.toggle('is-active',itemIndex===index);item.classList.toggle('is-done',itemIndex<evidenceCaptures);});}function evidenceRender(reason){const version=evidenceCore?.dataset.workflowVersion||'0';const zoom=Number(evidenceZoom.value);const active=Math.min(evidenceNotes.length-1,Number(evidenceStep.value)||0);evidenceShell.style.setProperty('--evidence-zoom',String(zoom));evidenceZoomValue.textContent=zoom+'%';evidenceSetCard(active);evidenceStatus.textContent=reason+' · versão principal '+version;}evidenceModeButtons.forEach(button=>button.addEventListener('click',()=>{evidenceModeButtons.forEach(item=>item.classList.toggle('primary',item===button));evidenceShell.dataset.boardMode=button.dataset.boardMode;evidenceRender('Alterado para'+button.textContent);announce('padrão de evidência:'+button.textContent);}));evidenceCards.forEach((card,index)=>card.addEventListener('click',()=>{evidenceStep.value=String(index);evidenceRender('Cartão de observação alternado');announce('Cartão de observação:'+evidenceNotes[index]);}));evidenceZoom.addEventListener('input',()=>{evidenceRender('A escala da tela foi atualizada');announce('observação de escala '+evidenceZoom.value+'%');});evidenceStep.addEventListener('change',()=>{const index=Number(evidenceStep.value)||0;evidenceRender('Amostragem alternada');announce('Seleção atual:'+evidenceNotes[index]);});document.querySelector('#evidenceCapture').addEventListener('click',()=>{const index=Math.min(evidenceNotes.length-1,Number(evidenceStep.value)||0);const note=evidenceNotes[index];const version=evidenceCore?.dataset.workflowVersion||'0';evidenceCaptures+=1;const item=document.createElement('li');item.textContent='Evidência '+evidenceCaptures+' · '+note+' · versão principal '+version;const empty=evidenceLog.querySelector('li')?.textContent==='Evidência ainda não registrada';if(empty)evidenceLog.replaceChildren(item);else evidenceLog.prepend(item);while(evidenceLog.children.length>6)evidenceLog.lastElementChild.remove();evidenceRender('O registro foi escrito '+evidenceCaptures);announce('O registro foi escrito '+evidenceCaptures+' · '+note);});evidenceCore?.addEventListener('focusin',()=>evidenceRender('Caso principal em foco'));evidenceCore?.addEventListener('click',()=>evidenceRender('O caso principal sofre uma interação'));evidenceRender('Aguardando amostragem');
</script>
</body>
</html>