Cenário de ondas em camadas do observatório do lago de nuvens
Conclua a cena de ondas em camadas no cenário do observatório do lago nas nuvens: inclui conteúdo real, controles interativos, feedback de estado claro e layout em várias dimensões.
É 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>Cenário de ondas em camadas do observatório do lago de nuvens</title>
<style>
:root { --ink:#24213a; --paper:#f6f1e8; --accent:#e6a23c; --secondary:#a8a1d8; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family: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-index{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px}.index-mark{display:grid;align-content:space-between;width:76px;padding:16px 10px;border:1px solid var(--line);color:var(--accent);background:color-mix(in srgb,var(--paper) 82%,transparent);text-align:center}.index-mark strong{font:900 34px/1 ui-monospace,monospace}.index-mark span{writing-mode:vertical-rl;font:800 10px/1.2 ui-monospace,monospace;letter-spacing:.18em}.composition-index .demo{grid-column:1;grid-row:1}.composition-index::before{content:"";position:absolute;left:-12px;top:38px;width:5px;height:45%;background:linear-gradient(var(--accent),var(--secondary))}@media(max-width:700px){.composition-index{grid-template-columns:1fr}.index-mark{grid-row:1;width:auto;grid-template-columns:auto 1fr}.index-mark span{writing-mode:horizontal-tb}.composition-index .demo{grid-row:2}}
.wave-lab{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,.6fr);gap:16px}.wave-stage{position:relative;min-height:450px;overflow:hidden;border:1px solid var(--line);border-radius:26px;background:linear-gradient(#071b2b,#102a43)}.wave-stage svg{position:absolute;inset:0;width:100%;height:100%}.wave-stage strong{position:absolute;left:clamp(24px,6vw,64px);top:clamp(28px,7vw,72px);z-index:3;color:#fff;font-size:clamp(32px,7vw,72px)}.wave-path{fill:none;stroke-width:34;stroke-linecap:round;animation:waveDrift 8s ease-in-out infinite alternate}.wave-back{stroke:#38bdf866;animation-duration:12s}.wave-middle{stroke:#2dd4bf99;animation-delay:-3s}.wave-front{stroke:#fb7185cc;animation-duration:6s;animation-delay:-1s}.wave-stage.is-paused .wave-path{animation-play-state:paused}@keyframes waveDrift{to{transform:translateX(-180px)}}.wave-controls{display:grid;align-content:center;gap:17px}.wave-controls label{display:grid;grid-template-columns:1fr auto;gap:8px;font-weight:800}.wave-controls input{grid-column:1/-1}@media(max-width:740px){.wave-lab{grid-template-columns:1fr}.wave-stage{min-height:330px}}.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}}.similarity-shell{--similarity-density:100;display:grid;gap:18px;padding:clamp(18px,4vw,28px);border:1px solid var(--line);border-radius:28px;background:color-mix(in srgb,var(--paper) 88%,transparent);box-shadow:var(--shadow)}.similarity-head{display:flex;justify-content:space-between;gap:18px;align-items:end}.similarity-head h2{margin:.2em 0}.similarity-head output{padding:10px 14px;border-left:4px solid var(--accent);font-weight:900}.similarity-layout{display:grid;grid-template-columns:minmax(220px,.58fr) minmax(0,1.42fr);gap:16px}.similarity-console{display:grid;align-content:start;gap:16px;padding:18px;border:1px solid var(--line);border-radius:20px;background:color-mix(in srgb,var(--secondary) 10%,var(--paper))}.similarity-modes{display:grid;gap:8px;padding:0;border:0}.similarity-console label{display:grid;gap:8px}.similarity-console input[type="range"]{width:100%}.similarity-pin{display:flex;gap:10px;align-items:center}.similarity-checklist,.similarity-log{display:grid;gap:8px;padding-left:18px;margin:0}.similarity-checklist li.is-done{color:var(--accent);font-weight:900}.similarity-stage{display:grid;gap:14px;min-width:0}.similarity-deck{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.similarity-deck article{display:grid;gap:6px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--paper);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.similarity-deck article[data-active="true"]{transform:translateY(-4px);box-shadow:0 14px 28px color-mix(in srgb,var(--accent) 16%,transparent);background:color-mix(in srgb,var(--secondary) 14%,var(--paper))}.similarity-deck span{font:800 11px/1 ui-monospace,monospace;letter-spacing:.16em}.similarity-core-shell{min-width:0;padding:clamp(14px,3vw,22px);overflow:auto;border:1px dashed var(--line);border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--secondary) 8%,transparent),transparent 80%)}.similarity-core-shell>*{display:block;width:calc(10000%/var(--similarity-density));max-width:none;transform:scale(calc(var(--similarity-density)/100));transform-origin:top center}.similarity-shell[data-review-state="compare"] .similarity-core-shell{border-style:solid;box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}.similarity-shell[data-review-state="compare"] .similarity-deck article{opacity:.72}.similarity-shell[data-review-state="compare"] .similarity-deck article[data-active="true"]{opacity:1}.similarity-shell[data-review-state="audit"] .similarity-console{color:var(--paper);background:var(--ink)}.similarity-shell[data-review-state="audit"] .similarity-console .action{color:var(--paper);border-color:var(--paper)}.similarity-shell[data-review-state="audit"] .similarity-log li{border-left:3px solid var(--secondary);padding-left:8px}.similarity-shell[data-pinned="true"] .similarity-core-shell{outline:4px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px}@media(max-width:920px){.similarity-layout{grid-template-columns:1fr}.similarity-deck{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.similarity-head{align-items:stretch;flex-direction:column}.similarity-deck{grid-template-columns:1fr}.similarity-core-shell>*{width:100%;transform:none}}
</style>
</head>
<body data-aesthetic="organic" data-composition="field-index">
<main class="page">
<header class="mast"><div><span class="eyebrow">organic / cenário de ondas em camadas / INTERMEDIATE</span><h1>Cenário de ondas em camadas do observatório do lago de nuvens</h1><p class="intro">Conclua a cena de ondas em camadas no cenário do observatório do lago nas nuvens: inclui conteúdo real, controles interativos, feedback de estado claro e layout em várias dimensões.</p></div><span class="scenario">Observatório do Lago de Nuvens</span></header>
<div class="composition-index"><section class="demo" aria-label="Área interativa do cenário de ondas em várias camadas da estação de observação do Lago das Nuvens"><div id="similarityShell" class="similarity-shell" data-review-state="focus"><header class="similarity-head"><div><span class="eyebrow">Estação de observação do lago de nuvens / REVIEW STUDIO</span><h2>Estação de revisão do cenário de ondas em camadas</h2><p>Coloque o caso principal em uma estrutura de revisão separada e registre adicionalmente o modo de observação, os pontos de verificação e a conclusão atual.</p></div><output id="similarityState">Pronto para iniciar a revisão</output></header><div class="similarity-layout"><aside class="similarity-console"><fieldset class="similarity-modes"><legend>Visão de revisão</legend><button class="action primary" type="button" data-review-view="focus">Focar na visualização principal</button><button class="action" type="button" data-review-view="compare">Lista de conferência</button><button class="action" type="button" data-review-view="audit">Registrar no local</button></fieldset><label>Densidade de observação<input id="similarityDensity" type="range" min="84" max="124" value="100"><output id="similarityDensityValue">100%</output></label><label class="similarity-pin"><input id="similarityPin" type="checkbox"> Fixar o ponto de verificação atual</label><ol id="similarityChecklist" class="similarity-checklist"><li>Plano da estação de observação do Lago das Nuvens</li><li>Inspiração da Estação de Observação do Lago das Nuvens</li><li>registro da estação de observação do lago de nuvens</li><li>Colaboração na estação de observação do lago de nuvens</li></ol><button id="similarityCapture" class="action primary" type="button">Registrar ponto de controle</button><ol id="similarityLog" class="similarity-log"><li>Aguardando o primeiro registro de verificação</li></ol></aside><section class="similarity-stage"><div id="similarityDeck" class="similarity-deck"><article data-active="true"><span>01</span><strong>Plano da estação de observação do Lago das Nuvens</strong><p>Verifique se a mudança de estado está visível</p></article><article><span>02</span><strong>Inspiração da Estação de Observação do Lago das Nuvens</strong><p>Confirmar que as entradas por teclado e por clique são consistentes</p></article><article><span>03</span><strong>registro da estação de observação do lago de nuvens</strong><p>Observe se o layout recua em telas estreitas</p></article><article><span>04</span><strong>Colaboração na estação de observação do lago de nuvens</strong><p>Registre a conclusão da revisão atual</p></article></div><div id="similarityCoreShell" class="similarity-core-shell"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Observatório do lago de nuvens DISPATCH</span><h2>Estação de monitoramento do Lago das Nuvens</h2><form id="workflowDispatchForm"><label>Tipo de tarefa<select id="workflowDispatchKind"><option>Camadas básicas da Estação de Observação do Lago das Nuvens</option><option>Camadas dinâmicas da estação de observação do lago de nuvens</option><option>Camadas de exibição do observatório do lago de nuvens</option></select></label><label>Intensidade visual<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="30"><span>%</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">Efeito do aplicativo</button></form><label>Tarefa atual<select id="workflowDispatchActive" aria-label="Alternar tarefa atual"><option value="1">Camadas básicas da Estação de Observação do Lago das Nuvens</option><option value="2">Camadas dinâmicas da estação de observação do lago de nuvens</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:creative-effects-wave-layers --><div class="wave-lab"><section class="wave-stage" aria-label="Ondas dinâmicas de três camadas da estação de observação do lago de nuvens"><svg id="waveSvg" viewBox="0 0 960 440" role="img" aria-labelledby="waveTitle waveDescription"><title id="waveTitle">Cenário de ondas em múltiplas camadas</title><desc id="waveDescription">Três camadas de ondas coloridas com velocidades e amplitudes diferentes</desc><g id="waveGroup"><path class="wave-path wave-back"></path><path class="wave-path wave-middle"></path><path class="wave-path wave-front"></path></g></svg><strong>Observatório do Lago de Nuvens</strong></section><aside class="wave-controls panel"><span class="eyebrow">WAVE LAYERS</span><h2>Cenário de ondas em múltiplas camadas</h2><label>Amplitude da onda <input id="waveAmplitude" type="range" min="18" max="95" value="58" data-core-bridge="creative-effects-wave-layers"><output id="waveAmplitudeValue">58px</output></label><label>Densidade das cristas da onda <input id="waveFrequency" type="range" min="1" max="5" value="3"><output id="waveFrequencyValue">3</output></label><button id="wavePause" class="action" type="button" aria-pressed="false">Pausar ondas</button></aside></div><!-- 11DZ_CORE_END --></section></div></div></section></div></div><p id="status" class="status" role="status" aria-live="polite"></p></section><aside class="index-mark" aria-hidden="true"><strong>05</strong><span>Estação de Observação do Lago das Nuvens FIELD INDEX</span></aside></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:creative-effects-wave-layers */
const waveStage=document.querySelector('.wave-stage');const waveAmplitude=document.querySelector('#waveAmplitude');const waveFrequency=document.querySelector('#waveFrequency');const wavePaths=[...document.querySelectorAll('.wave-path')];function wavePath(amplitude,frequency,offset){let path='M -240 300';for(let x=-240;x<=1200;x+=24){const y=300+Math.sin((x/960*frequency*Math.PI*2)+offset)*amplitude;path+=' L '+x+' '+y.toFixed(1);}return path;}function renderWaves(){const amplitude=Number(waveAmplitude.value);const frequency=Number(waveFrequency.value);wavePaths.forEach((path,index)=>path.setAttribute('d',wavePath(amplitude*(.55+index*.22),frequency-index*.35,index*1.8)));document.querySelector('#waveAmplitudeValue').textContent=amplitude+'px';document.querySelector('#waveFrequencyValue').textContent=frequency;announce('Amplitude da onda '+amplitude+' Pixels, densidade '+frequency);}[waveAmplitude,waveFrequency].forEach(input=>input.addEventListener('input',renderWaves));document.querySelector('#wavePause').addEventListener('click',event=>{const paused=waveStage.classList.toggle('is-paused');event.currentTarget.textContent=paused?'Continuar onda':'Pausar ondas';event.currentTarget.setAttribute('aria-pressed',String(paused));announce(paused?'As ondas em camadas foram pausadas':'As camadas de ondas múltiplas continuam se movendo');});renderWaves();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"creative-effects-wave-layers","selector":"[data-core-bridge=\"creative-effects-wave-layers\"]","mode":"range","key":"ArrowRight"};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("input",workflowBridgeScheduleCommit);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();const step=Number(workflowBridgeControl.step)||1;const min=workflowBridgeControl.min===''?-Infinity:Number(workflowBridgeControl.min);const max=workflowBridgeControl.max===''?Infinity:Number(workflowBridgeControl.max);let next=Math.min(max,Math.max(min,(Number(workflowBridgeControl.value)||0)+step));if(next===Number(workflowBridgeControl.value))next=Math.max(min,Number(workflowBridgeControl.value)-step);workflowBridgeControl.value=String(next);workflowBridgeControl.dispatchEvent(new Event('input',{bubbles:true}));workflowBridgeControl.dispatchEvent(new Event('change',{bubbles:true}));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":"Camadas básicas da Estação de Observação do Lago das Nuvens","amount":12,"priority":"normal","touches":0}],["2",{"label":"Camadas dinâmicas da estação de observação do lago de nuvens","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('Tarefa atual da Estação de Observação do Lago das Nuvens:'+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 similarityShell=document.querySelector('#similarityShell');const similarityState=document.querySelector('#similarityState');const similarityDensity=document.querySelector('#similarityDensity');const similarityDensityValue=document.querySelector('#similarityDensityValue');const similarityPin=document.querySelector('#similarityPin');const similarityChecklistItems=[...document.querySelectorAll('#similarityChecklist li')];const similarityDeckItems=[...document.querySelectorAll('#similarityDeck article')];const similarityLog=document.querySelector('#similarityLog');const similarityNotes=["Plano da estação de observação do Lago das Nuvens","Inspiração da Estação de Observação do Lago das Nuvens","registro da estação de observação do lago de nuvens","Colaboração na estação de observação do lago de nuvens"];const similarityCore=document.querySelector('#workflowCore');let similarityCaptures=0;function similaritySetActive(index){similarityDeckItems.forEach((item,itemIndex)=>{if(itemIndex===index)item.setAttribute('data-active','true');else item.removeAttribute('data-active');});}function similarityRender(reason){const version=similarityCore?.dataset.workflowVersion||'0';const density=Number(similarityDensity.value);similarityShell.style.setProperty('--similarity-density',String(density));similarityShell.dataset.pinned=String(similarityPin.checked);similarityDensityValue.textContent=density+'%';similarityChecklistItems.forEach((item,index)=>item.classList.toggle('is-done',index<similarityCaptures));similaritySetActive(Math.min(similarityDeckItems.length-1,similarityCaptures%similarityDeckItems.length));similarityState.textContent=reason+' · versão principal '+version+(similarityPin.checked?' · fixado':'');}document.querySelectorAll('[data-review-view]').forEach(button=>button.addEventListener('click',()=>{document.querySelectorAll('[data-review-view]').forEach(item=>item.classList.toggle('primary',item===button));similarityShell.dataset.reviewState=button.dataset.reviewView;similarityRender('Alterado para'+button.textContent);announce('Vista de revisão:'+button.textContent);}));similarityDensity.addEventListener('input',()=>{similarityRender('A densidade de observação foi atualizada');announce('Densidade de observação '+similarityDensity.value+'%');});similarityPin.addEventListener('change',()=>{similarityRender(similarityPin.checked?'O ponto de verificação atual foi fixado':'Ponto de verificação atual desbloqueado');announce(similarityPin.checked?'Checkpoint atual fixado':'Checkpoint fixado cancelado');});document.querySelector('#similarityCapture').addEventListener('click',()=>{const note=similarityNotes[similarityCaptures%similarityNotes.length];const version=similarityCore?.dataset.workflowVersion||'0';similarityCaptures+=1;const item=document.createElement('li');item.textContent='ponto de verificação '+similarityCaptures+' · '+note+' · versão principal '+version;const empty=similarityLog.querySelector('li')?.textContent==='Aguardando o primeiro registro de verificação';if(empty)similarityLog.replaceChildren(item);else similarityLog.prepend(item);while(similarityLog.children.length>6)similarityLog.lastElementChild.remove();similarityRender('Checkpoint registrado '+similarityCaptures);announce('Checkpoint registrado '+similarityCaptures+' · '+note);});similarityCore?.addEventListener('focusin',()=>similarityRender('A visualização principal recebeu foco'));similarityCore?.addEventListener('click',()=>similarityRender('A visualização principal sofreu interação'));similarityRender('Pronto para iniciar a revisão');
</script>
</body>
</html>