[Feature] Create ScanQR screen for AR viewer

[ShwetKhatri2001]

Description

If the AR is not supported on the current device then we are showing a QR code currently to scan it and view AR on another device.
To get rid of the extra space being used for the QR code,

• Create a button on the desktop 3D viewer similar to the "View in your space" button being shown on mobile currently. Keep it at the center bottom having the same styles.

• But on desktop, the button will function differently, it will basically open a new screen on the viewer as an overlay having that QR code, URL, and the details about on which devices AR is supported. It should be responsive for any width/height of the viewer container since we will have different width and height at different places.

• Once you complete the points given above, remove the old implementation to scan QR.

Note : There is a similar button already for supported devices.
So, this new button shouldn't be coming up on supported devices ( mobile ), since it's only for the devices where AR is not supported.

Screenshots

For UI have a look at that View in your space button.

For functionality take a look at how it works on Sketchfab Bag example present in the Works on iOS and Android section.
The button you create will function like the [ AR ] button present there but the button styles will be different as I discussed above. You may keep the structure of the elements on the ScanQR overlay similar as shown there. There should be a close button as shown there.
( Try not to have a scrollbar like they are having ).

Checklist

• I have checked the existing issues
• I have read the [Contributing Guidelines]
• I am willing to work on this issue (optional)
• I am a GSSoC'23 contributor

[ShatilKhan]

Hi @ShwetKhatri2001 I'd like to work on this under SWOC24

[ShwetKhatri2001]

I have already assigned you an issue. You may proceed with that first and then come here again.

[ayann07]

I would like to work on this under swoc

[ShwetKhatri2001]

Okay, go ahead.

[ayann07]

Sorry I tried this but I was not able to solve this , so I am unassigning myself.

[ShatilKhan]

I'd like to take this one up @ShwetKhatri2001
I've done some similar QR Scanner before, can I take this after I finish up my previous issue?

[ShwetKhatri2001]

Sure, Please complete the assigned issue first. After that, I can assign you this.