Feature: add a toggle fullscreen button

[aditya-bhaumik]

Fixes #25

I fulfilled all the following requirements :

A button labeled 'Fullscreen' or with a fullscreen icon is to be added.
Clicking the button toggles between fullscreen and normal mode.
If it's a button, then it should show the current state (e.g., "Exit Fullscreen" when in fullscreen mode).
It should be compatible with all the browsers.

Apart from that i have added hover effect to the button it changes color when the pointer is on it

Normal screen mode

Full screen mode

Hover effect

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[aditya-bhaumik]

@sk66641 please review and merge this pull request under gssoc'24

[sk66641]

@aditya-bhaumik there is an issue like when i switch to full screen mode using browser zoom option or F11 key, and then i try to exit full screen using button, that doesn't work
Screencast from 29-05-24 01:32:18 AM IST.webm

[aditya-bhaumik]

@sk66641 i checked this issue you just have to use the following way to exit the full screen mode i tried in other browsers as well it is working.

I first tried making changes to the code but i was not able to make the button work whenever we enter full screen mode like this then i checked many other websites like google and amazon and i noticed that when we press that button we cant use the esc button or any other button to exit full screen mode the only way we can do that is by pressing f11 or by taking the cursor at the top of the screen

test.mp4

[aditya-bhaumik]

@sk66641 i have made the 2 changes in the code

[aditya-bhaumik]

@sk66641 please add the gssoc levels in this pull request also and assign me
Thank you