Navegação rápida inferior da sala de serviços de arquivos
Conclua a navegação rápida inferior em um cenário de sala de serviços de arquivos: inclui conteúdo real, controles utilizá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>Navegação rápida inferior da sala de serviços de arquivos</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:16px;border:3px double var(--accent);background:var(--paper)}.stack{display:grid;gap:14px}.row{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:10px;overflow:auto}.action{padding:10px 15px;border:1px solid var(--accent);background:transparent;font-family:Didot,serif;letter-spacing:.06em}.action.primary,.action.is-active{color:var(--paper);background:var(--ink)}.metric{font-family:Didot,serif;font-size:clamp(36px,8vw,74px);letter-spacing:.04em}.status{min-height:24px;padding:9px;border-inline:1px solid var(--accent);text-align:center}.muted{line-height:1.8}.chip{padding:5px 14px;border-inline:1px solid var(--accent);letter-spacing:.1em}.meter{height:5px;background:var(--line)}.meter>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--secondary))}
.composition-deck{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:color-mix(in srgb,var(--ink) 4%,var(--paper))}.deck-bar{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:12px 18px;color:var(--paper);background:var(--ink);font:700 12px/1 ui-monospace,monospace}.deck-lights{display:flex;gap:7px}.deck-lights i{width:10px;height:10px;border-radius:50%;background:var(--accent)}.deck-lights i:nth-child(2){background:var(--secondary)}.deck-lights i:nth-child(3){background:color-mix(in srgb,var(--paper) 55%,transparent)}.composition-deck .demo{border:0;border-radius:0;box-shadow:none}
.dock-studio{display:grid;grid-template-rows:auto 1fr auto;max-width:620px;min-height:460px;margin:auto;overflow:hidden;border:6px solid var(--ink);border-radius:40px;background:var(--paper)}.dock-studio>header{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);font-weight:900}.dock-studio>header output{padding:7px 12px;border-radius:999px;color:var(--paper);background:var(--accent)}#dockContent{display:grid;align-content:center;gap:14px;padding:clamp(28px,7vw,68px)}#dockContent h2{font-size:clamp(34px,8vw,68px)}#dockTasks{display:grid;gap:8px;padding:0;margin:0;list-style:none}#dockTasks li{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--secondary) 14%,transparent)}.bottom-dock{display:grid;grid-template-columns:repeat(5,1fr);padding:8px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(12px)}.bottom-dock button{display:grid;gap:4px;justify-items:center;padding:9px 3px;border:0;border-radius:16px;background:transparent;font-size:10px}.bottom-dock button i{font-size:20px;font-style:normal}.bottom-dock button small{opacity:.58}.bottom-dock button[aria-current="page"]{color:var(--paper);background:var(--accent)}.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="art-deco" data-composition="control-deck">
<main class="page">
<header class="mast"><div><span class="eyebrow">art-deco / navegação rápida inferior / INTERMEDIATE</span><h1>Navegação rápida inferior da sala de serviços de arquivos</h1><p class="intro">Conclua a navegação rápida inferior em um cenário de sala de serviços de arquivos: inclui conteúdo real, controles utilizáveis, feedback de estado claro e layout responsivo.</p></div><span class="scenario">Sala de serviços de arquivos</span></header>
<div class="composition-deck"><div class="deck-bar"><span>CONTROL DECK · 04</span><span>Navegação rápida no rodapé</span><span class="deck-lights" aria-hidden="true"><i></i><i></i><i></i></span></div><section class="demo" aria-label="Área interativa de navegação rápida na parte inferior do salão de serviços de arquivos"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Sala de Serviços de Arquivo DISPATCH</span><h2>Painel de despacho do salão de serviços de arquivos</h2><form id="workflowDispatchForm"><label>Tipo de tarefa<select id="workflowDispatchKind"><option>Navegação de entrada do salão de serviços de arquivo</option><option>Navegação de caminho do salão de serviços de arquivo</option><option>Navegação concluída da central de serviços de arquivos</option></select></label><label>Tempo de permanência<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="36"><span>minutos</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">Entrar no caminho</button></form><label>Tarefa atual<select id="workflowDispatchActive" aria-label="Alternar tarefa atual"><option value="1">Navegação de entrada do salão de serviços de arquivo</option><option value="2">Navegação de caminho do salão de serviços de arquivo</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:navigation-menus-bottom-dock --><div class="dock-studio"><header><span>Sala de serviços de arquivos</span><output id="dockBadge">2 itens pendentes</output></header><section id="dockContent" tabindex="-1"><span class="eyebrow">BOTTOM DOCK</span><h2>Progresso do salão de serviços de arquivo</h2><p id="dockDescription">A entrada na parte inferior permanece na área alcançável pelo polegar e sincroniza a cópia explicativa da entrada atual.</p><ul id="dockTasks"><li>Progresso do Salão de Serviços de Arquivo · Entrada atual</li><li>Lembrete do salão de serviços de arquivos · manter visível</li><li>Coleção do salão de serviços de arquivo · manter visível</li></ul></section><nav class="bottom-dock" aria-label="Navegação rápida no rodapé"><button type="button" data-dock="0" aria-current="page" data-core-bridge="navigation-menus-bottom-dock"><i aria-hidden="true">⌂</i><span>Progresso do salão de serviços de arquivo</span><small>1</small></button><button type="button" data-dock="1"><i aria-hidden="true">◎</i><span>Lembrete da sala de serviços de arquivos</span><small>2</small></button><button type="button" data-dock="2"><i aria-hidden="true">＋</i><span>Coleção do salão de serviços de arquivos</span><small>3</small></button><button type="button" data-dock="3"><i aria-hidden="true">♡</i><span>Visão geral do salão de serviços de arquivos</span><small>4</small></button><button type="button" data-dock="4"><i aria-hidden="true">☻</i><span>Plano do Centro de Serviços de Arquivo</span><small>5</small></button></nav></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:navigation-menus-bottom-dock */
const dockLabels=["Progresso do salão de serviços de arquivo","Lembrete da sala de serviços de arquivos","Coleção do salão de serviços de arquivos","Visão geral do salão de serviços de arquivos","Plano do Centro de Serviços de Arquivo"];const dockButtons=[...document.querySelectorAll('[data-dock]')];const dockDescription=document.querySelector('#dockDescription');const dockTasks=document.querySelector('#dockTasks');const dockBadge=document.querySelector('#dockBadge');dockButtons.forEach((button,index)=>button.addEventListener('click',()=>{dockButtons.forEach(item=>item.removeAttribute('aria-current'));button.setAttribute('aria-current','page');document.querySelector('#dockContent h2').textContent=dockLabels[index];dockDescription.textContent=dockLabels[index]+' Trocado para a entrada atual; a barra inferior permanece fixa no ponto de acesso.';dockTasks.replaceChildren(...dockLabels.slice(Math.max(0,index-1),Math.min(dockLabels.length,index+2)).map((label,taskIndex)=>{const item=document.createElement('li');item.textContent=label+' · '+(taskIndex===1?'Entrada atual':'Entrada adjacente');return item;}));dockBadge.textContent=(index+1)+' itens a processar';document.querySelector('#dockContent').focus();announce('Aberto '+dockLabels[index]);}));
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"navigation-menus-bottom-dock","selector":"[data-core-bridge=\"navigation-menus-bottom-dock\"]","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":"Navegação de entrada do salão de serviços de arquivo","amount":12,"priority":"normal","touches":0}],["2",{"label":"Navegação de caminho do salão de serviços de arquivo","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+' minuto · '+bridge.summary;announce('Tarefa atual da sala de serviços de arquivo:'+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+' minuto · '+workflowBridgeSummary();});workflowDispatchRender('1',false);
workflowBridgeReset();
</script>
</body>
</html>