HTML + CSSTooltips
Weltkarte mit Tag und Nacht
Eine Weltkarte mit dem Nachtschatten für genau jetzt: Jede Stadt zeigt Ortszeit, Zeitverschiebung und ob gerade Tag ist.
Einstellungen
16px
1x
Code
<div class="uvq08-tz" role="group" aria-label="Uhrzeit weltweit"><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="Mexiko-Stadt" aria-describedby="uvq08-tz-0"><span class="tt" role="tooltip" id="uvq08-tz-0"><b>Mexiko-Stadt</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="Tokio" aria-describedby="uvq08-tz-3"><span class="tt" role="tooltip" id="uvq08-tz-3"><b>Tokio</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">Uhrzeit weltweit</p></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Tooltips
Alle ansehen: TooltipsWofür du ihn nutzen kannst
Eine Low-Poly-Weltkarte, deren Nachtseite im Browser aus Datum und Uhrzeit berechnet wird, über die Deklination der Sonne und die Länge des Subsolarpunkts, mit einer kleinen Sonne dort, wo sie im Zenit steht. Beim Hovern oder Fokussieren einer Stadt nennt ein Tooltip Ortszeit und UTC-Abstand per Intl in der Seitensprache, dazu Sonne oder Mond je nach Himmel vor Ort.
Die Hauptfarbe bestimmt die Stadtpunkte, die Zweitfarbe den Ozean. Füge Städte mit Koordinaten und IANA-Zeitzone hinzu, der Schatten aktualisiert sich alle dreißig Sekunden. Passt zu verteilten Teams, Reiseplanern und Events über mehrere Zeitzonen.