Matrice de commutation des préférences du plan de voyage
Réalisez un tableau d’interrupteurs de préférences dans un contexte de plan de voyage : contenu réel, contrôles interactifs, retours d’état clairs et mise en page adaptative selon la taille.
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>Matrice de commutation des préférences du plan de voyage</title>
<style>
:root { --ink:#111111; --paper:#f8f8f4; --accent:#111111; --secondary:#8d8d88; --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:Helvetica,"PingFang SC",sans-serif; background:repeating-linear-gradient(0deg,transparent 0 31px,color-mix(in srgb,var(--ink) 7%,transparent) 32px),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(1120px,calc(100% - 30px));margin:auto;padding:48px 0 80px}.mast{display:grid;grid-template-columns:1fr auto;border-top:10px solid var(--ink);padding-top:20px;gap:20px;align-items:end;margin-bottom:26px}.mast h1{font-family:Helvetica,"PingFang SC",sans-serif;font-weight:900;font-size:clamp(44px,10vw,106px);letter-spacing:-.075em;margin:0;line-height:.82}.eyebrow{display:inline-block;margin-bottom:12px;padding:5px 8px;color:var(--paper);background:var(--ink);font:900 10px/1 ui-monospace,monospace;letter-spacing:.14em}.intro{max-width:700px;line-height:1.55}.scenario{padding:9px 12px;border:3px solid var(--ink);font-weight:900}.demo{border:3px solid var(--ink);border-radius:0;box-shadow:12px 12px 0 var(--ink);position:relative;min-height:410px;overflow:hidden;padding:clamp(22px,4vw,46px);background:var(--paper)}@media(max-width:700px){.page{width:calc(100% - 18px);padding:20px 0}.mast{grid-template-columns:1fr}.demo{padding:15px}}
.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-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}}
.toggle-matrix-demo{display:grid;gap:18px}.toggle-matrix-demo header{max-width:650px}.toggle-matrix-demo h2{margin:.2em 0}.matrix-scroll{overflow:auto;border:1px solid var(--line);border-radius:18px;background:var(--paper)}.toggle-matrix-demo table{width:100%;min-width:590px;border-collapse:collapse}.toggle-matrix-demo caption{padding:14px 18px;text-align:left;font-size:13px}.toggle-matrix-demo th,.toggle-matrix-demo td{padding:15px;border-top:1px solid var(--line);text-align:center}.toggle-matrix-demo th:first-child{text-align:left}.matrix-switch{position:relative;display:inline-grid}.matrix-switch input{position:absolute;opacity:0}.matrix-switch span{width:48px;height:27px;padding:3px;border-radius:999px;background:color-mix(in srgb,var(--ink) 18%,transparent);transition:background .18s}.matrix-switch span::after{content:"";display:block;width:21px;height:21px;border-radius:50%;background:var(--paper);box-shadow:0 2px 7px #0003;transition:transform .18s}.matrix-switch input:checked+span{background:var(--accent)}.matrix-switch input:checked+span::after{transform:translateX(21px)}.matrix-switch input:focus-visible+span{outline:3px solid var(--accent);outline-offset:3px}.toggle-matrix-demo footer{display:flex;justify-content:space-between;gap:12px;align-items:center;font-weight:800}.workflow-compare{display:grid;grid-template-columns:minmax(230px,.55fr) minmax(0,1.45fr);gap:18px}.compare-stage{display:grid;gap:12px;min-width:0}.compare-stage>header{display:flex;justify-content:space-between;gap:16px;align-items:end}.compare-stage h2{margin:.2em 0}.compare-core{--compare-split:50%;min-width:0;padding:14px;clip-path:inset(0 calc(100% - var(--compare-split)) 0 0);outline:1px dashed var(--accent);outline-offset:-8px;transition:clip-path .25s,filter .25s}.compare-core[data-compare-channel="B"]{filter:hue-rotate(32deg) saturate(1.15)}.compare-controls{display:grid;align-content:start;gap:16px;padding:20px;border:1px solid var(--line);border-radius:24px 4px 24px 4px;background:var(--paper)}.compare-controls fieldset,.compare-controls>label{display:grid;gap:8px}.compare-controls input[type="range"]{width:100%}#workflowCompareShelf{display:grid;gap:6px;padding:0;margin:0;list-style:none}#workflowCompareShelf li{display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:9px;border-top:1px solid var(--line);font-size:12px}@media(max-width:900px){.workflow-compare{grid-template-columns:1fr}.compare-stage{order:-1}.compare-core{clip-path:none;border-left:8px solid var(--accent)}}
</style>
</head>
<body data-aesthetic="monochrome" data-composition="field-index">
<main class="page">
<header class="mast"><div><span class="eyebrow">monochrome / matrice d’interrupteurs de préférences / INTERMEDIATE</span><h1>Matrice de commutation des préférences du plan de voyage</h1><p class="intro">Réalisez un tableau d’interrupteurs de préférences dans un contexte de plan de voyage : contenu réel, contrôles interactifs, retours d’état clairs et mise en page adaptative selon la taille.</p></div><span class="scenario">Plan de voyage</span></header>
<div class="composition-index"><section class="demo" aria-label="Zone interactive de la matrice d’interrupteurs des préférences du plan de voyage"><div class="workflow-compare"><form id="workflowCompareControls" class="compare-controls"><fieldset><legend>Canal de comparaison</legend><label><input type="radio" name="workflowChannel" value="A" checked>A · itinéraire rapide</label><label><input type="radio" name="workflowChannel" value="B">B · Itinéraire équilibré</label></fieldset><label>Poids du budget du voyage<input id="workflowCompareWeight" type="range" min="10" max="90" value="50"><output id="workflowCompareWeightValue">50 yuan</output></label><label><input id="workflowCompareFreeze" type="checkbox">Geler la version actuelle</label><button id="workflowCompareCapture" class="action primary" type="button">Échantillonner et enregistrer l’itinéraire</button><ol id="workflowCompareShelf" aria-label="Enregistrement de version"></ol></form><section class="compare-stage"><header><span class="eyebrow">Plan de voyage COMPARE</span><h2>Comparaison des deux versions de l’itinéraire de voyage</h2><output id="workflowCompareLive">Version A en attente d’échantillonnage</output></header><section id="workflowCore" class="workflow-core compare-core" data-compare-channel="A" style="--compare-split:50%"><!-- 11DZ_CORE_START:controls-selectors-toggle-matrix --><section class="toggle-matrix-demo"><header><span class="eyebrow">PREFERENCE MATRIX</span><h2>Préférences de notification pour le plan de voyage</h2><p>Activez ou désactivez les éléments par contenu et par canal ; la sémantique du tableau aide les lecteurs d’écran à comprendre les relations croisées.</p></header><div class="matrix-scroll"><table><caption>Cochez la combinaison de notifications à activer</caption><thead><tr><th scope="col">Contenu</th><th scope="col">Alerte instantanée</th><th scope="col">Résumé quotidien</th><th scope="col">Mode silencieux</th></tr></thead><tbody><tr><th scope="row">Inspiration pour le plan de voyage</th><td><label class="matrix-switch"><input type="checkbox" data-matrix-toggle checked aria-label="Idées de voyage, rappels instantanés" data-core-bridge="controls-selectors-toggle-matrix"><span aria-hidden="true"></span></label></td><td><label class="matrix-switch"><input type="checkbox" data-matrix-toggle aria-label="Inspiration pour le plan de voyage, résumé quotidien"><span aria-hidden="true"></span></label></td><td><label class="matrix-switch"><input type="checkbox" data-matrix-toggle aria-label="Inspiration pour le plan de voyage, mode silencieux"><span aria-hidden="true"></span></label></td></tr><tr><th scope="row">Journal de voyage</th><td><label class="matrix-switch"><input type="checkbox" data-matrix-toggle aria-label="Enregistrement du plan de voyage, rappels instantanés"><span aria-hidden="true"></span></label></td><td><label class="matrix-switch"><input type="checkbox" data-matrix-toggle aria-label="Carnet de voyage, récapitulatif quotidien"><span aria-hidden="true"></span></label></td><td><label class="matrix-switch"><input type="checkbox" data-matrix-toggle checked aria-label="Journal du plan de voyage, mode silencieux"><span aria-hidden="true"></span></label></td></tr><tr><th scope="row">Collaboration pour le plan de voyage</th><td><label class="matrix-switch"><input type="checkbox" data-matrix-toggle aria-label="Collaboration pour le plan de voyage, rappels instantanés"><span aria-hidden="true"></span></label></td><td><label class="matrix-switch"><input type="checkbox" data-matrix-toggle checked aria-label="Plan de voyage collaboratif, résumé quotidien"><span aria-hidden="true"></span></label></td><td><label class="matrix-switch"><input type="checkbox" data-matrix-toggle aria-label="Planification de voyage collaborative, mode silencieux"><span aria-hidden="true"></span></label></td></tr><tr><th scope="row">Progression du plan de voyage</th><td><label class="matrix-switch"><input type="checkbox" data-matrix-toggle checked aria-label="Progression du plan de voyage, rappel instantané"><span aria-hidden="true"></span></label></td><td><label class="matrix-switch"><input type="checkbox" data-matrix-toggle aria-label="Progression du plan de voyage, résumé quotidien"><span aria-hidden="true"></span></label></td><td><label class="matrix-switch"><input type="checkbox" data-matrix-toggle aria-label="progression du plan de voyage, mode silencieux"><span aria-hidden="true"></span></label></td></tr></tbody></table></div><footer><output id="matrixCount">Activé 4 éléments</output><input id="matrixClear" class="action" type="button" value="Tout désactivé"></footer></section><!-- 11DZ_CORE_END --></section></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>Plan de voyage FIELD INDEX</span></aside></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:controls-selectors-toggle-matrix */
const matrixToggles=[...document.querySelectorAll('[data-matrix-toggle]')];const matrixCount=document.querySelector('#matrixCount');function updateMatrix(){const count=matrixToggles.filter(input=>input.checked).length;matrixCount.textContent='Activé '+count+' élément';announce('Matrice de préférences activée '+count+' élément');}matrixToggles.forEach(input=>input.addEventListener('change',updateMatrix));document.querySelector('#matrixClear').addEventListener('click',()=>{matrixToggles.forEach(input=>{input.checked=false;});updateMatrix();});updateMatrix();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"controls-selectors-toggle-matrix","selector":"[data-core-bridge=\"controls-selectors-toggle-matrix\"]","mode":"toggle","key":" "};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Version de base '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.setAttribute('aria-keyshortcuts',workflowBridgeSpec.key===' '?'Space':workflowBridgeSpec.key);const workflowBridgeToggleKeyMatches=event=>event.key===workflowBridgeSpec.key||event.key==='Spacebar'||event.code==='Space';workflowBridgeControl.addEventListener('keydown',event=>{if(!workflowBridgeToggleKeyMatches(event))return;event.preventDefault();});workflowBridgeControl.addEventListener('keyup',event=>{if(!workflowBridgeToggleKeyMatches(event))return;event.preventDefault();workflowBridgeControl.click();});workflowBridgeControl.addEventListener("change",workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();workflowBridgeControl.click();const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowCompareCore=document.querySelector('#workflowCore');const workflowCompareWeight=document.querySelector('#workflowCompareWeight');const workflowCompareState={channel:'A',weight:50,frozen:false,snapshots:[]};function workflowCompareFingerprint(){const controls=[...workflowCompareCore.querySelectorAll('input,select,textarea')];const outputs=[...workflowCompareCore.querySelectorAll('output,[role="status"],strong')].map(node=>node.textContent.trim()).filter(Boolean);return {controlValues:controls.map(control=>control.type==='checkbox'||control.type==='radio'?control.checked:control.value),summary:outputs.slice(0,4).join(' / '),nodes:workflowCompareCore.querySelectorAll('*').length};}function workflowCompareDrive(){workflowCompareCore.dataset.compareChannel=workflowCompareState.channel;workflowCompareCore.style.setProperty('--compare-split',workflowCompareState.weight+'%');document.querySelector('#workflowCompareWeightValue').textContent=workflowCompareState.weight+' yuan';document.querySelector('#workflowCompareLive').textContent=workflowCompareState.channel+' Version · '+workflowCompareState.weight+' yuan'+(workflowCompareState.frozen?' · figé':'');announce('la route de voyage est en cours de consultation '+workflowCompareState.channel+' Version');}function workflowCompareCapture(source){const bridge=workflowBridgeActivate();const snapshot={...workflowCompareFingerprint(),channel:workflowCompareState.channel,weight:workflowCompareState.weight,source,bridge:bridge.summary};workflowCompareState.snapshots.push(snapshot);const item=document.createElement('li');item.innerHTML='<b>'+snapshot.channel+'</b><span>'+(snapshot.summary||snapshot.bridge)+'</span><small>'+snapshot.weight+' € · '+snapshot.bridge+'</small>';document.querySelector('#workflowCompareShelf').prepend(item);announce('échantillonné '+snapshot.channel+' Enregistrer et conserver l’itinéraire · '+bridge.summary);}document.querySelectorAll('[name="workflowChannel"]').forEach(input=>input.addEventListener('change',()=>{workflowCompareState.channel=input.value;workflowCompareDrive();}));workflowCompareWeight.addEventListener('input',()=>{workflowCompareState.weight=Number(workflowCompareWeight.value);workflowCompareDrive();});document.querySelector('#workflowCompareFreeze').addEventListener('change',event=>{workflowCompareState.frozen=event.currentTarget.checked;workflowCompareDrive();});document.querySelector('#workflowCompareCapture').addEventListener('click',()=>workflowCompareCapture('Échantillonnage du bouton'));workflowCompareCore.addEventListener('dblclick',()=>workflowCompareCapture('Double-clic sur la vue principale'));workflowCompareDrive();
workflowBridgeReset();
</script>
</body>
</html>