Panneau d’actions en bas de la file média
Dans le contexte d’une file média, réalisez un panneau d’actions en bas de page : il comprend du contenu réel, des contrôles utilisables, un retour d’état clair et une mise en page adaptative selon la taille de l’écran.
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>Panneau d’actions en bas de la file média</title>
<style>
:root { --ink:#ecf7f3; --paper:#071310; --accent:#d45f3e; --secondary:#8fc4ad; --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:"Trebuchet MS","PingFang SC",sans-serif; background:radial-gradient(circle at 20% 10%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 35%),radial-gradient(circle at 85% 90%,color-mix(in srgb,var(--secondary) 20%,transparent),transparent 38%),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(1160px,calc(100% - 30px));margin:auto;padding:60px 0}.mast{display:flex;justify-content:space-between;border-left:4px solid var(--accent);padding-left:22px;gap:28px;align-items:center;margin-bottom:34px}.mast h1{font-family:"Trebuchet MS","PingFang SC",sans-serif;font-weight:900;font-size:clamp(42px,9vw,94px);text-shadow:0 0 28px color-mix(in srgb,var(--accent) 55%,transparent);margin:0;line-height:.92}.eyebrow{display:block;margin-bottom:14px;color:var(--accent);font:900 11px/1 ui-monospace,monospace;letter-spacing:.2em}.intro{max-width:680px;color:color-mix(in srgb,var(--ink) 68%,transparent);line-height:1.7}.scenario{padding:10px 16px;border:1px solid var(--secondary);border-radius:4px;box-shadow:0 0 20px color-mix(in srgb,var(--secondary) 30%,transparent)}.demo{border-color:color-mix(in srgb,var(--accent) 55%,transparent);border-radius:24px;box-shadow:inset 0 0 40px color-mix(in srgb,var(--accent) 8%,transparent),0 0 60px color-mix(in srgb,var(--secondary) 12%,transparent);position:relative;min-height:410px;overflow:hidden;padding:clamp(24px,4vw,50px);background:color-mix(in srgb,var(--paper) 86%,transparent)}@media(max-width:700px){.mast{display:grid}.page{padding:22px 0}.demo{padding:16px}}
.panel{padding:26px;border:1px solid var(--line);border-radius:2px;background:var(--paper)}.stack{display:grid;gap:28px}.row{display:flex;gap:20px;flex-wrap:wrap}.action{padding:9px 2px;border:0;border-bottom:2px solid var(--line);background:transparent}.action.primary,.action.is-active{border-color:var(--accent);color:var(--accent)}.muted{font-size:14px;line-height:1.9}.status{min-height:20px;margin-top:28px;font-size:13px}.metric{font-size:clamp(40px,9vw,88px);font-weight:500;letter-spacing:-.06em}.meter{height:2px;background:var(--line)}.meter>i{display:block;height:100%;background:var(--accent)}.chip{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.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}
.phone-preview{display:grid;grid-template-rows:auto 1fr auto;min-height:420px;max-width:640px;margin:auto;overflow:hidden;border:1px solid var(--line);border-radius:32px;background:var(--paper);box-shadow:var(--shadow)}.phone-preview>header,.phone-preview>footer{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);font-weight:900}.phone-preview>header button{width:44px;height:40px;border:1px solid var(--line);border-radius:999px;background:transparent}.phone-preview>main{display:grid;align-content:center;padding:clamp(28px,7vw,70px)}.phone-preview h2{margin:.2em 0;font-size:clamp(38px,8vw,78px)}.phone-preview>footer{justify-content:flex-end;border-top:1px solid var(--line);border-bottom:0}.phone-preview>footer button{padding:10px 15px;border:1px solid var(--line);border-radius:9px;background:transparent}.mobile-sheet-demo dialog{width:min(620px,calc(100% - 16px));max-height:calc(100dvh - 16px);margin:auto auto 8px;padding:0;border:0;border-radius:28px 28px 18px 18px;color:var(--ink);background:var(--paper);box-shadow:0 -25px 80px #0005}.mobile-sheet-demo dialog::backdrop{background:#1119}.mobile-sheet-demo form{display:grid;gap:12px;padding:10px 18px 18px}.sheet-handle{width:62px;height:5px;margin:2px auto 4px;border-radius:999px;background:var(--line)}.mobile-sheet-demo dialog header{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:8px}.mobile-sheet-demo dialog h2{margin:.2em 0}.mobile-sheet-demo dialog header>button{width:42px;height:42px;border:0;border-radius:50%;background:var(--line);font-size:22px}.sheet-actions{display:grid;overflow:hidden;border:1px solid var(--line);border-radius:16px}.sheet-actions>button{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:15px;border:0;background:transparent;text-align:left}.sheet-actions>button+button{border-top:1px solid var(--line)}.sheet-actions>button>span:first-child{display:grid;width:42px;height:42px;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--secondary) 18%,transparent);font-size:22px}.sheet-actions small{display:block;margin-top:4px;opacity:.62}.sheet-actions i{font-size:25px}.sheet-cancel{padding:13px;border:0;border-radius:14px;background:color-mix(in srgb,var(--ink) 8%,transparent);font-weight:900}.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="dark-neon" data-composition="gallery-frame">
<main class="page">
<header class="mast"><div><span class="eyebrow">dark-neon / Panneau d’actions inférieur / INTERMEDIATE</span><h1>Panneau d’actions en bas de la file média</h1><p class="intro">Dans le contexte d’une file média, réalisez un panneau d’actions en bas de page : il comprend du contenu réel, des contrôles utilisables, un retour d’état clair et une mise en page adaptative selon la taille de l’écran.</p></div><span class="scenario">File média</span></header>
<figure class="composition-gallery"><section class="demo" aria-label="Zone interactive du panneau d’actions inférieur de la file multimédia"><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 · panneau d’ouverture de la file multimédia</label><label><input type="radio" name="workflowChannel" value="B">B · file multimédia en cours de traitement</label></fieldset><label>Charge de tâches en attente pondérée<input id="workflowCompareWeight" type="range" min="10" max="90" value="50"><output id="workflowCompareWeightValue">élément 50</output></label><label><input id="workflowCompareFreeze" type="checkbox">Geler la version actuelle</label><button id="workflowCompareCapture" class="action primary" type="button">Prélever un échantillon et terminer le traitement</button><ol id="workflowCompareShelf" aria-label="Enregistrement de version"></ol></form><section class="compare-stage"><header><span class="eyebrow">file d’attente média COMPARE</span><h2>Comparaison de deux versions de la file média</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:overlays-feedback-mobile-sheet --><section class="mobile-sheet-demo"><div class="phone-preview"><header><span>File média</span><button id="mobileSheetOpen" type="button" aria-haspopup="dialog" data-core-bridge="overlays-feedback-mobile-sheet">•••<span class="visually-hidden">Ouvrir plus d’actions</span></button></header><main><span class="eyebrow">MOBILE SHEET</span><h2>Aperçu de la file multimédia</h2><p>Le panneau d’actions en bas se trouve près de la zone accessible au pouce, tout en conservant un contenu centré à largeur fixe sur ordinateur.</p></main><footer><button type="button">Retour</button><button type="button">Continuer</button></footer></div><dialog id="mobileSheet" aria-labelledby="mobileSheetTitle"><form method="dialog"><div class="sheet-handle" aria-hidden="true"></div><header><div><span class="eyebrow">MORE ACTIONS</span><h2 id="mobileSheetTitle">Choisir l’étape suivante</h2></div><button value="cancel" aria-label="Fermer le panneau d’actions inférieur">×</button></header><div class="sheet-actions"><button value="Ajouter aux favoris"><span aria-hidden="true">☆</span><span><strong>Ajouter aux favoris</strong><small>Planification de la file d’attente média</small></span><i aria-hidden="true">›</i></button><button value="Partager le lien"><span aria-hidden="true">↗</span><span><strong>Partager le lien</strong><small>Inspiration de file média</small></span><i aria-hidden="true">›</i></button><button value="Copie enregistrée"><span aria-hidden="true">□</span><span><strong>Copie enregistrée</strong><small>Dossier de file multimédia</small></span><i aria-hidden="true">›</i></button></div><button class="sheet-cancel" value="cancel">Annuler</button></form></dialog></section><!-- 11DZ_CORE_END --></section></section></div><p id="status" class="status" role="status" aria-live="polite"></p></section><figcaption class="gallery-caption"><strong>File média / 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-mobile-sheet */
const mobileSheet=document.querySelector('#mobileSheet');document.querySelector('#mobileSheetOpen').addEventListener('click',()=>{mobileSheet.returnValue='cancel';mobileSheet.showModal();});mobileSheet.addEventListener('click',event=>{if(event.target===mobileSheet)mobileSheet.close('cancel');});mobileSheet.addEventListener('close',()=>announce(mobileSheet.returnValue==='cancel'?'Le panneau d’actions inférieur est fermé':'Sélectionné '+mobileSheet.returnValue));
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"overlays-feedback-mobile-sheet","selector":"[data-core-bridge=\"overlays-feedback-mobile-sheet\"]","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 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+' élément';document.querySelector('#workflowCompareLive').textContent=workflowCompareState.channel+' Version · '+workflowCompareState.weight+' élément'+(workflowCompareState.frozen?' · figé':'');announce('La file multimédia 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+' élément · '+snapshot.bridge+'</small>';document.querySelector('#workflowCompareShelf').prepend(item);announce('échantillonné '+snapshot.channel+' Version et traitement terminés · '+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>