Pages scénarisées pour le marketing et le contenu
Page de présentation des fonctionnalités du camp d’apprentissage

Réalisez une page de présentation des fonctionnalités dans un contexte de camp d’apprentissage : contenu réel, contrôles interactifs, retours d’état clairs et disposition adaptée aux différentes tailles.
Pages scénarisées pour le marketing et le contenuPage d’aperçu des fonctionnalitésHTMLCSSJavaScript
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 de présentation des fonctionnalités du camp d’apprentissage</title>
  <style>
    :root { --ink:#3a2419; --paper:#fbf3df; --accent:#c66a2d; --secondary:#b5c88d; --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:"Kaiti SC",STKaiti,"Songti SC",serif; background:radial-gradient(circle at 12% 18%,color-mix(in srgb,var(--accent) 12%,transparent) 0 1px,transparent 2px),var(--paper);background-size:19px 19px; }
    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(980px,calc(100% - 32px));margin:auto;padding:72px 0 92px}.mast{display:grid;grid-template-columns:1fr auto;transform:rotate(-.25deg);gap:32px;align-items:center;margin-bottom:46px}.mast h1{font-family:"Kaiti SC",STKaiti,serif;font-weight:700;font-size:clamp(40px,8vw,84px);letter-spacing:.02em;margin:0;line-height:1.12}.intro{max-width:650px;margin-top:18px;line-height:2}.scenario{padding:12px;border:2px solid var(--accent);color:var(--accent);transform:rotate(3deg)}.eyebrow{display:block;margin-bottom:9px;color:var(--accent);letter-spacing:.18em}.demo{border-radius:2px;transform:rotate(.12deg);box-shadow:0 30px 70px color-mix(in srgb,var(--ink) 18%,transparent);position:relative;min-height:430px;overflow:hidden;padding:clamp(28px,6vw,66px);background:color-mix(in srgb,var(--paper) 92%,#fff)}@media(max-width:700px){.page{width:calc(100% - 20px);padding:28px 0}.mast{grid-template-columns:1fr}.scenario{justify-self:start}.demo{padding:20px}}
    .panel{padding:20px;border:1px dashed var(--secondary);border-radius:8px;background:color-mix(in srgb,var(--paper) 92%,#000)}.stack{display:grid;gap:10px}.row{display:flex;flex-wrap:wrap;gap:7px}.action{min-height:40px;padding:8px 12px;border:1px solid var(--secondary);border-radius:5px;color:var(--ink);background:transparent;font:700 12px/1 ui-monospace,monospace}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.status{min-height:22px;color:var(--secondary);font:700 12px/1.5 ui-monospace,monospace}.status::before{content:"status: "}.metric{font:800 clamp(28px,6vw,56px)/1 ui-monospace,monospace}.muted{opacity:.64;font-family:ui-monospace,monospace}.meter{height:8px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 10px)}.meter>i{display:block;height:100%;background:var(--secondary)}.chip{padding:4px 7px;border:1px solid var(--secondary);font:700 10px/1 ui-monospace,monospace}
    .composition-split{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start}.split-note{position:sticky;top:20px;display:grid;gap:14px;padding:18px 12px;border-block:3px double var(--accent);font-size:13px;line-height:1.65}.split-note b{font:900 12px/1 ui-monospace,monospace;letter-spacing:.12em}.split-note span{writing-mode:vertical-rl;min-height:120px;color:color-mix(in srgb,var(--ink) 60%,transparent)}.composition-split .demo{min-width:0}@media(max-width:900px){.composition-split{grid-template-columns:1fr}.split-note{position:static;grid-template-columns:auto 1fr}.split-note span{writing-mode:horizontal-tb;min-height:0}}
    .feature-tour-demo{display:grid;gap:14px}.feature-tour-demo nav{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.feature-tour-demo nav button{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;text-align:left;background:var(--paper)}.feature-tour-demo nav button[aria-current="step"]{color:var(--paper);background:var(--ink)}.feature-tour-demo nav b{display:grid;width:28px;height:28px;place-items:center;border:1px solid currentColor;border-radius:50%}#tourStage{display:grid;grid-template-columns:1fr 220px;min-height:360px;overflow:hidden;border:1px solid var(--line);border-radius:24px}#tourStage>div{display:grid;align-content:center;padding:clamp(28px,6vw,68px)}#tourStage h2{font-size:clamp(36px,7vw,76px)}#tourStage aside{display:grid;align-content:space-between;padding:28px;background:var(--accent);color:var(--paper)}#tourStage aside strong{font:900 80px/1 ui-monospace,monospace}@media(max-width:680px){.feature-tour-demo nav{grid-template-columns:1fr 1fr}.feature-tour-demo nav span{font-size:12px}#tourStage{grid-template-columns:1fr}#tourStage aside{min-height:150px}}.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="paper" data-composition="split-note">
  <main class="page">
    <header class="mast"><div><span class="eyebrow">paper / Page de présentation des fonctionnalités / BEGINNER</span><h1>Page de présentation des fonctionnalités du camp d’apprentissage</h1><p class="intro">Réalisez une page de présentation des fonctionnalités dans un contexte de camp d’apprentissage : contenu réel, contrôles interactifs, retours d’état clairs et disposition adaptée aux différentes tailles.</p></div><span class="scenario">Programme d’apprentissage</span></header>
    <div class="composition-split"><aside class="split-note"><b>CASE 02</b><span>Maîtriser la structure sémantique, la mise en page responsive, les interactions au clavier et la synchronisation d’état d’une page de présentation des fonctionnalités.</span></aside><section class="demo" aria-label="Zone interactive de la page de présentation des fonctionnalités du camp d’apprentissage"><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 · stage d’initiation</label><label><input type="radio" name="workflowChannel" value="B">B · Camp de projet</label></fieldset><label>Poids du cycle d’apprentissage<input id="workflowCompareWeight" type="range" min="10" max="90" value="50"><output id="workflowCompareWeightValue">50 jour</output></label><label><input id="workflowCompareFreeze" type="checkbox">Geler la version actuelle</label><button id="workflowCompareCapture" class="action primary" type="button">Échantillonner et sélectionner un cours</button><ol id="workflowCompareShelf" aria-label="Enregistrement de version"></ol></form><section class="compare-stage"><header><span class="eyebrow">Camp de formation COMPARE</span><h2>Comparaison de cours en double version</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:marketing-content-pages-feature-tour --><div class="feature-tour-demo"><nav aria-label="Présentation des fonctionnalités"><button type="button" data-tour-step="0" aria-current="step" data-core-bridge="marketing-content-pages-feature-tour"><b>1</b><span>Journal du camp d’apprentissage</span></button><button type="button" data-tour-step="1"><b>2</b><span>Collaboration du camp d’apprentissage</span></button><button type="button" data-tour-step="2"><b>3</b><span>Progression du camp d’apprentissage</span></button><button type="button" data-tour-step="3"><b>4</b><span>Rappel du camp d’apprentissage</span></button></nav><section id="tourStage"><div><span class="eyebrow">FEATURE TOUR</span><h2>Journal du camp d’apprentissage</h2><p>Chaque étape met en avant une capacité précise, son mode d’utilisation et les bénéfices pour l’utilisateur.</p><ul><li>Aucune dépendance supplémentaire requise</li><li>Reste clair sur toutes les tailles</li><li>Clavier entièrement utilisable</li></ul></div><aside><strong id="tourNumber">01</strong><span>Programme d’apprentissage</span></aside></section></div><!-- 11DZ_CORE_END --></section></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-feature-tour */
const tourFeatures=["Journal du camp d’apprentissage","Collaboration du camp d’apprentissage","Progression du camp d’apprentissage","Rappel du camp d’apprentissage"];const tourButtons=[...document.querySelectorAll('[data-tour-step]')];tourButtons.forEach((button,index)=>button.addEventListener('click',()=>{tourButtons.forEach(item=>item.removeAttribute('aria-current'));button.setAttribute('aria-current','step');document.querySelector('#tourStage h2').textContent=tourFeatures[index];document.querySelector('#tourNumber').textContent=String(index+1).padStart(2,'0');announce('Guide de la '+(index+1)+' Étape :'+tourFeatures[index]);}));
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"marketing-content-pages-feature-tour","selector":"[data-core-bridge=\"marketing-content-pages-feature-tour\"]","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+' jour';document.querySelector('#workflowCompareLive').textContent=workflowCompareState.channel+' Version · '+workflowCompareState.weight+' jour'+(workflowCompareState.frozen?' · figé':'');announce('Comparaison des cours 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+' jour · '+snapshot.bridge+'</small>';document.querySelector('#workflowCompareShelf').prepend(item);announce('échantillonné '+snapshot.channel+' version et choisissez un cours · '+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>