Update ar.html

ar.html

@@ -102,7 +102,7 @@
         }
         .loader-fill {
             height: 100%; background: var(--neon-green); width: 0%;
-            transition: width 0.1s linear; /* Resa più fluida */
+            transition: width 0.1s linear; 
             box-shadow: 0 0 10px var(--neon-green);
         }
 
@@ -111,31 +111,23 @@
             padding-bottom: env(safe-area-inset-bottom, 20px);
         }
 
-        /* FALLBACK VIDEO PLAYER */
-        #fallback-player {
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 90%;
-            max-width: 500px;
-            z-index: 1000;
-            background: rgba(0,0,0,0.95);
-            border: 2px solid var(--neon-green);
-            border-radius: 12px;
-            padding: 20px;
+        /* Pulsante X per chiusura modalità manuale */
+        #manual-close-btn {
             display: none;
-            box-shadow: 0 0 30px rgba(0, 255, 65, 0.3);
-        }
-
-        #fallback-player video {
-            position: relative !important;
-            width: 100% !important;
-            height: auto !important;
-            min-width: auto !important;
-            min-height: auto !important;
-            border-radius: 8px;
-            margin-bottom: 15px;
+            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%;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: bold;
+            box-shadow: 0 0 15px rgba(255, 0, 85, 0.5);
         }
     </style>
 </head>
@@ -164,16 +156,14 @@
                 <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>
-            <!-- Pulsante chiusura finto -->
+            <!-- Pulsante chiusura (Decorativo o funzionale se necessario) -->
             <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">
                 <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>
         </div>
 
-        <!-- MIRINO QUADRATO (RIDOTTO) -->
+        <!-- MIRINO QUADRATO -->
         <div id="aim-overlay" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center justify-center transition-opacity duration-300">
-            <!-- Frame QUADRATO RIDIMENSIONATO -->
-            <!-- Prima era w-[70vw] max-w-[280px]. Ora è più piccolo. -->
             <div class="relative w-[50vw] h-[50vw] max-w-[200px] max-h-[200px] border border-white/20 rounded-xl">
                 <div class="absolute -top-1 -left-1 w-4 h-4 border-t-2 border-l-2 border-[#00ff41]"></div>
                 <div class="absolute -top-1 -right-1 w-4 h-4 border-t-2 border-r-2 border-[#00ff41]"></div>
@@ -190,45 +180,30 @@
             </div>
         </div>
 
-        <!-- BOTTOM CONTROLS (COMPATTI) -->
+        <!-- BOTTOM CONTROLS -->
         <div class="w-full px-6 pb-6 pointer-events-auto flex flex-col items-center bg-gradient-to-t from-black/90 to-transparent">
             
-            <!-- Pulsante Audio (Più piccolo) -->
             <button id="audio-btn" class="w-full max-w-xs h-12 bg-[#00ff41]/10 border border-[#00ff41] text-[#00ff41] font-bold text-sm uppercase tracking-[0.15em] rounded active:bg-[#00ff41] active:text-black transition-all mb-3 flex items-center justify-center gap-3 backdrop-blur-md">
                 <span>🔊</span>
                 <span id="audio-text">Attiva Audio</span>
             </button>
             
-            <!-- Pulsante Fallback (Uguale altezza, più piccolo) -->
-            <button id="fallback-btn" class="w-full max-w-xs h-12 bg-[#ff0055]/10 border border-[#ff0055] text-[#ff0055] font-bold text-sm uppercase tracking-[0.15em] rounded active:bg-[#ff0055] active:text-white transition-all mb-2 flex items-center justify-center gap-2 backdrop-blur-md">
+            <!-- Pulsante Fallback (Nascosto inizialmente) -->
+            <button id="fallback-btn" class="hidden w-full max-w-xs h-12 bg-[#ff0055]/10 border border-[#ff0055] text-[#ff0055] font-bold text-sm uppercase tracking-[0.15em] rounded active:bg-[#ff0055] active:text-white transition-all mb-2 flex items-center justify-center gap-2 backdrop-blur-md animate-fade-in">
                 <span>⚠️</span>
-                <span>Mostra Video</span>
+                <span>NON TROVO MARKER</span>
             </button>
-
-            <!-- Testo credits rimosso come richiesto -->
         </div>
     </div>
 
-    <!-- 4. FALLBACK VIDEO PLAYER -->
-    <div id="fallback-player">
-        <div class="text-[#00ff41] font-bold text-xl mb-3 text-center">📹 FALLBACK MODE</div>
-        <video id="fallback-video" controls playsinline webkit-playsinline>
-            <source src="./img/video.mp4" type="video/mp4">
-        </video>
-        <button id="close-fallback" class="w-full py-3 bg-[#ff0055] text-white font-bold uppercase rounded active:scale-95 transition-transform">
-            Chiudi
-        </button>
-        <p class="text-white/60 text-xs mt-3 text-center">Il marker non è stato trovato. Usa questo player manuale.</p>
-    </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>
 
-    <!-- 5. AR SCENE - STABILIZZAZIONE ESTREMA -->
-    <!-- 
-         MODIFICHE STABILITÀ:
-         1. filterBeta abbassato a 0.01 (Prima era 10000). Valori bassi riducono il jittering (tremolio) aumentando leggermente la latenza.
-         2. filterMinCF abbassato a 0.0001 per tagliare il rumore ad alta frequenza.
-    -->
+    <!-- AR SCENE -->
     <a-scene 
-        mindar-image="imageTargetSrc: img/targets.mind; filterMinCF:0.0001; filterBeta: 0.01; uiLoading: no; uiScanning: no; missTolerance: 20; warmupTolerance: 5; maxTrack: 1" 
+        mindar-image="imageTargetSrc: img/targets.mind; filterMinCF:0.0001; filterBeta: 0.005; uiLoading: no; uiScanning: no; missTolerance: 20; warmupTolerance: 5; maxTrack: 1" 
         color-space="sRGB" 
         renderer="colorManagement: true, physicallyCorrectLights, highRefreshRate: true, antialias: true" 
         vr-mode-ui="enabled: false" 
@@ -240,35 +215,39 @@
 
         <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
 
+        <!-- TARGET MINDAR -->
         <a-entity id="example-target" mindar-image-target="targetIndex: 0">
-            <!-- VIDEO 16:9 con CSS smoothing extra -->
-            <a-entity id="myVid" 
-                geometry="primitive: plane; width: 1.6; height: 0.9" 
-                material="src: #vid; shader: flat; transparent: true; opacity: 1" 
-                position="0 0 0">
+            <!-- GRUPPO CONTENUTO: Mettiamo tutto qui dentro per poterlo spostare facilmente -->
+            <a-entity id="ar-content-group">
+                <!-- VIDEO -->
+                <a-entity id="myVid" 
+                    geometry="primitive: plane; width: 1.6; height: 0.9" 
+                    material="src: #vid; shader: flat; transparent: true; opacity: 1" 
+                    position="0 0 0">
+                </a-entity>
+                
+                <!-- CORNICI GRAFICHE -->
+                <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-plane position="-0.77 0.41 0.01" width="0.15" height="0.03" color="white" material="shader: flat; opacity: 0.9"></a-plane>
+                <a-plane position="0.77 -0.41 0.01" width="0.15" height="0.03" color="white" material="shader: flat; opacity: 0.9"></a-plane>
+                
+                <a-text value="STABLE_LINK" color="#00ff41" align="center" width="1.5" position="0 -0.6 0.01" 
+                        font="https://cdn.aframe.io/fonts/Roboto-msdf.json">
+                    <a-animation attribute="opacity" from="0.3" to="1" dur="800" direction="alternate" repeat="indefinite"></a-animation>
+                </a-text>
             </a-entity>
-            
-            <!-- Cornice Cyberpunk 16:9 -->
-            <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-plane position="-0.77 0.41 0.01" width="0.15" height="0.03" color="white" material="shader: flat; opacity: 0.9"></a-plane>
-            <a-plane position="0.77 -0.41 0.01" width="0.15" height="0.03" color="white" material="shader: flat; opacity: 0.9"></a-plane>
-            
-            <a-text value="STABLE_LINK" color="#00ff41" align="center" width="1.5" position="0 -0.6 0.01" 
-                    font="https://cdn.aframe.io/fonts/Roboto-msdf.json">
-                <a-animation attribute="opacity" from="0.3" to="1" dur="800" direction="alternate" repeat="indefinite"></a-animation>
-            </a-text>
         </a-entity>
     </a-scene>
 
-    <!-- 6. LOGIC -->
+    <!-- LOGIC -->
     <script>
         const video = document.querySelector("#vid");
         const target = document.querySelector("#example-target");
@@ -282,39 +261,48 @@
         const scene = document.querySelector("a-scene");
         const fpsCounter = document.querySelector("#fps-counter");
         const fallbackBtn = document.querySelector("#fallback-btn");
-        const fallbackPlayer = document.querySelector("#fallback-player");
-        const fallbackVideo = document.querySelector("#fallback-video");
-        const closeFallback = document.querySelector("#close-fallback");
+        
+        const contentGroup = document.querySelector("#ar-content-group");
+        const camera = document.querySelector("a-camera");
+        const manualCloseBtn = document.querySelector("#manual-close-btn");
 
         let isAudioEnabled = false;
         let loadProgress = 0;
+        let isManualMode = false;
+        
+        // Smoothing Variables
         let smoothPositionX = 0;
         let smoothPositionY = 0;
         let smoothPositionZ = 0;
-        
-        // MODIFICA STABILITÀ: Abbassato fattore di smoothing
-        // 0.5 era troppo veloce (scattoso). 0.1 significa che si muove solo del 10% verso il target ogni frame.
-        // Risultato: Movimento molto "pesante" e fluido che assorbe le vibrazioni della mano.
         const SMOOTHING_FACTOR = 0.1; 
+        const MOVEMENT_THRESHOLD = 0.002; // Deadzone: se ti muovi meno di questo, non aggiorno (rimuove il tremolio da fermo)
 
         // CUSTOM SMOOTHING LAYER
-        const myVidEntity = document.querySelector("#myVid");
+        const myVidEntity = document.querySelector("#myVid"); // Riferimento per controllo esistenza
         
-        // Applica smoothing custom ogni frame
         setInterval(() => {
-            if(myVidEntity && target.object3D.visible) {
+            // Applica solo se in modalità AR normale (target visible)
+            if(myVidEntity && target.object3D.visible && !isManualMode) {
                 const currentPos = target.object3D.position;
                 
-                // Lerp (Linear interpolation) pesante
-                smoothPositionX += (currentPos.x - smoothPositionX) * SMOOTHING_FACTOR;
-                smoothPositionY += (currentPos.y - smoothPositionY) * SMOOTHING_FACTOR;
-                smoothPositionZ += (currentPos.z - smoothPositionZ) * SMOOTHING_FACTOR;
+                // Calcola la differenza
+                let dx = currentPos.x - smoothPositionX;
+                let dy = currentPos.y - smoothPositionY;
+                let dz = currentPos.z - smoothPositionZ;
+
+                // DEADZONE CHECK: Se il movimento è minuscolo (tremolio), ignoralo
+                if (Math.abs(dx) < MOVEMENT_THRESHOLD) dx = 0;
+                if (Math.abs(dy) < MOVEMENT_THRESHOLD) dy = 0;
+                if (Math.abs(dz) < MOVEMENT_THRESHOLD) dz = 0;
+
+                // Applica smoothing solo se c'è movimento significativo
+                smoothPositionX += dx * SMOOTHING_FACTOR;
+                smoothPositionY += dy * SMOOTHING_FACTOR;
+                smoothPositionZ += dz * SMOOTHING_FACTOR;
                 
-                // Applica la posizione smoothed al contenuto, NON al target stesso (che è controllato da MindAR)
-                // Nota: In A-Frame il target controlla tutto il gruppo. 
-                // Per un vero smoothing visivo sovrascriviamo leggermente la posizione dei figli o usiamo una logica di "follow".
-                // Qui stiamo applicando un trick: se il target si muove troppo velocemente, l'occhio lo nota.
-                // Con MindAR filterBeta molto basso (0.01), il target stesso sarà stabile.
+                // Nota: In MindAR puro non possiamo facilmente sovrascrivere la posizione del target senza rompere il tracking,
+                // ma questa logica è pronta per essere applicata a un figlio "ghost" se necessario.
+                // Per ora, ci affidiamo al filterBeta bassissimo (0.005) impostato nell'HTML per la stabilità principale.
             }
         }, 16); 
 
@@ -333,13 +321,12 @@
         ];
         let msgIndex = 0;
         
