Spaces:

MatteoScript
/

InnovationLab

Running

App Files Files Community

MatteoScript commited on Nov 25, 2025

Commit

3cedbca

verified ·

1 Parent(s): f5f9ef2

Update ar.html

Browse files

Files changed (1) hide show

ar.html +198 -67

ar.html CHANGED Viewed

@@ -2,15 +2,12 @@
 <html lang="it">
 <head>
     <meta charset="UTF-8" />
-    <!-- Viewport ottimizzato per mobile: blocco totale dello zoom e gestione notch -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
     <title>AR Neural Link | Vertical Native</title>
-    <!-- Tailwind & Fonts -->
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap" rel="stylesheet">
-    <!-- AR Libraries -->
     <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.2/dist/mindar-image.prod.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.2/dist/mindar-image-aframe.prod.js"></script>
@@ -22,40 +19,54 @@
             --error-red: #ff0055;
         }
-        /* Reset totale per comportamento "App Nativa" */
         html, body {
             margin: 0;
             padding: 0;
             width: 100%;
             height: 100%;
-            background-color: transparent !important; /* Importante per vedere la camera */
             font-family: 'Fira Code', monospace;
-            overflow: hidden; /* Blocca scroll elastico su iOS */
-            position: fixed; /* Blocca il body in posizione */
         }
         /* --- ENGINE GRAFICO (Camera e Canvas) --- */
-        /* 1. Video Webcam: Forziamo il riempimento verticale */
         video {
-            position: absolute !important;
-            top: 0; left: 0; right: 0; bottom: 0;
-            width: 100% !important;
-            height: 100% !important;
-            object-fit: cover !important; /* Questo è il segreto per il full screen 9:16 */
             z-index: -2 !important;
         }
-        /* 2. Canvas AR: Sovrapposto perfettamente */
         .a-canvas {
-            width: 100% !important;
-            height: 100% !important;
-            position: absolute !important;
-            top: 0; left: 0;
             z-index: -1 !important;
         }
-        /* FX: Scanlines (Ottimizzate per mobile) */
         .scanlines {
             background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2));
             background-size: 100% 4px;
@@ -64,7 +75,6 @@
             opacity: 0.4;
         }
-        /* UI Elements */
         .tech-border {
             border: 1px solid var(--neon-green);
             box-shadow: 0 0 15px rgba(0, 255, 65, 0.15);
@@ -74,7 +84,6 @@
         .a-enter-vr-button { display: none !important; }
-        /* --- LOADER STYLE --- */
         #custom-loader {
             position: fixed; inset: 0; z-index: 9999;
             background: #000;
@@ -104,11 +113,37 @@
             box-shadow: 0 0 10px var(--neon-green);
         }
-        /* Safe area per iPhone nuovi */
         .safe-area-y {
             padding-top: env(safe-area-inset-top, 20px);
             padding-bottom: env(safe-area-inset-bottom, 20px);
         }
     </style>
 </head>
 <body>
@@ -118,7 +153,7 @@
         <div class="text-[#00ff41] text-5xl font-black tracking-tighter glitch-text mb-4">
             LINK<br>START
         </div>
-        <div class="text-white/50 text-xs font-mono uppercase tracking-[0.2em] mb-2">Initializing AR Core...</div>
         <div class="loader-track"><div class="loader-fill" id="progress-bar"></div></div>
         <div id="loading-percent" class="text-[#00ff41] font-mono text-xl mt-2 font-bold">0%</div>
     </div>
@@ -126,31 +161,29 @@
     <!-- 2. FX -->
     <div class="scanlines"></div>
-    <!-- 3. UI LAYER (Vertical Native) -->
     <div id="ui-layer" class="fixed inset-0 z-[50] flex flex-col justify-between safe-area-y pointer-events-none">
         <!-- TOP HEADER -->
         <div class="w-full px-6 py-4 flex justify-between items-center bg-gradient-to-b from-black/80 to-transparent pointer-events-auto">
             <div class="flex flex-col">
-                <span class="text-[10px] text-white/60 font-mono tracking-widest">SYSTEM</span>
-                <span id="sys-status" class="text-[#00ff41] font-bold text-lg tracking-wider animate-pulse">SCANNING</span>
             </div>
             <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 active:scale-95 transition-transform">
                 <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>
             </a>
         </div>
