Tableau d’analyse des tendances du studio de planification de serre
Réalisez un tableau d’analyse des tendances dans le contexte de la salle de planification de la serre : contenu réel, contrôles actionnables, retours d’état clairs et mise en page adaptable à différentes tailles.
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>Tableau d’analyse des tendances du studio de planification de serre</title>
<style>
:root { --ink:#3a2419; --paper:#fbf3df; --accent:#c66a2d; --secondary:#b5c88d; --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:"DIN Alternate","Arial Narrow",sans-serif; background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 5%,transparent) 0 1px,transparent 1px 18px),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; } }
.mast{display:flex;justify-content:space-between;border-bottom:6px solid var(--ink);padding-bottom:18px;gap:20px;align-items:flex-end;margin:0 0 22px}.page{width:min(1240px,calc(100% - 28px));margin:auto;padding:34px 0 70px}.scenario{padding:8px 12px;border:2px solid var(--ink);font:900 12px/1 ui-monospace,monospace}.mast h1{font-family:"DIN Condensed","Arial Narrow",sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(44px,10vw,104px);letter-spacing:-.02em;max-width:1000px;margin:0;line-height:.82}.intro{max-width:720px;font-family:"Arial Narrow",sans-serif;line-height:1.5}.eyebrow{display:inline-block;padding:6px 9px;color:var(--paper);background:var(--accent);font:900 10px/1 ui-monospace,monospace;letter-spacing:.12em}.demo{border-radius:3px;box-shadow:10px 10px 0 var(--accent);position:relative;min-height:400px;overflow:hidden;padding:32px;background:var(--paper)}@media(max-width:700px){.mast{display:grid;grid-template-columns:1fr}.page{width:calc(100% - 16px);padding-top:16px}.demo{padding:14px}}
.stack{display:flex;flex-direction:column;gap:18px}.panel{padding:28px;border-left:7px solid var(--accent);background:color-mix(in srgb,var(--secondary) 12%,var(--paper))}.action{min-height:46px;padding:11px 18px;border:0;border-bottom:3px solid var(--ink);background:transparent;font-weight:900}.action.primary,.action.is-active{color:var(--paper);background:var(--ink)}.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}.metric{font:900 clamp(32px,7vw,64px)/1 ui-monospace,monospace}.status{min-height:22px;padding-top:12px;border-top:1px dashed var(--line)}.muted{color:color-mix(in srgb,var(--ink) 62%,transparent)}.chip{display:inline-block;padding:5px 8px;background:var(--secondary)}.meter{height:12px;border:1px solid var(--ink)}.meter>i{display:block;height:100%;background:var(--ink)}
.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}
.ops-trend{display:grid;gap:16px}.ops-trend>header{display:grid;grid-template-columns:1fr minmax(150px,.25fr) minmax(180px,.35fr);gap:18px;align-items:end;padding-bottom:16px;border-bottom:1px solid var(--line)}.ops-trend h2{margin:.2em 0}.ops-trend header label{display:grid;grid-template-columns:1fr auto;gap:7px}.ops-trend header select,.ops-trend header input{grid-column:1/-1;width:100%}.ops-trend-board{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(210px,.5fr);gap:14px}.ops-chart-card{display:grid;gap:8px;padding:14px;border:1px solid var(--line);background:#081b25;color:#dff7f5}.ops-chart-card svg{width:100%;min-height:320px}.ops-chart-card #opsTrendPath{fill:none;stroke:#5eead4;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.ops-chart-card #opsTrendArea{fill:url(#none);fill:#2dd4bf22;stroke:none}.ops-chart-card circle{fill:#fb923c;stroke:#081b25;stroke-width:4;cursor:crosshair}.ops-chart-card output{min-height:22px;color:#99f6e4}.ops-trend-board>aside{display:grid;align-content:start;gap:9px}.ops-trend-board article{display:grid;gap:5px;padding:16px;border:1px solid var(--line);background:var(--paper)}.ops-trend-board strong{font-size:clamp(28px,5vw,48px)}#opsTrendAlerts{display:grid;gap:6px;padding:0;margin:0;list-style:none}#opsTrendAlerts li{padding:9px;border-left:4px solid var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--paper));font-size:12px}@media(max-width:760px){.ops-trend>header,.ops-trend-board{grid-template-columns:1fr}.ops-chart-card svg{min-height:240px}}.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="industrial" data-composition="studio">
<main class="page">
<header class="mast"><div><span class="eyebrow">industriel / panneau d’analyse des tendances / INTERMEDIATE</span><h1>Tableau d’analyse des tendances du studio de planification de serre</h1><p class="intro">Réalisez un tableau d’analyse des tendances dans le contexte de la salle de planification de la serre : contenu réel, contrôles actionnables, retours d’état clairs et mise en page adaptable à différentes tailles.</p></div><span class="scenario">Salle de planification de la serre</span></header>
<div class="composition-studio"><div class="studio-ruler" aria-hidden="true"></div><section class="demo" aria-label="Panneau d’analyse des tendances du plan de serre - zone interactive"><div id="similarityShell" class="similarity-shell" data-review-state="focus"><header class="similarity-head"><div><span class="eyebrow">Salle de planification de serre / REVIEW STUDIO</span><h2>Poste de travail de vérification du tableau de bord d’analyse des tendances</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>Journal de la salle de planification de la serre</li><li>Collaboration de la salle de planification de la serre</li><li>Progression de la salle de planification de la serre</li><li>Rappel de la salle de planification de la serre</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>Journal de la salle de planification de la serre</strong><p>Vérifier si les changements d’état sont visibles</p></article><article><span>02</span><strong>Collaboration de la salle de planification de la serre</strong><p>Confirmer la cohérence entre l’entrée au clavier et le clic</p></article><article><span>03</span><strong>Progression de la salle de planification de la serre</strong><p>Vérifiez si la disposition se replie sur les écrans étroits</p></article><article><span>04</span><strong>Rappel de la salle de planification de la serre</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">Salle de planification de la serre SPATIAL CANVAS</span><h2>Pupitre de réglage de la salle de planification de la serre</h2></div><label>Pourcentage du seuil d’alerte<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:dashboards-admin-trend-chart --><div class="ops-trend"><header><div><span class="eyebrow">OPERATIONS TREND</span><h2>Livraison à l’heure du local de culture sous serre</h2><p>Affichez de vrais indicateurs métier selon les équipes d’exploitation et générez directement les intervalles à traiter à l’aide de seuils.</p></div><label>Fenêtre d’observation<select id="opsTrendWindow" data-core-bridge="dashboards-admin-trend-chart"><option value="6">Récemment, le service 6</option><option value="9">Dernier service 9</option><option value="12" selected>Tous les cours 12</option></select></label><label>Seuil d’alerte<input id="opsTrendThreshold" type="range" min="10" max="120" value="60"><output id="opsTrendThresholdValue">60 exemplaire</output></label></header><section class="ops-trend-board"><div class="ops-chart-card"><svg id="opsTrendSvg" viewBox="0 0 760 360" role="img" aria-labelledby="opsTrendTitle opsTrendDesc"><title id="opsTrendTitle">Tendances opérationnelles de la salle de planification de la serre</title><desc id="opsTrendDesc">Le graphique en ligne montre les livraisons ponctuelles des douze créneaux opérationnels, et la ligne pointillée indique le seuil d’alerte.</desc><g id="opsTrendGrid" aria-hidden="true"></g><line id="opsTrendLimit" x1="48" x2="732" stroke="currentColor" stroke-dasharray="8 7"></line><path id="opsTrendArea"></path><path id="opsTrendPath"></path><g id="opsTrendPoints"></g></svg><output id="opsTrendHover">Survolez un point de données pour voir le service</output></div><aside><article><span>Valeur actuelle</span><strong id="opsTrendCurrent">—</strong></article><article><span>Moyenne glissante</span><strong id="opsTrendAverage">—</strong></article><article><span>Seuil dépassé</span><strong id="opsTrendBreaches">—</strong></article><ol id="opsTrendAlerts" aria-label="Événement de seuil"></ol></aside></section></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>Vue de surveillance de la salle de planification de la serre</strong><p>La vue de traitement du local de serre et la vue de récapitulation du local de serre se réorganisent en fonction de la taille de la toile.</p><output id="workflowSpatialStatus">Largeur 64%, zoom 100%</output><input id="workflowSpatialApply" class="action primary" type="button" value="Panneau d’application"></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:dashboards-admin-trend-chart */
const opsTrendAll=[34,38,41,36,45,49,46,53,57,55,62,66];const opsTrendUnit='Unique';const opsTrendWindow=document.querySelector('#opsTrendWindow');const opsTrendThreshold=document.querySelector('#opsTrendThreshold');const opsTrendSvg=document.querySelector('#opsTrendSvg');const opsTrendState={windowSize:12,threshold:60,visible:opsTrendAll};function opsTrendScale(value,max){return 320-value/max*260;}function renderOpsTrend(){opsTrendState.windowSize=Number(opsTrendWindow.value);opsTrendState.threshold=Number(opsTrendThreshold.value);opsTrendState.visible=opsTrendAll.slice(-opsTrendState.windowSize);const max=Math.max(opsTrendState.threshold,...opsTrendState.visible)*1.12;const step=684/Math.max(1,opsTrendState.visible.length-1);const points=opsTrendState.visible.map((value,index)=>({value,x:48+index*step,y:opsTrendScale(value,max),shift:opsTrendAll.length-opsTrendState.visible.length+index+1}));const commands=points.map((point,index)=>(index?'L':'M')+point.x.toFixed(1)+' '+point.y.toFixed(1)).join(' ');document.querySelector('#opsTrendPath').setAttribute('d',commands);document.querySelector('#opsTrendArea').setAttribute('d',commands+' L '+points.at(-1).x+' 320 L 48 320 Z');const limitY=opsTrendScale(opsTrendState.threshold,max);const limit=document.querySelector('#opsTrendLimit');limit.setAttribute('y1',String(limitY));limit.setAttribute('y2',String(limitY));const pointGroup=document.querySelector('#opsTrendPoints');pointGroup.replaceChildren(...points.map(point=>{const circle=document.createElementNS('http://www.w3.org/2000/svg','circle');circle.setAttribute('cx',String(point.x));circle.setAttribute('cy',String(point.y));circle.setAttribute('r','7');circle.dataset.value=String(point.value);circle.dataset.shift=String(point.shift);circle.setAttribute('tabindex','0');circle.setAttribute('aria-label','Deuxième '+point.shift+' classe,'+point.value+' '+opsTrendUnit);return circle;}));const average=Math.round(opsTrendState.visible.reduce((sum,value)=>sum+value,0)/opsTrendState.visible.length);const breaches=points.filter(point=>point.value>opsTrendState.threshold);document.querySelector('#opsTrendCurrent').textContent=opsTrendState.visible.at(-1)+' '+opsTrendUnit;document.querySelector('#opsTrendAverage').textContent=average+' '+opsTrendUnit;document.querySelector('#opsTrendBreaches').textContent=breaches.length+' Équipe';document.querySelector('#opsTrendThresholdValue').textContent=opsTrendState.threshold+' '+opsTrendUnit;document.querySelector('#opsTrendAlerts').replaceChildren(...breaches.map(point=>{const item=document.createElement('li');item.textContent='Deuxième '+point.shift+' la classe dépasse le seuil '+(point.value-opsTrendState.threshold)+' '+opsTrendUnit;return item;}));announce('Mise à jour des tendances de la salle de planification de la serre,'+breaches.length+' un poste nécessite une attention particulière');}opsTrendWindow.addEventListener('change',renderOpsTrend);opsTrendThreshold.addEventListener('input',renderOpsTrend);opsTrendSvg.addEventListener('pointermove',event=>{const target=event.target.closest('circle');if(!target)return;document.querySelector('#opsTrendHover').textContent='Deuxième '+target.dataset.shift+' classe · '+target.dataset.value+' '+opsTrendUnit;});opsTrendSvg.addEventListener('focusin',event=>{if(event.target.matches('circle'))document.querySelector('#opsTrendHover').textContent=event.target.getAttribute('aria-label');});renderOpsTrend();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"dashboards-admin-trend-chart","selector":"[data-core-bridge=\"dashboards-admin-trend-chart\"]","mode":"select","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+' · 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);workflowBridgeControl.addEventListener('keydown',event=>{if(event.key!==workflowBridgeSpec.key)return;event.preventDefault();workflowBridgeControl.selectedIndex=(workflowBridgeControl.selectedIndex+1)%workflowBridgeControl.options.length;workflowBridgeControl.dispatchEvent(new Event('input',{bubbles:true}));workflowBridgeControl.dispatchEvent(new Event('change',{bubbles:true}));});workflowBridgeControl.addEventListener("keydown",workflowBridgeScheduleCommit);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();workflowBridgeControl.selectedIndex=(workflowBridgeControl.selectedIndex+1)%workflowBridgeControl.options.length;workflowBridgeControl.dispatchEvent(new Event('change',{bubbles:true}));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 de la salle de planification de la serre 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='Panneau appliqué · 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=["Journal de la salle de planification de la serre","Collaboration de la salle de planification de la serre","Progression de la salle de planification de la serre","Rappel de la salle de planification de la serre"];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>