Grupo de etiquetas de filtro de la pantalla de demostración del espectáculo
Completa un grupo de etiquetas de filtro en el escenario de la pantalla de demostración de una actuación: incluye contenido real, controles interactivos, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.
Tras activar JavaScript, puedes editar, ejecutar y guardar este ejemplo. El código fuente fijado es el siguiente:
<!doctype html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grupo de etiquetas de filtro de la pantalla de demostración del espectáculo</title>
<style>
:root { --ink:#18314f; --paper:#f7f8f2; --accent:#ff6b5e; --secondary:#71c9b5; --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:Optima,"Songti SC",serif; background:radial-gradient(ellipse at top left,color-mix(in srgb,var(--secondary) 32%,transparent),transparent 42%),radial-gradient(ellipse at bottom right,color-mix(in srgb,var(--accent) 18%,transparent),transparent 45%),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(1100px,calc(100% - 34px));margin:auto;padding:68px 0}.mast{display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px;margin:0 4vw 36px}.mast h1{font-family:Optima,"Songti SC",serif;font-weight:700;font-size:clamp(40px,8vw,86px);letter-spacing:-.025em;margin:0;line-height:1.02}.eyebrow{display:block;margin-bottom:12px;color:var(--accent);font-size:12px;letter-spacing:.2em}.intro{max-width:60ch;line-height:1.9}.scenario{display:grid;width:108px;height:108px;place-items:center;padding:12px;border:1px solid var(--line);border-radius:50%;text-align:center}.demo{border-radius:72px 18px 72px 18px;box-shadow:0 28px 80px color-mix(in srgb,var(--ink) 14%,transparent);position:relative;min-height:430px;overflow:hidden;padding:clamp(28px,5vw,58px);background:color-mix(in srgb,var(--paper) 84%,transparent)}@media(max-width:700px){.page{width:calc(100% - 18px);padding:24px 0}.mast{grid-template-columns:1fr;margin-inline:12px}.scenario{width:auto;height:auto;border-radius:999px}.demo{padding:18px}}
.panel{padding:20px;border:1px dashed var(--secondary);border-radius:8px;background:color-mix(in srgb,var(--paper) 92%,#000)}.stack{display:grid;gap:10px}.row{display:flex;flex-wrap:wrap;gap:7px}.action{min-height:40px;padding:8px 12px;border:1px solid var(--secondary);border-radius:5px;color:var(--ink);background:transparent;font:700 12px/1 ui-monospace,monospace}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.status{min-height:22px;color:var(--secondary);font:700 12px/1.5 ui-monospace,monospace}.status::before{content:"status: "}.metric{font:800 clamp(28px,6vw,56px)/1 ui-monospace,monospace}.muted{opacity:.64;font-family:ui-monospace,monospace}.meter{height:8px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 10px)}.meter>i{display:block;height:100%;background:var(--secondary)}.chip{padding:4px 7px;border:1px solid var(--secondary);font:700 10px/1 ui-monospace,monospace}
.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}
.filter-chip-demo{display:grid;gap:20px}.filter-chip-demo header{display:flex;justify-content:space-between;gap:20px;align-items:end}.filter-chip-demo h2{margin:.2em 0}.filter-chip-demo header output{padding:9px 13px;border-radius:999px;color:var(--paper);background:var(--accent);font-weight:900}.filter-chip-demo fieldset{margin:0;padding:20px;border:1px dashed var(--line)}.filter-chip-demo legend{padding-inline:8px;font-weight:800}.chip-cloud{display:flex;flex-wrap:wrap;gap:10px}.chip-cloud label{position:relative}.chip-cloud input{position:absolute;opacity:0}.chip-cloud span{display:flex;gap:9px;align-items:center;padding:11px 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}.chip-cloud i{display:none;font-style:normal}.chip-cloud input:checked+span{color:var(--paper);border-color:var(--ink);background:var(--ink)}.chip-cloud input:checked+span i{display:inline}.chip-cloud input:focus-visible+span{outline:3px solid var(--accent);outline-offset:3px}.chip-summary{display:flex;justify-content:space-between;gap:16px;align-items:center;padding-top:16px;border-top:1px solid var(--line)}.chip-summary p{margin:0;font-weight:800}@media(max-width:560px){.filter-chip-demo header,.chip-summary{align-items:flex-start;flex-direction:column}}.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}}.atlas-shell{--atlas-zoom:100;display:grid;gap:18px;padding:clamp(18px,4vw,30px);border:1px solid var(--line);border-radius:34px;background:linear-gradient(165deg,color-mix(in srgb,var(--secondary) 10%,transparent),color-mix(in srgb,var(--paper) 96%,transparent));box-shadow:var(--shadow)}.atlas-head{display:flex;justify-content:space-between;gap:20px;align-items:end}.atlas-head h2{margin:.18em 0}.atlas-controls{display:grid;gap:10px;justify-items:end}.atlas-modes{display:flex;flex-wrap:wrap;gap:8px;justify-content:end}.atlas-controls output{padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-weight:900}.atlas-body{display:grid;grid-template-columns:minmax(240px,.56fr) minmax(0,1.44fr);gap:16px}.atlas-index{display:grid;align-content:start;gap:14px;padding:18px;border-radius:26px;color:var(--paper);background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 88%,#071310),color-mix(in srgb,var(--ink) 72%,#21110f))}.atlas-index label{display:grid;gap:8px}.atlas-index input,.atlas-index select{width:100%;padding:10px;border:1px solid #ffffff2e;border-radius:10px;color:inherit;background:#ffffff12}.atlas-chapters{display:grid;gap:10px;margin:0;padding:0;list-style:none}.atlas-chapters button{display:grid;gap:6px;width:100%;padding:14px;border:1px solid #ffffff24;border-radius:18px;color:inherit;background:#ffffff0e;text-align:left}.atlas-chapters button[aria-pressed="true"]{border-color:var(--secondary);background:#ffffff18;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--secondary) 28%,transparent)}.atlas-chapters span{font:800 11px/1 ui-monospace,monospace;letter-spacing:.16em}.atlas-chapters small{line-height:1.5;opacity:.76}.atlas-meta{display:grid;gap:10px;margin:0}.atlas-meta div{display:grid;gap:4px;padding:12px;border:1px solid #ffffff1f;border-radius:14px;background:#ffffff10}.atlas-meta dt{font:700 11px/1 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.72}.atlas-meta dd{margin:0;font-weight:900}.atlas-stage{display:grid;gap:14px;min-width:0}.atlas-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.atlas-summary article{display:grid;gap:6px;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}.atlas-summary article[data-active="true"]{background:color-mix(in srgb,var(--secondary) 14%,var(--paper));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}.atlas-summary span{font:800 11px/1 ui-monospace,monospace;letter-spacing:.16em}.atlas-core-shell{min-width:0;padding:clamp(14px,3vw,22px);overflow:auto;border:1px solid var(--line);border-radius:26px;background:radial-gradient(circle at top right,color-mix(in srgb,var(--accent) 8%,transparent),transparent 35%),color-mix(in srgb,var(--paper) 94%,transparent)}.atlas-core-shell>*{display:block;width:calc(10000%/var(--atlas-zoom));max-width:none;transform:scale(calc(var(--atlas-zoom)/100));transform-origin:top left}.atlas-log{display:grid;gap:8px;margin:0;padding-left:18px}.atlas-log li{line-height:1.55}.atlas-shell[data-atlas-mode="trace"] .atlas-core-shell{outline:4px solid color-mix(in srgb,var(--accent) 24%,transparent);outline-offset:3px}.atlas-shell[data-atlas-mode="handoff"] .atlas-index{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 82%,#28120f),color-mix(in srgb,var(--ink) 68%,#11201d))}@media(max-width:960px){.atlas-body{grid-template-columns:1fr}.atlas-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.atlas-head{align-items:stretch;flex-direction:column}.atlas-controls{justify-items:start}.atlas-modes{justify-content:start}.atlas-summary{grid-template-columns:1fr}.atlas-core-shell>*{width:100%;transform:none}}
</style>
</head>
<body data-aesthetic="organic" data-composition="control-deck">
<main class="page">
<header class="mast"><div><span class="eyebrow">organic / grupo de etiquetas de filtro / INTERMEDIATE</span><h1>Grupo de etiquetas de filtro de la pantalla de demostración del espectáculo</h1><p class="intro">Completa un grupo de etiquetas de filtro en el escenario de la pantalla de demostración de una actuación: incluye contenido real, controles interactivos, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.</p></div><span class="scenario">Pantalla de demostración del espectáculo</span></header>
<div class="composition-deck"><div class="deck-bar"><span>CONTROL DECK · 04</span><span>Grupo de etiquetas de filtrado</span><span class="deck-lights" aria-hidden="true"><i></i><i></i><i></i></span></div><section class="demo" aria-label="Área interactiva del grupo de etiquetas de filtro de la pantalla de demostración de actuaciones"><section id="atlasShell" class="atlas-shell" data-atlas-mode="brief"><header class="atlas-head"><div><span class="eyebrow">Pantalla de demostración del espectáculo / ATLAS DOSSIER</span><h2>Mapa de muestra de grupos de filtros</h2><p>Reencuadra la caso principal con una página de muestra estilo atlas, separando el índice de muestras, la vista de seguimiento, las anotaciones de traspaso y los registros in situ.</p></div><div class="atlas-controls"><div class="atlas-modes"><button class="action primary" type="button" data-atlas-mode="brief">Resumen</button><button class="action" type="button" data-atlas-mode="trace">Seguimiento</button><button class="action" type="button" data-atlas-mode="handoff">Entrega</button></div><output id="atlasState">Esperando para crear muestra</output></div></header><div class="atlas-body"><aside class="atlas-index"><ol class="atlas-chapters"><li><button type="button" data-atlas-card="0" aria-pressed="true"><span>01</span><strong>Recopilación de la pantalla de demostración de la actuación</strong><small>Comprueba si los cambios de estado son visibles</small></button></li><li><button type="button" data-atlas-card="1" aria-pressed="false"><span>02</span><strong>Resumen de la pantalla de demostración de la actuación</strong><small>Confirma que el teclado y el clic ofrecen la misma entrada</small></button></li><li><button type="button" data-atlas-card="2" aria-pressed="false"><span>03</span><strong>Plan de la pantalla de demostración de la actuación</strong><small>Observa si el diseño retrocede en pantallas estrechas</small></button></li><li><button type="button" data-atlas-card="3" aria-pressed="false"><span>04</span><strong>inspiración para pantalla de demostración de espectáculos</strong><small>Registrar la conclusión de la revisión actual</small></button></li></ol><label>Escala de diseño<input id="atlasZoom" type="range" min="82" max="132" value="100"><output id="atlasZoomValue">100%</output></label><label>Foco de muestra<select id="atlasFocus"><option value="0">Recopilación de la pantalla de demostración de la actuación</option><option value="1">Resumen de la pantalla de demostración de la actuación</option><option value="2">Plan de la pantalla de demostración de la actuación</option><option value="3">inspiración para pantalla de demostración de espectáculos</option></select></label><button id="atlasCapture" class="action primary" type="button">Muestras incluidas</button><dl class="atlas-meta"><div><dt>Número de elementos</dt><dd id="atlasCount">0</dd></div><div><dt>Foco actual</dt><dd id="atlasCurrent">Recopilación de la pantalla de demostración de la actuación</dd></div><div><dt>Modo de revisión</dt><dd id="atlasModeLabel">Resumen</dd></div></dl></aside><section class="atlas-stage"><div class="atlas-summary"><article data-active="true"><span>Sample</span><strong>Recopilación de la pantalla de demostración de la actuación</strong><p>Comprueba si los cambios de estado son visibles</p></article><article><span>Trace</span><strong>Resumen de la pantalla de demostración de la actuación</strong><p>Confirma que el teclado y el clic ofrecen la misma entrada</p></article><article><span>Signal</span><strong>Plan de la pantalla de demostración de la actuación</strong><p>Observa si el diseño retrocede en pantallas estrechas</p></article><article><span>Handoff</span><strong>inspiración para pantalla de demostración de espectáculos</strong><p>Registrar la conclusión de la revisión actual</p></article></div><div id="atlasCoreShell" class="atlas-core-shell"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Pantalla de demostración de la actuación DISPATCH</span><h2>Puesto de control de la pantalla de demostración de la actuación</h2><form id="workflowDispatchForm"><label>Tipo de tarea<select id="workflowDispatchKind"><option>Modo manual de la pantalla de demostración de actuación</option><option>Modo inteligente de pantalla de demostración de actuación</option><option>Modo de enlace del panel de demostración de la actuación</option></select></label><label>carga del dispositivo<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="30"><span>%</span></label><fieldset><legend>Prioridad de procesamiento</legend><label><input type="radio" name="workflowPriority" value="normal" checked>Normal</label><label><input type="radio" name="workflowPriority" value="urgent">Urgente</label></fieldset><button class="action primary" type="submit">Escenarios de uso</button></form><label>Tarea actual<select id="workflowDispatchActive" aria-label="Cambiar tarea actual"><option value="1">Modo manual de la pantalla de demostración de actuación</option><option value="2">Modo inteligente de pantalla de demostración de actuación</option></select></label><output id="workflowDispatchSummary">A la espera de la programación</output></aside><section id="workflowCore" class="workflow-core dispatch-workbench" data-dispatch-priority="normal"><!-- 11DZ_CORE_START:controls-selectors-filter-chips --><section class="filter-chip-demo"><header><div><span class="eyebrow">FILTER CHIPS</span><h2>Combinación de filtros para la pantalla de demostración de la actuación</h2></div><output id="chipCount">2 elementos seleccionados</output></header><fieldset><legend>Selecciona uno o más filtros</legend><div class="chip-cloud"><label><input type="checkbox" value="Recopilación de la pantalla de demostración de la actuación" checked data-core-bridge="controls-selectors-filter-chips"><span>Recopilación de la pantalla de demostración de la actuación<i aria-hidden="true">✓</i></span></label><label><input type="checkbox" value="Resumen de la pantalla de demostración de la actuación" checked><span>Resumen de la pantalla de demostración de la actuación<i aria-hidden="true">✓</i></span></label><label><input type="checkbox" value="Plan de la pantalla de demostración de la actuación"><span>Plan de la pantalla de demostración de la actuación<i aria-hidden="true">✓</i></span></label><label><input type="checkbox" value="inspiración para pantalla de demostración de espectáculos"><span>inspiración para pantalla de demostración de espectáculos<i aria-hidden="true">✓</i></span></label><label><input type="checkbox" value="Registro de demostración de presentaciones"><span>Registro de demostración de presentaciones<i aria-hidden="true">✓</i></span></label><label><input type="checkbox" value="Colaboración en pantalla de demostración de espectáculo"><span>Colaboración en pantalla de demostración de espectáculo<i aria-hidden="true">✓</i></span></label><label><input type="checkbox" value="Progreso del escenario de demostración en vivo"><span>Progreso del escenario de demostración en vivo<i aria-hidden="true">✓</i></span></label></div></fieldset><div class="chip-summary"><p id="chipSummary">Colección de pantalla de demostración de la presentación, resumen de la pantalla de demostración de la presentación</p><button id="chipClear" class="action" type="button">Borrar filtros</button></div></section><!-- 11DZ_CORE_END --></section></div></div><ol id="atlasLog" class="atlas-log"><li>Esperando la primera muestra del gráfico</li></ol></section></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:controls-selectors-filter-chips */
const chipInputs=[...document.querySelectorAll('.chip-cloud input')];const chipSummary=document.querySelector('#chipSummary');const chipCount=document.querySelector('#chipCount');function renderChips(){const active=chipInputs.filter(input=>input.checked).map(input=>input.value);chipCount.textContent='seleccionado '+active.length+' Elemento';chipSummary.textContent=active.join('、')||'Actualmente se muestra todo el contenido';announce(active.length?'Aplicado '+active.length+' condiciones de filtrado':'Filtro borrado');}chipInputs.forEach(input=>input.addEventListener('change',renderChips));document.querySelector('#chipClear').addEventListener('click',()=>{chipInputs.forEach(input=>{input.checked=false;});renderChips();});
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"controls-selectors-filter-chips","selector":"[data-core-bridge=\"controls-selectors-filter-chips\"]","mode":"toggle","key":" "};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+' · versión 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.setAttribute('aria-keyshortcuts',workflowBridgeSpec.key===' '?'Space':workflowBridgeSpec.key);const workflowBridgeToggleKeyMatches=event=>event.key===workflowBridgeSpec.key||event.key==='Spacebar'||event.code==='Space';workflowBridgeControl.addEventListener('keydown',event=>{if(!workflowBridgeToggleKeyMatches(event))return;event.preventDefault();});workflowBridgeControl.addEventListener('keyup',event=>{if(!workflowBridgeToggleKeyMatches(event))return;event.preventDefault();workflowBridgeControl.click();});workflowBridgeControl.addEventListener("change",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":"Modo manual de la pantalla de demostración de actuación","amount":12,"priority":"normal","touches":0}],["2",{"label":"Modo inteligente de pantalla de demostración de actuación","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+' % · '+bridge.summary;announce('Tarea actual de la pantalla de demostración del espectáculo:'+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+' % · '+workflowBridgeSummary();});workflowDispatchRender('1',false);
workflowBridgeReset();
const atlasShell=document.querySelector('#atlasShell');const atlasState=document.querySelector('#atlasState');const atlasZoom=document.querySelector('#atlasZoom');const atlasZoomValue=document.querySelector('#atlasZoomValue');const atlasFocus=document.querySelector('#atlasFocus');const atlasCurrent=document.querySelector('#atlasCurrent');const atlasCount=document.querySelector('#atlasCount');const atlasModeLabel=document.querySelector('#atlasModeLabel');const atlasCards=[...document.querySelectorAll('[data-atlas-card]')];const atlasSummary=[...document.querySelectorAll('.atlas-summary article')];const atlasLog=document.querySelector('#atlasLog');const atlasModeButtons=[...atlasShell.querySelectorAll('[data-atlas-mode]')];const atlasNotes=["Recopilación de la pantalla de demostración de la actuación","Resumen de la pantalla de demostración de la actuación","Plan de la pantalla de demostración de la actuación","inspiración para pantalla de demostración de espectáculos"];const atlasCore=document.querySelector('#workflowCore');let atlasCaptures=0;function atlasSetActive(index){atlasCards.forEach((button,buttonIndex)=>button.setAttribute('aria-pressed',String(buttonIndex===index)));atlasSummary.forEach((card,cardIndex)=>{if(cardIndex===index)card.setAttribute('data-active','true');else card.removeAttribute('data-active');});atlasCurrent.textContent=atlasNotes[index]||atlasNotes[0]||'Sin nombre, foco';}function atlasRender(reason){const version=atlasCore?.dataset.workflowVersion||'0';const zoom=Number(atlasZoom.value);const active=Math.min(atlasNotes.length-1,Number(atlasFocus.value)||0);atlasShell.style.setProperty('--atlas-zoom',String(zoom));atlasZoomValue.textContent=zoom+'%';atlasCount.textContent=String(atlasCaptures);atlasSetActive(active);atlasModeLabel.textContent={brief:'Resumen',trace:'Seguimiento',handoff:'Entrega'}[atlasShell.dataset.atlasMode]||'Resumen';atlasState.textContent=reason+' · versión principal '+version;}atlasModeButtons.forEach(button=>button.addEventListener('click',()=>{atlasModeButtons.forEach(item=>item.classList.toggle('primary',item===button));atlasShell.dataset.atlasMode=button.dataset.atlasMode;atlasRender('Se ha cambiado a'+button.textContent);announce('Modo gráfico de red:'+button.textContent);}));atlasCards.forEach((button,index)=>button.addEventListener('click',()=>{atlasFocus.value=String(index);atlasRender('Foco de muestra cambiado');announce('Foco del atlas:'+atlasNotes[index]);}));atlasZoom.addEventListener('input',()=>{atlasRender('Se ha actualizado la escala del diseño');announce('Escala del gráfico '+atlasZoom.value+'%');});atlasFocus.addEventListener('change',()=>{atlasRender('Foco de muestreo cambiado');announce('Punto focal de muestreo:'+atlasNotes[Number(atlasFocus.value)||0]);});document.querySelector('#atlasCapture').addEventListener('click',()=>{const index=Math.min(atlasNotes.length-1,Number(atlasFocus.value)||0);const note=atlasNotes[index]||atlasNotes[0]||'Sin nombre, foco';const version=atlasCore?.dataset.workflowVersion||'0';atlasCaptures+=1;const item=document.createElement('li');item.textContent='Muestra '+atlasCaptures+' · '+note+' · versión principal '+version;const empty=atlasLog.querySelector('li')?.textContent==='Esperando la primera muestra del gráfico';if(empty)atlasLog.replaceChildren(item);else atlasLog.prepend(item);while(atlasLog.children.length>6)atlasLog.lastElementChild.remove();atlasRender('muestra incluida '+atlasCaptures);announce('muestra incluida '+atlasCaptures+' · '+note);});atlasCore?.addEventListener('focusin',()=>atlasRender('Caso principal tiene el foco'));atlasCore?.addEventListener('click',()=>atlasRender('Se produce una interacción en el caso principal'));atlasRender('Esperando para crear muestra');
</script>
</body>
</html>