Redesigned home page

[kdarras]

Single home page with a modern (long format) display style, compatible with mobile phones/small displays (#291 ).

• "about" info: lyrical intro with short goal of website and beautiful background image - delete about page (Kevin will provide text)
• show projects (image + short description) inside box with diaporama show. Show open lock for projects that have open collections, and closed lock for projects without public collections. The text at mouse over should be "contains/does not contain public collections"
• search box to find a collection or project (results appear in drop-down list, open in new tab)
• dynamic summary statistics shown in nice box (total tag and recording numbers, projects, users), references in science from Google scholar
• used resources with logos and link behind ("powered by..." scikit-maad, birdNET, batdetect2, Leaflet, RabbitMQ, other plugins...)
• affiliations/sponsors with logo and link behind

Replace link to guide by info icon next to user name.

[kdarras]

A beautiful homepage!

Points to adjust:

• show each background photograph longer before changing to the next. Transition blending one image into the next can be a bit longer too.
• Make sure that the background images are free and legal to use on a public website. Eventually, we will use images from the community and I can replace them (please show me the path)
• make sure that the text shown on top of the image is always readable independently of the chosen image (for example, by choosing white font surrounded by black border?)
• since the email cannot be copy-pasted, remove it from the text and provide one more green button with a mailto:k...@...fr (using my newer address)
• when an image is added to the testing project, I cannot open the project anymore from the homepage
• add a third icon when project has no collection or disable link and hide open lock symbol
• put cursor automatically inside text search box when clicking the magnifying glass

Note that the recording statistics should only count actual data (audio data and not metadata recordings) or ideally, also mention meta-recording separately in the same box (but I can make a new issue).

[kdarras]

a weird error happened after trying to insert a 12MB picture

Disregard if this is not caused by the new code, I will create a new issue.

[LiuDilongNJ]

The images are from https://www.pexels.com/ The image paths are src/assets/images/swiper_bg1.png and src/assets/images/swiper_bg2.png

[LiuDilongNJ]

The current displayed items do not have a click-to-jump function, only "My Sounds" has it. Do we need to add this function?

Can we directly hide projects without collections in the project display and my sounds display?

In addition, regarding the statistics of recording, we only count audio files, so in the map, should we display the metadata tags and statistical quantities?

[kdarras]

Yes it would be nice that when clicking the search/magnifying glass icon, the cursor is also placed inside the search text box directly.

It would be more consistent that projects without collections are displayed like the other projects but that they display a similar message like the empty collections (such as "no data available"), which can be opened even when they contain no data.

Regarding the statistics, it seems that meta-recordings are currently counted as well: If it is not possible to add "of which 2 meta-recordings" into the recording statistics box, let's leave it like that.

[kdarras]

Adjustments needed:

• I still cannot open projects under the homepage's "Project showcase" section: clicking them has no effect
• I tried to create a project without a picture (to test whether it depends on having a picture or not), and no project was created. Then I created a project with a picture, and it was successfully created, but still could not be opened from the "Project showcase" section. Then I created a third project without picture, but it automatically inherited the picture from the preceding project.
• I forgot to mention that my ugly graphic with the computer drawing can be removed.
• Please add: "sponsored by" before the sponsor logos and add the INRAE logo

[kdarras]

Well done Last adjustment needed: I still cannot create a project without picture. We can also make picture upload required if this is easier.

[LiuDilongNJ]

This issue has been fixed and will be submitted later.

[kdarras]

Working in Docker

[kdarras]

working online

[kdarras]

completed in #511