admtracksteel/TestXR
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance 2D UI for Quest 3 readability

Browse Source
This commit is contained in:
Hermes
2026-08-05 22:24:11 +00:00
parent 32946b64f7
commit a0efcd11b2
1 changed files with 67 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+43 -27
View File
@@ -36,64 +36,80 @@ export default function App() {
<div
style={{
position: 'absolute',
top: '24px',
left: '50%',
transform: 'translateX(-50%)',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 10,
display: 'flex',
gap: '16px',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(15, 23, 42, 0.85)',
padding: '12px 24px',
borderRadius: '16px',
backdropFilter: 'blur(8px)',
border: '1px solid rgba(255, 255, 255, 0.1)',
boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.5)',
backgroundColor: 'rgba(9, 13, 22, 0.85)',
backdropFilter: 'blur(12px)',
}}
>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<span style={{ color: '#f59e0b', fontWeight: 'bold', fontSize: '1rem', fontFamily: 'sans-serif' }}>
Meta Quest 3 — Laboratório XR
</span>
<span style={{ color: '#94a3b8', fontSize: '0.8rem', fontFamily: 'sans-serif' }}>
Física interativa, alinhamento de faces e joysticks ativos
</span>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
backgroundColor: 'rgba(15, 23, 42, 0.95)',
padding: '40px 60px',
borderRadius: '24px',
border: '2px solid rgba(56, 189, 248, 0.3)',
boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.7)',
gap: '30px',
}}
>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px' }}>
<h1 style={{ color: '#f59e0b', margin: 0, fontSize: '2.5rem', fontFamily: 'sans-serif', textAlign: 'center' }}>
Meta Quest 3<br />Laboratório XR
</h1>
<p style={{ color: '#94a3b8', margin: 0, fontSize: '1.2rem', fontFamily: 'sans-serif', textAlign: 'center', maxWidth: '400px' }}>
Use seu controle e aponte o laser para escolher o modo abaixo:
</p>
</div>
<div style={{ display: 'flex', gap: '20px', flexDirection: 'column', width: '100%' }}>
<button
onClick={handleEnterVR}
style={{
padding: '10px 20px',
fontSize: '0.95rem',
padding: '20px 30px',
fontSize: '1.5rem',
backgroundColor: '#0284c7',
color: 'white',
border: 'none',
borderRadius: '10px',
borderRadius: '16px',
cursor: 'pointer',
fontWeight: 'bold',
transition: 'background-color 0.2s',
boxShadow: '0 4px 6px rgba(0,0,0,0.3)',
transition: 'transform 0.1s',
}}
>
🥽 Entrar em VR
🥽 ENTRAR EM VR (IMERSIVO)
</button>
<button
onClick={handleEnterAR}
style={{
padding: '10px 20px',
fontSize: '0.95rem',
padding: '20px 30px',
fontSize: '1.5rem',
backgroundColor: '#d97706',
color: 'white',
border: 'none',
borderRadius: '10px',
borderRadius: '16px',
cursor: 'pointer',
fontWeight: 'bold',
transition: 'background-color 0.2s',
boxShadow: '0 4px 6px rgba(0,0,0,0.3)',
transition: 'transform 0.1s',
}}
>
📷 Modo Passthrough AR
📷 MODO AR (PASSTHROUGH)
</button>
</div>
</div>
</div>
)}
{/* 3D WebGL Canvas */}