Flux d’activité en temps réel pour l’exploitation de la bibliothèque
Réalisez un flux d’activité en temps réel dans un contexte d’exploitation de bibliothèque : contenu réel, contrôles interactifs, retours d’état clairs et mise en page adaptée aux différentes tailles d’é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>Flux d’activité en temps réel pour l’exploitation de la bibliothèque</title>
<style>
:root { --ink:#17241d; --paper:#f3f0e7; --accent:#af4f45; --secondary:#9eb49f; --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:Avenir,"PingFang SC",sans-serif; background: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(1320px,calc(100% - 56px));margin:auto;padding:10vh 0}.mast{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:10vw;margin-block:6vh;align-items:start;margin-bottom:10vh}.mast h1{font-family:Avenir,"PingFang SC",sans-serif;font-weight:500;font-size:clamp(38px,8vw,88px);letter-spacing:-.055em;margin:0;line-height:.96}.eyebrow{display:block;margin-bottom:24px;font:600 10px/1 ui-monospace,monospace;letter-spacing:.22em}.intro{max-width:52ch;margin-top:28px;line-height:1.8}.scenario{font-size:13px;text-align:right}.demo{border-radius:1px;border-color:color-mix(in srgb,var(--ink) 35%,transparent);box-shadow:none;position:relative;min-height:420px;padding:clamp(28px,5vw,70px);background:transparent}@media(max-width:700px){.page{width:calc(100% - 24px);padding:36px 0}.mast{grid-template-columns:1fr;margin-bottom:30px}.scenario{text-align:left}.demo{padding:18px}}
.panel{padding:18px;border:2px solid var(--line);border-radius:26px;box-shadow:0 12px 0 color-mix(in srgb,var(--secondary) 35%,transparent)}.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.stack{display:grid;gap:12px}.action{padding:12px 20px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:0 5px 0 var(--ink);font-weight:800}.action:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.status{text-align:center;min-height:26px;margin-top:18px}.metric{text-align:center;font-size:clamp(34px,8vw,70px);font-weight:900}.muted{text-align:center;opacity:.7}.meter{height:14px;padding:2px;border:2px solid var(--ink);border-radius:999px}.meter>i{display:block;height:100%;border-radius:inherit;background:var(--secondary)}.chip{padding:7px 11px;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.composition-deck{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:color-mix(in srgb,var(--ink) 4%,var(--paper))}.deck-bar{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:12px 18px;color:var(--paper);background:var(--ink);font:700 12px/1 ui-monospace,monospace}.deck-lights{display:flex;gap:7px}.deck-lights i{width:10px;height:10px;border-radius:50%;background:var(--accent)}.deck-lights i:nth-child(2){background:var(--secondary)}.deck-lights i:nth-child(3){background:color-mix(in srgb,var(--paper) 55%,transparent)}.composition-deck .demo{border:0;border-radius:0;box-shadow:none}
.activity-feed-demo{display:grid;gap:16px;max-width:820px;margin:auto}.activity-feed-demo header{display:flex;justify-content:space-between;gap:18px;align-items:end}.activity-feed-demo h2{margin:.3em 0}.activity-feed-demo select{padding:9px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}#activityFeed{display:grid;max-height:380px;overflow:auto;padding:0;margin:0;list-style:none}#activityFeed li{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:start;padding:14px;border-top:1px solid var(--line)}#activityFeed i{display:grid;width:40px;height:40px;place-items:center;border-radius:50%;background:var(--secondary);font-style:normal}#activityFeed p{margin:.35em 0}#activityFeed time{font-size:12px;opacity:.65}@media(max-width:560px){.activity-feed-demo header{align-items:stretch;flex-direction:column}#activityFeed li{grid-template-columns:40px 1fr}#activityFeed time{grid-column:2}}.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="minimal" data-composition="control-deck">
<main class="page">
<header class="mast"><div><span class="eyebrow">minimal / Flux d’activité en temps réel / BEGINNER</span><h1>Flux d’activité en temps réel pour l’exploitation de la bibliothèque</h1><p class="intro">Réalisez un flux d’activité en temps réel dans un contexte d’exploitation de bibliothèque : contenu réel, contrôles interactifs, retours d’état clairs et mise en page adaptée aux différentes tailles d’écran.</p></div><span class="scenario">Fonctionnement de la bibliothèque</span></header>
<div class="composition-deck"><div class="deck-bar"><span>CONTROL DECK · 04</span><span>Flux d’activité en temps réel</span><span class="deck-lights" aria-hidden="true"><i></i><i></i><i></i></span></div><section class="demo" aria-label="Zone interactive du flux d’activité en temps réel des opérations de la bibliothèque"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Exploitation de la bibliothèque DISPATCH</span><h2>Poste de pilotage des tâches de la collection</h2><form id="workflowDispatchForm"><label>Type de tâche<select id="workflowDispatchKind"><option>Réapprovisionnement des emprunts</option><option>Traitement des rendez-vous</option><option>Inventaire des collections</option></select></label><label>Nombre de tâches en attente<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="24"><span>élément</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">Affecter des tâches</button></form><label>Tâche en cours<select id="workflowDispatchActive" aria-label="Basculer la tâche en cours"><option value="1">Réapprovisionnement des emprunts</option><option value="2">Traitement des rendez-vous</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:dashboards-admin-activity-feed --><div class="activity-feed-demo"><header><span class="eyebrow">LIVE ACTIVITY</span><h2>flux d’activités opérationnelles de la bibliothèque</h2><label>Type <select id="feedFilter"><option value="">tout</option><option value="system">Système</option><option value="person">Membre</option></select></label></header><ol id="activityFeed"><li data-feed-type="system"><i aria-hidden="true">série</i><div><b>Collaboration des opérations de bibliothèque</b><p>Le système a automatiquement enregistré les changements d’état.</p></div><time>1 minutes auparavant</time></li><li data-feed-type="person"><i aria-hidden="true">personne</i><div><b>Avancement des opérations de bibliothèque</b><p>Un membre a effectué une mise à jour collaborative.</p></div><time>2 il y a quelques minutes</time></li><li data-feed-type="system"><i aria-hidden="true">série</i><div><b>Rappels d’exploitation de la bibliothèque</b><p>Le système a automatiquement enregistré les changements d’état.</p></div><time>Il y a 3 minutes</time></li><li data-feed-type="person"><i aria-hidden="true">personne</i><div><b>Favoris des opérations de la bibliothèque</b><p>Un membre a effectué une mise à jour collaborative.</p></div><time>il y a 4 minutes</time></li><li data-feed-type="system"><i aria-hidden="true">série</i><div><b>Vue d’ensemble des opérations de la bibliothèque</b><p>Le système a automatiquement enregistré les changements d’état.</p></div><time>5 minutes plus tôt</time></li><li data-feed-type="person"><i aria-hidden="true">personne</i><div><b>Plan d’exploitation de la bibliothèque</b><p>Un membre a effectué une mise à jour collaborative.</p></div><time>il y a 6 minutes</time></li><li data-feed-type="system"><i aria-hidden="true">série</i><div><b>Inspiration pour les opérations des bibliothèques</b><p>Le système a automatiquement enregistré les changements d’état.</p></div><time>il y a 7 minutes</time></li></ol><button id="prependActivity" class="action" type="button" data-core-bridge="dashboards-admin-activity-feed">Simuler les nouvelles activités</button></div><!-- 11DZ_CORE_END --></section></div><p id="status" class="status" role="status" aria-live="polite"></p></section></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:dashboards-admin-activity-feed */
const feedFilter=document.querySelector('#feedFilter');function filterFeed(){const type=feedFilter.value;const items=[...document.querySelectorAll('#activityFeed li')];items.forEach(item=>{item.hidden=Boolean(type&&item.dataset.feedType!==type);});announce('Affichage du flux d’activité '+items.filter(item=>!item.hidden).length+' élément');}feedFilter.addEventListener('change',filterFeed);document.querySelector('#prependActivity').addEventListener('click',()=>{const item=document.createElement('li');item.dataset.feedType='system';item.innerHTML='<i aria-hidden="true">Nouveau</i><div><b>Mises à jour en temps réel de l’exploitation de la bibliothèque</b><p>Flux locaux de simulation ajoutés à l’instant.</p></div><time>À l’instant</time>';document.querySelector('#activityFeed').prepend(item);filterFeed();});
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"dashboards-admin-activity-feed","selector":"[data-core-bridge=\"dashboards-admin-activity-feed\"]","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":"Réapprovisionnement des emprunts","amount":12,"priority":"normal","touches":0}],["2",{"label":"Traitement des rendez-vous","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+' élément · '+bridge.summary;announce('Tâche actuelle de la collection :'+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+' élément · '+workflowBridgeSummary();});workflowDispatchRender('1',false);
workflowBridgeReset();
</script>
</body>
</html>