From a0efcd11b2915d7040c0933ff8434be4957e5982 Mon Sep 17 00:00:00 2001
From: Hermes <hermes@reifonas.cloud>
Date: Wed, 5 Aug 2026 22:24:11 +0000
Subject: [PATCH] Enhance 2D UI for Quest 3 readability

---
 src/App.tsx | 118 +++++++++++++++++++++++++++++-----------------------
 1 file changed, 67 insertions(+), 51 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d4de623..d504687 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -36,63 +36,79 @@ 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: '20px 30px',
+                  fontSize: '1.5rem',
+                  backgroundColor: '#0284c7',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '16px',
+                  cursor: 'pointer',
+                  fontWeight: 'bold',
+                  boxShadow: '0 4px 6px rgba(0,0,0,0.3)',
+                  transition: 'transform 0.1s',
+                }}
+              >
+                🥽 ENTRAR EM VR (IMERSIVO)
+              </button>
+
+              <button
+                onClick={handleEnterAR}
+                style={{
+                  padding: '20px 30px',
+                  fontSize: '1.5rem',
+                  backgroundColor: '#d97706',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '16px',
+                  cursor: 'pointer',
+                  fontWeight: 'bold',
+                  boxShadow: '0 4px 6px rgba(0,0,0,0.3)',
+                  transition: 'transform 0.1s',
+                }}
+              >
+                📷 MODO AR (PASSTHROUGH)
+              </button>
+            </div>
           </div>
-
-          <button
-            onClick={handleEnterVR}
-            style={{
-              padding: '10px 20px',
-              fontSize: '0.95rem',
-              backgroundColor: '#0284c7',
-              color: 'white',
-              border: 'none',
-              borderRadius: '10px',
-              cursor: 'pointer',
-              fontWeight: 'bold',
-              transition: 'background-color 0.2s',
-            }}
-          >
-            🥽 Entrar em VR
-          </button>
-
-          <button
-            onClick={handleEnterAR}
-            style={{
-              padding: '10px 20px',
-              fontSize: '0.95rem',
-              backgroundColor: '#d97706',
-              color: 'white',
-              border: 'none',
-              borderRadius: '10px',
-              cursor: 'pointer',
-              fontWeight: 'bold',
-              transition: 'background-color 0.2s',
-            }}
-          >
-            📷 Modo Passthrough AR
-          </button>
         </div>
       )}