Update ar.html

ar.html

@@ -32,54 +32,31 @@
 
         /* --- ENGINE GRAFICO (Camera e Canvas) --- */
         
-        /* FIX Z-INDEX: Applichiamo lo stile SOLO al video della webcam generato da MindAR */
-        /* MindAR non da una classe specifica facile, ma è l'unico video diretto nel body solitamente. 
-           Tuttavia, per sicurezza usiamo una regola che esclude il nostro #vid */
-        video:not(#vid) {
+        /* Regole generali per video webcam */
+        video:not(#vid):not(#manual-video) {
             position: fixed !important;
             top: 0 !important; 
             left: 0 !important; 
             width: 100vw !important;
             height: 100vh !important;
-            min-width: 100vw !important;
-            min-height: 100vh !important;
             object-fit: cover !important;
             z-index: -2 !important;
-            margin: 0 !important;
-            padding: 0 !important;
         }
 
-        /* Nascondiamo il video sorgente dalla vista (ma deve esistere per la texture) */
+        /* Nascondiamo il video sorgente AR */
         #vid {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 1px;
-            height: 1px;
-            opacity: 0;
-            z-index: -100;
-            pointer-events: none;
+            position: absolute; top: 0; left: 0; opacity: 0; z-index: -100; pointer-events: none;
         }
         
         .a-canvas {
-            position: fixed !important;
-            top: 0 !important;
-            left: 0 !important;
-            width: 100vw !important;
-            height: 100vh !important;
+            position: fixed !important; top: 0 !important; left: 0 !important;
+            width: 100vw !important; height: 100vh !important;
             z-index: -1 !important;
-            margin: 0 !important;
-            padding: 0 !important;
         }
         
         a-scene {
-            position: fixed !important;
-            top: 0 !important;
-            left: 0 !important;
-            width: 100vw !important;
-            height: 100vh !important;
-            margin: 0 !important;
-            padding: 0 !important;
+            position: fixed !important; top: 0 !important; left: 0 !important;
+            width: 100vw !important; height: 100vh !important;
         }
         
         .scanlines {
@@ -126,24 +103,26 @@
             padding-bottom: env(safe-area-inset-bottom, 20px);
         }
 
-        /* Pulsante X per chiusura modalità manuale */
-        #manual-close-btn {
-            display: none;
+        /* FALLBACK PLAYER STYLE (HTML OVERLAY) */
+        #fallback-player {
+            display: none; /* Nascosto di default */
             position: fixed;
-            top: 20px;
-            right: 20px;
-            z-index: 2000;
-            width: 40px;
-            height: 40px;
-            background: rgba(255, 0, 85, 0.8);
-            border: 1px solid #ff0055;
-            border-radius: 50%;
+            top: 0; left: 0; width: 100%; height: 100%;
+            background-color: #000; /* Copre la camera */
+            z-index: 5000;
+            flex-direction: column;
             align-items: center;
             justify-content: center;
