Propose A better speaker note and main content view.

After talking in #1441 , I worked a little bit on it and maybe we need to restructure our Speaker (Teacher) and Student view.

With consideration that there are several personas who use this book, the focus is on the Teacher and Student scenarios and personas.

The teacher sits behind a laptop (small screen only for the teacher) and is connected to a projector or a TV (big screen mainly for students).

Other platforms with similar scenarios, how do they handle it?

Canva.com Put a controllable view for handling popups in small screens.

Here is an example of a presentation with the title "AI for humans, an introduction to AI for midschool students by Amin Sharifi".

Google presentation also has similar way to control

My proposed method:

before start code and make any PR, I want to know is that change acceptable?

Technically, we need to make the book more SPA-ish and handle some events by own pages instead of default behavior.

In this part, I'm only using vinyla JS.