HTML + CSSInfo-bulles
Carte du monde jour et nuit
Carte du monde avec l’ombre de la nuit calculée en direct : chaque ville affiche son heure locale, son décalage et s’il fait jour.
Réglages
16px
1x
Code
<div class="uvq08-tz" role="group" aria-label="L’heure dans le monde"><div class="wm"><svg viewBox="0 0 360 180" preserveAspectRatio="none" aria-hidden="true"><path class="gr" d="M0 45H360M0 90H360M0 135H360M60 0V180M120 0V180M180 0V180M240 0V180M300 0V180"/><polygon points="20,30 60,20 110,20 130,35 115,60 100,75 85,85 75,75 55,60 35,50 20,40"/><polygon points="100,95 120,95 145,110 135,135 120,160 110,150 105,120"/><polygon points="170,40 200,30 225,35 215,50 195,55 175,55"/><polygon points="165,70 200,65 225,85 230,105 215,130 200,145 190,125 185,100 165,95"/><polygon points="215,30 280,20 340,30 350,50 320,70 300,85 270,95 250,75 230,65 220,50"/><polygon points="290,120 320,115 335,130 320,145 295,140"/><polygon points="120,10 150,8 160,20 140,28 125,22"/><path class="nt" d="M0,0 L0,90.0 L6,67.8 L12,50.9 L18,39.6 L24,32.2 L30,27.1 L36,23.5 L42,20.9 L48,19.0 L54,17.5 L60,16.4 L66,15.6 L72,15.0 L78,14.6 L84,14.4 L90,14.3 L96,14.4 L102,14.6 L108,15.0 L114,15.6 L120,16.4 L126,17.5 L132,19.0 L138,20.9 L144,23.5 L150,27.1 L156,32.2 L162,39.6 L168,50.9 L174,67.8 L180,90.0 L186,112.2 L192,129.1 L198,140.4 L204,147.8 L210,152.9 L216,156.5 L222,159.1 L228,161.0 L234,162.5 L240,163.6 L246,164.4 L252,165.0 L258,165.4 L264,165.6 L270,165.7 L276,165.6 L282,165.4 L288,165.0 L294,164.4 L300,163.6 L306,162.5 L312,161.0 L318,159.1 L324,156.5 L330,152.9 L336,147.8 L342,140.4 L348,129.1 L354,112.2 L360,90.0 L360,0 Z"/></svg><i class="sun" aria-hidden="true" style="left:25.0%;top:58.0%"></i><button type="button" class="ct hc" style="left:22.5%;top:39.2%" data-tz="America/Mexico_City" data-lon="-99.1" data-lat="19.4" aria-label="Mexico" aria-describedby="uvq08-tz-0"><span class="tt" role="tooltip" id="uvq08-tz-0"><b>Mexico</b><span class="tm">12:00</span><span class="of"><svg class="d" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8"/></svg><svg class="n" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.5 14.5A8 8 0 0 1 9.5 4.5a8 8 0 1 0 10 10z"/></svg><span class="ofs">GMT-6</span></span></span></button><button type="button" class="ct hc" style="left:29.4%;top:27.4%" data-tz="America/New_York" data-lon="-74" data-lat="40.7" aria-label="New York" aria-describedby="uvq08-tz-1"><span class="tt" role="tooltip" id="uvq08-tz-1"><b>New York</b><span class="tm">14:00</span><span class="of"><svg class="d" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8"/></svg><svg class="n" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.5 14.5A8 8 0 0 1 9.5 4.5a8 8 0 1 0 10 10z"/></svg><span class="ofs">GMT-4</span></span></span></button><button type="button" class="ct hc nite pk" style="left:49.0%;top:27.6%" data-tz="Europe/Madrid" data-lon="-3.7" data-lat="40.4" aria-label="Madrid" aria-describedby="uvq08-tz-2"><span class="tt" role="tooltip" id="uvq08-tz-2"><b>Madrid</b><span class="tm">19:00</span><span class="of"><svg class="d" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8"/></svg><svg class="n" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.5 14.5A8 8 0 0 1 9.5 4.5a8 8 0 1 0 10 10z"/></svg><span class="ofs">GMT+1</span></span></span></button><button type="button" class="ct hr nite" style="left:88.8%;top:30.2%" data-tz="Asia/Tokyo" data-lon="139.7" data-lat="35.7" aria-label="Tokyo" aria-describedby="uvq08-tz-3"><span class="tt" role="tooltip" id="uvq08-tz-3"><b>Tokyo</b><span class="tm">03:00</span><span class="of"><svg class="d" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8"/></svg><svg class="n" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.5 14.5A8 8 0 0 1 9.5 4.5a8 8 0 1 0 10 10z"/></svg><span class="ofs">GMT+9</span></span></span></button><button type="button" class="ct hr nite" style="left:92.0%;top:68.8%" data-tz="Australia/Sydney" data-lon="151.2" data-lat="-33.9" aria-label="Sydney" aria-describedby="uvq08-tz-4"><span class="tt" role="tooltip" id="uvq08-tz-4"><b>Sydney</b><span class="tm">05:00</span><span class="of"><svg class="d" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4.5"/><path d="M12 2.5v2.5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8"/></svg><svg class="n" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.5 14.5A8 8 0 0 1 9.5 4.5a8 8 0 1 0 10 10z"/></svg><span class="ofs">GMT+11</span></span></span></button></div><p class="hd" aria-hidden="true">L’heure dans le monde</p></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Info-bulles
Voir tout : Info-bullesOù l’utiliser
Une carte du monde simple dont la face nocturne est calculée dans le navigateur à partir de la date et de l’heure, avec la déclinaison solaire et la longitude du point subsolaire et un soleil là où il est au zénith. Au survol ou au focus d’une ville, une infobulle donne son heure locale et son décalage UTC via Intl, avec un soleil ou une lune selon son ciel.
La couleur principale règle les points des villes, la secondaire l’océan. Ajoute des villes avec leurs coordonnées et leur fuseau IANA, et l’ombre se met à jour toutes les trente secondes. Elle convient aux équipes à distance, aux préparateurs de voyage et aux événements sur plusieurs fuseaux.