-            color: white;
-            font-weight: bold;
-            box-shadow: 0 0 15px rgba(255, 0, 85, 0.5);
-            cursor: pointer;
+            padding: 20px;
+        }
+        
+        #fallback-player video {
+            width: 100%;
+            max-width: 600px;
+            border: 2px solid var(--neon-green);
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
+            margin-bottom: 20px;
         }
 
         .animate-fade-in {
@@ -180,9 +159,11 @@
                 <span id="sys-status" class="text-[#00ff41] font-bold text-lg tracking-wider animate-pulse">SCANNING...</span>
                 <span class="text-[8px] text-white/40 font-mono mt-1">FPS: <span id="fps-counter">60</span> | STABLE_MODE: ON</span>
             </div>
-            <div class="w-10 h-10 flex items-center justify-center border border-[#00ff41]/50 rounded-full bg-black/40 backdrop-blur-md opacity-50">
+            
+            <!-- BUTTON X (LINK INDEX) - FIX: Ora è un tag 'a' cliccabile -->
+            <a href="./index.html" class="w-10 h-10 flex items-center justify-center border border-[#00ff41]/50 rounded-full bg-black/40 backdrop-blur-md hover:bg-[#00ff41]/20 transition-colors pointer-events-auto cursor-pointer">
                 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#00ff41" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
-            </div>
+            </a>
         </div>
 
         <!-- MIRINO QUADRATO -->
@@ -219,10 +200,18 @@
         </div>
     </div>
 
-    <!-- Bottone CHIUDI per modalità manuale -->
-    <button id="manual-close-btn" class="pointer-events-auto">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M18 6L6 18M6 6l12 12"/></svg>
-    </button>
+    <!-- 4. FALLBACK PLAYER OVERLAY (HTML Puro) -->
+    <div id="fallback-player">
+        <h2 class="text-[#00ff41] text-xl font-bold mb-4 tracking-widest">MANUAL LINK</h2>
+        <!-- Video separato per il fallback manuale -->
+        <video id="manual-video" controls playsinline webkit-playsinline>
+            <source src="./img/video.mp4" type="video/mp4">
+        </video>
+        <button id="close-manual-btn" class="mt-4 px-8 py-3 bg-[#ff0055] text-white font-bold uppercase rounded tracking-widest hover:bg-[#d00045] transition-colors">
+            TORNA ALLA SCANSIONE
+        </button>
+        <p class="text-white/50 text-xs mt-4 font-mono">Modalità visualizzazione manuale attivata.</p>
+    </div>
 
     <!-- AR SCENE -->
     <a-scene 
@@ -233,34 +222,10 @@
         device-orientation-permission-ui="enabled: false">
         
         <a-assets>
-            <!-- IL VIDEO SORGENTE (nascosto visivamente via CSS ma caricato qui) -->
             <video id="vid" src="./img/video.mp4" preload="auto" loop muted playsinline webkit-playsinline crossorigin="anonymous"></video>
         </a-assets>
 
-        <!-- CAMERA + HUD MANUALE -->
-        <a-camera position="0 0 0" look-controls="enabled: false">
-            <!-- Questo gruppo è fissato alla camera (HUD) ma inizialmente INVISIBILE -->
-            <!-- Lo accendiamo solo in modalità manuale -->
-            <a-entity id="manual-hud" visible="false" position="0 0 -1.5" scale="0.5 0.5 0.5">
-                 <!-- VIDEO -->
-                 <a-entity 
-                    geometry="primitive: plane; width: 1.6; height: 0.9" 
-                    material="src: #vid; shader: flat; transparent: true; opacity: 1">
-                </a-entity>
-                
-                <!-- CORNICI (Copiate dalla versione AR) -->
-                <a-plane position="0 0.47 0" width="1.68" height="0.03" color="#00ff41" material="shader: flat">
-                    <a-animation attribute="opacity" from="1" to="0.7" dur="100" direction="alternate" repeat="indefinite"></a-animation>
-                </a-plane>
-                <a-plane position="0 -0.47 0" width="1.68" height="0.03" color="#00ff41" material="shader: flat"></a-plane>
-                <a-plane position="-0.83 0 0" width="0.03" height="0.96" color="#00ff41" material="shader: flat"></a-plane>
-                <a-plane position="0.83 0 0" width="0.03" height="0.96" color="#00ff41" material="shader: flat">
-                    <a-animation attribute="opacity" from="1" to="0.7" dur="150" direction="alternate" repeat="indefinite"></a-animation>
-                </a-plane>
-                <a-text value="MANUAL_OVERRIDE" color="#ff0055" align="center" width="1.5" position="0 -0.6 0.01" 
-                        font="https://cdn.aframe.io/fonts/Roboto-msdf.json"></a-text>
-            </a-entity>
-        </a-camera>
+        <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
 
         <!-- TARGET MINDAR (AR REALE) -->
         <a-entity id="example-target" mindar-image-target="targetIndex: 0">
@@ -308,9 +273,10 @@
         const fpsCounter = document.querySelector("#fps-counter");
         const fallbackBtn = document.querySelector("#fallback-btn");
         
-        const arContentGroup = document.querySelector("#ar-content-group");
-        const manualHud = document.querySelector("#manual-hud");
-        const manualCloseBtn = document.querySelector("#manual-close-btn");
+        // Nuovi elementi Fallback HTML
+        const fallbackPlayer = document.querySelector("#fallback-player");
+        const manualVideo = document.querySelector("#manual-video");
+        const closeManualBtn = document.querySelector("#close-manual-btn");
 
         let isAudioEnabled = false;
         let loadProgress = 0;
@@ -332,9 +298,6 @@
                 smoothPositionX += (currentPos.x - smoothPositionX) * SMOOTHING_FACTOR;
                 smoothPositionY += (currentPos.y - smoothPositionY) * SMOOTHING_FACTOR;
                 smoothPositionZ += (currentPos.z - smoothPositionZ) * SMOOTHING_FACTOR;
-                
-                // Nota: MindAR controlla il parent, noi non modifichiamo il target qui
-                // ma le variabili sono pronte se volessimo sganciare il contenuto
             }
         }, 16); 
 
@@ -415,6 +378,7 @@
         audioBtn.addEventListener('click', () => {
             if (!isAudioEnabled) {
                 video.muted = false;
+                manualVideo.muted = false; // Sblocca anche l'audio manuale
                 isAudioEnabled = true;
                 audioText.innerText = "AUDIO ON";
                 audioBtn.classList.add("bg-[#00ff41]", "text-black");
@@ -427,37 +391,40 @@
             }
         });
 
-        // MODALITÀ MANUALE (SENZA MARKER)
+        // MODALITÀ MANUALE (OVERLAY HTML)
         fallbackBtn.addEventListener('click', () => {
             isManualMode = true;
-            console.log("🛠 MANUAL OVERRIDE ENGAGED");
+            console.log("🛠 MANUAL HTML PLAYER OPENED");
 
-            // 1. Spegni AR Reale
-            arContentGroup.setAttribute("visible", "false"); 
+            // Pausa AR
+            video.pause();
             
-            // 2. Accendi HUD Manuale (Clone)
-            manualHud.setAttribute("visible", "true");
+            // Mostra Overlay HTML
+            fallbackPlayer.style.display = 'flex';
+            
+            // Avvia Video Manuale
+            manualVideo.currentTime = 0;
+            manualVideo.play();
+            if(isAudioEnabled) manualVideo.muted = false;
 
-            // 3. UI Updates
-            aimOverlay.style.display = "none";
-            fallbackBtn.style.display = "none";
-            statusText.innerText = "MANUAL_LINK";
+            // UI Updates
+            statusText.innerText = "MANUAL_MODE";
             statusText.style.color = "#ff0055";
-            statusText.classList.remove("animate-pulse");
-
-            // 4. Mostra bottone chiusura X
-            manualCloseBtn.style.display = "flex";
-
-            // 5. Avvia video
-            video.play();
-            if(video.muted && isAudioEnabled) video.muted = false;
-
             if(navigator.vibrate) navigator.vibrate([50, 50, 50]);
         });
 
         // CHIUSURA MODALITÀ MANUALE
-        manualCloseBtn.addEventListener('click', () => {
-            location.reload(); 
+        closeManualBtn.addEventListener('click', () => {
+            isManualMode = false;
+            
+            // Nascondi Overlay
+            fallbackPlayer.style.display = 'none';
+            manualVideo.pause();
+
+            // Ripristina AR UI
+            statusText.innerText = "SEARCHING...";
+            statusText.style.color = "#00ff41";
+            aimOverlay.style.opacity = "1";
         });
 
     </script>