search

BustByte / coronastatus

Anonymous crowd sourcing of COVID-19 symptoms all over the world (with public data sets)!
MIT License
174 stars 89 forks source link

Add Landing Page #560

Open zacel opened 4 years ago

zacel commented 4 years ago

This pr adds a landing page as first designed in: https://www.figma.com/file/WriP7XWOZbni3X94J0asVX/CoronaStatus?node-id=6090%3A872

The idea began with this issue: https://github.com/BustByte/coronastatus/issues/188

It was created with a lot of work from @amritnagi. He did most of the designing and lots of the developing. Thank you @lseelenbinder for customizing the map layers to hide country names. @jelbazi was also a big help in laying out the design.

This pr already conforms to the fix-lat-lng-order branch, since that info is used here.

It does not show the report data from each country yet as I haven't found a way to do that without making requests to each country site every time the page loads.

After a new country is added to app/countrySpecific then static/countries.json must be updated for it to show up on the landing page. This can be done by running the genCountries.py script which is located in the root directory.

The countries can all be viewed on a map.

The map cycles through countries and shows their name (in their language), their flag, and a link to their site.

Screen Shot 2020-04-06 at 2 52 17 PM

The map cycling animation can be played and paused.

Screen Shot 2020-04-06 at 2 11 26 PM

Visitors can access a full list of countries using any of the contribute now! buttons

Screen Shot 2020-04-06 at 2 11 55 PM

Visitors have many ways to contribute

Screen Shot 2020-04-06 at 2 11 34 PM

To Be translated before merging this pr

It adds a route for accessing the landing page in app/routes/various-routes.ts. Right now the route is /landing in every language so that may have to be updated.

Here is the list of strings that will have to be localized to use the landing page in other languages:

- Contribute now!
- Help us <span>uncover</span> and <span>predict</span> the corona spread across the world
- How can I <span>contribute</span>?
- 1. Survey
- Select your *country and fill out the anonymous survey.
- 2. Share
- Share the link with your friends, family, and encourage them to fill it in.
- 3. Build
- Don't see your country on the map?
- About corona<span>status</span>
- The spread of COVID-19 in our world is unknown. Help us create a better overview.
- Animation
trkoch commented 4 years ago

@zacel I checked out your PR. Looking good. I noticed the link to selected country from "Contribute Now" is broken. Is this supposed to work already?

trkoch commented 4 years ago

de-DE translation.

  • Contribute now!
  • Hilf mit!
  • Help us uncover and predict the corona spread across the world
  • Hilf uns die Verbreitung von Corona weltweit aufzudecken und vorauszusagen
  • How can I contribute?
  • Wie kann ich mithelfen?
    1. Survey
  • Select your *country and fill out the anonymous survey.
    1. Ausfüllen
  • Wähle dein *Land und beteilige dich an einer anonymen Umfrage.
    1. Share
  • Share the link with your friends, family, and encourage them to fill it in.
    1. Teilen
  • Informiere Freunde und Familie und überzeuge sie an der Umfrage teilzunehmen.
    1. Build
  • Don't see your country on the map?
    1. Erstellen
  • Dein Land fehlt auf der Karte?
  • About coronastatus
  • Über coronastatus
  • The spread of COVID-19 in our world is unknown. Help us create a better overview.
  • Es ist nicht klar wie weit COVID-19 in der Welt bereits verbreitet ist. Helfe uns einen besseren Überblick zu gewinnen.
  • Animation
  • Animation