Бесплатные мировые часы на карте

Основные возможности

• Карта мира в реальном времени: Векторная карта на D3.js рисует материки в цветах выбранной темы. Ночная половина Земли затеняется по положению солнца, поэтому видно, где сейчас ночь.
• Более 580 городов, все смещения UTC: В базе есть города для всех 37 смещений от UTC, которые сейчас действуют, включая редкие: UTC+5:45 (Катманду), UTC+8:45 (Юкла) и UTC+12:45 (острова Чатем).
• Карточки дня и ночи: Пока в городе светит солнце, карточка светлая. Как только оно зайдёт, карточка темнеет. Цвет считывается быстрее, чем цифры.
• Подсветка города на карте: Каждая карточка связана со своей меткой на карте. Подсветку можно закрепить нажатием, что удобно для скриншота или показа экрана на звонке.
• Свой порядок карточек: Перетащите карточку на новое место. Поставьте первым свой город, а за ним те, что смотрите чаще всего.
• Летнее время учитывается само: У каждого города есть пояс IANA (например, America/New_York), и браузер сам учитывает переход на летнее и зимнее время. Дважды в год ничего менять не нужно.
• На любом устройстве: На компьютере работают вся карта и перетаскивание. На телефоне карта только для просмотра, поиск стоит над списком, а карточки идут в один столбец. Кнопка удаления на телефоне видна всегда.
• 8 цветовых тем: Тёмная, светлая, красная, бирюзовая, синяя, фиолетовая, зелёная и серая. Вместе с темой меняются и цвета карты.
• Не останавливаются без сети: Пропал интернет? Уже открытая страница продолжает показывать время, а тень ночи на карте по-прежнему сдвигается.

Как пользоваться мировыми часами

Шаг 1: Добавьте город

На компьютере введите название города в поле поиска в левом верхнем углу карты. На телефоне поле поиска находится над карточками. Пока вы печатаете, ниже появляются подходящие города: нажмите на нужный, и он добавится. Можно обойтись и без мыши: стрелками выберите город в списке и нажмите Enter.

Шаг 2: Посмотрите местное время

У каждого добавленного города появляются метка на карте и карточка под картой. На карточке указаны город, страна, местное время и сегодняшняя дата. Светлая карточка: там сейчас день. Тёмная: солнце уже село.

Шаг 3: Подсветите город на карте

Наведите курсор на карточку, и её метка загорится на карте с подсказкой, где написано полное название города. Если нажать на карточку, подсветка закрепится, а страница прокрутится к карте. Нажмёте на другую карточку, и подсветка перейдёт на неё. Нажмёте в любое место, кроме карточек, включая саму карту, и подсветка снимется. Подсказка появляется и тогда, когда курсор наведён прямо на метку.

Шаг 4: Расставьте карточки по порядку

Зажмите карточку мышью, перетащите на нужное место и отпустите. Порядок сохранится сразу. Так проще всего поставить свой город первым и собрать города по регионам.

Шаг 5: Удалите город

Наведите курсор на карточку, и в её левом верхнем углу появится маленькая кнопка ×. Нажмите на неё, и карточка исчезнет вместе с меткой на карте. На телефоне кнопка × видна всегда.

Когда пригодятся мировые часы онлайн

Команда в разных странах

Если коллеги работают из разных стран, часы на экране надёжнее подсчётов в уме. Вряд ли вы хотите написать кому-то в 3 часа ночи по его времени. Добавьте города коллег, поставьте свой первым, и сразу понятно, у кого сейчас рабочий день.

Звонки в другие страны

Хотите позвонить в Токио, но не уверены, что там ещё не поздно? Добавьте Токио и свой город, и вы увидите время у обоих. Если карточка Токио тёмная, у собеседника уже вечер или ночь, и звонок лучше отложить.

Родные и друзья за границей

«Который час сейчас у мамы?» Добавьте её город один раз, и разницу в 7 или 12 часов больше не придётся считать в уме.

Поездки и перелёты

Перед поездкой добавьте город, куда летите, и начните заранее привыкать к местному времени. После прилёта часы помогут с джетлагом: перед глазами и время дома, к которому привык организм, и время на месте.

Трейдинг и финансовые рынки

Биржи работают по своему местному времени. Например, Токийская биржа открывается в 9:00 по токийскому времени. Добавьте города нужных бирж, и вы будете видеть их время с учётом перехода на летнее время.

Спорт, киберспорт и прямые трансляции

Матч начинается в 20:00 по Берлину, а вы живёте в Сан-Паулу? Добавьте оба города. По карточкам видно, на сколько часов они расходятся, и легко понять, во сколько начало у вас.

Как это работает

• Карта нарисована одним SVG с помощью D3.js по файлу GeoJSON с границами стран. Проекция равнопромежуточная (широта и долгота идут ровной сеткой), поэтому координаты города напрямую переводятся в точку на карте.
• Ночная сторона карты строится как круг радиусом 90° вокруг антисолнечной точки, то есть точки Земли, противоположной солнцу. Чтобы найти эту точку, хватает двух стандартных формул (склонение солнца и уравнение времени) и UTC-часов вашего компьютера. Карта обновляется раз в минуту.
• Каждому городу в базе присвоен часовой пояс IANA. Браузер переводит UTC в местное время через Intl.DateTimeFormat({ timeZone: ... }), поэтому правила летнего времени берутся из базы часовых поясов самого браузера и обновляются вместе с ним.
• Выбранные города, их порядок и тема хранятся в localStorage вашего браузера. Эти данные никуда не отправляются.

Полезные советы

• Поставьте свой город на первое место. Тогда остальные карточки удобно сравнивать с ним: сразу видно, где уже позже, чем у вас, а где ещё рано.
• Собирайте города по регионам: сначала Азию, потом Европу, потом Америку. Сетка карточек переносится сама, а такой список проще просматривать.
• Показываете экран во время звонка? Нажмите на карточку. Метка на карте останется подсвеченной, и собеседник сразу поймёт, о каком городе речь.
• Тень на карте настоящая. Тёмная половина карты показывает, где солнце сейчас под горизонтом, а её край проходит там, где солнце встаёт или садится. Если метка города стоит у самого края тёмной стороны, там либо только что был закат, либо скоро рассвет.
• Прежде чем печатать, просто нажмите на пустое поле поиска. В нём уже есть список популярных городов, так что Сингапур или Торонто добавляются одним нажатием.

Частые вопросы