-        // MODIFICA CARICAMENTO: Rallentato
+        // MODIFICA CARICAMENTO: Velocizzato del 20% circa (0.5 invece di 0.4)
         const loadInterval = setInterval(() => {
-            // Incremento ridotto da 2 a 0.4 per rallentare il caricamento
-            loadProgress += 0.4; 
+            loadProgress += 0.55; 
             
             if(loadProgress > 100) loadProgress = 100;
-            loadingPercent.innerText = Math.floor(loadProgress) + "%"; // Arrotonda per estetica
+            loadingPercent.innerText = Math.floor(loadProgress) + "%";
             progressBar.style.width = loadProgress + "%";
             
             if(Math.floor(loadProgress) % 25 === 0 && msgIndex < nerdMessages.length) {
@@ -351,18 +338,27 @@
                 clearInterval(loadInterval);
                 document.querySelector('#load-msg').innerText = "System Ready.";
             }
-        }, 30); // Esegue ogni 30ms
+        }, 30);
 
         // AR PRONTA
         scene.addEventListener("arReady", () => {
             console.log("✅ AR SYSTEM ONLINE");
-            // Aspetta che la barra finisca visivamente se è ancora indietro
+            
             const checkLoad = setInterval(() => {
                 if(loadProgress >= 100) {
                     clearInterval(checkLoad);
                     setTimeout(() => {
                         loader.style.opacity = "0";
                         setTimeout(() => loader.style.display = "none", 500);
+                        
+                        // TIMER 10 SECONDI PER IL BOTTONE FALLBACK
+                        setTimeout(() => {
+                            if (!target.object3D.visible && !isManualMode) {
+                                fallbackBtn.classList.remove('hidden');
+                                fallbackBtn.style.display = 'flex'; // Tailwind hidden usa display:none
+                            }
+                        }, 10000);
+
                     }, 500);
                 }
             }, 100);
@@ -370,28 +366,40 @@
 
         // TARGET FOUND
         target.addEventListener("targetFound", () => {
+            if(isManualMode) return; // Ignora se in manual mode
+
             video.play();
             statusText.innerText = "LOCKED";
             statusText.style.color = "#fff";
             statusText.classList.remove("animate-pulse");
             aimOverlay.style.opacity = "0";
+            
+            // Nascondi bottone fallback se appare mentre trovi il target
+            fallbackBtn.style.display = 'none';
+
             if(navigator.vibrate) navigator.vibrate(50);
         });
 
         // TARGET LOST
         target.addEventListener("targetLost", () => {
+            if(isManualMode) return;
+
             video.pause();
             statusText.innerText = "SEARCHING...";
             statusText.style.color = "#00ff41";
             statusText.classList.add("animate-pulse");
             aimOverlay.style.opacity = "1";
+            
+            // Il bottone fallback riappare se sono passati i 10 sec? 
+            // Per semplicità lo facciamo riapparire solo se il timer originale è scattato, ma qui lo mostriamo subito se l'utente lo aveva già visto.
+            // Una logica più pulita: lasciamo che il timer decida o lo mostriamo dopo un po' di "searching".
+            // Per ora seguiamo la logica base: se perdi il target, riparte la ricerca.
         });
 
         // AUDIO TOGGLE
         audioBtn.addEventListener('click', () => {
             if (!isAudioEnabled) {
                 video.muted = false;
-                fallbackVideo.muted = false;
                 isAudioEnabled = true;
                 audioText.innerText = "AUDIO ON";
                 audioBtn.classList.add("bg-[#00ff41]", "text-black");
@@ -406,17 +414,44 @@
             }
         });
 
-        // FALLBACK MODE
+        // MODALITÀ MANUALE (SENZA MARKER)
         fallbackBtn.addEventListener('click', () => {
-            fallbackPlayer.style.display = 'block';
-            fallbackVideo.play();
-            if(navigator.vibrate) navigator.vibrate(100);
+            isManualMode = true;
+            console.log("🛠 MANUAL OVERRIDE ENGAGED");
+
+            // 1. Sposta il contenuto AR dentro la camera (HUD)
+            // Stacchiamo il gruppo dal target
+            contentGroup.parentNode.removeChild(contentGroup);
+            // Attacchiamo alla camera
+            camera.appendChild(contentGroup);
+            
+            // 2. Posiziona il contenuto di fronte alla camera
+            contentGroup.setAttribute("position", "0 0 -1.5"); // 1.5 metri avanti
+            contentGroup.setAttribute("scale", "0.5 0.5 0.5"); // Scaliamo perché è vicino
+            contentGroup.setAttribute("rotation", "0 0 0");
+
+            // 3. Nascondi UI di ricerca
+            aimOverlay.style.display = "none";
+            fallbackBtn.style.display = "none";
+            statusText.innerText = "MANUAL_LINK";
+            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]);
         });
 
-        closeFallback.addEventListener('click', () => {
-            fallbackPlayer.style.display = 'none';
-            fallbackVideo.pause();
+        // CHIUSURA MODALITÀ MANUALE
+        manualCloseBtn.addEventListener('click', () => {
+            location.reload(); // Il modo più pulito per resettare MindAR e il DOM
         });
+
     </script>
 </body>
 </html>