chronologie des activités du journal de jardin
Réalisez une chronologie d’activités pour le scénario du journal de jardin, avec du contenu réel, des contrôles exploitables, des retours d’état clairs et une mise en page adaptée à toutes les 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>chronologie des activités du journal de jardin</title>
<style>
:root { --ink:#102c44; --paper:#eef6f8; --accent:#e05263; --secondary:#79b7c7; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:Didot,"Songti SC",serif; background:linear-gradient(30deg,transparent 48%,color-mix(in srgb,var(--accent) 9%,transparent) 49% 51%,transparent 52%),var(--paper);background-size:52px 90px; }
button,input,select,textarea { color:inherit; font:inherit; }
button,[role="button"],input,select,textarea { accent-color:var(--accent); }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
@media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.page{width:min(1040px,calc(100% - 36px));margin:auto;padding:64px 0}.mast{display:grid;justify-items:center;text-align:center;border-block:3px double var(--accent);padding:26px;gap:20px;margin-bottom:32px}.mast h1{font-family:Didot,"Songti SC",serif;font-weight:700;font-size:clamp(38px,8vw,86px);letter-spacing:.035em;margin:0;line-height:1}.eyebrow{display:block;color:var(--accent);font:800 11px/1 ui-monospace,monospace;letter-spacing:.3em}.intro{max-width:600px;margin-inline:auto;line-height:1.8}.scenario{padding:8px 26px;border-inline:1px solid var(--accent);letter-spacing:.16em}.demo{border:4px double var(--accent);border-radius:0;clip-path:polygon(24px 0,calc(100% - 24px) 0,100% 24px,100% calc(100% - 24px),calc(100% - 24px) 100%,24px 100%,0 calc(100% - 24px),0 24px);position:relative;min-height:440px;overflow:hidden;padding:clamp(28px,5vw,60px);background:var(--paper)}@media(max-width:700px){.page{width:calc(100% - 20px);padding:24px 0}.mast{padding:18px}.demo{padding:18px}}
.panel{padding:18px;border:2px solid var(--line);border-radius:26px;box-shadow:0 12px 0 color-mix(in srgb,var(--secondary) 35%,transparent)}.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.stack{display:grid;gap:12px}.action{padding:12px 20px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:0 5px 0 var(--ink);font-weight:800}.action:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.status{text-align:center;min-height:26px;margin-top:18px}.metric{text-align:center;font-size:clamp(34px,8vw,70px);font-weight:900}.muted{text-align:center;opacity:.7}.meter{height:14px;padding:2px;border:2px solid var(--ink);border-radius:999px}.meter>i{display:block;height:100%;border-radius:inherit;background:var(--secondary)}.chip{padding:7px 11px;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.composition-studio{display:grid;gap:14px}.studio-ruler{display:flex;justify-content:space-between;padding:0 4px;color:color-mix(in srgb,var(--ink) 55%,transparent);font:700 11px/1 ui-monospace,monospace;letter-spacing:.14em}.studio-ruler::before{content:"01 / WORKING PROTOTYPE"}.studio-ruler::after{content:"360 · 768 · 1440"}.composition-studio .demo::after{content:"";position:absolute;right:18px;bottom:18px;width:24px;height:24px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);pointer-events:none}
.timeline-demo{display:grid;gap:18px;max-width:820px;margin:auto}.timeline-demo header{display:flex;justify-content:space-between;gap:18px;align-items:end}.timeline-demo h2{margin:.3em 0}.activity-timeline{position:relative;display:grid;gap:0;padding:0;margin:0;list-style:none}.activity-timeline::before{content:"";position:absolute;left:82px;top:10px;bottom:10px;width:2px;background:var(--line)}.activity-timeline li{position:relative;display:grid;grid-template-columns:64px 1fr;gap:38px;padding:18px 0}.activity-timeline li::before{content:"";position:absolute;left:76px;top:26px;width:14px;height:14px;border:3px solid var(--paper);border-radius:50%;background:var(--accent)}.activity-timeline time{font:800 12px/1 ui-monospace,monospace}.activity-timeline h3{margin:.5em 0}@media(max-width:540px){.timeline-demo header{align-items:stretch;flex-direction:column}.activity-timeline::before{left:9px}.activity-timeline li{grid-template-columns:1fr;gap:8px;padding-left:34px}.activity-timeline li::before{left:3px}}.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}}.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="art-deco" data-composition="studio">
<main class="page">
<header class="mast"><div><span class="eyebrow">art-deco / Chronologie des activités / BEGINNER</span><h1>chronologie des activités du journal de jardin</h1><p class="intro">Réalisez une chronologie d’activités pour le scénario du journal de jardin, avec du contenu réel, des contrôles exploitables, des retours d’état clairs et une mise en page adaptée à toutes les tailles d’écran.</p></div><span class="scenario">Journal du jardin</span></header>
<div class="composition-studio"><div class="studio-ruler" aria-hidden="true"></div><section class="demo" aria-label="Zone interactive de la chronologie d’activité du journal de jardin"><div id="similarityShell" class="similarity-shell" data-review-state="focus"><header class="similarity-head"><div><span class="eyebrow">Journal du jardin / REVIEW STUDIO</span><h2>Tableau de travail de révision de la chronologie des activités</h2><p>Placez le cas principal dans une enveloppe de révision séparée et consignez en plus le mode d’observation, les points de contrôle et la conclusion actuelle.</p></div><output id="similarityState">Prêt à lancer la révision</output></header><div class="similarity-layout"><aside class="similarity-console"><fieldset class="similarity-modes"><legend>Vue de réexamen</legend><button class="action primary" type="button" data-review-view="focus">Mettre au point la vue principale</button><button class="action" type="button" data-review-view="compare">Liste de contrôle</button><button class="action" type="button" data-review-view="audit">Consigner la scène</button></fieldset><label>Observer la densité<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"> Figer le point de contrôle actuel</label><ol id="similarityChecklist" class="similarity-checklist"><li>Inspiration du journal du jardin</li><li>Journal du jardin</li><li>Collaboration du journal du jardin</li><li>Avancement du journal du jardin</li></ol><button id="similarityCapture" class="action primary" type="button">Point de contrôle enregistré</button><ol id="similarityLog" class="similarity-log"><li>En attente du premier enregistrement de contrôle</li></ol></aside><section class="similarity-stage"><div id="similarityDeck" class="similarity-deck"><article data-active="true"><span>01</span><strong>Inspiration du journal du jardin</strong><p>Vérifier si les changements d’état sont visibles</p></article><article><span>02</span><strong>Journal du jardin</strong><p>Confirmer la cohérence entre l’entrée au clavier et le clic</p></article><article><span>03</span><strong>Collaboration du journal du jardin</strong><p>Vérifiez si la disposition se replie sur les écrans étroits</p></article><article><span>04</span><strong>Avancement du journal du jardin</strong><p>Enregistrer la conclusion de la révision en cours</p></article></div><div id="similarityCoreShell" class="similarity-core-shell"><div id="workflowSpatial" class="workflow-spatial" style="--spatial-width:64%;--spatial-zoom:1"><header><div><span class="eyebrow">Journal de jardin SPATIAL CANVAS</span><h2>Journal de jardin, panneau de réglage</h2></div><label>proportion du volume de contenu<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:cards-lists-content-activity-timeline --><div class="timeline-demo"><header><span class="eyebrow">ACTIVITY TIMELINE</span><h2>Actualités du journal du jardin</h2><label>Afficher uniquement les éléments terminés <input id="timelineComplete" type="checkbox" data-core-bridge="cards-lists-content-activity-timeline"></label></header><ol id="activityTimeline" class="activity-timeline"><li data-complete="true"><time datetime="2026-07-01">07.01</time><div><span class="chip">Terminé</span><h3>Inspiration du journal du jardin</h3><p>Enregistrez un changement d’état traçable et une note de responsabilité.</p></div></li><li data-complete="false"><time datetime="2026-07-02">07.02</time><div><span class="chip">En cours</span><h3>Journal du jardin</h3><p>Enregistrez un changement d’état traçable et une note de responsabilité.</p></div></li><li data-complete="true"><time datetime="2026-07-03">07.03</time><div><span class="chip">Terminé</span><h3>Collaboration du journal du jardin</h3><p>Enregistrez un changement d’état traçable et une note de responsabilité.</p></div></li><li data-complete="false"><time datetime="2026-07-04">07.04</time><div><span class="chip">En cours</span><h3>Avancement du journal du jardin</h3><p>Enregistrez un changement d’état traçable et une note de responsabilité.</p></div></li><li data-complete="true"><time datetime="2026-07-05">07.05</time><div><span class="chip">Terminé</span><h3>Rappel du journal de jardin</h3><p>Enregistrez un changement d’état traçable et une note de responsabilité.</p></div></li><li data-complete="false"><time datetime="2026-07-06">07.06</time><div><span class="chip">En cours</span><h3>Collection du journal du jardin</h3><p>Enregistrez un changement d’état traçable et une note de responsabilité.</p></div></li></ol></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>Liste de collecte du journal de jardin</strong><p>Le regroupement trié du journal de jardin et la publication terminée du journal de jardin se réorganisent en fonction de la taille de la zone de dessin.</p><output id="workflowSpatialStatus">Largeur 64%, zoom 100%</output><input id="workflowSpatialApply" class="action primary" type="button" value="Enregistrer l’agencement"></aside></div></div></div></section></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:cards-lists-content-activity-timeline */
const timelineItems=[...document.querySelectorAll('#activityTimeline li')];document.querySelector('#timelineComplete').addEventListener('change',event=>{timelineItems.forEach(item=>{item.hidden=event.currentTarget.checked&&item.dataset.complete!=='true';});const visible=timelineItems.filter(item=>!item.hidden).length;announce('Affichage chronologique '+visible+' éléments d’actualité');});
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"cards-lists-content-activity-timeline","selector":"[data-core-bridge=\"cards-lists-content-activity-timeline\"]","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+' · 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.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 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('La toile du journal du jardin a été réorganisée');}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='Arrangement enregistré · largeur '+workflowSpatialState.width+'%，mise à l’échelle '+Math.round(workflowSpatialState.zoom*100)+'% · '+bridge.summary;announce(document.querySelector('#workflowSpatialStatus').textContent);});workflowSpatialDrive();
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=["Inspiration du journal du jardin","Journal du jardin","Collaboration du journal du jardin","Avancement du journal du jardin"];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+' · Version de base '+version+(similarityPin.checked?' · Épinglé':'');}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('Basculé vers'+button.textContent);announce('Vue de vérification :'+button.textContent);}));similarityDensity.addEventListener('input',()=>{similarityRender('La densité d’observation a été mise à jour');announce('Observer la densité '+similarityDensity.value+'%');});similarityPin.addEventListener('change',()=>{similarityRender(similarityPin.checked?'Le point de contrôle actuel est figé':'Le point de contrôle actuel est déverrouillé');announce(similarityPin.checked?'Point de contrôle actuel épinglé':'Point de contrôle fixé annulé');});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='Point de contrôle '+similarityCaptures+' · '+note+' · Version de base '+version;const empty=similarityLog.querySelector('li')?.textContent==='En attente du premier enregistrement de contrôle';if(empty)similarityLog.replaceChildren(item);else similarityLog.prepend(item);while(similarityLog.children.length>6)similarityLog.lastElementChild.remove();similarityRender('Point de contrôle enregistré '+similarityCaptures);announce('Point de contrôle enregistré '+similarityCaptures+' · '+note);});similarityCore?.addEventListener('focusin',()=>similarityRender('Vue principale focalisée'));similarityCore?.addEventListener('click',()=>similarityRender('Interaction sur la vue principale'));similarityRender('Prêt à lancer la révision');
</script>
</body>
</html>