Formulaire de confirmation récapitulative de carte de confirmation des bourses et aides
Dans le contexte de la carte de validation des aides, réalisez un formulaire de confirmation récapitulative : inclut du contenu réel, des contrôles utilisables, un retour d’état clair et une mise en page adaptée à 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>Formulaire de confirmation récapitulative de carte de confirmation des bourses et aides</title>
<style>
:root { --ink:#252525; --paper:#f7f2e8; --accent:#247ba0; --secondary:#f4b942; --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:"Hiragino Maru Gothic ProN","PingFang SC",sans-serif; background:radial-gradient(circle at 15% 10%,color-mix(in srgb,var(--secondary) 35%,transparent) 0 9%,transparent 10%),radial-gradient(circle at 90% 75%,color-mix(in srgb,var(--accent) 18%,transparent) 0 12%,transparent 13%),var(--paper); }
button,input,select,textarea { color:inherit; font:inherit; }
button,[role="button"],input,select,textarea { accent-color:var(--accent); }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
@media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.page{width:min(1140px,calc(100% - 28px));margin:auto;padding:54px 0}.mast{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:0 12px 28px}.mast h1{font-family:"Hiragino Maru Gothic ProN","PingFang SC",sans-serif;font-weight:900;font-size:clamp(38px,8vw,82px);letter-spacing:-.035em;margin:0;line-height:.98}.eyebrow{display:inline-flex;padding:7px 12px;border-radius:999px;color:var(--paper);background:var(--accent);font-weight:900}.intro{max-width:620px;line-height:1.65}.scenario{padding:12px 18px;border-radius:999px;background:var(--secondary);box-shadow:0 7px 0 color-mix(in srgb,var(--ink) 18%,transparent);font-weight:900}.demo{border-radius:46px 18px 46px 18px;box-shadow:0 18px 0 color-mix(in srgb,var(--secondary) 45%,transparent);position:relative;min-height:390px;overflow:hidden;padding:clamp(22px,5vw,54px);background:color-mix(in srgb,var(--paper) 90%,#fff)}@media(max-width:700px){.mast{display:grid}.page{width:calc(100% - 16px);padding:18px 0}.demo{padding:17px}}
.panel{padding:18px;border:3px solid var(--ink);background:var(--paper);box-shadow:8px 8px 0 var(--ink)}.stack{display:grid;gap:12px}.row{display:flex;flex-wrap:wrap;gap:8px}.action{min-height:42px;padding:8px 13px;border:3px solid var(--ink);background:var(--paper);font-weight:900}.action.primary,.action.is-active{color:var(--paper);background:var(--ink)}.status{min-height:24px;padding:8px;color:var(--paper);background:var(--ink);font-weight:900}.metric{font-size:clamp(34px,8vw,76px);font-weight:900;letter-spacing:-.08em}.muted{font-weight:600}.chip{padding:5px 8px;border:2px solid var(--ink);font-weight:900}.meter{height:14px;border:3px 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}
.summary-checkout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.82fr);gap:22px;max-width:900px;margin:auto}.summary-fields,.summary-sidebar{display:grid;align-content:start;gap:14px}.summary-checkout h2{margin:.3em 0}.summary-checkout label{display:grid;gap:7px}.summary-checkout input:not([type="checkbox"]):not([type="radio"]),.summary-checkout select{width:100%;padding:11px;border:1px solid var(--line);border-radius:9px;background:var(--paper)}.summary-checkout fieldset{display:flex;gap:14px;border:1px solid var(--line);border-radius:12px}.summary-sidebar{padding:22px;border-radius:18px;background:var(--ink);color:var(--paper)}#summarySteps{display:grid;gap:8px;padding-left:18px;margin:0}#summarySteps li{opacity:.66}#summarySteps li.is-ready{opacity:1;color:var(--secondary)}.summary-checkout dl{display:grid;gap:8px}.summary-checkout dl div{display:flex;justify-content:space-between;gap:15px}.summary-checkout dd{margin:0;font-weight:800}@media(max-width:660px){.summary-checkout{grid-template-columns:1fr}}.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}}.stipend-ledger{--casework-scale:100;display:grid;gap:18px;padding:clamp(18px,4vw,30px);border:1px solid var(--line);border-radius:30px;background:linear-gradient(160deg,color-mix(in srgb,var(--secondary) 10%,transparent),color-mix(in srgb,var(--paper) 95%,transparent));box-shadow:var(--shadow)}.stipend-ledger__head{display:flex;justify-content:space-between;gap:18px;align-items:end}.stipend-ledger__head h2{margin:.18em 0}.stipend-ledger__modes{display:flex;flex-wrap:wrap;gap:8px;justify-content:end}.stipend-ledger__grid{display:grid;grid-template-columns:minmax(0,1.46fr) minmax(230px,.54fr);gap:16px}.stipend-ledger__viewport{min-width:0;padding:clamp(14px,3vw,22px);overflow:auto;border:1px solid var(--line);border-radius:24px;background:color-mix(in srgb,var(--paper) 92%,transparent)}.stipend-ledger__viewport>*{display:block;width:calc(10000%/var(--casework-scale));max-width:none;transform:scale(calc(var(--casework-scale)/100));transform-origin:top left}.stipend-ledger__rail{display:grid;align-content:start;gap:14px;padding:18px;border-radius:24px;color:var(--paper);background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 90%,#08120f),color-mix(in srgb,var(--ink) 72%,#1b120e))}.stipend-ledger__rail label{display:grid;gap:8px}.stipend-ledger__rail input{width:100%}.stipend-ledger__notes{display:grid;gap:10px}.stipend-ledger__notes button{display:grid;gap:6px;padding:14px;border:1px solid #ffffff24;border-radius:16px;color:inherit;background:#ffffff10;text-align:left}.stipend-ledger__notes button[aria-pressed="true"]{border-color:var(--secondary);background:#ffffff1a;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--secondary) 28%,transparent)}.stipend-ledger__notes small{line-height:1.45;opacity:.78}.stipend-ledger__log{display:grid;gap:8px;margin:0;padding-left:18px}.stipend-ledger[data-casework-mode="inspect"] .stipend-ledger__viewport{outline:4px solid color-mix(in srgb,var(--accent) 26%,transparent);outline-offset:2px}.stipend-ledger[data-casework-mode="handoff"] .stipend-ledger__rail{background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 84%,#28120f),color-mix(in srgb,var(--ink) 68%,#11201d))}@media(max-width:920px){.stipend-ledger__grid{grid-template-columns:1fr}}@media(max-width:560px){.stipend-ledger__head{align-items:stretch;flex-direction:column}.stipend-ledger__modes{justify-content:start}.stipend-ledger__viewport>*{width:100%;transform:none}}
</style>
</head>
<body data-aesthetic="playful" data-composition="gallery-frame">
<main class="page">
<header class="mast"><div><span class="eyebrow">playful / formulaire de confirmation de résumé / ADVANCED</span><h1>Formulaire de confirmation récapitulative de carte de confirmation des bourses et aides</h1><p class="intro">Dans le contexte de la carte de validation des aides, réalisez un formulaire de confirmation récapitulative : inclut du contenu réel, des contrôles utilisables, un retour d’état clair et une mise en page adaptée à différentes tailles.</p></div><span class="scenario">Carte de confirmation de bourse</span></header>
<figure class="composition-gallery"><section class="demo" aria-label="Zone interactive du formulaire de confirmation du récapitulatif de la carte de confirmation de bourse et d’aide"><section id="stipendLedger" class="stipend-ledger" data-casework-mode="queue"><header class="stipend-ledger__head"><div><span class="eyebrow">Carte de confirmation de bourse / STIPEND LEDGER</span><h2>Formulaire de confirmation récapitulative du relevé</h2><p>Intégrez le processus de confirmation du résumé dans le registre de validation des aides, en séparant de la base partagée des versions existantes de support note à l’aide de cartes de suivi indépendantes, de coefficients et d’un mode de passation.</p></div><div class="stipend-ledger__modes"><button class="action primary" type="button" data-casework-mode="queue">File d’attente</button><button class="action" type="button" data-casework-mode="inspect">Voir</button><button class="action" type="button" data-casework-mode="handoff">Transfert</button></div></header><div class="stipend-ledger__grid"><div class="stipend-ledger__viewport"><div class="workflow-session"><header class="session-command"><div><span class="eyebrow">Carte de confirmation de bourse SESSION</span><h2>Tableau de suivi de la confirmation de bourse et d’aide</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">Commencer la confirmation de la soumission</button></header><div id="workflowSessionProgress" role="progressbar" aria-label="Progression de la carte de confirmation de la bourse d’aide" 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:forms-input-summary-confirm --><form id="summaryForm" class="summary-checkout panel"><section class="summary-fields"><span class="eyebrow">SUMMARY CONFIRM</span><h2>Panneau de confirmation du volet de validation des aides financières</h2><label>Contact <input name="contact" required value="Lin Xiao"></label><label>Nombre de participants <input name="people" type="number" min="1" value="3"></label><label>Plan <select name="plan"><option>Solution standard</option><option>Solution flexible</option></select></label><fieldset><legend>Mode d’arrivée</legend><label><input type="radio" name="arrival" value="Enregistrement sur place" checked> Enregistrement sur place</label><label><input type="radio" name="arrival" value="Rejoindre à distance"> Rejoindre à distance</label></fieldset></section><aside class="summary-sidebar"><ol id="summarySteps"><li>Vérifier les contacts</li><li>Confirmer le nombre de personnes et le plan</li><li>Terminer l’envoi</li></ol><dl><div><dt>Contact</dt><dd id="summaryContact">Lin Xiao</dd></div><div><dt>Nombre de personnes</dt><dd id="summaryPeople">3</dd></div><div><dt>Plan</dt><dd id="summaryPlan">Solution standard</dd></div><div><dt>Arrivée sur place</dt><dd id="summaryArrival">Enregistrement sur place</dd></div></dl><label><input name="confirmed" type="checkbox" required checked> J’ai vérifié les informations ci-dessus</label><button class="action primary" type="submit" data-core-bridge="forms-input-summary-confirm">Confirmer l’envoi</button><output id="summaryReceipt" aria-live="polite">Envoi non confirmé</output></aside></form><!-- 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></div><aside class="stipend-ledger__rail"><label>Multiplicateur de suivi<input id="stipendLedgerScale" type="range" min="84" max="132" value="100"><output id="stipendLedgerScaleValue">100%</output></label><div class="stipend-ledger__notes"><button type="button" data-casework-note="0" aria-pressed="true"><strong>Progression de la carte de confirmation de la bourse d’aide</strong><small>Vérifier les changements d’état</small></button><button type="button" data-casework-note="1" aria-pressed="false"><strong>Rappel de la carte de confirmation de bourse et d’aide</strong><small>Confirmer l’entrée clavier</small></button><button type="button" data-casework-note="2" aria-pressed="false"><strong>Collection de carte de confirmation des bourses et aides</strong><small>Observer le repli pour les petits écrans</small></button><button type="button" data-casework-note="3" aria-pressed="false"><strong>Aperçu de la carte de confirmation de bourse</strong><small>Écrire le verdict actuel</small></button></div><button id="stipendLedgerCapture" class="action primary" type="button">Enregistrement de confirmation de saisie</button><ol id="stipendLedgerLog" class="stipend-ledger__log"><li>En attente du premier enregistrement</li></ol></aside></div></section><p id="status" class="status" role="status" aria-live="polite"></p></section><figcaption class="gallery-caption"><strong>Carte de confirmation de bourse / GALLERY 03</strong></figcaption></figure>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:forms-input-summary-confirm */
const summaryForm=document.querySelector('#summaryForm');let summarySubmissions=0;function renderSummary(){const data=new FormData(summaryForm);document.querySelector('#summaryContact').textContent=data.get('contact')||'—';document.querySelector('#summaryPeople').textContent=data.get('people')||'—';document.querySelector('#summaryPlan').textContent=data.get('plan')||'—';document.querySelector('#summaryArrival').textContent=data.get('arrival')||'—';document.querySelectorAll('#summarySteps li').forEach((item,index)=>item.classList.toggle('is-ready',index===0?Boolean(data.get('contact')):index===1?Boolean(data.get('people'))&&Boolean(data.get('plan')):Boolean(summaryForm.querySelector('[name="confirmed"]').checked)));announce('Le récapitulatif soumis a été mis à jour');}summaryForm.querySelectorAll('input:not([type="checkbox"]),input[type="radio"],select').forEach(control=>control.addEventListener(control.type==='radio'?'change':'input',renderSummary));summaryForm.querySelector('[name="confirmed"]').addEventListener('change',renderSummary);summaryForm.addEventListener('submit',event=>{event.preventDefault();if(!summaryForm.reportValidity())return;summarySubmissions+=1;summaryForm.dataset.submissions=String(summarySubmissions);const message='Deuxième '+summarySubmissions+' Confirmer à nouveau · Les informations de la carte de confirmation de bourse ont été vérifiées';document.querySelector('#summaryReceipt').textContent=message;announce(message);});renderSummary();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"forms-input-summary-confirm","selector":"[data-core-bridge=\"forms-input-summary-confirm\"]","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?'Fin du tour de la carte de confirmation de la bourse et de l’aide':'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('Le tour de la carte de confirmation des bourses et aides 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();
const caseworkShell=document.querySelector('#stipendLedger');const caseworkScale=document.querySelector('#stipendLedgerScale');const caseworkScaleValue=document.querySelector('#stipendLedgerScaleValue');const caseworkLog=document.querySelector('#stipendLedgerLog');const caseworkModeButtons=[...caseworkShell.querySelectorAll('[data-casework-mode]')];const caseworkNotes=[...caseworkShell.querySelectorAll('[data-casework-note]')];const caseworkLabels=["Progression de la carte de confirmation de la bourse d’aide","Rappel de la carte de confirmation de bourse et d’aide","Collection de carte de confirmation des bourses et aides","Aperçu de la carte de confirmation de bourse"];const caseworkCore=document.querySelector('#workflowCore');let caseworkCount=0;function caseworkActiveIndex(){return Math.max(0,caseworkNotes.findIndex(button=>button.getAttribute('aria-pressed')==='true'));}function caseworkRender(reason){const version=caseworkCore?.dataset.workflowVersion||'0';const scale=Number(caseworkScale.value);caseworkShell.style.setProperty('--casework-scale',String(scale));caseworkScaleValue.textContent=scale+'%';caseworkNotes.forEach((button,index)=>button.setAttribute('aria-pressed',String(index===caseworkActiveIndex())));announce(reason+' · Version de base '+version);}caseworkModeButtons.forEach(button=>button.addEventListener('click',()=>{caseworkModeButtons.forEach(item=>item.classList.toggle('primary',item===button));caseworkShell.dataset.caseworkMode=button.dataset.caseworkMode;caseworkRender('Basculé vers'+button.textContent);}));caseworkNotes.forEach((button,index)=>button.addEventListener('click',()=>{caseworkNotes.forEach(item=>item.setAttribute('aria-pressed','false'));button.setAttribute('aria-pressed','true');caseworkRender('Carte d’enregistrement basculée');announce('Carte de suivi :'+caseworkLabels[index]);}));caseworkScale.addEventListener('input',()=>caseworkRender('L’échelle d’observation a été mise à jour'));document.querySelector('#stipendLedgerCapture').addEventListener('click',()=>{const index=caseworkActiveIndex();const version=caseworkCore?.dataset.workflowVersion||'0';caseworkCount+=1;const item=document.createElement('li');item.textContent='Enregistrement '+caseworkCount+' · '+(caseworkLabels[index]||caseworkLabels[0]||'Exemple sans nom')+' · Version de base '+version;const empty=caseworkLog.querySelector('li')?.textContent==='En attente du premier enregistrement';if(empty)caseworkLog.replaceChildren(item);else caseworkLog.prepend(item);while(caseworkLog.children.length>6)caseworkLog.lastElementChild.remove();caseworkRender('Enregistrement ajouté '+caseworkCount);});caseworkCore?.addEventListener('focusin',()=>caseworkRender('L’élément principal a le focus'));caseworkCore?.addEventListener('click',()=>caseworkRender('Interaction de l’exemple principal'));caseworkRender('Prêt à créer l’enregistrement');
</script>
</body>
</html>