How to compile/convert 4 html pages into 1 page?

Question

Hello guys,
I've got a static website(4 pages) that only talks to firebase and has few images.
https://github.com/wave-rider/StroopEffect
Is there any way to compile/convert it into one HTML page with all images embedded into the page as strings
and also make links between the pages working?
Then I will be able to publish this code here, as Sololearn at
the moment allows only 1 file to be published as a code
I was just wondering what is possible here using modern web technologies without re-writing the project by hand to make 4 pages to act as one page?

See my original post here:
https://www.sololearn.com/post/904275/?ref=app

Maybe you can also advice where else I can post this information
to collect more data for my son's assignment.
Thank you in advance and have a nice weekend

Answer 1

I don't think there is a tool around whre we can use it to compile multi pages to single page.

However it's easier to toggle the div sections within a single page. Just copy all the pages into index.html, sperated then with div and id. Set appropriate display: block/none to all the div.

Change a tag with onclick to call a callback that trigger the show and hidden divs accordingly.

https://code.sololearn.com/W3PEaUdlZE6p/?ref=app

Answer 2

Thanks a lot Calviղ for posting the code. It looks great, I will update it to make it fully working and post it here 😉

Answer 3

Calviղ I converted the Strooper Effect app into a single page app.
https://code.sololearn.com/W4SaNnG3U4Pt/?ref=app

Answer 4

wave rider Great work 👍

Answer 5

Thanks man

Answer 6

Use Ajax to fetch data