Aelios weather application clone using html5

    I want to share with you my latest project.


    About a year ago, I downloaded the Aelios Weather app on an iPad .
    It touched my eye with its simplicity and unusual interface.

    And here's what happened:
    image

    Look here


    As always, I was wondering how advanced HTML5 is and whether it is possible to create something like that.

    The interface is based on a circle, which seems to be a compass and a clock in one person.
    You can turn the compass to show the days of the week or time of day.
    On it you can see the time of sunsets and sunrises.

    An arrow appears inside the circle, which automatically goes to the largest population point in the radius.

    I started by trying to understand the interface.
    Then I started looking for how to integrate the Google Maps API.

    Currently the site supports the following interface elements:
    • map and interface elements on it
    • hour circle with an arrow indicating the most populated area under it
    • you can turn the clock and see the effect of closing and opening the shutter
    • current time and times of sunset and dawn on the circle
    • keyword search and user locating via HTML5 Geolocation API
    • clicking on the city shows the weather forecast (it is not connected to any service yet, so it is incorrect)


    The project was released on Github here github.com/altryne/aelios .

    I will be glad to feedback and ideas for improvement.

    PS - many thanks to the user Lockal for spelling help.

    Also popular now: