Tiroir latéral du centre de tâches
Dans un scénario de centre de tâches, réalisez un tiroir latéral : il comprend du contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptée à différentes tailles. Visualisation en ligne, modification du code source et exécution dans le navigateur disponibles.
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>Tiroir latéral du centre de tâches</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}}
.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-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}
.drawer-canvas{display:grid;gap:22px;min-height:380px;padding:clamp(24px,6vw,66px);border:1px solid var(--line);border-radius:30px;background:linear-gradient(130deg,var(--paper),color-mix(in srgb,var(--secondary) 18%,var(--paper)))}.drawer-canvas h2{margin:0;font-size:clamp(36px,8vw,82px)}.drawer-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.drawer-cards article{display:grid;gap:7px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}.drawer-canvas>.action{justify-self:start}.drawer-demo dialog{width:min(460px,calc(100% - 20px));height:calc(100dvh - 20px);max-height:none;margin:10px 10px 10px auto;padding:0;border:0;border-radius:26px;color:var(--ink);background:var(--paper);box-shadow:-24px 0 70px #0004}.drawer-demo dialog::backdrop{background:#1118}.drawer-demo form{display:grid;grid-template-rows:auto auto 1fr auto;height:100%}.drawer-demo form header,.drawer-demo form footer{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px;border-bottom:1px solid var(--line)}.drawer-demo form header h2{margin:.2em 0}.drawer-demo form button{padding:10px 14px;border:1px solid var(--line);border-radius:9px;background:transparent}.drawer-demo form header>button{width:42px;height:42px;padding:0;border-radius:50%;font-size:22px}.drawer-demo nav{display:flex;gap:6px;padding:12px 20px;border-bottom:1px solid var(--line)}.drawer-demo nav button[aria-current="page"]{color:var(--paper);background:var(--ink)}.drawer-content{padding:28px;line-height:1.8}.drawer-content strong{font-size:30px}.drawer-demo form footer{border-top:1px solid var(--line);border-bottom:0}.drawer-demo form footer .primary{color:var(--paper);background:var(--accent)}@media(max-width:560px){.drawer-cards{grid-template-columns:1fr}.drawer-demo dialog{width:calc(100% - 12px);height:calc(100dvh - 12px);margin:6px}}.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}}
</style>
</head>
<body data-aesthetic="art-deco" data-composition="gallery-frame">
<main class="page">
<header class="mast"><div><span class="eyebrow">art-deco / Tiroir latéral / ADVANCED</span><h1>Tiroir latéral du centre de tâches</h1><p class="intro">Dans un scénario de centre de tâches, réalisez un tiroir latéral : il comprend du contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptée à différentes tailles. Visualisation en ligne, modification du code source et exécution dans le navigateur disponibles.</p></div><span class="scenario">Centre des tâches</span></header>
<figure class="composition-gallery"><section class="demo" aria-label="Zone interactive du tiroir latéral du centre de tâches"><div class="workflow-session"><header class="session-command"><div><span class="eyebrow">Centre des tâches SESSION</span><h2>Chronomètre de la période de tâche</h2></div><output id="workflowSessionClock">00:45</output><label>Durée du tour<input id="workflowSessionLength" type="range" min="15" max="90" step="15" value="45"><span>s</span></label><button id="workflowSessionToggle" class="action primary" type="button">Démarrer la tâche</button></header><div id="workflowSessionProgress" role="progressbar" aria-label="Progression de la période de tâche" 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:overlays-feedback-side-drawer --><section class="drawer-demo"><div class="drawer-canvas"><span class="eyebrow">SIDE DRAWER</span><h2>Espace de travail du centre des tâches</h2><div class="drawer-cards"><article><span>01</span><strong>Inspiration pour le centre de tâches</strong></article><article><span>02</span><strong>Journal du centre des tâches</strong></article><article><span>03</span><strong>Collaboration du centre de tâches</strong></article></div><button id="drawerOpen" class="action primary" type="button" aria-controls="sideDrawer" data-core-bridge="overlays-feedback-side-drawer">Ouvrir le panneau latéral de détails</button></div><dialog id="sideDrawer" aria-labelledby="drawerTitle"><form method="dialog"><header><div><span class="eyebrow">DETAIL PANEL</span><h2 id="drawerTitle">Inspiration pour le centre de tâches</h2></div><button value="close" aria-label="Fermer les détails latéraux">×</button></header><nav aria-label="Section de détails"><button type="button" data-drawer-tab="0" aria-current="page">Aperçu</button><button type="button" data-drawer-tab="1">Enregistrement</button><button type="button" data-drawer-tab="2">Collaborateur</button></nav><div id="drawerContent" class="drawer-content"><strong>Aperçu</strong><p>Le tiroir latéral conserve le contexte de la page principale et occupe toute la largeur disponible sur les petits écrans.</p></div><footer><button value="close">À traiter plus tard</button><button value="saved" class="primary">Enregistrer les détails</button></footer></form></dialog></section><!-- 11DZ_CORE_END --></section><footer class="session-log"><strong id="workflowSessionScore">0 points de contrôle interactifs</strong><ol id="workflowSessionLaps" aria-label="Journal de ronde"></ol></footer></div><p id="status" class="status" role="status" aria-live="polite"></p></section><figcaption class="gallery-caption"><strong>Centre de tâches / GALLERY 03</strong></figcaption></figure>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:overlays-feedback-side-drawer */
const sideDrawer=document.querySelector('#sideDrawer');document.querySelector('#drawerOpen').addEventListener('click',()=>{sideDrawer.returnValue='close';sideDrawer.showModal();});const drawerTabs=[...document.querySelectorAll('[data-drawer-tab]')];const drawerCopy=[['Aperçu','Voir le résumé et l’état principal du projet en cours.'],['Enregistrement','Vérifiez les dernières mises à jour et les résultats du traitement par ordre chronologique.'],['Collaborateur','Confirmer les membres participants ainsi que les étapes dont chacun est responsable.']];drawerTabs.forEach((button,index)=>button.addEventListener('click',()=>{drawerTabs.forEach(item=>item.removeAttribute('aria-current'));button.setAttribute('aria-current','page');document.querySelector('#drawerContent').innerHTML='<strong>'+drawerCopy[index][0]+'</strong><p>'+drawerCopy[index][1]+'</p>';announce('le panneau coulissant a basculé vers '+drawerCopy[index][0]);}));sideDrawer.addEventListener('click',event=>{if(event.target===sideDrawer)sideDrawer.close('close');});sideDrawer.addEventListener('close',()=>announce(sideDrawer.returnValue==='saved'?'Les détails latéraux ont été enregistrés':'Le panneau latéral détaillé est fermé'));
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"overlays-feedback-side-drawer","selector":"[data-core-bridge=\"overlays-feedback-side-drawer\"]","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 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+' points de contrôle d’interaction';}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?'Recommencer':'Tour suivant';workflowSessionToggle.setAttribute('aria-pressed','false');workflowSessionDrive();announce(complete?'Rotation achevée du créneau de tâche':'La ronde est suspendue');}function workflowSessionStart(){if(workflowSessionState.phase==='complete'){workflowSessionState.elapsed=0;workflowSessionState.checkpoints=[];document.querySelector('#workflowSessionLaps').replaceChildren();}workflowSessionState.phase='running';workflowSessionToggle.textContent='Tour de pause';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 session de rotation de la période de tâche a commencé · '+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('Opérations au clavier');}});workflowSessionCore.addEventListener('click',event=>{if(event.target.closest('[data-core-bridge]'))workflowSessionLap('Opération principale · '+workflowBridgeSummary());});document.addEventListener('visibilitychange',()=>{if(document.hidden&&workflowSessionState.phase==='running')workflowSessionStop();});workflowSessionDrive();
workflowBridgeReset();
</script>
</body>
</html>