- PVSM.RU - https://www.pvsm.ru -

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

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

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

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

Смотреть тут [2]

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

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

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

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

На данный момент сайт поддерживает следующие элементы интерфейса:

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

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

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

P.S — болшое спасибо пользователю Lockal [4] за орфографическую помощь

Автор: altryne


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/15293

Ссылки в тексте:

[1] Aelios Weather на iPad: http://aeliosapp.com

[2] Image: http://alexw.me/aelios

[3] github.com/altryne/aelios: http://github.com/altryne/aelios

[4] Lockal: http://habrahabr.ru/users/lockal/