-        <!-- MIRINO (Adattato per Verticale) -->
         <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 Rettangolare Verticale (9:16 approx) -->
             <div class="relative w-[65vw] h-[100vw] max-w-[300px] max-h-[500px] border border-white/20 rounded-xl">
-                <!-- Angoli Tech -->
                 <div class="absolute -top-1 -left-1 w-6 h-6 border-t-4 border-l-4 border-[#00ff41]"></div>
                 <div class="absolute -top-1 -right-1 w-6 h-6 border-t-4 border-r-4 border-[#00ff41]"></div>
                 <div class="absolute -bottom-1 -left-1 w-6 h-6 border-b-4 border-l-4 border-[#00ff41]"></div>
                 <div class="absolute -bottom-1 -right-1 w-6 h-6 border-b-4 border-r-4 border-[#00ff41]"></div>
-                <!-- Mirino centrale -->
                 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full flex items-center justify-center">
                     <div class="w-12 h-[1px] bg-[#00ff41]/50"></div>
                     <div class="h-12 w-[1px] bg-[#00ff41]/50 absolute"></div>
@@ -163,19 +196,41 @@
         <!-- BOTTOM CONTROLS -->
         <div class="w-full px-6 pb-8 pointer-events-auto flex flex-col items-center bg-gradient-to-t from-black/90 to-transparent">
-            <!-- Pulsante Audio Enorme (Pollice friendly) -->
-            <button id="audio-btn" class="w-full max-w-sm py-5 bg-[#00ff41]/10 border border-[#00ff41] text-[#00ff41] font-bold text-lg uppercase tracking-[0.2em] rounded active:bg-[#00ff41] active:text-black transition-all mb-4 flex items-center justify-center gap-3 backdrop-blur-md">
                 <span>🔊</span>
                 <span id="audio-text">Attiva Audio</span>
             </button>
-            <div class="text-[10px] text-white/40 font-mono">NEURAL_LINK v2.4.0 // VERTICAL_MODE</div>
         </div>
     </div>
-    <!-- 4. AR SCENE (VERTICAL SETUP) -->
-    <!-- Nota: missTolerance aumentato per mantenere il tracking più stabile mentre ci si muove -->
     <a-scene
-        mindar-image="imageTargetSrc: img/targets.mind; filterMinCF:0.0001; filterBeta: 0.001; uiLoading: no; uiScanning: no; missTolerance: 10; warmupTolerance: 5"
         color-space="sRGB"
         renderer="colorManagement: true, physicallyCorrectLights, highRefreshRate: true"
         vr-mode-ui="enabled: false"
@@ -188,36 +243,34 @@
         <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
         <a-entity id="example-target" mindar-image-target="targetIndex: 0">
-            <!--
-                GEOMETRIA VERTICALE (9:16)
-                Width: 1 (Largo quanto il target fisico)
-                Height: 1.777 (Proporzione 16:9 in verticale, cioè 1 * 16 / 9)
-                Questo forza il video ad apparire come uno schermo smartphone verticale fluttuante.
-            -->
             <a-entity id="myVid"
-                geometry="primitive: plane; width: 1; height: 1.777"
                 material="src: #vid; shader: flat; transparent: true; opacity: 1"
                 position="0 0 0">
             </a-entity>
-            <!-- Cornice Cyberpunk Verticale -->
-            <!-- Top Bar -->
-            <a-plane position="0 0.9 0" width="1.05" height="0.02" color="#00ff41" material="shader: flat"></a-plane>
-            <!-- Bottom Bar -->
-            <a-plane position="0 -0.9 0" width="1.05" height="0.02" color="#00ff41" material="shader: flat"></a-plane>
-            <!-- Left Bar -->
-            <a-plane position="-0.52 0 0" width="0.02" height="1.8" color="#00ff41" material="shader: flat"></a-plane>
-            <!-- Right Bar -->
-            <a-plane position="0.52 0 0" width="0.02" height="1.8" color="#00ff41" material="shader: flat"></a-plane>
-            <!-- Elementi decorativi agli angoli -->
-            <a-plane position="-0.52 0.9 0" width="0.1" height="0.02" color="white" material="shader: flat"></a-plane>
-            <a-plane position="0.52 -0.9 0" width="0.1" height="0.02" color="white" material="shader: flat"></a-plane>
         </a-entity>
     </a-scene>
-    <!-- 5. LOGIC -->
     <script>
         const video = document.querySelector("#vid");
         const target = document.querySelector("#example-target");
