Reorganise the Registration Workflow

[wintermeyer]

Currently the first impression of the page looks like this:

This is OK. But that's it. It is just OK. Our goal is to help people and to make their live better. To bring them happiness! Do we add sparkles to their lives while they enter the information in this form? No, we do not! But how could we? We have to show them as fast as possible the number of potential candidates and some example candidates. I would love to see that number in the top of the page as a split flap (airport style like https://codepen.io/1055/pen/jjPLJo or https://www.firediy.fr/article/panneau-d-affichage-style-aeroport-full-css ) display (but let's first display the number and after that think about the split flap CSS).

Please add "beta", "test" and "new" to the black list of potential account names. And add a new LiveView /beta for this issue so that we can test it in parallel to the old version of the registration process.

Our aim is to show the potential new ANIMINA users as fast as possible how many potential candidates are in the system. For that we have to to restructure the workflow for the registration process.

We start with these values for the user on the index page (which will be represented by /beta until we switch completely:

• Gender
• ZipCode
• Height
• Birthdate

We update the split flap display as soon as each field gets entered! The user has to see/feel the process.

After that we do all these fields:

We change the default for "search range to 50 km". And we don't ask the last two questions here (yet).

After that we walk through the white, green and red flags. Updating the split flap counter display when needed.

At the very end we display a page which asks for the data which they haven't entered yet. Including the profile photo. But not including the about me story. We do the PIN by email thing and after that the about me story.

Please split up this issue if needed and contact @wintermeyer if you have any questions.

PS: Normally I hate fixed top navigation bars. But in this case such a fixed navigation bar would make sense to display the split flap counter. And than we can do the same for the rest of the application to be the same on every page.
PPS: Please update the PR with every page so that @wintermeyer can see the current update.