Capacités des médias et des appareils du navigateur
Panneau de langue et de fuseau horaire du laboratoire d’appareils

Dans un contexte de laboratoire d’appareils, réalisez un panneau de fuseaux horaires linguistiques : il comprend du contenu réel, des contrôles utilisables, un retour d’état clair et une mise en page adaptée à différentes tailles.
Capacités des médias et des appareils du navigateurPanneau de fuseau horaire linguistiqueHTMLCSSBrowser API
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 de langue et de fuseau horaire du laboratoire d’appareils</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}}
    .panel{padding:18px;border:3px solid var(--ink);background:var(--paper);box-shadow:8px 8px 0 var(--ink)}.stack{display:grid;gap:12px}.row{display:flex;flex-wrap:wrap;gap:8px}.action{min-height:42px;padding:8px 13px;border:3px solid var(--ink);background:var(--paper);font-weight:900}.action.primary,.action.is-active{color:var(--paper);background:var(--ink)}.status{min-height:24px;padding:8px;color:var(--paper);background:var(--ink);font-weight:900}.metric{font-size:clamp(34px,8vw,76px);font-weight:900;letter-spacing:-.08em}.muted{font-weight:600}.chip{padding:5px 8px;border:2px solid var(--ink);font-weight:900}.meter{height:14px;border:3px solid var(--ink)}.meter>i{display:block;height:100%;background:var(--ink)}
    .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}
    .locale-workbench{display:grid;grid-template-columns:minmax(220px,.6fr) minmax(280px,.8fr) minmax(0,1fr);gap:14px}.locale-workbench>header{padding:24px;border:1px solid var(--line);background:var(--paper)}.locale-workbench h2{margin:.25em 0;font-size:clamp(30px,5vw,52px)}.locale-workbench>form{display:grid;align-content:start;gap:13px;padding:24px;border:1px solid var(--line)}.locale-workbench form label{display:grid;gap:6px}.locale-workbench select,.locale-workbench input{width:100%;padding:10px;border:1px solid var(--line);background:transparent}.locale-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.locale-workbench>section{display:grid;gap:16px;padding:24px;color:var(--paper);background:var(--ink)}.locale-clock{display:grid;gap:8px;padding-bottom:18px;border-bottom:1px solid currentColor}.locale-clock output{font:900 clamp(34px,7vw,70px)/1 ui-monospace,monospace}.locale-clock small{color:#ffffffaa;font:700 12px/1.4 ui-monospace,monospace}.locale-workbench section dl{display:grid;grid-template-columns:1fr 1fr;gap:9px}.locale-workbench section dl div{padding:12px;border:1px solid #ffffff44}.locale-workbench dd{margin:6px 0 0;font-weight:900}@media(max-width:1024px){.locale-workbench{grid-template-columns:1fr}}@media(max-width:760px){.locale-actions,.locale-workbench section dl{grid-template-columns:1fr}}.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="monochrome" data-composition="studio">
  <main class="page">
    <header class="mast"><div><span class="eyebrow">monochrome / Panneau de fuseau horaire linguistique / ADVANCED</span><h1>Panneau de langue et de fuseau horaire du laboratoire d’appareils</h1><p class="intro">Dans un contexte de laboratoire d’appareils, réalisez un panneau de fuseaux horaires linguistiques : il comprend du contenu réel, des contrôles utilisables, un retour d’état clair et une mise en page adaptée à différentes tailles.</p></div><span class="scenario">Laboratoire d’appareils</span></header>
    <div class="composition-studio"><div class="studio-ruler" aria-hidden="true"></div><section class="demo" aria-label="Zone interactive du panneau de langue et de fuseau horaire du laboratoire d’appareils"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Laboratoire d’appareils DISPATCH</span><h2>Console de contrôle des appareils</h2><form id="workflowDispatchForm"><label>Type de tâche<select id="workflowDispatchKind"><option>capacité de l’écran</option><option>Capacité de saisie</option><option>Capacité de stockage</option></select></label><label>éléments à vérifier<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="45"><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">Commencer la vérification</button></form><label>Tâche en cours<select id="workflowDispatchActive" aria-label="Basculer la tâche en cours"><option value="1">capacité de l’écran</option><option value="2">Capacité de saisie</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:browser-media-device-locale-clock --><div class="locale-workbench"><header><span class="eyebrow">INTL WORKBENCH</span><h2>Tableau des fuseaux horaires et langues du laboratoire d’appareils</h2><p id="localeNative">Lecture de la langue du navigateur</p></header><form id="localeControls"><label>Langue d’affichage<select id="localeLanguage" data-core-bridge="browser-media-device-locale-clock"><option>zh-CN</option><option>en-US</option><option>ja-JP</option><option>de-DE</option></select></label><label>Fuseau horaire cible<select id="localeZone"><option>Asia/Shanghai</option><option>UTC</option><option>America/New_York</option><option>Europe/Paris</option></select></label><label>Montant d’exemple<input id="localeAmount" type="number" min="0" step="10" value="1280"></label><div class="locale-actions"><button class="action primary" type="submit">Format d’application</button><button id="localeNow" class="action" type="button">Utiliser l’heure actuelle</button></div></form><section><div class="locale-clock"><span>Heure locale</span><output id="localeClock">—</output><small id="localeMode">Heure de référence</small></div><dl><div><dt>Date</dt><dd id="localeDate">—</dd></div><div><dt>Montant</dt><dd id="localeMoney">—</dd></div><div><dt>Numérique</dt><dd id="localeNumber">—</dd></div><div><dt>Temps relatif</dt><dd id="localeRelative">—</dd></div></dl></section></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:browser-media-device-locale-clock */
const localeLanguage=document.querySelector('#localeLanguage');const localeZone=document.querySelector('#localeZone');const localeAmount=document.querySelector('#localeAmount');const localeReferenceTime=new Date('2026-03-18T09:30:45Z');const localeState={locale:localeLanguage.value,zone:localeZone.value,amount:Number(localeAmount.value),live:false};function localeCurrencyFor(locale){return locale==='ja-JP'?'JPY':locale==='en-US'?'USD':'CNY';}function localeCurrentTime(){return localeState.live?new Date():localeReferenceTime;}function localeModeLabel(locale,zone,now){const baseLabel=localeState.live?'Heure actuelle':'Heure de référence';const timeLabel=new Intl.DateTimeFormat(locale,{timeZone:zone,timeStyle:'medium',hour12:false}).format(now);return baseLabel+' · '+timeLabel;}function renderLocale(){const now=localeCurrentTime();const locale=localeState.locale;const zone=localeState.zone;document.querySelector('#localeNative').textContent='Langue du navigateur '+navigator.language+' · Fuseau horaire du système '+Intl.DateTimeFormat().resolvedOptions().timeZone+' · Afficher '+locale;document.querySelector('#localeClock').textContent=new Intl.DateTimeFormat(locale,{timeZone:zone,timeStyle:'medium',hour12:false}).format(now);document.querySelector('#localeDate').textContent=new Intl.DateTimeFormat(locale,{timeZone:zone,dateStyle:'full'}).format(now);document.querySelector('#localeMoney').textContent=new Intl.NumberFormat(locale,{style:'currency',currency:localeCurrencyFor(locale)}).format(localeState.amount);document.querySelector('#localeNumber').textContent=new Intl.NumberFormat(locale,{notation:'compact',maximumFractionDigits:1}).format(localeState.amount*183);document.querySelector('#localeRelative').textContent=new Intl.RelativeTimeFormat(locale,{numeric:'auto'}).format(3,'day');document.querySelector('#localeMode').textContent=localeModeLabel(locale,zone,now);}localeLanguage.addEventListener('change',()=>{localeState.locale=localeLanguage.value;localeState.live=false;renderLocale();announce('La langue d’affichage a été changée en '+localeState.locale);});document.querySelector('#localeControls').addEventListener('submit',event=>{event.preventDefault();localeState.locale=localeLanguage.value;localeState.zone=localeZone.value;localeState.amount=Number(localeAmount.value)||0;localeState.live=false;renderLocale();announce('La langue, le fuseau horaire et le format monétaire ont été appliqués');});document.querySelector('#localeNow').addEventListener('click',()=>{localeState.locale=localeLanguage.value;localeState.zone=localeZone.value;localeState.amount=Number(localeAmount.value)||0;localeState.live=true;renderLocale();announce('Prévisualisation basculée sur l’heure actuelle');});renderLocale();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"browser-media-device-locale-clock","selector":"[data-core-bridge=\"browser-media-device-locale-clock\"]","mode":"select","key":"ArrowRight"};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);workflowBridgeControl.addEventListener('keydown',event=>{if(event.key!==workflowBridgeSpec.key)return;event.preventDefault();workflowBridgeControl.selectedIndex=(workflowBridgeControl.selectedIndex+1)%workflowBridgeControl.options.length;workflowBridgeControl.dispatchEvent(new Event('input',{bubbles:true}));workflowBridgeControl.dispatchEvent(new Event('change',{bubbles:true}));});workflowBridgeControl.addEventListener("keydown",workflowBridgeScheduleCommit);workflowBridgeControl.addEventListener('input',workflowBridgeScheduleCommit);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.selectedIndex=(workflowBridgeControl.selectedIndex+1)%workflowBridgeControl.options.length;workflowBridgeControl.dispatchEvent(new Event('change',{bubbles:true}));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":"capacité de l’écran","amount":12,"priority":"normal","touches":0}],["2",{"label":"Capacité de saisie","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 vérification de l’appareil :'+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>