Página de cuenta atrás para el lanzamiento de la semana de lanzamiento del pódcast
Crea una página de cuenta regresiva para el lanzamiento en el contexto de la semana de publicación de un pódcast: incluye contenido real, controles accionables, retroalimentación clara del estado 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>Página de cuenta atrás para el lanzamiento de la semana de lanzamiento del pódcast</title>
<style>
:root { --ink:#ecf7f3; --paper:#071310; --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:ui-monospace,"SFMono-Regular",Consolas,monospace; background:linear-gradient(color-mix(in srgb,var(--secondary) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--secondary) 5%,transparent) 1px,transparent 1px),var(--paper);background-size:24px 24px; }
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(1080px,calc(100% - 30px));margin:auto;padding:48px 0}.eyebrow{color:var(--secondary);font:700 12px/1.3 ui-monospace,monospace}.eyebrow::before{content:"> ";color:var(--accent)}.mast{display:grid;grid-template-columns:1fr auto;border:1px solid var(--secondary);padding:18px;gap:24px;align-items:center;margin-bottom:16px}.mast h1{font-family:ui-monospace,"SFMono-Regular",monospace;font-weight:700;font-size:clamp(34px,7vw,72px);letter-spacing:-.055em;margin:12px 0;line-height:1.05}.intro{margin:0;color:color-mix(in srgb,var(--ink) 72%,transparent);font:400 14px/1.7 ui-monospace,monospace}.scenario{padding:7px 10px;border:1px dashed var(--secondary);font:700 11px/1 ui-monospace,monospace}.demo{border-color:var(--secondary);border-radius:8px;box-shadow:0 0 50px color-mix(in srgb,var(--secondary) 15%,transparent);position:relative;min-height:390px;padding:26px;background:color-mix(in srgb,var(--paper) 94%,#000)}@media(max-width:700px){.page{width:calc(100% - 18px);padding:20px 0}.mast{grid-template-columns:1fr}.demo{padding:14px}}
.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-gallery{margin:0;padding:clamp(8px,2vw,18px);border:1px solid var(--ink);background:color-mix(in srgb,var(--paper) 78%,transparent)}.gallery-caption{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:15px 4px 2px;font-size:12px}.gallery-caption::before,.gallery-caption::after{content:"";height:1px;background:var(--line)}.gallery-caption strong{font:800 11px/1.2 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase}.composition-gallery .demo{box-shadow:none}.composition-gallery .demo::before{content:"";position:absolute;inset:10px;border:1px dashed color-mix(in srgb,var(--accent) 36%,transparent);pointer-events:none}
.countdown-launch{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(360px,1.2fr);min-height:360px;overflow:hidden;border:1px solid var(--line);border-radius:30px;background:var(--ink);color:var(--paper)}.countdown-launch>section{display:grid;align-content:center;gap:16px;padding:clamp(28px,6vw,66px)}.countdown-launch h2{margin:0;font-size:clamp(34px,6vw,70px);line-height:.96}.countdown-launch p{max-width:42ch;line-height:1.7}.countdown-units{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:color-mix(in srgb,var(--paper) 16%,transparent)}.countdown-units span{display:grid;place-content:center;text-align:center;background:color-mix(in srgb,var(--ink) 92%,var(--accent))}.countdown-units strong{font:900 clamp(44px,9vw,94px)/1 ui-monospace,monospace}.countdown-units small{margin-top:8px;letter-spacing:.3em}.countdown-launch .action{justify-self:start;color:var(--paper);border-color:var(--paper)}@media(max-width:760px){.countdown-launch{grid-template-columns:1fr}.countdown-units{min-height:260px}}.workflow-session{display:grid;gap:14px}.session-command{display:grid;grid-template-columns:1fr auto minmax(170px,.45fr) auto;gap:16px;align-items:end;padding:18px;border-block:4px double var(--ink)}.session-command h2{margin:.2em 0}.session-command output{font:900 clamp(28px,5vw,54px)/1 ui-monospace,monospace}.session-command label{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:12px}.session-command input{grid-column:1/-1;width:100%}#workflowSessionProgress{height:12px;overflow:hidden;border-radius:2px;background:var(--line)}#workflowSessionProgress i{display:block;width:0;height:100%;background:var(--accent)}.session-stage{min-width:0;transition:filter .25s,transform .25s}.session-stage[data-session-phase="running"]{transform:translateY(-3px)}.session-stage[data-session-phase="paused"]{filter:grayscale(.65)}.session-stage[data-session-phase="complete"]{filter:contrast(.78);opacity:.72}.session-log{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}.session-log ol{display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0;list-style:none}.session-log li{padding:5px 8px;border:1px solid var(--line);font-size:12px}@media(max-width:900px){.session-stage{order:-1}.session-command{grid-template-columns:1fr auto}.session-command label{grid-column:1/-1}.session-log{grid-template-columns:1fr}}.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="terminal" data-composition="gallery-frame">
<main class="page">
<header class="mast"><div><span class="eyebrow">terminal / página de cuenta atrás de lanzamiento / INTERMEDIATE</span><h1>Página de cuenta atrás para el lanzamiento de la semana de lanzamiento del pódcast</h1><p class="intro">Crea una página de cuenta regresiva para el lanzamiento en el contexto de la semana de publicación de un pódcast: incluye contenido real, controles accionables, retroalimentación clara del estado y un diseño adaptable a distintos tamaños.</p></div><span class="scenario">Semana de lanzamiento del podcast</span></header>
<figure class="composition-gallery"><section class="demo" aria-label="Área interactiva de la página de cuenta regresiva para el lanzamiento de la semana de estreno del pódcast"><section id="evidenceShell" class="evidence-shell" data-board-mode="scan"><header class="evidence-head"><div><span class="eyebrow">Semana de lanzamiento del pódcast / EVIDENCE BOARD</span><h2>Panel de observación de la página de cuenta atrás de lanzamiento</h2><p>Coloca el caso principal en un panel de evidencias, con una tarjeta de observación independiente, registros y cambios de modo para registrar el resultado actual.</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">Verificación</button><button class="action" type="button" data-board-mode="handoff">Entrega</button></div><output id="evidenceStatus">Esperando la muestra</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>Progreso de la semana de lanzamiento del pódcast</strong><small>Comprueba si los cambios de estado son visibles</small></button><button type="button" data-evidence-card="1" aria-pressed="false"><span>02</span><strong>Recordatorio de la semana de lanzamiento del pódcast</strong><small>Confirma que el teclado y el clic ofrecen la misma entrada</small></button><button type="button" data-evidence-card="2" aria-pressed="false"><span>03</span><strong>Colección de la semana de lanzamiento del pódcast</strong><small>Observa si el diseño retrocede en pantallas estrechas</small></button><button type="button" data-evidence-card="3" aria-pressed="false"><span>04</span><strong>Resumen de la semana de lanzamiento del pódcast</strong><small>Registrar la conclusión de la revisión actual</small></button></div><div id="evidenceCoreShell" class="evidence-core-shell"><div class="workflow-session"><header class="session-command"><div><span class="eyebrow">Semana de lanzamiento del pódcast SESSION</span><h2>Mesa de cuenta regresiva de lanzamiento del pódcast</h2></div><output id="workflowSessionClock">00:45</output><label>Duración de la ronda<input id="workflowSessionLength" type="range" min="15" max="90" step="15" value="45"><span>segundo</span></label><button id="workflowSessionToggle" class="action primary" type="button">Empezar a guardar la página</button></header><div id="workflowSessionProgress" role="progressbar" aria-label="Progreso de la semana de lanzamiento del pódcast" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i></i></div><section id="workflowCore" class="workflow-core session-stage" data-session-phase="ready" tabindex="-1"><!-- 11DZ_CORE_START:marketing-content-pages-launch-countdown --><div class="countdown-launch"><section><span class="eyebrow">LOCAL LAUNCH CLOCK</span><h2>La semana de lanzamiento del pódcast abrirá pronto</h2><p>La cuenta regresiva se calcula completamente según la hora local del navegador y no solicita la hora del servidor.</p><button id="restartCountdown" class="action primary" type="button" data-core-bridge="marketing-content-pages-launch-countdown">Restablecer a 72 horas</button></section><div class="countdown-units" role="timer" aria-live="off"><span><strong id="countDays">03</strong><small>día</small></span><span><strong id="countHours">00</strong><small>tiempo</small></span><span><strong id="countMinutes">00</strong><small>minutos</small></span><span><strong id="countSeconds">00</strong><small>segundo</small></span></div></div><!-- 11DZ_CORE_END --></section><footer class="session-log"><strong id="workflowSessionScore">0 puntos de interacción</strong><ol id="workflowSessionLaps" aria-label="Registro de ronda"></ol></footer></div></div></section><aside class="evidence-rail"><label>Escalado del lienzo<input id="evidenceZoom" type="range" min="88" max="128" value="100"><output id="evidenceZoomValue">100%</output></label><label>Muestra actual<select id="evidenceStep"><option value="0">Progreso de la semana de lanzamiento del pódcast</option><option value="1">Recordatorio de la semana de lanzamiento del pódcast</option><option value="2">Colección de la semana de lanzamiento del pódcast</option><option value="3">Resumen de la semana de lanzamiento del pódcast</option></select></label><ul id="evidenceChecklist" class="evidence-checklist"><li>Progreso de la semana de lanzamiento del pódcast</li><li>Recordatorio de la semana de lanzamiento del pódcast</li><li>Colección de la semana de lanzamiento del pódcast</li><li>Resumen de la semana de lanzamiento del pódcast</li></ul><button id="evidenceCapture" class="action primary" type="button">Escribir evidencia</button><ol id="evidenceLog" class="evidence-log"><li>Aún no se han registrado pruebas</li></ol></aside></div></section><p id="status" class="status" role="status" aria-live="polite"></p></section><figcaption class="gallery-caption"><strong>Semana de lanzamiento del pódcast / GALLERY 03</strong></figcaption></figure>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:marketing-content-pages-launch-countdown */
let launchAt=Date.now()+72*60*60*1000;const countdownParts={days:document.querySelector('#countDays'),hours:document.querySelector('#countHours'),minutes:document.querySelector('#countMinutes'),seconds:document.querySelector('#countSeconds')};function renderCountdown(){const left=Math.max(0,launchAt-Date.now());const totalSeconds=Math.floor(left/1000);const values={days:Math.floor(totalSeconds/86400),hours:Math.floor(totalSeconds%86400/3600),minutes:Math.floor(totalSeconds%3600/60),seconds:totalSeconds%60};Object.entries(values).forEach(([key,value])=>{countdownParts[key].textContent=String(value).padStart(2,'0');});if(!left)announce('La semana de lanzamiento del pódcast ya está abierta');}document.querySelector('#restartCountdown').addEventListener('click',()=>{launchAt=Date.now()+72*60*60*1000;renderCountdown();announce('La cuenta atrás se ha restablecido a 72 horas');});renderCountdown();setInterval(renderCountdown,1000);
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"marketing-content-pages-launch-countdown","selector":"[data-core-bridge=\"marketing-content-pages-launch-countdown\"]","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+' · 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.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 workflowSessionCore=document.querySelector('#workflowCore');const workflowSessionToggle=document.querySelector('#workflowSessionToggle');const workflowSessionLength=document.querySelector('#workflowSessionLength');const workflowSessionState={phase:'ready',elapsed:0,limit:Number(workflowSessionLength.value),checkpoints:[],timer:null};function workflowSessionFormat(seconds){return String(Math.floor(seconds/60)).padStart(2,'0')+':'+String(seconds%60).padStart(2,'0');}function workflowSessionDrive(){const percent=Math.min(100,Math.round(workflowSessionState.elapsed/workflowSessionState.limit*100));document.querySelector('#workflowSessionClock').textContent=workflowSessionFormat(Math.max(0,workflowSessionState.limit-workflowSessionState.elapsed));const progress=document.querySelector('#workflowSessionProgress');progress.setAttribute('aria-valuenow',String(percent));progress.querySelector('i').style.width=percent+'%';workflowSessionCore.dataset.sessionPhase=workflowSessionState.phase;document.querySelector('#workflowSessionScore').textContent=workflowSessionState.checkpoints.length+' puntos de control de interacción';}function workflowSessionLap(label){workflowSessionState.checkpoints.push({label,at:workflowSessionState.elapsed});const item=document.createElement('li');item.textContent=label+' · '+workflowSessionFormat(workflowSessionState.elapsed);document.querySelector('#workflowSessionLaps').append(item);workflowSessionDrive();}function workflowSessionStop(complete=false){clearInterval(workflowSessionState.timer);workflowSessionState.timer=null;workflowSessionState.phase=complete?'complete':'paused';workflowSessionToggle.textContent=complete?'Reiniciar':'Siguiente turno';workflowSessionToggle.setAttribute('aria-pressed','false');workflowSessionDrive();announce(complete?'Ronda completada de la semana de lanzamiento del pódcast':'La ronda se ha pausado');}function workflowSessionStart(){if(workflowSessionState.phase==='complete'){workflowSessionState.elapsed=0;workflowSessionState.checkpoints=[];document.querySelector('#workflowSessionLaps').replaceChildren();}workflowSessionState.phase='running';workflowSessionToggle.textContent='Ronda en pausa';workflowSessionToggle.setAttribute('aria-pressed','true');const bridge=workflowBridgeActivate();workflowSessionLap(bridge.summary);clearInterval(workflowSessionState.timer);workflowSessionState.timer=setInterval(()=>{workflowSessionState.elapsed+=1;if(workflowSessionState.elapsed>=workflowSessionState.limit){workflowSessionStop(true);return;}workflowSessionDrive();},1000);workflowSessionDrive();announce('La semana de lanzamiento del podcast ha comenzado · '+bridge.summary);}workflowSessionToggle.addEventListener('click',()=>workflowSessionState.phase==='running'?workflowSessionStop():workflowSessionStart());workflowSessionLength.addEventListener('input',()=>{workflowSessionState.limit=Number(workflowSessionLength.value);workflowSessionState.elapsed=Math.min(workflowSessionState.elapsed,workflowSessionState.limit);workflowSessionDrive();});workflowSessionCore.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){workflowSessionLap('operación con teclado');}});workflowSessionCore.addEventListener('click',event=>{if(event.target.closest('[data-core-bridge]'))workflowSessionLap('Operación principal · '+workflowBridgeSummary());});document.addEventListener('visibilitychange',()=>{if(document.hidden&&workflowSessionState.phase==='running')workflowSessionStop();});workflowSessionDrive();
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=["Progreso de la semana de lanzamiento del pódcast","Recordatorio de la semana de lanzamiento del pódcast","Colección de la semana de lanzamiento del pódcast","Resumen de la semana de lanzamiento del pódcast"];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+' · versión principal '+version;}evidenceModeButtons.forEach(button=>button.addEventListener('click',()=>{evidenceModeButtons.forEach(item=>item.classList.toggle('primary',item===button));evidenceShell.dataset.boardMode=button.dataset.boardMode;evidenceRender('Se ha cambiado a'+button.textContent);announce('Modo evidencia:'+button.textContent);}));evidenceCards.forEach((card,index)=>card.addEventListener('click',()=>{evidenceStep.value=String(index);evidenceRender('Tarjeta de observación cambiada');announce('Tarjeta de observación:'+evidenceNotes[index]);}));evidenceZoom.addEventListener('input',()=>{evidenceRender('El zoom del lienzo se ha actualizado');announce('Observación de escala '+evidenceZoom.value+'%');});evidenceStep.addEventListener('change',()=>{const index=Number(evidenceStep.value)||0;evidenceRender('Cambio a la vista de muestra');announce('Muestra actual:'+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='evidencia '+evidenceCaptures+' · '+note+' · versión principal '+version;const empty=evidenceLog.querySelector('li')?.textContent==='Aún no se han registrado pruebas';if(empty)evidenceLog.replaceChildren(item);else evidenceLog.prepend(item);while(evidenceLog.children.length>6)evidenceLog.lastElementChild.remove();evidenceRender('Se ha registrado la evidencia '+evidenceCaptures);announce('Se ha registrado la evidencia '+evidenceCaptures+' · '+note);});evidenceCore?.addEventListener('focusin',()=>evidenceRender('Caso principal tiene el foco'));evidenceCore?.addEventListener('click',()=>evidenceRender('Se produce una interacción en el caso principal'));evidenceRender('Esperando la muestra');
</script>
</body>
</html>