Page d’agenda événementiel pour marque de thé
Créer une page d’agenda d’événement dans un contexte de marque de thé : contenu réel, contrôles actionnables, 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>Page d’agenda événementiel pour marque de thé</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:"Songti SC","Noto Serif SC",Georgia,serif; background:linear-gradient(90deg,transparent 49.7%,color-mix(in srgb,var(--ink) 7%,transparent) 50%,transparent 50.3%),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(1180px,calc(100% - 40px));margin:auto;padding:7vw 0}.mast{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(180px,.4fr);gap:5vw;align-items:end;margin-bottom:38px}.mast h1{font-family:"Songti SC",Georgia,serif;font-weight:800;font-size:clamp(42px,9vw,92px);max-width:920px;margin:0;line-height:.94}.eyebrow{display:block;margin-bottom:14px;color:var(--accent);font:800 11px/1 ui-monospace,monospace;letter-spacing:.24em}.intro{max-width:58ch;line-height:1.9}.scenario{align-self:start;padding-top:10px;border-top:1px solid var(--ink);font-style:italic}.demo{border-radius:0;border-width:2px;box-shadow:14px 14px 0 color-mix(in srgb,var(--ink) 18%,transparent);position:relative;overflow:hidden;min-height:420px;padding:clamp(22px,4vw,48px);background:var(--paper)}@media(max-width:700px){.page{width:calc(100% - 22px);padding:26px 0}.mast{grid-template-columns:1fr}.demo{min-height:340px;padding:18px}}
.panel{padding:20px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:18px;background:color-mix(in srgb,var(--paper) 88%,transparent);box-shadow:inset 0 0 24px color-mix(in srgb,var(--accent) 7%,transparent)}.stack{display:grid;gap:16px}.row{display:flex;flex-wrap:wrap;gap:9px}.action{padding:11px 16px;border:1px solid var(--accent);border-radius:6px;color:var(--accent);background:transparent;box-shadow:0 0 14px color-mix(in srgb,var(--accent) 10%,transparent)}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.status{min-height:24px;color:var(--secondary);text-shadow:0 0 10px currentColor}.metric{font-size:clamp(30px,7vw,64px);font-weight:900;text-shadow:0 0 18px color-mix(in srgb,var(--accent) 40%,transparent)}.muted{opacity:.7}.chip{padding:6px 9px;border:1px solid var(--secondary);border-radius:4px}.meter{height:7px;background:color-mix(in srgb,var(--accent) 15%,transparent)}.meter>i{display:block;height:100%;box-shadow:0 0 12px var(--accent);background:var(--accent)}
.composition-studio{display:grid;gap:14px}.studio-ruler{display:flex;justify-content:space-between;padding:0 4px;color:color-mix(in srgb,var(--ink) 55%,transparent);font:700 11px/1 ui-monospace,monospace;letter-spacing:.14em}.studio-ruler::before{content:"01 / WORKING PROTOTYPE"}.studio-ruler::after{content:"360 · 768 · 1440"}.composition-studio .demo::after{content:"";position:absolute;right:18px;bottom:18px;width:24px;height:24px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);pointer-events:none}
.agenda-demo{display:grid;gap:18px}.agenda-demo header{display:flex;justify-content:space-between;gap:18px;align-items:end}.agenda-demo h2{margin:.3em 0}.agenda-list{display:grid;padding:0;margin:0;list-style:none}.agenda-list li{display:grid;grid-template-columns:80px 1fr auto;gap:18px;align-items:center;padding:18px 4px;border-top:1px solid var(--line)}.agenda-list time{font:900 18px/1 ui-monospace,monospace}.agenda-list h3{margin:.45em 0}.agenda-list li>button{padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:transparent}.agenda-list li>button[aria-pressed="true"]{color:var(--paper);background:var(--accent)}@media(max-width:620px){.agenda-demo header{align-items:stretch;flex-direction:column}.agenda-list li{grid-template-columns:60px 1fr}.agenda-list li>button{grid-column:2;justify-self:start}}.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="editorial" data-composition="studio">
<main class="page">
<header class="mast"><div><span class="eyebrow">éditorial / page d’ordre du jour de l’événement / ADVANCED</span><h1>Page d’agenda événementiel pour marque de thé</h1><p class="intro">Créer une page d’agenda d’événement dans un contexte de marque de thé : contenu réel, contrôles actionnables, retours d’état clairs et mise en page adaptative selon la taille.</p></div><span class="scenario">marque de thé</span></header>
<div class="composition-studio"><div class="studio-ruler" aria-hidden="true"></div><section class="demo" aria-label="Zone interactive de la page d’agenda d’événement pour une marque de thé"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Marque de thé DISPATCH</span><h2>Salle de répartition pour le lancement de produits de thé</h2><form id="workflowDispatchForm"><label>Type de tâche<select id="workflowDispatchKind"><option>Série de thés infusés à froid</option><option>Thé en feuilles</option><option>Série des saisons solaires</option></select></label><label>Stock de lancement<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="39"><span>boîte</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">Accéder à la publication</button></form><label>Tâche en cours<select id="workflowDispatchActive" aria-label="Basculer la tâche en cours"><option value="1">Série de thés infusés à froid</option><option value="2">Thé en feuilles</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:marketing-content-pages-event-agenda --><div class="agenda-demo"><header><span class="eyebrow">EVENT AGENDA</span><h2>Agenda de marque de thé</h2><div class="row"><button class="action" type="button" data-agenda-track="0" aria-pressed="true" data-core-bridge="marketing-content-pages-event-agenda">tout</button><button class="action" type="button" data-agenda-track="1" aria-pressed="false">Scène principale</button><button class="action" type="button" data-agenda-track="2" aria-pressed="false">Atelier</button></div></header><ol id="agendaList" class="agenda-list"><li data-track="1"><time>09:00</time><div><span class="chip">Scène principale</span><h3>Progression de la marque de thé</h3><p>30 minutes · participation ouverte</p></div><button type="button" aria-pressed="false">Ajouter à l’agenda</button></li><li data-track="2"><time>10:00</time><div><span class="chip">Atelier</span><h3>Rappel de la marque de thé</h3><p>45 min · entrée anticipée requise</p></div><button type="button" aria-pressed="false">Ajouter à l’agenda</button></li><li data-track="1"><time>11:00</time><div><span class="chip">Scène principale</span><h3>collection de marque de thé</h3><p>30 minutes · participation ouverte</p></div><button type="button" aria-pressed="false">Ajouter à l’agenda</button></li><li data-track="2"><time>12:00</time><div><span class="chip">Atelier</span><h3>Aperçu de la marque de thé</h3><p>45 min · entrée anticipée requise</p></div><button type="button" aria-pressed="false">Ajouter à l’agenda</button></li><li data-track="1"><time>13:00</time><div><span class="chip">Scène principale</span><h3>Plan de la marque de boissons au thé</h3><p>30 minutes · participation ouverte</p></div><button type="button" aria-pressed="false">Ajouter à l’agenda</button></li><li data-track="2"><time>14:00</time><div><span class="chip">Atelier</span><h3>Inspiration pour une marque de thé</h3><p>45 min · entrée anticipée requise</p></div><button type="button" aria-pressed="false">Ajouter à l’agenda</button></li></ol></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:marketing-content-pages-event-agenda */
const agendaItems=[...document.querySelectorAll('#agendaList li')];document.querySelectorAll('[data-agenda-track]').forEach(button=>button.addEventListener('click',()=>{document.querySelectorAll('[data-agenda-track]').forEach(item=>item.setAttribute('aria-pressed',String(item===button)));const track=button.dataset.agendaTrack;agendaItems.forEach(item=>{item.hidden=track!=='0'&&item.dataset.track!==track;});announce('Afficher l’agenda '+agendaItems.filter(item=>!item.hidden).length+' activité');}));document.querySelectorAll('.agenda-list li>button').forEach(button=>button.addEventListener('click',()=>{const added=button.getAttribute('aria-pressed')!=='true';button.setAttribute('aria-pressed',String(added));button.textContent=added?'Ajouté':'Ajouter à l’agenda';announce(added?'L’activité a été ajoutée à l’agenda local':'L’événement a été retiré de l’agenda local');}));
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"marketing-content-pages-event-agenda","selector":"[data-core-bridge=\"marketing-content-pages-event-agenda\"]","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":"Série de thés infusés à froid","amount":12,"priority":"normal","touches":0}],["2",{"label":"Thé en feuilles","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+' Boîte · '+bridge.summary;announce('Tâches en cours pour le lancement du thé :'+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+' Boîte · '+workflowBridgeSummary();});workflowDispatchRender('1',false);
workflowBridgeReset();
</script>
</body>
</html>