Spaces:
Running
Running
| <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" /> | |
| <title>AR Neural Link | MindAR</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.2.0/aframe.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-image.prod.js"></script> | |
| <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-image-aframe.prod.js"></script> | |
| <style> | |
| :root { --neon-green: #00ff41; --dark-bg: #050505; } | |
| body { margin: 0; background-color: black; font-family: 'Fira Code', monospace; overflow: hidden; } | |
| /* FX: Scanlines Overlay - RIDOTTO PER VISIBILITÀ VIDEO */ | |
| .scanlines { | |
| background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1)); | |
| background-size: 100% 4px; | |
| position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; | |
| } | |
| /* FX: CRT Flicker */ | |
| .crt-flicker { animation: flicker 0.15s infinite; pointer-events: none; position: fixed; inset: 0; background: rgba(0,255,65,0.01); z-index: 49;} | |
| @keyframes flicker { 0% { opacity: 0.95; } 50% { opacity: 1.0; } 100% { opacity: 0.95; } } | |
| /* UI Elements */ | |
| .tech-border { border: 1px solid var(--neon-green); box-shadow: 0 0 10px rgba(0, 255, 65, 0.2); background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); } | |
| .blinking-cursor { animation: blink 1s step-end infinite; } | |
| @keyframes blink { 50% { opacity: 0; } } | |
| /* Hide VR Button */ | |
| .a-enter-vr-button { display: none ; } | |
| /* --- STILI NUOVA BARRA DI CARICAMENTO --- */ | |
| #custom-loader { | |
| position: fixed; inset: 0; z-index: 9999; background: #000; | |
| display: flex; flex-direction: column; align-items: center; justify-content: center; | |
| transition: opacity 0.5s ease-out; | |
| } | |
| .loader-track { | |
| width: 280px; | |
| height: 24px; | |
| border: 1px solid #333; | |
| padding: 2px; | |
| position: relative; | |
| background: rgba(0, 255, 65, 0.05); | |
| box-shadow: 0 0 10px rgba(0, 255, 65, 0.1); | |
| } | |
| .loader-fill { | |
| height: 100%; | |
| background-color: var(--neon-green); | |
| width: 0%; | |
| box-shadow: 0 0 15px var(--neon-green); | |
| position: relative; | |
| /* Effetto righe sulla barra */ | |
| background-image: repeating-linear-gradient( | |
| 45deg, | |
| transparent, | |
| transparent 10px, | |
| rgba(0, 0, 0, 0.2) 10px, | |
| rgba(0, 0, 0, 0.2) 20px | |
| ); | |
| animation: loadProgress 2.5s ease-out forwards; | |
| } | |
| @keyframes loadProgress { | |
| 0% { width: 0%; } | |
| 20% { width: 10%; } | |
| 40% { width: 45%; } | |
| 60% { width: 60%; } | |
| 80% { width: 90%; } | |
| 100% { width: 100%; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- 1. CUSTOM LOADER SCREEN (Migliorato) --> | |
| <div id="custom-loader"> | |
| <div class="flex flex-col items-center gap-2 w-full max-w-sm px-6"> | |
| <div class="w-full flex justify-between text-[#00ff41] text-xs font-mono mb-1 uppercase tracking-widest opacity-80"> | |
| <span>System Boot</span> | |
| <span id="loading-percent">0%</span> | |
| </div> | |
| <div class="loader-track"> | |
| <div class="loader-fill"></div> | |
| </div> | |
| <div class="w-full mt-2 h-4 text-[#00ff41]/60 text-[10px] font-mono text-left"> | |
| > <span id="loading-text">INITIALIZING CORE...</span><span class="blinking-cursor">_</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 2. VISUAL FX LAYERS --> | |
| <div class="scanlines"></div> | |
| <div class="crt-flicker"></div> | |
| <!-- 3. UI INTERFACE (OVERLAY) --> | |
| <div id="ui-layer" class="fixed inset-0 z-[100] flex flex-col justify-between p-6 pointer-events-none"> | |
| <!-- Top Bar --> | |
| <div class="flex justify-between items-start pointer-events-auto"> | |
| <div class="text-[10px] md:text-xs text-[#00ff41] font-bold tracking-widest bg-black/80 px-2 py-1 border-l-2 border-[#00ff41]"> | |
| SYS.STATUS: <span id="sys-status" class="animate-pulse">SCANNING</span> | |
| </div> | |
| <!-- EXIT BUTTON (LINK A ./index.html) --> | |
| <a href="./index.html" class="flex items-center justify-center w-8 h-8 md:w-10 md:h-10 border border-[#00ff41] bg-black/80 text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-all backdrop-blur-sm shadow-[0_0_10px_rgba(0,255,65,0.2)]"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> | |
| </a> | |
| </div> | |
| <!-- Center Aim (Crosshair) - Scompare al tag found --> | |
| <div id="aim-overlay" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 border border-[#00ff41]/30 rounded-lg flex items-center justify-center transition-opacity duration-300 pointer-events-none"> | |
| <div class="absolute w-full h-[1px] bg-[#00ff41]/20"></div> | |
| <div class="absolute h-full w-[1px] bg-[#00ff41]/20"></div> | |
| <div class="absolute top-0 left-0 w-4 h-4 border-t-2 border-l-2 border-[#00ff41]"></div> | |
| <div class="absolute top-0 right-0 w-4 h-4 border-t-2 border-r-2 border-[#00ff41]"></div> | |
| <div class="absolute bottom-0 left-0 w-4 h-4 border-b-2 border-l-2 border-[#00ff41]"></div> | |
| <div class="absolute bottom-0 right-0 w-4 h-4 border-b-2 border-r-2 border-[#00ff41]"></div> | |
| <div id="target-msg" class="mt-32 text-[#00ff41] text-xs font-bold tracking-widest bg-black/80 px-2"> | |
| [ INQUADRA IL TAG ] | |
| </div> | |
| </div> | |
| <!-- Bottom Controls --> | |
| <div class="w-full max-w-md mx-auto pointer-events-auto transition-all duration-500 text-center"> | |
| <!-- Audio Hint Button --> | |
| <button id="audio-btn" class="tech-border px-6 py-3 text-[#00ff41] text-sm font-bold uppercase tracking-widest hover:bg-[#00ff41] hover:text-black transition-all group w-full mb-4"> | |
| <span class="mr-2 group-hover:animate-pulse">🔊</span> | |
| <span id="audio-text">CLICCA PER AUDIO</span> | |
| </button> | |
| <div class="text-[10px] text-[#00ff41]/50 text-center font-mono pointer-events-none"> | |
| > WAITING FOR NEURAL HANDSHAKE<span class="blinking-cursor">_</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 4. MINDAR SCENE --> | |
| <!-- uiLoading: no -> Disabilita il loader blu di default --> | |
| <a-scene | |
| mindar-image="imageTargetSrc: img/targets.mind; filterMinCF:0.0001; filterBeta: 0.001; uiLoading: no; uiScanning: no;" | |
| color-space="sRGB" | |
| renderer="colorManagement: true, physicallyCorrectLights" | |
| vr-mode-ui="enabled: false" | |
| device-orientation-permission-ui="enabled: false"> | |
| <a-assets> | |
| <video id="vid" src="https://matteoscript-innovationlab.static.hf.space/img/video.mp4" autoplay loop muted playsinline webkit-playsinline crossorigin="anonymous"></video> | |
| </a-assets> | |
| <a-camera position="0 0 0" look-controls="enabled: false"></a-camera> | |
| <a-entity id="example-target" mindar-image-target="targetIndex: 0"> | |
| <!-- Il Video --> | |
| <a-entity id="myVid" | |
| geometry="primitive: plane; width: 1; height: 0.5625" | |
| material="src: #vid; shader: flat; transparent: true; opacity: 1" | |
| position="0 0 0"> | |
| </a-entity> | |
| <!-- CORNICE VERDE (Green Frame) attorno al video --> | |
| <a-plane position="0 0.29 0" width="1.04" height="0.02" color="#00ff41" material="shader: flat"></a-plane> | |
| <a-plane position="0 -0.29 0" width="1.04" height="0.02" color="#00ff41" material="shader: flat"></a-plane> | |
| <a-plane position="-0.51 0 0" width="0.02" height="0.6" color="#00ff41" material="shader: flat"></a-plane> | |
| <a-plane position="0.51 0 0" width="0.02" height="0.6" color="#00ff41" material="shader: flat"></a-plane> | |
| </a-entity> | |
| </a-scene> | |
| <!-- 5. LOGIC SCRIPT --> | |
| <script> | |
| const video = document.querySelector("#vid"); | |
| const target = document.querySelector("#example-target"); | |
| const statusText = document.querySelector("#sys-status"); | |
| const aimOverlay = document.querySelector("#aim-overlay"); | |
| const audioBtn = document.querySelector("#audio-btn"); | |
| const audioText = document.querySelector("#audio-text"); | |
| const loader = document.querySelector("#custom-loader"); | |
| const loadingText = document.querySelector("#loading-text"); | |
| const loadingPercent = document.querySelector("#loading-percent"); | |
| const scene = document.querySelector("a-scene"); | |
| let isAudioEnabled = false; | |
| // FAKE LOADING TEXT ANIMATION | |
| const loadMessages = [ | |
| "CALIBRATING SENSORS...", | |
| "LOADING NEURAL MESH...", | |
| "DECRYPTING VIDEO STREAM...", | |
| "SYNCING AR MATRIX...", | |
| "READY." | |
| ]; | |
| let msgIndex = 0; | |
| let percent = 0; | |
| const textInterval = setInterval(() => { | |
| if(msgIndex < loadMessages.length) { | |
| loadingText.innerText = loadMessages[msgIndex]; | |
| msgIndex++; | |
| } | |
| }, 500); | |
| const percentInterval = setInterval(() => { | |
| if(percent < 100) { | |
| percent += Math.floor(Math.random() * 5) + 2; | |
| if(percent > 100) percent = 100; | |
| loadingPercent.innerText = percent + "%"; | |
| } else { | |
| clearInterval(percentInterval); | |
| } | |
| }, 100); | |
| // GESTIONE CUSTOM LOADER (AR READY) | |
| scene.addEventListener("arReady", (event) => { | |
| console.log("MindAR Ready"); | |
| clearInterval(textInterval); | |
| clearInterval(percentInterval); | |
| loadingPercent.innerText = "100%"; | |
| loadingText.innerText = "ACCESS GRANTED."; | |
| // Ritardo per far vedere il 100% | |
| setTimeout(() => { | |
| loader.style.opacity = "0"; | |
| setTimeout(() => { | |
| loader.style.display = "none"; | |
| }, 500); | |
| }, 800); | |
| }); | |
| // TARGET FOUND | |
| target.addEventListener("targetFound", event => { | |
| console.log("Target trovato"); | |
| video.play(); | |
| statusText.innerText = "LOCKED"; | |
| statusText.classList.remove("animate-pulse"); | |
| statusText.style.color = "#fff"; | |
| aimOverlay.style.opacity = '0'; | |
| }); | |
| // TARGET LOST | |
| target.addEventListener("targetLost", event => { | |
| console.log("Target perso"); | |
| video.pause(); | |
| statusText.innerText = "SCANNING"; | |
| statusText.classList.add("animate-pulse"); | |
| statusText.style.color = "#00ff41"; | |
| aimOverlay.style.opacity = '1'; | |
| }); | |
| // AUDIO TOGGLE | |
| audioBtn.addEventListener('click', function() { | |
| if (!isAudioEnabled) { | |
| video.muted = false; | |
| isAudioEnabled = true; | |
| audioText.innerText = "AUDIO: ATTIVO"; | |
| audioBtn.classList.add("bg-[#00ff41]", "text-black"); | |
| audioBtn.classList.remove("hover:bg-[#00ff41]", "hover:text-black", "tech-border"); | |
| audioBtn.style.boxShadow = "0 0 15px #00ff41"; | |
| setTimeout(() => { | |
| audioBtn.style.opacity = '0'; | |
| audioBtn.style.pointerEvents = 'none'; | |
| }, 2000); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |