Horloge Pomodoro du défi d’archivage
Créer un chronomètre Pomodoro pour un scénario de défi de dossier : contenu réel, contrôles actionnables, retours d’état clairs et mise en page sur plusieurs tailles d’écran.
Après activation de JavaScript, ce cas peut être modifié, exécuté et enregistré. Code source fixe ci-dessous :
<!doctype html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Horloge Pomodoro du défi d’archivage</title>
<style>
:root { --ink:#111111; --paper:#f8f8f4; --accent:#111111; --secondary:#8d8d88; --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:Helvetica,"PingFang SC",sans-serif; background:repeating-linear-gradient(0deg,transparent 0 31px,color-mix(in srgb,var(--ink) 7%,transparent) 32px),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(1120px,calc(100% - 30px));margin:auto;padding:48px 0 80px}.mast{display:grid;grid-template-columns:1fr auto;border-top:10px solid var(--ink);padding-top:20px;gap:20px;align-items:end;margin-bottom:26px}.mast h1{font-family:Helvetica,"PingFang SC",sans-serif;font-weight:900;font-size:clamp(44px,10vw,106px);letter-spacing:-.075em;margin:0;line-height:.82}.eyebrow{display:inline-block;margin-bottom:12px;padding:5px 8px;color:var(--paper);background:var(--ink);font:900 10px/1 ui-monospace,monospace;letter-spacing:.14em}.intro{max-width:700px;line-height:1.55}.scenario{padding:9px 12px;border:3px solid var(--ink);font-weight:900}.demo{border:3px solid var(--ink);border-radius:0;box-shadow:12px 12px 0 var(--ink);position:relative;min-height:410px;overflow:hidden;padding:clamp(22px,4vw,46px);background:var(--paper)}@media(max-width:700px){.page{width:calc(100% - 18px);padding:20px 0}.mast{grid-template-columns:1fr}.demo{padding:15px}}
.panel{padding:20px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:18px;background:color-mix(in srgb,var(--paper) 88%,transparent);box-shadow:inset 0 0 24px color-mix(in srgb,var(--accent) 7%,transparent)}.stack{display:grid;gap:16px}.row{display:flex;flex-wrap:wrap;gap:9px}.action{padding:11px 16px;border:1px solid var(--accent);border-radius:6px;color:var(--accent);background:transparent;box-shadow:0 0 14px color-mix(in srgb,var(--accent) 10%,transparent)}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.status{min-height:24px;color:var(--secondary);text-shadow:0 0 10px currentColor}.metric{font-size:clamp(30px,7vw,64px);font-weight:900;text-shadow:0 0 18px color-mix(in srgb,var(--accent) 40%,transparent)}.muted{opacity:.7}.chip{padding:6px 9px;border:1px solid var(--secondary);border-radius:4px}.meter{height:7px;background:color-mix(in srgb,var(--accent) 15%,transparent)}.meter>i{display:block;height:100%;box-shadow:0 0 12px var(--accent);background:var(--accent)}
.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}
.pomodoro-board{display:grid;gap:18px;max-width:760px;margin:auto;padding:clamp(24px,6vw,58px);border:1px solid var(--line);border-radius:28px;background:var(--paper)}.pomodoro-board header{display:grid;grid-template-columns:1fr auto;align-items:end}.pomodoro-board h2{margin:.25em 0}.pomodoro-board header output{grid-row:1/3;grid-column:2;font:900 clamp(44px,9vw,78px)/1 ui-monospace,monospace}.pomodoro-board ol{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0;margin:0;list-style:none}.pomodoro-board li{display:grid;gap:5px;padding:12px;border:1px solid var(--line);border-radius:12px}.pomodoro-board li[aria-current="step"]{color:var(--paper);background:var(--ink)}.pomodoro-actions{display:flex;flex-wrap:wrap;gap:8px}.pomodoro-board>output{text-align:right;font-weight:900}@media(max-width:600px){.pomodoro-board header{grid-template-columns:1fr}.pomodoro-board header output{grid-area:auto}.pomodoro-board ol{grid-template-columns:1fr 1fr}}.workflow-spatial{display:grid;gap:16px}.workflow-spatial>header{display:grid;grid-template-columns:1fr minmax(170px,.35fr) minmax(170px,.35fr);gap:18px;align-items:end;padding-bottom:16px;border-bottom:5px solid var(--ink)}.workflow-spatial h2{margin:.2em 0}.workflow-spatial header label{display:grid;grid-template-columns:1fr auto;gap:7px}.workflow-spatial header input{grid-column:1/-1;width:100%}.spatial-grid{display:grid;grid-template-columns:minmax(0,var(--spatial-width)) 20px minmax(180px,1fr);gap:0;align-items:stretch}.spatial-core{min-width:0;transform:scale(var(--spatial-zoom));transform-origin:top left;transition:transform .2s}.spatial-handle{display:grid;min-height:300px;place-items:center;border:0;border-inline:1px dashed var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);cursor:col-resize}.spatial-grid>aside{display:grid;align-content:center;gap:14px;padding:22px;background:color-mix(in srgb,var(--secondary) 14%,var(--paper))}.spatial-grid>aside strong{font-size:clamp(24px,4vw,42px)}@media(max-width:900px){.workflow-spatial>header{grid-template-columns:1fr}.spatial-grid{order:-1;grid-template-columns:1fr}.spatial-handle{min-height:44px;cursor:row-resize}.spatial-core{transform:none}}
</style>
</head>
<body data-aesthetic="monochrome" data-composition="control-deck">
<main class="page">
<header class="mast"><div><span class="eyebrow">monochrome / minuteur Pomodoro / BEGINNER</span><h1>Horloge Pomodoro du défi d’archivage</h1><p class="intro">Créer un chronomètre Pomodoro pour un scénario de défi de dossier : contenu réel, contrôles actionnables, retours d’état clairs et mise en page sur plusieurs tailles d’écran.</p></div><span class="scenario">Table du défi d’archives</span></header>
<div class="composition-deck"><div class="deck-bar"><span>CONTROL DECK · 04</span><span>Horloge Pomodoro</span><span class="deck-lights" aria-hidden="true"><i></i><i></i><i></i></span></div><section class="demo" aria-label="Zone interactive du bureau défi des archives du minuteur Pomodoro"><div id="workflowSpatial" class="workflow-spatial" style="--spatial-width:64%;--spatial-zoom:1"><header><div><span class="eyebrow">Base d’archives de défi SPATIAL CANVAS</span><h2>Station d’ajustement du défi des archives</h2></div><label>Proportion de progression terminée<input id="workflowSpatialWidth" type="range" min="38" max="82" value="64"><output id="workflowSpatialWidthValue">64%</output></label><label>Redimensionnement du contenu<input id="workflowSpatialZoom" type="range" min="80" max="120" value="100"><output id="workflowSpatialZoomValue">100%</output></label></header><div class="spatial-grid"><section id="workflowCore" class="workflow-core spatial-core"><!-- 11DZ_CORE_START:mini-apps-games-pomodoro --><div class="pomodoro-board"><header><span class="eyebrow">POMODORO CYCLE</span><h2>Boucle de défi des archives</h2><output id="pomodoroClock">25:00</output></header><ol id="pomodoroPhases"><li data-pomodoro-phase="0" aria-current="step"><b>1</b><span>Concentration</span><small>25:00</small></li><li data-pomodoro-phase="1"><b>2</b><span>Pause courte</span><small>05:00</small></li><li data-pomodoro-phase="2"><b>3</b><span>Concentration</span><small>25:00</small></li><li data-pomodoro-phase="3"><b>4</b><span>Pause longue</span><small>15:00</small></li></ol><div id="pomodoroProgress" class="meter" role="progressbar" aria-label="Progression de la phase Pomodoro en cours" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i id="pomodoroMeter"></i></div><div class="pomodoro-actions"><button id="pomodoroToggle" class="action primary" type="button" data-core-bridge="mini-apps-games-pomodoro">Commencer la concentration</button><button id="pomodoroSkip" class="action" type="button">Passer à l’étape suivante</button><button id="pomodoroReset" class="action" type="button">Réinitialiser la boucle</button></div><output id="pomodoroSummary">Terminé 0 phases de concentration</output></div><!-- 11DZ_CORE_END --></section><input id="workflowSpatialHandle" class="spatial-handle" type="button" value="↔" aria-label="Faire glisser pour ajuster la largeur de l’aperçu du cas principal"><aside><strong>Début du tour du comptoir du défi d’archives</strong><p>L’ajustement en cours de session de la table du défi d’archive et le récapitulatif final de la table du défi d’archive se réorganisent en fonction de la taille du canevas.</p><output id="workflowSpatialStatus">Largeur 64%, zoom 100%</output><input id="workflowSpatialApply" class="action primary" type="button" value="enregistrer le résultat"></aside></div></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:mini-apps-games-pomodoro */
const pomodoroPlan=[{"name":"Concentration","seconds":1500},{"name":"Pause courte","seconds":300},{"name":"Concentration","seconds":1500},{"name":"Pause longue","seconds":900}];const pomodoroItems=[...document.querySelectorAll('[data-pomodoro-phase]')];const pomodoroState={phase:0,remaining:pomodoroPlan[0].seconds,running:false,completedFocus:0,timer:null};function renderPomodoro(){const current=pomodoroPlan[pomodoroState.phase];const elapsed=current.seconds-pomodoroState.remaining;const percent=Math.round(elapsed/current.seconds*100);document.querySelector('#pomodoroClock').textContent=String(Math.floor(pomodoroState.remaining/60)).padStart(2,'0')+':'+String(pomodoroState.remaining%60).padStart(2,'0');pomodoroItems.forEach((item,index)=>{if(index===pomodoroState.phase)item.setAttribute('aria-current','step');else item.removeAttribute('aria-current');});document.querySelector('#pomodoroProgress').setAttribute('aria-valuenow',String(percent));document.querySelector('#pomodoroMeter').style.width=percent+'%';document.querySelector('#pomodoroToggle').textContent=pomodoroState.running?'Pause'+current.name:'Commencer'+current.name;document.querySelector('#pomodoroSummary').textContent='Terminé '+pomodoroState.completedFocus+' phase de concentration';}function advancePomodoro(){if(pomodoroPlan[pomodoroState.phase].name==='Concentration'&&pomodoroState.remaining===0)pomodoroState.completedFocus+=1;pomodoroState.phase=(pomodoroState.phase+1)%pomodoroPlan.length;pomodoroState.remaining=pomodoroPlan[pomodoroState.phase].seconds;renderPomodoro();announce('Entrer'+pomodoroPlan[pomodoroState.phase].name+'phase');}function stopPomodoro(){clearInterval(pomodoroState.timer);pomodoroState.timer=null;pomodoroState.running=false;renderPomodoro();}document.querySelector('#pomodoroToggle').addEventListener('click',()=>{if(pomodoroState.running){stopPomodoro();announce('Le cycle Pomodoro est en pause');return;}pomodoroState.running=true;pomodoroState.timer=setInterval(()=>{pomodoroState.remaining=Math.max(0,pomodoroState.remaining-1);if(!pomodoroState.remaining){stopPomodoro();advancePomodoro();}else renderPomodoro();},1000);renderPomodoro();announce('La phase Pomodoro a commencé');});document.querySelector('#pomodoroSkip').addEventListener('click',()=>{stopPomodoro();pomodoroState.remaining=0;advancePomodoro();});document.querySelector('#pomodoroReset').addEventListener('click',()=>{stopPomodoro();pomodoroState.phase=0;pomodoroState.remaining=pomodoroPlan[0].seconds;pomodoroState.completedFocus=0;renderPomodoro();announce('Le cycle Pomodoro a été réinitialisé');});renderPomodoro();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"mini-apps-games-pomodoro","selector":"[data-core-bridge=\"mini-apps-games-pomodoro\"]","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+' · Version de base '+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 workflowSpatial=document.querySelector('#workflowSpatial');const workflowSpatialCore=document.querySelector('#workflowCore');const workflowSpatialWidth=document.querySelector('#workflowSpatialWidth');const workflowSpatialZoom=document.querySelector('#workflowSpatialZoom');const workflowSpatialHandle=document.querySelector('#workflowSpatialHandle');const workflowSpatialState={width:64,zoom:1,dragging:false};function workflowSpatialDrive(){workflowSpatial.style.setProperty('--spatial-width',workflowSpatialState.width+'%');workflowSpatial.style.setProperty('--spatial-zoom',String(workflowSpatialState.zoom));workflowSpatialWidth.value=String(workflowSpatialState.width);workflowSpatialZoom.value=String(Math.round(workflowSpatialState.zoom*100));document.querySelector('#workflowSpatialWidthValue').textContent=workflowSpatialState.width+'%';document.querySelector('#workflowSpatialZoomValue').textContent=Math.round(workflowSpatialState.zoom*100)+'%';document.querySelector('#workflowSpatialStatus').textContent='largeur '+workflowSpatialState.width+'%，mise à l’échelle '+Math.round(workflowSpatialState.zoom*100)+'%';announce('Le canevas du poste de défi de l’archive a été réorganisé');}workflowSpatialWidth.addEventListener('input',()=>{workflowSpatialState.width=Number(workflowSpatialWidth.value);workflowSpatialDrive();});workflowSpatialZoom.addEventListener('input',()=>{workflowSpatialState.zoom=Number(workflowSpatialZoom.value)/100;workflowSpatialDrive();});workflowSpatialHandle.addEventListener('pointerdown',event=>{workflowSpatialState.dragging=true;workflowSpatialHandle.setPointerCapture(event.pointerId);});workflowSpatialHandle.addEventListener('pointermove',event=>{if(!workflowSpatialState.dragging)return;const rect=workflowSpatial.getBoundingClientRect();workflowSpatialState.width=Math.max(38,Math.min(82,Math.round((event.clientX-rect.left)/rect.width*100)));workflowSpatialDrive();});workflowSpatialHandle.addEventListener('pointerup',event=>{workflowSpatialState.dragging=false;workflowSpatialHandle.releasePointerCapture(event.pointerId);});workflowSpatialHandle.addEventListener('wheel',event=>{event.preventDefault();workflowSpatialState.zoom=Math.max(.8,Math.min(1.2,workflowSpatialState.zoom+(event.deltaY<0?.05:-.05)));workflowSpatialDrive();},{passive:false});workflowSpatialHandle.addEventListener('keydown',event=>{if(!['ArrowLeft','ArrowRight'].includes(event.key))return;event.preventDefault();workflowSpatialState.width=Math.max(38,Math.min(82,workflowSpatialState.width+(event.key==='ArrowRight'?2:-2)));workflowSpatialDrive();});document.querySelector('#workflowSpatialApply').addEventListener('click',()=>{const bridge=workflowBridgeActivate();document.querySelector('#workflowSpatialStatus').textContent='Résultat enregistré · largeur '+workflowSpatialState.width+'%，mise à l’échelle '+Math.round(workflowSpatialState.zoom*100)+'% · '+bridge.summary;announce(document.querySelector('#workflowSpatialStatus').textContent);});workflowSpatialDrive();
workflowBridgeReset();
</script>
</body>
</html>