How do I make a simple password page within my one HTML file?

I’m a self-taught programmer and I’m planning on making a small puzzle website where the clues are on the pages available and to enter other pages, you have to first enter a password. I’m trying to make it like the happy meat farms employee portal:

• press the link that should take you to the allocated page
• redirects you to a password page first where you enter password
• if it’s the correct password, you once again get redirected to the page

Each password required page (there’s 3) has a different password.
I have all the pages created and designed, so my only thing to do now is the password page.

Each page follows this format:

<div class="page">

    <header>

        <h1>header words</h1>

    </header>

    <p>blahblahblah</p>

</div>

and I have a changepage script:

    <script>

            var page = document.getElementsByClassName('page');

            function changePage(pageNum) {

                for (var i = 0; i < page.length; i++) {

                    page[i].style.display = 'none';

                    page[pageNum - 1].style.display = 'block';

                }



                menu.style.left = '-270px';

                closeBtn.style.top = '-270px';



                window.scroll(0, 0);

            }

            changePage(1);

        </script>

I do not want the pages to be separate html files.
Please help I have no idea how to do it :cc

the three places where once pressed currently redirect you to the pages:
https://i.sstatic.net/WivlW4gw.png
https://i.sstatic.net/QXdNu7nZ.png
https://i.sstatic.net/wiAeRWKY.png

If still unclear what I mean, maybe try going to this website:
https://www.happymeatfarms.com/employee-access
and click the “access employee portal” at the bottom. Basically what I’m aiming for, but with multiple links instead of just one.