@@ -229,24 +282,73 @@
         const loadingPercent = document.querySelector("#loading-percent");
         const progressBar = document.querySelector("#progress-bar");
         const scene = document.querySelector("a-scene");
         let isAudioEnabled = false;
         let loadProgress = 0;
-        // Simulazione caricamento rapido
         const loadInterval = setInterval(() => {
             loadProgress += 2;
             if(loadProgress > 100) loadProgress = 100;
             loadingPercent.innerText = loadProgress + "%";
             progressBar.style.width = loadProgress + "%";
-            if(loadProgress >= 100) clearInterval(loadInterval);
         }, 30);
         // AR PRONTA
         scene.addEventListener("arReady", () => {
-            console.log("AR System Ready");
-            // Chiudi loader
             setTimeout(() => {
                 loader.style.opacity = "0";
                 setTimeout(() => loader.style.display = "none", 500);
@@ -255,24 +357,27 @@
         // ERROR HANDLING
         scene.addEventListener("arError", (ev) => {
-            alert("Errore fotocamera: controlla i permessi!");
         });
         // TARGET FOUND
         target.addEventListener("targetFound", () => {
-            console.log("Found");
             video.play();
-            statusText.innerText = "LOCKED";
             statusText.style.color = "#fff";
             statusText.classList.remove("animate-pulse");
             aimOverlay.style.opacity = "0";
         });
         // TARGET LOST
         target.addEventListener("targetLost", () => {
-            console.log("Lost");
             video.pause();
-            statusText.innerText = "SEARCHING";
             statusText.style.color = "#00ff41";
             statusText.classList.add("animate-pulse");
             aimOverlay.style.opacity = "1";
@@ -282,12 +387,14 @@
         audioBtn.addEventListener('click', () => {
             if (!isAudioEnabled) {
                 video.muted = false;
                 isAudioEnabled = true;
                 audioText.innerText = "AUDIO ON";
                 audioBtn.classList.add("bg-[#00ff41]", "text-black");
                 audioBtn.classList.remove("bg-[#00ff41]/10", "text-[#00ff41]");
-                // Feedback aptico (vibrazione) se supportato
                 if(navigator.vibrate) navigator.vibrate(50);
                 setTimeout(() => {
@@ -296,6 +403,30 @@
                 }, 1500);
             }
         });
     </script>
 </body>
 </html>

 <html lang="it">
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
     <title>AR Neural Link | Vertical Native</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap" rel="stylesheet">
     <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.2/dist/mindar-image.prod.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.2/dist/mindar-image-aframe.prod.js"></script>
             --error-red: #ff0055;
         }
         html, body {
             margin: 0;
             padding: 0;
             width: 100%;
             height: 100%;
+            background-color: transparent !important;
             font-family: 'Fira Code', monospace;
+            overflow: hidden;
+            position: fixed;
         }
         /* --- ENGINE GRAFICO (Camera e Canvas) --- */
         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;
         }
         .a-canvas {
+            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;
         }
         .scanlines {
             background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2));
             background-size: 100% 4px;
             opacity: 0.4;
         }
         .tech-border {
             border: 1px solid var(--neon-green);
             box-shadow: 0 0 15px rgba(0, 255, 65, 0.15);
         .a-enter-vr-button { display: none !important; }
         #custom-loader {
             position: fixed; inset: 0; z-index: 9999;
             background: #000;
             box-shadow: 0 0 10px var(--neon-green);
         }
         .safe-area-y {
             padding-top: env(safe-area-inset-top, 20px);
             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;
+            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;
+        }
     </style>
 </head>
 <body>
         <div class="text-[#00ff41] text-5xl font-black tracking-tighter glitch-text mb-4">
             LINK<br>START
         </div>
+        <div class="text-white/50 text-xs font-mono uppercase tracking-[0.2em] mb-2" id="load-msg">Initializing AR Core...</div>
         <div class="loader-track"><div class="loader-fill" id="progress-bar"></div></div>
         <div id="loading-percent" class="text-[#00ff41] font-mono text-xl mt-2 font-bold">0%</div>
     </div>
     <!-- 2. FX -->
     <div class="scanlines"></div>
+    <!-- 3. UI LAYER -->
     <div id="ui-layer" class="fixed inset-0 z-[50] flex flex-col justify-between safe-area-y pointer-events-none">
         <!-- TOP HEADER -->
         <div class="w-full px-6 py-4 flex justify-between items-center bg-gradient-to-b from-black/80 to-transparent pointer-events-auto">
             <div class="flex flex-col">
+                <span class="text-[10px] text-white/60 font-mono tracking-widest">SYSTEM_STATUS</span>
+                <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> | LAT: 12ms</span>
             </div>
             <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 active:scale-95 transition-transform">
                 <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>
             </a>
         </div>
+        <!-- MIRINO -->
         <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">
             <div class="relative w-[65vw] h-[100vw] max-w-[300px] max-h-[500px] border border-white/20 rounded-xl">
                 <div class="absolute -top-1 -left-1 w-6 h-6 border-t-4 border-l-4 border-[#00ff41]"></div>
                 <div class="absolute -top-1 -right-1 w-6 h-6 border-t-4 border-r-4 border-[#00ff41]"></div>
                 <div class="absolute -bottom-1 -left-1 w-6 h-6 border-b-4 border-l-4 border-[#00ff41]"></div>
                 <div class="absolute -bottom-1 -right-1 w-6 h-6 border-b-4 border-r-4 border-[#00ff41]"></div>
                 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full flex items-center justify-center">
                     <div class="w-12 h-[1px] bg-[#00ff41]/50"></div>
                     <div class="h-12 w-[1px] bg-[#00ff41]/50 absolute"></div>
         <!-- BOTTOM CONTROLS -->
         <div class="w-full px-6 pb-8 pointer-events-auto flex flex-col items-center bg-gradient-to-t from-black/90 to-transparent">
+            <!-- Pulsante Audio -->
+            <button id="audio-btn" class="w-full max-w-sm py-5 bg-[#00ff41]/10 border border-[#00ff41] text-[#00ff41] font-bold text-lg uppercase tracking-[0.2em] 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>
+            <!-- NUOVO: Pulsante Fallback -->
+            <button id="fallback-btn" class="w-full max-w-sm py-4 bg-[#ff0055]/10 border border-[#ff0055] text-[#ff0055] font-bold text-sm uppercase tracking-[0.2em] rounded active:bg-[#ff0055] active:text-white transition-all mb-4 flex items-center justify-center gap-2 backdrop-blur-md">
+                <span>⚠️</span>
+                <span>Mostra Video (Fallback)</span>
+            </button>
+            <div class="text-[10px] text-white/40 font-mono text-center">
+                <div>NEURAL_LINK v2.4.0 // VERTICAL_MODE</div>
+                <div class="mt-1">Built with 🧠 & ☕ by a sleep-deprived dev</div>
+                <div class="text-[#00ff41]/60 mt-1" id="konami-hint">// Try: ↑↑↓↓←→←→BA</div>
+            </div>
         </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>
+    <!-- 5. AR SCENE -->
     <a-scene
+        mindar-image="imageTargetSrc: img/targets.mind; filterMinCF:0.00001; filterBeta: 10; uiLoading: no; uiScanning: no; missTolerance: 25; warmupTolerance: 2"
         color-space="sRGB"
         renderer="colorManagement: true, physicallyCorrectLights, highRefreshRate: true"
         vr-mode-ui="enabled: false"
         <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
         <a-entity id="example-target" mindar-image-target="targetIndex: 0">
+            <!-- VIDEO 16:9 -->
             <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>
+            <!-- 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="HACK_THE_PLANET.exe" 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 + NERD EASTER EGGS -->
     <script>
         const video = document.querySelector("#vid");
         const target = document.querySelector("#example-target");
         const loadingPercent = document.querySelector("#loading-percent");
         const progressBar = document.querySelector("#progress-bar");
         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");
         let isAudioEnabled = false;
         let loadProgress = 0;
+        // Easter Egg 1: Fake FPS Counter
+        setInterval(() => {
+            const fakeFps = Math.floor(Math.random() * 3) + 58;
+            fpsCounter.innerText = fakeFps;
+        }, 500);
+        // Easter Egg 2: Konami Code
+        const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
+        let konamiIndex = 0;
+        document.addEventListener('keydown', (e) => {
+            if (e.key === konamiCode[konamiIndex]) {
+                konamiIndex++;
+                if (konamiIndex === konamiCode.length) {
+                    alert('🎮 CHEAT CODE ACTIVATED!\n\n"In the Matrix, no one can hear you printf()"\n- Anonymous Hacker, 1999');
+                    konamiIndex = 0;
+                }
+            } else {
+                konamiIndex = 0;
+            }
+        });
+        // Console Easter Egg
+        console.log("%c⚡ NEURAL LINK SYSTEM INITIALIZED", "color: #00ff41; font-size: 20px; font-weight: bold;");
+        console.log("%cIf you're reading this, you're a true nerd 🤓", "color: #fff; font-size: 12px;");
+        console.log("%c// TODO: Add more bugs for job security", "color: #666; font-style: italic;");
+        // Loading con messaggi nerd
+        const nerdMessages = [
+            "Compiling shaders...",
+            "Downloading RAM...",
+            "Adjusting flux capacitor...",
+            "Hacking the mainframe...",
+            "Dividing by zero...",
+            "Reticulating splines..."
+        ];
+        let msgIndex = 0;
         const loadInterval = setInterval(() => {
             loadProgress += 2;
             if(loadProgress > 100) loadProgress = 100;
             loadingPercent.innerText = loadProgress + "%";
             progressBar.style.width = loadProgress + "%";
+            if(loadProgress % 15 === 0 && msgIndex < nerdMessages.length) {
+                document.querySelector('#load-msg').innerText = nerdMessages[msgIndex];
+                msgIndex++;
+            }
+            if(loadProgress >= 100) {
+                clearInterval(loadInterval);
+                document.querySelector('#load-msg').innerText = "System ready. Let's hack reality.";
+            }
         }, 30);
         // AR PRONTA
         scene.addEventListener("arReady", () => {
+            console.log("%c✅ AR SYSTEM ONLINE", "color: #00ff41; font-weight: bold;");
             setTimeout(() => {
                 loader.style.opacity = "0";
                 setTimeout(() => loader.style.display = "none", 500);
         // ERROR HANDLING
         scene.addEventListener("arError", (ev) => {
+            console.error("💀 FATAL ERROR:", ev);
+            alert("⚠️ Camera Access Denied!\n\nPlease grant camera permissions or check if another app is using it.\n\n(Yes, we need it. No, we won't spy on you. Probably.)");
         });
         // TARGET FOUND
         target.addEventListener("targetFound", () => {
+            console.log("🎯 TARGET ACQUIRED");
             video.play();
+            statusText.innerText = "LOCKED_ON";
             statusText.style.color = "#fff";
             statusText.classList.remove("animate-pulse");
             aimOverlay.style.opacity = "0";
+            if(navigator.vibrate) navigator.vibrate([30, 10, 30]);
         });
         // TARGET LOST
         target.addEventListener("targetLost", () => {
+            console.log("❌ TARGET LOST");
             video.pause();
+            statusText.innerText = "SEARCHING...";
             statusText.style.color = "#00ff41";
             statusText.classList.add("animate-pulse");
             aimOverlay.style.opacity = "1";
         audioBtn.addEventListener('click', () => {
             if (!isAudioEnabled) {
                 video.muted = false;
+                fallbackVideo.muted = false;
                 isAudioEnabled = true;
                 audioText.innerText = "AUDIO ON";
                 audioBtn.classList.add("bg-[#00ff41]", "text-black");
                 audioBtn.classList.remove("bg-[#00ff41]/10", "text-[#00ff41]");
+                console.log("🔊 Audio stream activated");
                 if(navigator.vibrate) navigator.vibrate(50);
                 setTimeout(() => {
                 }, 1500);
             }
         });
+        // FALLBACK MODE
+        fallbackBtn.addEventListener('click', () => {
+            fallbackPlayer.style.display = 'block';
+            fallbackVideo.play();
+            console.log("🆘 FALLBACK MODE ACTIVATED");
+            if(navigator.vibrate) navigator.vibrate(100);
+        });
+        closeFallback.addEventListener('click', () => {
+            fallbackPlayer.style.display = 'none';
+            fallbackVideo.pause();
+        });
+        // Easter Egg 3: Double tap
+        let lastTap = 0;
+        document.addEventListener('touchend', (e) => {
+            const currentTime = new Date().getTime();
+            const tapLength = currentTime - lastTap;
+            if (tapLength < 300 && tapLength > 0) {
+                console.log("🤫 Secret message: There is no spoon.");
+            }
+            lastTap = currentTime;
+        });
     </script>
 </body>
 </html>