Spaces:

MatteoScript
/

InnovationLab

Running

File size: 12,585 Bytes

<!DOCTYPE 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" />
    <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 !important; }

        /* --- 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>