Pull to refresh

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

Reading time1 min
Views3.8K

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


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

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

Смотреть тут


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

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

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

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

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


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

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

P.S — болшое спасибо пользователю Lockal за орфографическую помощь.
Tags:
Hubs:
Total votes 14: ↑8 and ↓6+2
Comments10

Articles