Как стать автором
Обновить

Клон приложения «aelios weather» при помощи html5

Время на прочтение1 мин
Количество просмотров3.8K

Хочу поделиться с вами моим последним проектом.


Примерно год назад я скачал приложение Aelios Weather на iPad.
Оно задело мне глаз своей простотой и необычным интерфейсом.

И вот что получилось:
image

Смотреть тут


Как всегда, мне было интересно, насколько продвинут HTML5, и можно ли создать что-нибудь такое же.

В основе интерфейса лежит кружок, который вроде как компас и часы в одном лице.
Компас можно крутить, дабы показать дни недели или время суток.
На нем же можно увидеть время закатов и рассветов.

Внутри кружка появляется стрелка, которая автоматически направляется на самый большой по населению пункт в данном радиусе.

Я начал с того, что попытался понять интерфейс.
Потом я начал искать, как интегрировать Google Maps API.

На данный момент сайт поддерживает следующие элементы интерфейса:
  • карта и на ней элементы интерфейса
  • часовой круг со стрелкой, указывающей наиболее населенный пункт под ним
  • можно покрутить часы и посмотреть эффект закрывания и открывания затвора
  • текущее время и времена заката и рассвета на кружке
  • поиск по ключевым словам и определение нахождения пользователя через HTML5 Geolocation API
  • нажатие на город показывает прогноз погоды (он пока не подключен ни к одному сервису, так что он неверный)


Проект выпущен в Github тут github.com/altryne/aelios.

Буду рад отзывам и идеям по улучшению.

P.S — болшое спасибо пользователю Lockal за орфографическую помощь.
Теги:
Хабы:
Всего голосов 14: ↑8 и ↓6+2
Комментарии10

Публикации

Ближайшие события