Suivi de l’avancement des commandes de la boutique de fleurs
Dans le scénario d’une boutique de fleurs, réalisez le suivi de l’avancement des commandes : il comprend du contenu réel, des contrôles interactifs, un retour d’état clair et une mise en page adaptative aux 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>Suivi de l’avancement des commandes de la boutique de fleurs</title>
<style>
:root { --ink:#18314f; --paper:#f7f8f2; --accent:#ff6b5e; --secondary:#71c9b5; --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:"IBM Plex Sans","PingFang SC",sans-serif; background:linear-gradient(color-mix(in srgb,var(--ink) 5%,transparent) 1px,transparent 1px),var(--paper);background-size:100% 36px; }
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(1280px,calc(100% - 24px));margin:auto;padding:28px 0 64px}.mast{display:flex;justify-content:space-between;padding:18px;border:1px solid var(--line);background:color-mix(in srgb,#fff 60%,transparent);gap:18px;margin-bottom:14px}.mast h1{font-family:"IBM Plex Sans","PingFang SC",sans-serif;font-weight:800;font-size:clamp(34px,6vw,66px);letter-spacing:-.045em;margin:0;line-height:1}.eyebrow{display:block;margin-bottom:6px;color:var(--accent);font:800 10px/1 ui-monospace,monospace;letter-spacing:.16em}.intro{max-width:720px;margin:10px 0 0;font-size:14px;line-height:1.6}.scenario{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);font-size:12px}.demo{border-radius:14px;box-shadow:0 14px 40px color-mix(in srgb,var(--ink) 11%,transparent);position:relative;min-height:390px;overflow:hidden;padding:24px;background:color-mix(in srgb,var(--paper) 90%,#fff)}@media(max-width:700px){.page{width:calc(100% - 12px);padding-top:12px}.mast{display:grid}.demo{padding:12px}}
.panel{padding:16px;border:3px double var(--accent);background:var(--paper)}.stack{display:grid;gap:14px}.row{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:10px;overflow:auto}.action{padding:10px 15px;border:1px solid var(--accent);background:transparent;font-family:Didot,serif;letter-spacing:.06em}.action.primary,.action.is-active{color:var(--paper);background:var(--ink)}.metric{font-family:Didot,serif;font-size:clamp(36px,8vw,74px);letter-spacing:.04em}.status{min-height:24px;padding:9px;border-inline:1px solid var(--accent);text-align:center}.muted{line-height:1.8}.chip{padding:5px 14px;border-inline:1px solid var(--accent);letter-spacing:.1em}.meter{height:5px;background:var(--line)}.meter>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--secondary))}
.composition-index{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px}.index-mark{display:grid;align-content:space-between;width:76px;padding:16px 10px;border:1px solid var(--line);color:var(--accent);background:color-mix(in srgb,var(--paper) 82%,transparent);text-align:center}.index-mark strong{font:900 34px/1 ui-monospace,monospace}.index-mark span{writing-mode:vertical-rl;font:800 10px/1.2 ui-monospace,monospace;letter-spacing:.18em}.composition-index .demo{grid-column:1;grid-row:1}.composition-index::before{content:"";position:absolute;left:-12px;top:38px;width:5px;height:45%;background:linear-gradient(var(--accent),var(--secondary))}@media(max-width:700px){.composition-index{grid-template-columns:1fr}.index-mark{grid-row:1;width:auto;grid-template-columns:auto 1fr}.index-mark span{writing-mode:horizontal-tb}.composition-index .demo{grid-row:2}}
.order-tracker-demo{display:grid;gap:18px}.order-tracker-demo header{display:flex;justify-content:space-between;gap:18px;align-items:end}.order-tracker-demo h2{margin:.3em 0}.order-stages{display:grid;grid-template-columns:repeat(5,1fr);padding:0;margin:0;list-style:none}.order-stages li{position:relative;display:grid;justify-items:center;gap:9px;text-align:center}.order-stages li::after{content:"";position:absolute;z-index:0;left:50%;right:-50%;top:19px;height:3px;background:var(--line)}.order-stages li:last-child::after{display:none}.order-stages i{display:grid;width:40px;height:40px;place-items:center;z-index:1;border-radius:50%;background:var(--line);font-style:normal}.order-stages li.is-done i,.order-stages li[aria-current="step"] i{color:var(--paper);background:var(--accent)}.order-stages li.is-done::after{background:var(--accent)}.order-stages time{display:block;margin-top:4px;font-size:11px}.order-tracker-demo aside{display:flex;gap:16px;align-items:center;padding:18px;border-left:5px solid var(--accent);background:var(--paper)}.order-tracker-demo aside strong{font-size:24px}.order-tracker-demo aside p{margin-left:auto}@media(max-width:640px){.order-stages{grid-template-columns:1fr}.order-stages li{grid-template-columns:40px 1fr;justify-items:start;text-align:left}.order-stages li::after{left:19px;right:auto;top:40px;bottom:-9px;width:3px;height:auto}.order-tracker-demo header{align-items:stretch;flex-direction:column}.order-tracker-demo aside{align-items:flex-start;flex-direction:column}.order-tracker-demo aside p{margin-left:0}}.workflow-dispatch{display:grid;grid-template-columns:minmax(210px,.48fr) minmax(0,1.52fr);gap:18px}.dispatch-console{display:grid;align-content:start;gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--secondary) 12%,var(--paper))}.dispatch-console h2{margin:.2em 0}.dispatch-console form,.dispatch-console label{display:grid;gap:7px}.dispatch-console input,.dispatch-console select{min-width:0;width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.dispatch-console fieldset{display:flex;gap:12px;border:1px solid var(--line);border-radius:10px}.dispatch-console fieldset label{display:flex;align-items:center}.dispatch-workbench{--dispatch-load:.22;min-width:0;padding:14px;border-left:8px solid color-mix(in srgb,var(--accent) calc(var(--dispatch-load)*100%),var(--line));background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 28%)}.dispatch-workbench[data-dispatch-priority="urgent"]{box-shadow:inset 0 0 0 2px var(--accent)}@media(max-width:900px){.workflow-dispatch{grid-template-columns:1fr}.dispatch-console{order:2}}
</style>
</head>
<body data-aesthetic="dashboard" data-composition="field-index">
<main class="page">
<header class="mast"><div><span class="eyebrow">dashboard / suivi de l’avancement de la commande / BEGINNER</span><h1>Suivi de l’avancement des commandes de la boutique de fleurs</h1><p class="intro">Dans le scénario d’une boutique de fleurs, réalisez le suivi de l’avancement des commandes : il comprend du contenu réel, des contrôles interactifs, un retour d’état clair et une mise en page adaptative aux différentes tailles.</p></div><span class="scenario">Fleuriste</span></header>
<div class="composition-index"><section class="demo" aria-label="Zone interactive de suivi de progression des commandes de la boutique de fleurs"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Fleuriste DISPATCH</span><h2>Table de pilotage des commandes de bouquets</h2><form id="workflowDispatchForm"><label>Type de tâche<select id="workflowDispatchKind"><option>Bouquets du quotidien</option><option>Bouquet de fête</option><option>Bouquet personnalisé</option></select></label><label>Quantité de fleurs<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="36"><span>branche</span></label><fieldset><legend>Priorité de traitement</legend><label><input type="radio" name="workflowPriority" value="normal" checked>Standard</label><label><input type="radio" name="workflowPriority" value="urgent">Urgent</label></fieldset><button class="action primary" type="submit">Accepter les commandes</button></form><label>Tâche en cours<select id="workflowDispatchActive" aria-label="Basculer la tâche en cours"><option value="1">Bouquets du quotidien</option><option value="2">Bouquet de fête</option></select></label><output id="workflowDispatchSummary">En attente de planification</output></aside><section id="workflowCore" class="workflow-core dispatch-workbench" data-dispatch-priority="normal"><!-- 11DZ_CORE_START:commerce-service-flows-order-tracker --><div class="order-tracker-demo"><header><span class="eyebrow">ORDER TRACKER</span><h2>Progression de la boutique de fleurs</h2><button id="advanceOrder" class="action primary" type="button" data-core-bridge="commerce-service-flows-order-tracker">Simuler l’état suivant</button></header><ol id="orderStages" class="order-stages"><li data-order-stage="0" aria-current="step"><i>1</i><div><b>Pris en charge</b><time>À l’instant</time></div></li><li data-order-stage="1"><i>2</i><div><b>Préparation en cours</b><time>En attente</time></div></li><li data-order-stage="2"><i>3</i><div><b>Service en cours</b><time>En attente</time></div></li><li data-order-stage="3"><i>4</i><div><b>En attente de confirmation</b><time>En attente</time></div></li><li data-order-stage="4"><i>5</i><div><b>Terminé</b><time>En attente</time></div></li></ol><aside><span>État actuel</span><strong id="orderCurrent">Pris en charge</strong><p id="orderHint">Le prestataire a bien reçu la demande.</p></aside></div><!-- 11DZ_CORE_END --></section></div><p id="status" class="status" role="status" aria-live="polite"></p></section><aside class="index-mark" aria-hidden="true"><strong>05</strong><span>Fleuriste FIELD INDEX</span></aside></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:commerce-service-flows-order-tracker */
const orderStageLabels=["Pris en charge","Préparation en cours","Service en cours","En attente de confirmation","Terminé"];let orderStage=0;const orderStages=[...document.querySelectorAll('[data-order-stage]')];function renderOrder(){orderStages.forEach((item,index)=>{item.classList.toggle('is-done',index<orderStage);if(index===orderStage)item.setAttribute('aria-current','step');else item.removeAttribute('aria-current');item.querySelector('time').textContent=index<orderStage?'Terminé':index===orderStage?'Actuel':'En attente';});document.querySelector('#orderCurrent').textContent=orderStageLabels[orderStage];document.querySelector('#orderHint').textContent=orderStage===orderStages.length-1?'Le parcours de service est entièrement terminé.':'Statut suivant :'+orderStageLabels[orderStage+1];document.querySelector('#advanceOrder').disabled=orderStage===orderStages.length-1;announce('État actuel '+orderStageLabels[orderStage]);}document.querySelector('#advanceOrder').addEventListener('click',()=>{orderStage=Math.min(orderStages.length-1,orderStage+1);renderOrder();});renderOrder();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"commerce-service-flows-order-tracker","selector":"[data-core-bridge=\"commerce-service-flows-order-tracker\"]","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 workflowDispatchCore=document.querySelector('#workflowCore');const workflowDispatchForm=document.querySelector('#workflowDispatchForm');const workflowDispatchSelect=document.querySelector('#workflowDispatchActive');const workflowDispatchJobs=new Map([["1",{"label":"Bouquets du quotidien","amount":12,"priority":"normal","touches":0}],["2",{"label":"Bouquet de fête","amount":21,"priority":"urgent","touches":0}]]);let workflowDispatchSerial=workflowDispatchJobs.size;function workflowDispatchDrive(job,activate=false){workflowDispatchCore.dataset.dispatchPriority=job.priority;workflowDispatchCore.style.setProperty('--dispatch-load',Math.min(.95,.16+job.amount/120));const bridge=activate?workflowBridgeActivate():{changed:false,summary:workflowBridgeSummary()};document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' branche · '+bridge.summary;announce('Tâche en cours pour la commande du bouquet :'+job.label);}function workflowDispatchRender(activeId,activate=false){workflowDispatchSelect.replaceChildren(...[...workflowDispatchJobs].map(([id,job])=>{const option=document.createElement('option');option.value=id;option.textContent=job.label+(job.priority==='urgent'?' · Urgent':'');return option;}));workflowDispatchSelect.value=activeId;workflowDispatchDrive(workflowDispatchJobs.get(activeId),activate);}workflowDispatchForm.addEventListener('submit',event=>{event.preventDefault();const data=new FormData(workflowDispatchForm);const id=String(++workflowDispatchSerial);workflowDispatchJobs.set(id,{label:document.querySelector('#workflowDispatchKind').value,amount:Math.max(1,Number(document.querySelector('#workflowDispatchAmount').value)||1),priority:data.get('workflowPriority'),touches:0});workflowDispatchRender(id,true);});workflowDispatchSelect.addEventListener('change',()=>workflowDispatchDrive(workflowDispatchJobs.get(workflowDispatchSelect.value),true));workflowDispatchCore.addEventListener('focusin',()=>{const job=workflowDispatchJobs.get(workflowDispatchSelect.value);if(!job)return;job.touches+=1;document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' branche · '+workflowBridgeSummary();});workflowDispatchRender('1',false);
workflowBridgeReset();
</script>
</body>
</html>